n8n_Demo/web_frontend/exhibition-demo/README.md

# 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