主要内容: - 包含12个产业的完整教务系统前端代码 - 智能启动脚本 (start-industry.sh) - 可视化产业导航页面 (index.html) - 项目文档 (README.md) 优化内容: - 删除所有node_modules和.yoyo文件夹,从7.5GB减少到2.7GB - 添加.gitignore文件避免上传不必要的文件 - 自动依赖管理和智能启动系统 产业列表: 1. 文旅产业 (5150) 2. 智能制造 (5151) 3. 智能开发 (5152) 4. 财经商贸 (5153) 5. 视觉设计 (5154) 6. 交通物流 (5155) 7. 大健康 (5156) 8. 土木水利 (5157) 9. 食品产业 (5158) 10. 化工产业 (5159) 11. 能源产业 (5160) 12. 环保产业 (5161) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
217 lines
8.2 KiB
Markdown
217 lines
8.2 KiB
Markdown
# 项目特定配置和规范
|
||
|
||
## 项目结构说明
|
||
这是一个教务系统的前端项目,包含多个产业(文旅、智能制造等)的演示数据。
|
||
|
||
## 数据更新规范
|
||
|
||
### 更新数据时的重要原则
|
||
|
||
当需要更新某个数据(如班级排名、学生信息等)时,必须遵循以下步骤:
|
||
|
||
1. **全面搜索数据使用位置**
|
||
- 先使用 Grep 工具搜索数据的所有引用位置
|
||
- 不仅搜索直接的变量名,还要搜索相关的字段名
|
||
- 例如:更新班级排名时,搜索 "classRanking", "topStudents", "rankings", "班级排名" 等所有相关关键词
|
||
|
||
2. **理解数据结构差异**
|
||
- 检查不同位置使用的字段名是否一致
|
||
- 例如:有些地方使用 `name`,有些使用 `studentName`
|
||
- 确保所有必需字段都存在(如 `studentId`, `studentName`, `name`, `avatar`, `score` 等)
|
||
|
||
3. **一次性更新所有相关位置**
|
||
需要同时更新的位置通常包括:
|
||
- `src/data/mockData.js` 中的多个数据对象
|
||
- `classRanking` 数组
|
||
- `ranking.topStudents` 数组
|
||
- `profileOverview.ranking.rankings` 数组
|
||
- `user` 对象(侧边栏显示)
|
||
- `profile` 对象(个人信息)
|
||
- 组件中的硬编码数据引用
|
||
- `ClassRankModal` 组件的数据源
|
||
- `ClassRankModal` 中的头像映射
|
||
- 外部数据文件引用路径
|
||
|
||
4. **保持数据一致性**
|
||
- 所有显示同一学生的地方必须使用相同的数据
|
||
- 排名、分数、头像等信息必须在所有位置保持一致
|
||
- 注意字段名的差异,必要时添加冗余字段(如同时提供 `name` 和 `studentName`)
|
||
|
||
5. **验证更新完整性**
|
||
- 更新后立即检查所有相关页面
|
||
- 确认没有遗漏的"未知"、"小明"等占位数据
|
||
- 检查弹窗、详情页等二级界面
|
||
|
||
### 常见数据更新场景
|
||
|
||
#### 更新班级排名数据
|
||
涉及文件和位置:
|
||
- `src/data/mockData.js`:
|
||
- `classRanking` 数组(Dashboard页面使用)
|
||
- `ranking.topStudents` 数组(Dashboard班级排名组件使用)
|
||
- `profileOverview.ranking.rankings` 数组(个人档案页面使用)
|
||
- `src/components/ClassRankModal/index.jsx`:
|
||
- 数据源引用路径
|
||
- 头像URL映射
|
||
|
||
#### 更新个人信息数据
|
||
涉及文件和位置:
|
||
- `src/data/mockData.js`:
|
||
- `user` 对象(侧边栏显示)
|
||
- `profile` 对象(个人基本信息)
|
||
- `profileOverview` 对象(个人档案完整信息)
|
||
|
||
## 项目特定注意事项
|
||
|
||
1. **数据字段兼容性**
|
||
- 部分组件使用 `studentName`,部分使用 `name`
|
||
- 建议在数据中同时提供两个字段以确保兼容性
|
||
|
||
2. **头像资源管理**
|
||
- 所有头像URL都使用完整的CDN地址
|
||
- 头像列表存储在 `网页未导入数据/头像列表.json`
|
||
|
||
3. **产业数据切换**
|
||
- 文旅产业数据:`网页未导入数据/文旅产业/`
|
||
- 智能制造产业数据:`网页未导入数据/智能制造产业/`
|
||
|
||
4. **开发服务器**
|
||
- 端口配置在 `vite.config.js`
|
||
- 当前使用端口:5151
|
||
|
||
## 调试技巧
|
||
|
||
1. 当页面显示"未知"时,检查:
|
||
- 数据对象是否包含组件所需的字段名
|
||
- 是否有多个同名数据定义导致覆盖
|
||
- 组件是否正确引用了数据源
|
||
|
||
2. 使用 Grep 工具快速定位:
|
||
```bash
|
||
# 搜索所有排名相关数据
|
||
grep -r "ranking" src/
|
||
|
||
# 搜索特定学生名称验证更新完整性
|
||
grep -r "小明\|小华" src/
|
||
```
|
||
|
||
## 数据更新核心经验(基于智能制造数据更新实战)
|
||
|
||
### 🎯 数据更新黄金原则
|
||
1. **绝对不能修改任何样式文件** - 包括CSS、组件样式等
|
||
2. **必须先分析原始页面的数据引用方式** - 理解数据流向和配置位置
|
||
3. **只能在数据源文件中进行替换和修改** - 遵循原有架构
|
||
|
||
### 🔍 正确的数据更新流程
|
||
|
||
#### 第1步:分析原始数据引用
|
||
- 查看页面组件如何获取数据
|
||
- 追溯数据来源(从组件 → service → 配置文件)
|
||
- 找到所有相关的配置文件
|
||
|
||
#### 第2步:理解数据结构和映射关系
|
||
- 分析现有数据的字段名和格式
|
||
- 理解数据如何被转换和映射
|
||
- 确定组件期望的数据格式
|
||
|
||
#### 第3步:在正确位置更新配置文件
|
||
- 保持原有数据结构不变
|
||
- 只在配置文件中添加/替换数据
|
||
- 不改变现有字段名和数据格式
|
||
|
||
### ❌ 错误做法(绝对避免)
|
||
- 修改组件JSX结构
|
||
- 添加新的CSS样式
|
||
- 创建新的数据获取逻辑
|
||
- 重新设计UI组件
|
||
|
||
### ✅ 正确做法
|
||
- 找到原有的数据配置文件
|
||
- 分析现有的数据获取函数
|
||
- 在配置文件中添加新数据
|
||
- 保持原有架构完整性
|
||
|
||
### 📍 关键配置文件位置
|
||
- **简历模板数据**:`src/mocks/resumeInterviewMock.js`
|
||
- **岗位头像和等级**:`src/data/joblevel.json`
|
||
- **岗位基础信息**:`src/data/companyJobsNew.json`
|
||
- **Mock数据转换**:`src/data/mockData.js`
|
||
- **数据服务层**:`src/services/`
|
||
|
||
### 🎯 成功案例:智能制造简历数据更新
|
||
1. **发现问题**:岗位头像和等级标签不显示
|
||
2. **错误尝试**:修改JobList组件和CSS(❌)
|
||
3. **正确方法**:发现`ResumeInterviewPage`使用`src/data/joblevel.json`配置岗位头像和等级
|
||
4. **解决方案**:在`joblevel.json`中添加45个智能制造岗位数据
|
||
5. **结果**:头像和等级标签完美显示,无需修改任何样式
|
||
|
||
### 📋 数据更新检查清单
|
||
- [ ] 是否分析了原始数据引用方式?
|
||
- [ ] 是否找到了所有相关的配置文件?
|
||
- [ ] 是否保持了原有的数据结构?
|
||
- [ ] 是否避免了修改任何样式文件?
|
||
- [ ] 是否验证了数据的完整匹配?
|
||
|
||
## 提交前检查清单
|
||
|
||
- [ ] 所有测试数据已替换为正式数据
|
||
- [ ] 没有残留的"未知"、"小明"等占位符
|
||
- [ ] 各页面数据显示一致
|
||
- [ ] 弹窗和详情页数据正确
|
||
- [ ] 控制台无错误信息
|
||
|
||
## 🔄 能源产业数据替换专项规范
|
||
|
||
### 核心原则
|
||
**当前任务**:将智能制造产业数据替换为能源产业数据,这是一个纯数据内容替换任务。
|
||
|
||
### ⚠️ 绝对禁止事项
|
||
1. **绝对不修改任何样式文件** - 不动CSS、不动组件样式属性
|
||
2. **绝对不改变数据结构** - JSON结构必须完全保持不变
|
||
3. **绝对不修改字段名** - 所有key名称必须保持原样
|
||
4. **绝对不改变组件逻辑** - 不修改JSX、不修改数据处理函数
|
||
|
||
### ✅ 唯一允许的操作
|
||
1. **只替换数据内容值** - 文本、数字、URL等具体内容
|
||
2. **只在数据文件中操作** - 仅修改data和mock文件夹中的数据文件
|
||
3. **保持数据格式一致** - 日期格式、数字格式等必须与原数据一致
|
||
|
||
### 📋 数据替换工作流程
|
||
|
||
#### 第1步:全面分析(必须完成)
|
||
- 列出所有包含智能制造产业数据的文件
|
||
- 理解每个文件的数据结构
|
||
- 追踪数据在组件中的使用方式
|
||
- 记录需要替换的所有位置
|
||
|
||
#### 第2步:数据准备(严格验证)
|
||
- 准备能源产业的替换数据
|
||
- 确保新数据的结构与原数据100%匹配
|
||
- 验证所有必需字段都存在
|
||
- 确保数据类型完全一致(字符串、数字、数组等)
|
||
|
||
#### 第3步:执行替换(逐个验证)
|
||
- 按文件逐个进行内容替换
|
||
- 每个文件替换后立即验证JSON语法
|
||
- 确保没有遗漏的智能制造相关内容
|
||
- 保持数据的内部一致性
|
||
|
||
### 🎯 重点关注文件
|
||
- `src/data/intelligentManufacturingCalendar.json` → 需要替换为能源产业课程日历
|
||
- `src/data/智能制造单元背景.json` → 需要替换为能源产业单元背景
|
||
- `src/data/智能制造课程日历.json` → 需要替换为能源产业课程日历
|
||
- `src/mocks/resumeInterviewMock.js` → 智能制造岗位简历数据
|
||
- `src/data/joblevel.json` → 智能制造岗位头像和等级
|
||
- `src/data/companyJobsNew.json` → 智能制造岗位信息
|
||
- `src/data/mockData.js` → 可能包含智能制造相关数据
|
||
- `网页未导入数据/智能制造产业/` → 智能制造产业原始数据目录
|
||
|
||
### 📝 替换验证清单
|
||
- [ ] 所有智能制造相关文本已替换为能源产业
|
||
- [ ] 所有数据结构保持不变
|
||
- [ ] 所有字段名保持不变
|
||
- [ ] 所有数据格式保持一致
|
||
- [ ] JSON语法验证通过
|
||
- [ ] 没有修改任何CSS文件
|
||
- [ ] 没有修改任何组件文件
|
||
- [ ] 页面功能正常运行 |