# 工作待办管理系统

一个简约风格的工作待办管理应用，支持按日期分组、优先级管理、完成状态切换和历史记录查看。

## 功能特性

- 🔐 **密码保护**: 首次进入需要输入访问密码 `weiMonkey2024`
- 📅 **按日期管理**: 支持按日期新增待办事项，展示最近一周的待办
- 🎯 **优先级分类**: 支持低、中、高、紧急四个优先级，不同颜色标识
- ✅ **完成状态**: 点击待办事项可标记完成，支持置灰和删除线效果
- 📚 **历史记录**: 查看一周之前的所有历史待办事项
- 📋 **智能复制**: 一键将历史未完成的待办事项复制到今天
- 🗑️ **删除管理**: 支持删除当天的待办事项
- 📱 **响应式设计**: 简约现代的UI设计，支持移动端访问
- 🗂️ **按天分组**: 待办事项按日期自动分组显示
- 📦 **迁移功能**: 可以将未完成的待办事项迁移到今天

## 技术栈

- **前端**: React 18 + Styled Components
- **后端**: Node.js + Express
- **数据库**: MySQL
- **认证**: JWT Token

## 安装和运行

### 前置要求

- Node.js (版本 14 或更高)
- MySQL 数据库
- 确保 MySQL 服务运行在 `localhost:3306`

### 数据库配置

1. 确保 MySQL 服务正在运行
2. 使用以下配置连接数据库：
   - 地址: `localhost:3306`
   - 数据库: `myuser`
   - 用户名: `root`
   - 密码: `123456`

### 安装依赖

```bash
# 安装所有依赖（根目录、客户端、服务器端）
npm run install-all
```

### 运行应用

```bash
# 同时启动前端和后端服务
npm run dev
```

或者分别启动：

```bash
# 启动后端服务 (端口 5000)
npm run server

# 启动前端服务 (端口 3001)
npm run client
```

### 访问应用

1. 打开浏览器访问 `http://localhost:3001`
2. 输入访问密码: `weiMonkey2024`
3. 开始使用待办管理功能

## 使用说明

### 登录
- 首次访问需要输入密码 `weiMonkey2024`
- 登录后会保存认证状态，24小时内无需重复登录

### 添加待办
1. 在顶部表单中输入待办事项内容
2. 选择优先级（低、中、高、紧急）
3. 选择日期
4. 点击"添加"按钮

### 管理待办
- **查看**: 待办事项按日期分组显示，最近一周的内容
- **完成**: 点击待办事项可切换完成状态
- **删除**: 今天的待办事项显示删除按钮（×），点击即可删除
- **优先级**: 不同优先级用不同颜色的圆点标识
  - 灰色: 低优先级
  - 蓝色: 中优先级  
  - 橙色: 高优先级
  - 红色: 紧急

### 历史记录功能
- **查看历史**: 点击"📚 历史记录"按钮查看一周之前的所有待办事项
- **历史只读**: 历史待办事项不能修改状态或删除，仅供查看
- **返回当前**: 在历史视图中点击"返回"按钮回到当前待办视图

### 复制未完成功能
- **智能复制**: 点击"📋 复制未完成"按钮
- **自动识别**: 系统自动找到今天之前所有未完成的待办事项
- **一键复制**: 将这些待办事项复制到今天，方便继续处理
- **状态提示**: 显示复制了多少个待办事项，如果没有未完成项目会相应提示

### 界面说明
- **今天/昨天/明天**: 自动识别相对日期
- **完成统计**: 每个日期组显示完成进度
- **视觉反馈**: 已完成的待办会置灰并添加删除线
- **操作按钮**: 
  - 📋 复制未完成：橙色按钮，复制历史未完成待办到今天
  - 📚 历史记录：蓝色按钮，查看历史待办事项
  - 退出：灰色按钮，退出登录

## 项目结构

```
todo/
├── client/                 # React 前端应用
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/     # React 组件
│   │   │   ├── TodoApp.js      # 主应用组件
│   │   │   ├── TodoForm.js     # 待办添加表单
│   │   │   ├── TodoList.js     # 待办列表组件
│   │   │   ├── TodoItem.js     # 单个待办项组件
│   │   │   ├── HistoryTodos.js # 历史待办组件
│   │   │   └── LoginForm.js    # 登录表单组件
│   │   ├── services/       # API 服务
│   │   │   └── api.js         # API 接口封装
│   │   └── App.js         # 应用入口
│   └── package.json
├── server/                 # Node.js 后端服务
│   ├── index.js           # 服务器主文件
│   └── package.json
├── package.json           # 根项目配置
└── README.md
```

## API 接口

- `POST /api/auth` - 密码验证
- `GET /api/todos` - 获取最近一周的待办事项
- `GET /api/todos/history` - 获取历史待办事项（一周之前）
- `POST /api/todos` - 创建待办事项
- `POST /api/todos/copy-pending` - 复制历史未完成待办到今天
- `PUT /api/todos/:id` - 更新待办事项状态
- `DELETE /api/todos/:id` - 删除待办事项

## 注意事项

1. 确保 MySQL 数据库服务正常运行
2. 首次运行会自动创建数据库表
3. 数据库连接失败时请检查配置信息
4. 建议在生产环境中修改默认密码和数据库配置

## 故障排除

### 数据库连接失败
- 检查 MySQL 服务是否启动
- 确认数据库 `myuser` 是否存在
- 验证用户名密码是否正确

### 端口冲突
- 前端默认端口: 3001
- 后端默认端口: 5000
- 如有冲突可在对应的 package.json 中修改

### 依赖安装失败
```bash
# 清除缓存后重新安装
npm cache clean --force
npm run install-all
```

## 更新日志

### 2024-03-21
- 新增待办事项挂起功能
  - 可以将今天的待办事项挂起
  - 挂起的待办事项会显示在单独的挂起页面
  - 可以随时恢复挂起的待办事项到今天

### 2024-03-22
- 优化未完成待办事项迁移功能
  - 将"复制"功能改为"迁移"功能，避免重复创建待办事项
  - 迁移时会自动排除已挂起的待办事项
  - 更新了相关UI文案和图标，使用📦图标表示迁移功能

## 贡献

欢迎提交 Issue 和 Pull Request

## 许可证

MIT