38350dca36
主要更新： - 更新所有12个产业的教务系统数据和功能 - 删除所有 node_modules 文件夹（节省3.7GB） - 删除所有 .yoyo 缓存文件夹（节省1.2GB） - 删除所有 dist 构建文件（节省55MB） 项目优化： - 项目大小从 8.1GB 减少到 3.2GB（节省60%空间） - 保留完整的源代码和配置文件 - .gitignore 已配置，防止再次提交大文件 启动脚本： - start-industry.sh/bat/ps1 脚本会自动检测并安装依赖 - 首次启动时自动运行 npm install - 支持单个或批量启动产业系统 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
98 lines
3.6 KiB
Markdown
98 lines
3.6 KiB
Markdown
# 企业内推岗位公司图片展示功能实现总结
|
||
|
||
## 实施时间
|
||
2025-10-08
|
||
|
||
## 问题诊断与修复
|
||
### 初始问题
|
||
- 功能实现后图片未显示
|
||
- 原因：数据源配置错误，数据流理解不完整
|
||
|
||
### 解决方案
|
||
1. 发现页面使用`mockData.companyJobs.companyPositions`作为数据源
|
||
2. 修改`mockData.js`中的`transformCompanyJobs`函数以包含图片数据
|
||
3. 不再需要修改`companyJobsNew.js`（该文件未被使用）
|
||
|
||
## 修改的文件
|
||
|
||
### 1. 核心数据文件（关键修复）
|
||
- **src/data/mockData.js**
|
||
- 导入企业图片数据文件
|
||
- 创建岗位名称到图片URL数组的映射（companyImagesMap）
|
||
- 在transformCompanyJobs函数中添加companyImages字段到details对象
|
||
|
||
### 2. 组件文件
|
||
- **src/pages/CompanyJobsPage/components/JobInfoModal/index.jsx**
|
||
- 添加了图片相关状态管理（currentImageIndex, imageModalVisible）
|
||
- 添加了图片轮播和预览功能
|
||
- 在公司介绍板块下方添加了图片网格展示
|
||
- 添加了全屏图片预览模态框
|
||
|
||
### 3. 样式文件
|
||
- **src/pages/CompanyJobsPage/components/JobInfoModal/index.css**
|
||
- 添加了公司图片网格布局样式 (.company-images-grid)
|
||
- 添加了响应式图片数量适配（1-4张自适应布局）
|
||
- 添加了图片项悬停效果 (.company-image-item)
|
||
- 添加了全屏图片预览模态框样式 (.image-preview-modal)
|
||
- 添加了图片预览控制按钮（关闭、上一张、下一张、计数器）
|
||
|
||
### 4. 数据服务文件（已还原）
|
||
- **src/services/companyJobsNew.js**
|
||
- 已修改导入路径为智能制造岗位数据
|
||
- 注意：此文件实际未被页面使用，页面使用mockData.js
|
||
|
||
## 数据源
|
||
- **网页未导入数据/智能制造产业/智能制造_内推岗位企业图片.json**
|
||
- 包含24个智能制造岗位的企业图片数据
|
||
- 每个岗位包含2-35张不等的企业现场图片
|
||
|
||
## 功能特点
|
||
|
||
### 1. 响应式网格布局
|
||
- 1张图片：单列显示
|
||
- 2张图片：双列显示
|
||
- 3张图片：三列显示
|
||
- 4张及以上：四列显示（最多一行4张）
|
||
|
||
### 2. 交互功能
|
||
- 图片悬停：放大效果和阴影变化
|
||
- 点击图片：打开全屏预览
|
||
- 全屏预览：支持左右切换、关闭、显示当前位置
|
||
|
||
### 3. 样式一致性
|
||
- 完全复用参考项目（frontend）的样式和交互逻辑
|
||
- 保持与其他教务系统页面的视觉统一
|
||
|
||
## 数据流程
|
||
1. **数据导入**：`mockData.js` 导入 `companyJobsNew.json` 和 `智能制造_内推岗位企业图片.json`
|
||
2. **数据映射**：创建 `companyImagesMap` 映射岗位名称到图片数组
|
||
3. **数据转换**：`transformCompanyJobs` 函数为每个岗位添加 `companyImages` 字段
|
||
4. **数据提供**：通过 `mockData.companyJobs.companyPositions` 提供给页面
|
||
5. **数据使用**：`CompanyJobsPage` → `JobInfoModal` → 图片展示
|
||
|
||
## 备份文件
|
||
所有修改前的文件都已备份（带时间戳）：
|
||
- JobInfoModal/index.jsx.backup_*
|
||
- JobInfoModal/index.css.backup_*
|
||
- companyJobsNew.js.backup_*
|
||
- mockData.js.backup_*
|
||
|
||
## 数据验证
|
||
✅ 成功导入24个岗位的企业图片数据
|
||
✅ 图片URL格式正确（逗号分隔转数组）
|
||
✅ 岗位名称映射准确
|
||
✅ 数据结构符合组件预期
|
||
|
||
## 使用说明
|
||
1. 打开企业内推岗位页面
|
||
2. 点击任意岗位查看详情
|
||
3. 在公司介绍板块下方可看到企业图片网格
|
||
4. 点击任意图片可全屏预览
|
||
5. 使用左右箭头或点击切换图片
|
||
6. 点击关闭按钮或背景区域退出预览
|
||
|
||
## 注意事项
|
||
- 仅有智能制造_内推岗位企业图片.json中的岗位会显示图片
|
||
- 其他岗位保持原样，不会显示图片板块
|
||
- 图片加载失败时会显示浏览器默认的占位符
|