# AI 会展策划系统 - 多Agent协同演示

## 🚀 项目概述

这是一个基于React构建的多Agent协同演示系统，展示了7个专业AI Agent如何协同工作，生成完整的会展策划方案。设计风格参考了字节跳动、Flowith、Raycast等现代化产品。

## ✨ 核心特性

- **7个专业Agent**：信息检索、设计、财务预算、格式编辑、活动执行、营销宣传、中央协调
- **实时工作流可视化**：动态展示Agent协作流程
- **打字机效果**：30-40字/秒的文字生成动画
- **现代化UI设计**：简洁、实用、年轻化的界面风格
- **完整演示流程**：约3分钟完整展示策划方案生成过程

## 🛠 技术栈

- **框架**: React 18 + TypeScript
- **样式**: Tailwind CSS
- **动画**: Framer Motion
- **状态管理**: Zustand
- **构建工具**: Vite

## 📦 安装与运行

### 前置要求

- Node.js >= 16.0.0
- npm >= 7.0.0 或 pnpm >= 6.0.0

### 安装步骤

```bash
# 进入项目目录
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
```

## 📁 项目结构

```
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配置
```

## 🎯 使用说明

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

## 🎨 设计特点

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

## 📊 演示内容

演示案例为"2024长三角国际新能源汽车与智能交通产业博览会"，包含：

1. **策划案概述**
2. **展会介绍与预期效果**
3. **营销方案**
4. **现场运营方案**
5. **预算与收益分析**
6. **风险评估与应急预案**

## 🔧 配置说明

### 调整演示速度

在 `src/store/demoStore.ts` 中修改：

```typescript
controls: {
  speed: 1, // 1-5倍速
  // ...
}
```

### 修改文字生成速度

在组件中调整 `speed` 参数（默认35字/秒）

## 🤝 贡献指南

欢迎提交Issue和Pull Request来改进项目。

## 📝 许可证

MIT License

## 🙏 致谢

- n8n Workflow Platform
- DeepSeek AI
- Google Gemini
- 所有开源项目贡献者

---

如有问题，请联系项目维护者。