项目：待办清单应用

项目概览

做一个功能完整的待办清单（Todo App）。

⏱️ 预计 1-2 小时 | 🛠️ Vue 3 + localStorage

你将学到： 组件拆分、列表渲染、表单处理、本地存储、CSS 动画

功能清单

• 添加待办事项
• 标记完成/未完成（划线效果）
• 删除待办
• 编辑待办内容
• 按完成状态筛选（全部/进行中/已完成）
• 数据存 localStorage，刷新不丢失
• 空状态提示

第一步：创建项目

npm create vite@latest todo-app -- --template vue
cd todo-app && npm install && npm run dev

第二步：让 AI 生成核心组件

帮我做一个完整的待办清单应用（Vue 3）：
1. 顶部输入框 + 添加按钮
2. 每个待办显示：复选框、文字、编辑按钮、删除按钮
3. 完成的项目文字加删除线和变灰
4. 底部三个筛选按钮：全部/进行中/已完成
5. 显示剩余未完成数量
6. 数据存 localStorage
7. 空状态时显示友好的提示文字
8. 添加和删除时加上平滑动画
9. 简洁现代设计

第三步：理解核心结构

AI 生成后，你会看到：

App.vue
├── TodoInput.vue     ← 输入框 + 添加
├── TodoList.vue      ← 列表容器
│   └── TodoItem.vue  ← 单项：复选框、文字、按钮
└── TodoFilter.vue    ← 筛选按钮

每个组件只做一件事，组合起来就是一个完整的应用。

🎯 延伸挑战

• 支持拖拽排序
• 给待办加分类标签
• 同步到 Supabase 数据库
• 加上截止日期提醒

✅ 项目成果

• 一个可以日常使用的待办清单
• 理解了组件化开发
• 掌握了 localStorage 数据持久化