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/SideDrawer.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+
+const props = defineProps<{ open: boolean; title?: string }>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const panelRef = ref<HTMLElement | null>(null)
+let previouslyFocused: HTMLElement | null = null
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+function focusableElements(): HTMLElement[] {
+  const root = panelRef.value
+  if (!root) return []
+  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+}
+
+/** ESC 关闭 + Tab 焦点陷阱 */
+function onDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+
+  if (event.key !== 'Tab') return
+
+  const items = focusableElements()
+  if (items.length === 0) {
+    event.preventDefault()
+    panelRef.value?.focus()
+    return
+  }
+
+  const first = items[0]
+  const last = items[items.length - 1]
+  const active = document.activeElement as HTMLElement | null
+  const inside = active !== null && items.includes(active)
+
+  if (event.shiftKey) {
+    if (!inside || active === first) {
+      event.preventDefault()
+      last?.focus()
+    }
+  } else if (!inside || active === last) {
+    event.preventDefault()
+    first?.focus()
+  }
+}
+
+function stopListening(): void {
+  document.removeEventListener('keydown', onDocumentKeydown, true)
+}
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (isOpen) {
+      previouslyFocused = document.activeElement as HTMLElement | null
+      document.addEventListener('keydown', onDocumentKeydown, true)
+      void nextTick(() => {
+        const target = focusableElements()[0] ?? panelRef.value
+        target?.focus()
+      })
+    } else {
+      stopListening()
+      previouslyFocused?.focus?.()
+      previouslyFocused = null
+    }
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(stopListening)
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="fixed inset-0 z-40">
+      <div class="absolute inset-0 bg-slate-900/40" @click="emit('close')" />
+
+      <aside
+        ref="panelRef"
+        class="absolute inset-y-0 right-0 flex w-full max-w-md flex-col bg-white shadow-xl outline-none"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+        tabindex="-1"
+      >
+        <header class="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+          <h2 class="text-base font-medium text-slate-800">{{ title }}</h2>
+          <button
+            type="button"
+            class="rounded px-2 py-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
+            aria-label="关闭"
+            @click="emit('close')"
+          >
+            ✕
+          </button>
+        </header>
+
+        <div class="min-h-0 flex-1 overflow-y-auto p-4">
+          <slot />
+        </div>
+
+        <footer v-if="$slots.footer" class="border-t border-slate-200 px-4 py-3">
+          <slot name="footer" />
+        </footer>
+      </aside>
+    </div>
+  </Teleport>
+</template>