chenshoulin
4e064e82ea
从零实现一个 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）。
98 lines
3.7 KiB
TypeScript
98 lines
3.7 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
import { addTask, dragCardToColumn } from './helpers'
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/')
|
|
})
|
|
|
|
/** 取浏览器本地的今天日期（不能用 toISOString，那是 UTC，可能差一天） */
|
|
async function localToday(page: import('@playwright/test').Page): Promise<string> {
|
|
return page.evaluate(() => {
|
|
const now = new Date()
|
|
const month = String(now.getMonth() + 1).padStart(2, '0')
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
return `${now.getFullYear()}-${month}-${day}`
|
|
})
|
|
}
|
|
|
|
/** 新建任务并把截止日期设为今天 */
|
|
async function addTaskDueToday(
|
|
page: import('@playwright/test').Page,
|
|
title: string,
|
|
): Promise<void> {
|
|
const today = await localToday(page)
|
|
await addTask(page, title)
|
|
await page.locator('article').filter({ hasText: title }).click()
|
|
await page.getByLabel('截止日期').fill(today)
|
|
await page.getByRole('button', { name: '保存' }).click()
|
|
await expect(page.locator('article').filter({ hasText: title })).toBeVisible()
|
|
}
|
|
|
|
test('导航可在看板与今日之间切换', async ({ page }) => {
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await expect(page.getByRole('heading', { name: '今日' })).toBeVisible()
|
|
await expect(page.getByText('今日待办')).toBeVisible()
|
|
|
|
await page.getByRole('link', { name: '看板' }).click()
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
})
|
|
|
|
test('今日视图汇总今天到期与进行中的任务', async ({ page }) => {
|
|
await addTaskDueToday(page, '今天到期的事')
|
|
await addTask(page, '正在做的事')
|
|
await dragCardToColumn(page, '正在做的事', 'doing')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
|
|
// 两张卡片都在今日视图里
|
|
await expect(page.locator('article')).toHaveCount(2)
|
|
await expect(page.locator('article').filter({ hasText: '今天到期的事' })).toBeVisible()
|
|
await expect(page.locator('article').filter({ hasText: '正在做的事' })).toBeVisible()
|
|
|
|
// 分别落在「今天到期」和「进行中」两组。
|
|
// 必须限定 level: 2 —— 卡片标题是 h3，任务名恰好叫「今天到期的事」时会撞上分组标题
|
|
await expect(page.getByRole('heading', { level: 2, name: /今天到期/ })).toBeVisible()
|
|
await expect(page.getByRole('heading', { level: 2, name: /进行中/ })).toBeVisible()
|
|
})
|
|
|
|
test('未开始且无截止日期的任务不进入今日视图', async ({ page }) => {
|
|
await addTask(page, '以后再说')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
|
|
await expect(page.locator('article')).toHaveCount(0)
|
|
await expect(page.getByText('今天没有待办事项')).toBeVisible()
|
|
})
|
|
|
|
test('今日视图可以勾选完成', async ({ page }) => {
|
|
await addTaskDueToday(page, '今天要做完')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await expect(page.locator('article')).toHaveCount(1)
|
|
|
|
await page.locator('article button').first().click()
|
|
|
|
await expect(page.locator('article')).toHaveCount(0)
|
|
await expect(page.getByText('今天没有待办事项')).toBeVisible()
|
|
|
|
await page.reload()
|
|
await expect(page.getByText('今天没有待办事项')).toBeVisible()
|
|
})
|
|
|
|
test('今日视图与看板共享同一份数据', async ({ page }) => {
|
|
await addTask(page, '共享的任务')
|
|
|
|
await page.getByRole('link', { name: '今日' }).click()
|
|
await page.getByRole('link', { name: '看板' }).click()
|
|
|
|
await expect(page.locator('article').filter({ hasText: '共享的任务' })).toBeVisible()
|
|
})
|
|
|
|
test('未知路径回落到看板', async ({ page }) => {
|
|
await page.goto('/not-a-real-page')
|
|
await expect(page.getByText('共 0 个任务')).toBeVisible()
|
|
})
|