工作待办管理系统

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

功能特性

• 🔐 密码保护: 首次进入需要输入访问密码 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

安装依赖

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

运行应用

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

或者分别启动：

# 启动后端服务 (端口 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 中修改

依赖安装失败

# 清除缓存后重新安装
npm cache clean --force
npm run install-all

更新日志

2024-03-21

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

2024-03-22

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

贡献

欢迎提交 Issue 和 Pull Request

许可证

MIT