-
# 团队协作管理系统
一个现代化的团队项目管理和协作平台，支持需求管理、周报跟踪、数据分析和可视化展示。
## 🚀 功能特色
### 📋 需求管理
- *完整的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
### 安装依赖
```bash
npm install
```
### 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:3000 查看应用
### 构建生产版本
```bash
npm run build
```
### 预览生产版本
```bash
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生成
## 🚀 部署指南
### 本地部署
```bash
# 构建项目
npm run build
# 预览构建结果
npm run preview
```
### 生产部署
\1. 构建生产版本：
npm run build\2. 将
dist目录部署到Web服务器\3. 配置路由重定向到
index.html### Docker部署
```dockerfile
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-01-08)
- ✨ 新增每周汇报功能
- ✨ 添加Excel导入导出功能
- ✨ 实现状态快速更改
- ✨ 添加多维度排序功能
- 🎨 优化界面布局和交互
- 🐛 修复周次显示问题
- 📈 增强数据可视化
### v1.1.0 (2025-01-07)
- ✨ 新增部门字段
- ✨ 实现数据迁移功能
- 🎨 优化移动端适配
- 🐛 修复时标逻辑图性能问题
### v1.0.0 (2025-01-06)
- 🎉 初始版本发布
- ✨ 基础需求管理功能
- ✨ 统计分析图表
- ✨ 响应式界面设计
## 📄 许可证
MIT License - 详见 LICENSE 文件
## 💬 联系方式
如有问题或建议，请通过以下方式联系：
- 邮箱：support@team-system.com
- Issue：https://github.com/your-repo/team-writing-system/issues
-–
*团队协作管理系统* - 让项目管理更简单、更高效！ 🚀
