基于 Vue 3 + Vite 的轻量级任务管理看板，数据全部保存在浏览器本地存储，无需后端与登录，打开即用。
- 三列看板：待办 / 进行中 / 已完成，卡片可跨列移动，拖拽即改状态。
- 任务建模：标题、描述、优先级（高 / 中 / 低）、截止时间、标签。
- 本地持久化：所有任务与主题偏好写入
localStorage，刷新与重开浏览器都不丢失。 - 多主题：内置多套配色主题，一键切换，偏好自动记忆。
- 专注体验：空状态引导、操作 Toast 提示、完成任务时的庆祝动效。
- 纯前端零依赖服务：构建产物为静态文件，可直接部署到任意静态托管。
| 层 | 选型 |
|---|---|
| 视图 | Vue 3（Composition API + <script setup>） |
| 构建 | Vite 5 |
| 状态 | reactive + composable（useKanban） |
| 存储 | LocalStorage（utils/storage.js 封装读写与降级） |
| 样式 | 原生 CSS + CSS 变量主题（styles/variables.css、config/themes.ts） |
| 测试 | Vitest + @vue/test-utils + jsdom |
task-kanban/
├─ index.html
├─ src/
│ ├─ App.vue # 看板主视图，组织三列与弹窗
│ ├─ components/
│ │ ├─ NavBar.vue # 顶部导航与主题切换入口
│ │ ├─ KanbanColumn.vue # 单列容器，承载卡片列表
│ │ ├─ TaskCard.vue # 任务卡片，含优先级与截止时间
│ │ ├─ AddTaskModal.vue # 新建 / 编辑任务表单
│ │ ├─ ThemeSelector.vue # 主题选择器
│ │ ├─ EmptyState.vue # 空状态引导
│ │ ├─ Celebration.vue # 完成任务的庆祝动效
│ │ └─ FunToast.vue # 全局轻提示
│ ├─ composables/
│ │ ├─ useKanban.js # 任务增删改查 + 跨列移动 + 持久化
│ │ ├─ useTheme.ts # 主题状态与 CSS 变量注入
│ │ ├─ useToast.ts # Toast 队列
│ │ └─ useRipple.ts # 点击水波纹
│ ├─ config/ # 主题定义、Toast 文案
│ ├─ utils/ # 存储、时间格式化、CSS 变量工具
│ └─ styles/variables.css # 设计变量
└─ tests/ # Vitest 单元测试
npm install
npm run dev # 开发预览 http://localhost:8085
npm run build # 生产构建，产物在 dist/
npm test # 运行单元测试- 点击右上角「新建任务」，填写标题、描述、优先级与截止时间。
- 卡片左侧的列切换按钮把任务在「待办 / 进行中 / 已完成」之间流转。
- 完成任务时会出现庆祝动效；任务状态与主题偏好都会自动保存。
- 顶部主题选择器可随时切换配色，刷新后保持上次选择。
所有数据仅存于本机浏览器，不上传任何服务器；清除站点数据会同时清空任务。utils/storage.js 在存储不可用（隐私模式、配额耗尽）时自动降级为内存存储，页面仍可正常使用。