feat: Checkbox 组件带 SVG 勾画动画，summary 改用 RippleButton

setube · setube · commit 45ce65509044 · 2026-05-11T17:54:23.000+08:00
新增 src/ui/components/Checkbox.vue，svg path stroke-dashoffset 24→0 over 0.24s 形成手绘勾选效果，支持 boolean 与 array v-model + :value 两种模式，settings 与 popup 共 5 处原生 checkbox 替换。popup summary 三个数字块从 native button 改用 RippleButton 通用按钮组件，与其它操作按钮风格一致；"技术"块加点击事件 focusTechnologyList，将列表分类重置到 FOCUS_CATEGORY、关闭底部面板、滚动到顶部。将版本号提升到 1.2.97。
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stackprism",
   "private": true,
-  "version": "1.2.96",
+  "version": "1.2.97",
   "type": "module",
   "description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",
   "scripts": {
diff --git a/src/ui/components/Checkbox.vue b/src/ui/components/Checkbox.vue
@@ -0,0 +1,130 @@
+<template>
+  <span class="sp-checkbox" :class="{ checked: isChecked, disabled }">
+    <input type="checkbox" class="sp-checkbox-input" :checked="isChecked" :disabled="disabled" @change="onChange" />
+    <span class="sp-checkbox-box" aria-hidden="true">
+      <svg
+        class="sp-checkbox-mark"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue: boolean | unknown[]
+      value?: unknown
+      disabled?: boolean
+    }>(),
+    {
+      disabled: false
+    }
+  )
+
+  const emit = defineEmits<{
+    'update:modelValue': [value: boolean | unknown[]]
+    change: [event: Event]
+  }>()
+
+  const isChecked = computed(() => {
+    if (Array.isArray(props.modelValue)) {
+      return props.value !== undefined && props.modelValue.includes(props.value)
+    }
+    return Boolean(props.modelValue)
+  })
+
+  const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    if (Array.isArray(props.modelValue)) {
+      const next = [...props.modelValue]
+      const idx = next.indexOf(props.value)
+      if (target.checked && idx === -1) next.push(props.value)
+      else if (!target.checked && idx !== -1) next.splice(idx, 1)
+      emit('update:modelValue', next)
+    } else {
+      emit('update:modelValue', target.checked)
+    }
+    emit('change', event)
+  }
+</script>
+
+<style scoped>
+  .sp-checkbox {
+    align-items: center;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sp-checkbox-input {
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    height: 14px;
+    inset: 0;
+    margin: 0;
+    opacity: 0;
+    position: absolute;
+    width: 14px;
+  }
+
+  .sp-checkbox-input:disabled {
+    cursor: not-allowed;
+  }
+
+  .sp-checkbox-box {
+    align-items: center;
+    background: var(--panel);
+    border: 1.5px solid var(--line);
+    border-radius: 3px;
+    color: #ffffff;
+    display: inline-flex;
+    flex-shrink: 0;
+    height: 14px;
+    justify-content: center;
+    pointer-events: none;
+    transition:
+      background 0.15s ease,
+      border-color 0.15s ease;
+    width: 14px;
+  }
+
+  .sp-checkbox:hover .sp-checkbox-box {
+    border-color: var(--accent);
+  }
+
+  .sp-checkbox.checked .sp-checkbox-box {
+    background: var(--accent);
+    border-color: var(--accent);
+  }
+
+  .sp-checkbox.disabled {
+    opacity: 0.5;
+  }
+
+  .sp-checkbox-mark {
+    height: 10px;
+    stroke-dasharray: 24;
+    stroke-dashoffset: 24;
+    transition: stroke-dashoffset 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 10px;
+  }
+
+  .sp-checkbox.checked .sp-checkbox-mark {
+    stroke-dashoffset: 0;
+  }
+
+  .sp-checkbox-input:focus-visible + .sp-checkbox-box {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+</style>
diff --git a/src/ui/popup/Popup.vue b/src/ui/popup/Popup.vue
@@ -47,21 +47,23 @@
 
       <template v-else>
         <section class="summary" aria-label="检测概览">
-          <div>
+          <RippleButton
+            :class="['summary-tile', { active: state.activeCategory === FOCUS_CATEGORY && !footerPanel }]"
+            title="返回重点列表"
+            @click="focusTechnologyList"
+          >
             <span>{{ animatedTotal }}</span>
             <label>技术</label>
-          </div>
-          <button
-            type="button"
+          </RippleButton>
+          <RippleButton
             :class="['summary-tile', { active: footerPanel === 'resources' }]"
             title="查看抓取到的资源列表"
             @click="openSummaryDetail('resources')"
           >
             <span>{{ animatedResource }}</span>
             <label>资源</label>
-          </button>
-          <button
-            type="button"
+          </RippleButton>
+          <RippleButton
             :class="['summary-tile', { active: footerPanel === 'headers' }]"
             title="查看主文档响应头"
             @click="openSummaryDetail('headers')"
@@ -71,7 +73,7 @@
               响应头
               <Loader2 v-if="isDetecting" class="detection-spinner" :size="12" :stroke-width="2" />
             </label>
-          </button>
+          </RippleButton>
         </section>
 
         <nav class="filter-bar" aria-label="技术分类过滤">
@@ -195,15 +197,15 @@
           </div>
           <div class="search-options">
             <label>
-              <input v-model="search.caseSensitive" type="checkbox" />
+              <Checkbox v-model="search.caseSensitive" />
               区分大小写
             </label>
             <label>
-              <input v-model="search.wholeWord" type="checkbox" />
+              <Checkbox v-model="search.wholeWord" />
               全字匹配
             </label>
             <label>
-              <input v-model="search.useRegex" type="checkbox" />
+              <Checkbox v-model="search.useRegex" />
               正则表达式
             </label>
           </div>
@@ -283,6 +285,7 @@
     X
   } from 'lucide-vue-next'
   import Select from '@/ui/components/Select.vue'
+  import Checkbox from '@/ui/components/Checkbox.vue'
   import RippleButton from '@/ui/components/RippleButton.vue'
   import { categoryIndex, confidenceClass, confidenceRank } from '@/utils/category-order'
   import { applyCustomCss } from '@/utils/apply-custom-css'
@@ -723,6 +726,12 @@
     state.activeCategory = category
   }
 
+  const focusTechnologyList = () => {
+    closeFooterPanel()
+    state.activeCategory = FOCUS_CATEGORY
+    sectionsScroller.value?.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   const openTechnologyLink = (tech: any) => {
     if (!tech.url) return
     chrome.tabs.create({ url: tech.url })
diff --git a/src/ui/settings/Settings.vue b/src/ui/settings/Settings.vue
@@ -47,7 +47,7 @@
       </div>
       <div class="category-grid">
         <label v-for="cat in CATEGORY_ORDER" :key="cat" class="toggle-item">
-          <input v-model="enabledCategories[cat]" type="checkbox" :value="cat" @change="collectCategorySettings" />
+          <Checkbox v-model="enabledCategories[cat]" :value="cat" @change="collectCategorySettings" />
           {{ cat }}
         </label>
       </div>
@@ -109,7 +109,7 @@
 
       <div class="match-targets" aria-label="匹配范围">
         <label v-for="target in MATCH_TARGETS" :key="target.value">
-          <input v-model="form.matchIn" type="checkbox" :value="target.value" />
+          <Checkbox v-model="form.matchIn" :value="target.value" />
           {{ target.label }}
         </label>
       </div>
@@ -178,6 +178,7 @@
   import { onMounted, reactive, ref, watch, computed } from 'vue'
   import { BookOpen, ExternalLink, Inbox, Monitor, Moon, Pencil, RotateCcw, Save, Sun, Trash2 } from 'lucide-vue-next'
   import Select from '@/ui/components/Select.vue'
+  import Checkbox from '@/ui/components/Checkbox.vue'
   import RippleButton from '@/ui/components/RippleButton.vue'
   import { CATEGORY_ORDER } from '@/utils/category-order'
   import { applyCustomCss } from '@/utils/apply-custom-css'

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "stackprism",`
`3`	`3`	`"private": true,`
`4`		`- "version": "1.2.96",`
	`4`	`+ "version": "1.2.97",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",`
`7`	`7`	`"scripts": {`