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/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个产业页面是否正常工作！