chenshoulin
442cbbd734
先截图审视现状，再针对性修改。主要问题与改动如下。 工具栏 - 标签筛选从「平铺全部标签」改为下拉面板，标签多时不再换行挤爆工具栏 - 备份与快捷键帮助移到导航栏 —— 它们是应用级操作，不该挤在看板工具栏里， 顺带修好了「? 帮助只在看板可用」的问题 - 到期统计（今日到期 / 逾期）合并为可点击的筛选入口，去掉两个独立控件 - 移动端工具栏从占半屏降到三行紧凑布局 卡片 - 优先级从彩色胶囊改为左侧色条，扫视一列时比读文字更快分辨轻重 - 元信息改为「优先级 · 日期 · 标签」的轻量文本行，不再三种胶囊叠在一起 - 完成态用勾选图标 + 降低不透明度 布局 - 今日视图限宽居中（max-w-3xl）：此前 1440px 下卡片被拉满整屏， 标题与元信息之间出现大片空白 - 修复移动端卡片被压成细条：TaskCard 的 overflow-hidden（用于裁切左侧色条） 会让 flex 项的最小尺寸解析为 0，补 shrink-0 修正； 同时改为移动端按内容高度堆叠、桌面端列内滚动 其他 - 导航栏品牌改用看板图标，消除「看板」重复出现两次 - 统一卡片阴影、圆角与键盘焦点样式 - 新增 scripts/screenshot.mjs，便于后续对照审视视觉改动 验证：单元测试 452 个、端到端测试 23 个全部通过，lint 与构建无错误。
101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
import { useUiStore } from '@/stores/ui'
|
|
|
|
const ui = useUiStore()
|
|
|
|
const LINKS = [
|
|
{ to: '/', label: '看板' },
|
|
{ to: '/today', label: '今日' },
|
|
] as const
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="flex items-center gap-3 border-b border-slate-200 bg-white/85 px-4 py-2.5 backdrop-blur-sm md:px-6"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
class="flex size-6 shrink-0 items-center justify-center rounded-md bg-slate-900 text-white"
|
|
>
|
|
<svg viewBox="0 0 16 16" class="size-3.5" aria-hidden="true">
|
|
<rect x="1" y="2" width="3.4" height="12" rx="1.2" fill="currentColor" opacity="0.5" />
|
|
<rect x="6.3" y="2" width="3.4" height="8.5" rx="1.2" fill="currentColor" />
|
|
<rect x="11.6" y="2" width="3.4" height="5" rx="1.2" fill="currentColor" opacity="0.75" />
|
|
</svg>
|
|
</span>
|
|
<span class="hidden text-sm font-semibold tracking-tight text-slate-900 sm:inline">看板</span>
|
|
</div>
|
|
|
|
<span class="h-5 w-px bg-slate-200" aria-hidden="true" />
|
|
|
|
<nav class="flex items-center gap-0.5" aria-label="主导航">
|
|
<RouterLink
|
|
v-for="link in LINKS"
|
|
:key="link.to"
|
|
v-slot="{ href, navigate, isExactActive }"
|
|
:to="link.to"
|
|
custom
|
|
>
|
|
<a
|
|
:href="href"
|
|
class="rounded-md px-3 py-1.5 text-sm transition"
|
|
:class="
|
|
isExactActive
|
|
? 'bg-slate-900 font-medium text-white shadow-sm'
|
|
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
|
|
"
|
|
:aria-current="isExactActive ? 'page' : undefined"
|
|
@click="navigate"
|
|
>
|
|
{{ link.label }}
|
|
</a>
|
|
</RouterLink>
|
|
</nav>
|
|
|
|
<div class="ml-auto flex items-center gap-1.5">
|
|
<button
|
|
type="button"
|
|
class="flex size-8 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
|
|
aria-label="快捷键帮助"
|
|
@click="ui.openHelp()"
|
|
>
|
|
<svg viewBox="0 0 20 20" class="size-4" fill="none" aria-hidden="true">
|
|
<circle cx="10" cy="10" r="7.25" stroke="currentColor" stroke-width="1.5" />
|
|
<path
|
|
d="M8.2 7.9a1.9 1.9 0 1 1 2.6 1.75c-.5.22-.8.7-.8 1.25v.35"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
<circle cx="10" cy="13.7" r="0.9" fill="currentColor" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900"
|
|
@click="ui.openBackup()"
|
|
>
|
|
<svg viewBox="0 0 20 20" class="size-3.5" fill="none" aria-hidden="true">
|
|
<path
|
|
d="M10 13V3.5m0 0L6.5 7M10 3.5 13.5 7"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M3.5 12.5v2A2 2 0 0 0 5.5 16.5h9a2 2 0 0 0 2-2v-2"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
备份
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</template>
|