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)。
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
import type { Page } from '@playwright/test'
|
||||
|
||||
/** 在「待办」列的快速新增输入框里录入一条任务 */
|
||||
export async function addTask(page: Page, title: string): Promise<void> {
|
||||
const input = page.getByLabel('添加任务').first()
|
||||
await input.fill(title)
|
||||
await input.press('Enter')
|
||||
}
|
||||
|
||||
/**
|
||||
* 把指定标题的卡片拖到目标列。
|
||||
*
|
||||
* SortableJS 用的是 pointer/mouse 事件而不是 HTML5 拖放,
|
||||
* 且依赖拖动过程中的 pointermove 来判定落点,因此必须分步移动鼠标,
|
||||
* 不能只做一次「按下 → 移动 → 抬起」。
|
||||
*/
|
||||
export async function dragCardToColumn(
|
||||
page: Page,
|
||||
title: string,
|
||||
columnId: string,
|
||||
): Promise<void> {
|
||||
const card = page.locator('article').filter({ hasText: title }).first()
|
||||
const target = page.locator(`[data-column-id="${columnId}"]`)
|
||||
|
||||
const sourceBox = await card.boundingBox()
|
||||
const targetBox = await target.boundingBox()
|
||||
if (!sourceBox || !targetBox) throw new Error('无法定位拖拽源或目标元素')
|
||||
|
||||
const startX = sourceBox.x + sourceBox.width / 2
|
||||
const startY = sourceBox.y + sourceBox.height / 2
|
||||
|
||||
await page.mouse.move(startX, startY)
|
||||
await page.mouse.down()
|
||||
// 先小幅移动,让 Sortable 进入拖拽状态
|
||||
await page.mouse.move(startX, startY + 12, { steps: 5 })
|
||||
await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + 30, { steps: 20 })
|
||||
await page.mouse.up()
|
||||
}
|
||||
|
||||
/** 打开「备份与恢复」面板 */
|
||||
export async function openBackupPanel(page: Page): Promise<void> {
|
||||
await page.getByRole('button', { name: '备份' }).click()
|
||||
}
|
||||
Reference in New Issue
Block a user