检测日程

建设工程项目团队的待办任务与施工周历管理应用。左侧为项目任务池，右侧为可视化施工周历，支持任务状态流转、日程时间冲突检测、天气预警等功能。

功能特性

任务管理

• 任务池：创建、筛选、编辑、删除项目任务
• 状态流转：委托 → 进行中 → 报告出具 → 任务结束
• 进度条：拖拽调整任务进度，实时更新
• 分类筛选：按状态快速过滤任务
• 任务颜色：每个任务自动分配随机颜色，关联的日程事件自动同步该颜色
• 纸质卡片UI：暖色渐变纸张质感，左侧色条标识任务归属

日程管理

• 周历视图：00:00-24:00 时间轴，可视化展示每日日程
• 双击添加：在日历任意位置双击，自动填入点击时间
• 冲突检测：添加/编辑日程时自动检测时间重叠并提示
• 右键编辑：右键点击事件卡片快速编辑
• 悬浮导航：桌面端可自由拖动周/日切换导航
• 未来日程：未来时间的日程以暗色卡片 + "计划"封条显示，到达时间后自动变为正常卡片
• 关联任务：日程事件可关联任务，自动继承任务颜色和样式

天气集成

• 7日预报：基于 Open-Meteo API 的免费天气预报
• 雨天提醒：雨天自动显示"雨天户外作业提醒"
• 城市支持：支持国内 20+ 主要城市
• 智能缓存：天气数据持久化存储到数据库，每天仅调用一次 API，历史天气可追溯

每日总结

• 底部每日总结区域，最多显示 4 行，支持快速添加/删除工作记录

移动端适配

• 响应式布局：<768px 时自动切换为上下布局（任务池在上、日历在下）
• 周一至周五：移动端默认仅显示工作日
• PWA 支持：可添加到手机主屏幕，离线可用
• 紧凑 UI：移动端日历时间轴和字体自动缩小

技术栈

层级	技术
前端	React 18 + TypeScript + Ant Design 5 + Vite 6
后端	Node.js + Express + better-sqlite3
数据库	SQLite (文件型数据库)
天气API	Open-Meteo (免费，无需 API Key)

快速开始

环境要求

• Node.js >= 18
• npm >= 9

本地开发

# 1. 安装后端依赖
cd server && npm install

# 2. 安装前端依赖
cd ../client && npm install

# 3. 初始化数据库并填充种子数据
cd ../server && npm run seed

# 4. 启动后端服务（端口 3001）
npm run dev

# 5. 另开终端，启动前端（端口 5173）
cd ../client && npm run dev

前端访问 http://localhost:5173 后端 API http://localhost:3001

一键启动（开发模式）

npm run dev

使用说明

任务池

1. 新建任务：点击右上角 "新建任务" 按钮
2. 填写信息：项目名称（必填）、施工地点（必填）、负责人、计划开始/结束日期、备注
3. 状态流转：
   • 委托 → 点击"开始" → 进行中
   • 进行中 → 点击 ✓ → 报告出具
   • 报告出具 → 点击"归档" → 任务结束
   • 已完成 → 点击撤销 → 退回委托
4. 进度更新：拖拽进度条，自动保存
5. 删除任务：点击删除图标，关联的日程会一并删除

日程管理

1. 添加日程：
   • 双击日历中任意时间位置
   • 或点击导航栏 "+" 按钮
2. 编辑日程：右键点击事件卡片，或点击卡片上的编辑按钮
3. 删除日程：点击卡片右上角删除图标，确认后删除
4. 关联任务：在添加/编辑表单中选择关联任务，日程会自动继承任务颜色
5. 关键节点：勾选"关键节点"标记里程碑事件
6. 冲突检测：时间重叠时自动弹出提示，阻止添加

每日总结

• 在底部输入框输入内容后按回车或点击 "+" 添加
• 点击总结条目右侧的 × 删除
• 最多显示 4 行，超出后可滚动

天气预报

• 自动获取上海地区 7 天天气预报
• 雨/雪/雾天气会在日历顶部显示"雨天户外作业提醒"
• 天气数据每天首次请求后缓存，支持历史查看

移动端

• 浏览器直接访问即可，推荐 Chrome 添加到主屏幕
• 布局自动切换为上下结构
• 日历仅显示周一至周五

API 接口

任务

方法	路径	说明
GET	/api/tasks	获取所有任务（可选 ?status=）
POST	/api/tasks	创建任务
PUT	/api/tasks/:id	更新任务
PUT	/api/tasks/:id/status	更新任务状态
DELETE	/api/tasks/:id	删除任务（级联删除日程）

日程

方法	路径	说明
GET	/api/schedule?date=YYYY-MM-DD	获取一周日程
POST	/api/schedule	创建日程（自动检测时间冲突）
PUT	/api/schedule/:id	更新日程
DELETE	/api/schedule/:id	删除日程
POST	/api/schedule/summary	保存每日总结

其他

方法	路径	说明
GET	/api/weather?city=上海&days=7	获取天气预报（含缓存）
GET	/api/persons	获取人员列表
POST	/api/persons	添加人员

部署指南

详见 DEPLOY.md

数据库

• 表结构见 server/src/db/schema.sql
• 数据备份详见 DATABASE_BACKUP.md
• 数据库迁移：每次启动自动执行 ALTER TABLE 兼容旧数据

开发规范

• 前端代码使用 TypeScript，严格类型检查
• API 请求统一通过 client/src/api/client.ts 封装
• 状态管理使用 React hooks（useSchedule, useTasks）
• 数据库操作统一使用 better-sqlite3 prepared statements
• 删除任务时先删 schedule_events 再删 tasks（避免 FK 约束错误）

已知问题与改进方向

详见 ISSUES.md

License

MIT