# 项目特定配置和规范 ## 项目结构说明 这是一个教务系统的前端项目,包含多个产业(文旅、智能制造等)的演示数据。 ## 数据更新规范 ### 更新数据时的重要原则 当需要更新某个数据(如班级排名、学生信息等)时,必须遵循以下步骤: 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文件 - [ ] 没有修改任何组件文件 - [ ] 页面功能正常运行