8 Commits

Include renames

Author	SHA1	Message	Date
chenshoulin	9ee1261b90	feat(ui): 重做深色悬停与键盘焦点，补齐弹层出场动效 ... 悬停：上一版靠「底色跳两档 + 四边边框一起提亮 + 外圈白光晕 + 白环」制造悬浮感， 五个变化同向叠加，结果是整张卡片均匀发亮、看着像换了张更浅的卡，光晕还把边缘糊住。 改用明暗方向表达厚度：新增受光层伪元素（顶部白 7% → 底部黑 14%，悬停淡入）， 配一道锐利的接触阴影压实边界、一层远处柔化投影作高度暗示；底色与边框各只提一档。 过渡 150ms → 200ms ease-out。新增按下态：位移归零、阴影收紧、受光减弱，卡片「落回纸面」。 焦点：全局描边在深色下掺透明度柔化（sky-400 78%）；卡片被 :focus-visible 时与悬停 一致地抬起并受光，焦点环退为最后一道提示，不再是一圈生硬方框。顺带删掉 :focus-visible 里的 border-radius: 4px —— 对带 rounded-* 的元素无效（layer 优先级）， 对没圆角的元素反而会让聚焦瞬间跳一下。 动效：新增 pop-in(160ms) / sheet-in(260ms) / scrim-in(200ms) 三组关键帧， 下拉从锚点上方落入、抽屉自右侧滑入、遮罩淡入，组件上一律配 motion-reduce:animate-none。 只做入场不做退场：关闭是用户主动取消，瞬时消失更利落；做退场要引入 Vue Transition， 会牵扯 SideDrawer 的焦点与卸载时序，收益不抵风险。 实现要点： - Tailwind v4 会把 @theme 的阴影值内联进 --tw-shadow，覆盖 CSS 变量对已生成的工具类 无效，深色阴影因此直接重写 box-shadow，且规则不放进 @layer 以压过原子类； 选择器要按 hover: 变体转义后的类名书写（.hover\:shadow-card-hover），否则静默失效 - 焦点态位移不能只改 --tw-translate-y：translate 属性声明只存在于 :hover 那条原子类 规则里，焦点态不经过 :hover，必须直接写 translate - 受光层要画在内容之下，因此 TaskCard 的内容容器补了 relative（同为定位元素时按 DOM 顺序绘制，伪元素在前） 验证：vue-tsc -b 与 eslint src 干净，738 例全量单测通过；Playwright 读计算样式确认 动画时序（下拉 @30ms opacity .909、抽屉 translateX 214.77px、遮罩 opacity .419）， 并用垂直亮度剖面确认卡片上亮下暗（内部亮度 33 → 20）。	2026-10-24 00:11:51 +08:00
chenshoulin	69a868a7b1	fix(ui): 深色模式下补齐卡片与弹层的层次感 ... - 深色里沿用浅色那套低透明度黑色阴影没有对比度（黑投影落在 zinc-950 上）， 悬停和弹层都看不出「浮起来」，本次为深色单独配一套阴影与状态色 - 卡片：静止态改「近距投影 + 顶部内高光」；悬停改「外扩暗晕 + 极淡白光晕 + 内高光 12%」，同时底色提亮一档（zinc-900 → zinc-800）、边框提到 zinc-600， 位移补偿到 2px —— 暗底上 1px 的移动肉眼看不出来 - 弹层：新增 shadow-pop-dark / shadow-panel-dark 标记类，只挂给深色底面的 下拉与抽屉；toast 在深色下仍是亮色块（dark:bg-zinc-100），保留原黑色投影， 避免亮块套白光晕发脏 - 抽屉补 dark:border-l：它在深色下既无边框又无可视阴影，与背景糊成一片 - 实现说明：Tailwind v4 会把 @theme 的阴影值内联进 --tw-shadow，覆盖 CSS 变量 对已生成的工具类无效，因此直接重写 box-shadow；规则不放进 @layer 以便稳定 压过原子类，且选择器需按 hover: 变体转义后的类名书写 验证：vue-tsc -b 与 eslint src 干净；TaskCard / SideDrawer / TagFilter / TagInput / BatchSelectionBar 共 114 例单测通过；另用 Playwright 采样像素亮度 与 getComputedStyle 确认深浅两套阴影各自命中。	2026-10-23 08:16:07 +08:00
chenshoulin	85b2d8a30f	style(theme): 深色模式配色由 slate 换成 zinc，去掉整页蓝调 ... slate 色阶带明显蓝调（页面底 B-R=+22、列底 +26），整页发蓝，与目标的中性灰 相差很远。换成 Tailwind 的 zinc 色阶做 1:1 映射，保持原有明暗层次不变 （卡片仍比列背景更亮），只去色偏：改后页面底 B-R=+2、列底 +2。 只替换带 dark: 前缀的类（16 个文件、182 处），外加 style.css 里三处 html.dark 基底色；浅色模式一字未动（页面底仍为 slate-100 #f1f5f9）。	2026-10-18 19:45:23 +08:00
chenshoulin	c45d2b72b4	fix(ui): 日期占位改用不透明遮罩盖住原生文字，不再依赖伪元素着色 ... 把 ::-webkit-datetime-edit 系列伪元素设为透明的做法在部分环境下不生效， 空值日期框会同时显示自绘的「选择日期」与原生「yyyy/mm/日」，文字重叠。 改为用一层不透明背景直接盖住原生提示：靠绘制顺序生效，不依赖伪元素支持 与 CSS 选择器匹配；显示时机由 Vue 状态（空值 && 未聚焦）控制。同时删掉 style.css 里已失效的 .date-field--blank 规则。	2026-10-18 18:54:47 +08:00
chenshoulin	54c08d6ade	fix(ui): 日期占位遮挡改用普通 CSS 规则，不再依赖 Tailwind 任意变体 ... 上一版用 `[&:not(:focus)::-webkit-datetime-edit]:text-transparent` 遮挡 浏览器自带的格式提示，但实际渲染里出现「选择日期」与「yyyy / mm / 日」 重叠——遮罩没生效。 排查过程： - 该规则在 dev 与 build 产物里都存在，dev 环境下 Chrome 与 Edge 均正常 - 用不含项目 CSS 的最小页面做隔离测试：Edge 的基线确实显示 「yyyy / mm / 日」（与反馈截图一致），且三种写法在 Edge 下都有效 - 结论：问题不在规则本身，而在这条规则依赖 Tailwind 扫描器从模板 字符串里提取类名，在 HMR / 增量构建时可能漏掉，属于不可靠的写法 修复：改在 style.css 里写普通 CSS，类名 date-field--blank。 - 刻意放在 @layer 之外：utilities 层优先级高于 components 层， 放进层里会被 text-slate-700 这类工具类盖掉 - 同时覆盖输入框自身与各分段伪元素，避免不同 Chromium 版本 着色位置不一致 - 仍保持「只在未聚焦时遮挡」，否则编辑时看不见正在输入的数字 验证：构建产物含全部 6 条规则；用 preview 起生产构建，Chrome 与 Edge 下字段均只显示「选择日期」。单元测试 485 个、E2E 25 个通过。	2026-10-18 18:19:01 +08:00
chenshoulin	8721e8ab0b	feat: 补齐今日视图待办组、卡片键盘操作、深色模式 ... 今日视图 - 补上「待办」组。此前只收 逾期 / 今天到期 / 进行中，导致待办列里没设 截止日期的任务在今日视图里完全消失 —— 用户明明有一堆事没做，却看到 「今天没有待办事项」。现在只要任务未完成且未归档，就必定出现在某个 分组里（归属优先级：逾期 > 今天到期 > 进行中 > 待办）。 - 统计卡片改为与分组一一对应（逾期 / 今天到期 / 进行中 / 本周完成）， 不再用「今日待办」这种把四组混在一起、与列表长度对不上的指标。 键盘操作（可访问性） - 卡片可聚焦（Tab / 点击），← → 换列、↑ ↓ 列内调序、Enter 打开详情。 - 换列时追加到目标列末尾：用全量长度而不是可见下标，筛选态下也安全； 列内调序要求该列渲染的是全量，否则禁用（与拖拽的规则一致）。 - 移动后手动恢复焦点 —— 卡片跨列会被重建，不恢复的话连续按键会失效。 深色模式 - 三态：跟随系统 / 浅色 / 深色，选择持久化到 localStorage。 - index.html 内联脚本在首帧之前应用主题，避免深色下闪白。 - 用 @custom-variant dark 做 class 控制（而不是纯 media query）， 才能支持「强制浅色」；html 的 color-scheme 让原生控件与滚动条跟随。 验证：单元测试 480 个、端到端测试 25 个全部通过，lint 与构建无错误。 截图脚本新增深色与移动端深色两组，便于后续对照。	2026-10-18 17:48:55 +08:00
chenshoulin	442cbbd734	style: 重做界面视觉与信息层级 ... 先截图审视现状，再针对性修改。主要问题与改动如下。 工具栏 - 标签筛选从「平铺全部标签」改为下拉面板，标签多时不再换行挤爆工具栏 - 备份与快捷键帮助移到导航栏 —— 它们是应用级操作，不该挤在看板工具栏里， 顺带修好了「? 帮助只在看板可用」的问题 - 到期统计（今日到期 / 逾期）合并为可点击的筛选入口，去掉两个独立控件 - 移动端工具栏从占半屏降到三行紧凑布局 卡片 - 优先级从彩色胶囊改为左侧色条，扫视一列时比读文字更快分辨轻重 - 元信息改为「优先级 · 日期 · 标签」的轻量文本行，不再三种胶囊叠在一起 - 完成态用勾选图标 + 降低不透明度 布局 - 今日视图限宽居中（max-w-3xl）：此前 1440px 下卡片被拉满整屏， 标题与元信息之间出现大片空白 - 修复移动端卡片被压成细条：TaskCard 的 overflow-hidden（用于裁切左侧色条） 会让 flex 项的最小尺寸解析为 0，补 shrink-0 修正； 同时改为移动端按内容高度堆叠、桌面端列内滚动 其他 - 导航栏品牌改用看板图标，消除「看板」重复出现两次 - 统一卡片阴影、圆角与键盘焦点样式 - 新增 scripts/screenshot.mjs，便于后续对照审视视觉改动 验证：单元测试 452 个、端到端测试 23 个全部通过，lint 与构建无错误。	2026-10-18 14:05:06 +08:00
chenshoulin	4e064e82ea	feat: 个人轻量看板工具 MVP ... 从零实现一个 local-first 的个人任务看板，数据只存在浏览器本地，不依赖后端。 功能 - 固定三列看板（待办 / 进行中 / 已完成），支持拖拽改状态与列内排序 - 快速新增、详情编辑、删除撤销、已完成归档 - 搜索与筛选（关键词 / 优先级 / 标签 / 今日到期 / 逾期） - 今日视图：按紧急度分组（逾期 > 今天到期 > 进行中）+ 统计卡片 - 导出导入 JSON；启动时自动留快照，保留最近 3 份 - 键盘快捷键（N / 「/」/ ? / Esc） - PWA：可安装、离线可用、更新提示 技术要点 - 持久化采用 TaskRepository 端口 + 整份快照读写，schemaVersion 迁移表 显式登记升级规则（当前 v2，v1 -> v2 为归档功能补 archivedAt） - 同列排序用相邻中点插入，间距不足时按列 normalize，避免浮点精度耗尽 - 拖拽只消费 Sortable 的事件，store 保持唯一数据源，不接管数据 - 数据损坏时先备份到 *.corrupt.<时间戳> 再报错，不覆盖用户数据 - 引入 vue-router 拆分看板与今日两个视图（见 docs/adr.md ADR-005） 验证 - 单元测试 437 个（33 个文件），行覆盖率 96.8% - 端到端测试 23 个（Playwright），含真实拖拽与断网离线场景 - npm run build 通过，产物可静态托管 注：部署时需配置 SPA 回落，否则直接访问 /today 会 404（详见 README）。	2026-10-18 11:59:49 +08:00