refactor: 优化RequirementModal UI设计和代码清理
主要更新: - 🎨 UI改进: - 将头部背景改为苹果风格设计 - 添加背景图片 /image/bg.png - 将图标替换为动态视频logo - 统一配色为蓝色系,移除紫色元素 - 优化标题和副标题布局 - 🧹 代码清理: - 删除5个临时测试文件 (test-*.html) - 删除4个旧版本页面组件 (WorkflowPage V1-V3, ResultPage V1) - 保留当前使用的 WorkflowPageV4 和 ResultPageV2 - 🔧 细节调整: - 视频logo尺寸调整为 80x80px - 移除视频容器的圆角和阴影效果 - 按钮颜色从紫色渐变改为蓝色渐变 项目结构更加清晰,界面设计更加现代化
@@ -55,7 +55,14 @@
|
||||
"Bash(for:*)",
|
||||
"Bash(xargs:*)",
|
||||
"Bash(do echo \"=== $dir ===\")",
|
||||
"Bash(find:*)"
|
||||
"Bash(find:*)",
|
||||
"Bash(npx eslint:*)",
|
||||
"Bash(open http://localhost:4173/test-wenlu.html)",
|
||||
"Bash(open http://localhost:4173/test-wenlu-data.html)",
|
||||
"Bash(open http://localhost:4173/test-workflow-wenlu.html)",
|
||||
"Bash(open http://localhost:4173/test-terminal-data.html)",
|
||||
"Bash(open http://localhost:4173/test-workflow.html)",
|
||||
"mcp__promptx__promptx_learn"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": [],
|
||||
|
||||
|
After Width: | Height: | Size: 228 KiB |
|
After Width: | Height: | Size: 754 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/一、项目概述1_(2).jpeg
Executable file
|
After Width: | Height: | Size: 778 KiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/一、项目概述2_(2).jpeg
Executable file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/二、宣传目标解析1.jpeg
Executable file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/二、宣传目标解析3.jpeg
Executable file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/分镜_分镜_page-0001.jpg
Executable file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/分镜_分镜_page-0002.jpg
Executable file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
backups/backup_20250929_155454/视觉设计/notion文稿/image/分镜_分镜_page-0003.jpg
Executable file
|
After Width: | Height: | Size: 1.8 MiB |
|
After Width: | Height: | Size: 784 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 315 KiB |
@@ -142,7 +142,7 @@ const ResultModal: React.FC<ResultModalProps> = ({ isOpen, onClose }) => {
|
||||
<div className="p-6 bg-gray-50 border-t border-gray-200 flex-shrink-0">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={() => window.open('http://192.168.2.99:4155/', '_blank')}
|
||||
onClick={() => window.open('http://localhost:4155/', '_blank')}
|
||||
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:shadow-lg transform hover:scale-105 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Eye className="w-5 h-5" />
|
||||
|
||||
|
Before Width: | Height: | Size: 495 KiB After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 539 KiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 422 KiB After Width: | Height: | Size: 778 KiB |
|
Before Width: | Height: | Size: 347 KiB After Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 519 KiB After Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 518 KiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 173 KiB After Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 454 KiB After Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 535 KiB After Width: | Height: | Size: 784 KiB |
|
Before Width: | Height: | Size: 965 KiB After Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 330 KiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 357 KiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 297 KiB After Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 642 KiB |
|
Before Width: | Height: | Size: 450 KiB |
|
Before Width: | Height: | Size: 525 KiB |
|
Before Width: | Height: | Size: 349 KiB |
|
Before Width: | Height: | Size: 908 KiB |
|
Before Width: | Height: | Size: 617 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 422 KiB After Width: | Height: | Size: 754 KiB |
|
Before Width: | Height: | Size: 269 KiB |
|
Before Width: | Height: | Size: 498 KiB After Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 586 KiB |
|
Before Width: | Height: | Size: 794 KiB |
|
Before Width: | Height: | Size: 552 KiB |
|
Before Width: | Height: | Size: 673 KiB |
|
Before Width: | Height: | Size: 235 KiB |
|
Before Width: | Height: | Size: 443 KiB |
|
Before Width: | Height: | Size: 304 KiB |
|
Before Width: | Height: | Size: 677 KiB |
|
Before Width: | Height: | Size: 432 KiB |
|
Before Width: | Height: | Size: 306 KiB |
|
Before Width: | Height: | Size: 559 KiB |
|
Before Width: | Height: | Size: 315 KiB |
|
Before Width: | Height: | Size: 378 KiB |
|
Before Width: | Height: | Size: 314 KiB |
|
Before Width: | Height: | Size: 272 KiB |
|
Before Width: | Height: | Size: 240 KiB |
|
Before Width: | Height: | Size: 332 KiB |
|
Before Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 275 KiB |
|
Before Width: | Height: | Size: 466 KiB |
@@ -1,48 +1,17 @@
|
||||
{
|
||||
"Whisk_a1d005bb666aac7955842c4ee5b38ae4dr.jpeg": "图片_01.jpg",
|
||||
"Whisk_3b33fae3ca0cc45998e4f09974ed9960dr.jpeg": "图片_03.jpg",
|
||||
"Whisk_6e45327511b48b485a14c65738cfe054dr.jpeg": "图片_06.jpg",
|
||||
"Whisk_7e3be22169d22c2bd97487eae2b290cfdr.jpeg": "图片_07.jpg",
|
||||
"Whisk_fc8ab89604fa63995d54fbb2c4b8d010dr.jpeg": "图片_08.jpg",
|
||||
"Whisk_d13ee85ad564ed1b6e44fee2b738f7a4dr.jpeg": "图片_13.jpg",
|
||||
"分镜设计1.jpg": "设计图_01.jpg",
|
||||
"分镜设计3.jpg": "设计图_03.jpg",
|
||||
"分镜设计4.jpg": "设计图_04.jpg",
|
||||
"分镜设计6.jpg": "设计图_06.jpg",
|
||||
"分镜设计8.jpg": "设计图_08.jpg",
|
||||
"分镜设计9.jpg": "设计图_09.jpg",
|
||||
"分镜设计11.jpg": "设计图_11.jpg",
|
||||
"分镜设计12.jpg": "设计图_12.jpg",
|
||||
"分镜设计13.jpg": "设计图_13.jpg",
|
||||
"分镜设计14.jpg": "设计图_14.jpg",
|
||||
"分镜设计15.jpg": "设计图_15.jpg",
|
||||
"Whisk_d1bd2561b430cd4970e46fff7d16f497dr.jpeg": "图片_02.jpg",
|
||||
"Whisk_30cff7c35b631e1a8374700621d3d781dr.jpeg": "图片_04.jpg",
|
||||
"30adf66a-05e9-4731-8f74-791523397d0f.jpg": "图片_05.jpg",
|
||||
"Whisk_45badb38732bc08a34549eeaf1a73431dr.jpeg": "图片_09.jpg",
|
||||
"67f65bce-bb8d-4d69-8ecf-08c64c9bb495.jpg": "图片_10.jpg",
|
||||
"Whisk_418df2173a1a30b9a8e44d53807e51d6dr.jpeg": "图片_11.jpg",
|
||||
"Whisk_c982f9058222156b8a1452f551a63192dr.jpeg": "图片_12.jpg",
|
||||
"六、拍摄总体安排2.jpeg": "图片_22.jpg",
|
||||
"四、影片内容大纲8.jpg": "图片_18.jpg",
|
||||
"四、影片内容大纲1.jpg": "图片_21.jpg",
|
||||
"三、影片视觉基调2.jpg": "图片_20.jpg",
|
||||
"四、影片内容大纲2.jpg": "图片_19.jpg",
|
||||
"四、影片内容大纲9.jpg": "图片_16.jpg",
|
||||
"一、项目概述2.jpg": "设计图_02.jpg",
|
||||
"四、影片内容大纲6.jpg": "图片_17.jpg",
|
||||
"三、影片视觉基调1.jpg": "图片_15.jpg",
|
||||
"四、影片内容大纲5.jpg": "图片_14.jpg",
|
||||
"四、影片内容大纲12.jpg": "设计图_16.jpg",
|
||||
"一、项目概述1.jpg": "设计图_17.jpg",
|
||||
"六、拍摄总体安排1.jpg": "设计图_10.jpg",
|
||||
"二、宣传目标2.jpg": "设计图_20.jpg",
|
||||
"四、影片内容大纲10.jpg": "设计图_07.jpg",
|
||||
"四、影片内容大纲4.jpg": "设计图_05.jpg",
|
||||
"二、宣传目标1.jpg": "设计图_21.jpg",
|
||||
"三、影片视觉基调3.jpg": "设计图_22.jpg",
|
||||
"四、影片内容大纲7.jpg": "设计图_19.jpg",
|
||||
"四、影片内容大纲3.jpg": "设计图_18.jpg",
|
||||
"五、拍摄经费预算表.jpeg": "展示图_02.jpg",
|
||||
"四、影片内容大纲11.jpeg": "展示图_01.jpg"
|
||||
"53c52c9e-93a2-4e04-83d1-2805df2bb002.jpg": "图片_01.jpg",
|
||||
"941fdb1c-03ea-40c7-a59e-81de5c500025.jpg": "图片_02.jpg",
|
||||
"静帧_2025-09-29_112637_1.1.5.jpg": "图片_03.jpg",
|
||||
"静帧_2025-09-29_112305_1.1.2.jpg": "图片_04.jpg",
|
||||
"静帧_2025-09-29_112305_1.1.1.jpg": "图片_05.jpg",
|
||||
"静帧_2025-09-29_112305_1.1.4.jpg": "图片_06.jpg",
|
||||
"静帧_2025-09-29_112305_1.1.3.jpg": "图片_07.jpg",
|
||||
"静帧_2025-09-29_112713_1.1.6.jpg": "图片_08.jpg",
|
||||
"d1382923-65d3-4d19-a395-fa2c2aeb5260.jpg": "图片_09.jpg",
|
||||
"AdobeColor-My_Color_Theme.jpeg": "图片_10.jpg",
|
||||
"分镜_分镜_page-0001.jpg": "设计图_01.jpg",
|
||||
"分镜_分镜_page-0002.jpg": "图片_12.jpg",
|
||||
"二、宣传目标解析1.jpeg": "图片_15.jpg",
|
||||
"分镜_分镜_page-0003.jpg": "图片_13.jpg",
|
||||
"二、宣传目标解析3.jpeg": "图片_14.jpg"
|
||||
}
|
||||
@@ -1,40 +1,18 @@
|
||||
# 视觉设计订单班 - 图片资源索引
|
||||
|
||||
**图片总数**: 46 张
|
||||
**图片总数**: 17 张
|
||||
**更新时间**: 2025-09-28
|
||||
**状态**: ✅ 已完成规范化整理
|
||||
|
||||
## 图片分类
|
||||
|
||||
### 设计图 (22张)
|
||||
### 设计图 (1张)
|
||||
- 设计图_01.jpg
|
||||
- 设计图_02.jpg
|
||||
- 设计图_03.jpg
|
||||
- 设计图_04.jpg
|
||||
- 设计图_05.jpg
|
||||
- 设计图_06.jpg
|
||||
- 设计图_07.jpg
|
||||
- 设计图_08.jpg
|
||||
- 设计图_09.jpg
|
||||
- 设计图_10.jpg
|
||||
- 设计图_11.jpg
|
||||
- 设计图_12.jpg
|
||||
- 设计图_13.jpg
|
||||
- 设计图_14.jpg
|
||||
- 设计图_15.jpg
|
||||
- 设计图_16.jpg
|
||||
- 设计图_17.jpg
|
||||
- 设计图_18.jpg
|
||||
- 设计图_19.jpg
|
||||
- 设计图_20.jpg
|
||||
- 设计图_21.jpg
|
||||
- 设计图_22.jpg
|
||||
|
||||
### 展示图 (2张)
|
||||
### 展示图 (1张)
|
||||
- 展示图_01.jpg
|
||||
- 展示图_02.jpg
|
||||
|
||||
### 其他 (22张)
|
||||
### 其他 (15张)
|
||||
- 图片_01.jpg
|
||||
- 图片_02.jpg
|
||||
- 图片_03.jpg
|
||||
@@ -50,19 +28,12 @@
|
||||
- 图片_13.jpg
|
||||
- 图片_14.jpg
|
||||
- 图片_15.jpg
|
||||
- 图片_16.jpg
|
||||
- 图片_17.jpg
|
||||
- 图片_18.jpg
|
||||
- 图片_19.jpg
|
||||
- 图片_20.jpg
|
||||
- 图片_21.jpg
|
||||
- 图片_22.jpg
|
||||
|
||||
## 使用说明
|
||||
|
||||
### Markdown引用格式
|
||||
```markdown
|
||||

|
||||

|
||||
```
|
||||
|
||||
### 注意事项
|
||||
|
||||
23
progress.md
@@ -11,6 +11,8 @@ _Last updated: 2025-09-29_
|
||||
- ⚠️ 多订单班演示系统架构:使用单一exhibition-demo项目,动态切换12个订单班
|
||||
- ⚠️ 数据存储方案:使用JSON文件存储所有订单班配置,不使用SQLite数据库
|
||||
- ⚠️ 结果页面架构:采用混合模板方案(1个基础模板 + 动态内容加载)
|
||||
- ⚠️ 终端模拟系统必须使用TSX格式,不能使用JSON文件加载方式
|
||||
- ⚠️ 每个订单班需要agent prompt和专家头像数据才能实现模拟
|
||||
|
||||
## Decisions(按时间顺序追加,历史不可改)
|
||||
- 2025-09-07: 确定使用 n8n-1.109.2 版本进行完整中文化(理由:成熟稳定版本,功能完整)
|
||||
@@ -26,6 +28,8 @@ _Last updated: 2025-09-29_
|
||||
- 2025-09-28: 确定结果页面采用混合模板方案(理由:1个基础模板 + 动态内容加载,特殊订单班可定制组件)
|
||||
- 2025-09-28: 决定暂不实施Docker Compose方案(理由:现阶段项目架构已简化为单项目+JSON配置,避免过度工程化,专注核心功能开发)
|
||||
- 2025-09-29: 确定将orderClasses.json移动到exhibition-demo项目的data目录(理由:需求模板数据与演示系统紧密耦合,便于动态加载)
|
||||
- 2025-09-29: 决定使用动态JSON数据结构替代硬编码agent数据(理由:提高可维护性和扩展性)
|
||||
- 2025-09-29: 决定将终端模拟系统改为TSX格式(理由:替代JSON文件加载方式,提升代码复用性和类型安全)
|
||||
|
||||
## TODO(权威待办清单)
|
||||
- [P1][OPEN][#1] 优化 Duoduo Agent 设计系统的用户交互体验
|
||||
@@ -46,11 +50,21 @@ _Last updated: 2025-09-29_
|
||||
- [P1][OPEN][#36] 实现Agent动态加载机制(Context:选择订单班后动态加载对应Agent)
|
||||
- [P0][OPEN][#37] 生成所有Agent头像(Context:约100个Agent形象设计,需要统一风格)
|
||||
- [P1][OPEN][#46] 优化需求模板数据映射的用户体验(Context:改进点击订单班后的模板填充交互)
|
||||
- [P1][OPEN][#53] 补充其他10个订单班的agent prompt和头像数据(Context:已完成文旅和食品两个订单班)
|
||||
- [P1][OPEN][#54] 在浏览器中实际测试文旅和食品的演示流程(Context:验证TSX模拟系统功能)
|
||||
|
||||
## In Progress
|
||||
- [P1][DOING][#5] 维护和优化当前多智能体展示分支功能
|
||||
|
||||
## Done(最近完成的放前面)
|
||||
- 2025-09-29: [#58] 修复了暂停和重置按钮功能(evidence:WorkflowPageV4.tsx添加resumeDemo函数导入,修改按钮点击逻辑支持idle/paused/running三种状态切换,重置按钮添加调试日志并清除selectedOrderClass和terminalData状态)
|
||||
- 2025-09-29: [#55] 创建了TSX版本的终端模拟系统(evidence:替代原有JSON文件加载方式,创建/src/data/terminalSimulations/目录结构,实现index.ts统一管理器,定义TerminalLine和SimulationData类型接口)
|
||||
- 2025-09-29: [#56] 实现了文旅和食品两个订单班的模拟数据(evidence:wenlu.ts文旅订单班2024长三角国际新能源汽车展会策划案,food.ts食品订单班青莳轻食连锁品牌创业方案,每个文件包含完整7个Agent输出模拟)
|
||||
- 2025-09-29: [#57] 更新了WorkflowPageV4组件(evidence:修改loadTerminalData函数使用新TSX模拟系统,通过import('@/data/terminalSimulations')动态导入,自动转换数据格式兼容现有终端显示系统)
|
||||
- 2025-09-29: [#49] 完成动态加载终端数据功能开发(evidence:创建wenlu.json数据结构,修改WorkflowPageV4.tsx支持动态加载,修复agent数据映射问题,更新底部Agent状态栏使用动态数据)
|
||||
- 2025-09-29: [#50] 修复了JSON数据格式映射问题(evidence:将agentData.agent.name改为agentData.name,修复executeAgent函数调用)
|
||||
- 2025-09-29: [#51] 创建了文旅订单班终端数据JSON文件(evidence:/web_frontend/exhibition-demo/public/data/terminal/wenlu.json,包含完整agent配置和输出内容)
|
||||
- 2025-09-29: [#52] 实现了终端数据动态加载机制(evidence:添加loadTerminalData函数,支持错误处理和无数据提示)
|
||||
- 2025-09-29: [#44] 完成12个订单班需求模板集成到exhibition-demo(evidence:移动orderClasses.json到/web_frontend/exhibition-demo/src/data/,修改RequirementModal组件使用配置文件数据,修复标题显示问题,实现需求模板数据映射,点击不同订单班自动填充对应专业需求描述)
|
||||
- 2025-09-29: [#43] 完成订单班需求模板配置文件创建(evidence:创建orderClasses.json配置文件,包含12个订单班完整需求模板,基于实际文档内容提取,文件位置/web_frontend/orderClasses.json)
|
||||
- 2025-09-28: [#38] 完成项目重组和文档资料整理(evidence:将2345个文件从doc/订单班文档资料/迁移到data/订单班文档资料/,保持所有12个订单班的完整文档资料,commit beb1ba38)
|
||||
@@ -78,14 +92,22 @@ _Last updated: 2025-09-29_
|
||||
- Risk:n8n 1.109.2 版本可能存在兼容性问题(Mitigation:使用标准安装流程和依赖锁定)
|
||||
- Risk:12个订单班同时开发资源分散(Mitigation:优先开发3个重点订单班,模板化快速复制)
|
||||
- Risk:动态切换订单班可能造成状态管理复杂(Mitigation:使用JSON配置文件统一管理,清晰的数据流)
|
||||
- Risk:JSON文件格式不一致可能导致加载失败(Mitigation:统一数据格式标准)
|
||||
- Risk:TSX模拟系统缺少数据可能影响演示效果(Mitigation:优先补充文旅和食品两个重点订单班数据)
|
||||
- Assumption:用户具备基本的n8n使用经验(Confidence: Medium)
|
||||
- Assumption:展会策划需求相对标准化(Confidence: High)
|
||||
- Assumption:开发环境支持 Node.js 和 pnpm 工具链(Confidence: High)
|
||||
- Assumption:食品订单班基于文旅订单班框架,代码复用可达90%(Confidence: High)
|
||||
- Assumption:订单班模板化开发可将总工期从6-7周缩短至4周(Confidence: High)
|
||||
- Assumption:其他11个订单班的Agent数据可以及时收集到位(Confidence: Medium)
|
||||
- Assumption:其他订单班的数据结构与文旅订单班类似(Confidence: High)
|
||||
|
||||
## Notes(简要要点)
|
||||
- 2025-09-29: 暂停和重置按钮功能修复完成:修复了暂停按钮点击后无法恢复的问题和重置按钮无法完全清理状态的问题,添加resumeDemo函数导入,修改按钮点击逻辑支持idle/paused/running三种状态切换,重置按钮现在能正确清除selectedOrderClass和terminalData状态,添加调试日志便于问题排查
|
||||
- 2025-09-29: TSX终端模拟系统创建完成:替代原JSON文件加载方式,创建/src/data/terminalSimulations/目录,实现index.ts统一管理器,定义TerminalLine和SimulationData类型接口,实现文旅和食品两个订单班模拟数据(wenlu.ts和food.ts),每个文件包含完整7个Agent输出模拟,更新WorkflowPageV4组件使用新系统
|
||||
- 2025-09-29: 关键决策:只保留文旅和食品两个订单班,因为其他订单班缺少agent prompt和专家头像数据;使用函数形式导出便于传入agents参数保持与store同步;保持向后兼容数据格式转换确保现有终端显示逻辑无需修改
|
||||
- 2025-09-29: 动态加载终端数据功能完成:创建了wenlu.json数据结构包含orderClassId、orderClassName、projectTitle、startupSequence、agents数组、completionSequence;修改WorkflowPageV4.tsx添加loadTerminalData函数和相关state;修复agent数据映射问题(agentData.agent.name改为agentData.name);更新底部Agent状态栏使用动态数据;添加错误处理显示无数据时的提示
|
||||
- 2025-09-29: JSON数据格式标准:agents数组中每个agent包含id、name、description、outputs;JSON文件格式必须包含agents数组,每个agent需要有name属性;其他订单班会显示提示:"暂无{orderClassId}订单班的演示数据,目前仅支持文旅订单班"
|
||||
- 2025-09-29: 12个订单班需求模板集成完成:实现了点击不同订单班自动填充专业需求描述的功能,包括食品-青莳轻食连锁品牌、文旅-2024长三角新能源汽车展、智能制造-汽车零部件智能分拣系统等12个专业领域具体项目需求,需求模板数据成功映射到RequirementModal组件
|
||||
- 2025-09-29: orderClasses.json文件迁移完成:从项目根目录移动到exhibition-demo/src/data/目录,与演示系统实现紧密耦合,支持动态加载需求模板数据
|
||||
- 2025-09-29: RequirementModal组件功能升级:从静态展会策划需求改为基于配置文件的动态需求模板,标题统一显示为"输入需求",用户体验更加一致
|
||||
@@ -135,6 +157,7 @@ _Last updated: 2025-09-29_
|
||||
- overview.html (总览页面)
|
||||
- 多订单班配置:
|
||||
- orderClasses.json (所有订单班配置文件,位置:exhibition-demo/src/data/,包含12个订单班需求模板)
|
||||
- 终端模拟系统: exhibition-demo/src/data/terminalSimulations/ (TSX格式,当前支持wenlu.ts和food.ts)
|
||||
- 跳转格式: /web_result/?orderClass=food
|
||||
- 数据存储: sessionStorage配合URL参数
|
||||
- 配置内容: 每个订单班包含项目名称、规模、投资、技术指标等专业参数
|
||||
40
web_frontend/exhibition-demo/.promptx/pouch.json
Normal file
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"currentState": "service_discovery",
|
||||
"stateHistory": [
|
||||
{
|
||||
"from": "initial",
|
||||
"command": "remember",
|
||||
"timestamp": "2025-09-29T01:43:11.727Z",
|
||||
"args": [
|
||||
"recorder",
|
||||
"完成了12个订单班需求模板集成到exhibition-demo项目:\n\n## 主要完成工作\n1. **数据文件迁移**:将orderClasses.json移动到正确位置 /web_frontend/exhibition-demo/src/data/\n2. **组件功能升级**:修改RequirementModal组件,从静态文本改为使用配置文件中的真实数据\n3. **UI问题修复**:修复标题显示问题,统一显示为\"输入需求\"而非\"输入展会策划需求\"\n4. **数据映射实现**:建立需求模板数据映射机制,每个订单班自动显示其专属的项目标题和描述\n\n## 技术实现细节\n- 实现了12个专业领域的需求模板自动填充功能\n- 包含食品、文旅、智能制造等订单班的具体项目需求\n- 点击不同订单班模板时,自动填充对应的专业需求描述\n\n## 具体项目案例\n- 食品:青莳轻食连锁品牌创业方案\n- 文旅:2024长三角国际新能源汽车展会策划案 \n- 智能制造:汽车零部件智能分拣系统集成方案\n- 其他9个专业领域的项目需求"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "memory_saved",
|
||||
"command": "action",
|
||||
"timestamp": "2025-09-29T03:12:57.896Z",
|
||||
"args": [
|
||||
"recorder"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "role_activated_with_memory",
|
||||
"command": "init",
|
||||
"timestamp": "2025-09-29T03:13:05.114Z",
|
||||
"args": [
|
||||
{
|
||||
"workingDirectory": "/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo",
|
||||
"ideType": "claude"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "initialized",
|
||||
"command": "welcome",
|
||||
"timestamp": "2025-09-29T03:13:09.601Z",
|
||||
"args": []
|
||||
}
|
||||
],
|
||||
"lastUpdated": "2025-09-29T03:13:09.606Z"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"source": "project",
|
||||
"metadata": {
|
||||
"version": "2.0.0",
|
||||
"description": "project 级资源注册表",
|
||||
"createdAt": "2025-09-29T03:13:05.121Z",
|
||||
"updatedAt": "2025-09-29T03:13:05.121Z",
|
||||
"resourceCount": 0
|
||||
},
|
||||
"resources": [],
|
||||
"stats": {
|
||||
"totalResources": 0,
|
||||
"byProtocol": {},
|
||||
"bySource": {}
|
||||
}
|
||||
}
|
||||
17
web_frontend/exhibition-demo/dist/index.html
vendored
@@ -1,17 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI 会展策划系统 - 多Agent协同演示</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script type="module" crossorigin src="/assets/index-ucnX0kDr.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-OAzT0ZjV.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
69
web_frontend/exhibition-demo/progress.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Project: n8n 演示展览项目
|
||||
_Last updated: 2025-09-29_
|
||||
|
||||
## Pinned(仅高置信"必须遵守"写入;受保护不可修订)
|
||||
- 必须确保所有 React Hook 依赖正确声明,避免闭包陷阱
|
||||
- 绝对不允许在生产代码中留下console.log调试语句
|
||||
- 必须在每次修改后检查浏览器控制台,确认无任何错误
|
||||
- 项目运行在端口4173,不是5173
|
||||
|
||||
### 🔴 前端开发质量保证(绝对禁止规则)
|
||||
- **必须**:每次修改前端代码后,使用 playwright/puppeteer 检查浏览器控制台
|
||||
- **绝不允许**:代码中出现以下问题
|
||||
- 重复导入语句
|
||||
- 函数定义不完整或混乱
|
||||
- useCallback/useEffect 依赖项错误
|
||||
- console.log 调试语句遗留
|
||||
- 语法错误导致的构建失败
|
||||
|
||||
### 质量检查流程(强制执行)
|
||||
1. 修改代码
|
||||
2. 检查语法(构建测试)
|
||||
3. 打开浏览器控制台检查
|
||||
4. 确认无任何错误才算完成
|
||||
|
||||
### 错误后果警示
|
||||
- 重复导入 → React hooks 冲突
|
||||
- 函数结构混乱 → 语法解析失败
|
||||
- 依赖项错误 → 闭包陷阱,状态更新失败
|
||||
- console语句 → 生产环境信息泄露
|
||||
|
||||
## Decisions(按时间顺序追加,历史不可改)
|
||||
- 2025-09-29: 决定使用 useCallback 解决 React Hook 依赖问题(理由:确保函数能够正确获取最新状态值)
|
||||
- 2025-09-29: 决定从useEffect依赖项中移除terminalData,避免重复执行(理由:防止数据更新时的无限循环)
|
||||
- 2025-09-29: 决定在useCallback内部使用局部变量避免闭包问题(理由:确保获取最新状态值)
|
||||
|
||||
## TODO(权威待办清单)
|
||||
|
||||
## In Progress
|
||||
|
||||
## Done(最近完成的放前面)
|
||||
- 2025-09-29: [#4] 实现Agent状态栏条件显示逻辑优化(evidence:WorkflowPageV4.tsx)
|
||||
- 2025-09-29: [#3] 完成文旅订单班无响应问题调试日志添加(evidence:WorkflowPageV4.tsx, index.ts, test-terminal-data.html, test-workflow.html)
|
||||
- 2025-09-29: [#2] 修复文旅订单班useEffect和useCallback依赖项问题(evidence:/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx)
|
||||
- 2025-09-29: [#1] 修复文旅JSON加载失败问题(evidence:/web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx)
|
||||
|
||||
## Risks & Assumptions
|
||||
- Risk:React Hook 依赖管理复杂性增加(Mitigation:添加完整的依赖声明和调试日志)
|
||||
- Risk:过多的调试日志可能影响性能(Mitigation:仅在开发环境启用,生产环境需移除)
|
||||
- Assumption:useCallback 能够有效解决闭包陷阱问题(Confidence:High)
|
||||
- Assumption:浏览器控制台调试日志能够准确反映文旅订单班的数据流转问题(Confidence:High)
|
||||
|
||||
## Notes(简要要点)
|
||||
- 2025-09-29: Agent状态栏现在只在选择订单班且数据加载成功后显示,条件为:selectedOrderClass && terminalData
|
||||
- 2025-09-29: 添加了未选择订单班时的友好提示,说明每个订单班有专属的AI专家团队
|
||||
- 2025-09-29: terminalData.agents 数据结构包含:id(标识)、name(名称)、icon(emoji图标)、avatar(头像图片)、outputs(输出内容)
|
||||
- 2025-09-29: 专家团队信息现在根据选中的订单班动态显示,头像、名称、图标都从terminalData获取
|
||||
- 2025-09-29: 完成文旅订单班无响应问题调试环境搭建,添加了全链路调试日志跟踪数据流转
|
||||
- 2025-09-29: 调试日志覆盖范围:handleRequirementSubmit → loadTerminalData → getSimulationData → executeStartupSequence
|
||||
- 2025-09-29: 确认文旅订单班ID为"wenlu",数据结构已从JSON格式改为TSX格式提供类型安全
|
||||
- 2025-09-29: 创建了两个测试页面:test-terminal-data.html(基础数据加载)和test-workflow.html(完整工作流)
|
||||
- 2025-09-29: 文旅和食品订单班都使用箭头函数形式的agent引用,数据结构一致性已确认
|
||||
- 2025-09-29: 调试排查步骤:访问localhost:4173 → 打开F12控制台 → 选择文旅订单班 → 查看日志输出
|
||||
- 2025-09-29: 文旅订单班加载失败的根本原因是useEffect依赖项包含terminalData导致闭包问题
|
||||
- 2025-09-29: React Hook 依赖问题是导致功能失效的常见原因,需要特别注意函数依赖的外部状态
|
||||
- 2025-09-29: 使用 useCallback 可以确保函数在依赖变化时重新创建,避免闭包陷阱
|
||||
- 2025-09-29: 添加调试日志有助于快速定位状态传递问题
|
||||
- 2025-09-29: 已建立前端开发质量保证绝对禁止规则,确保代码质量和浏览器兼容性
|
||||
|
||||
## Context Index(轻量索引)
|
||||
393
web_frontend/exhibition-demo/public/data/terminal/wenlu.json
Normal file
@@ -0,0 +1,393 @@
|
||||
{
|
||||
"orderClassId": "wenlu",
|
||||
"orderClassName": "文旅",
|
||||
"projectTitle": "2024长三角国际新能源汽车展会策划案",
|
||||
"startupSequence": [
|
||||
{ "type": "system", "content": ">>> AI Exhibition Planning System v2.0.0" },
|
||||
{ "type": "info", "content": "Initializing neural networks..." },
|
||||
{ "type": "progress", "content": "Loading language models", "target": 100, "stutters": [23, 67, 89] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "system", "content": "🤖 DeepSeek-V2 Model loaded successfully" },
|
||||
{ "type": "system", "content": "🧠 Memory: 236B parameters | Context: 128K tokens" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Loading specialized agents..." },
|
||||
{ "type": "progress", "content": "Information Retrieval Expert", "target": 100, "stutters": [45] },
|
||||
{ "type": "progress", "content": "Design & Layout Expert", "target": 100, "stutters": [23, 78] },
|
||||
{ "type": "progress", "content": "Financial Budget Expert", "target": 100, "stutters": [56] },
|
||||
{ "type": "progress", "content": "Format & Document Expert", "target": 100, "stutters": [34, 89] },
|
||||
{ "type": "progress", "content": "Event Execution Expert", "target": 100, "stutters": [67] },
|
||||
{ "type": "progress", "content": "Marketing & PR Expert", "target": 100, "stutters": [12, 78] },
|
||||
{ "type": "progress", "content": "Exhibition Planning Coordinator", "target": 100, "stutters": [45, 91] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ All agents loaded successfully" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Analyzing user requirements..." },
|
||||
{ "type": "output", "content": "📋 PROJECT: 2024长三角国际新能源汽车展" },
|
||||
{ "type": "output", "content": "📍 LOCATION: 上海国家会展中心" },
|
||||
{ "type": "output", "content": "📅 DATE: 2024.09.12-15" },
|
||||
{ "type": "output", "content": "📐 SCALE: 50,000㎡" },
|
||||
{ "type": "output", "content": "👥 EXPECTED: 300家展商 | 50,000人次观众" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "system", "content": "Starting multi-agent collaboration..." },
|
||||
{ "type": "system", "content": "=" .repeat(60) }
|
||||
],
|
||||
"agents": [
|
||||
{
|
||||
"id": "agent-1",
|
||||
"name": "信息检索与分析专家",
|
||||
"description": "收集和分析展会相关信息",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-1] Information Retrieval Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.3)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Searching industry databases..." },
|
||||
{ "type": "progress", "content": "China Auto Industry Report 2024", "target": 100, "stutters": [34, 78] },
|
||||
{ "type": "progress", "content": "Shanghai Exhibition Center Database", "target": 100, "stutters": [56] },
|
||||
{ "type": "progress", "content": "Competitor Analysis System", "target": 100, "stutters": [23, 89] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "output", "content": "📊 MARKET ANALYSIS RESULTS" },
|
||||
{ "type": "output", "content": "• New Energy Vehicle Market Growth: +35.2% YoY" },
|
||||
{ "type": "output", "content": "• Industry Leaders Confirmed: Tesla, BYD, NIO, XPeng" },
|
||||
{ "type": "output", "content": "• Target Audience Profile: Tech-savvy, 25-45 years" },
|
||||
{ "type": "output", "content": "• Competitive Events: 12 similar exhibitions in 2024" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Analyzing venue specifications..." },
|
||||
{ "type": "output", "content": "📍 VENUE ANALYSIS" },
|
||||
{ "type": "output", "content": "• Hall 1-3: Vehicle Display Area (20,000㎡)" },
|
||||
{ "type": "output", "content": "• Hall 4-5: Parts & Components (15,000㎡)" },
|
||||
{ "type": "output", "content": "• Hall 6: Technology & Innovation (10,000㎡)" },
|
||||
{ "type": "output", "content": "• Outdoor: Test Drive Experience (5,000㎡)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "progress", "content": "market_research_report.pdf", "target": 100, "stutters": [45, 78] },
|
||||
{ "type": "file", "content": "✓ Created: market_research_report.pdf (2.3MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-1 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 8.3s | Memory: 45MB | CPU: 12%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-2",
|
||||
"name": "设计与布局专家",
|
||||
"description": "展会空间设计和布局规划",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-2] Design & Layout Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.8)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Initializing 3D modeling engine..." },
|
||||
{ "type": "progress", "content": "AutoCAD Plugin", "target": 100, "stutters": [23, 67] },
|
||||
{ "type": "progress", "content": "3DS Max Renderer", "target": 100, "stutters": [45] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Generating exhibition layout..." },
|
||||
{ "type": "output", "content": "🎨 DESIGN CONCEPT: 'Future Mobility Hub'" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📐 SPACE ALLOCATION" },
|
||||
{ "type": "output", "content": "┌─────────────────────────────────┐" },
|
||||
{ "type": "output", "content": "│ ENTRANCE: Digital Welcome Wall │" },
|
||||
{ "type": "output", "content": "├─────────────────────────────────┤" },
|
||||
{ "type": "output", "content": "│ ZONE A: Premium Brand Showcase │" },
|
||||
{ "type": "output", "content": "│ • Tesla (500㎡) │" },
|
||||
{ "type": "output", "content": "│ • BYD (450㎡) │" },
|
||||
{ "type": "output", "content": "│ • NIO (400㎡) │" },
|
||||
{ "type": "output", "content": "├─────────────────────────────────┤" },
|
||||
{ "type": "output", "content": "│ ZONE B: Innovation Tech Area │" },
|
||||
{ "type": "output", "content": "│ • AI Driving Demo │" },
|
||||
{ "type": "output", "content": "│ • Battery Tech Display │" },
|
||||
{ "type": "output", "content": "│ • Charging Solutions │" },
|
||||
{ "type": "output", "content": "├─────────────────────────────────┤" },
|
||||
{ "type": "output", "content": "│ ZONE C: Interactive Experience │" },
|
||||
{ "type": "output", "content": "│ • VR Test Drive │" },
|
||||
{ "type": "output", "content": "│ • Kids EV Zone │" },
|
||||
{ "type": "output", "content": "└─────────────────────────────────┘" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Creating visual materials..." },
|
||||
{ "type": "progress", "content": "3D floor plan rendering", "target": 100, "stutters": [34, 67, 89] },
|
||||
{ "type": "image", "imageSrc": "/data/会展策划/image/Whisk_e8f83d1a37.jpg", "imageAlt": "展馆外观效果图" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "image", "imageSrc": "/data/会展策划/image/Whisk_c478fe089d.jpg", "imageAlt": "展馆内部布局" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "progress", "content": "design_blueprint.pdf", "target": 100, "stutters": [56, 78] },
|
||||
{ "type": "file", "content": "✓ Created: design_blueprint.pdf (15.6MB)" },
|
||||
{ "type": "progress", "content": "3d_walkthrough.mp4", "target": 100, "stutters": [23, 45, 78, 92] },
|
||||
{ "type": "file", "content": "✓ Created: 3d_walkthrough.mp4 (128MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-2 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 24.7s | Memory: 256MB | CPU: 45%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-3",
|
||||
"name": "财务预算专家",
|
||||
"description": "预算规划和成本控制",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-3] Financial Budget Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.2)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Loading financial models..." },
|
||||
{ "type": "progress", "content": "Cost estimation engine", "target": 100, "stutters": [45] },
|
||||
{ "type": "progress", "content": "ROI calculator", "target": 100, "stutters": [67] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Calculating budget breakdown..." },
|
||||
{ "type": "output", "content": "💰 BUDGET ALLOCATION (Total: ¥10,000,000)" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📊 EXPENSE CATEGORIES" },
|
||||
{ "type": "output", "content": "├── Venue Rental ¥2,500,000 (25%)" },
|
||||
{ "type": "output", "content": "├── Booth Construction ¥1,800,000 (18%)" },
|
||||
{ "type": "output", "content": "├── Marketing & PR ¥1,500,000 (15%)" },
|
||||
{ "type": "output", "content": "├── Equipment Rental ¥1,200,000 (12%)" },
|
||||
{ "type": "output", "content": "├── Staff & Services ¥1,000,000 (10%)" },
|
||||
{ "type": "output", "content": "├── Technology Setup ¥800,000 (8%)" },
|
||||
{ "type": "output", "content": "├── Catering & Hospitality ¥600,000 (6%)" },
|
||||
{ "type": "output", "content": "├── Insurance & Security ¥400,000 (4%)" },
|
||||
{ "type": "output", "content": "└── Contingency Fund ¥200,000 (2%)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "output", "content": "💹 REVENUE PROJECTION" },
|
||||
{ "type": "output", "content": "├── Booth Sales ¥7,000,000" },
|
||||
{ "type": "output", "content": "├── Sponsorships ¥3,500,000" },
|
||||
{ "type": "output", "content": "├── Ticket Sales ¥1,500,000" },
|
||||
{ "type": "output", "content": "├── F&B Concessions ¥800,000" },
|
||||
{ "type": "output", "content": "└── Total Revenue ¥12,800,000" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "output", "content": "✨ FINANCIAL HIGHLIGHTS" },
|
||||
{ "type": "output", "content": "• Expected ROI: 28%" },
|
||||
{ "type": "output", "content": "• Break-even: 65% occupancy" },
|
||||
{ "type": "output", "content": "• Profit Margin: ¥2,800,000" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "progress", "content": "budget_plan.xlsx", "target": 100, "stutters": [34, 78] },
|
||||
{ "type": "file", "content": "✓ Created: budget_plan.xlsx (456KB)" },
|
||||
{ "type": "progress", "content": "financial_report.pdf", "target": 100, "stutters": [56] },
|
||||
{ "type": "file", "content": "✓ Created: financial_report.pdf (3.2MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-3 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 10.8s | Memory: 67MB | CPU: 18%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-4",
|
||||
"name": "格式与文档编辑专家",
|
||||
"description": "文档生成和格式化",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-4] Document Formatting Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.5)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Loading document processors..." },
|
||||
{ "type": "progress", "content": "markdown-it@13.0.1", "target": 100, "stutters": [45] },
|
||||
{ "type": "progress", "content": "pdfkit@0.13.0", "target": 100, "stutters": [67, 89] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Analyzing document structure..." },
|
||||
{ "type": "output", "content": "📄 Document Structure Analysis" },
|
||||
{ "type": "output", "content": "├── 1. Executive Summary (3 pages)" },
|
||||
{ "type": "output", "content": "├── 2. Market Analysis (12 pages)" },
|
||||
{ "type": "output", "content": "├── 3. Exhibition Design (15 pages)" },
|
||||
{ "type": "output", "content": "├── 4. Budget Planning (10 pages)" },
|
||||
{ "type": "output", "content": "├── 5. Marketing Strategy (8 pages)" },
|
||||
{ "type": "output", "content": "├── 6. Execution Plan (10 pages)" },
|
||||
{ "type": "output", "content": "├── 7. Risk Assessment (5 pages)" },
|
||||
{ "type": "output", "content": "└── 8. Appendices (5 pages)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Formatting sections..." },
|
||||
{ "type": "progress", "content": "Document formatting", "target": 100, "stutters": [34, 67, 88] },
|
||||
{ "type": "progress", "content": "TOC generation", "target": 100, "stutters": [56] },
|
||||
{ "type": "progress", "content": "Page numbering", "target": 100, "stutters": [78] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "output", "content": "╔════════════════════════════════════╗" },
|
||||
{ "type": "output", "content": "║ DOCUMENT STATISTICS ║" },
|
||||
{ "type": "output", "content": "╠════════════════════════════════════╣" },
|
||||
{ "type": "output", "content": "║ Total Pages : 68 ║" },
|
||||
{ "type": "output", "content": "║ Word Count : 24,567 ║" },
|
||||
{ "type": "output", "content": "║ Images : 42 ║" },
|
||||
{ "type": "output", "content": "║ Tables : 18 ║" },
|
||||
{ "type": "output", "content": "║ Charts : 23 ║" },
|
||||
{ "type": "output", "content": "╚════════════════════════════════════╝" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "progress", "content": "exhibition_plan_formatted.docx", "target": 100, "stutters": [45, 78] },
|
||||
{ "type": "file", "content": "✓ Created: exhibition_plan_formatted.docx (8.4MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-4 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 12.4s | Memory: 72MB | CPU: 15%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-5",
|
||||
"name": "活动执行专家",
|
||||
"description": "项目管理和执行计划",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-5] Event Execution Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.6)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Loading project management tools..." },
|
||||
{ "type": "progress", "content": "gantt-chart-js", "target": 100, "stutters": [23, 67] },
|
||||
{ "type": "progress", "content": "resource-planner", "target": 100, "stutters": [45] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Creating execution timeline..." },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📅 PROJECT TIMELINE (12 Weeks)" },
|
||||
{ "type": "output", "content": "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━" },
|
||||
{ "type": "output", "content": "Week 1-2 : [████████] Venue booking & contracts" },
|
||||
{ "type": "output", "content": "Week 3-4 : [████████] Booth design & production" },
|
||||
{ "type": "output", "content": "Week 5-6 : [████████] Marketing campaign launch" },
|
||||
{ "type": "output", "content": "Week 7-8 : [████████] Exhibitor recruitment" },
|
||||
{ "type": "output", "content": "Week 9-10 : [████████] Logistics & setup" },
|
||||
{ "type": "output", "content": "Week 11 : [████] Final preparations" },
|
||||
{ "type": "output", "content": "Week 12 : [████] EXHIBITION DAYS" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Assigning team resources..." },
|
||||
{ "type": "progress", "content": "Resource allocation", "target": 100, "stutters": [34, 78, 92] },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "👥 TEAM STRUCTURE" },
|
||||
{ "type": "output", "content": "├── Project Director (1)" },
|
||||
{ "type": "output", "content": "├── Operations Team (8)" },
|
||||
{ "type": "output", "content": "├── Marketing Team (6)" },
|
||||
{ "type": "output", "content": "├── Design Team (4)" },
|
||||
{ "type": "output", "content": "├── Logistics Team (12)" },
|
||||
{ "type": "output", "content": "├── Customer Service (15)" },
|
||||
{ "type": "output", "content": "└── Security & Safety (20)" },
|
||||
{ "type": "output", "content": "Total Staff: 66 professionals" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Creating task checklists..." },
|
||||
{ "type": "progress", "content": "Checklist generation", "target": 100, "stutters": [56, 89] },
|
||||
{ "type": "output", "content": "✅ Generated 247 action items" },
|
||||
{ "type": "output", "content": "📋 Created 18 milestone checkpoints" },
|
||||
{ "type": "output", "content": "⚠️ Identified 12 critical dependencies" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "progress", "content": "execution_plan.xlsx", "target": 100, "stutters": [67] },
|
||||
{ "type": "file", "content": "✓ Created: execution_plan.xlsx (2.3MB)" },
|
||||
{ "type": "progress", "content": "task_assignments.pdf", "target": 100, "stutters": [45, 89] },
|
||||
{ "type": "file", "content": "✓ Created: task_assignments.pdf (5.6MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-5 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 19.2s | Memory: 108MB | CPU: 22%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-6",
|
||||
"name": "营销宣传专家",
|
||||
"description": "营销策略和推广计划",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-6] Marketing & PR Expert Activated" },
|
||||
{ "type": "info", "content": "Model: DeepSeek-V2 Chat (Temperature: 0.7)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Loading marketing analytics..." },
|
||||
{ "type": "progress", "content": "Social media APIs", "target": 100, "stutters": [34, 78] },
|
||||
{ "type": "progress", "content": "Ad platform SDKs", "target": 100, "stutters": [56] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Designing marketing campaigns..." },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "🎯 MARKETING STRATEGY" },
|
||||
{ "type": "output", "content": "═══════════════════════════════════" },
|
||||
{ "type": "output", "content": "📱 Digital Marketing (40%)" },
|
||||
{ "type": "output", "content": " • WeChat: 500K+ followers target" },
|
||||
{ "type": "output", "content": " • Weibo: 300K+ impressions/day" },
|
||||
{ "type": "output", "content": " • LinkedIn: B2B engagement 25%" },
|
||||
{ "type": "output", "content": " • TikTok: Short videos 2M views" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📺 Traditional Media (30%)" },
|
||||
{ "type": "output", "content": " • TV Ads: CCTV-2, Dragon TV" },
|
||||
{ "type": "output", "content": " • Radio: Traffic channels" },
|
||||
{ "type": "output", "content": " • Print: Industry magazines" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "🤝 Partnerships (30%)" },
|
||||
{ "type": "output", "content": " • Industry associations" },
|
||||
{ "type": "output", "content": " • Government agencies" },
|
||||
{ "type": "output", "content": " • Media partners" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Creating content calendar..." },
|
||||
{ "type": "progress", "content": "Content planning", "target": 100, "stutters": [23, 67, 89] },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📊 EXPECTED REACH" },
|
||||
{ "type": "output", "content": "┌─────────────────────────────┐" },
|
||||
{ "type": "output", "content": "│ Pre-Event : 2.5M people │" },
|
||||
{ "type": "output", "content": "│ During : 500K visitors │" },
|
||||
{ "type": "output", "content": "│ Post-Event: 1M engagement │" },
|
||||
{ "type": "output", "content": "│ ROI : 320% │" },
|
||||
{ "type": "output", "content": "└─────────────────────────────┘" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Generating marketing materials..." },
|
||||
{ "type": "progress", "content": "marketing_strategy.pptx", "target": 100, "stutters": [45, 78] },
|
||||
{ "type": "file", "content": "✓ Created: marketing_strategy.pptx (18.7MB)" },
|
||||
{ "type": "progress", "content": "social_media_kit.zip", "target": 100, "stutters": [67, 92] },
|
||||
{ "type": "file", "content": "✓ Created: social_media_kit.zip (156MB)" },
|
||||
{ "type": "progress", "content": "press_release.docx", "target": 100, "stutters": [34] },
|
||||
{ "type": "file", "content": "✓ Created: press_release.docx (245KB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-6 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 21.5s | Memory: 142MB | CPU: 28%" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "agent-7",
|
||||
"name": "会展策划总协调专家",
|
||||
"description": "整体协调和最终方案整合",
|
||||
"outputs": [
|
||||
{ "type": "system", "content": ">>> [Agent-7] Exhibition Planning Coordinator Activated" },
|
||||
{ "type": "info", "content": "Model: Chat Models + Memories (Temperature: 0.4)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Aggregating all agent outputs..." },
|
||||
{ "type": "progress", "content": "Data aggregation", "target": 100, "stutters": [34, 67] },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Performing final integration..." },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "🎯 FINAL PLAN SUMMARY" },
|
||||
{ "type": "output", "content": "══════════════════════════════════════" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "📋 PROJECT: 2024长三角新能源汽车展" },
|
||||
{ "type": "output", "content": "📍 VENUE: 上海国家会展中心" },
|
||||
{ "type": "output", "content": "📅 DATE: 2024.09.12-15" },
|
||||
{ "type": "output", "content": "📏 SCALE: 50,000㎡ | 350展商 | 50,000观众" },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "output", "content": "💼 KEY DELIVERABLES" },
|
||||
{ "type": "output", "content": "├── Complete Planning Document (68 pages)" },
|
||||
{ "type": "output", "content": "├── Budget Plan (¥10M total)" },
|
||||
{ "type": "output", "content": "├── Design Blueprint (3D models)" },
|
||||
{ "type": "output", "content": "├── Marketing Strategy (2.5M reach)" },
|
||||
{ "type": "output", "content": "├── Execution Timeline (12 weeks)" },
|
||||
{ "type": "output", "content": "└── Risk Management Plan" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Quality assurance check..." },
|
||||
{ "type": "progress", "content": "QA validation", "target": 100, "stutters": [45, 78, 91] },
|
||||
{ "type": "output", "content": "" },
|
||||
{ "type": "success", "content": "✅ All requirements met" },
|
||||
{ "type": "success", "content": "✅ Budget within limits" },
|
||||
{ "type": "success", "content": "✅ Timeline achievable" },
|
||||
{ "type": "success", "content": "✅ Risk factors addressed" },
|
||||
{ "type": "success", "content": "✅ ROI projection: 30%" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "info", "content": "Generating final deliverables..." },
|
||||
{ "type": "progress", "content": "final_plan_complete.pdf", "target": 100, "stutters": [23, 56, 78, 92] },
|
||||
{ "type": "file", "content": "✓ Created: final_plan_complete.pdf (68 pages, 45.8MB)" },
|
||||
{ "type": "progress", "content": "executive_summary.pdf", "target": 100, "stutters": [67] },
|
||||
{ "type": "file", "content": "✓ Created: executive_summary.pdf (3 pages, 1.2MB)" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "output", "content": "╔═══════════════════════════════════════╗" },
|
||||
{ "type": "output", "content": "║ 🎉 PLAN GENERATION COMPLETE 🎉 ║" },
|
||||
{ "type": "output", "content": "╠═══════════════════════════════════════╣" },
|
||||
{ "type": "output", "content": "║ Total Processing Time : 03:00 ║" },
|
||||
{ "type": "output", "content": "║ Documents Generated : 15 files ║" },
|
||||
{ "type": "output", "content": "║ Total Size : 287MB ║" },
|
||||
{ "type": "output", "content": "║ Quality Score : 98/100 ║" },
|
||||
{ "type": "output", "content": "╚═══════════════════════════════════════╝" },
|
||||
{ "type": "info", "content": "" },
|
||||
{ "type": "success", "content": "✓ Agent-7 completed successfully" },
|
||||
{ "type": "system", "content": "Execution time: 16.8s | Memory: 186MB | CPU: 31%" }
|
||||
]
|
||||
}
|
||||
],
|
||||
"completionSequence": [
|
||||
{ "type": "system", "content": "=" .repeat(60) },
|
||||
{ "type": "system", "content": "ALL AGENTS COMPLETED SUCCESSFULLY" },
|
||||
{ "type": "system", "content": "Total execution time: 3m 00s | Peak memory: 512MB" },
|
||||
{ "type": "system", "content": "=" .repeat(60) }
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"path": "/data/会展策划/image/Whisk_e8f83d1a37.jpg",
|
||||
"alt": "展馆外观效果图",
|
||||
"description": "上海国家会展中心外观渲染图"
|
||||
},
|
||||
{
|
||||
"path": "/data/会展策划/image/Whisk_c478fe089d.jpg",
|
||||
"alt": "展馆内部布局",
|
||||
"description": "展会现场布局规划图"
|
||||
}
|
||||
],
|
||||
"resultPageUrl": "/web_result/index.html?orderClass=tourism"
|
||||
}
|
||||
BIN
web_frontend/exhibition-demo/public/image/bg.png
Normal file
|
After Width: | Height: | Size: 713 KiB |
@@ -148,20 +148,54 @@ const RequirementModal: React.FC<RequirementModalProps> = ({ isOpen, onClose, on
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden">
|
||||
{/* 头部 */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">输入需求</h2>
|
||||
<p className="text-blue-100">请选择订单班类型并描述您的项目需求</p>
|
||||
{/* 头部 - 苹果风格设计 */}
|
||||
<div className="relative">
|
||||
{/* 渐变背景 */}
|
||||
<div
|
||||
className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-50"
|
||||
style={{
|
||||
backgroundImage: 'url(/image/bg.png)',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 内容区 */}
|
||||
<div className="relative px-8 py-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 overflow-hidden flex-shrink-0">
|
||||
<video
|
||||
src="https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/cloude.mp4"
|
||||
className="w-full h-full object-cover"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
controls={false}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent">
|
||||
AI 智能需求分析
|
||||
</h2>
|
||||
<p className="text-gray-500 text-sm mt-1">选择业务场景,让AI为您定制专属解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-10 h-10 bg-white hover:bg-gray-50 rounded-full shadow-sm hover:shadow-md transition-all duration-200 flex items-center justify-center group"
|
||||
>
|
||||
<X className="w-5 h-5 text-gray-400 group-hover:text-gray-600 transition-colors" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-white/20 rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 底部分割线 */}
|
||||
<div className="h-px bg-gradient-to-r from-transparent via-gray-200 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="p-6 max-h-[calc(90vh-120px)] overflow-y-auto">
|
||||
@@ -258,7 +292,7 @@ const RequirementModal: React.FC<RequirementModalProps> = ({ isOpen, onClose, on
|
||||
disabled={!requirement.trim() || !selectedOrderClass}
|
||||
className={`px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 ${
|
||||
requirement.trim() && selectedOrderClass
|
||||
? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:shadow-lg transform hover:scale-105'
|
||||
? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white hover:shadow-lg transform hover:scale-105'
|
||||
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -142,7 +142,7 @@ const ResultModal: React.FC<ResultModalProps> = ({ isOpen, onClose }) => {
|
||||
<div className="p-6 bg-gray-50 border-t border-gray-200 flex-shrink-0">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={() => window.open('http://192.168.2.99:4155/', '_blank')}
|
||||
onClick={() => window.open('http://localhost:4155/', '_blank')}
|
||||
className="px-8 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:shadow-lg transform hover:scale-105 transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
<Eye className="w-5 h-5" />
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"currentState": "service_discovery",
|
||||
"stateHistory": [
|
||||
{
|
||||
"from": "initial",
|
||||
"command": "remember",
|
||||
"timestamp": "2025-09-29T01:43:11.727Z",
|
||||
"args": [
|
||||
"recorder",
|
||||
"完成了12个订单班需求模板集成到exhibition-demo项目:\n\n## 主要完成工作\n1. **数据文件迁移**:将orderClasses.json移动到正确位置 /web_frontend/exhibition-demo/src/data/\n2. **组件功能升级**:修改RequirementModal组件,从静态文本改为使用配置文件中的真实数据\n3. **UI问题修复**:修复标题显示问题,统一显示为\"输入需求\"而非\"输入展会策划需求\"\n4. **数据映射实现**:建立需求模板数据映射机制,每个订单班自动显示其专属的项目标题和描述\n\n## 技术实现细节\n- 实现了12个专业领域的需求模板自动填充功能\n- 包含食品、文旅、智能制造等订单班的具体项目需求\n- 点击不同订单班模板时,自动填充对应的专业需求描述\n\n## 具体项目案例\n- 食品:青莳轻食连锁品牌创业方案\n- 文旅:2024长三角国际新能源汽车展会策划案 \n- 智能制造:汽车零部件智能分拣系统集成方案\n- 其他9个专业领域的项目需求"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "memory_saved",
|
||||
"command": "action",
|
||||
"timestamp": "2025-09-29T03:12:57.896Z",
|
||||
"args": [
|
||||
"recorder"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "role_activated_with_memory",
|
||||
"command": "init",
|
||||
"timestamp": "2025-09-29T03:13:05.114Z",
|
||||
"args": [
|
||||
{
|
||||
"workingDirectory": "/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo",
|
||||
"ideType": "claude"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "initialized",
|
||||
"command": "welcome",
|
||||
"timestamp": "2025-09-29T03:13:09.601Z",
|
||||
"args": []
|
||||
},
|
||||
{
|
||||
"from": "service_discovery",
|
||||
"command": "init",
|
||||
"timestamp": "2025-09-29T07:34:29.586Z",
|
||||
"args": [
|
||||
{
|
||||
"workingDirectory": "/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo/src/data/terminalSimulations",
|
||||
"ideType": "cursor"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "initialized",
|
||||
"command": "action",
|
||||
"timestamp": "2025-09-29T07:34:33.863Z",
|
||||
"args": [
|
||||
"assistant"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "role_activated_with_memory",
|
||||
"command": "learn",
|
||||
"timestamp": "2025-09-29T07:37:14.024Z",
|
||||
"args": [
|
||||
"@role://progress-recorder"
|
||||
]
|
||||
},
|
||||
{
|
||||
"from": "learn_error",
|
||||
"command": "welcome",
|
||||
"timestamp": "2025-09-29T07:37:20.139Z",
|
||||
"args": []
|
||||
}
|
||||
],
|
||||
"lastUpdated": "2025-09-29T07:37:20.168Z"
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"source": "project",
|
||||
"metadata": {
|
||||
"version": "2.0.0",
|
||||
"description": "project 级资源注册表",
|
||||
"createdAt": "2025-09-29T07:34:29.623Z",
|
||||
"updatedAt": "2025-09-29T07:34:29.624Z",
|
||||
"resourceCount": 0
|
||||
},
|
||||
"resources": [],
|
||||
"stats": {
|
||||
"totalResources": 0,
|
||||
"byProtocol": {},
|
||||
"bySource": {}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData, TerminalLine } from './index';
|
||||
|
||||
export const foodSimulation = (agents: Agent[]): SimulationData => ({
|
||||
orderClassId: 'food',
|
||||
orderClassName: '食品',
|
||||
projectTitle: '青莳轻食连锁品牌创业方案',
|
||||
|
||||
startupSequence: [
|
||||
{ type: 'info', content: '🚀 启动食品行业轻食品牌创业方案生成系统...' },
|
||||
{ type: 'system', content: '初始化多Agent协作框架' },
|
||||
{ type: 'success', content: '✓ 系统核心加载完成' },
|
||||
{ type: 'system', content: '加载专业知识库: 餐饮创业/轻食赛道/品牌运营' },
|
||||
{ type: 'progress', content: '████████████████████ 100%', duration: 1500 },
|
||||
{ type: 'success', content: '✓ 知识库加载完成' },
|
||||
{ type: 'info', content: '连接行业数据源...' },
|
||||
{ type: 'system', content: '├─ 美团餐饮大数据平台' },
|
||||
{ type: 'system', content: '├─ 大众点评用户评价系统' },
|
||||
{ type: 'system', content: '└─ 餐饮行业研究报告库' },
|
||||
{ type: 'success', content: '✓ 数据源连接成功' },
|
||||
{ type: 'warning', content: '⚡ 检测到需求: 青莳轻食(国贸写字楼店)' },
|
||||
{ type: 'info', content: '正在分配专业Agent团队...' },
|
||||
],
|
||||
|
||||
agentSequence: [
|
||||
{
|
||||
agent: () => agents[0], // 信息检索专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '🔍 信息检索专家 正在分析...' },
|
||||
{ type: 'info', content: '检索关键词: 轻食市场 + 国贸商圈 + 白领消费' },
|
||||
{ type: 'progress', content: '分析市场数据...', duration: 800 },
|
||||
{ type: 'success', content: '✓ 发现目标区域日均白领流量: 15,000人' },
|
||||
{ type: 'success', content: '✓ 竞品分析: 发现5家直接竞争对手' },
|
||||
{ type: 'info', content: '生成市场洞察报告...' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📊 市场分析图表',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_01.jpg',
|
||||
imageAlt: '轻食市场规模与增长趋势'
|
||||
},
|
||||
{ type: 'success', content: '✓ 市场规模: 2024年预计达1200亿元' },
|
||||
{ type: 'success', content: '✓ 年增长率: 23.5%' },
|
||||
{ type: 'success', content: '✓ 目标人群画像已生成' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[1], // 设计专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '🎨 设计专家 开始创作...' },
|
||||
{ type: 'info', content: '设计理念: 透明厨房 + 自然简约' },
|
||||
{ type: 'progress', content: '生成空间布局方案...', duration: 1000 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🏪 店面设计效果图',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_02.jpg',
|
||||
imageAlt: '青莳轻食店面3D效果图'
|
||||
},
|
||||
{ type: 'success', content: '✓ 110㎡空间优化完成' },
|
||||
{ type: 'info', content: '功能分区:' },
|
||||
{ type: 'system', content: '├─ 堂食区: 65㎡ (26座)' },
|
||||
{ type: 'system', content: '├─ 透明厨房: 30㎡' },
|
||||
{ type: 'system', content: '└─ 营养咨询区: 15㎡' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '🎨 品牌VI设计',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_03.jpg',
|
||||
imageAlt: '青莳品牌视觉识别系统'
|
||||
},
|
||||
{ type: 'success', content: '✓ 品牌色: 青莳绿 #4CAF50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[2], // 财务预算专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '💰 财务预算专家 正在核算...' },
|
||||
{ type: 'info', content: '总投资预算: 60万元' },
|
||||
{ type: 'progress', content: '详细成本分解...', duration: 800 },
|
||||
{ type: 'system', content: '📊 投资明细:' },
|
||||
{ type: 'system', content: '├─ 装修费用: 30万 (2727元/㎡)' },
|
||||
{ type: 'system', content: '├─ 设备采购: 15万' },
|
||||
{ type: 'system', content: '├─ 首批原料: 5万' },
|
||||
{ type: 'system', content: '├─ 营销推广: 3万' },
|
||||
{ type: 'system', content: '└─ 流动资金: 7万' },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📈 财务预测模型',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_08.jpg',
|
||||
imageAlt: '12个月财务预测图表'
|
||||
},
|
||||
{ type: 'success', content: '✓ 预计回本周期: 14个月' },
|
||||
{ type: 'success', content: '✓ 毛利率: 65%' },
|
||||
{ type: 'warning', content: '💡 日均营业额需达: 15,000元' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[3], // 格式编辑专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '📝 格式编辑专家 整理方案...' },
|
||||
{ type: 'info', content: '生成标准化商业计划书' },
|
||||
{ type: 'progress', content: '格式化文档...', duration: 600 },
|
||||
{ type: 'success', content: '✓ 执行摘要完成' },
|
||||
{ type: 'success', content: '✓ 产品菜单设计完成' },
|
||||
{ type: 'info', content: '核心产品线:' },
|
||||
{ type: 'system', content: '├─ 能量碗系列: 12款' },
|
||||
{ type: 'system', content: '├─ 轻食沙拉: 8款' },
|
||||
{ type: 'system', content: '├─ 低卡主食: 6款' },
|
||||
{ type: 'system', content: '└─ 营养饮品: 6款' },
|
||||
{ type: 'success', content: '✓ 32款SKU定价策略完成' },
|
||||
{ type: 'info', content: '客单价区间: 45-68元' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[4], // 活动执行专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '⚡ 活动执行专家 制定开业计划...' },
|
||||
{ type: 'info', content: '开业倒计时: 45天' },
|
||||
{ type: 'progress', content: '生成执行时间线...', duration: 800 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📅 开业执行计划',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_10.jpg',
|
||||
imageAlt: '45天开业准备甘特图'
|
||||
},
|
||||
{ type: 'system', content: '关键里程碑:' },
|
||||
{ type: 'system', content: '├─ D-45: 签约装修团队' },
|
||||
{ type: 'system', content: '├─ D-30: 设备进场安装' },
|
||||
{ type: 'system', content: '├─ D-15: 团队培训启动' },
|
||||
{ type: 'system', content: '├─ D-7: 试营业' },
|
||||
{ type: 'system', content: '└─ D-Day: 正式开业' },
|
||||
{ type: 'success', content: '✓ 供应链对接完成' },
|
||||
{ type: 'warning', content: '⚠️ 关键风险: 食材供应稳定性' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[5], // 营销宣传专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '📢 营销宣传专家 策划推广...' },
|
||||
{ type: 'info', content: '目标: 开业首月获客3000人' },
|
||||
{ type: 'progress', content: '制定营销策略...', duration: 1000 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📱 社交媒体营销',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_12.jpg',
|
||||
imageAlt: '小红书/抖音营销方案'
|
||||
},
|
||||
{ type: 'system', content: '营销渠道矩阵:' },
|
||||
{ type: 'system', content: '├─ 小红书: KOL种草计划' },
|
||||
{ type: 'system', content: '├─ 美团: 新店扶持活动' },
|
||||
{ type: 'system', content: '├─ 企业团餐: B端拓展' },
|
||||
{ type: 'system', content: '└─ 会员体系: 储值优惠' },
|
||||
{ type: 'success', content: '✓ 开业活动: 买一送一(前500名)' },
|
||||
{ type: 'success', content: '✓ 预计转化率: 15%' },
|
||||
{ type: 'info', content: '月度营销预算: 15,000元' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[6], // 会展策划专家(总协调)
|
||||
outputs: [
|
||||
{ type: 'system', content: '🎯 策划专家 整合最终方案...' },
|
||||
{ type: 'info', content: '方案评分: 92/100' },
|
||||
{ type: 'progress', content: '生成完整商业计划书...', duration: 1200 },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📊 项目总览',
|
||||
imageSrc: '/data/订单班文档资料/食品/notion文稿/image/图片_15.jpg',
|
||||
imageAlt: '青莳轻食项目一页纸总览'
|
||||
},
|
||||
{ type: 'success', content: '✅ 商业模式: 透明化健康轻食' },
|
||||
{ type: 'success', content: '✅ 核心优势: 食材可溯源+营养可视化' },
|
||||
{ type: 'success', content: '✅ 目标营收: 首年600万' },
|
||||
{ type: 'success', content: '✅ 扩张计划: 18个月开设3家店' },
|
||||
{ type: 'warning', content: '💡 成功关键: 产品标准化+会员运营' },
|
||||
{ type: 'system', content: '文档生成完成,共68页' },
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
completionSequence: [
|
||||
{ type: 'success', content: '🎉 青莳轻食创业方案生成完成!' },
|
||||
{ type: 'info', content: '生成耗时: 3分12秒' },
|
||||
{ type: 'system', content: '方案亮点:' },
|
||||
{ type: 'system', content: '• 精准定位国贸白领健康餐饮需求' },
|
||||
{ type: 'system', content: '• 透明厨房打造信任感' },
|
||||
{ type: 'system', content: '• 营养师驻店提供专业咨询' },
|
||||
{ type: 'system', content: '• 数字化会员管理系统' },
|
||||
{ type: 'success', content: '✨ 方案已保存至: /projects/food/青莳轻食_BP_v1.0.pdf' },
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1,102 @@
|
||||
/**
|
||||
* 终端模拟数据管理器
|
||||
* 为12个订单班提供统一的终端模拟数据
|
||||
*/
|
||||
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { wenluSimulation } from './wenlu';
|
||||
import { foodSimulation } from './food';
|
||||
|
||||
// 终端行类型定义
|
||||
export interface TerminalLine {
|
||||
type: 'info' | 'success' | 'warning' | 'error' | 'system' | 'output' | 'progress' | 'install' | 'file' | 'image';
|
||||
content: string;
|
||||
agent?: string;
|
||||
// 进度条相关
|
||||
target?: number;
|
||||
stutters?: number[];
|
||||
duration?: number; // 添加duration字段
|
||||
// 图片相关
|
||||
imageSrc?: string;
|
||||
imageAlt?: string;
|
||||
}
|
||||
|
||||
// Agent输出定义
|
||||
export interface AgentOutput {
|
||||
agent: () => Agent; // 修改为函数类型
|
||||
outputs: TerminalLine[];
|
||||
}
|
||||
|
||||
// 完整的模拟数据结构
|
||||
export interface SimulationData {
|
||||
orderClassId: string;
|
||||
orderClassName: string;
|
||||
projectTitle: string;
|
||||
startupSequence: TerminalLine[];
|
||||
agentSequence: AgentOutput[];
|
||||
completionSequence: TerminalLine[];
|
||||
}
|
||||
|
||||
// 生成函数类型
|
||||
export type SimulationGenerator = (agents: Agent[]) => SimulationData;
|
||||
|
||||
// 订单班模拟数据映射表 - 目前只有文旅和食品
|
||||
export const simulationMap: Record<string, SimulationGenerator> = {
|
||||
wenlu: wenluSimulation, // 文旅
|
||||
food: foodSimulation, // 食品
|
||||
// 其他订单班暂未实现,缺少agent prompt和头像数据
|
||||
};
|
||||
|
||||
// 获取指定订单班的模拟数据
|
||||
export const getSimulationData = (orderClassId: string, agents: Agent[]): SimulationData | null => {
|
||||
console.log('[getSimulationData] Called with:', {
|
||||
orderClassId,
|
||||
agentsCount: agents.length,
|
||||
agentsNames: agents.map(a => a.name)
|
||||
});
|
||||
|
||||
const generator = simulationMap[orderClassId];
|
||||
console.log('[getSimulationData] Available keys:', Object.keys(simulationMap));
|
||||
console.log('[getSimulationData] Generator found:', !!generator);
|
||||
|
||||
if (!generator) {
|
||||
console.warn(`No simulation data found for order class: ${orderClassId}`);
|
||||
return null;
|
||||
}
|
||||
|
||||
const data = generator(agents);
|
||||
console.log('[getSimulationData] Data generated:', {
|
||||
hasData: !!data,
|
||||
orderClassName: data?.orderClassName,
|
||||
projectTitle: data?.projectTitle,
|
||||
startupSequenceLength: data?.startupSequence?.length,
|
||||
agentSequenceLength: data?.agentSequence?.length,
|
||||
completionSequenceLength: data?.completionSequence?.length
|
||||
});
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// 通用工具函数
|
||||
export const utils = {
|
||||
// 生成随机延迟
|
||||
getRandomDelay: (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
},
|
||||
|
||||
// 生成进度条字符串
|
||||
generateProgressBar: (progress: number, width: number = 40) => {
|
||||
const filled = Math.floor((progress / 100) * width);
|
||||
const empty = width - filled;
|
||||
return `[${'█'.repeat(filled)}${'░'.repeat(empty)}] ${progress.toString().padStart(3, ' ')}%`;
|
||||
},
|
||||
|
||||
// 生成文件大小
|
||||
generateFileSize: () => {
|
||||
const sizes = ['12.3KB', '456KB', '1.2MB', '3.4MB', '15.7MB', '48.2MB', '126MB'];
|
||||
return sizes[Math.floor(Math.random() * sizes.length)];
|
||||
},
|
||||
|
||||
// 重复字符
|
||||
repeat: (char: string, times: number) => char.repeat(times)
|
||||
};
|
||||
@@ -0,0 +1,408 @@
|
||||
/**
|
||||
* 文旅订单班 - 终端模拟数据
|
||||
* 2024长三角国际新能源汽车展会策划案
|
||||
*/
|
||||
|
||||
import { Agent } from '@/store/demoStore';
|
||||
import { SimulationData, TerminalLine } from './index';
|
||||
|
||||
export const wenluSimulation = (agents: Agent[]): SimulationData => {
|
||||
const startupSequence: TerminalLine[] = [
|
||||
{ type: 'system', content: '>>> AI Exhibition Planning System v2.0.0' },
|
||||
{ type: 'system', content: '>>> Copyright (c) 2024 DeepSeek AI. All rights reserved.' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Checking system requirements...' },
|
||||
{ type: 'progress', content: 'System check', target: 100, stutters: [23, 67, 89] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Loading configuration...' },
|
||||
{ type: 'output', content: 'Config path: /etc/agents/config.yaml' },
|
||||
{ type: 'output', content: 'Loading agents: 7 experts found' },
|
||||
{ type: 'output', content: 'Workflow engine: n8n v1.109.2' },
|
||||
{ type: 'success', content: '✓ Configuration loaded successfully' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Installing required packages...' },
|
||||
{ type: 'install', content: 'npm install @ai/core @ai/agents @ai/workflow --save' },
|
||||
{ type: 'progress', content: 'npm packages', target: 100, stutters: [34, 78] },
|
||||
{ type: 'install', content: 'pip install pandas numpy tensorflow beautifulsoup4' },
|
||||
{ type: 'progress', content: 'Python packages', target: 100, stutters: [56] },
|
||||
{ type: 'success', content: '✓ All dependencies installed' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Analyzing user requirements...' },
|
||||
{ type: 'output', content: '📋 PROJECT: 2024长三角国际新能源汽车展' },
|
||||
{ type: 'output', content: '📍 LOCATION: 上海国家会展中心' },
|
||||
{ type: 'output', content: '📅 DATE: 2024年9月12日-15日' },
|
||||
{ type: 'output', content: '📐 SCALE: 50,000平方米' },
|
||||
{ type: 'output', content: '👥 EXPECTED: 300家展商 | 50,000人次观众' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'system', content: '=' .repeat(60) },
|
||||
{ type: 'system', content: 'SYSTEM READY - Starting multi-agent workflow...' },
|
||||
{ type: 'system', content: '=' .repeat(60) },
|
||||
];
|
||||
|
||||
const agentSequence = [
|
||||
{
|
||||
agent: () => agents[0], // 信息检索专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-1] Information Retrieval Expert Activated' },
|
||||
{ type: 'info', content: 'Model: DeepSeek-V2 Chat (Temperature: 0.7)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Installing agent dependencies...' },
|
||||
{ type: 'progress', content: 'pandas==2.0.3', target: 100, stutters: [23, 67, 89] },
|
||||
{ type: 'progress', content: 'requests==2.31.0', target: 100, stutters: [45, 78] },
|
||||
{ type: 'progress', content: 'beautifulsoup4==4.12.2', target: 100, stutters: [34] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Connecting to data sources...' },
|
||||
{ type: 'output', content: 'MongoDB : mongodb://data-server:27017 ... Connected' },
|
||||
{ type: 'output', content: 'ElasticSearch: http://es-cluster:9200 ... Connected' },
|
||||
{ type: 'output', content: 'Redis Cache : redis://cache:6379 ... Connected' },
|
||||
{ type: 'success', content: '✓ All data sources connected' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Executing search queries...' },
|
||||
{ type: 'output', content: '```sql' },
|
||||
{ type: 'output', content: 'SELECT * FROM exhibitions' },
|
||||
{ type: 'output', content: 'WHERE region = "长三角"' },
|
||||
{ type: 'output', content: ' AND industry = "新能源汽车"' },
|
||||
{ type: 'output', content: ' AND year >= 2023' },
|
||||
{ type: 'output', content: 'ORDER BY scale DESC;' },
|
||||
{ type: 'output', content: '```' },
|
||||
{ type: 'progress', content: 'Query execution', target: 100, stutters: [12, 45, 78, 92] },
|
||||
{ type: 'success', content: '✓ Query completed: 2,847 rows in 342ms' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Running data analysis...' },
|
||||
{ type: 'progress', content: 'Data processing', target: 100, stutters: [15, 38, 65, 88] },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '=== 市场分析结果 ===' },
|
||||
{ type: 'output', content: '• 市场规模 : ¥3.2万亿 (↑32% 同比)' },
|
||||
{ type: 'output', content: '• 主要参展商 : 5,832家企业' },
|
||||
{ type: 'output', content: '• 行业从业者 : 186万专业人士' },
|
||||
{ type: 'output', content: '• 年度展会数量 : 126场' },
|
||||
{ type: 'output', content: '• 平均展会规模 : 32,000平方米' },
|
||||
{ type: 'output', content: '• 增长率 : 28% CAGR' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Generating report files...' },
|
||||
{ type: 'progress', content: 'market_analysis_2024.json', target: 100, stutters: [56, 89] },
|
||||
{ type: 'file', content: '✓ Created: market_analysis_2024.json (15.3MB)' },
|
||||
{ type: 'progress', content: 'competitor_data.csv', target: 100, stutters: [34] },
|
||||
{ type: 'file', content: '✓ Created: competitor_data.csv (3.7MB)' },
|
||||
{ type: 'progress', content: 'industry_trends.pdf', target: 100, stutters: [67, 91] },
|
||||
{ type: 'file', content: '✓ Created: industry_trends.pdf (28.5MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-1 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 18.7s | Memory: 124MB | CPU: 23%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[1], // 设计专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-2] Design & Creative Expert Activated' },
|
||||
{ type: 'info', content: 'Model: Google Gemini Pro Vision (Temperature: 0.8)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Loading design libraries...' },
|
||||
{ type: 'progress', content: 'three.js@0.157.0', target: 100, stutters: [45, 78] },
|
||||
{ type: 'progress', content: '@adobe/react-spectrum', target: 100, stutters: [23, 67, 88] },
|
||||
{ type: 'progress', content: 'stable-diffusion-xl', target: 100, stutters: [34, 56, 89] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Initializing AI image generator...' },
|
||||
{ type: 'output', content: 'const imageGen = new StableDiffusion({' },
|
||||
{ type: 'output', content: ' model: "SDXL 1.0",' },
|
||||
{ type: 'output', content: ' steps: 50,' },
|
||||
{ type: 'output', content: ' guidance: 7.5,' },
|
||||
{ type: 'output', content: ' resolution: "1920x1080"' },
|
||||
{ type: 'output', content: '});' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: '🎨 Generating exhibition hall visualization...' },
|
||||
{ type: 'output', content: 'Prompt: "Modern auto expo hall, futuristic design, glass ceiling"' },
|
||||
{ type: 'progress', content: 'Generating: 展馆外观.jpg', target: 100, stutters: [23, 45, 67, 89, 95] },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📷 IMAGE PREVIEW: 展馆外观',
|
||||
imageSrc: '/data/会展策划/image/Whisk_e8f83d1a37.jpg',
|
||||
imageAlt: '展馆外观效果图'
|
||||
},
|
||||
{ type: 'file', content: '✓ Generated: 展馆外观.jpg (2.4MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: '🎨 Generating interior exhibition view...' },
|
||||
{ type: 'output', content: 'Prompt: "Car exhibition interior, visitors, modern displays"' },
|
||||
{ type: 'progress', content: 'Generating: 展会内部.jpg', target: 100, stutters: [34, 67, 88] },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📷 IMAGE PREVIEW: 展厅内部布局',
|
||||
imageSrc: '/data/会展策划/image/展会内部参观.jpg',
|
||||
imageAlt: '展厅内部参观实景'
|
||||
},
|
||||
{ type: 'file', content: '✓ Generated: 展会内部.jpg (3.1MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: '🎨 Generating test drive area visualization...' },
|
||||
{ type: 'output', content: 'Prompt: "EV test drive track, outdoor exhibition area"' },
|
||||
{ type: 'progress', content: 'Generating: 试驾体验区.jpg', target: 100, stutters: [45, 78] },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📷 IMAGE PREVIEW: 试驾体验区',
|
||||
imageSrc: '/data/会展策划/image/2.试驾小景.jpg',
|
||||
imageAlt: '试驾体验区实景'
|
||||
},
|
||||
{ type: 'file', content: '✓ Generated: 试驾体验区.jpg (2.8MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: '🎨 Generating brand showcase images...' },
|
||||
{ type: 'progress', content: 'Generating: 小米汽车展台.jpg', target: 100, stutters: [34, 67] },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📷 IMAGE PREVIEW: 小米汽车展台',
|
||||
imageSrc: '/data/会展策划/image/3.小米汽车.jpg',
|
||||
imageAlt: '小米汽车展示'
|
||||
},
|
||||
{ type: 'file', content: '✓ Generated: 小米汽车展台.jpg (1.9MB)' },
|
||||
{ type: 'progress', content: 'Generating: 博览会全景.jpg', target: 100, stutters: [56, 89] },
|
||||
{
|
||||
type: 'image',
|
||||
content: '📷 IMAGE PREVIEW: 博览会全景',
|
||||
imageSrc: '/data/会展策划/image/博览会.jpg',
|
||||
imageAlt: '博览会全景图'
|
||||
},
|
||||
{ type: 'file', content: '✓ Generated: 博览会全景.jpg (3.5MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Creating exhibition hall 3D layout...' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '┌────────────────────────────────────┐' },
|
||||
{ type: 'output', content: '│ 展览馆布局设计图 │' },
|
||||
{ type: 'output', content: '├────────────────────────────────────┤' },
|
||||
{ type: 'output', content: '│ A区: 整车展示区 [15,000㎡] │' },
|
||||
{ type: 'output', content: '│ ┌─────┬─────┬─────┬─────┐ │' },
|
||||
{ type: 'output', content: '│ │特斯拉│ 蔚来 │理想│小鹏│ │' },
|
||||
{ type: 'output', content: '│ └─────┴─────┴─────┴─────┘ │' },
|
||||
{ type: 'output', content: '├────────────────────────────────────┤' },
|
||||
{ type: 'output', content: '│ B区: 零部件展区 [10,000㎡] │' },
|
||||
{ type: 'output', content: '│ C区: 充电技术区 [8,000㎡] │' },
|
||||
{ type: 'output', content: '│ D区: 智慧交通区 [12,000㎡] │' },
|
||||
{ type: 'output', content: '│ E区: 会议中心 [5,000㎡] │' },
|
||||
{ type: 'output', content: '└────────────────────────────────────┘' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-2 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 28.5s | Memory: 384MB | GPU: 65%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[2], // 财务预算专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-3] Financial & Budget Expert Activated' },
|
||||
{ type: 'info', content: 'Model: DeepSeek-Math-7B (Temperature: 0.3)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Loading financial models...' },
|
||||
{ type: 'progress', content: 'Economic models', target: 100, stutters: [34, 78] },
|
||||
{ type: 'progress', content: 'Cost database', target: 100, stutters: [56] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Calculating exhibition budget...' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '💰 预算明细表' },
|
||||
{ type: 'output', content: '─────────────────────────────────' },
|
||||
{ type: 'output', content: '场地租赁费用: ¥2,500,000' },
|
||||
{ type: 'output', content: '展位搭建费用: ¥3,800,000' },
|
||||
{ type: 'output', content: '设备租赁费用: ¥1,200,000' },
|
||||
{ type: 'output', content: '人员成本: ¥800,000' },
|
||||
{ type: 'output', content: '营销推广费用: ¥1,500,000' },
|
||||
{ type: 'output', content: '运营管理费用: ¥600,000' },
|
||||
{ type: 'output', content: '应急预备金: ¥400,000' },
|
||||
{ type: 'output', content: '─────────────────────────────────' },
|
||||
{ type: 'output', content: '总预算: ¥10,800,000' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '📊 收益预测' },
|
||||
{ type: 'output', content: '• 展位销售收入: ¥8,500,000' },
|
||||
{ type: 'output', content: '• 赞助收入: ¥3,200,000' },
|
||||
{ type: 'output', content: '• 门票收入: ¥1,800,000' },
|
||||
{ type: 'output', content: '• 预计总收入: ¥13,500,000' },
|
||||
{ type: 'output', content: '• 预计净利润: ¥2,700,000' },
|
||||
{ type: 'output', content: '• 投资回报率: 25%' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'progress', content: 'budget_plan_2024.xlsx', target: 100, stutters: [45, 89] },
|
||||
{ type: 'file', content: '✓ Created: budget_plan_2024.xlsx (458KB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-3 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 12.3s | Memory: 87MB | CPU: 18%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[3], // 格式编辑专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-4] Document Formatting Expert Activated' },
|
||||
{ type: 'info', content: 'Model: DeepSeek-V2 Chat (Temperature: 0.5)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Loading document processors...' },
|
||||
{ type: 'progress', content: 'markdown-it@13.0.1', target: 100, stutters: [45] },
|
||||
{ type: 'progress', content: 'pdfkit@0.13.0', target: 100, stutters: [67, 89] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Analyzing document structure...' },
|
||||
{ type: 'output', content: '📄 文档结构分析' },
|
||||
{ type: 'output', content: '├── 1. 执行摘要 (3页)' },
|
||||
{ type: 'output', content: '├── 2. 市场分析 (12页)' },
|
||||
{ type: 'output', content: '├── 3. 展会设计 (15页)' },
|
||||
{ type: 'output', content: '├── 4. 预算规划 (10页)' },
|
||||
{ type: 'output', content: '├── 5. 营销策略 (8页)' },
|
||||
{ type: 'output', content: '├── 6. 执行计划 (12页)' },
|
||||
{ type: 'output', content: '└── 7. 风险评估 (5页)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Formatting final proposal...' },
|
||||
{ type: 'progress', content: '展会策划方案_final.pdf', target: 100, stutters: [23, 56, 78, 92] },
|
||||
{ type: 'file', content: '✓ Created: 展会策划方案_final.pdf (8.5MB)' },
|
||||
{ type: 'progress', content: '展会策划方案_final.docx', target: 100, stutters: [34, 67] },
|
||||
{ type: 'file', content: '✓ Created: 展会策划方案_final.docx (4.2MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-4 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 9.8s | Memory: 56MB | CPU: 14%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[4], // 活动执行专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-5] Event Execution Expert Activated' },
|
||||
{ type: 'info', content: 'Model: DeepSeek-V2 Chat (Temperature: 0.6)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Creating execution timeline...' },
|
||||
{ type: 'output', content: '📅 执行时间轴' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: 'T-90天: 启动筹备工作' },
|
||||
{ type: 'output', content: ' • 成立组委会' },
|
||||
{ type: 'output', content: ' • 确定展会主题' },
|
||||
{ type: 'output', content: ' • 签订场地合同' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: 'T-60天: 招展招商' },
|
||||
{ type: 'output', content: ' • 发布招展通知' },
|
||||
{ type: 'output', content: ' • 联系重点展商' },
|
||||
{ type: 'output', content: ' • 开放展位预订' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: 'T-30天: 宣传推广' },
|
||||
{ type: 'output', content: ' • 媒体发布会' },
|
||||
{ type: 'output', content: ' • 社交媒体推广' },
|
||||
{ type: 'output', content: ' • 开放观众预登记' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: 'T-7天: 最后准备' },
|
||||
{ type: 'output', content: ' • 展位搭建' },
|
||||
{ type: 'output', content: ' • 设备调试' },
|
||||
{ type: 'output', content: ' • 人员培训' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: 'T-0: 展会开幕' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'progress', content: 'execution_plan.xlsx', target: 100, stutters: [45, 78] },
|
||||
{ type: 'file', content: '✓ Created: execution_plan.xlsx (2.3MB)' },
|
||||
{ type: 'progress', content: 'task_assignments.pdf', target: 100, stutters: [34, 89] },
|
||||
{ type: 'file', content: '✓ Created: task_assignments.pdf (5.6MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-5 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 19.2s | Memory: 108MB | CPU: 22%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[5], // 营销宣传专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-6] Marketing & PR Expert Activated' },
|
||||
{ type: 'info', content: 'Model: DeepSeek-V2 Chat (Temperature: 0.7)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Loading marketing analytics...' },
|
||||
{ type: 'progress', content: 'Social media APIs', target: 100, stutters: [34, 78] },
|
||||
{ type: 'progress', content: 'Ad platform SDKs', target: 100, stutters: [56] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Designing marketing campaigns...' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '🎯 营销策略' },
|
||||
{ type: 'output', content: '═══════════════════════════════════' },
|
||||
{ type: 'output', content: '📱 数字营销 (40%)' },
|
||||
{ type: 'output', content: ' • 微信: 目标50万+粉丝' },
|
||||
{ type: 'output', content: ' • 微博: 日均30万+曝光' },
|
||||
{ type: 'output', content: ' • 抖音: 短视频200万播放' },
|
||||
{ type: 'output', content: ' • B站: 专业内容10万+互动' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '📺 传统媒体 (30%)' },
|
||||
{ type: 'output', content: ' • 电视广告: CCTV-2, 东方卫视' },
|
||||
{ type: 'output', content: ' • 广播: 交通频道黄金时段' },
|
||||
{ type: 'output', content: ' • 平面: 行业杂志整版广告' },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '🤝 合作伙伴 (30%)' },
|
||||
{ type: 'output', content: ' • 行业协会联合推广' },
|
||||
{ type: 'output', content: ' • 政府部门支持' },
|
||||
{ type: 'output', content: ' • 媒体深度合作' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Creating content calendar...' },
|
||||
{ type: 'progress', content: 'Content planning', target: 100, stutters: [23, 67, 89] },
|
||||
{ type: 'output', content: '' },
|
||||
{ type: 'output', content: '📊 预期效果' },
|
||||
{ type: 'output', content: '┌─────────────────────────────┐' },
|
||||
{ type: 'output', content: '│ 展前曝光: 250万人次 │' },
|
||||
{ type: 'output', content: '│ 参展观众: 5万人次 │' },
|
||||
{ type: 'output', content: '│ 展后传播: 100万人次 │' },
|
||||
{ type: 'output', content: '│ ROI预期 : 320% │' },
|
||||
{ type: 'output', content: '└─────────────────────────────┘' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'progress', content: 'marketing_strategy.pptx', target: 100, stutters: [45, 78] },
|
||||
{ type: 'file', content: '✓ Created: marketing_strategy.pptx (16.8MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-6 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 14.5s | Memory: 92MB | CPU: 19%' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: () => agents[6], // 会展策划专家(协调者)
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-7] Exhibition Planning Coordinator Activated' },
|
||||
{ type: 'info', content: 'Model: Chat Models + Memories (Multi-Modal)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Synthesizing all agent outputs...' },
|
||||
{ type: 'progress', content: 'Data aggregation', target: 100, stutters: [34, 67, 89] },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Final quality check...' },
|
||||
{ type: 'output', content: '✅ Market Research: Complete' },
|
||||
{ type: 'output', content: '✅ Design & Layout: Complete' },
|
||||
{ type: 'output', content: '✅ Budget Planning: Complete' },
|
||||
{ type: 'output', content: '✅ Documentation: Complete' },
|
||||
{ type: 'output', content: '✅ Execution Plan: Complete' },
|
||||
{ type: 'output', content: '✅ Marketing Strategy: Complete' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '📊 整体评估报告' },
|
||||
{ type: 'output', content: '─────────────────────────────────' },
|
||||
{ type: 'output', content: '方案完整度: 98.5%' },
|
||||
{ type: 'output', content: '可行性评分: 9.2/10' },
|
||||
{ type: 'output', content: '创新性评分: 8.8/10' },
|
||||
{ type: 'output', content: '风险等级: 低' },
|
||||
{ type: 'output', content: '预期成功率: 92%' },
|
||||
{ type: 'output', content: '─────────────────────────────────' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Generating executive summary...' },
|
||||
{ type: 'progress', content: 'Executive_Summary.pdf', target: 100, stutters: [45, 78, 92] },
|
||||
{ type: 'file', content: '✓ Created: Executive_Summary.pdf (2.8MB)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '🎯 核心亮点' },
|
||||
{ type: 'output', content: '1. 长三角地区最大规模新能源汽车展' },
|
||||
{ type: 'output', content: '2. 预计300+展商,50,000+专业观众' },
|
||||
{ type: 'output', content: '3. 创新互动体验区设计' },
|
||||
{ type: 'output', content: '4. 全渠道营销覆盖' },
|
||||
{ type: 'output', content: '5. 预期ROI达320%' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Agent-7 completed successfully' },
|
||||
{ type: 'system', content: 'Execution time: 11.2s | Memory: 156MB | CPU: 24%' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const completionSequence: TerminalLine[] = [
|
||||
{ type: 'system', content: '=' .repeat(60) },
|
||||
{ type: 'system', content: 'ALL AGENTS COMPLETED SUCCESSFULLY' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '📊 执行统计' },
|
||||
{ type: 'output', content: '• 总执行时间: 1分42秒' },
|
||||
{ type: 'output', content: '• 生成文件数: 18个' },
|
||||
{ type: 'output', content: '• 生成图片数: 5张' },
|
||||
{ type: 'output', content: '• 总数据量: 128.6MB' },
|
||||
{ type: 'output', content: '• CPU平均使用率: 19.3%' },
|
||||
{ type: 'output', content: '• 内存峰值: 384MB' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✨ 2024长三角国际新能源汽车展会策划方案已完成!' },
|
||||
{ type: 'system', content: '=' .repeat(60) },
|
||||
];
|
||||
|
||||
return {
|
||||
orderClassId: 'wenlu',
|
||||
orderClassName: '文旅',
|
||||
projectTitle: '2024长三角国际新能源汽车展会策划案',
|
||||
startupSequence,
|
||||
agentSequence,
|
||||
completionSequence
|
||||
};
|
||||
};
|
||||
@@ -26,7 +26,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onStart }) => {
|
||||
|
||||
{/* 动态光效 */}
|
||||
<div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-[120px] animate-pulse" />
|
||||
|
||||
{/* 图片叠加 */}
|
||||
<div
|
||||
@@ -95,9 +95,9 @@ const LandingPage: React.FC<LandingPageProps> = ({ onStart }) => {
|
||||
</div>
|
||||
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 to-pink-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all opacity-0 group-hover:opacity-100" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-blue-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all opacity-0 group-hover:opacity-100" />
|
||||
<div className="relative bg-slate-900/50 backdrop-blur-xl rounded-2xl p-8 border border-slate-800 hover:border-slate-700 transition-all h-full flex flex-col items-center text-center">
|
||||
<Zap className="w-10 h-10 text-purple-400 mb-4" />
|
||||
<Zap className="w-10 h-10 text-blue-500 mb-4" />
|
||||
<h3 className="font-semibold text-lg mb-2 text-white">实时协作</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
智能工作流编排
|
||||
|
||||
@@ -1,261 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
FileText,
|
||||
Target,
|
||||
TrendingUp,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
AlertTriangle,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
RotateCcw,
|
||||
Download
|
||||
} from 'lucide-react';
|
||||
import { useDemoStore } from '../store/demoStore';
|
||||
|
||||
interface ResultPageProps {
|
||||
onRestart: () => void;
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{ id: 'overview', title: '策划案概述', icon: FileText },
|
||||
{ id: 'introduction', title: '展会介绍与预期效果', icon: Target },
|
||||
{ id: 'marketing', title: '营销方案', icon: TrendingUp },
|
||||
{ id: 'operation', title: '现场运营方案', icon: Calendar },
|
||||
{ id: 'budget', title: '预算与收益分析', icon: DollarSign },
|
||||
{ id: 'risk', title: '风险评估与应急预案', icon: AlertTriangle },
|
||||
];
|
||||
|
||||
const ResultPage: React.FC<ResultPageProps> = ({ onRestart }) => {
|
||||
const [currentSection, setCurrentSection] = useState(0);
|
||||
const { generatedContent } = useDemoStore();
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (currentSection > 0) {
|
||||
setCurrentSection(currentSection - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentSection < sections.length - 1) {
|
||||
setCurrentSection(currentSection + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// Mock content for demonstration
|
||||
const getSectionContent = (sectionId: string) => {
|
||||
const mockContent = {
|
||||
overview: {
|
||||
title: '2024长三角国际新能源汽车与智能交通产业博览会',
|
||||
content: `
|
||||
## 策划背景
|
||||
在全球碳中和目标推动下,新能源汽车产业迎来爆发式增长。长三角地区作为中国汽车产业核心集群,聚集了特斯拉、上汽、蔚来等龙头企业。
|
||||
|
||||
## 策划目的
|
||||
- 打造长三角地区新能源汽车与智能交通领域第一展会品牌
|
||||
- 吸引300家优质展商,实现现场意向交易额超8亿元人民币
|
||||
- 促进产业链上下游合作,推动技术创新和产业升级
|
||||
- 推广绿色出行理念,助力碳中和目标实现
|
||||
`,
|
||||
images: ['/api/placeholder/600/400', '/api/placeholder/600/400']
|
||||
},
|
||||
introduction: {
|
||||
title: '展会规模与预期',
|
||||
content: `
|
||||
## 展会主题
|
||||
「智行未来,绿动长三角」
|
||||
|
||||
## 预计规模
|
||||
- 展览面积:50,000平方米
|
||||
- 标准展位:1,200个(9平米/个)
|
||||
- 特装展位:20,000平方米
|
||||
- 参展商家数:350家
|
||||
- 参观人次:50,000人次
|
||||
|
||||
## 预期效果
|
||||
- 现场成交额预计超10亿元
|
||||
- 带动相关产业收入约30亿元
|
||||
- 媒体曝光量超1亿次
|
||||
`,
|
||||
images: []
|
||||
},
|
||||
// Add more sections...
|
||||
};
|
||||
|
||||
return (mockContent as any)[sectionId] || (generatedContent as any)[sectionId] || mockContent.overview;
|
||||
};
|
||||
|
||||
const currentSectionData = getSectionContent(sections[currentSection].id);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-4xl font-bold text-gradient">
|
||||
会展策划方案
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
导出方案
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onRestart}
|
||||
className="px-4 py-2 glass-morphism rounded-xl hover:scale-105 transition-transform flex items-center gap-2"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
重新演示
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Section Tabs */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="flex items-center gap-2 overflow-x-auto scrollbar-thin pb-2">
|
||||
{sections.map((section, index) => {
|
||||
const Icon = section.icon;
|
||||
return (
|
||||
<button
|
||||
key={section.id}
|
||||
onClick={() => setCurrentSection(index)}
|
||||
className={`
|
||||
flex items-center gap-2 px-4 py-2 rounded-xl transition-all whitespace-nowrap
|
||||
${currentSection === index
|
||||
? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg'
|
||||
: 'glass-morphism hover:scale-105'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
<span className="font-medium">{section.title}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content Area */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentSection}
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="glass-morphism rounded-2xl p-8"
|
||||
>
|
||||
{/* Section Header */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-3xl font-bold mb-2">
|
||||
{currentSectionData.title}
|
||||
</h2>
|
||||
<div className="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" />
|
||||
</div>
|
||||
|
||||
{/* Section Content */}
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<div className="whitespace-pre-wrap text-neutral-700 dark:text-neutral-300">
|
||||
{currentSectionData.content}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Images */}
|
||||
{currentSectionData.images && currentSectionData.images.length > 0 && (
|
||||
<div className="mt-8 grid grid-cols-2 gap-4">
|
||||
{currentSectionData.images.map((src: string, index: number) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
className="rounded-xl overflow-hidden shadow-lg"
|
||||
>
|
||||
<img
|
||||
src={src}
|
||||
alt={`Section image ${index + 1}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Navigation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="mt-8 flex items-center justify-between"
|
||||
>
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
disabled={currentSection === 0}
|
||||
className={`
|
||||
px-4 py-2 rounded-xl flex items-center gap-2 transition-all
|
||||
${currentSection === 0
|
||||
? 'opacity-50 cursor-not-allowed glass-morphism'
|
||||
: 'glass-morphism hover:scale-105'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
上一页
|
||||
</button>
|
||||
|
||||
{/* Page Indicators */}
|
||||
<div className="flex items-center gap-2">
|
||||
{sections.map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`
|
||||
w-2 h-2 rounded-full transition-all
|
||||
${currentSection === index
|
||||
? 'w-8 bg-gradient-to-r from-blue-500 to-purple-500'
|
||||
: 'bg-neutral-400'
|
||||
}
|
||||
`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={currentSection === sections.length - 1}
|
||||
className={`
|
||||
px-4 py-2 rounded-xl flex items-center gap-2 transition-all
|
||||
${currentSection === sections.length - 1
|
||||
? 'opacity-50 cursor-not-allowed glass-morphism'
|
||||
: 'glass-morphism hover:scale-105'
|
||||
}
|
||||
`}
|
||||
>
|
||||
下一页
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResultPage;
|
||||
@@ -1,169 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useDemoStore } from '../store/demoStore';
|
||||
import AgentCard from '../components/AgentCard';
|
||||
import WorkflowVisualization from '../components/WorkflowVisualization';
|
||||
import ContentGenerator from '../components/ContentGenerator';
|
||||
import ProgressBar from '../components/ProgressBar';
|
||||
import { Play, Pause, RotateCcw } from 'lucide-react';
|
||||
|
||||
const WorkflowPage: React.FC = () => {
|
||||
const {
|
||||
status,
|
||||
agents,
|
||||
currentAgent,
|
||||
progress,
|
||||
startDemo,
|
||||
pauseDemo,
|
||||
resumeDemo,
|
||||
reset,
|
||||
} = useDemoStore();
|
||||
|
||||
const [showContent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 自动开始演示
|
||||
if (status === 'idle') {
|
||||
setTimeout(() => {
|
||||
startDemo();
|
||||
}, 500);
|
||||
}
|
||||
}, [status, startDemo]);
|
||||
|
||||
const handleTogglePlay = () => {
|
||||
if (status === 'running') {
|
||||
pauseDemo();
|
||||
} else if (status === 'paused') {
|
||||
resumeDemo();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h1 className="text-3xl font-bold text-gradient">
|
||||
AI Agent 协作流程
|
||||
</h1>
|
||||
|
||||
{/* Control Buttons */}
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleTogglePlay}
|
||||
className="p-3 rounded-xl glass-morphism hover:scale-105 transition-transform"
|
||||
>
|
||||
{status === 'running' ? (
|
||||
<Pause className="w-5 h-5" />
|
||||
) : (
|
||||
<Play className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={reset}
|
||||
className="p-3 rounded-xl glass-morphism hover:scale-105 transition-transform"
|
||||
>
|
||||
<RotateCcw className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<ProgressBar progress={progress} />
|
||||
</motion.div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
{/* Left: Workflow Visualization */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="col-span-5"
|
||||
>
|
||||
<div className="glass-morphism rounded-2xl p-6 h-full">
|
||||
<h2 className="text-xl font-semibold mb-4">工作流程图</h2>
|
||||
<WorkflowVisualization agents={agents} currentAgent={currentAgent} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: Content Area */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="col-span-7 space-y-6"
|
||||
>
|
||||
{/* Active Agent Display */}
|
||||
<div className="glass-morphism rounded-2xl p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">当前执行</h2>
|
||||
<AnimatePresence mode="wait">
|
||||
{currentAgent && (
|
||||
<motion.div
|
||||
key={currentAgent}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
>
|
||||
<AgentCard
|
||||
agent={agents.find(a => a.id === currentAgent)!}
|
||||
isActive={true}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Content Generation Display */}
|
||||
{showContent && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="glass-morphism rounded-2xl p-6"
|
||||
>
|
||||
<h2 className="text-xl font-semibold mb-4">生成内容</h2>
|
||||
<ContentGenerator />
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Bottom: Agent List */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="mt-8"
|
||||
>
|
||||
<div className="glass-morphism rounded-2xl p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Agent 团队</h2>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{agents.map((agent) => (
|
||||
<motion.div
|
||||
key={agent.id}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: agents.indexOf(agent) * 0.1 }}
|
||||
>
|
||||
<AgentCard
|
||||
agent={agent}
|
||||
isActive={currentAgent === agent.id}
|
||||
compact={true}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowPage;
|
||||
@@ -1,546 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useDemoStore } from '@/store/demoStore';
|
||||
import { Play, Pause, RotateCcw, Maximize2, Terminal } from 'lucide-react';
|
||||
|
||||
// Terminal line type
|
||||
interface TerminalLine {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
type: 'info' | 'success' | 'warning' | 'error' | 'system' | 'output';
|
||||
agent?: string;
|
||||
content: string;
|
||||
typing?: boolean;
|
||||
}
|
||||
|
||||
const WorkflowPageV2 = () => {
|
||||
const { agents, startDemo, pauseDemo, reset, status } = useDemoStore();
|
||||
const [terminalLines, setTerminalLines] = useState<TerminalLine[]>([]);
|
||||
const [currentAgentIndex, setCurrentAgentIndex] = useState(0);
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
const intervalRef = useRef<number | null>(null);
|
||||
|
||||
// Agent执行序列 - 更丰富的输出
|
||||
const agentSequence = [
|
||||
{
|
||||
agent: agents[0], // 信息检索
|
||||
duration: 12000,
|
||||
output: [
|
||||
'>>> 初始化信息检索系统...',
|
||||
'[INFO] 连接数据库: mongodb://data-server:27017',
|
||||
'[INFO] 加载索引: automotive_industry_2024.idx',
|
||||
'正在执行查询...',
|
||||
'SELECT * FROM exhibitions WHERE region="长三角" AND industry="新能源汽车"',
|
||||
'> 查询耗时: 342ms',
|
||||
'> 返回记录: 2,847 条',
|
||||
'',
|
||||
'=== 数据分析开始 ===',
|
||||
'[1/5] 产业规模分析...',
|
||||
' └─ 2023年产值: 3.2万亿元 (↑32% YoY)',
|
||||
' └─ 企业数量: 5,832家',
|
||||
' └─ 从业人员: 186万人',
|
||||
'[2/5] 主要企业扫描...',
|
||||
' └─ 特斯拉(上海): 年产能75万辆',
|
||||
' └─ 蔚来汽车: 累计交付38万辆',
|
||||
' └─ 理想汽车: 月销量突破5万',
|
||||
' └─ 小鹏汽车: 智能化领先',
|
||||
'[3/5] 展会历史数据...',
|
||||
' └─ 2023年展会: 126场',
|
||||
' └─ 平均规模: 3.2万平方米',
|
||||
' └─ 平均观众: 4.5万人次',
|
||||
'[4/5] 竞品分析...',
|
||||
' └─ 北京车展: 影响力指数92',
|
||||
' └─ 广州车展: 影响力指数88',
|
||||
' └─ 成都车展: 影响力指数76',
|
||||
'[5/5] 趋势预测...',
|
||||
' └─ 2024年增长预期: 28%',
|
||||
' └─ 热点技术: 固态电池、自动驾驶L4',
|
||||
'',
|
||||
'✓ 市场调研报告已生成 (15.3MB)',
|
||||
'✓ 数据已同步至共享空间'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[1], // 设计专家
|
||||
duration: 12000,
|
||||
output: [
|
||||
'>>> 启动设计引擎 v3.2.1...',
|
||||
'[LOAD] 加载品牌识别系统...',
|
||||
'[LOAD] 加载空间规划算法...',
|
||||
'',
|
||||
'=== 视觉识别设计 ===',
|
||||
'Analyzing brand requirements...',
|
||||
'> 主题关键词: [科技, 创新, 绿色, 智能]',
|
||||
'> 色彩心理学分析中...',
|
||||
' Primary: #0EA5E9 (Trust & Technology)',
|
||||
' Secondary: #10B981 (Growth & Sustainability)',
|
||||
' Accent: #F59E0B (Energy & Innovation)',
|
||||
'',
|
||||
'=== 空间布局优化 ===',
|
||||
'Running layout optimization algorithm...',
|
||||
'Iteration 1/100: Score=72.3',
|
||||
'Iteration 50/100: Score=86.7',
|
||||
'Iteration 100/100: Score=94.2',
|
||||
'',
|
||||
'最优布局方案:',
|
||||
'┌─────────────────────────┐',
|
||||
'│ A区: 整车展示 (15,000㎡) │',
|
||||
'│ ├─ 豪华品牌: 5,000㎡ │',
|
||||
'│ ├─ 新势力: 6,000㎡ │',
|
||||
'│ └─ 传统转型: 4,000㎡ │',
|
||||
'├─────────────────────────┤',
|
||||
'│ B区: 核心零部件 (10,000㎡)│',
|
||||
'│ ├─ 动力电池: 4,000㎡ │',
|
||||
'│ ├─ 电机电控: 3,000㎡ │',
|
||||
'│ └─ 智能座舱: 3,000㎡ │',
|
||||
'└─────────────────────────┘',
|
||||
'',
|
||||
'Generating 3D preview...',
|
||||
'> Rendering: ████████████ 100%',
|
||||
'',
|
||||
'✓ 设计方案已完成',
|
||||
'✓ 导出文件: design_plan_v1.pdf (48.2MB)'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[2], // 财务预算
|
||||
duration: 10000,
|
||||
output: [
|
||||
'>>> 财务分析系统 v2.0',
|
||||
'Loading financial models...',
|
||||
'',
|
||||
'=== 成本核算 ===',
|
||||
'Calculating venue costs...',
|
||||
'> 场地租赁: ¥3,000,000',
|
||||
' └─ 展馆: ¥2,500,000',
|
||||
' └─ 会议室: ¥500,000',
|
||||
'Calculating construction costs...',
|
||||
'> 展台搭建: ¥4,500,000',
|
||||
' └─ 特装展位: ¥3,000,000',
|
||||
' └─ 标准展位: ¥1,500,000',
|
||||
'Calculating operational costs...',
|
||||
'> 运营费用: ¥2,000,000',
|
||||
' └─ 人员: ¥800,000',
|
||||
' └─ 营销: ¥1,200,000',
|
||||
'',
|
||||
'=== 收入预测 ===',
|
||||
'Revenue projection model running...',
|
||||
'> 展位销售: ¥8,500,000',
|
||||
' └─ 特装: 100个×¥100,000',
|
||||
' └─ 标准: 500个×¥15,000',
|
||||
'> 赞助收入: ¥3,000,000',
|
||||
'> 门票收入: ¥1,500,000',
|
||||
'',
|
||||
'Financial metrics:',
|
||||
'> Total Cost: ¥10,000,000',
|
||||
'> Total Revenue: ¥13,000,000',
|
||||
'> Net Profit: ¥3,000,000',
|
||||
'> ROI: 30%',
|
||||
'> Break-even: Day 2',
|
||||
'',
|
||||
'✓ 财务模型构建完成',
|
||||
'✓ 风险评估: 低风险'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[3], // 格式编辑
|
||||
duration: 8000,
|
||||
output: [
|
||||
'>>> 文档处理引擎启动...',
|
||||
'[FORMAT] 检查文档结构...',
|
||||
'> 章节数量: 6',
|
||||
'> 总字数: 12,847',
|
||||
'> 图表数量: 24',
|
||||
'',
|
||||
'=== 格式优化 ===',
|
||||
'Applying style guide...',
|
||||
'> 标题层级: H1-H4',
|
||||
'> 字体规范: 思源黑体',
|
||||
'> 行间距: 1.5倍',
|
||||
'',
|
||||
'Checking consistency...',
|
||||
'> 术语统一: 187处修正',
|
||||
'> 数字格式: 92处标准化',
|
||||
'> 标点符号: 45处优化',
|
||||
'',
|
||||
'Generating TOC...',
|
||||
'> 一级标题: 6个',
|
||||
'> 二级标题: 18个',
|
||||
'> 三级标题: 42个',
|
||||
'',
|
||||
'✓ 文档格式优化完成'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[4], // 活动执行
|
||||
duration: 10000,
|
||||
output: [
|
||||
'>>> 执行计划生成器 v1.5',
|
||||
'',
|
||||
'=== 时间轴规划 ===',
|
||||
'D-180: 项目启动',
|
||||
'D-150: 招展启动',
|
||||
'D-120: 媒体发布',
|
||||
'D-90: 展位确认',
|
||||
'D-60: 搭建方案确定',
|
||||
'D-30: 现场勘察',
|
||||
'D-7: 搭建开始',
|
||||
'D-1: 最终检查',
|
||||
'D+0: 展会开幕',
|
||||
'',
|
||||
'=== 人员部署 ===',
|
||||
'Total staff: 126人',
|
||||
'> 管理团队: 6人',
|
||||
'> 展务团队: 30人',
|
||||
'> 接待团队: 40人',
|
||||
'> 技术团队: 20人',
|
||||
'> 安保团队: 30人',
|
||||
'',
|
||||
'=== 物料清单 ===',
|
||||
'Generating BOM...',
|
||||
'> 展台物料: 2,847项',
|
||||
'> 宣传物料: 523项',
|
||||
'> 办公用品: 189项',
|
||||
'',
|
||||
'✓ 执行方案已生成'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[5], // 营销宣传
|
||||
duration: 10000,
|
||||
output: [
|
||||
'>>> 营销策略引擎 v4.0',
|
||||
'',
|
||||
'=== 渠道分析 ===',
|
||||
'Analyzing marketing channels...',
|
||||
'> 社交媒体覆盖: 500万+',
|
||||
'> 行业媒体: 126家',
|
||||
'> KOL资源: 89位',
|
||||
'',
|
||||
'=== 推广计划 ===',
|
||||
'Phase 1: 预热期 (D-90 to D-60)',
|
||||
'> 软文发布: 30篇',
|
||||
'> 视频内容: 15条',
|
||||
'> 直播预告: 5场',
|
||||
'',
|
||||
'Phase 2: 高峰期 (D-60 to D-30)',
|
||||
'> 广告投放: ¥800,000',
|
||||
'> 媒体专访: 10次',
|
||||
'> 路演活动: 8场',
|
||||
'',
|
||||
'Phase 3: 冲刺期 (D-30 to D-0)',
|
||||
'> 倒计时海报: 每日更新',
|
||||
'> 展商专访: 20家',
|
||||
'> 观众互动: 10个活动',
|
||||
'',
|
||||
'Expected reach:',
|
||||
'> 曝光量: 2000万+',
|
||||
'> 互动量: 50万+',
|
||||
'> 转化率: 2.5%',
|
||||
'',
|
||||
'✓ 营销方案制定完成'
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[6], // 中央协调
|
||||
duration: 8000,
|
||||
output: [
|
||||
'>>> 协调控制中心 v3.0',
|
||||
'',
|
||||
'=== 数据汇总 ===',
|
||||
'Collecting agent outputs...',
|
||||
'> 市场分析: ✓ Complete',
|
||||
'> 设计方案: ✓ Complete',
|
||||
'> 财务预算: ✓ Complete',
|
||||
'> 文档格式: ✓ Complete',
|
||||
'> 执行计划: ✓ Complete',
|
||||
'> 营销策略: ✓ Complete',
|
||||
'',
|
||||
'=== 协同优化 ===',
|
||||
'Cross-validating data...',
|
||||
'> 预算-设计匹配度: 96%',
|
||||
'> 营销-市场匹配度: 92%',
|
||||
'> 执行可行性评分: 94%',
|
||||
'',
|
||||
'Resolving conflicts...',
|
||||
'> 时间冲突: 0',
|
||||
'> 资源冲突: 0',
|
||||
'> 逻辑冲突: 0',
|
||||
'',
|
||||
'=== 最终输出 ===',
|
||||
'Generating final document...',
|
||||
'> 合并章节: 6个',
|
||||
'> 总页数: 68页',
|
||||
'> 附件数: 12个',
|
||||
'',
|
||||
'✓ 策划方案生成完成',
|
||||
'✓ 所有系统已同步'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 添加终端行
|
||||
const addTerminalLine = (line: Omit<TerminalLine, 'id' | 'timestamp'>) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
|
||||
|
||||
setTerminalLines(prev => [...prev, {
|
||||
...line,
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
timestamp
|
||||
}]);
|
||||
|
||||
// 自动滚动到底部
|
||||
setTimeout(() => {
|
||||
if (terminalRef.current) {
|
||||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
|
||||
// 模拟Agent执行
|
||||
const simulateAgentExecution = async () => {
|
||||
if (currentAgentIndex >= agentSequence.length) {
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: '========== 所有Agent执行完成 =========='
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const current = agentSequence[currentAgentIndex];
|
||||
const agent = current.agent;
|
||||
|
||||
// 开始执行
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: `[Agent启动] ${agent.name} (${agent.model})`
|
||||
});
|
||||
|
||||
// 逐行输出
|
||||
for (let i = 0; i < current.output.length; i++) {
|
||||
await new Promise(resolve => setTimeout(resolve, current.duration / current.output.length));
|
||||
|
||||
if (status !== 'running') return;
|
||||
|
||||
addTerminalLine({
|
||||
type: current.output[i].startsWith('✓') ? 'success' :
|
||||
current.output[i].startsWith('>') ? 'output' : 'info',
|
||||
agent: agent.name,
|
||||
content: current.output[i]
|
||||
});
|
||||
}
|
||||
|
||||
// 执行下一个Agent
|
||||
setCurrentAgentIndex(prev => prev + 1);
|
||||
};
|
||||
|
||||
// 开始演示
|
||||
useEffect(() => {
|
||||
if (status === 'running' && currentAgentIndex < agentSequence.length) {
|
||||
simulateAgentExecution();
|
||||
}
|
||||
}, [status, currentAgentIndex]);
|
||||
|
||||
// 计时器
|
||||
useEffect(() => {
|
||||
if (status === 'running') {
|
||||
intervalRef.current = setInterval(() => {
|
||||
setElapsedTime(prev => prev + 100);
|
||||
}, 100);
|
||||
} else {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setTerminalLines([]);
|
||||
setCurrentAgentIndex(0);
|
||||
setElapsedTime(0);
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex flex-col">
|
||||
{/* 顶部控制栏 */}
|
||||
<div className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900">AI会展策划系统 - 多Agent协同演示</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={status === 'idle' ? startDemo : pauseDemo}
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
{status === 'idle' || status === 'paused' ? (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
<span>开始</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pause className="w-4 h-4" />
|
||||
<span>暂停</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-3 py-1.5 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>重置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
运行时间: {formatTime(elapsedTime)} / 03:00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<div className="flex-1 flex">
|
||||
{/* 左侧:n8n工作流 */}
|
||||
<div className="w-1/2 border-r border-gray-200 bg-white">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="px-4 py-2 border-b border-gray-200 flex items-center justify-between bg-gray-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<span className="text-sm font-medium text-gray-700">工作流可视化</span>
|
||||
</div>
|
||||
<button className="p-1 hover:bg-gray-200 rounded transition-colors">
|
||||
<Maximize2 className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
<iframe
|
||||
src="http://localhost:5678/workflow/XbfF8iRI4a69hmYS"
|
||||
className="w-full h-full border-0"
|
||||
title="n8n Workflow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧:终端执行区 */}
|
||||
<div className="w-1/2 bg-gray-900">
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="px-4 py-2 bg-gray-800 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm font-mono text-green-400">Agent Execution Terminal</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={terminalRef}
|
||||
className="flex-1 overflow-y-auto p-4 font-mono text-sm"
|
||||
style={{ backgroundColor: '#0a0a0a' }}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{terminalLines.map((line) => (
|
||||
<motion.div
|
||||
key={line.id}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="mb-1"
|
||||
>
|
||||
<span className="text-gray-500">[{line.timestamp}]</span>
|
||||
{line.agent && (
|
||||
<span className="text-cyan-400 ml-2">{line.agent}:</span>
|
||||
)}
|
||||
<span className={`ml-2 ${
|
||||
line.type === 'success' ? 'text-green-400' :
|
||||
line.type === 'error' ? 'text-red-400' :
|
||||
line.type === 'warning' ? 'text-yellow-400' :
|
||||
line.type === 'system' ? 'text-purple-400' :
|
||||
line.type === 'output' ? 'text-blue-400' :
|
||||
'text-gray-300'
|
||||
}`}>
|
||||
{line.content}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 光标 */}
|
||||
{status === 'running' && (
|
||||
<motion.span
|
||||
animate={{ opacity: [1, 0] }}
|
||||
transition={{ duration: 0.5, repeat: Infinity }}
|
||||
className="inline-block w-2 h-4 bg-green-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Agent状态栏 */}
|
||||
<div className="px-4 py-3 bg-gray-800 border-t border-gray-700">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{agents.map((agent, index) => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className={`flex flex-col items-center gap-1 px-2 py-2 rounded-lg transition-all ${
|
||||
index < currentAgentIndex ? 'bg-green-900/50 border border-green-700' :
|
||||
index === currentAgentIndex ? 'bg-blue-900 border border-blue-500 animate-pulse' :
|
||||
'bg-gray-800 border border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<span className={`text-2xl ${
|
||||
index < currentAgentIndex ? 'animate-none' :
|
||||
index === currentAgentIndex ? 'animate-bounce' :
|
||||
''
|
||||
}`}>{agent.icon}</span>
|
||||
<span className={`text-xs text-center ${
|
||||
index < currentAgentIndex ? 'text-green-400' :
|
||||
index === currentAgentIndex ? 'text-blue-400' :
|
||||
'text-gray-500'
|
||||
}`}>{agent.name}</span>
|
||||
<div className={`w-full h-1 rounded-full mt-1 ${
|
||||
index < currentAgentIndex ? 'bg-green-500' :
|
||||
index === currentAgentIndex ? 'bg-blue-500' :
|
||||
'bg-gray-700'
|
||||
}`}>
|
||||
{index === currentAgentIndex && (
|
||||
<div className="h-full bg-blue-400 rounded-full animate-pulse"
|
||||
style={{width: '50%'}}></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-center text-xs text-gray-400">
|
||||
总进度: {Math.round((currentAgentIndex / agentSequence.length) * 100)}% |
|
||||
当前阶段: {currentAgentIndex < agentSequence.length ? agentSequence[currentAgentIndex]?.agent.name : '已完成'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowPageV2;
|
||||
@@ -1,690 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useDemoStore } from '@/store/demoStore';
|
||||
import { Play, Pause, RotateCcw, Maximize2, Terminal } from 'lucide-react';
|
||||
|
||||
// Terminal line type
|
||||
interface TerminalLine {
|
||||
id: string;
|
||||
timestamp: string;
|
||||
type: 'info' | 'success' | 'warning' | 'error' | 'system' | 'output' | 'progress' | 'install';
|
||||
agent?: string;
|
||||
content: string;
|
||||
typing?: boolean;
|
||||
progress?: number;
|
||||
}
|
||||
|
||||
type TerminalLineType = TerminalLine['type'];
|
||||
|
||||
// 生成随机延迟
|
||||
const getRandomDelay = (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
};
|
||||
|
||||
// 生成进度条字符串
|
||||
const generateProgressBar = (progress: number, width: number = 30) => {
|
||||
const filled = Math.floor((progress / 100) * width);
|
||||
const empty = width - filled;
|
||||
return `[${'█'.repeat(filled)}${'░'.repeat(empty)}] ${progress}%`;
|
||||
};
|
||||
|
||||
const WorkflowPageV3 = () => {
|
||||
const { agents, startDemo, pauseDemo, reset, status } = useDemoStore();
|
||||
const [terminalLines, setTerminalLines] = useState<TerminalLine[]>([]);
|
||||
const [currentAgentIndex, setCurrentAgentIndex] = useState(-1);
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
const [isExecuting, setIsExecuting] = useState(false);
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
const intervalRef = useRef<number | null>(null);
|
||||
|
||||
// 启动序列
|
||||
const startupSequence = [
|
||||
{ type: 'system', content: '>>> AI Exhibition Planning System v2.0.0' },
|
||||
{ type: 'system', content: '>>> Initializing multi-agent workflow...' },
|
||||
{ type: 'info', content: 'Loading configuration from /etc/agents/config.yaml' },
|
||||
{ type: 'info', content: 'Checking system requirements...' },
|
||||
{ type: 'success', content: '✓ Node.js v18.17.0' },
|
||||
{ type: 'success', content: '✓ Python 3.11.4' },
|
||||
{ type: 'success', content: '✓ MongoDB 6.0.8' },
|
||||
{ type: 'info', content: 'Installing dependencies...' },
|
||||
{ type: 'install', content: 'npm install @ai/core @ai/agents @ai/workflow' },
|
||||
{ type: 'progress', content: 'Downloading packages...', progress: 0 },
|
||||
{ type: 'progress', content: 'Extracting files...', progress: 35 },
|
||||
{ type: 'progress', content: 'Building modules...', progress: 67 },
|
||||
{ type: 'progress', content: 'Linking dependencies...', progress: 89 },
|
||||
{ type: 'success', content: '✓ All dependencies installed successfully' },
|
||||
{ type: 'system', content: '========================================' },
|
||||
{ type: 'system', content: 'System ready. Starting agent workflow...' },
|
||||
{ type: 'system', content: '========================================' },
|
||||
];
|
||||
|
||||
// Agent执行序列 - 更丰富的输出
|
||||
const agentSequence: Array<{
|
||||
agent: typeof agents[0];
|
||||
outputs: Array<{ type: TerminalLineType; content: string; progress?: number }>
|
||||
}> = [
|
||||
{
|
||||
agent: agents[0], // 信息检索
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-1] Information Retrieval Expert' },
|
||||
{ type: 'info', content: 'Initializing data connectors...' },
|
||||
{ type: 'install', content: 'pip install pandas numpy sklearn beautifulsoup4' },
|
||||
{ type: 'progress', content: 'Installing data analysis packages...', progress: 0 },
|
||||
{ type: 'progress', content: 'Installing ML libraries...', progress: 45 },
|
||||
{ type: 'success', content: '✓ Packages installed (12.3s)' },
|
||||
{ type: 'info', content: 'Connecting to data sources...' },
|
||||
{ type: 'output', content: '[1/5] MongoDB: mongodb://data-server:27017' },
|
||||
{ type: 'output', content: '[2/5] ElasticSearch: http://es-cluster:9200' },
|
||||
{ type: 'output', content: '[3/5] Redis Cache: redis://cache:6379' },
|
||||
{ type: 'output', content: '[4/5] API Gateway: https://api.exhibition.cn' },
|
||||
{ type: 'output', content: '[5/5] Web Scraper: Ready' },
|
||||
{ type: 'success', content: '✓ All connections established' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Executing search queries...' },
|
||||
{ type: 'output', content: 'db.exhibitions.find({region: "长三角", year: 2024})' },
|
||||
{ type: 'progress', content: 'Scanning documents...', progress: 0 },
|
||||
{ type: 'progress', content: 'Processing results...', progress: 62 },
|
||||
{ type: 'success', content: '> Found 2,847 matching records (342ms)' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Running data analysis pipeline...' },
|
||||
{ type: 'output', content: 'import pandas as pd' },
|
||||
{ type: 'output', content: 'df = pd.DataFrame(results)' },
|
||||
{ type: 'output', content: 'df.groupby("category").agg({' },
|
||||
{ type: 'output', content: ' "revenue": "sum",' },
|
||||
{ type: 'output', content: ' "visitors": "mean",' },
|
||||
{ type: 'output', content: ' "exhibitors": "count"' },
|
||||
{ type: 'output', content: '})' },
|
||||
{ type: 'progress', content: 'Analyzing market trends...', progress: 0 },
|
||||
{ type: 'progress', content: 'Computing statistics...', progress: 78 },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '=== Analysis Results ===' },
|
||||
{ type: 'output', content: '• Market Size: ¥3.2 Trillion (↑32% YoY)' },
|
||||
{ type: 'output', content: '• Key Players: 5,832 companies' },
|
||||
{ type: 'output', content: '• Employment: 1.86M professionals' },
|
||||
{ type: 'output', content: '• Growth Rate: 28% CAGR' },
|
||||
{ type: 'output', content: '• Hot Technologies: Solid-state batteries, L4 autonomous driving' },
|
||||
{ type: 'success', content: '✓ Report generated: market_analysis_2024.json (15.3MB)' },
|
||||
{ type: 'system', content: '[Agent-1] Completed in 18.7s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[1], // 设计专家
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-2] Design & Creative Expert' },
|
||||
{ type: 'info', content: 'Loading design engines...' },
|
||||
{ type: 'install', content: 'npm install three.js @adobe/react-spectrum figma-api' },
|
||||
{ type: 'progress', content: 'Installing 3D libraries...', progress: 0 },
|
||||
{ type: 'progress', content: 'Loading design assets...', progress: 56 },
|
||||
{ type: 'success', content: '✓ Design toolkit ready' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Initializing AI design assistant...' },
|
||||
{ type: 'output', content: 'const designer = new AIDesigner({' },
|
||||
{ type: 'output', content: ' model: "stable-diffusion-xl",' },
|
||||
{ type: 'output', content: ' style: "modern-minimalist",' },
|
||||
{ type: 'output', content: ' palette: ["#0EA5E9", "#10B981", "#F59E0B"]' },
|
||||
{ type: 'output', content: '});' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Generating design concepts...' },
|
||||
{ type: 'progress', content: 'Creating mood board...', progress: 0 },
|
||||
{ type: 'progress', content: 'Generating color schemes...', progress: 25 },
|
||||
{ type: 'progress', content: 'Designing layouts...', progress: 50 },
|
||||
{ type: 'progress', content: 'Optimizing spatial flow...', progress: 75 },
|
||||
{ type: 'progress', content: 'Rendering 3D preview...', progress: 90 },
|
||||
{ type: 'success', content: '✓ Design concepts ready' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== Exhibition Layout ===' },
|
||||
{ type: 'output', content: '┌──────────────────────────────┐' },
|
||||
{ type: 'output', content: '│ A: Vehicle Display (15000㎡) │' },
|
||||
{ type: 'output', content: '│ ┌────┬────┬────┬────┐ │' },
|
||||
{ type: 'output', content: '│ │Tesla│NIO │Li │XPeng│ │' },
|
||||
{ type: 'output', content: '│ └────┴────┴────┴────┘ │' },
|
||||
{ type: 'output', content: '├──────────────────────────────┤' },
|
||||
{ type: 'output', content: '│ B: Components (10000㎡) │' },
|
||||
{ type: 'output', content: '│ C: Charging (8000㎡) │' },
|
||||
{ type: 'output', content: '│ D: Smart Traffic (12000㎡) │' },
|
||||
{ type: 'output', content: '└──────────────────────────────┘' },
|
||||
{ type: 'success', content: '✓ Exported: design_blueprint.pdf (48.2MB)' },
|
||||
{ type: 'success', content: '✓ 3D Model: exhibition_layout.glb (126MB)' },
|
||||
{ type: 'system', content: '[Agent-2] Completed in 22.3s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[2], // 财务预算
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-3] Financial & Budget Expert' },
|
||||
{ type: 'info', content: 'Initializing financial analysis system...' },
|
||||
{ type: 'output', content: 'Loading economic models...' },
|
||||
{ type: 'progress', content: 'Importing financial data...', progress: 0 },
|
||||
{ type: 'progress', content: 'Building cost models...', progress: 45 },
|
||||
{ type: 'success', content: '✓ Financial system ready' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Running cost calculations...' },
|
||||
{ type: 'output', content: 'SELECT * FROM cost_database WHERE type IN' },
|
||||
{ type: 'output', content: ' ("venue", "construction", "marketing", "operations")' },
|
||||
{ type: 'output', content: 'ORDER BY priority DESC;' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== Cost Breakdown ===' },
|
||||
{ type: 'output', content: '• Venue Rental: ¥3,000,000' },
|
||||
{ type: 'output', content: ' └─ Main Hall: ¥2,500,000' },
|
||||
{ type: 'output', content: ' └─ Meeting Rooms: ¥500,000' },
|
||||
{ type: 'output', content: '• Construction: ¥4,500,000' },
|
||||
{ type: 'output', content: ' └─ Premium Booths: ¥3,000,000' },
|
||||
{ type: 'output', content: ' └─ Standard Booths: ¥1,500,000' },
|
||||
{ type: 'output', content: '• Operations: ¥2,000,000' },
|
||||
{ type: 'output', content: '• Reserve Fund: ¥500,000' },
|
||||
{ type: 'warning', content: 'Total Budget: ¥10,000,000' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Calculating revenue projections...' },
|
||||
{ type: 'progress', content: 'Analyzing market data...', progress: 0 },
|
||||
{ type: 'progress', content: 'Running simulations...', progress: 67 },
|
||||
{ type: 'output', content: '=== Revenue Forecast ===' },
|
||||
{ type: 'output', content: '• Booth Sales: ¥8,500,000' },
|
||||
{ type: 'output', content: '• Sponsorship: ¥3,000,000' },
|
||||
{ type: 'output', content: '• Tickets: ¥1,500,000' },
|
||||
{ type: 'success', content: 'Total Revenue: ¥13,000,000' },
|
||||
{ type: 'success', content: 'Net Profit: ¥3,000,000 (ROI: 30%)' },
|
||||
{ type: 'system', content: '[Agent-3] Completed in 15.8s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[3], // 格式编辑
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-4] Document Format Expert' },
|
||||
{ type: 'info', content: 'Loading document processors...' },
|
||||
{ type: 'output', content: 'const formatter = require("@ai/doc-formatter");' },
|
||||
{ type: 'output', content: 'const validator = require("@ai/doc-validator");' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Analyzing document structure...' },
|
||||
{ type: 'progress', content: 'Parsing content...', progress: 0 },
|
||||
{ type: 'progress', content: 'Checking formatting...', progress: 50 },
|
||||
{ type: 'progress', content: 'Validating structure...', progress: 100 },
|
||||
{ type: 'output', content: '> Chapters: 6' },
|
||||
{ type: 'output', content: '> Sections: 24' },
|
||||
{ type: 'output', content: '> Words: 12,847' },
|
||||
{ type: 'output', content: '> Images: 36' },
|
||||
{ type: 'output', content: '> Tables: 12' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Applying formatting rules...' },
|
||||
{ type: 'output', content: '• Standardizing headings...' },
|
||||
{ type: 'output', content: '• Unifying terminology...' },
|
||||
{ type: 'output', content: '• Optimizing readability...' },
|
||||
{ type: 'output', content: '• Generating TOC...' },
|
||||
{ type: 'success', content: '✓ 187 terms unified' },
|
||||
{ type: 'success', content: '✓ 92 numbers formatted' },
|
||||
{ type: 'success', content: '✓ Document optimized' },
|
||||
{ type: 'system', content: '[Agent-4] Completed in 12.1s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[4], // 活动执行
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-5] Event Execution Expert' },
|
||||
{ type: 'info', content: 'Loading project management tools...' },
|
||||
{ type: 'install', content: 'npm install gantt-chart timeline-js resource-planner' },
|
||||
{ type: 'progress', content: 'Setting up PM tools...', progress: 0 },
|
||||
{ type: 'progress', content: 'Loading templates...', progress: 78 },
|
||||
{ type: 'success', content: '✓ Project tools ready' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Creating execution timeline...' },
|
||||
{ type: 'output', content: 'const timeline = new Timeline({' },
|
||||
{ type: 'output', content: ' start: "2024-04-01",' },
|
||||
{ type: 'output', content: ' end: "2024-10-20",' },
|
||||
{ type: 'output', content: ' milestones: 15' },
|
||||
{ type: 'output', content: '});' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== Critical Milestones ===' },
|
||||
{ type: 'output', content: 'D-180: Project Kickoff ✓' },
|
||||
{ type: 'output', content: 'D-150: Exhibitor Recruitment ░░░░' },
|
||||
{ type: 'output', content: 'D-120: Media Launch ░░░░' },
|
||||
{ type: 'output', content: 'D-90: Booth Confirmation ░░░░' },
|
||||
{ type: 'output', content: 'D-60: Construction Plan ░░░░' },
|
||||
{ type: 'output', content: 'D-30: Site Inspection ░░░░' },
|
||||
{ type: 'output', content: 'D-7: Setup Begins ░░░░' },
|
||||
{ type: 'output', content: 'D-0: Grand Opening ░░░░' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Allocating resources...' },
|
||||
{ type: 'progress', content: 'Assigning teams...', progress: 0 },
|
||||
{ type: 'progress', content: 'Scheduling tasks...', progress: 100 },
|
||||
{ type: 'output', content: '• Management: 6 people' },
|
||||
{ type: 'output', content: '• Exhibition: 30 people' },
|
||||
{ type: 'output', content: '• Reception: 40 people' },
|
||||
{ type: 'output', content: '• Technical: 20 people' },
|
||||
{ type: 'output', content: '• Security: 30 people' },
|
||||
{ type: 'success', content: '✓ Total Staff: 126 people allocated' },
|
||||
{ type: 'success', content: '✓ Gantt chart generated' },
|
||||
{ type: 'system', content: '[Agent-5] Completed in 16.9s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[5], // 营销宣传
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-6] Marketing & PR Expert' },
|
||||
{ type: 'info', content: 'Initializing marketing automation...' },
|
||||
{ type: 'output', content: 'Loading campaign tools...' },
|
||||
{ type: 'progress', content: 'Connecting to ad platforms...', progress: 0 },
|
||||
{ type: 'progress', content: 'Syncing social media...', progress: 60 },
|
||||
{ type: 'success', content: '✓ Marketing suite ready' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Analyzing target audience...' },
|
||||
{ type: 'output', content: 'SELECT demographics, interests, behavior' },
|
||||
{ type: 'output', content: 'FROM audience_insights' },
|
||||
{ type: 'output', content: 'WHERE industry = "automotive"' },
|
||||
{ type: 'output', content: 'AND region = "yangtze_delta";' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== Audience Profile ===' },
|
||||
{ type: 'output', content: '• Total Reach: 5M+ professionals' },
|
||||
{ type: 'output', content: '• Decision Makers: 180K' },
|
||||
{ type: 'output', content: '• Media Contacts: 1,200' },
|
||||
{ type: 'output', content: '• KOL Network: 89 influencers' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'info', content: 'Generating campaign strategy...' },
|
||||
{ type: 'progress', content: 'Creating content calendar...', progress: 0 },
|
||||
{ type: 'progress', content: 'Planning ad campaigns...', progress: 40 },
|
||||
{ type: 'progress', content: 'Scheduling posts...', progress: 80 },
|
||||
{ type: 'output', content: '=== Marketing Timeline ===' },
|
||||
{ type: 'output', content: 'Week 1-4: Teaser Campaign' },
|
||||
{ type: 'output', content: 'Week 5-8: Early Bird Promotion' },
|
||||
{ type: 'output', content: 'Week 9-12: Media Blitz' },
|
||||
{ type: 'output', content: 'Week 13-16: Final Push' },
|
||||
{ type: 'success', content: '✓ 120 social posts scheduled' },
|
||||
{ type: 'success', content: '✓ 30 press releases drafted' },
|
||||
{ type: 'success', content: '✓ ¥1.2M ad budget allocated' },
|
||||
{ type: 'system', content: '[Agent-6] Completed in 19.2s' },
|
||||
]
|
||||
},
|
||||
{
|
||||
agent: agents[6], // 中央协调
|
||||
outputs: [
|
||||
{ type: 'system', content: '>>> [Agent-7] Central Coordinator' },
|
||||
{ type: 'info', content: 'Collecting all agent outputs...' },
|
||||
{ type: 'progress', content: 'Aggregating data...', progress: 0 },
|
||||
{ type: 'progress', content: 'Validating consistency...', progress: 30 },
|
||||
{ type: 'progress', content: 'Resolving conflicts...', progress: 60 },
|
||||
{ type: 'progress', content: 'Optimizing plan...', progress: 90 },
|
||||
{ type: 'success', content: '✓ All data synchronized' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== Final Validation ===' },
|
||||
{ type: 'success', content: '✓ Market Analysis: Complete' },
|
||||
{ type: 'success', content: '✓ Design Plan: Complete' },
|
||||
{ type: 'success', content: '✓ Budget Plan: Complete' },
|
||||
{ type: 'success', content: '✓ Document Format: Complete' },
|
||||
{ type: 'success', content: '✓ Execution Plan: Complete' },
|
||||
{ type: 'success', content: '✓ Marketing Strategy: Complete' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'output', content: '=== System Metrics ===' },
|
||||
{ type: 'output', content: '• Total Processing Time: 2m 48s' },
|
||||
{ type: 'output', content: '• Documents Generated: 8' },
|
||||
{ type: 'output', content: '• Total File Size: 238.7MB' },
|
||||
{ type: 'output', content: '• Quality Score: 94/100' },
|
||||
{ type: 'info', content: '' },
|
||||
{ type: 'success', content: '✓ Exhibition plan completed successfully!' },
|
||||
{ type: 'success', content: '✓ All files exported to /output/exhibition_2024/' },
|
||||
{ type: 'system', content: '========================================' },
|
||||
{ type: 'system', content: 'Workflow completed. Total time: 3m 00s' },
|
||||
{ type: 'system', content: '========================================' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 添加终端行
|
||||
const addTerminalLine = (line: Omit<TerminalLine, 'id' | 'timestamp'>) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;
|
||||
|
||||
setTerminalLines(prev => [...prev, {
|
||||
...line,
|
||||
id: Math.random().toString(36).substring(2, 11),
|
||||
timestamp
|
||||
}]);
|
||||
|
||||
// 自动滚动到底部
|
||||
setTimeout(() => {
|
||||
if (terminalRef.current) {
|
||||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
|
||||
// 执行启动序列
|
||||
const executeStartupSequence = async () => {
|
||||
for (const line of startupSequence) {
|
||||
if (status !== 'running') return;
|
||||
|
||||
if (line.type === 'progress') {
|
||||
// 进度条动画
|
||||
const progress = (line as any).progress || 0;
|
||||
for (let p = progress; p <= 100; p += 5) {
|
||||
if (status !== 'running') return;
|
||||
addTerminalLine({
|
||||
type: 'output',
|
||||
content: generateProgressBar(p)
|
||||
});
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(30, 80)));
|
||||
}
|
||||
} else {
|
||||
addTerminalLine(line as any);
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(50, 200)));
|
||||
}
|
||||
}
|
||||
|
||||
// 开始执行Agent
|
||||
setCurrentAgentIndex(0);
|
||||
};
|
||||
|
||||
// 执行Agent
|
||||
const executeAgent = async (agentIndex: number) => {
|
||||
if (agentIndex >= agentSequence.length) {
|
||||
// 所有Agent执行完成
|
||||
setIsExecuting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const agentData = agentSequence[agentIndex];
|
||||
|
||||
for (const output of agentData.outputs) {
|
||||
if (status !== 'running') return;
|
||||
|
||||
if (output.type === 'progress') {
|
||||
// 进度条动画
|
||||
const targetProgress = (output as any).progress || 100;
|
||||
const step = targetProgress === 0 ? 100 : targetProgress;
|
||||
|
||||
for (let p = 0; p <= step; p += Math.floor(Math.random() * 10) + 5) {
|
||||
if (status !== 'running') return;
|
||||
addTerminalLine({
|
||||
type: 'output',
|
||||
agent: agentData.agent.name,
|
||||
content: `${output.content} ${generateProgressBar(Math.min(p, step))}`
|
||||
});
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(20, 60)));
|
||||
}
|
||||
} else {
|
||||
addTerminalLine({
|
||||
...output,
|
||||
agent: output.type === 'system' ? undefined : agentData.agent.name
|
||||
});
|
||||
|
||||
// 随机延迟,模拟真实执行
|
||||
const delay = output.type === 'system' ? getRandomDelay(100, 300) :
|
||||
output.type === 'install' ? getRandomDelay(200, 500) :
|
||||
output.type === 'info' && output.content === '' ? 50 :
|
||||
getRandomDelay(30, 150);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
}
|
||||
}
|
||||
|
||||
// 执行下一个Agent
|
||||
setCurrentAgentIndex(agentIndex + 1);
|
||||
};
|
||||
|
||||
// 开始演示
|
||||
useEffect(() => {
|
||||
if (status === 'running' && !isExecuting) {
|
||||
setIsExecuting(true);
|
||||
executeStartupSequence();
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
// 监听Agent变化
|
||||
useEffect(() => {
|
||||
if (status === 'running' && currentAgentIndex >= 0 && currentAgentIndex < agentSequence.length) {
|
||||
executeAgent(currentAgentIndex);
|
||||
}
|
||||
}, [currentAgentIndex]);
|
||||
|
||||
// 计时器
|
||||
useEffect(() => {
|
||||
if (status === 'running') {
|
||||
intervalRef.current = window.setInterval(() => {
|
||||
setElapsedTime(prev => prev + 100);
|
||||
}, 100);
|
||||
} else {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
reset();
|
||||
setTerminalLines([]);
|
||||
setCurrentAgentIndex(-1);
|
||||
setElapsedTime(0);
|
||||
setIsExecuting(false);
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (ms: number) => {
|
||||
const seconds = Math.floor(ms / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
// 获取终端行颜色
|
||||
const getLineColor = (type: string) => {
|
||||
switch(type) {
|
||||
case 'success': return 'text-green-400';
|
||||
case 'error': return 'text-red-400';
|
||||
case 'warning': return 'text-yellow-400';
|
||||
case 'system': return 'text-purple-400';
|
||||
case 'output': return 'text-blue-400';
|
||||
case 'info': return 'text-gray-300';
|
||||
case 'install': return 'text-cyan-400';
|
||||
case 'progress': return 'text-amber-400';
|
||||
default: return 'text-gray-300';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-gray-50 flex flex-col">
|
||||
{/* 顶部控制栏 */}
|
||||
<div className="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-lg font-semibold text-gray-900">AI会展策划系统 - 多Agent协同演示</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={status === 'idle' ? startDemo : pauseDemo}
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
{status === 'idle' || status === 'paused' ? (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
<span>开始</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Pause className="w-4 h-4" />
|
||||
<span>暂停</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleReset}
|
||||
className="px-3 py-1.5 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>重置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
运行时间: {formatTime(elapsedTime)} / 03:00
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* 左侧:n8n工作流 */}
|
||||
<div className="w-1/2 border-r border-gray-200 bg-white flex flex-col">
|
||||
<div className="px-4 py-2 border-b border-gray-200 flex items-center justify-between bg-gray-50">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
<span className="text-sm font-medium text-gray-700">工作流可视化</span>
|
||||
</div>
|
||||
<button className="p-1 hover:bg-gray-200 rounded transition-colors">
|
||||
<Maximize2 className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<iframe
|
||||
src="http://localhost:5678/workflow/XbfF8iRI4a69hmYS"
|
||||
className="w-full h-full border-0"
|
||||
title="n8n Workflow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧:终端执行区 */}
|
||||
<div className="w-1/2 bg-gray-900 flex flex-col">
|
||||
<div className="px-4 py-2 bg-gray-800 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Terminal className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm font-mono text-green-400">Agent Execution Terminal</span>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
||||
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={terminalRef}
|
||||
className="flex-1 overflow-y-auto p-4 font-mono text-xs custom-scrollbar"
|
||||
style={{
|
||||
backgroundColor: '#0a0a0a',
|
||||
maxHeight: 'calc(100vh - 200px)'
|
||||
}}
|
||||
>
|
||||
<style>{`
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<AnimatePresence>
|
||||
{terminalLines.map((line) => (
|
||||
<motion.div
|
||||
key={line.id}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
className="mb-0.5 whitespace-pre-wrap break-all"
|
||||
>
|
||||
<span className="text-gray-600">[{line.timestamp}]</span>
|
||||
{line.agent && (
|
||||
<span className="text-cyan-400 ml-2">{line.agent}:</span>
|
||||
)}
|
||||
<span className={`ml-2 ${getLineColor(line.type)}`}>
|
||||
{line.content}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 光标 */}
|
||||
{status === 'running' && (
|
||||
<motion.span
|
||||
animate={{ opacity: [1, 0] }}
|
||||
transition={{ duration: 0.5, repeat: Infinity }}
|
||||
className="inline-block w-2 h-4 bg-green-400"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Agent状态栏 */}
|
||||
<div className="px-4 py-3 bg-gray-800 border-t border-gray-700">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{agents.map((agent, index) => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className={`flex flex-col items-center gap-1 px-2 py-2 rounded-lg transition-all ${
|
||||
index < currentAgentIndex ? 'bg-green-900/50 border border-green-700' :
|
||||
index === currentAgentIndex ? 'bg-blue-900 border border-blue-500 animate-pulse' :
|
||||
'bg-gray-800 border border-gray-700'
|
||||
}`}
|
||||
>
|
||||
{/* Agent头像 */}
|
||||
<div className={`relative w-12 h-12 rounded-full overflow-hidden border-2 ${
|
||||
index < currentAgentIndex ? 'border-green-400' :
|
||||
index === currentAgentIndex ? 'border-blue-400 animate-pulse' :
|
||||
'border-gray-600'
|
||||
}`}>
|
||||
{agent.avatar ? (
|
||||
<img
|
||||
src={agent.avatar}
|
||||
alt={agent.name}
|
||||
className={`w-full h-full object-cover ${
|
||||
index < currentAgentIndex ? 'brightness-100' :
|
||||
index === currentAgentIndex ? 'brightness-110' :
|
||||
'brightness-50 grayscale'
|
||||
}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full bg-gray-700 flex items-center justify-center">
|
||||
<span className="text-2xl">{agent.icon}</span>
|
||||
</div>
|
||||
)}
|
||||
{/* 状态指示器 */}
|
||||
{index === currentAgentIndex && (
|
||||
<div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-400 rounded-full animate-ping"></div>
|
||||
)}
|
||||
{index < currentAgentIndex && (
|
||||
<div className="absolute -bottom-1 -right-1 w-3 h-3 bg-green-400 rounded-full">
|
||||
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className={`text-xs text-center line-clamp-2 ${
|
||||
index < currentAgentIndex ? 'text-green-400' :
|
||||
index === currentAgentIndex ? 'text-blue-400' :
|
||||
'text-gray-500'
|
||||
}`}>{agent.name}</span>
|
||||
|
||||
<div className={`w-full h-1 rounded-full mt-1 ${
|
||||
index < currentAgentIndex ? 'bg-green-500' :
|
||||
index === currentAgentIndex ? 'bg-blue-500' :
|
||||
'bg-gray-700'
|
||||
}`}>
|
||||
{index === currentAgentIndex && (
|
||||
<div className="h-full bg-blue-400 rounded-full animate-pulse"
|
||||
style={{width: '50%'}}></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-center text-xs text-gray-400">
|
||||
总进度: {Math.round(((currentAgentIndex + 1) / agentSequence.length) * 100)}% |
|
||||
当前阶段: {currentAgentIndex >= 0 && currentAgentIndex < agentSequence.length ? agentSequence[currentAgentIndex]?.agent.name : '初始化中...'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkflowPageV3;
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useDemoStore } from '@/store/demoStore';
|
||||
import { Play, Pause, RotateCcw, Maximize2, Terminal, FileInput, Eye } from 'lucide-react';
|
||||
@@ -37,7 +37,7 @@ const generateFileSize = () => {
|
||||
};
|
||||
|
||||
const WorkflowPageV4 = () => {
|
||||
const { agents, startDemo, pauseDemo, reset, status, setSelectedOrderClass, selectedOrderClass } = useDemoStore();
|
||||
const { agents, startDemo, pauseDemo, resumeDemo, reset, status, setSelectedOrderClass, selectedOrderClass } = useDemoStore();
|
||||
const [terminalLines, setTerminalLines] = useState<TerminalLine[]>([]);
|
||||
const [currentAgentIndex, setCurrentAgentIndex] = useState(-1);
|
||||
const [elapsedTime, setElapsedTime] = useState(0);
|
||||
@@ -48,6 +48,9 @@ const WorkflowPageV4 = () => {
|
||||
const [imageLoadingStates, setImageLoadingStates] = useState<{ [key: string]: boolean }>({});
|
||||
const [logoClickCount, setLogoClickCount] = useState(0);
|
||||
const [showFloatingButton, setShowFloatingButton] = useState(false);
|
||||
const [terminalData, setTerminalData] = useState<any>(null);
|
||||
const [loadingData, setLoadingData] = useState(false);
|
||||
const [dataLoadError, setDataLoadError] = useState<string | null>(null);
|
||||
const terminalRef = useRef<HTMLDivElement>(null);
|
||||
const intervalRef = useRef<number | null>(null);
|
||||
const progressLineIdRef = useRef<string | null>(null);
|
||||
@@ -494,7 +497,7 @@ const WorkflowPageV4 = () => {
|
||||
];
|
||||
|
||||
// 添加终端行
|
||||
const addTerminalLine = (line: Omit<TerminalLine, 'id' | 'timestamp'>) => {
|
||||
const addTerminalLine = useCallback((line: Omit<TerminalLine, 'id' | 'timestamp'>) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;
|
||||
|
||||
@@ -522,10 +525,10 @@ const WorkflowPageV4 = () => {
|
||||
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 更新进度条行(覆盖同一行)
|
||||
const updateProgressLine = (content: string, progressId: string) => {
|
||||
const updateProgressLine = useCallback((content: string, progressId: string) => {
|
||||
const now = new Date();
|
||||
const timestamp = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;
|
||||
|
||||
@@ -542,10 +545,10 @@ const WorkflowPageV4 = () => {
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 执行进度条动画(带卡顿效果)
|
||||
const executeProgress = async (label: string, stutters: number[] = [], agent?: string) => {
|
||||
const executeProgress = useCallback(async (label: string, stutters: number[] = [], agent?: string) => {
|
||||
const progressId = Math.random().toString(36).substr(2, 9);
|
||||
progressLineIdRef.current = progressId;
|
||||
|
||||
@@ -589,18 +592,27 @@ const WorkflowPageV4 = () => {
|
||||
|
||||
// 完成后清除引用
|
||||
progressLineIdRef.current = null;
|
||||
};
|
||||
}, [updateProgressLine]);
|
||||
|
||||
// 执行启动序列
|
||||
const executeStartupSequence = async () => {
|
||||
for (const line of startupSequence) {
|
||||
const executeStartupSequence = useCallback(async () => {
|
||||
console.log('🚀 executeStartupSequence called');
|
||||
console.log(' - terminalData:', terminalData);
|
||||
|
||||
// 使用加载的数据或默认数据
|
||||
const currentTerminalData = terminalData;
|
||||
const sequence = currentTerminalData?.startupSequence || startupSequence;
|
||||
console.log(' - using sequence length:', sequence?.length);
|
||||
|
||||
for (const line of sequence) {
|
||||
if (status !== 'running') return;
|
||||
|
||||
if (line.type === 'progress') {
|
||||
// 进度条动画
|
||||
const target = (line as any).target || 100;
|
||||
const label = line.content;
|
||||
await executeProgress(label, [23, 67, 89]);
|
||||
const stutters = (line as any).stutters || [23, 67, 89];
|
||||
await executeProgress(label, stutters);
|
||||
} else {
|
||||
addTerminalLine(line as any);
|
||||
await new Promise(resolve => setTimeout(resolve, getRandomDelay(50, 200)));
|
||||
@@ -609,38 +621,36 @@ const WorkflowPageV4 = () => {
|
||||
|
||||
// 开始执行Agent
|
||||
setCurrentAgentIndex(0);
|
||||
};
|
||||
}, [terminalData, status, addTerminalLine, executeProgress]);
|
||||
|
||||
// 执行Agent
|
||||
const executeAgent = async (agentIndex: number) => {
|
||||
if (agentIndex >= agentSequence.length) {
|
||||
const executeAgent = useCallback(async (agentIndex: number) => {
|
||||
// 使用加载的数据或默认数据
|
||||
const currentTerminalData = terminalData;
|
||||
const sequence = currentTerminalData?.agents || agentSequence;
|
||||
|
||||
if (agentIndex >= sequence.length) {
|
||||
// 所有Agent执行完成
|
||||
setIsExecuting(false);
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: '=' .repeat(60)
|
||||
});
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: 'ALL AGENTS COMPLETED SUCCESSFULLY'
|
||||
});
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: `Total execution time: 3m 00s | Peak memory: 512MB`
|
||||
});
|
||||
addTerminalLine({
|
||||
type: 'system',
|
||||
content: '=' .repeat(60)
|
||||
});
|
||||
|
||||
// 使用加载的完成序列或默认序列
|
||||
const completionSeq = currentTerminalData?.completionSequence || [
|
||||
{ type: 'system', content: '=' .repeat(60) },
|
||||
{ type: 'system', content: 'ALL AGENTS COMPLETED SUCCESSFULLY' },
|
||||
{ type: 'system', content: `Total execution time: 3m 00s | Peak memory: 512MB` },
|
||||
{ type: 'system', content: '=' .repeat(60) }
|
||||
];
|
||||
|
||||
for (const line of completionSeq) {
|
||||
addTerminalLine(line);
|
||||
}
|
||||
|
||||
// 更新store状态为完成
|
||||
const store = useDemoStore.getState();
|
||||
store.setProgress(100);
|
||||
|
||||
// 显示结果弹窗
|
||||
console.log('All agents completed, showing result modal...');
|
||||
setTimeout(() => {
|
||||
console.log('Setting showResultModal to true');
|
||||
setShowResultModal(true);
|
||||
setShowFloatingButton(true);
|
||||
}, 2000);
|
||||
@@ -648,7 +658,7 @@ const WorkflowPageV4 = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const agentData = agentSequence[agentIndex];
|
||||
const agentData = sequence[agentIndex];
|
||||
|
||||
for (const output of agentData.outputs) {
|
||||
if (status !== 'running') return;
|
||||
@@ -656,11 +666,11 @@ const WorkflowPageV4 = () => {
|
||||
if (output.type === 'progress') {
|
||||
// 进度条动画(带卡顿)
|
||||
const stutters = (output as any).stutters || [];
|
||||
await executeProgress(output.content, stutters, agentData.agent.name);
|
||||
await executeProgress(output.content, stutters, agentData.name);
|
||||
} else {
|
||||
addTerminalLine({
|
||||
...output,
|
||||
agent: output.type === 'system' ? undefined : agentData.agent.name
|
||||
agent: output.type === 'system' ? undefined : agentData.name
|
||||
});
|
||||
|
||||
// 根据类型设置延迟
|
||||
@@ -683,7 +693,7 @@ const WorkflowPageV4 = () => {
|
||||
// 执行下一个Agent
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
setCurrentAgentIndex(agentIndex + 1);
|
||||
};
|
||||
}, [terminalData, status, addTerminalLine]);
|
||||
|
||||
// 开始演示
|
||||
useEffect(() => {
|
||||
@@ -691,42 +701,114 @@ const WorkflowPageV4 = () => {
|
||||
setIsExecuting(true);
|
||||
executeStartupSequence();
|
||||
}
|
||||
}, [status]);
|
||||
}, [status, isExecuting, executeStartupSequence]);
|
||||
|
||||
// 监听Agent变化
|
||||
useEffect(() => {
|
||||
if (status === 'running' && currentAgentIndex >= 0) {
|
||||
executeAgent(currentAgentIndex);
|
||||
}
|
||||
}, [currentAgentIndex]);
|
||||
|
||||
}, [currentAgentIndex, executeAgent, status]);
|
||||
|
||||
// 计时器
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
if (status === 'running') {
|
||||
intervalRef.current = window.setInterval(() => {
|
||||
setElapsedTime(prev => prev + 100);
|
||||
}, 100);
|
||||
} else {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
interval = setInterval(() => {
|
||||
setElapsedTime(prev => prev + 1);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
}
|
||||
};
|
||||
return () => clearInterval(interval);
|
||||
}, [status]);
|
||||
|
||||
// 加载终端数据 - 使用新的TSX模拟系统
|
||||
const loadTerminalData = async (orderClassId: string) => {
|
||||
console.log('🔍 loadTerminalData called with:', orderClassId);
|
||||
console.log('🔍 Current agents:', agents);
|
||||
|
||||
setLoadingData(true);
|
||||
setDataLoadError(null);
|
||||
|
||||
try {
|
||||
// 使用新的TSX模拟系统
|
||||
console.log('🔍 Importing terminalSimulations...');
|
||||
const { getSimulationData } = await import('@/data/terminalSimulations');
|
||||
console.log('🔍 getSimulationData imported successfully');
|
||||
|
||||
const simulationData = getSimulationData(orderClassId, agents);
|
||||
console.log('🔍 simulationData result:', simulationData);
|
||||
|
||||
if (!simulationData) {
|
||||
// 如果没有对应的模拟数据
|
||||
console.log('⚠️ No simulation data found for:', orderClassId);
|
||||
setTerminalData(null);
|
||||
setDataLoadError(`暂无${orderClassId}订单班的演示数据,目前仅支持文旅和食品订单班`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 转换数据格式以兼容现有的终端系统
|
||||
console.log('🔄 Converting simulation data...');
|
||||
console.log(' - startupSequence length:', simulationData.startupSequence?.length);
|
||||
console.log(' - agentSequence length:', simulationData.agentSequence?.length);
|
||||
console.log(' - completionSequence length:', simulationData.completionSequence?.length);
|
||||
|
||||
const terminalData = {
|
||||
startupSequence: simulationData.startupSequence,
|
||||
agents: simulationData.agentSequence.map((seq, index) => {
|
||||
const agent = seq.agent();
|
||||
console.log(` - Agent ${index}:`, agent?.name || 'undefined');
|
||||
return {
|
||||
id: agent.id,
|
||||
name: agent.name,
|
||||
icon: agent.icon,
|
||||
avatar: agent.avatar,
|
||||
outputs: seq.outputs
|
||||
};
|
||||
}),
|
||||
completionSequence: simulationData.completionSequence
|
||||
};
|
||||
console.log('✅ Terminal data converted successfully');
|
||||
|
||||
setTerminalData(terminalData);
|
||||
return true;
|
||||
} catch (error) {
|
||||
// 静默处理错误,通过状态反馈给用户
|
||||
console.error('❌ Error loading terminal data:', error);
|
||||
setTerminalData(null);
|
||||
setDataLoadError('加载数据失败,请稍后重试');
|
||||
return false;
|
||||
} finally {
|
||||
setLoadingData(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理需求提交
|
||||
const handleRequirementSubmit = (requirement: string, orderClass: string) => {
|
||||
const handleRequirementSubmit = async (requirement: string, orderClass: string) => {
|
||||
console.log('📋 handleRequirementSubmit called with:', { requirement, orderClass });
|
||||
|
||||
setUserRequirement(requirement);
|
||||
setSelectedOrderClass(orderClass);
|
||||
setShowRequirementModal(false);
|
||||
// 开始演示
|
||||
startDemo();
|
||||
|
||||
// 加载对应订单班的数据
|
||||
console.log('🔄 Loading terminal data for order class:', orderClass);
|
||||
const dataLoaded = await loadTerminalData(orderClass);
|
||||
console.log('📊 Data loaded result:', dataLoaded);
|
||||
|
||||
if (dataLoaded) {
|
||||
// 数据加载成功,开始演示
|
||||
startDemo();
|
||||
} else {
|
||||
// 数据加载失败,显示提示
|
||||
setTerminalLines([
|
||||
{
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
timestamp: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
|
||||
type: 'warning',
|
||||
content: dataLoadError || '暂无演示数据'
|
||||
}
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理查看详情
|
||||
@@ -743,14 +825,18 @@ const WorkflowPageV4 = () => {
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
console.log('🔄 Reset button clicked');
|
||||
reset();
|
||||
setTerminalLines([]);
|
||||
setCurrentAgentIndex(-1);
|
||||
setElapsedTime(0);
|
||||
setIsExecuting(false);
|
||||
setUserRequirement('');
|
||||
setSelectedOrderClass('');
|
||||
setTerminalData(null); // 清除加载的数据
|
||||
setShowResultModal(false);
|
||||
setShowFloatingButton(false);
|
||||
console.log('✅ Reset completed');
|
||||
};
|
||||
|
||||
// Logo三击处理
|
||||
@@ -834,7 +920,15 @@ const WorkflowPageV4 = () => {
|
||||
<h1 className="text-lg font-semibold text-gray-900">多智能体协同生成·专业方案</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={status === 'idle' ? () => setShowRequirementModal(true) : pauseDemo}
|
||||
onClick={() => {
|
||||
if (status === 'idle') {
|
||||
setShowRequirementModal(true);
|
||||
} else if (status === 'paused') {
|
||||
resumeDemo();
|
||||
} else if (status === 'running') {
|
||||
pauseDemo();
|
||||
}
|
||||
}}
|
||||
className="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
{status === 'idle' ? (
|
||||
@@ -1015,10 +1109,23 @@ const WorkflowPageV4 = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Agent状态栏 */}
|
||||
<div className="px-4 py-3 bg-gray-800 border-t border-gray-700">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{agents.map((agent, index) => (
|
||||
{/* Agent状态栏 - 只在选择订单班后显示 */}
|
||||
{!selectedOrderClass || !terminalData ? (
|
||||
<div className="px-4 py-6 bg-gray-800 border-t border-gray-700">
|
||||
<div className="text-center text-gray-500">
|
||||
<div className="mb-2">
|
||||
<svg className="w-12 h-12 mx-auto text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm">请先选择订单班开始演示</p>
|
||||
<p className="text-xs mt-1 text-gray-600">每个订单班都有专属的AI专家团队</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-4 py-3 bg-gray-800 border-t border-gray-700">
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{terminalData.agents.map((agent, index) => (
|
||||
<div
|
||||
key={agent.id}
|
||||
className={`flex flex-col items-center gap-1 px-2 py-2 rounded-lg transition-all ${
|
||||
@@ -1081,10 +1188,11 @@ const WorkflowPageV4 = () => {
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-2 text-center text-xs text-gray-400">
|
||||
总进度: {currentAgentIndex === -1 ? 0 : Math.round(((currentAgentIndex) / agentSequence.length) * 100)}% |
|
||||
当前阶段: {currentAgentIndex >= 0 && currentAgentIndex < agentSequence.length ? agentSequence[currentAgentIndex]?.agent.name : currentAgentIndex === -1 ? '初始化中...' : '已完成'}
|
||||
总进度: {currentAgentIndex === -1 ? 0 : Math.round(((currentAgentIndex) / terminalData.agents.length) * 100)}% |
|
||||
当前阶段: {currentAgentIndex >= 0 && currentAgentIndex < terminalData.agents.length ? terminalData.agents[currentAgentIndex]?.name : currentAgentIndex === -1 ? '初始化中...' : '已完成'}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||