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
This commit is contained in:
KQL
272
web_frontend/exhibition-demo/12产业页面测试指南.md
Normal file
272
web_frontend/exhibition-demo/12产业页面测试指南.md
Normal file
@@ -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 的错误信息，并参考"故障排查"部分。
|
||||
Reference in New Issue
Block a user