Files

主要内容：
- 包含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>

2025-09-24 14:14:14 +08:00

34 KiB

Raw Blame History

教务系统数据架构与产业替换指南

核心原则 ⚠️

🔴 绝对不可修改的内容

页面样式和布局 - 保持所有CSS类名、样式文件完全不变
组件结构 - 不改动React组件的结构和渲染逻辑
数据处理逻辑 - 保留所有数据转换、过滤、排序等处理函数
字段名称 - 保持JSON和对象的所有字段名不变（包括中文字段名）
数据流向 - 维持组件间的数据传递方式和状态管理

✅ 只替换以下内容

具体数据值 - 学生姓名、课程名称、岗位名称等实际内容
图片URL - 头像、海报、背景图等资源链接
文本内容 - 简历内容、项目描述、面试题等文字
数值数据 - 学分、排名、薪资等数值

📋 替换原则总结

保持框架不变，只换内容
保持逻辑不变，只换数据
保持样式不变，只换文字
保持结构不变，只换数值

一、系统整体数据架构

核心数据文件结构

src/
├── data/
│   ├── mockData.js                 # 中央数据存储（最重要）
│   ├── courseLiveDataImport.js     # 课程数据导入配置
│   ├── companyJobsNew.json         # 企业内推岗位数据
│   ├── interviewStatus.json        # 岗位面试状态
│   ├── expertSupportData.js        # 专家支持中心数据
│   ├── joblevel.json               # 岗位级别分类
│   ├── 智能制造课程日历.json        # 课程日历源数据
│   └── 智能制造单元背景.json        # 单元海报数据
├── mocks/
│   ├── resumeInterviewMock.js      # 简历与面试页面数据
│   └── projectLibraryMock.js       # 项目库数据
└── 网页未导入数据/
    └── 智能制造产业/
        ├── 智能制造个人档案.json    # 学生个人信息
        ├── 智能制造岗位面试状态.json # 面试状态数据
        └── 智能制造修改版简历/      # 修改版简历文件夹

二、各页面详细数据逻辑

1. 主页 (Dashboard)

文件位置: src/pages/DashboardPage/index.jsx

数据来源：

班级排名: mockData.js → dashboardStatistics.ranking.topStudents
学习进度: mockData.js → dashboardStatistics.learningProgress
推荐岗位: mockData.js → dashboardStatistics.recommendedJobs
用户信息: mockData.js → personalProfile

数据流：

// mockData.js 中的数据结构
dashboardStatistics: {
  ranking: {
    currentRank: 2,        // 当前排名
    totalStudents: 45,     // 总人数
    topStudents: [...]     // 前10名学生数据
  },
  learningProgress: {...},
  recommendedJobs: [...]
}

替换要点：

更新 topStudents 数组中的学生信息
保持数据结构不变，只替换内容
不修改任何样式和组件逻辑

2. 个人档案页面 (PersonalProfile)

文件位置: src/pages/PersonalProfilePage/index.jsx

数据来源：

个人信息: mockData.js → personalProfile
班级排名: mockData.js → personalProfile.classRanking
学习记录: mockData.js → personalProfile.learningRecords

数据流：

personalProfile: {
  basicInfo: {
    name: "王强",
    studentId: "2325010211",
    school: "苏州健雄职业技术学院",
    major: "模具设计与制造",
    // ...
  },
  classRanking: [...],
  credits: 95
}

替换要点：

从产业个人档案JSON导入数据
更新头像路径
保持MBTI等个性化数据
不修改页面布局和CSS样式
保留所有数据处理逻辑

3. 简历与面试页面 (ResumeInterview)

文件位置: src/pages/ResumeInterviewPage/index.jsx

数据来源：

岗位群数据: resumeInterviewMock.js → industries
岗位列表: resumeInterviewMock.js → industries[].positions
简历模板: resumeInterviewMock.js → resumeTemplates
面试题: resumeInterviewMock.js → industries[].questions
修改版标记: 页面内 hasRealModifiedVersion() 函数

数据结构：

// resumeInterviewMock.js
industries: [
  {
    id: "manufacturing_1",
    name: "3D打印工艺",
    positions: [...],     // 该岗位群下的所有岗位
    questions: [...]      // 该岗位群的面试题
  }
]

resumeTemplates: {
  "3D打印工艺": [
    {
      position: "3D打印工程师",
      content: {
        original: "原始版简历内容",
        modified: "修改版简历内容"
      }
    }
  ]
}

替换要点：

替换岗位群名称和ID
更新每个岗位的详细信息
替换简历内容（保持original和modified结构）
更新面试题内容
修改 hasRealModifiedVersion 函数中的岗位列表
绝不改动组件渲染逻辑和样式

4. 企业内推岗位页面 (CompanyJobs)

文件位置: src/pages/CompanyJobsPage/index.jsx

数据来源：

岗位列表: companyJobsNew.json
面试状态: interviewStatus.json
岗位详情: companyJobsNew.json → 各岗位的详细字段

数据结构：

// companyJobsNew.json
[
  {
    "公司名称": "苏州某科技有限公司",
    "查询岗位名称": "PLC控制工程师",
    "招聘人数": "2人",
    "学历要求": "大专及以上",
    "薪资": "8-12K",
    // ...
  }
]

// interviewStatus.json
[
  {
    "查询岗位名称": "PLC控制工程师",
    "阶段日期": "收到Offer：2025/9/14 16:17",
    "面试状态": "已收到Offer，请于2天内答复"
  }
]

替换要点：

保持JSON字段名不变（中文字段名）
更新岗位内容为新产业岗位
同步更新面试状态数据
不修改页面交互逻辑
保持原有动画效果

5. 项目库页面 (ProjectLibrary)

文件位置: src/pages/ProjectLibraryPage/index.jsx

数据来源：

项目列表: projectLibraryMock.js → projects
项目详情: projectLibraryMock.js → projects[].details
适用岗位: projectLibraryMock.js → projects[].suitablePositions
对应单元: projectLibraryMock.js → projects[].relatedUnit

数据结构：

// projectLibraryMock.js
projects: [
  {
    id: 1,
    title: "90°弯管液压歧管3D打印项目",
    category: "3D打印工艺",
    suitablePositions: ["3D打印工程师", "3D打印产品设计师"],
    relatedUnit: "单元一",
    details: {
      background: "项目背景...",
      objectives: ["目标1", "目标2"],
      // ...
    }
  }
]

替换要点：

更新项目名称和分类
替换适用岗位列表
更新项目详情内容
保持单元映射关系
不改动模态框和卡片组件

6. 课程直播间页面 (CourseLive)

文件位置: src/pages/CourseLivePage/index.jsx

数据来源：

课程列表: mockData.js → courseLiveList (复合能力课)
垂直课程: mockData.js → verticalCourseLiveList
公共课程: mockData.js → publicCourseLiveList
单元海报: courseLiveDataImport.js → unitPosters

数据流：

// 从智能制造课程日历.json生成
courseLiveList: generateCourseLiveListFromCalendar('compound-skill')
verticalCourseLiveList: generateCourseLiveListFromCalendar('vertical-skill')

// 单元海报映射
unitPosters: {
  "单元一": "https://xxx.com/unit1.jpg",
  // ...
}

替换要点：

更新课程日历JSON文件
更新单元背景JSON文件
确保课程类型字段正确（复合课阶段/垂直课阶段）
保持课程卡片样式不变
不修改数据转换函数

7. 日历页面 (Calendar)

文件位置: src/pages/CalendarPage/index.jsx

数据来源：

日历事件: mockData.js → calendarEvents
源数据: 智能制造课程日历.json

数据转换流程：

// courseLiveDataImport.js
智能制造课程日历.json → transformCalendarCourses() → calendarEvents

// 事件类型判断
课程阶段（个人课程）包含"复合" → type: 'compound-skill'
课程阶段（个人课程）包含"垂直" → type: 'vertical-skill'
公共课字段有值 → type: 'public'

替换要点：

更新课程日历JSON
保持日期格式（YYYY/M/D）
正确设置课程类型字段
不改动日历组件和事件渲染

8. 课程作业页面 (Homework)

文件位置: src/pages/HomeworkPage/index.jsx

数据来源：

作业列表: mockData.js → homework
动态生成: 从 courseLiveList 自动生成

数据生成逻辑：

// mockData.js 中的动态生成
if (mockData.homework && mockData.homework[0]) {
  // 从courseLiveList生成复合能力课作业
  mockData.courseLiveList.forEach(unit => {
    unit.courses.forEach(course => {
      // 生成作业项
    });
  });
}

替换要点：

作业内容自动从课程列表生成
无需手动更新作业数据
保持作业卡片样式
不修改生成逻辑

9. 岗位攻略详情页 (JobStrategyDetail)

文件位置: src/pages/JobStrategyDetailPage/index.jsx

数据来源：

岗位详情: 从URL参数获取岗位，匹配 companyJobsNew.json
优先级数据: 页面内定义

替换要点：

更新岗位优先级列表
更新岗位分析内容
保持图表和可视化组件不变

10. 专家支持中心 (ExpertSupport)

文件位置: src/pages/ExpertSupportPage/index.jsx

数据来源：

问答数据: expertSupportData.js
聊天记录: expertSupportData.js → chatMessages

数据结构：

// expertSupportData.js
export const expertSupportData = {
  faqs: [...],
  chatMessages: [...],
  expertProfiles: [...]
}

替换要点：

更新FAQ内容
更新预设的聊天消息
更新专家信息
保持聊天界面样式
不修改消息处理逻辑

三、导师信息替换专项指南

导师数据结构说明

导师信息存储在 src/data/mockData.js 的 teacherData 对象中，通过 updateTeacherCourses 函数与课程日历事件关联。

导师类型分类

复合课导师 - 产业专属，需要替换
公共课导师 - 通用导师，保持不变
AI课导师 - 通用导师，保持不变
企业资深HR - 通用导师，保持不变

替换步骤

识别需要替换的导师
- 查找所有 type: "复合课导师" 的导师
- 这些是产业相关的专业导师
准备新导师数据
- 从"导师信息（通用）.json"中选择新产业相关导师
- 确保导师的垂直方向与产业匹配

更新导师信息

// 示例：智能制造产业导师
"王军": {
  name: "王军",
  introduction: "导师介绍内容...",
  specialties: ["30年研发专家", "主导国标制定", "资深机械结构专家", "单产品创收百万"],
  avatar: "https://头像URL",
  type: "复合课导师",
  verticalDirection: "机械加工工艺",
  courses: []  // 自动由updateTeacherCourses函数填充
}

垂直方向对应关系
- 智能制造：机械加工工艺、智能机械产品结构与外观设计、智能制造非标自动化产线搭建、自动化设备智能调试
- 文旅：项目经营管理、商业活动策划、文化服务
- 其他产业：根据实际垂直方向设置
注意事项
- ⚠️ 保持导师对象的键名与name属性一致
- ⚠️ courses数组留空，由系统自动填充
- ⚠️ 不要修改updateTeacherCourses函数逻辑
- ⚠️ 保留所有公共课导师、AI课导师和HR导师

导师信息验证

检查导师是否在课程播放器中正确显示
验证导师的课程列表是否自动更新
确认导师头像URL可访问

四、各页面详细替换步骤指南

📌 页面1：主页 (Dashboard)

步骤流程：

准备数据
- 从新产业个人档案JSON获取前10名学生数据
- 准备学生头像图片URL

修改文件: src/data/mockData.js

// 找到 dashboardStatistics.ranking.topStudents
// 替换为新的学生数组，格式如下：
topStudents: [
  {
    rank: 1,
    name: "新学生名",
    studentId: "新学号",
    school: "新学校",
    major: "新专业",
    credits: 97,
    avatar: "/images/avatars/新头像.jpg"
  },
  // ... 继续添加前10名
]

验证要点
- ✅ 确保rank从1到10递增
- ✅ 学分按降序排列
- ✅ 头像路径正确可访问
- ❌ 不要修改字段名称
- ❌ 不要改动组件样式

📌 页面2：个人档案 (PersonalProfile)

步骤流程：

选择目标学生
- 从个人档案JSON中选择一个学生（如排名第2的学生）

修改文件: src/data/mockData.js

// 找到 personalProfile 对象
personalProfile: {
  basicInfo: {
    name: "王强",  // 替换为新学生名
    studentId: "2325010211",  // 新学号
    school: "苏州健雄职业技术学院",  // 新学校
    major: "模具设计与制造",  // 新专业
    class: "智能制造1班",  // 新班级
    credits: 95,  // 新学分
    ranking: 2,  // 新排名
    avatar: "/images/avatars/wangqiang.jpg",  // 新头像
    mbti: "ESTJ",  // 保持或更新MBTI
    direction: "自动化设备智能调试"  // 新方向
  },
  classRanking: [/* 更新为新的前10名数组 */],
  learningRecords: [/* 可选：更新学习记录 */]
}

同步更新侧边栏
- 确保Sidebar组件引用的是同一个personalProfile数据
验证要点
- ✅ 个人信息与选定学生一致
- ✅ 班级排名数据与Dashboard同步
- ❌ 不要修改组件结构

📌 页面3：简历与面试 (ResumeInterview)

步骤流程：

准备简历数据
- 整理新产业的岗位群和岗位列表
- 准备每个岗位的原始版和修改版简历

修改文件: src/mocks/resumeInterviewMock.js

// 1. 更新 industries 数组
industries: [
  {
    id: "manufacturing_1",
    name: "3D打印工艺",  // 新岗位群名称
    icon: "🖨️",  // 可选：更新图标
    positions: [
      {
        id: "3d_engineer",
        title: "3D打印工程师",  // 新岗位名称
        company: "苏州某科技",  // 新公司
        salary: "8-12K",  // 新薪资
        requirements: ["要求1", "要求2"]  // 新要求
      }
      // ... 更多岗位
    ],
    questions: [/* 新的面试题 */]
  }
  // ... 更多岗位群
]

// 2. 更新 resumeTemplates
resumeTemplates: {
  "3D打印工艺": [
    {
      position: "3D打印工程师",
      content: {
        original: "# 原始简历内容\n...",
        modified: "# 修改版简历内容\n..."
      }
    }
  ]
}

// 3. 更新 myResume
myResume: {
  personalInfo: {
    name: "王强",  // 与personalProfile一致
    // ... 其他个人信息
  }
}

修改页面文件: src/pages/ResumeInterviewPage/index.jsx

// 更新 hasRealModifiedVersion 函数
const hasRealModifiedVersion = (positionTitle) => {
  const modifiedPositions = [
    "新岗位1",
    "新岗位2",
    // ... 有修改版的岗位列表
  ];
  return modifiedPositions.includes(positionTitle);
};

验证要点
- ✅ 岗位群和岗位数据完整
- ✅ 简历内容格式正确（Markdown）
- ✅ 修改版标记正确显示
- ❌ 不要改动Tab切换逻辑

📌 页面4：企业内推岗位 (CompanyJobs)

步骤流程：

准备岗位数据
- 整理新产业的企业岗位信息
- 准备对应的面试状态数据

修改文件: src/data/companyJobsNew.json

[
  {
    "公司名称": "苏州某科技有限公司",
    "查询岗位名称": "PLC控制工程师",
    "招聘人数": "2人",
    "学历要求": "大专及以上",
    "薪资": "8-12K",
    "工作地点": "苏州工业园区",
    "岗位职责": ["职责1", "职责2"],
    "任职要求": ["要求1", "要求2"]
  }
  // ... 更多岗位
]

修改文件: src/data/interviewStatus.json

[
  {
    "查询岗位名称": "PLC控制工程师",
    "阶段日期": "收到Offer：2025/9/14 16:17",
    "面试状态": "已收到Offer，请于2天内答复"
  }
  // ... 更多状态
]

修改简历模态框默认值: src/pages/CompanyJobsPage/components/ResumeInfoModal/index.jsx

education: [{
  school: '新学校名称',
  major: '新专业名称',
  period: '2020.9-2023.6'
}]

验证要点
- ✅ 岗位信息字段完整
- ✅ 面试状态与岗位对应
- ✅ 保持中文字段名
- ❌ 不要修改动画效果

📌 页面5：项目库 (ProjectLibrary)

步骤流程：

准备项目数据
- 整理新产业的项目案例
- 确定项目与岗位的映射关系

修改文件: src/mocks/projectLibraryMock.js

projects: [
  {
    id: 1,
    title: "90°弯管液压歧管3D打印项目",  // 新项目名
    category: "3D打印工艺",  // 新分类
    suitablePositions: ["3D打印工程师", "产品设计师"],  // 适用岗位
    relatedUnit: "单元一",  // 对应单元
    details: {
      background: "项目背景描述...",
      objectives: ["目标1", "目标2"],
      requirements: ["需求1", "需求2"],
      process: ["步骤1", "步骤2"],
      results: ["成果1", "成果2"],
      skills: ["技能1", "技能2"]
    }
  }
  // ... 更多项目
]

验证要点
- ✅ 项目详情结构完整
- ✅ 岗位名称与简历页面一致
- ❌ 不要修改卡片组件样式

📌 页面6：课程直播间 (CourseLive)

步骤流程：

准备课程数据
- 整理课程日历JSON
- 准备单元背景图片
更新数据文件:
- 将新的课程日历JSON放到 src/data/[产业名称]课程日历.json
- 将单元背景JSON放到 src/data/[产业名称]单元背景.json

修改导入配置: src/data/courseLiveDataImport.js

// 修改导入路径
import calendarData from './[产业名称]课程日历.json';
import unitPostersData from './[产业名称]单元背景.json';

// 数据会自动通过transformCalendarCourses转换

数据格式要求

// 课程日历JSON格式
{
  "个人课程表": "课程名称",
  "课程阶段（个人课程）": "复合课阶段/垂直课阶段",
  "所属单元（个人课程）": "单元一",
  "日期": "2024/7/15"
}

更新导师信息: src/data/mockData.js

在teacherData对象中替换导师信息
复合课导师需要替换为新产业相关导师
公共课导师、AI课导师、HR导师保持不变

teacherData: updateTeacherCourses({
  "导师名": {
    name: "导师名",
    introduction: "导师介绍...",
    specialties: ["特长1", "特长2", "特长3", "特长4"],
    avatar: "头像URL",
    type: "复合课导师/公共课导师/AI课导师/企业资深HR",
    verticalDirection: "垂直方向",
    courses: []
  },
  // ... 更多导师
}, allCalendarEvents)

验证要点
- ✅ 课程正确分类（复合/垂直）
- ✅ 单元海报URL可访问
- ✅ 公共课保持不变
- ✅ 导师信息与产业匹配
- ❌ 不要修改课程卡片样式
- ❌ 不要修改导师卡片组件

📌 页面7：日历 (Calendar)

步骤流程：

数据自动生成
- 日历数据从课程日历JSON自动转换
- 无需额外修改

验证日期格式

{
  "日期": "2024/7/15",  // 必须是 YYYY/M/D 格式
  "公共课": "职业素养",  // 如果有公共课
  "个人课程表": "智能制造概论"  // 个人课程
}

验证要点
- ✅ 日期格式正确
- ✅ 事件类型自动判断
- ❌ 不要修改日历组件

📌 页面8：课程作业 (Homework)

步骤流程：

自动生成机制
- 作业从courseLiveList自动生成
- 无需手动修改

验证生成逻辑: src/data/mockData.js

// 检查动态生成代码是否正常工作
if (mockData.homework && mockData.homework[0]) {
  // 复合能力课作业生成
  // 垂直能力课作业生成
}

验证要点
- ✅ 作业与课程对应
- ✅ 单元分组正确
- ❌ 不要修改作业卡片

📌 页面9：岗位攻略详情 (JobStrategyDetail)

步骤流程：

更新岗位分析数据
- 岗位数据从companyJobsNew.json读取
- 可在页面内更新优先级分析

修改页面文件（如需要）: src/pages/JobStrategyDetailPage/index.jsx

// 更新岗位优先级数据
const jobPriorities = [
  { name: '新岗位1', priority: 'high' },
  { name: '新岗位2', priority: 'medium' },
  // ...
];

验证要点
- ✅ 岗位详情正确显示
- ✅ 图表数据更新
- ❌ 不要修改图表组件

📌 页面10：专家支持中心 (ExpertSupport)

步骤流程：

准备FAQ和聊天数据
- 整理新产业相关的常见问题
- 准备预设聊天消息

修改文件: src/data/expertSupportData.js

export const expertSupportData = {
  faqs: [
    {
      question: "新产业相关问题1？",
      answer: "答案1"
    }
    // ... 更多FAQ
  ],
  chatMessages: [
    {
      type: 'expert',
      content: '欢迎咨询新产业相关问题',
      time: '10:00'
    }
    // ... 预设消息
  ],
  expertProfiles: [
    {
      name: "专家名",
      title: "新产业专家",
      expertise: ["领域1", "领域2"]
    }
  ]
}

验证要点
- ✅ FAQ内容相关
- ✅ 聊天消息合理
- ❌ 不要修改聊天界面

三、产业数据替换步骤指南

第一步：准备源数据文件

创建产业数据文件夹

网页未导入数据/[产业名称]/
├── [产业名称]个人档案.json
├── [产业名称]课程日历.json
├── [产业名称]单元背景.json
├── [产业名称]岗位面试状态.json
└── [产业名称]修改版简历/
    ├── 岗位1.md
    ├── 岗位2.md
    └── ...

数据格式要求
- 个人档案：包含学生信息、学校、专业、学分、排名等
- 课程日历：包含日期、课程名称、课程阶段、所属单元等
- 单元背景：包含单元名称和海报URL
- 岗位面试状态：包含岗位名称、面试阶段、状态描述

第二步：更新核心数据文件

更新 mockData.js

// 1. 导入新的数据文件
import personalData from "@/data/[产业名称]个人档案.json";
import calendarData from "@/data/[产业名称]课程日历.json";

// 2. 更新personalProfile
const targetStudent = personalData[1]; // 选择目标学生
mockData.personalProfile = {
  basicInfo: {
    name: targetStudent.学员名称,
    studentId: targetStudent.学号,
    // ...
  }
};

// 3. 更新班级排名
mockData.dashboardStatistics.ranking.topStudents = personalData.slice(0, 10);

// 4. 更新导师信息（替换复合课导师）
teacherData: updateTeacherCourses({
  "新导师名": {
    name: "新导师名",
    introduction: "导师介绍...",
    specialties: ["特长1", "特长2", "特长3", "特长4"],
    avatar: "头像URL",
    type: "复合课导师",
    verticalDirection: "产业相关方向",
    courses: []
  },
  // ... 保留公共课导师、AI课导师、HR导师
}, allCalendarEvents)

更新 resumeInterviewMock.js
- 替换 industries 数组（岗位群）
- 替换 resumeTemplates 对象（简历内容）
- 更新 myResume 对象（个人简历）
更新 projectLibraryMock.js
- 替换 projects 数组
- 更新项目与岗位的映射关系
更新其他JSON文件
- companyJobsNew.json：企业岗位数据
- interviewStatus.json：面试状态数据

第三步：更新页面特定逻辑

ResumeInterviewPage

// 更新修改版岗位列表
const hasRealModifiedVersion = (positionTitle) => {
  const modifiedPositions = [
    // 新产业的岗位列表
  ];
  return modifiedPositions.includes(positionTitle);
};

ResumeInfoModal

// 更新默认教育经历
education: [{
  school: '新学校名称',
  major: '新专业名称',
  period: '2020.9-2023.6'
}]

第四步：验证数据完整性

检查清单
- 个人信息是否正确显示
- 班级排名数据是否同步
- 课程列表是否正确分类
- 岗位和简历是否匹配
- 项目库内容是否更新
- 面试状态是否正确
- 修改版标记是否显示
常见问题排查
- 数据不显示：检查import路径
- 类型错误：检查数据格式
- 样式错乱：保持原有CSS类名

四、数据更新注意事项

1. 🔴 绝对禁止的操作

禁止修改任何CSS文件或样式
禁止改动组件的JSX结构
禁止修改数据处理函数逻辑
禁止重命名任何变量或函数
禁止改变文件目录结构

2. 保持数据结构一致性

不要修改字段名称
不要改变数据层级结构
只替换具体内容值
保留所有原始的数据处理逻辑

3. 中文字段名处理

// 保持中文字段名不变
{
  "查询岗位名称": "新岗位名",  // ✓ 正确
  "jobName": "新岗位名"        // ✗ 错误，不要改字段名
}

4. 图片资源处理

使用CDN链接或public目录
保持相同的图片尺寸比例
优化图片大小（建议<500KB）

5. 日期格式统一

// 课程日历：YYYY/M/D
"日期": "2024/7/15"

// 面试状态：YYYY/M/D H:mm
"阶段日期": "2025/9/14 16:17"

6. 备份原数据

# 备份命令
cp src/data/mockData.js src/data/mockData.js.backup_$(date +%Y%m%d_%H%M%S)

五、快速替换脚本示例

// updateIndustryData.js
import fs from 'fs';
import path from 'path';

const updateIndustryData = (industryName) => {
  // 1. 读取新产业数据
  const personalData = JSON.parse(
    fs.readFileSync(`网页未导入数据/${industryName}/${industryName}个人档案.json`)
  );

  // 2. 更新mockData.js
  // ... 更新逻辑

  // 3. 更新其他文件
  // ... 更新逻辑

  console.log(`✅ 已更新为${industryName}产业数据`);
};

// 使用
updateIndustryData('智能制造');

六、数据流程图

graph TD
    A[产业源数据] --> B[数据导入层]
    B --> C[mockData.js]
    B --> D[resumeInterviewMock.js]
    B --> E[projectLibraryMock.js]

    C --> F[Dashboard]
    C --> G[PersonalProfile]
    C --> H[Calendar]
    C --> I[CourseLive]
    C --> J[Homework]

    D --> K[ResumeInterview]
    E --> L[ProjectLibrary]

    M[companyJobsNew.json] --> N[CompanyJobs]
    O[interviewStatus.json] --> N

    P[expertSupportData.js] --> Q[ExpertSupport]

七、完整替换流程检查清单

✅ 替换前准备

备份所有将要修改的文件
准备完整的产业数据文件
确认数据格式符合要求
测试环境可正常运行

✅ 数据替换检查

mockData.js
- personalProfile 更新完成
- dashboardStatistics 更新完成
- 班级排名数据同步
- teacherData 导师信息更新
- 复合课导师替换为产业相关导师
- 公共课导师保持不变
resumeInterviewMock.js
- industries 数组替换
- resumeTemplates 更新
- myResume 信息同步
projectLibraryMock.js
- projects 数组更新
- 岗位映射关系正确
companyJobsNew.json
- 岗位信息完整
- 字段名保持中文
interviewStatus.json
- 面试状态对应
- 日期格式正确
课程相关数据
- 课程日历JSON导入
- 单元背景JSON配置
- 课程分类正确

✅ 页面功能验证

主页班级排名显示正确
个人档案信息一致
简历修改版标记显示
企业岗位列表完整
项目库内容更新
课程直播间分类正确
课程直播间导师信息显示
导师头像正常加载
导师课程列表自动更新
日历事件显示正常
作业自动生成成功
岗位攻略数据准确
专家支持内容相关

✅ 数据一致性检查

学生姓名全局一致
学号信息匹配
学校专业同步
岗位名称统一
课程类型分类正确

八、常见问题与解决方案

问题1：数据不显示

症状：页面空白或数据缺失解决：

检查import路径是否正确
确认JSON文件格式无误
查看浏览器控制台错误

问题2：样式错乱

症状：布局混乱或样式丢失原因：可能修改了CSS类名或组件结构解决：恢复原始组件代码，只修改数据

问题3：修改版标记不显示

症状：简历页面修改版标记缺失解决：

检查hasRealModifiedVersion函数
确认岗位名称完全匹配
验证modified字段有内容

问题4：课程分类错误

症状：复合课和垂直课混淆解决：

检查"课程阶段（个人课程）"字段
确认包含"复合"或"垂直"关键字
验证transformCalendarCourses函数

问题5：作业不生成

症状：作业页面为空解决：

确认courseLiveList有数据
检查动态生成代码执行
验证课程类型判断逻辑

问题6：头像不显示

症状：学生头像404 解决：

将头像文件放到public/images/avatars/
使用正确的相对路径
确认文件名大小写匹配

问题7：日期格式错误

症状：日历事件不显示解决：

使用YYYY/M/D格式（斜杠分隔）
不要补零（7/15而非07/15）
检查日期字段名称

问题8：中文字段名问题

症状：数据读取失败解决：

保持原有中文字段名
不要改为英文
注意字段名完全匹配

九、测试验证方法

1. 单元测试

// 测试数据完整性
describe('产业数据完整性测试', () => {
  test('个人信息应包含必要字段', () => {
    expect(mockData.personalProfile.basicInfo).toHaveProperty('name');
    expect(mockData.personalProfile.basicInfo).toHaveProperty('studentId');
  });
});

2. 集成测试

访问每个页面检查数据显示
测试数据交互功能
验证数据同步性

3. 数据一致性检查

// 检查学生姓名是否全局一致
const checkNameConsistency = () => {
  const name1 = mockData.personalProfile.basicInfo.name;
  const name2 = resumeInterviewMock.myResume.personalInfo.name;
  const name3 = mockData.dashboardStatistics.ranking.topStudents[1].name;

  return name1 === name2 && name2 === name3;
};

十、快速命令参考

备份命令

# 备份核心文件
cp src/data/mockData.js src/data/mockData.js.backup_$(date +%Y%m%d_%H%M%S)
cp src/mocks/resumeInterviewMock.js src/mocks/resumeInterviewMock.js.backup_$(date +%Y%m%d_%H%M%S)
cp src/mocks/projectLibraryMock.js src/mocks/projectLibraryMock.js.backup_$(date +%Y%m%d_%H%M%S)

语法检查

# 检查JavaScript语法
node -c src/data/mockData.js
node -c src/mocks/resumeInterviewMock.js

开发服务器

# 启动开发服务器
npm run dev

# 清理缓存后启动
rm -rf node_modules/.vite
npm run dev

Git操作

# 查看修改的文件
git status

# 查看具体修改内容
git diff src/data/mockData.js

# 提交更改
git add .
git commit -m "feat: 替换为[产业名称]产业数据"

十一、数据替换最佳实践

👍 推荐做法

分步替换：先替换一个页面，测试后再继续
版本控制：每完成一个模块就提交一次
注释标记：在修改处添加注释说明
数据验证：使用console.log验证数据加载
团队协作：记录修改内容供团队参考

👎 避免做法

批量替换：不要使用全局查找替换
跳过备份：不要直接修改无备份文件
忽略错误：不要忽视控制台警告
修改框架：不要改动React组件逻辑
更改样式：不要修改CSS文件

十二、产业切换总结

核心要点回顾

数据与逻辑分离：只替换数据，保持逻辑
结构保持一致：维护原有数据结构
样式不做修改：保留所有样式文件
字段名不改变：特别是中文字段名
测试验证充分：每步都要验证结果

成功标准

✅ 所有页面正常显示
✅ 数据内容正确更新
✅ 功能交互正常工作
✅ 样式布局保持原样
✅ 无控制台错误警告

最后更新时间: 2024年9月15日 当前产业: 智能制造 维护人员: System Admin 文档版本: v2.0

34 KiB Raw Blame History Unescape Escape

教务系统数据架构与产业替换指南

核心原则 ⚠️

🔴 绝对不可修改的内容

✅ 只替换以下内容

📋 替换原则总结

一、系统整体数据架构

核心数据文件结构

二、各页面详细数据逻辑

1. 主页 (Dashboard)

数据来源：

数据流：

替换要点：

2. 个人档案页面 (PersonalProfile)

数据来源：

数据流：

替换要点：

3. 简历与面试页面 (ResumeInterview)

数据来源：

数据结构：

替换要点：

4. 企业内推岗位页面 (CompanyJobs)

数据来源：

数据结构：

替换要点：

5. 项目库页面 (ProjectLibrary)

数据来源：

数据结构：

替换要点：

6. 课程直播间页面 (CourseLive)

数据来源：

数据流：

替换要点：

7. 日历页面 (Calendar)

数据来源：

数据转换流程：

替换要点：

8. 课程作业页面 (Homework)

数据来源：

数据生成逻辑：

替换要点：

9. 岗位攻略详情页 (JobStrategyDetail)

数据来源：

替换要点：

10. 专家支持中心 (ExpertSupport)

数据来源：

数据结构：

替换要点：

三、导师信息替换专项指南

导师数据结构说明

导师类型分类

替换步骤

导师信息验证

四、各页面详细替换步骤指南

📌 页面1：主页 (Dashboard)

步骤流程：

📌 页面2：个人档案 (PersonalProfile)

步骤流程：

📌 页面3：简历与面试 (ResumeInterview)

步骤流程：

📌 页面4：企业内推岗位 (CompanyJobs)

步骤流程：

📌 页面5：项目库 (ProjectLibrary)

步骤流程：

📌 页面6：课程直播间 (CourseLive)

步骤流程：

📌 页面7：日历 (Calendar)

步骤流程：

📌 页面8：课程作业 (Homework)

步骤流程：

📌 页面9：岗位攻略详情 (JobStrategyDetail)

步骤流程：

📌 页面10：专家支持中心 (ExpertSupport)

步骤流程：

三、产业数据替换步骤指南

第一步：准备源数据文件

第二步：更新核心数据文件

第三步：更新页面特定逻辑

第四步：验证数据完整性

四、数据更新注意事项

34 KiB

Raw Blame History