# 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. **内容展示风险**
   - 方案：预加载所有内容
   - 备选：分段加载