# 会展策划多Agent演示系统项目 - 2025-09-08

## 项目概述
构建一个基于React的Web演示系统，实时展示多Agent协同生成会展策划方案的完整过程。

## 技术栈决策
- **框架**: React 18 + TypeScript
- **动画**: Framer Motion + CSS Animations
- **样式**: Tailwind CSS (参考字节跳动、Flowith、Raycast设计风格)
- **状态管理**: Zustand
- **构建工具**: Vite

## 项目文件结构
```
web_frontend/
├── data/
│   ├── Agent_prompt/         # 7个专业Agent的prompt文档
│   │   ├── 信息检索专家.md
│   │   ├── 格式编辑专家.md
│   │   ├── 会展策划专家.md
│   │   ├── 设计师专家.md
│   │   ├── 财务预算专家.md
│   │   ├── 活动执行专家.md
│   │   └── 营销宣传专家.md
│   └── 会展策划/
│       └── 汽车展会展策划案_DEMO.md  # 演示输出文档
├── doc/
│   ├── 可行性分析.md         # 技术实施方案
│   └── 会展策划工作流.md     # n8n工作流程图
└── exhibition-demo/          # React演示系统
```

## 演示参数
- **总时长**: 3分钟
- **文字生成速度**: 30-40字/秒
- **Agent Prompt展示**: 完整展示，逐步显示
- **交互控制**: 暂时不支持跳过，保证演示完整性

## 内容板块（6个独立页面）
1. 策划案
2. 展会介绍与预期效果
3. 营销方案
4. 现场运营方案
5. 预算与收益分析
6. 风险评估与应急预案

## 演示流程设计
1. 初始页面：展示Run按钮
2. 点击Run：开始执行mermaid流程
3. 每个Agent独立输出：
   - 显示Agent头像和名称
   - 展示Agent的Prompt
   - 逐字生成文字内容（打字机效果）
   - 图片加载时显示loading动画
4. 生成完成后自动切换到下一个页面

## 设计风格
- **视觉风格**: 简洁实用、年轻化、高端感
- **参考产品**: 火山引擎、Trea、Flowith、Raycast
- **核心特征**: 
  - 精致的微动画
  - 清晰的信息层级
  - 中性色调搭配品牌色
  - 优雅的过渡效果

## Git分支管理
- **Main**: 主分支（已同步到Gitea）
- **My_N8N**: n8n中文翻译功能
- **Web_Create**: AgentDemo演示系统开发（当前分支）