|
|
||
|---|---|---|
| .gitea/workflows | ||
| public | ||
| src | ||
| .gitignore | ||
| README.md | ||
| eslint.config.js | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
README.md
todo-frontend
一个纯前端的 Todo 应用(无后端),支持新增 / 删除 / 编辑 / 完成状态切换 / 筛选,并使用 localStorage 持久化数据。
技术栈
- React + Vite + TypeScript
- TailwindCSS
- localStorage
功能
- 添加新 Todo(输入框 + 回车/按钮)
- 删除 Todo
- 编辑 Todo(双击标题或点击“编辑”按钮)
- 切换完成状态(复选框)
- 筛选:全部 / 进行中 / 已完成
- 显示统计:剩余任务数
- 空状态提示
- 数据持久化到 localStorage
本地开发
npm install
npm run dev
打开终端输出的本地地址(通常是 http://localhost:5173)。
构建与预览
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)