1.2 KiB

Raw Permalink Blame History

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）