feat: 补齐今日视图待办组、卡片键盘操作、深色模式
今日视图 - 补上「待办」组。此前只收 逾期 / 今天到期 / 进行中,导致待办列里没设 截止日期的任务在今日视图里完全消失 —— 用户明明有一堆事没做,却看到 「今天没有待办事项」。现在只要任务未完成且未归档,就必定出现在某个 分组里(归属优先级:逾期 > 今天到期 > 进行中 > 待办)。 - 统计卡片改为与分组一一对应(逾期 / 今天到期 / 进行中 / 本周完成), 不再用「今日待办」这种把四组混在一起、与列表长度对不上的指标。 键盘操作(可访问性) - 卡片可聚焦(Tab / 点击),← → 换列、↑ ↓ 列内调序、Enter 打开详情。 - 换列时追加到目标列末尾:用全量长度而不是可见下标,筛选态下也安全; 列内调序要求该列渲染的是全量,否则禁用(与拖拽的规则一致)。 - 移动后手动恢复焦点 —— 卡片跨列会被重建,不恢复的话连续按键会失效。 深色模式 - 三态:跟随系统 / 浅色 / 深色,选择持久化到 localStorage。 - index.html 内联脚本在首帧之前应用主题,避免深色下闪白。 - 用 @custom-variant dark 做 class 控制(而不是纯 media query), 才能支持「强制浅色」;html 的 color-scheme 让原生控件与滚动条跟随。 验证:单元测试 480 个、端到端测试 25 个全部通过,lint 与构建无错误。 截图脚本新增深色与移动端深色两组,便于后续对照。
This commit is contained in:
@@ -5,8 +5,9 @@
|
||||
- 固定三列:**待办 / 进行中 / 已完成**
|
||||
- 快速新增、拖拽排序、详情编辑、删除撤销
|
||||
- 搜索与筛选(关键词 / 优先级 / 标签 / 今日到期 / 逾期)
|
||||
- **今日视图**:按紧急度汇总今天要做的事,含本周完成等统计
|
||||
- 键盘快捷键
|
||||
- **今日视图**:按紧急度分组汇总(逾期 / 今天到期 / 进行中 / 待办),含本周完成等统计
|
||||
- 键盘快捷键;任务卡片可用方向键换列与调序
|
||||
- **深色模式**:跟随系统 / 浅色 / 深色三态
|
||||
- 导出导入 JSON + 启动自动备份
|
||||
- **可安装为 PWA,支持离线使用**
|
||||
|
||||
@@ -44,7 +45,15 @@ npm run dev
|
||||
| `?` | 打开快捷键帮助 |
|
||||
| `Esc` | 关闭当前面板 |
|
||||
|
||||
在输入框内输入时不会触发快捷键。
|
||||
卡片获得焦点(`Tab` 或点击)后:
|
||||
|
||||
| 按键 | 作用 |
|
||||
|---|---|
|
||||
| `←` `→` | 把卡片移到上一列 / 下一列 |
|
||||
| `↑` `↓` | 在列内上移 / 下移 |
|
||||
| `Enter` | 打开任务详情 |
|
||||
|
||||
在输入框内输入时不会触发全局快捷键。方向键移动在筛选态下只允许跨列(列内排序需要看到完整列表才有意义)。
|
||||
|
||||
---
|
||||
|
||||
@@ -55,11 +64,13 @@ npm run dev
|
||||
| 视图 | 路径 | 组织方式 |
|
||||
|---|---|---|
|
||||
| 看板 | `/` | 按**状态**:待办 / 进行中 / 已完成 |
|
||||
| 今日 | `/today` | 按**紧急度**:已逾期 → 今天到期 → 进行中 |
|
||||
| 今日 | `/today` | 按**紧急度**:已逾期 → 今天到期 → 进行中 → 待办 |
|
||||
|
||||
今日视图顶部有四张统计卡片(今日待办 / 逾期 / 今天到期 / 本周完成),下方是可直接勾选完成的待办列表。
|
||||
今日视图顶部有四张统计卡片(逾期 / 今天到期 / 进行中 / 本周完成),下方是可直接勾选完成的待办列表。
|
||||
|
||||
分组是**互斥**的:一张卡片只会出现在一组里,归属优先级为「逾期 > 今天到期 > 进行中」,所以你能一眼数清今天到底有几件事。已完成和已归档的任务不会出现在今日视图。
|
||||
分组是**互斥**的:一张卡片只会出现在一组里,归属优先级为「逾期 > 今天到期 > 进行中 > 待办」,所以你能一眼数清今天到底有几件事。已完成和已归档的任务不会出现在今日视图。
|
||||
|
||||
只要任务未完成且未归档,就一定会出现在某个分组里 —— 包括没设截止日期的待办(归入「待办」组)。
|
||||
|
||||
---
|
||||
|
||||
@@ -177,8 +188,8 @@ scripts/ # 图标生成等辅助脚本
|
||||
|
||||
## 测试
|
||||
|
||||
- 单元测试:437 个用例,覆盖 `src/` 下的纯逻辑与组件行为,行覆盖率约 97%。
|
||||
- 端到端测试:23 个用例,分两组运行 —— 交互类跑 dev server,PWA 类跑生产构建(Service Worker 只在构建产物中生成)。覆盖「新增 → 拖拽 → 完成 → 刷新保持」「导出 → 清空 → 导入还原」「删除撤销」「搜索筛选」「键盘快捷键」「今日视图」「离线打开」等主链路,每个用例使用独立的浏览器上下文。
|
||||
- 单元测试:480 个用例,覆盖 `src/` 下的纯逻辑与组件行为,行覆盖率约 96%。
|
||||
- 端到端测试:25 个用例,分两组运行 —— 交互类跑 dev server,PWA 类跑生产构建(Service Worker 只在构建产物中生成)。覆盖「新增 → 拖拽 → 完成 → 刷新保持」「导出 → 清空 → 导入还原」「删除撤销」「搜索筛选」「键盘快捷键与方向键移动」「深色模式切换」「今日视图」「离线打开」等主链路,每个用例使用独立的浏览器上下文。
|
||||
|
||||
```bash
|
||||
npm run test:coverage
|
||||
@@ -202,5 +213,6 @@ PLAYWRIGHT_CHANNEL=chromium npm run test:e2e # 用自带 Chromium(需先 npx
|
||||
- 标签是字符串数组,重命名标签需要逐个任务修改。
|
||||
- 看板列固定为三列,不支持自定义。
|
||||
- 归档阈值固定为「已完成超过 7 天」,暂不可配置。
|
||||
- 今日视图的分组规则固定(逾期 > 今天到期 > 进行中),不可自定义。
|
||||
- 今日视图的分组规则固定(逾期 > 今天到期 > 进行中 > 待办),不可自定义。
|
||||
- 统计只覆盖本周完成数等基础指标,没有趋势图或历史留存。
|
||||
- 深色模式只跟随系统或手动三态切换,没有按时间段自动切换。
|
||||
|
||||
Reference in New Issue
Block a user