Svelte Todo List 设计文档
摘要
本文档是基于Svelte开发的简易待办事项列表应用的设计说明，该应用支持待办事项的创建、完成状态切换、删除等基础功能，并提供本地持久化存储能力。
概述
这是一个使用Svelte构建的简易待办清单应用，核心能力包含新增待办、切换待办完成状态、删除待办、多条件筛选待办、清空已完成待办、本地存储持久化以及展示剩余待办计数。
核心功能
- 新增待办事项
- 切换待办事项为完成/未完成状态
- 删除指定待办事项
- 按全部/未完成/已完成三种维度筛选待办
- 一键清空所有已完成的待办事项
- 使用
localStorage实现待办数据持久化 - 展示未完成待办的数量统计
用户界面结构
┌─────────────────────────────────────────┐
│ Svelte Todos │
├─────────────────────────────────────────┤
│ [________________________] [Add] │
├─────────────────────────────────────────┤
│ [ ] Buy groceries [x] │
│ [✓] Walk the dog [x] │
│ [ ] Write code [x] │
├─────────────────────────────────────────┤
│ 2 items left │
│ [All] [Active] [Completed] [Clear ✓] │
└─────────────────────────────────────────┘
项目组件结构
src/
App.svelte # 应用主入口，负责状态管理
lib/
TodoInput.svelte # 文本输入框+新增按钮组件
TodoList.svelte # 待办列表容器组件
TodoItem.svelte # 单个待办项组件，包含复选框、文本、删除按钮
FilterBar.svelte # 筛选按钮+清空已完成按钮组件
store.ts # 管理待办数据的Svelte Store
storage.ts # localStorage持久化逻辑封装
数据模型
interface Todo {
id: string; // UUID唯一标识
text: string; // 待办文本内容
completed: boolean; // 待办完成状态
}
type Filter = 'all' | 'active' | 'completed'; // 筛选类型枚举验收标准
- 可通过输入后按回车或点击Add按钮新增待办
- 可通过点击复选框切换待办的完成状态
- 可通过点击X按钮删除指定待办
- 筛选按钮可正确展示对应分类的待办子集
- “X items left”文案可正确展示未完成待办的数量
- “Clear completed”按钮可移除所有已完成的待办
- 刷新页面后待办数据可通过localStorage保留
- 无待办的空状态会展示提示信息
- 所有测试用例执行通过