Agent-n8n/web_frontend/exhibition-demo/12产业页面测试指南.md

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错误

解决方法：

# 查看所有图片文件
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 编译错误

可能原因：

• 导入路径错误
• 类型定义不匹配

解决方法：

# 重启开发服务器
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

部署命令

如果需要重新构建和预览生产版本：

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