Duguay/ALL-teach_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
873a76c538fe9c9da98b2d10f6bc3efb90d9f42b
ALL-teach_sys/frontend_智能制造/公司图片功能实现总结.md
KQL 38350dca36 更新12个教务系统并优化项目大小 
主要更新：
- 更新所有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>
2025-10-17 14:36:25 +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中的岗位会显示图片
  • 其他岗位保持原样，不会显示图片板块
  • 图片加载失败时会显示浏览器默认的占位符