chenshoulin
|
da8fb5fe81
|
feat: 添加对.workbuddy目录的忽略
|
2026-10-24 18:47:36 +08:00 |
|
chenshoulin
|
300b2de37e
|
feat: 更新统计卡片与分组对应关系,优化样式与可访问性
CI / verify (push) Successful in 1m41s
CI / 部署到服务器 (push) Successful in 26s
|
2026-10-24 18:31:45 +08:00 |
|
chenshoulin
|
81ef0cc43f
|
feat: 优化页面样式
CI / verify (push) Successful in 1m43s
CI / 部署到服务器 (push) Successful in 26s
|
2026-10-24 16:44:54 +08:00 |
|
chenshoulin
|
9ee1261b90
|
feat(ui): 重做深色悬停与键盘焦点,补齐弹层出场动效
CI / verify (push) Successful in 1m42s
CI / 部署到服务器 (push) Successful in 29s
悬停:上一版靠「底色跳两档 + 四边边框一起提亮 + 外圈白光晕 + 白环」制造悬浮感,
五个变化同向叠加,结果是整张卡片均匀发亮、看着像换了张更浅的卡,光晕还把边缘糊住。
改用明暗方向表达厚度:新增受光层伪元素(顶部白 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): 深色模式下补齐卡片与弹层的层次感
CI / verify (push) Successful in 1m40s
CI / 部署到服务器 (push) Successful in 27s
- 深色里沿用浅色那套低透明度黑色阴影没有对比度(黑投影落在 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
|
51235a59a2
|
feat(board): 已完成列按完成时间倒序排列
CI / verify (push) Successful in 1m45s
CI / 部署到服务器 (push) Successful in 27s
- 已完成列的展示顺序改由 completedAt 倒序决定(新增 sortCompletedDesc 纯函数),
最近完成的永远在最上面;缺 completedAt 的旧数据排在有完成时间的任务之后,
彼此退回 sortOrder 倒序
- 该列停用列内排序:拖拽与 ↑↓ 只能跨列,列头标注「按完成时间倒序」说明口径
- 数据层不动:不迁移 sortOrder,导入导出、快照结构与 schemaVersion 均不变,
倒序只在 BoardView.visibleColumns 单点发生
- 新增 ADR-009,并在 ADR-008 的否决项里标注被部分推翻
- 单测 705 → 738(sortOrder +5、BoardView +5、BoardColumn +1),README 同步
|
2026-10-22 13:15:25 +08:00 |
|
chenshoulin
|
b39267fba7
|
feat(board): 展示任务时间,并修正已完成任务的逾期基准
CI / verify (push) Successful in 1m43s
CI / 部署到服务器 (push) Successful in 26s
时间展示(ADR-008):
- 详情抽屉新增只读「时间」区块:创建 / 更新常驻,完成时间缺失时标注「未完成」,归档任务追加归档时间;时间不进入草稿与 dirty 判定
- 已完成卡片在元信息行右侧显示「完成于 M月D日」,卡片根元素 title 汇总创建 / 完成 / 归档时间(精确到分钟)
- 回收站条目补创建时间,删掉内联 formatTime,统一走 @/utils/date
- date.ts 新增 formatDateTime(YYYY-MM-DD HH:mm)与 formatCompactDate(同年 M月D日 / 跨年带年份),空值与非法时间戳返回 null
逾期基准修复:
- 新增 formatDueDateForTask:未完成任务仍以「今天」推算;已完成任务改以「完成日」推算,19 号截止、19 号当天完成的任务不会在 20 号显示「逾期 1 天」,完成时确实超期则定格为「逾期 N 天完成」,不再随日期增长
- 新增 localDateOf:completedAt 存 UTC 时间戳,按本地时区取日期,避免跨日偏差
- TaskCard 改用 dueLabel computed 取代模板内直接调用 formatDueDate;颜色仍由 isOverdue 决定,已完成卡片保持中性色
测试:date / TaskCard 补时间格式化与逾期基准用例(当天完成、提前完成、完成时超期定格、缺 completedAt、跨年),全量 728 单测通过;vue-tsc 与 eslint 干净。
|
2026-10-20 09:23:29 +08:00 |
|
chenshoulin
|
a269694834
|
fix(ci): runner 改用 github_mirror 指向 gitea.com
CI / verify (push) Successful in 1m41s
CI / 部署到服务器 (push) Successful in 28s
- v5.1.1 不读 DEFAULT_ACTIONS_URL 环境变量(二进制里只暴露 github_mirror),
改为配置 runner.github_mirror: https://gitea.com,否则 checkout 会去访问不通的 github.com
- systemd 单元去掉无效的 DEFAULT_ACTIONS_URL,避免误导
- 新增 .gitattributes,shell 脚本与服务配置强制 LF
|
2026-10-19 21:03:51 +08:00 |
|
chenshoulin
|
f9bf1b3eb3
|
ci: 部署到腾讯云服务器并启用 Gitea Actions 自动发布
CI / verify (push) Canceled after 1m37s
CI / 部署到服务器 (push) Skipped
- ci.yml 增加 deploy job:verify 全绿后 rsync 到 /opt/kanban/dist 并做线上自检
- runner 与站点同机(host 模式),部署直接写本地目录,不依赖 SSH 密钥与 Secrets
- 站点目录是容器 bind mount,必须原地同步;manual deploy.sh 同步改为 rsync 语义
- 新增 deploy/:容器版 nginx 配置、runner 配置与 systemd 单元、服务器初始化脚本
- README 更新实际部署架构(1Panel + Nginx Proxy Manager 反代)与 runner 说明
|
2026-10-19 20:59:38 +08:00 |
|
chenshoulin
|
777815704d
|
docs: 更新 README 与 ADR-007
CI / verify (push) Canceled after 10s
- README 补充回收站、批量编辑、合并导入、标签管理与 schema v3 说明
- 新增 ADR-007,记录软删除、可见性矩阵与合并冲突策略的取舍
|
2026-10-19 18:33:00 +08:00 |
|
chenshoulin
|
65e98199ba
|
feat: 回收站、批量编辑、合并导入与标签治理
- 数据:Task 增加 deletedAt,schema v2→v3;删除改为软删除,保留 30 天后自动清理
- 回收站:支持恢复、永久删除、二次确认清空;导航栏入口带数量角标
- 批量编辑:多选后统一移动列、改优先级、标签增删、设置截止日、归档
- 合并导入:按 id 匹配、updatedAt 新者胜;覆盖/合并二选一,执行前自动快照
- 标签治理:全局重命名、合并、删除;回收站任务不参与改写
- 看板语义读取统一改用 activeTasks,避免已删除任务泄漏到统计、今日与标签下拉
- UI:回收站图标与备份统一尺寸;批量编辑条统一控件高度并分组
- 测试:705 个单测通过,补充迁移、回收站、批量编辑、合并与标签用例
|
2026-10-19 18:32:42 +08:00 |
|
chenshoulin
|
43e813b93a
|
docs: 更新批量操作与备份恢复说明,新增 ADR-006
- README 补充批量添加/删除、导入前自动备份、归档恢复与 CI 说明
- ADR-006 记录覆盖式操作前快照、id 查重与未保存确认等决策
|
2026-10-19 17:21:53 +08:00 |
|
chenshoulin
|
9573ec3de7
|
chore(ci): 添加 Gitea Actions 校验工作流
推送与合并请求依次执行 lint、typecheck、unit test 与生产构建
|
2026-10-19 17:21:51 +08:00 |
|
chenshoulin
|
2d6e24dc91
|
feat(board): 支持批量添加与批量删除任务
- 批量添加面板:一行一条,整批共用目标列、优先级、标签与截止日期
- 快速新增支持粘贴多行文本,直接拆成多条任务
- 多选模式支持全选可见任务、整批删除,撤销时连原顺序一起还原
- 批量创建与删除走 store 的批量方法,一次落盘、一次广播
- 补充单元测试与 E2E 用例
|
2026-10-19 17:21:42 +08:00 |
|
chenshoulin
|
4aba003a9e
|
fix(ui): Toast 撤销可暂停,存储告警提升为全局
- Toast 自动关闭支持悬停/聚焦暂停,移开后按剩余时间继续
- 存储异常提示移到 App 级,看板与今日视图都能看到
- 归档隐藏与筛选隐藏分开说明,并提示列内排序暂停原因
|
2026-10-19 17:21:05 +08:00 |
|
chenshoulin
|
f69a24de94
|
feat(ui): 详情抽屉支持状态切换、归档恢复与未保存确认
- 新增三列状态切换,今日视图也能把任务移到进行中
- 归档任务显示归档提示与「恢复」入口
- 关闭抽屉前检查未保存修改,二次确认后才丢弃草稿
|
2026-10-19 17:20:58 +08:00 |
|
chenshoulin
|
ede4bfe88f
|
fix(data): 覆盖式导入与快照恢复前自动备份
- importJson / restoreSnapshot 覆盖前先写一份当前数据快照,误操作可回退
- 导入校验增加 id 唯一性检查,宽容读取路径保留首条
- 快照索引对同一时间点的重复写入去重
- 落盘失败时翻转 persistent,恢复后自动撤除告警
- 备份面板提示导入前数据已自动备份
|
2026-10-19 17:20:20 +08:00 |
|
chenshoulin
|
12c5346f75
|
fix(ui): 清除按钮高度改为跟随日期输入框,不再矮一截
输入框是 text-sm py-1.5(34px),而清除按钮是 text-xs py-1(26px),
两者并排时按钮明显矮一截。
改为 self-stretch + inline-flex items-center,高度直接跟着这一行走,
而不是写死内边距 —— 输入框以后调内边距,按钮会自动跟上。
实测 320 / 336 / 390 / 1440 四种宽度、深浅两色共 8 组:
输入框与按钮均为 34px,顶边差 0.0,日期行无横向溢出。
回归测试锁住机制本身(必须 self-stretch、不得写死 py)。
|
2026-10-18 21:25:42 +08:00 |
|
chenshoulin
|
45c5040198
|
style(ui): 清除与删除按钮补上边框,与取消/保存成套
抽屉底部的取消有边框、保存是实心,而删除是纯文字;日期框旁的清除同样是
纯文字。两者都缺少按钮的可点击暗示,放在一起不成套。
- 删除:加 border-rose-300 / dark:border-rose-800,保留 rose 文字色
- 清除:加 border-slate-300 / dark:border-zinc-600,圆角由 rounded(4px)
改为 rounded-md(6px) 与日期输入框对齐,文字色提到 slate-600/zinc-300
窄屏下验证过不溢出:320 / 336 / 390 / 1440 四种宽度、深浅两色,
日期行 scrollWidth 均等于 clientWidth。
|
2026-10-18 20:33:55 +08:00 |
|
chenshoulin
|
88ea09e94d
|
feat(tags): 编辑任务时可从已有标签里选,不必每次手打
TagInput 增加候选下拉:聚焦即展开(输入框为空列全部、有草稿按子串过滤),
上下键移动高亮、回车选中高亮项、点击也能选;候选项排除已选中的,选完自动
从列表移除。列表没展开或没有匹配时,回车仍把草稿建成新标签,原行为不变。
候选点击用 mousedown.prevent 保住输入框焦点,否则 blur 会先把草稿提交掉。
把「全部标签」从 BoardToolbar 的局部 computed 提到 store 的 allTags,
筛选下拉和标签候选共用同一份,避免两处各算一份导致结果不一致。
测试:TagInput 新增 13 条(候选过滤、键盘选择、失焦/Escape 收起、aria-selected),
store 新增 2 条 allTags,E2E 新增 1 条打通 store → 抽屉 → 组件这条接线。
|
2026-10-18 20:26:55 +08:00 |
|
chenshoulin
|
48f178e5bb
|
style(ui): 抽屉遮罩改为半透明加背景模糊,透出底下的看板
原来的遮罩压得太重(浅色 slate-900/40、深色 black/60),打开抽屉后左边几乎
是一片灰,看不出底下是什么。改为浅色 slate-900/25、深色 black/40,并加
backdrop-blur-sm:背景仍然看得见轮廓,模糊把它推远,不和面板抢焦点。
补三条测试盯住这个观感:遮罩必须半透明、必须带模糊、必须铺满视口且在
面板之下。
|
2026-10-18 19:51:38 +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
|
b27fefb965
|
fix(ui): 日期占位在聚焦后也保持遮挡,点击改为直接唤起日历
上一版只在「未聚焦」时遮挡原生提示,一点击输入框就会露出「yyyy/mm/日」——
而这个字符串本身就是要去掉的,不能给它留出口。
改为:只要值为空就一直遮挡,聚焦与否都不例外。代价是没法再看着原生分段
输入,所以点击占位层改为直接调用 showPicker 唤起原生日历,把交互从
「编辑文本」改成「选日期」;回车/空格同样可唤起,日历图标区不被遮挡,
仍走原生行为。占位层背景色与输入框严格一致(浅色 white / 深色 slate-800)。
回归测试直接盯住这个场景:空值聚焦后占位层必须仍在。
|
2026-10-18 19:23:01 +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
|
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 |
|