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
commit 4e064e82ea
98 changed files with 20084 additions and 0 deletions
@@ -0,0 +1,100 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { describe, expect, it } from 'vitest'
+
+import { createMemoryTaskRepository } from '@/data/taskRepository'
+import { useTaskStore } from '@/stores/tasks'
+import type { ColumnId } from '@/types/task'
+
+import QuickAddTask from './QuickAddTask.vue'
+
+function setup(status: ColumnId = 'todo') {
+  const pinia = createPinia()
+  setActivePinia(pinia)
+  const store = useTaskStore()
+  store.init({ repository: createMemoryTaskRepository(), crossTab: false })
+
+  const wrapper = mount(QuickAddTask, {
+    props: { status },
+    global: { plugins: [pinia] },
+    attachTo: document.body,
+  })
+  return { store, wrapper }
+}
+
+describe('QuickAddTask', () => {
+  it('提交后创建任务到指定列并清空输入', async () => {
+    const { store, wrapper } = setup('doing')
+    const input = wrapper.find('input')
+
+    await input.setValue('新任务')
+    await wrapper.find('form').trigger('submit')
+
+    expect(store.tasks.map((task) => task.title)).toEqual(['新任务'])
+    expect(store.byColumn.doing.map((task) => task.title)).toEqual(['新任务'])
+    expect((input.element as HTMLInputElement).value).toBe('')
+  })
+
+  it('提交后保持聚焦，便于连续录入', async () => {
+    const { wrapper } = setup()
+    const input = wrapper.find('input')
+
+    await input.setValue('第一条')
+    await wrapper.find('form').trigger('submit')
+
+    expect(document.activeElement).toBe(input.element)
+  })
+
+  it('连续录入两条，后者位于列首', async () => {
+    const { store, wrapper } = setup()
+    const input = wrapper.find('input')
+
+    await input.setValue('第一条')
+    await wrapper.find('form').trigger('submit')
+    await input.setValue('第二条')
+    await wrapper.find('form').trigger('submit')
+
+    expect(store.byColumn.todo.map((task) => task.title)).toEqual(['第二条', '第一条'])
+  })
+
+  it('空白输入不创建任务', async () => {
+    const { store, wrapper } = setup()
+    const input = wrapper.find('input')
+
+    await input.setValue('   ')
+    await wrapper.find('form').trigger('submit')
+    expect(store.tasks).toHaveLength(0)
+
+    await wrapper.find('form').trigger('submit')
+    expect(store.tasks).toHaveLength(0)
+  })
+
+  it('输入法组合期间回车不提交（中文选词不误触发）', async () => {
+    const { store, wrapper } = setup()
+    const input = wrapper.find('input')
+
+    await input.trigger('compositionstart')
+    await input.setValue('zhongwen')
+    await wrapper.find('form').trigger('submit')
+
+    expect(store.tasks).toHaveLength(0)
+
+    await input.trigger('compositionend')
+    await input.setValue('中文')
+    await wrapper.find('form').trigger('submit')
+
+    expect(store.tasks.map((task) => task.title)).toEqual(['中文'])
+  })
+
+  it('标题首尾空白被去除后入库', async () => {
+    const { store, wrapper } = setup()
+    await wrapper.find('input').setValue('  写方案  ')
+    await wrapper.find('form').trigger('submit')
+    expect(store.tasks[0]?.title).toBe('写方案')
+  })
+
+  it('输入框带可访问性标签', () => {
+    const { wrapper } = setup()
+    expect(wrapper.find('input').attributes('aria-label')).toBe('添加任务')
+  })
+})