# 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 的错误信息，并参考"故障排查"部分。