fix: 修复Agent头像显示和结果弹窗问题

主要修复: - 恢复Agent真实头像显示（替换emoji为实际图片） - 删除自动跳转到ResultPageV2的逻辑 - 修改ResultModal支持动态内容显示 - 根据不同订单班显示对应的方案信息优化内容: - 重构Agent系统，每个订单班独立管理Agent配置 - 删除不需要的ResultPageV2组件 - handleViewDetails改为在新标签页打开影响模块: - web_frontend/exhibition-demo/src/components/ResultModal.tsx - web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx - web_frontend/exhibition-demo/src/App.tsx - web_frontend/exhibition-demo/src/data/terminalSimulations/*.ts 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-29 20:12:57 +08:00
parent a884afc494
commit 0d96ffd429
991 changed files with 113654 additions and 1303 deletions
--- a/web_frontend/exhibition-demo/README.md
+++ b/web_frontend/exhibition-demo/README.md
@@ -1,63 +1,75 @@
-# AI 会展策划系统 - 多Agent协同演示
+# AI 多智能体协同展示系统

 ## 🚀 项目概述

-这是一个基于React构建的多Agent协同演示系统，展示了7个专业AI Agent如何协同工作，生成完整的会展策划方案。设计风格参考了字节跳动、Flowith、Raycast等现代化产品。
+一个基于 React + TypeScript 构建的多智能体协同演示系统，支持12个专业领域的AI Agent协同工作，通过可视化终端和动态工作流展示智能体之间的协作过程。系统采用苹果风格设计语言，提供流畅的用户体验。

 ## ✨ 核心特性

- **7个专业Agent**：信息检索、设计、财务预算、格式编辑、活动执行、营销宣传、中央协调
- **实时工作流可视化**：动态展示Agent协作流程
- **打字机效果**：30-40字/秒的文字生成动画
- **现代化UI设计**：简洁、实用、年轻化的界面风格
- **完整演示流程**：约3分钟完整展示策划方案生成过程
+### 🎯 多订单班系统
+- **12个专业领域**：食品、文旅、财经商贸、智能开发、智能制造、视觉设计、交通物流、土木、大健康、能源、化工、环保
+- **动态内容加载**：根据选择的订单班自动加载对应的Agent配置和演示内容
+- **个性化主题**：每个订单班拥有独特的颜色主题和图标系统
+
+### 🤖 智能体系统
+- **多Agent协同**：每个订单班配置3-7个专业Agent
+- **实时协作演示**：展示Agent间的任务分配和协作流程
+- **终端模拟**：逼真的命令行终端效果，实时显示Agent执行进度
+
+### 💎 界面设计
+- **苹果风格UI**：简洁优雅的设计语言
+- **玻璃态效果**：现代化的毛玻璃背景和卡片设计
+- **动态视频Logo**：集成动态视频元素提升视觉体验
+- **响应式布局**：完美适配不同屏幕尺寸
+
+### 🎬 动画效果
+- **Framer Motion动画**：流畅的页面过渡和元素动画
+- **打字机效果**：逼真的文字生成动画
+- **3D卡片效果**：hover时的旋转和浮动效果
+- **脉冲光晕**：选中状态的动态视觉反馈

 ## 🛠 技术栈

 - **框架**: React 18 + TypeScript
- **样式**: Tailwind CSS
+- **样式**: Tailwind CSS + CSS Variables
 - **动画**: Framer Motion
- **状态管理**: Zustand
- **构建工具**: Vite
+- **图标**: Lucide React
+- **构建**: Vite
+- **代码质量**: ESLint + TypeScript

 ## 📦 安装与运行

 ### 前置要求

 - Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0
+- pnpm >= 6.0.0（推荐）或 npm >= 7.0.0

 ### 安装步骤

 ```bash
+# 克隆项目
+git clone [repository-url]
+
 # 进入项目目录
 cd web_frontend/exhibition-demo

 # 安装依赖（推荐使用pnpm）
 pnpm install
-# 或使用npm
-npm install

 # 启动开发服务器
 pnpm dev
-# 或
-npm run dev
 ```

 开发服务器将在 `http://localhost:5173` 启动

-### 构建生产版本
+### 生产构建

 ```bash
-# 构建项目
+# 构建生产版本
 pnpm build
-# 或
-npm run build

 # 预览构建结果
 pnpm preview
-# 或
-npm run preview
 ```

 ## 📁 项目结构
@@ -65,75 +77,114 @@ npm run preview
 ```
 exhibition-demo/
 ├── src/
-│   ├── components/        # React组件
-│   │   ├── AgentCard.tsx         # Agent卡片组件
-│   │   ├── ContentGenerator.tsx   # 内容生成器
-│   │   ├── ProgressBar.tsx       # 进度条
-│   │   └── WorkflowVisualization.tsx  # 工作流可视化
-│   ├── pages/            # 页面组件
-│   │   ├── LandingPage.tsx       # 启动页
-│   │   ├── WorkflowPage.tsx      # 工作流演示页
-│   │   └── ResultPage.tsx        # 结果展示页
-│   ├── store/            # 状态管理
-│   │   └── demoStore.ts          # Zustand store
-│   ├── styles/           # 样式文件
-│   ├── utils/            # 工具函数
-│   ├── App.tsx          # 主应用组件
-│   ├── main.tsx         # 入口文件
-│   └── index.css        # 全局样式
-├── public/              # 静态资源
-├── index.html           # HTML模板
-├── package.json         # 项目配置
-├── tailwind.config.js   # Tailwind配置
-├── vite.config.ts       # Vite配置
-└── tsconfig.json        # TypeScript配置
+│   ├── components/             # React组件
+│   │   ├── RequirementModal.tsx      # 需求输入弹窗（苹果风格）
+│   │   ├── OrderClassIcons.tsx       # 订单班图标映射
+│   │   ├── ContentGenerator.tsx      # 内容生成器
+│   │   └── WorkflowVisualization.tsx # 工作流可视化
+│   ├── pages/                  # 页面组件
+│   │   ├── LandingPage.tsx          # 启动页（蓝色主题）
+│   │   ├── WorkflowPageV4.tsx       # 工作流演示页（最新版）
+│   │   └── ResultPageV2.tsx         # 结果展示页（优化版）
+│   ├── data/                   # 数据文件
+│   │   ├── orderClasses.json        # 12个订单班配置
+│   │   └── terminalSimulations/     # 终端模拟数据（TypeScript）
+│   │       ├── index.ts             # 数据导出入口
+│   │       ├── wenlu.ts             # 文旅订单班数据
+│   │       └── food.ts              # 食品订单班数据
+│   ├── store/                  # 状态管理
+│   │   └── demoStore.ts             # Zustand状态管理
+│   ├── utils/                  # 工具函数
+│   ├── App.tsx                # 主应用组件
+│   └── main.tsx               # 应用入口
+├── public/
+│   └── image/                 # 静态图片资源
+│       └── bg.png                   # 背景图片
+├── package.json               # 项目配置
+├── vite.config.ts            # Vite配置
+├── tailwind.config.js        # Tailwind配置
+└── tsconfig.json             # TypeScript配置
 ```

-## 🎯 使用说明
+## 🎯 使用指南

-1. **启动演示**：访问首页，点击"开始演示"按钮
-2. **观看流程**：系统将自动展示Agent协作过程
-3. **查看结果**：演示完成后，可以浏览完整的策划方案
-4. **控制选项**：支持暂停/继续/重新开始
+### 基本流程

-## 🎨 设计特点
+1. **访问首页**：打开系统看到蓝色主题的启动页
+2. **输入需求**：点击"开始体验"，在弹窗中选择订单班并输入需求
+3. **观看演示**：系统自动展示Agent协作过程，包括：
+   - 终端命令执行动画
+   - Agent卡片状态变化
+   - 实时进度展示
+4. **查看结果**：演示完成后查看生成的完整方案

- **Glass Morphism**：玻璃态效果，增强层次感
- **渐变色彩**：蓝紫渐变主题，科技感十足
- **微动画**：精致的过渡和交互动画
- **响应式布局**：适配不同屏幕尺寸
+### URL参数支持

-## 📊 演示内容
+支持通过URL参数直接访问特定订单班：
+```
+http://localhost:5173/workflow?orderClass=food
+http://localhost:5173/workflow?orderClass=wenlu
+```

-演示案例为"2024长三角国际新能源汽车与智能交通产业博览会"，包含：
+## 🎨 设计系统

-1. **策划案概述**
-2. **展会介绍与预期效果**
-3. **营销方案**
-4. **现场运营方案**
-5. **预算与收益分析**
-6. **风险评估与应急预案**
+### 颜色主题
+
+每个订单班都有独特的主题色：
+- 🍔 食品 - 橙色 (#f97316)
+- 🌍 文旅 - 翠绿 (#10b981)
+- 💰 财经商贸 - 蓝色 (#3b82f6)
+- 💻 智能开发 - 紫色 (#8b5cf6)
+- 🏭 智能制造 - 灰色 (#6b7280)
+- 🎨 视觉设计 - 粉色 (#ec4899)
+- 🚚 交通物流 - 靛蓝 (#6366f1)
+- 🏗️ 土木 - 黄色 (#eab308)
+- ❤️ 大健康 - 红色 (#ef4444)
+- ⚡ 能源 - 绿色 (#22c55e)
+- ⚗️ 化工 - 青色 (#14b8a6)
+- 🌿 环保 - 青柠 (#84cc16)
+
+### UI组件特性
+
+- **需求输入弹窗**：苹果风格设计，带视频Logo和背景图
+- **订单班选择卡片**：3D悬浮效果，选中时有脉冲光晕
+- **终端窗口**：逼真的命令行界面，支持彩色输出
+- **Agent卡片**：状态指示器，执行时有动画效果

 ## 🔧 配置说明

-### 调整演示速度
+### 添加新的订单班

-在 `src/store/demoStore.ts` 中修改：
+1. 在 `src/data/orderClasses.json` 中添加配置
+2. 在 `src/data/terminalSimulations/` 创建对应的TypeScript文件
+3. 在 `src/components/OrderClassIcons.tsx` 中映射图标

+### 调整动画速度
+
+修改 `src/pages/WorkflowPageV4.tsx` 中的常量：
 ```typescript
-controls: {
-  speed: 1, // 1-5倍速
-  // ...
-}
+const CHARS_PER_SECOND = 35; // 打字速度
+const LINE_DELAY = 100;      // 行间延迟
 ```

-### 修改文字生成速度
+## 🚀 最近更新

-在组件中调整 `speed` 参数（默认35字/秒）
+- ✅ 实现12个订单班系统
+- ✅ 升级为苹果风格UI设计
+- ✅ 添加动态视频Logo
+- ✅ 优化订单班选择卡片交互
+- ✅ 统一使用蓝色主题
+- ✅ 迁移到TypeScript数据管理
+- ✅ 清理旧版本代码和未使用文件
+- ✅ 增强标题字体大小和图标

 ## 🤝 贡献指南

-欢迎提交Issue和Pull Request来改进项目。
+1. Fork 项目
+2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 创建 Pull Request

 ## 📝 许可证

@@ -142,10 +193,12 @@ MIT License
 ## 🙏 致谢

 - n8n Workflow Platform
- DeepSeek AI
- Google Gemini
- 所有开源项目贡献者
+- React & TypeScript Community
+- Tailwind CSS Team
+- Framer Motion
+- 所有开源贡献者

 ---

-如有问题，请联系项目维护者。
+**项目维护**: 2024-2025
+**最后更新**: 2025-09-29