52 lines
1.2 KiB
Markdown
52 lines
1.2 KiB
Markdown
|
# todo-frontend
|
|||
|
|
|
|||
|
|
一个纯前端的 Todo 应用（无后端），支持新增 / 删除 / 编辑 / 完成状态切换 / 筛选，并使用 `localStorage` 持久化数据。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- React + Vite + TypeScript
|
|||
|
|
- TailwindCSS
|
|||
|
|
- localStorage
|
|||
|
|
|
|||
|
|
## 功能
|
|||
|
|
|
|||
|
|
- 添加新 Todo（输入框 + 回车/按钮）
|
|||
|
|
- 删除 Todo
|
|||
|
|
- 编辑 Todo（双击标题或点击“编辑”按钮）
|
|||
|
|
- 切换完成状态（复选框）
|
|||
|
|
- 筛选：全部 / 进行中 / 已完成
|
|||
|
|
- 显示统计：剩余任务数
|
|||
|
|
- 空状态提示
|
|||
|
|
- 数据持久化到 localStorage
|
|||
|
|
|
|||
|
|
## 本地开发
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
打开终端输出的本地地址（通常是 `http://localhost:5173`）。
|
|||
|
|
|
|||
|
|
## 构建与预览
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
构建产物在 `dist/` 目录，可直接部署到任意静态站点（如 Nginx、Vercel、Netlify、GitHub Pages 等）。
|
|||
|
|
|
|||
|
|
## 代码结构
|
|||
|
|
|
|||
|
|
- `src/hooks/useTodos.ts`：Todo 核心状态管理 + localStorage 持久化
|
|||
|
|
- `src/components/*`：UI 组件（输入、筛选、列表、单项）
|
|||
|
|
- `src/types/todo.ts`：类型定义
|
|||
|
|
- `src/utils/storage.ts`：localStorage 工具
|
|||
|
|
|
|||
|
|
## 交互提示
|
|||
|
|
|
|||
|
|
- 双击 Todo 标题进入编辑
|
|||
|
|
- 编辑时按 Enter 保存，Esc 取消，失焦自动保存
|
|||
|
|
- 标题清空会视为删除（常见 Todo UX）
|