196 lines
6.0 KiB
Markdown
196 lines
6.0 KiB
Markdown
# 工作待办管理系统
|
||
|
||
一个简约风格的工作待办管理应用，支持按日期分组、优先级管理、完成状态切换和历史记录查看。
|
||
|
||
## 功能特性
|
||
|
||
- 🔐 **密码保护**: 首次进入需要输入访问密码 `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 |