diff --git a/web_frontend/exhibition-demo/12产业页面测试指南.md b/web_frontend/exhibition-demo/12产业页面测试指南.md new file mode 100644 index 00000000..3ae03cb9 --- /dev/null +++ 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 的错误信息,并参考"故障排查"部分。 diff --git a/web_frontend/exhibition-demo/DEPLOYMENT.md b/web_frontend/exhibition-demo/DEPLOYMENT.md new file mode 100644 index 00000000..d46386fd --- /dev/null +++ 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个产业页面是否正常工作! diff --git a/web_frontend/exhibition-demo/src/App.tsx b/web_frontend/exhibition-demo/src/App.tsx index 72c1f4c7..ddc72f57 100644 --- 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('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(() => { diff --git a/web_frontend/exhibition-demo/src/config/industryImages.ts b/web_frontend/exhibition-demo/src/config/industryImages.ts new file mode 100644 index 00000000..44729c6a --- /dev/null +++ b/web_frontend/exhibition-demo/src/config/industryImages.ts @@ -0,0 +1,72 @@ +/** + * 产业背景图片映射配置 + * + * 用途:为12个不同产业的展示页面配置对应的背景图片 + * 特殊说明: + * - 文旅使用 .jpeg 格式,其他产业使用 .png 格式 + * - 土木的文件名是 "土木水利.png" + */ + +export const industryImages: Record = { + // 食品产业 + 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; +}; diff --git a/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx b/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx index c3f6afd1..a0fd6c28 100644 --- 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 = () => {
{/* 背景图片和蒙版 */}
-
{ {/* 工作流效果图 */}
工作流可视化效果图 {