Go to file
ivanberry 08f4e8f469 init: todo frontend 2026-03-03 12:02:58 +08:00
public init: todo frontend 2026-03-03 12:02:58 +08:00
src init: todo frontend 2026-03-03 12:02:58 +08:00
.gitignore init: todo frontend 2026-03-03 12:02:58 +08:00
README.md init: todo frontend 2026-03-03 12:02:58 +08:00
eslint.config.js init: todo frontend 2026-03-03 12:02:58 +08:00
index.html init: todo frontend 2026-03-03 12:02:58 +08:00
package-lock.json init: todo frontend 2026-03-03 12:02:58 +08:00
package.json init: todo frontend 2026-03-03 12:02:58 +08:00
postcss.config.js init: todo frontend 2026-03-03 12:02:58 +08:00
tailwind.config.js init: todo frontend 2026-03-03 12:02:58 +08:00
tsconfig.app.json init: todo frontend 2026-03-03 12:02:58 +08:00
tsconfig.json init: todo frontend 2026-03-03 12:02:58 +08:00
tsconfig.node.json init: todo frontend 2026-03-03 12:02:58 +08:00
vite.config.ts init: todo frontend 2026-03-03 12:02:58 +08:00

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.tsTodo 核心状态管理 + localStorage 持久化
  • src/components/*UI 组件(输入、筛选、列表、单项)
  • src/types/todo.ts:类型定义
  • src/utils/storage.tslocalStorage 工具

交互提示

  • 双击 Todo 标题进入编辑
  • 编辑时按 Enter 保存Esc 取消,失焦自动保存
  • 标题清空会视为删除(常见 Todo UX