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