6.0 KiB
6.0 KiB
工作待办管理系统
一个简约风格的工作待办管理应用,支持按日期分组、优先级管理、完成状态切换和历史记录查看。
功能特性
- 🔐 密码保护: 首次进入需要输入访问密码
weiMonkey2024
- 📅 按日期管理: 支持按日期新增待办事项,展示最近一周的待办
- 🎯 优先级分类: 支持低、中、高、紧急四个优先级,不同颜色标识
- ✅ 完成状态: 点击待办事项可标记完成,支持置灰和删除线效果
- 📚 历史记录: 查看一周之前的所有历史待办事项
- 📋 智能复制: 一键将历史未完成的待办事项复制到今天
- 🗑️ 删除管理: 支持删除当天的待办事项
- 📱 响应式设计: 简约现代的UI设计,支持移动端访问
- 🗂️ 按天分组: 待办事项按日期自动分组显示
- 📦 迁移功能: 可以将未完成的待办事项迁移到今天
技术栈
- 前端: React 18 + Styled Components
- 后端: Node.js + Express
- 数据库: MySQL
- 认证: JWT Token
安装和运行
前置要求
- Node.js (版本 14 或更高)
- MySQL 数据库
- 确保 MySQL 服务运行在
localhost:3306
数据库配置
- 确保 MySQL 服务正在运行
- 使用以下配置连接数据库:
- 地址:
localhost:3306
- 数据库:
myuser
- 用户名:
root
- 密码:
123456
- 地址:
安装依赖
# 安装所有依赖(根目录、客户端、服务器端)
npm run install-all
运行应用
# 同时启动前端和后端服务
npm run dev
或者分别启动:
# 启动后端服务 (端口 5000)
npm run server
# 启动前端服务 (端口 3001)
npm run client
访问应用
- 打开浏览器访问
http://localhost:3001
- 输入访问密码:
weiMonkey2024
- 开始使用待办管理功能
使用说明
登录
- 首次访问需要输入密码
weiMonkey2024
- 登录后会保存认证状态,24小时内无需重复登录
添加待办
- 在顶部表单中输入待办事项内容
- 选择优先级(低、中、高、紧急)
- 选择日期
- 点击"添加"按钮
管理待办
- 查看: 待办事项按日期分组显示,最近一周的内容
- 完成: 点击待办事项可切换完成状态
- 删除: 今天的待办事项显示删除按钮(×),点击即可删除
- 优先级: 不同优先级用不同颜色的圆点标识
- 灰色: 低优先级
- 蓝色: 中优先级
- 橙色: 高优先级
- 红色: 紧急
历史记录功能
- 查看历史: 点击"📚 历史记录"按钮查看一周之前的所有待办事项
- 历史只读: 历史待办事项不能修改状态或删除,仅供查看
- 返回当前: 在历史视图中点击"返回"按钮回到当前待办视图
复制未完成功能
- 智能复制: 点击"📋 复制未完成"按钮
- 自动识别: 系统自动找到今天之前所有未完成的待办事项
- 一键复制: 将这些待办事项复制到今天,方便继续处理
- 状态提示: 显示复制了多少个待办事项,如果没有未完成项目会相应提示
界面说明
- 今天/昨天/明天: 自动识别相对日期
- 完成统计: 每个日期组显示完成进度
- 视觉反馈: 已完成的待办会置灰并添加删除线
- 操作按钮:
- 📋 复制未完成:橙色按钮,复制历史未完成待办到今天
- 📚 历史记录:蓝色按钮,查看历史待办事项
- 退出:灰色按钮,退出登录
项目结构
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
- 删除待办事项
注意事项
- 确保 MySQL 数据库服务正常运行
- 首次运行会自动创建数据库表
- 数据库连接失败时请检查配置信息
- 建议在生产环境中修改默认密码和数据库配置
故障排除
数据库连接失败
- 检查 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