0d96ffd429
主要修复: - 恢复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>
204 lines
6.4 KiB
Markdown
204 lines
6.4 KiB
Markdown
# AI 多智能体协同展示系统
|
||
|
||
## 🚀 项目概述
|
||
|
||
一个基于 React + TypeScript 构建的多智能体协同演示系统，支持12个专业领域的AI Agent协同工作，通过可视化终端和动态工作流展示智能体之间的协作过程。系统采用苹果风格设计语言，提供流畅的用户体验。
|
||
|
||
## ✨ 核心特性
|
||
|
||
### 🎯 多订单班系统
|
||
- **12个专业领域**：食品、文旅、财经商贸、智能开发、智能制造、视觉设计、交通物流、土木、大健康、能源、化工、环保
|
||
- **动态内容加载**：根据选择的订单班自动加载对应的Agent配置和演示内容
|
||
- **个性化主题**：每个订单班拥有独特的颜色主题和图标系统
|
||
|
||
### 🤖 智能体系统
|
||
- **多Agent协同**：每个订单班配置3-7个专业Agent
|
||
- **实时协作演示**：展示Agent间的任务分配和协作流程
|
||
- **终端模拟**：逼真的命令行终端效果，实时显示Agent执行进度
|
||
|
||
### 💎 界面设计
|
||
- **苹果风格UI**：简洁优雅的设计语言
|
||
- **玻璃态效果**：现代化的毛玻璃背景和卡片设计
|
||
- **动态视频Logo**：集成动态视频元素提升视觉体验
|
||
- **响应式布局**：完美适配不同屏幕尺寸
|
||
|
||
### 🎬 动画效果
|
||
- **Framer Motion动画**：流畅的页面过渡和元素动画
|
||
- **打字机效果**：逼真的文字生成动画
|
||
- **3D卡片效果**：hover时的旋转和浮动效果
|
||
- **脉冲光晕**：选中状态的动态视觉反馈
|
||
|
||
## 🛠 技术栈
|
||
|
||
- **框架**: React 18 + TypeScript
|
||
- **样式**: Tailwind CSS + CSS Variables
|
||
- **动画**: Framer Motion
|
||
- **图标**: Lucide React
|
||
- **构建**: Vite
|
||
- **代码质量**: ESLint + TypeScript
|
||
|
||
## 📦 安装与运行
|
||
|
||
### 前置要求
|
||
|
||
- Node.js >= 16.0.0
|
||
- pnpm >= 6.0.0（推荐）或 npm >= 7.0.0
|
||
|
||
### 安装步骤
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone [repository-url]
|
||
|
||
# 进入项目目录
|
||
cd web_frontend/exhibition-demo
|
||
|
||
# 安装依赖（推荐使用pnpm）
|
||
pnpm install
|
||
|
||
# 启动开发服务器
|
||
pnpm dev
|
||
```
|
||
|
||
开发服务器将在 `http://localhost:5173` 启动
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
# 构建生产版本
|
||
pnpm build
|
||
|
||
# 预览构建结果
|
||
pnpm preview
|
||
```
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
exhibition-demo/
|
||
├── src/
|
||
│ ├── 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. **输入需求**：点击"开始体验"，在弹窗中选择订单班并输入需求
|
||
3. **观看演示**：系统自动展示Agent协作过程，包括：
|
||
- 终端命令执行动画
|
||
- Agent卡片状态变化
|
||
- 实时进度展示
|
||
4. **查看结果**：演示完成后查看生成的完整方案
|
||
|
||
### URL参数支持
|
||
|
||
支持通过URL参数直接访问特定订单班：
|
||
```
|
||
http://localhost:5173/workflow?orderClass=food
|
||
http://localhost:5173/workflow?orderClass=wenlu
|
||
```
|
||
|
||
## 🎨 设计系统
|
||
|
||
### 颜色主题
|
||
|
||
每个订单班都有独特的主题色：
|
||
- 🍔 食品 - 橙色 (#f97316)
|
||
- 🌍 文旅 - 翠绿 (#10b981)
|
||
- 💰 财经商贸 - 蓝色 (#3b82f6)
|
||
- 💻 智能开发 - 紫色 (#8b5cf6)
|
||
- 🏭 智能制造 - 灰色 (#6b7280)
|
||
- 🎨 视觉设计 - 粉色 (#ec4899)
|
||
- 🚚 交通物流 - 靛蓝 (#6366f1)
|
||
- 🏗️ 土木 - 黄色 (#eab308)
|
||
- ❤️ 大健康 - 红色 (#ef4444)
|
||
- ⚡ 能源 - 绿色 (#22c55e)
|
||
- ⚗️ 化工 - 青色 (#14b8a6)
|
||
- 🌿 环保 - 青柠 (#84cc16)
|
||
|
||
### UI组件特性
|
||
|
||
- **需求输入弹窗**：苹果风格设计，带视频Logo和背景图
|
||
- **订单班选择卡片**：3D悬浮效果，选中时有脉冲光晕
|
||
- **终端窗口**：逼真的命令行界面，支持彩色输出
|
||
- **Agent卡片**：状态指示器，执行时有动画效果
|
||
|
||
## 🔧 配置说明
|
||
|
||
### 添加新的订单班
|
||
|
||
1. 在 `src/data/orderClasses.json` 中添加配置
|
||
2. 在 `src/data/terminalSimulations/` 创建对应的TypeScript文件
|
||
3. 在 `src/components/OrderClassIcons.tsx` 中映射图标
|
||
|
||
### 调整动画速度
|
||
|
||
修改 `src/pages/WorkflowPageV4.tsx` 中的常量：
|
||
```typescript
|
||
const CHARS_PER_SECOND = 35; // 打字速度
|
||
const LINE_DELAY = 100; // 行间延迟
|
||
```
|
||
|
||
## 🚀 最近更新
|
||
|
||
- ✅ 实现12个订单班系统
|
||
- ✅ 升级为苹果风格UI设计
|
||
- ✅ 添加动态视频Logo
|
||
- ✅ 优化订单班选择卡片交互
|
||
- ✅ 统一使用蓝色主题
|
||
- ✅ 迁移到TypeScript数据管理
|
||
- ✅ 清理旧版本代码和未使用文件
|
||
- ✅ 增强标题字体大小和图标
|
||
|
||
## 🤝 贡献指南
|
||
|
||
1. Fork 项目
|
||
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
|
||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||
5. 创建 Pull Request
|
||
|
||
## 📝 许可证
|
||
|
||
MIT License
|
||
|
||
## 🙏 致谢
|
||
|
||
- n8n Workflow Platform
|
||
- React & TypeScript Community
|
||
- Tailwind CSS Team
|
||
- Framer Motion
|
||
- 所有开源贡献者
|
||
|
||
---
|
||
|
||
**项目维护**: 2024-2025
|
||
**最后更新**: 2025-09-29 |