团队协作管理系统

一个现代化的团队项目管理和协作平台，支持需求管理、周报跟踪、数据分析和可视化展示。

🚀 功能特色

📋 需求管理

• 完整的 CRUD 操作：添加、编辑、删除项目需求
• Excel 导入导出：支持批量导入和多格式导出
• 智能搜索筛选：按部门、状态、关键词快速筛选
• 一键状态更改：直接点击状态标签快速更新
• 自动序号管理：增删改后自动重新排序
• 多维度排序：按时间、名称、部门灵活排序

📝 每周汇报

• 项目关联汇报：自动关联项目信息和对接人
• 进度跟踪：可视化进度条和完成百分比
• 风险评估：三级风险等级管理（低、中、高）
• 周次管理：智能周次格式（含月份日期范围）
• 多维筛选：按周次、对接人、项目筛选
• 数据导出：支持详细数据和统计汇总导出

📊 数据分析

• 统计图表：项目状态、部门分布、完成率分析
• 甘特图：项目时间线和依赖关系可视化
• 里程碑图：关键节点和截止日期跟踪
• 进度网格：项目进度卡片式展示
• 时标逻辑图：复杂项目依赖关系图

🎯 系统特性

• 响应式设计：完美支持桌面、平板、手机访问
• 数据持久化：基于 LocalStorage 的数据存储
• 现代化 UI：Material-UI 设计语言
• 多主题支持：深色/浅色主题切换
• 实时更新：数据变更即时响应

🛠️ 技术栈

前端框架

• React 18 – 现代化 React 框架
• TypeScript – 类型安全的 JavaScript
• Vite – 快速的构建工具

UI 组件库

• Material-UI (MUI) 5 – Google Material Design
• @mui/icons-material – 丰富的图标库
• @mui/x-date-pickers – 专业的日期选择器

数据可视化

• Chart.js – 灵活的图表库
• React-Chart.js-2 – React 图表组件
• Recharts – 声明式图表库

工具库

• Day.js – 轻量级日期处理
• UUID – 唯一标识符生成
• XLSX – Excel 文件处理

📦 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:3000 查看应用

构建生产版本

npm run build

预览生产版本

npm run preview

🏗️ 项目结构

src/
├── components/           # React 组件
│   ├── RequirementManagement.tsx   # 需求管理
│   ├── WeeklyReport.tsx            # 周报管理
│   ├── Statistics.tsx              # 数据统计
│   ├── GanttChart.tsx              # 甘特图
│   ├── MilestoneChart.tsx          # 里程碑图
│   ├── ProgressGrid.tsx            # 进度网格
│   ├── TimelineChart.tsx           # 时标逻辑图
│   └── ImportPreviewDialog.tsx     # 导入预览
├── types/                # TypeScript 类型定义
│   └── index.ts
├── utils/                # 工具函数
│   ├── storage.ts        # 数据存储
│   ├── excelImport.ts    # Excel 导入
│   ├── excelExport.ts    # Excel 导出
│   ├── chartUtils.ts     # 图表工具
│   └── sampleData.ts     # 示例数据
├── main.tsx              # 应用入口
└── App.tsx               # 主应用组件

📚 使用指南

需求管理

添加需求

1. 点击「添加需求」按钮
2. 填写项目信息：
   • 项目名称（必填）
   • 所属部门（必填）
   • 项目简介（必填）
   • 项目对接人（必填）
   • 科工部对接人（必填）
   • 计划完成时间
   • 当前状态
   • 备注信息

Excel 导入

1. 点击「Excel 导入」按钮
2. 选择 Excel 文件（.xlsx / .xls）
3. 预览导入数据
4. 确认导入

数据导出

1. 点击导出图标
2. 选择导出类型：
   • 导出全部数据
   • 导出筛选数据
   • 导出部门汇总

状态管理

• 直接点击状态标签快速更改
• 支持四种状态：未开始、进行中、已完成、已暂停

周报管理

创建周报

1. 点击「添加汇报」按钮
2. 选择关联项目（自动填充对接人）
3. 选择汇报周次
4. 填写汇报内容：
   • 本周进展（必填）
   • 遇到问题
   • 下周计划
   • 完成百分比（滑块调节）
   • 风险等级

筛选查看

• 按周次筛选：选择特定周次查看
• 按对接人筛选：查看特定人员汇报
• 关键词搜索：搜索项目名称、进展内容

🎨 界面预览

🔧 配置说明

主题配置

系统使用 Material-UI 主题系统，在 src/main.tsx 中配置：

• 字体大小优化
• 组件样式定制
• 响应式断点设置

数据存储

使用 LocalStorage 进行数据持久化：

• 自动数据迁移
• 版本管理
• 数据备份恢复

Excel 模板

系统提供标准 Excel 模板，包含以下字段：

• 序号、部门、项目名称
• 项目需求、简介
• 项目对接人、科工部对接人
• 计划完成时间、当前状态、备注

🔄 数据流程

需求管理流程

1. 创建需求 → 自动分配序号 → 数据验证 → 存储
2. 导入需求 → Excel 解析 → 数据清洗 → 批量存储
3. 更新需求 → 状态变更 → 时间戳更新 → 存储
4. 删除需求 → 确认删除 → 序号重排 → 存储

周报管理流程

1. 创建汇报 → 项目关联 → 内容填写 → 存储
2. 更新汇报 → 内容修改 → 时间戳更新 → 存储
3. 查看汇报 → 筛选排序 → 数据展示
4. 导出汇报 → 数据格式化 → Excel 生成

🚀 部署指南

本地部署

# 构建项目
npm run build
# 预览构建结果
npm run preview

生产部署

1. 构建生产版本： npm run build
2. 将 dist 目录部署到 Web 服务器
3. 配置路由重定向到 index.html

Docker 部署

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

🤝 贡献指南

开发规范

• 使用 TypeScript 进行类型检查
• 遵循 React Hooks 最佳实践
• 保持组件单一职责原则
• 编写清晰的注释和文档

提交规范

• feat: 新功能
• fix: 错误修复
• docs: 文档更新
• style: 代码格式
• refactor: 代码重构
• test: 测试相关
• chore: 构建过程或辅助工具的变动

📝 更新日志

v1.2.0 (2025-08-08)

• ✨ 新增每周汇报功能
• ✨ 添加 Excel 导入导出功能
• ✨ 实现状态快速更改
• ✨ 添加多维度排序功能
• 🎨 优化界面布局和交互
• 🐛 修复周次显示问题
• 📈 增强数据可视化

v1.1.0 (2025-08-07)

• ✨ 新增部门字段
• ✨ 实现数据迁移功能
• 🎨 优化移动端适配
• 🐛 修复时标逻辑图性能问题

v1.0.0 (2025-08-06)

• 🎉 初始版本发布
• ✨ 基础需求管理功能
• ✨ 统计分析图表
• ✨ 响应式界面设计

📄 许可证

MIT License – 详见 LICENSE 文件

💬 联系方式

如有问题或建议，请通过以下方式联系：

• 邮箱： fulb@penavicotj.com
• Issue：https://github.com/fulianbaoBear