Duguay/online_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a7242f0c69121dad2e126996dd1c175b0702e561
online_sys/frontend_智能制造/公司图片功能实现总结.md
KQL a7242f0c69 Initial commit: 教务系统在线平台 
- 包含4个产业方向的前端项目：智能开发、智能制造、大健康、财经商贸
- 已清理node_modules、.yoyo等大文件，项目大小从2.6GB优化至631MB
- 配置完善的.gitignore文件

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-12 18:16:55 +08:00

3.6 KiB
Raw Blame History

企业内推岗位公司图片展示功能实现总结

实施时间

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