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）。

src/components/BoardColumn.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDraggable } from 'vue-draggable-plus'
+
+import type { ColumnDef, ColumnId, Task } from '@/types/task'
+import { resolveDrop, shouldAllowMove } from '@/utils/drag'
+
+import QuickAddTask from './QuickAddTask.vue'
+import TaskCard from './TaskCard.vue'
+
+const props = defineProps<{ column: ColumnDef; tasks: Task[]; sortDisabled?: boolean }>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  open: [id: string]
+  move: [payload: { id: string; toColumn: ColumnId; toIndex: number }]
+}>()
+
+const listRef = ref<HTMLElement | null>(null)
+const quickAddRef = ref<InstanceType<typeof QuickAddTask> | null>(null)
+
+/** 供快捷键（N）调用，聚焦到该列的快速新增输入框 */
+function focusQuickAdd(): void {
+  quickAddRef.value?.focusInput()
+}
+
+defineExpose({ focusQuickAdd })
+
+/**
+ * 不传 list：库不会接管数据，也不会安装它自己的 DOM 修正逻辑，
+ * 我们只消费事件并把结果交给 store，保持「store 是唯一数据源」。
+ */
+useDraggable(listRef, {
+  group: 'kanban-board',
+  animation: 150,
+  ghostClass: 'opacity-40',
+  // 在完成勾选按钮上按下时不启动拖拽
+  filter: 'button',
+  onMove: (event) => shouldAllowMove(event.from, event.to, props.sortDisabled === true),
+  onEnd: (event) => {
+    const drop = resolveDrop(event)
+    if (!drop) return
+    emit('move', { id: drop.taskId, toColumn: drop.toColumn, toIndex: drop.toIndex })
+  },
+})
+</script>
+
+<template>
+  <section class="flex min-h-0 flex-col rounded-lg bg-slate-200/60">
+    <header class="flex items-center justify-between px-3 py-2.5">
+      <h2 class="text-sm font-medium text-slate-600">{{ column.title }}</h2>
+      <span class="rounded-full bg-white px-2 py-0.5 text-xs font-medium text-slate-500">
+        {{ tasks.length }}
+      </span>
+    </header>
+
+    <QuickAddTask ref="quickAddRef" :status="column.id" />
+
+    <div
+      ref="listRef"
+      :data-column-id="column.id"
+      class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2"
+    >
+      <TaskCard
+        v-for="task in tasks"
+        :key="task.id"
+        :task="task"
+        @toggle="emit('toggle', $event)"
+        @open="emit('open', $event)"
+      />
+      <p v-if="tasks.length === 0" class="px-2 py-6 text-center text-sm text-slate-400">
+        暂无任务
+      </p>
+    </div>
+  </section>
+</template>