From 00af665f12b80a6b5b26496e2767039a0963c27f Mon Sep 17 00:00:00 2001
From: chenshoulin <chenshoulin@goldenstand.cn>
Date: Sun, 18 Oct 2026 17:56:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E7=BB=9F=E4=B8=80=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E6=8E=A7=E4=BB=B6=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：工具栏第一行的控件高度不一致（搜索框与标签按钮 34px，优先级分组与
到期统计按钮 30px，第二行按钮 26px），排在一起参差不齐。

根因：高度是靠 padding + line-height 撑出来的，而各组字号不同——搜索框和
标签按钮用 text-sm（行高 20px），优先级与统计按钮用 text-xs（行高 16px），
两者的 py 又都是 1.5 和 1，于是自然差出 4~8px。

修复：改为显式固定高度，不再受字号影响。
- 第一行（搜索框 / 优先级分组 / 标签 / 今日到期 / 逾期）统一 h-9（36px）
  - 优先级分组内的按钮改用 h-full 填满容器内区，不再靠 padding 撑
- 第二行（归档 / 显示归档 / 清空筛选）统一 h-8（32px），
  与第一行形成明确的次级层级

顺手把 .screenshots/ 加入 ESLint 与 Prettier 忽略——那是截图脚本的产物目录。

验证：用 Playwright 实测各控件 boundingBox，第一行全部 36px；单元测试 480 个、
E2E 25 个通过。
---
 .prettierignore                 |  1 +
 eslint.config.js                |  2 +-
 src/components/BoardToolbar.vue | 16 ++++++++--------
 src/components/TagFilter.vue    |  2 +-
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index 012fbaa..08872cc 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,3 +2,4 @@ dist
 coverage
 node_modules
 package-lock.json
+.screenshots
diff --git a/eslint.config.js b/eslint.config.js
index b437ccc..7b04574 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,7 +5,7 @@ import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist/**', 'node_modules/**', 'coverage/**'] },
+  { ignores: ['dist/**', 'node_modules/**', 'coverage/**', '.screenshots/**'] },
   js.configs.recommended,
   tseslint.configs.recommended,
   pluginVue.configs['flat/recommended'],
diff --git a/src/components/BoardToolbar.vue b/src/components/BoardToolbar.vue
index 582614c..6b01f0b 100644
--- a/src/components/BoardToolbar.vue
+++ b/src/components/BoardToolbar.vue
@@ -67,14 +67,14 @@ defineExpose({ focusSearch })
           ref="searchRef"
           v-model="keyword"
           type="search"
-          class="w-full rounded-md border border-slate-200 bg-white py-1.5 pr-2.5 pl-8 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:border-sky-600 dark:focus:ring-sky-950"
+          class="h-9 w-full rounded-md border border-slate-200 bg-white pr-2.5 pl-8 text-sm text-slate-700 outline-none transition placeholder:text-slate-400 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:placeholder:text-slate-500 dark:focus:border-sky-600 dark:focus:ring-sky-950"
           placeholder="搜索标题或描述"
           aria-label="搜索任务"
         />
       </div>
 
       <div
-        class="flex items-center gap-0.5 rounded-md border border-slate-200 bg-white p-0.5 dark:border-slate-700 dark:bg-slate-900"
+        class="flex h-9 items-center gap-0.5 rounded-md border border-slate-200 bg-white p-0.5 dark:border-slate-700 dark:bg-slate-900"
         role="group"
         aria-label="按优先级筛选"
       >
@@ -82,7 +82,7 @@ defineExpose({ focusSearch })
           v-for="value in PRIORITY_ORDER"
           :key="value"
           type="button"
-          class="rounded px-2.5 py-1 text-xs transition"
+          class="flex h-full items-center rounded px-2.5 text-xs transition"
           :class="
             priorities.includes(value)
               ? 'bg-slate-900 font-medium text-white dark:bg-slate-100 dark:text-slate-900'
@@ -105,7 +105,7 @@ defineExpose({ focusSearch })
       <div class="ml-auto flex items-center gap-1.5">
         <button
           type="button"
-          class="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs transition"
+          class="flex h-9 items-center gap-1.5 rounded-md border px-2.5 text-xs transition"
           :class="
             due === 'today'
               ? 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'
@@ -120,7 +120,7 @@ defineExpose({ focusSearch })
 
         <button
           type="button"
-          class="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs transition"
+          class="flex h-9 items-center gap-1.5 rounded-md border px-2.5 text-xs transition"
           :class="
             due === 'overdue'
               ? 'border-rose-300 bg-rose-50 text-rose-700 dark:border-rose-700 dark:bg-rose-950 dark:text-rose-300'
@@ -145,7 +145,7 @@ defineExpose({ focusSearch })
         <button
           v-if="archivableCount > 0"
           type="button"
-          class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-xs text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
+          class="flex h-8 items-center rounded-md border border-slate-200 bg-white px-2.5 text-xs text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800"
           @click="emit('archive')"
         >
           归档 {{ archivableCount }} 个已完成
@@ -153,7 +153,7 @@ defineExpose({ focusSearch })
 
         <button
           type="button"
-          class="rounded-md border px-2.5 py-1 text-xs transition"
+          class="flex h-8 items-center rounded-md border px-2.5 text-xs transition"
           :class="
             includeArchived
               ? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
@@ -168,7 +168,7 @@ defineExpose({ focusSearch })
         <button
           v-if="active"
           type="button"
-          class="rounded-md px-2.5 py-1 text-xs text-slate-500 underline-offset-2 transition hover:text-slate-800 hover:underline dark:text-slate-400 dark:hover:text-slate-200"
+          class="flex h-8 items-center rounded-md px-2.5 text-xs text-slate-500 underline-offset-2 transition hover:text-slate-800 hover:underline dark:text-slate-400 dark:hover:text-slate-200"
           @click="filters.clear()"
         >
           清空筛选
diff --git a/src/components/TagFilter.vue b/src/components/TagFilter.vue
index 21b2586..6247bd0 100644
--- a/src/components/TagFilter.vue
+++ b/src/components/TagFilter.vue
@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
   <div ref="rootRef" class="relative">
     <button
       type="button"
-      class="flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-sm transition"
+      class="flex h-9 items-center gap-1.5 rounded-md border px-2.5 text-sm transition"
       :class="
         selected.length > 0
           ? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'