69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
|
# 会展策划多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演示系统开发（当前分支）
|