todoList 进阶版
一、项目初始化
首先，安装依赖
# 项目构建
pnpm create rsbuild@latest --dir todo-ts-zustand -- --template react-ts -tools eslint,prettier
# 或者
pnpm create rsbuild@latest -d
# 进入项目
cd todo-ts-zustand
# 安装核心依赖
pnpm install && pnpm approve-builds
pnpm add zustand
# 安装动画库（可选，用于丝滑的列表动画）
pnpm add framer-motion
备注
前段构建工具新贵 -- Rsbuild
二、项目结构设计
为了保持代码整洁，采用模块化的目录结构：
src/
├── components/
│ ├── TodoItem.tsx # 单个任务组件
│ ├── TodoInput.tsx # 输入框组件
│ ├── TodoList.tsx # 列表容器组件
│ └── Filters.tsx # 筛选器组件
├── store/
│ ├── useTodoStore.ts # Zustand 状态管理
│ └── types.ts # TypeScript 类型定义
├── App.tsx
└── index.tsx
三、定义类型和状态管理
这是应用的核心。将使用 Zustand 的 persist 中间件来实现本地储存自动保存，即使刷新页面数据也不会丢失。
编写其他代码。