 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
|
14370fd08d
|
fix(ui): 日期选择器空值时改用自定义占位，遮住浏览器自带的 yyyy/mm/日
问题：截止日期为空时，Chrome 会按页面 lang="zh-CN" 拼出「yyyy/mm/日」
这个半英半中的格式提示。既与界面语言不统一，又容易被误读成「已经有内容」。
处理：空值且未聚焦时把原生分段文字设为透明，改由组件自己渲染「选择日期」
占位（与标签输入框的「回车添加标签」风格一致）。
两个必要的边界：
- 只在 :not(:focus) 时透明 —— 否则聚焦编辑时连正在输入的数字都看不见。
实测聚焦后原生分段会正常显示为「年/月/日」，比空值时的混合格式更干净。
- 占位层用 pointer-events-none，点击仍能唤起原生日期选择器。
只作用于 :::-webkit-datetime-edit（Chromium 系）。Firefox 的分段控件
不支持该伪元素，会退回浏览器自身的提示——这比强行自绘一个日期控件更好，
原生控件的可访问性与格式保证是这个组件当初的选型理由。
验证：单元测试 485 个（新增 5 个针对占位与遮挡）、E2E 25 个通过；
空值与聚焦两种状态均已截图确认。
|
2026-10-18 18:09:20 +08:00 |
|
|
chenshoulin
|
77b62f1a57
|
fix(ui): 标签按钮字号降到 12px，与同排控件对齐
工具栏第一行里，标签按钮是唯一用 text-sm（14px）的控件，而优先级分段
和到期统计按钮都是 text-xs（12px），视觉上「标签」两个字明显偏大，
与右侧的「今日到期 / 逾期」不协调。
搜索框保持 14px —— 那是输入区，需要这个字号保证输入与占位文字的可读性；
按钮类控件统一 12px。
实测（Playwright 读取 computed font-size）：
- 修复前：搜索框 14px、优先级 12px、标签 14px、今日到期 12px、逾期 12px
- 修复后：搜索框 14px，其余按钮全部 12px
验证：单元测试 480 个通过，lint 与构建无错误。
|
2026-10-18 18:05:05 +08:00 |
|
|
chenshoulin
|
00af665f12
|
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 个通过。
|
2026-10-18 17:56:30 +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 |
|