feat: 实现12个产业展示页面的动态背景切换功能

详细说明: - 新增产业图片配置文件 (src/config/industryImages.ts) - 配置12个产业的背景图片映射关系 - 处理特殊格式(文旅为jpeg,其他为png) - 处理特殊命名(土木文件名为"土木水利") - 修改 App.tsx 添加URL路由解析 - 根据URL路径自动识别产业ID - 自动设置selectedOrderClass并跳转到工作流页面 - 支持直接访问如 /food, /wenlu 等产业页面 - 修改 WorkflowPageV4.tsx 实现动态背景 - 页面背景图片根据产业ID动态加载 - 左侧工作流区域图片根据产业ID动态加载 - 右侧Agent执行功能保持不变 - 新增测试和部署文档 - 12产业页面测试指南.md (测试12个产业页面) - DEPLOYMENT.md (生产环境部署说明) 影响功能: - 12个产业(食品/文旅/智能制造/智能开发/财经商贸/视觉设计/大健康/交通物流/能源/化工/环保/土木) - 每个产业拥有独立的访问URL和专属背景图片 - 开发环境端口 5173, 生产部署端口 4173 🤖 Generated with Claude Code
2025-10-30 15:43:25 +08:00
parent 3f5657c684
commit 049b4f7f11
5 changed files with 773 additions and 6 deletions
--- a/web_frontend/exhibition-demo/12产业页面测试指南.md
+++ b/web_frontend/exhibition-demo/12产业页面测试指南.md
@@ -0,0 +1,272 @@
+# 12产业展示页面测试指南
+
+## ✅ 功能实施完成
+
+### 已完成的修改
+1. ✅ 创建了产业图片配置文件 `src/config/industryImages.ts`
+2. ✅ 修改了 `WorkflowPageV4.tsx` 使用动态背景图
+3. ✅ 修改了 `App.tsx` 添加URL路由解析逻辑
+
+### 代码改动汇总
+- **新增文件**: 1个 (`src/config/industryImages.ts`)
+- **修改文件**: 2个 (`App.tsx`, `WorkflowPageV4.tsx`)
+- **总代码行数**: 约60行
+
+---
+
+## 🧪 测试清单
+
+### 1. 基础访问测试
+
+请在浏览器中依次访问以下12个URL，验证背景图片是否正确显示：
+
+**开发环境**: http://localhost:5173
+**生产部署**: http://localhost:4173
+
+| 序号 | 产业 | 访问URL (开发) | 访问URL (生产) | 图片文件 | 格式 |
+|-----|------|---------------|---------------|----------|------|
+| 1 | 食品 | http://localhost:5173/food | http://localhost:4173/food | 食品.png | PNG |
+| 2 | 文旅 | http://localhost:5173/wenlu | http://localhost:4173/wenlu | 文旅.jpeg | **JPEG** ⚠️ |
+| 3 | 智能制造 | http://localhost:5173/manufacturing | http://localhost:4173/manufacturing | 智能制造.png | PNG |
+| 4 | 智能开发 | http://localhost:5173/developer | http://localhost:4173/developer | 智能开发.png | PNG |
+| 5 | 财经商贸 | http://localhost:5173/finance | http://localhost:4173/finance | 财经商贸.png | PNG |
+| 6 | 视觉设计 | http://localhost:5173/visual | http://localhost:4173/visual | 视觉设计.png | PNG |
+| 7 | 大健康 | http://localhost:5173/health | http://localhost:4173/health | 大健康.png | PNG |
+| 8 | 交通物流 | http://localhost:5173/transportation | http://localhost:4173/transportation | 交通物流.png | PNG |
+| 9 | 能源 | http://localhost:5173/energy | http://localhost:4173/energy | 能源.png | PNG |
+| 10 | 化工 | http://localhost:5173/chemical | http://localhost:4173/chemical | 化工.png | PNG |
+| 11 | 环保 | http://localhost:5173/environmental | http://localhost:4173/environmental | 环保.png | PNG |
+| 12 | 土木 | http://localhost:5173/civil | http://localhost:4173/civil | 土木水利.png | PNG ⚠️ |
+
+**特别注意**：
+- ⚠️ **文旅** 使用的是 `.jpeg` 格式，其他都是 `.png`
+- ⚠️ **土木** 的图片文件名是 `土木水利.png`
+
+---
+
+## 📋 详细测试步骤
+
+### 测试1：直接URL访问
+
+1. 打开浏览器
+2. **开发环境**: 访问 `http://localhost:5173/food`
+   **生产部署**: 访问 `http://localhost:4173/food`
+3. **预期结果**：
+   - ✅ 自动跳过 Landing 页面
+   - ✅ 直接显示 WorkflowPage
+   - ✅ 背景显示食品产业图片（半透明）
+   - ✅ 右侧显示 Agent 执行区域
+
+### 测试2：背景图片验证
+
+对于每个产业页面，检查：
+
+1. **背景图片显示正确**
+   - 打开浏览器开发者工具 (F12)
+   - 查看 Console，确认没有图片加载错误
+   - 检查背景图片是否清晰可见（半透明 opacity: 0.15）
+
+2. **特殊格式验证**
+   - 访问 `/wenlu`，确认 JPEG 格式的文旅图片正常显示
+   - 访问 `/civil`，确认土木水利图片正常显示
+
+### 测试3：功能完整性
+
+对于每个产业页面，验证右侧功能：
+
+1. ✅ 点击"输入需求"按钮，弹出 RequirementModal
+2. ✅ 选择对应的订单班，开始执行
+3. ✅ Agent 依次执行，终端输出正常
+4. ✅ 执行完成后显示 ResultModal
+5. ✅ 重置功能正常
+6. ✅ 暂停/继续功能正常
+
+### 测试4：边界情况
+
+1. **无效URL测试**
+   - 访问 `http://localhost:5173/invalid-industry`
+   - **预期结果**：显示 Landing 页面（因为不是有效的产业ID）
+
+2. **默认页面测试**
+   - 访问 `http://localhost:5173/`
+   - **预期结果**：显示 Landing 页面
+
+3. **刷新测试**
+   - 在任意产业页面（如 `/food`）按 F5 刷新
+   - **预期结果**：页面重新加载，背景图片保持正确
+
+---
+
+## 🐛 故障排查
+
+### 问题1：背景图片不显示
+
+**可能原因**：
+- 图片文件路径错误
+- 图片文件不存在
+- 图片格式错误
+
+**检查步骤**：
+1. 确认 `public/images/` 目录下有所有12张图片
+2. 检查文件名是否完全匹配（注意中文字符）
+3. 查看浏览器 Console 是否有404错误
+
+**解决方法**：
+```bash
+# 查看所有图片文件
+ls -lh /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo/public/images/
+
+# 如果是生产部署，检查 dist 目录
+ls -lh /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo/dist/images/
+```
+
+### 问题2：URL访问后显示 Landing 页面
+
+**可能原因**：
+- 产业ID拼写错误
+- `isValidIndustryId` 验证失败
+- 生产环境需要重新构建
+
+**检查步骤**：
+1. 确认URL中的产业ID正确（如 `food`, `wenlu`，不是 `shipin`, `wenlv`）
+2. 检查 `industryImages.ts` 中是否有该产业ID
+3. 如果是生产环境，确认是否执行了 `npm run build`
+
+### 问题3：TypeScript 编译错误
+
+**可能原因**：
+- 导入路径错误
+- 类型定义不匹配
+
+**解决方法**：
+```bash
+# 重启开发服务器
+cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
+npm run dev
+```
+
+---
+
+## 📊 测试检查表
+
+请逐一测试并勾选：
+
+- [ ] 1. 食品 `/food` - 背景图片正确
+- [ ] 2. 文旅 `/wenlu` - JPEG格式图片正确
+- [ ] 3. 智能制造 `/manufacturing` - 背景图片正确
+- [ ] 4. 智能开发 `/developer` - 背景图片正确
+- [ ] 5. 财经商贸 `/finance` - 背景图片正确
+- [ ] 6. 视觉设计 `/visual` - 背景图片正确
+- [ ] 7. 大健康 `/health` - 背景图片正确
+- [ ] 8. 交通物流 `/transportation` - 背景图片正确
+- [ ] 9. 能源 `/energy` - 背景图片正确
+- [ ] 10. 化工 `/chemical` - 背景图片正确
+- [ ] 11. 环保 `/environmental` - 背景图片正确
+- [ ] 12. 土木 `/civil` - 土木水利图片正确
+- [ ] 13. 右侧Agent执行功能正常
+- [ ] 14. RequirementModal 弹窗正常
+- [ ] 15. ResultModal 结果展示正常
+- [ ] 16. 暂停/继续功能正常
+- [ ] 17. 重置功能正常
+- [ ] 18. 浏览器刷新功能正常
+
+---
+
+## 🎯 快速测试命令
+
+### 开发环境 (端口 5173)
+在浏览器地址栏依次输入以下URL进行快速测试：
+
+```
+http://localhost:5173/food
+http://localhost:5173/wenlu
+http://localhost:5173/manufacturing
+http://localhost:5173/developer
+http://localhost:5173/finance
+http://localhost:5173/visual
+http://localhost:5173/health
+http://localhost:5173/transportation
+http://localhost:5173/energy
+http://localhost:5173/chemical
+http://localhost:5173/environmental
+http://localhost:5173/civil
+```
+
+### 生产部署 (端口 4173)
+在浏览器地址栏依次输入以下URL进行快速测试：
+
+```
+http://localhost:4173/food
+http://localhost:4173/wenlu
+http://localhost:4173/manufacturing
+http://localhost:4173/developer
+http://localhost:4173/finance
+http://localhost:4173/visual
+http://localhost:4173/health
+http://localhost:4173/transportation
+http://localhost:4173/energy
+http://localhost:4173/chemical
+http://localhost:4173/environmental
+http://localhost:4173/civil
+```
+
+### 部署命令
+如果需要重新构建和预览生产版本：
+
+```bash
+cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
+
+# 构建生产版本
+npm run build
+
+# 预览生产版本（端口 4173）
+npm run preview
+```
+
+---
+
+## ✨ 预期效果
+
+### 视觉效果
+- 每个产业页面有**独特的背景图片**（半透明显示）
+- 背景图片**全屏覆盖**，居中显示
+- 背景上有**渐变蒙版**，增强视觉层次
+- 右侧内容保持**完全一致**
+
+### 功能效果
+- URL直接访问立即显示对应产业页面
+- 背景图片根据产业ID**自动切换**
+- 所有Agent执行功能**完全正常**
+- 页面刷新后保持当前产业状态
+
+---
+
+## 📝 测试报告模板
+
+测试完成后，请记录：
+
+**测试日期**: ___________
+**测试人员**: ___________
+
+**测试结果**:
+- 成功的产业页面数量: ___ / 12
+- 发现的问题: ___________
+- 问题截图: ___________
+
+**备注**: ___________
+
+---
+
+## 🎉 测试完成后
+
+如果所有测试通过，恭喜！12个产业展示页面已经成功实现！
+
+**下一步建议**:
+1. 为每个产业页面添加专属的Agent配置
+2. 完善产业数据和展示内容
+3. 优化背景图片（如需要）
+4. 考虑添加产业切换导航（可选）
+
+---
+
+**提示**: 如果遇到任何问题，请检查浏览器 Console 的错误信息，并参考"故障排查"部分。
--- a/web_frontend/exhibition-demo/DEPLOYMENT.md
+++ b/web_frontend/exhibition-demo/DEPLOYMENT.md
@@ -0,0 +1,410 @@
+# 部署说明文档
+
+## 📦 生产环境部署
+
+### 端口说明
+- **开发环境**: http://localhost:5173 (npm run dev)
+- **生产预览**: http://localhost:4173 (npm run preview)
+- **生产部署**: 端口 4173
+
+---
+
+## 🚀 快速部署流程
+
+### 1. 构建生产版本
+
+```bash
+cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
+
+# 安装依赖（如果还没安装）
+npm install
+
+# 构建生产版本
+npm run build
+```
+
+**构建结果**:
+- 生成 `dist/` 目录
+- 包含所有静态资源（HTML、CSS、JS、图片等）
+- 图片从 `public/images/` 复制到 `dist/images/`
+
+### 2. 预览生产版本
+
+```bash
+# 本地预览生产版本（端口 4173）
+npm run preview
+```
+
+访问: http://localhost:4173
+
+### 3. 验证12个产业页面
+
+在浏览器中测试所有产业页面：
+
+```
+http://localhost:4173/food
+http://localhost:4173/wenlu
+http://localhost:4173/manufacturing
+http://localhost:4173/developer
+http://localhost:4173/finance
+http://localhost:4173/visual
+http://localhost:4173/health
+http://localhost:4173/transportation
+http://localhost:4173/energy
+http://localhost:4173/chemical
+http://localhost:4173/environmental
+http://localhost:4173/civil
+```
+
+---
+
+## 📁 生产部署目录结构
+
+构建后的 `dist/` 目录结构：
+
+```
+dist/
+├── index.html              # 主页面
+├── assets/                 # JS/CSS 资源
+│   ├── index-[hash].js
+│   ├── index-[hash].css
+│   └── ...
+└── images/                 # 产业背景图片
+    ├── 文旅.jpeg
+    ├── 食品.png
+    ├── 化工.png
+    ├── 环保.png
+    ├── 能源.png
+    ├── 大健康.png
+    ├── 交通物流.png
+    ├── 土木水利.png
+    ├── 智能制造.png
+    ├── 智能开发.png
+    ├── 视觉设计.png
+    └── 财经商贸.png
+```
+
+---
+
+## 🔧 部署配置
+
+### Vite 配置 (vite.config.ts)
+
+确认配置文件包含以下设置：
+
+```typescript
+export default defineConfig({
+  // ... 其他配置
+
+  // 生产构建配置
+  build: {
+    outDir: 'dist',
+    assetsDir: 'assets',
+    // 确保图片被复制到 dist 目录
+    copyPublicDir: true,
+  },
+
+  // 预览服务器配置
+  preview: {
+    port: 4173,
+    host: true,
+  },
+});
+```
+
+---
+
+## 🌐 服务器部署方案
+
+### 方案1: 使用 Nginx
+
+**Nginx 配置示例** (`/etc/nginx/sites-available/exhibition-demo`):
+
+```nginx
+server {
+    listen 4173;
+    server_name localhost;
+
+    root /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo/dist;
+    index index.html;
+
+    # 处理 SPA 路由
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # 静态资源缓存
+    location /assets/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    location /images/ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
+```
+
+**启动 Nginx**:
+```bash
+sudo nginx -t
+sudo systemctl reload nginx
+```
+
+### 方案2: 使用 PM2 (Node.js 进程管理)
+
+**安装 PM2**:
+```bash
+npm install -g pm2
+```
+
+**创建 PM2 配置文件** (`ecosystem.config.js`):
+```javascript
+module.exports = {
+  apps: [{
+    name: 'exhibition-demo',
+    script: 'npx',
+    args: 'vite preview --port 4173 --host',
+    cwd: '/Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo',
+    instances: 1,
+    autorestart: true,
+    watch: false,
+    max_memory_restart: '1G',
+    env: {
+      NODE_ENV: 'production',
+    },
+  }],
+};
+```
+
+**启动应用**:
+```bash
+cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
+pm2 start ecosystem.config.js
+pm2 save
+pm2 startup
+```
+
+### 方案3: Docker 部署
+
+**创建 Dockerfile**:
+```dockerfile
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 4173
+CMD ["nginx", "-g", "daemon off;"]
+```
+
+**nginx.conf**:
+```nginx
+server {
+    listen 4173;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+```
+
+**构建和运行**:
+```bash
+docker build -t exhibition-demo .
+docker run -d -p 4173:4173 exhibition-demo
+```
+
+---
+
+## ✅ 部署检查清单
+
+### 构建前检查
+- [ ] 所有代码修改已提交
+- [ ] 依赖包已安装 (`npm install`)
+- [ ] 图片文件在 `public/images/` 目录
+- [ ] 配置文件正确 (vite.config.ts)
+
+### 构建后检查
+- [ ] `dist/` 目录已生成
+- [ ] `dist/images/` 包含所有12张产业图片
+- [ ] `dist/assets/` 包含 JS/CSS 文件
+- [ ] `dist/index.html` 存在
+
+### 部署后检查
+- [ ] 服务器在端口 4173 运行
+- [ ] 访问 http://localhost:4173 显示 Landing 页面
+- [ ] 访问 http://localhost:4173/food 显示食品产业页面
+- [ ] 所有12个产业页面可访问
+- [ ] 背景图片正确显示
+- [ ] Agent 执行功能正常
+- [ ] 浏览器 Console 无错误
+
+---
+
+## 🐛 常见部署问题
+
+### 问题1: 图片404错误
+
+**原因**: 图片未复制到 dist 目录
+
+**解决**:
+```bash
+# 手动复制图片
+cp -r public/images dist/
+
+# 或重新构建
+npm run build
+```
+
+### 问题2: 路由404错误
+
+**原因**: 服务器未配置 SPA 路由回退
+
+**解决**: 配置服务器 try_files 规则（见上面 Nginx 配置）
+
+### 问题3: 端口被占用
+
+**检查端口**:
+```bash
+lsof -ti:4173
+```
+
+**释放端口**:
+```bash
+kill $(lsof -ti:4173)
+```
+
+### 问题4: 构建失败
+
+**检查日志**:
+```bash
+npm run build 2>&1 | tee build.log
+```
+
+**清理缓存**:
+```bash
+rm -rf node_modules dist
+npm install
+npm run build
+```
+
+---
+
+## 📊 性能优化建议
+
+### 1. 图片优化
+```bash
+# 安装图片优化工具
+npm install -D vite-plugin-imagemin
+
+# 在 vite.config.ts 中配置
+import viteImagemin from 'vite-plugin-imagemin';
+
+export default defineConfig({
+  plugins: [
+    viteImagemin({
+      gifsicle: { optimizationLevel: 7 },
+      optipng: { optimizationLevel: 7 },
+      mozjpeg: { quality: 80 },
+      pngquant: { quality: [0.8, 0.9], speed: 4 },
+      svgo: { plugins: [{ name: 'removeViewBox' }] },
+    }),
+  ],
+});
+```
+
+### 2. 代码分割
+Vite 已自动配置代码分割，无需额外配置。
+
+### 3. 开启 Gzip
+在 Nginx 中启用 gzip 压缩。
+
+---
+
+## 🔄 更新部署流程
+
+### 1. 代码更新后重新部署
+
+```bash
+cd /Users/apple/Documents/cursor/多多Agent/n8n_Demo/web_frontend/exhibition-demo
+
+# 拉取最新代码
+git pull
+
+# 安装新依赖（如果有）
+npm install
+
+# 重新构建
+npm run build
+
+# 重启服务
+pm2 restart exhibition-demo  # 如果使用 PM2
+# 或
+sudo systemctl reload nginx  # 如果使用 Nginx
+```
+
+### 2. 图片更新
+
+```bash
+# 更新图片后重新构建
+npm run build
+
+# 或手动复制新图片
+cp public/images/新图片.png dist/images/
+```
+
+---
+
+## 📝 环境变量配置
+
+如果需要配置环境变量（如 API 地址），创建 `.env.production`:
+
+```bash
+# .env.production
+VITE_API_BASE_URL=http://192.168.2.9:4155
+VITE_APP_TITLE=多智能体协同生成系统
+```
+
+在代码中使用：
+```typescript
+const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4155';
+```
+
+---
+
+## 🎯 快速命令参考
+
+```bash
+# 开发
+npm run dev          # 启动开发服务器 (5173)
+
+# 构建
+npm run build        # 构建生产版本
+
+# 预览
+npm run preview      # 预览生产版本 (4173)
+
+# 清理
+rm -rf dist node_modules
+npm install
+npm run build
+```
+
+---
+
+**部署完成后，访问**: http://localhost:4173
+
+测试所有12个产业页面是否正常工作！
--- a/web_frontend/exhibition-demo/src/App.tsx
+++ b/web_frontend/exhibition-demo/src/App.tsx
@@ -1,14 +1,26 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import LandingPage from './pages/LandingPage';
 import WorkflowPageV4 from './pages/WorkflowPageV4';
 import { useDemoStore } from './store/demoStore';
+import { isValidIndustryId } from './config/industryImages';

 type PageType = 'landing' | 'workflow';

 function App() {
  const [currentPage, setCurrentPage] = useState<PageType>('landing');
-  const { status } = useDemoStore();
+  const { status, setSelectedOrderClass } = useDemoStore();
+
+  // 路由解析逻辑：检查URL路径，如果是有效的产业ID，直接进入工作流页面
+  useEffect(() => {
+    const path = window.location.pathname.slice(1); // 去掉开头的 /
+
+    if (path && isValidIndustryId(path)) {
+      // 如果URL包含有效的产业ID，自动设置并跳转到工作流页面
+      setSelectedOrderClass(path);
+      setCurrentPage('workflow');
+    }
+  }, [setSelectedOrderClass]);

  // 注释掉自动跳转逻辑，让用户通过弹窗选择是否查看结果
  // React.useEffect(() => {
--- a/web_frontend/exhibition-demo/src/config/industryImages.ts
+++ b/web_frontend/exhibition-demo/src/config/industryImages.ts
@@ -0,0 +1,72 @@
+/**
+ * 产业背景图片映射配置
+ *
+ * 用途：为12个不同产业的展示页面配置对应的背景图片
+ * 特殊说明：
+ * - 文旅使用 .jpeg 格式，其他产业使用 .png 格式
+ * - 土木的文件名是 "土木水利.png"
+ */
+
+export const industryImages: Record<string, string> = {
+  // 食品产业
+  food: '/images/食品.png',
+
+  // 文旅产业（注意：使用 jpeg 格式）
+  wenlu: '/images/文旅.jpeg',
+
+  // 智能制造
+  manufacturing: '/images/智能制造.png',
+
+  // 智能开发
+  developer: '/images/智能开发.png',
+
+  // 财经商贸
+  finance: '/images/财经商贸.png',
+
+  // 视觉设计
+  visual: '/images/视觉设计.png',
+
+  // 大健康
+  health: '/images/大健康.png',
+
+  // 交通物流
+  transportation: '/images/交通物流.png',
+
+  // 能源
+  energy: '/images/能源.png',
+
+  // 化工
+  chemical: '/images/化工.png',
+
+  // 环保
+  environmental: '/images/环保.png',
+
+  // 土木（注意：文件名是"土木水利"）
+  civil: '/images/土木水利.png',
+};
+
+/**
+ * 获取产业背景图片
+ * @param industryId 产业ID（如 'food', 'wenlu' 等）
+ * @returns 图片路径，如果找不到则返回默认的文旅图片
+ */
+export const getIndustryImage = (industryId: string): string => {
+  return industryImages[industryId] || industryImages.wenlu;
+};
+
+/**
+ * 获取所有产业ID列表
+ * @returns 产业ID数组
+ */
+export const getAllIndustryIds = (): string[] => {
+  return Object.keys(industryImages);
+};
+
+/**
+ * 检查产业ID是否有效
+ * @param industryId 产业ID
+ * @returns 是否为有效的产业ID
+ */
+export const isValidIndustryId = (industryId: string): boolean => {
+  return industryId in industryImages;
+};
--- a/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx
+++ b/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx
@@ -5,6 +5,7 @@ import { Play, Pause, RotateCcw, Maximize2, Terminal, FileInput, Eye, Calendar,
 import RequirementModal from '@/components/RequirementModal';
 import ResultModal from '@/components/ResultModal';
 import { getSimulationData } from '@/data/terminalSimulations';
+import { getIndustryImage } from '@/config/industryImages';

 // Terminal line type
 interface TerminalLine {
@@ -1043,10 +1044,10 @@ const WorkflowPageV4 = () => {
    <div className="h-screen bg-gray-50 flex flex-col relative">
      {/* 背景图片和蒙版 */}
      <div className="absolute inset-0 z-0">
-        <div 
-          className="absolute inset-0" 
+        <div
+          className="absolute inset-0"
          style={{
-            backgroundImage: 'url(/images/Whisk_e8f83d1a37.jpg)',
+            backgroundImage: `url(${getIndustryImage(selectedOrderClass || 'wenlu')})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
@@ -1131,7 +1132,7 @@ const WorkflowPageV4 = () => {
            {/* 工作流效果图 */}
            <div className="absolute inset-0 bg-gray-50">
              <img
-                src="/images/workflow-visualization.jpeg"
+                src={getIndustryImage(selectedOrderClass || 'wenlu')}
                alt="工作流可视化效果图"
                className="w-full h-full object-cover"
                onError={(e) => {