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中的岗位会显示图片
|
|||
|
|
- 其他岗位保持原样，不会显示图片板块
|
|||
|
|
- 图片加载失败时会显示浏览器默认的占位符
|