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）
|