# todo-list

**Repository Path**: wndproc12/todo-list

## Basic Information

- **Project Name**: todo-list
- **Description**: 一个基于 React 18、TypeScript、Tailwind CSS 和 Framer Motion 构建的现代化、顶级体验的待办事项应用。
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-24
- **Last Updated**: 2026-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 现代化待办事项应用

一个基于 React 18、TypeScript、Tailwind CSS 和 Framer Motion 构建的现代化、顶级体验的待办事项应用。

## 功能特性

### 核心功能
- ✅ 待办事项的创建、完成和删除
- ✅ 拖拽重新排序（使用 @dnd-kit）
- ✅ 深色/浅色模式切换（CSS 变量 + React Context）
- ✅ 实时搜索（模糊匹配）
- ✅ 筛选（全部 / 进行中 / 已完成）
- ✅ 数据导出/导入（JSON 格式）
- ✅ 本地存储持久化

### 高级功能
- 📋 子任务管理 - 为每个待办事项添加和管理子任务
- 🎯 优先级设置 - 设置低、中、高优先级
- 🏷️ 标签系统 - 为待办事项添加自定义标签
- 📅 截止日期 - 设置和管理任务截止日期
- 📊 统计面板 - 实时显示任务统计数据
- 📈 完成趋势 - 可视化展示近7天的完成趋势

### UI/UX
- 🎨 现代简约设计（受 Notion/Trello 启发）
- 🎭 使用 Framer Motion 的流畅动画
- 🎯 无障碍支持（ARIA 标签、键盘导航）
- 🌙 深色/浅色主题
- 📱 响应式设计
- ⚡ 空状态、加载状态

### 性能优化
- ⚡ 使用 useMemo/useCallback 避免不必要的重新渲染
- ⚡ 使用 React.memo 优化列表项
- ⚡ 优化的渲染性能

### TypeScript
- 🔷 泛型 hooks（useLocalStorage<T>）
- 🔷 运行时类型检查的类型守卫
- 🔷 完整的类型安全

## 技术栈

- **React 18** - UI 库
- **TypeScript 5.x** - 类型安全
- **Vite** - 构建工具
- **Tailwind CSS** - 实用优先的 CSS 框架
- **Framer Motion** - 动画库
- **@dnd-kit** - 拖拽功能
- **lucide-react** - 图标库

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
npm run dev
```

在浏览器中打开 [http://localhost:5173](http://localhost:5173)。

### 构建生产版本

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 项目结构

```
src/
├── components/
│   ├── TodoInput.tsx       # 添加新待办事项
│   ├── TodoItem.tsx        # 单个待办事项（已优化）
│   ├── TodoList.tsx        # 待办事项列表（含拖拽）
│   ├── SearchBar.tsx       # 搜索功能
│   ├── FilterButtons.tsx   # 筛选待办事项
│   ├── ExportImport.tsx    # 数据导出/导入
│   ├── EmptyState.tsx      # 空状态 UI
│   ├── Header.tsx          # 应用头部（含主题切换）
│   ├── Subtasks.tsx        # 子任务管理
│   ├── PrioritySelector.tsx # 优先级选择器
│   ├── TagsInput.tsx       # 标签输入
│   ├── DatePicker.tsx      # 日期选择器
│   ├── StatsPanel.tsx      # 统计面板
│   └── CompletionTrend.tsx # 完成趋势图表
├── contexts/
│   └── ThemeContext.tsx    # 深色/浅色主题上下文
├── hooks/
│   └── useLocalStorage.ts  # 泛型 localStorage hook
├── types/
│   ├── index.ts            # 类型定义
│   └── typeGuards.ts       # 运行时类型检查的类型守卫
├── App.tsx                 # 主应用组件
├── main.tsx               # 应用入口
└── index.css              # 全局样式（含 Tailwind）
```

## 性能优化详情

1. **useMemo** - 用于：
   - 筛选后的待办事项列表
   - 完成数量计算
   - 拖拽上下文的待办事项 ID

2. **useCallback** - 用于：
   - 所有事件处理器，防止每次渲染时重新创建
   - addTodo、toggleTodo、deleteTodo 等

3. **React.memo** - 包装 TodoItem 组件，防止父组件变化但 props 相同时的不必要重新渲染

## 无障碍实现

- 所有交互元素都有 **ARIA 标签**
- **role** 属性提供语义化含义
- **aria-pressed** 用于切换按钮
- **aria-live** 用于状态更新
- 通过 @dnd-kit 支持 **键盘导航**
- 更好的键盘 UX 的 **焦点指示器**

## 功能使用指南

### 添加待办事项
1. 在输入框中输入任务内容
2. 点击右侧的向下箭头展开选项
3. 可选：设置优先级、添加标签、设置截止日期
4. 点击 "Add" 按钮添加任务

### 管理子任务
1. 点击任务右侧的向下箭头展开子任务区域
2. 点击 "Add Subtask" 添加子任务
3. 可以勾选完成子任务或删除子任务

### 修改优先级
1. 点击任务下方的优先级徽章（如 "No Priority"、"High" 等）
2. 在弹出的选择器中选择新的优先级
3. 选择后自动保存

### 查看统计和趋势
- **统计面板**：显示已完成、进行中、已逾期任务数量，完成率，优先级分布等
- **完成趋势**：显示近7天的任务完成趋势图表