fix(ui): 统一工具栏控件高度
问题:工具栏第一行的控件高度不一致(搜索框与标签按钮 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 个通过。
This commit is contained in:
@@ -2,3 +2,4 @@ dist
|
|||||||
coverage
|
coverage
|
||||||
node_modules
|
node_modules
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
.screenshots
|
||||||
|
|||||||
+1
-1
@@ -5,7 +5,7 @@ import globals from 'globals'
|
|||||||
import tseslint from 'typescript-eslint'
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
export default tseslint.config(
|
export default tseslint.config(
|
||||||
{ ignores: ['dist/**', 'node_modules/**', 'coverage/**'] },
|
{ ignores: ['dist/**', 'node_modules/**', 'coverage/**', '.screenshots/**'] },
|
||||||
js.configs.recommended,
|
js.configs.recommended,
|
||||||
tseslint.configs.recommended,
|
tseslint.configs.recommended,
|
||||||
pluginVue.configs['flat/recommended'],
|
pluginVue.configs['flat/recommended'],
|
||||||
|
|||||||
@@ -67,14 +67,14 @@ defineExpose({ focusSearch })
|
|||||||
ref="searchRef"
|
ref="searchRef"
|
||||||
v-model="keyword"
|
v-model="keyword"
|
||||||
type="search"
|
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="搜索标题或描述"
|
placeholder="搜索标题或描述"
|
||||||
aria-label="搜索任务"
|
aria-label="搜索任务"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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"
|
role="group"
|
||||||
aria-label="按优先级筛选"
|
aria-label="按优先级筛选"
|
||||||
>
|
>
|
||||||
@@ -82,7 +82,7 @@ defineExpose({ focusSearch })
|
|||||||
v-for="value in PRIORITY_ORDER"
|
v-for="value in PRIORITY_ORDER"
|
||||||
:key="value"
|
:key="value"
|
||||||
type="button"
|
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="
|
:class="
|
||||||
priorities.includes(value)
|
priorities.includes(value)
|
||||||
? 'bg-slate-900 font-medium text-white dark:bg-slate-100 dark:text-slate-900'
|
? '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">
|
<div class="ml-auto flex items-center gap-1.5">
|
||||||
<button
|
<button
|
||||||
type="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="
|
:class="
|
||||||
due === 'today'
|
due === 'today'
|
||||||
? 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'
|
? '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
|
<button
|
||||||
type="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="
|
:class="
|
||||||
due === 'overdue'
|
due === 'overdue'
|
||||||
? 'border-rose-300 bg-rose-50 text-rose-700 dark:border-rose-700 dark:bg-rose-950 dark:text-rose-300'
|
? '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
|
<button
|
||||||
v-if="archivableCount > 0"
|
v-if="archivableCount > 0"
|
||||||
type="button"
|
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')"
|
@click="emit('archive')"
|
||||||
>
|
>
|
||||||
归档 {{ archivableCount }} 个已完成
|
归档 {{ archivableCount }} 个已完成
|
||||||
@@ -153,7 +153,7 @@ defineExpose({ focusSearch })
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
type="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="
|
:class="
|
||||||
includeArchived
|
includeArchived
|
||||||
? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
|
? '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
|
<button
|
||||||
v-if="active"
|
v-if="active"
|
||||||
type="button"
|
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()"
|
@click="filters.clear()"
|
||||||
>
|
>
|
||||||
清空筛选
|
清空筛选
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
|
|||||||
<div ref="rootRef" class="relative">
|
<div ref="rootRef" class="relative">
|
||||||
<button
|
<button
|
||||||
type="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="
|
:class="
|
||||||
selected.length > 0
|
selected.length > 0
|
||||||
? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
|
? 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-700 dark:bg-sky-950 dark:text-sky-300'
|
||||||
|
|||||||
Reference in New Issue
Block a user