1564396449
详细说明: - 添加了V2版本的工作流页面和结果页面 - 更新了Serena记忆文件 - 添加了详细实施计划文档 - 优化了Vite配置 - 更新了项目文档CLAUDE.md - 构建了演示系统的dist版本 - 包含了exhibition-demo的完整依赖
399 lines
13 KiB
Markdown
399 lines
13 KiB
Markdown
# AI会展策划多Agent演示系统 - 详细实施计划
|
||
|
||
## 一、系统架构设计
|
||
|
||
### 1.1 核心模块划分
|
||
|
||
```
|
||
演示系统
|
||
├── 启动页模块
|
||
│ ├── 系统介绍
|
||
│ ├── Agent团队展示
|
||
│ └── 开始演示入口
|
||
├── 工作流演示模块
|
||
│ ├── Agent协作可视化
|
||
│ ├── 执行状态管理
|
||
│ ├── 内容生成动画
|
||
│ └── 进度控制
|
||
└── 结果展示模块
|
||
├── 策划方案展示
|
||
├── 内容导航
|
||
└── 导出功能
|
||
```
|
||
|
||
### 1.2 数据流设计
|
||
|
||
```javascript
|
||
// 演示流程时序
|
||
const demoSequence = {
|
||
phase1: {
|
||
duration: 60000, // 60秒
|
||
agents: [
|
||
{
|
||
id: 'retrieval',
|
||
startTime: 0,
|
||
duration: 8000,
|
||
prompt: '分析2024长三角新能源汽车市场现状...',
|
||
output: '市场调研报告：\n1. 产业规模：...\n2. 主要企业：...'
|
||
},
|
||
{
|
||
id: 'design',
|
||
startTime: 2000,
|
||
duration: 8000,
|
||
prompt: '设计展会视觉方案和空间布局...',
|
||
output: '设计方案：\n1. 主视觉：科技蓝绿配色...\n2. 展区布局：...'
|
||
},
|
||
{
|
||
id: 'budget',
|
||
startTime: 4000,
|
||
duration: 8000,
|
||
prompt: '制定展会预算方案...',
|
||
output: '预算方案：\n总预算：900万元\n收入预期：1200万元...'
|
||
}
|
||
]
|
||
},
|
||
phase2: {
|
||
duration: 60000,
|
||
coordinator: {
|
||
startTime: 12000,
|
||
duration: 10000,
|
||
prompt: '整合各专家意见，形成初步方案...',
|
||
output: '综合方案框架已生成...'
|
||
}
|
||
},
|
||
phase3: {
|
||
duration: 60000,
|
||
agents: [
|
||
{
|
||
id: 'format',
|
||
startTime: 24000,
|
||
duration: 8000,
|
||
prompt: '优化文档格式和结构...',
|
||
output: '格式优化完成，生成标准策划文档...'
|
||
},
|
||
{
|
||
id: 'execution',
|
||
startTime: 26000,
|
||
duration: 8000,
|
||
prompt: '制定执行计划和时间表...',
|
||
output: '执行计划：\nD-90：启动招商\nD-60：媒体推广...'
|
||
},
|
||
{
|
||
id: 'marketing',
|
||
startTime: 28000,
|
||
duration: 8000,
|
||
prompt: '设计营销推广方案...',
|
||
output: '营销策略：\n1. 线上：社交媒体矩阵\n2. 线下：行业展会推广...'
|
||
}
|
||
]
|
||
}
|
||
};
|
||
```
|
||
|
||
## 二、界面详细设计
|
||
|
||
### 2.1 启动页设计
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────┐
|
||
│ │
|
||
│ [动画Logo] │
|
||
│ │
|
||
│ AI 会展策划多Agent系统 │
|
||
│ │
|
||
│ 7个专业Agent × 智能协作 × 3分钟演示 │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐ │
|
||
│ │ Agent 团队 │ │
|
||
│ │ 🔍信息检索 🎨设计 💰财务 📝格式 │ │
|
||
│ │ ⚡执行 📢营销 🎯协调 │ │
|
||
│ └────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────┐ │
|
||
│ │ 演示案例预览 │ │
|
||
│ │ 项目：2024长三角新能源汽车展 │ │
|
||
│ │ 规模：50,000㎡ | 350展商 | 50,000人次 │ │
|
||
│ │ 时长：约3分钟完整演示 │ │
|
||
│ └────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [✨ 开始演示] [📖 了解更多] │
|
||
│ │
|
||
└──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 工作流演示页设计
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────┐
|
||
│ AI会展策划系统 ⏸暂停 ↻重置 00:45 / 03:00 │
|
||
├──────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ┌─────────────── 工作流状态 ──────────────┐ │
|
||
│ │ │ │
|
||
│ │ ①──→②──→③ │ │
|
||
│ │ ↘ ↓ ↙ │ │
|
||
│ │ ⑦ │ │
|
||
│ │ ↗ ↑ ↖ │ │
|
||
│ │ ④──→⑤──→⑥ │ │
|
||
│ │ │ │
|
||
│ │ ① 信息检索 ✓ ④ 格式编辑 ⚡ │ │
|
||
│ │ ② 设计专家 ✓ ⑤ 执行专家 ○ │ │
|
||
│ │ ③ 财务预算 ✓ ⑥ 营销专家 ○ │ │
|
||
│ │ ⑦ 策划协调 ⚡ │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────── 当前执行 ────────────────┐ │
|
||
│ │ 📝 格式编辑专家 │ │
|
||
│ │ Model: DeepSeek Chat Model4 │ │
|
||
│ │ │ │
|
||
│ │ [Prompt] │ │
|
||
│ │ 请根据前期收集的信息，优化文档格式... │ │
|
||
│ │ 要求： │ │
|
||
│ │ 1. 标准化章节结构 │ │
|
||
│ │ 2. 统一术语表达█ │ │
|
||
│ │ │ │
|
||
│ │ [输出] │ │
|
||
│ │ 正在优化文档结构... │ │
|
||
│ │ ✓ 第一章：策划案概述 │ │
|
||
│ │ ⚡ 第二章：展会介绍█ │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌─────────────── 内容预览 ────────────────┐ │
|
||
│ │ 📄 策划案概述 [████████] 100% │ │
|
||
│ │ 📄 展会介绍 [████░░░░] 45% │ │
|
||
│ │ 📄 营销方案 [░░░░░░░░] 0% │ │
|
||
│ │ 📄 现场运营 [░░░░░░░░] 0% │ │
|
||
│ │ 📄 预算分析 [░░░░░░░░] 0% │ │
|
||
│ │ 📄 风险评估 [░░░░░░░░] 0% │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ │
|
||
│ 总进度 [████████████░░░░░░░░░░░░░░] 40% │
|
||
└──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.3 动画效果设计
|
||
|
||
#### 2.3.1 Agent激活动画
|
||
```javascript
|
||
// Agent节点激活效果
|
||
const agentActivation = {
|
||
idle: {
|
||
scale: 1,
|
||
opacity: 0.6,
|
||
border: '2px solid #e5e5e5'
|
||
},
|
||
active: {
|
||
scale: 1.2,
|
||
opacity: 1,
|
||
border: '3px solid #3b82f6',
|
||
animation: 'pulse 2s infinite',
|
||
glow: '0 0 20px rgba(59, 130, 246, 0.5)'
|
||
},
|
||
completed: {
|
||
scale: 1,
|
||
opacity: 1,
|
||
border: '2px solid #10b981',
|
||
checkmark: '✓'
|
||
}
|
||
};
|
||
```
|
||
|
||
#### 2.3.2 文字生成动画
|
||
```javascript
|
||
// 打字机效果配置
|
||
const typewriterConfig = {
|
||
speed: 35, // 35字/秒
|
||
cursor: '█',
|
||
cursorBlink: 500, // 光标闪烁间隔
|
||
lineDelay: 100, // 换行延迟
|
||
punctuationDelay: 200 // 标点停顿
|
||
};
|
||
```
|
||
|
||
#### 2.3.3 工作流连线动画
|
||
```javascript
|
||
// 数据流动效果
|
||
const flowAnimation = {
|
||
path: 'M0,0 L100,0',
|
||
strokeDasharray: '5,5',
|
||
animation: 'flow 2s linear infinite',
|
||
gradient: 'linear-gradient(90deg, #3b82f6, #8b5cf6)'
|
||
};
|
||
```
|
||
|
||
## 三、具体实现步骤
|
||
|
||
### Phase 1: 数据准备（30分钟）
|
||
|
||
1. **Agent Prompt数据**
|
||
```javascript
|
||
const agentPrompts = {
|
||
retrieval: {
|
||
prompt: `作为信息检索专家，请分析以下需求：
|
||
1. 调研长三角地区新能源汽车产业现状
|
||
2. 收集主要参展商信息
|
||
3. 分析竞品展会数据
|
||
输出格式：结构化的市场分析报告`,
|
||
expectedOutput: `市场分析报告：
|
||
一、产业现状
|
||
- 长三角新能源汽车产量占全国40%
|
||
- 主要企业：特斯拉、蔚来、理想等
|
||
二、参展商分析
|
||
- 预计参展企业350家
|
||
- 国际品牌占比30%`
|
||
},
|
||
// ... 其他6个Agent的prompt
|
||
};
|
||
```
|
||
|
||
2. **生成内容数据**
|
||
```javascript
|
||
const generatedContent = {
|
||
overview: {
|
||
title: '策划案概述',
|
||
sections: [
|
||
{
|
||
subtitle: '展会背景',
|
||
content: '在全球碳中和目标推动下...',
|
||
images: ['image1.jpg']
|
||
}
|
||
]
|
||
},
|
||
// ... 其他5个板块
|
||
};
|
||
```
|
||
|
||
### Phase 2: 核心功能开发（2小时）
|
||
|
||
1. **演示控制器**
|
||
```javascript
|
||
class DemoController {
|
||
constructor() {
|
||
this.currentPhase = 0;
|
||
this.currentAgent = null;
|
||
this.elapsedTime = 0;
|
||
this.isPaused = false;
|
||
}
|
||
|
||
start() {
|
||
this.timer = setInterval(() => {
|
||
if (!this.isPaused) {
|
||
this.tick();
|
||
}
|
||
}, 100);
|
||
}
|
||
|
||
tick() {
|
||
this.elapsedTime += 100;
|
||
this.updateAgentStates();
|
||
this.updateContent();
|
||
this.updateProgress();
|
||
}
|
||
}
|
||
```
|
||
|
||
2. **Agent状态管理**
|
||
```javascript
|
||
class AgentManager {
|
||
activateAgent(agentId) {
|
||
// 1. 更新视觉状态
|
||
// 2. 显示Prompt
|
||
// 3. 开始输出动画
|
||
// 4. 更新工作流连线
|
||
}
|
||
|
||
completeAgent(agentId) {
|
||
// 1. 标记完成
|
||
// 2. 传递数据到下一个Agent
|
||
// 3. 更新进度
|
||
}
|
||
}
|
||
```
|
||
|
||
3. **内容生成器**
|
||
```javascript
|
||
class ContentGenerator {
|
||
typeWriter(text, element, speed = 35) {
|
||
let index = 0;
|
||
const interval = setInterval(() => {
|
||
if (index < text.length) {
|
||
element.textContent += text[index];
|
||
index++;
|
||
} else {
|
||
clearInterval(interval);
|
||
}
|
||
}, 1000 / speed);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Phase 3: UI实现（1小时）
|
||
|
||
1. **使用单HTML文件架构**
|
||
2. **集成Tailwind CSS**
|
||
3. **实现响应式布局**
|
||
4. **添加动画效果**
|
||
|
||
### Phase 4: 测试优化（30分钟）
|
||
|
||
1. **时序调试**
|
||
2. **动画流畅度优化**
|
||
3. **内容完整性检查**
|
||
4. **交互响应测试**
|
||
|
||
## 四、关键技术点
|
||
|
||
### 4.1 状态同步
|
||
- 使用单一状态源管理所有Agent状态
|
||
- 确保动画与数据同步
|
||
- 实时更新UI反馈
|
||
|
||
### 4.2 性能优化
|
||
- 使用requestAnimationFrame优化动画
|
||
- 懒加载图片资源
|
||
- 防抖处理用户交互
|
||
|
||
### 4.3 用户体验
|
||
- 平滑的过渡动画
|
||
- 清晰的进度指示
|
||
- 可控的演示节奏
|
||
|
||
## 五、交付标准
|
||
|
||
1. **功能完整性**
|
||
- 完整的3分钟演示流程
|
||
- 7个Agent全部展示
|
||
- 6个内容板块生成
|
||
|
||
2. **视觉效果**
|
||
- 流畅的动画效果
|
||
- 符合设计规范的UI
|
||
- 响应式布局适配
|
||
|
||
3. **代码质量**
|
||
- 模块化设计
|
||
- 注释完整
|
||
- 易于维护扩展
|
||
|
||
## 六、时间安排
|
||
|
||
总计：4小时
|
||
|
||
- 0:00-0:30 数据准备
|
||
- 0:30-2:30 核心功能开发
|
||
- 2:30-3:30 UI实现
|
||
- 3:30-4:00 测试优化
|
||
|
||
## 七、风险控制
|
||
|
||
1. **时序控制风险**
|
||
- 方案：预设固定时间节点
|
||
- 备选：手动控制模式
|
||
|
||
2. **动画性能风险**
|
||
- 方案：降级处理
|
||
- 备选：减少并发动画
|
||
|
||
3. **内容展示风险**
|
||
- 方案：预加载所有内容
|
||
- 备选：分段加载 |