# 统一多订单班AI演示系统 - 实施计划 V2.0

## 一、项目概述

### 1.1 核心理念变更
**原方案**：为每个订单班创建独立的演示项目（12个独立项目）
**新方案**：在单一exhibition-demo项目中实现所有订单班的动态切换

### 1.2 优势分析
- **代码复用最大化**：一套代码服务12个订单班
- **维护成本降低**：只需维护一个项目
- **用户体验统一**：所有订单班使用相同的交互流程
- **数据管理集中**：通过统一的数据存储管理所有配置
- **扩展性强**：新增订单班只需添加数据配置

## 二、系统架构设计

### 2.1 整体架构
```
exhibition-demo/
├── src/
│   ├── components/
│   │   ├── RequirementModal.tsx      # 需求选择模态框（新增订单班选择）
│   │   ├── AgentGrid.tsx             # Agent网格展示（动态加载）
│   │   ├── TerminalOutput.tsx        # 终端输出组件
│   │   └── ResultModal.tsx           # 结果展示模态框
│   ├── data/
│   │   ├── orderClasses.json         # 所有订单班配置数据
│   │   └── agentTemplates.json       # Agent模板定义
│   ├── services/
│   │   ├── dataLoader.ts             # 数据加载服务
│   │   ├── agentService.ts           # Agent执行逻辑
│   │   └── resultGenerator.ts        # 结果生成服务
│   └── store/
│       └── demoStore.ts               # 状态管理（支持多订单班）
├── public/
│   └── agents/                       # Agent头像资源
│       ├── 文旅/
│       ├── 食品/
│       ├── 财经商贸/
│       └── ...（其他订单班）
└── web_result/                        # 结果展示页面
    └── templates/                    # 各订单班结果模板
```

### 2.2 数据存储方案

#### 方案对比
| 方案 | 优点 | 缺点 | 推荐度 |
|------|------|------|--------|
| **JSON文件** | 简单直观、无需数据库、易于版本控制 | 文件可能较大、不支持复杂查询 | ⭐⭐⭐⭐⭐ |
| SQLite | 支持查询、关系型存储 | 需要数据库依赖、部署复杂 | ⭐⭐⭐ |
| YAML | 可读性好、支持注释 | 解析性能较低、前端支持有限 | ⭐⭐⭐ |
| CSV | 表格化管理 | 不支持嵌套结构、功能受限 | ⭐⭐ |

**推荐方案：JSON文件存储**

#### 数据结构设计
```json
// orderClasses.json
{
  "orderClasses": [
    {
      "id": "exhibition",
      "name": "文旅",
      "displayName": "文旅订单班",
      "icon": "🎪",
      "description": "展会策划与执行专业",
      "scenario": "新能源汽车产业博览会策划",
      "mockRequirement": "策划一场2025年新能源汽车产业博览会，预算1000万，预计参展商500家",
      "agents": [
        {
          "id": "info_retrieval",
          "name": "信息检索专家",
          "model": "DeepSeek Chat Model5",
          "avatar": "/agents/文旅/info_retrieval.png",
          "role": "负责市场调研、数据收集、竞品分析",
          "skills": ["市场分析", "数据挖掘", "趋势预测"],
          "outputSamples": [
            "发现市场规模1200亿，年增长18%",
            "识别目标客群：汽车厂商、零部件供应商、科技公司"
          ]
        },
        {
          "id": "planning",
          "name": "会展策划专家",
          "model": "Chat Models + Memories",
          "avatar": "/agents/文旅/planning.png",
          "role": "统筹协调、方案整合、决策支持",
          "skills": ["项目管理", "资源协调", "风险控制"]
        }
        // ... 其他5个Agent
      ],
      "workflow": {
        "phases": [
          {
            "name": "需求分析",
            "duration": "2分钟",
            "parallelAgents": ["info_retrieval"]
          },
          {
            "name": "方案设计",
            "duration": "5分钟",
            "parallelAgents": ["planning", "design", "marketing"]
          },
          {
            "name": "预算规划",
            "duration": "3分钟",
            "parallelAgents": ["finance", "execution"]
          }
        ]
      },
      "resultTemplate": "exhibition_result.html"
    },
    {
      "id": "food",
      "name": "食品",
      "displayName": "食品订单班",
      "icon": "🍽️",
      "description": "餐饮创业与轻食经营",
      "scenario": "中高端轻食店铺经营方案",
      "mockRequirement": "开设一家青莳轻食品牌店，初始投资85万，目标客群25-40岁",
      "agents": [
        {
          "id": "market_research",
          "name": "餐饮市场调研专家",
          "model": "DeepSeek Chat Model1",
          "avatar": "/agents/食品/market_research.png",
          "role": "轻食市场分析、客群定位、竞品研究"
        },
        {
          "id": "nutrition",
          "name": "营养配方师",
          "model": "Google Gemini Chat Model1",
          "avatar": "/agents/食品/nutrition.png",
          "role": "营养配比、菜品设计、健康认证"
        }
        // ... 其他Agent
      ]
    }
    // ... 其他10个订单班
  ]
}
```

### 2.3 核心功能设计

#### 2.3.1 需求选择界面
```typescript
// RequirementModal.tsx 改造
interface RequirementModalProps {
  onSelectOrderClass: (classId: string, requirement: string) => void;
}

const RequirementModal = () => {
  const [selectedClass, setSelectedClass] = useState<string>('');
  const [customRequirement, setCustomRequirement] = useState<string>('');

  return (
    <div className="modal">
      {/* 订单班选择网格 */}
      <div className="grid grid-cols-3 gap-4">
        {orderClasses.map(oc => (
          <button
            key={oc.id}
            onClick={() => setSelectedClass(oc.id)}
            className={`p-4 border-2 ${
              selectedClass === oc.id ? 'border-blue-500' : 'border-gray-300'
            }`}
          >
            <span className="text-2xl">{oc.icon}</span>
            <h3>{oc.displayName}</h3>
            <p className="text-sm">{oc.scenario}</p>
          </button>
        ))}
      </div>

      {/* 需求输入区 */}
      {selectedClass && (
        <div className="mt-4">
          <button onClick={() => setCustomRequirement(getMockRequirement(selectedClass))}>
            使用预设需求
          </button>
          <textarea
            value={customRequirement}
            onChange={(e) => setCustomRequirement(e.target.value)}
            placeholder="或输入自定义需求..."
          />
        </div>
      )}
    </div>
  );
};
```

#### 2.3.2 Agent动态加载
```typescript
// AgentGrid.tsx
const AgentGrid = ({ orderClassId }: { orderClassId: string }) => {
  const agents = useAgentStore(state => state.getAgentsByClass(orderClassId));

  // 未选择订单班时不显示
  if (!orderClassId) return null;

  return (
    <div className="grid grid-cols-7 gap-2">
      {agents.map(agent => (
        <div key={agent.id} className="agent-card">
          <img src={agent.avatar} alt={agent.name} />
          <span>{agent.name}</span>
          <div className={`status-indicator ${agent.status}`} />
        </div>
      ))}
    </div>
  );
};
```

#### 2.3.3 执行流程管理
```typescript
// agentService.ts
class AgentService {
  async executeWorkflow(orderClassId: string, requirement: string) {
    const orderClass = await this.loadOrderClass(orderClassId);
    const workflow = orderClass.workflow;

    for (const phase of workflow.phases) {
      await this.executePhase(phase, orderClass.agents);
    }

    return this.generateResult(orderClass, requirement);
  }

  private async executePhase(phase: WorkflowPhase, agents: Agent[]) {
    const parallelTasks = phase.parallelAgents.map(agentId => {
      const agent = agents.find(a => a.id === agentId);
      return this.runAgent(agent);
    });

    await Promise.all(parallelTasks);
  }
}
```

## 三、实施任务清单

### 数据准备任务
- [ ] 从n8n工程文档提取已有的3个订单班Agent配置（文旅、食品、智能开发）
- [ ] 基于notion文档为其余9个订单班设计Agent角色
- [ ] 创建统一的orderClasses.json配置文件
- [ ] 设计每个订单班的执行workflow
- [ ] 使用AI生成所有Agent专家头像（约100个头像）
- [ ] 组织头像文件目录结构

### 核心开发任务
- [ ] 改造RequirementModal组件，添加12个订单班选择界面
- [ ] 实现dataLoader.ts数据加载服务
- [ ] 更新demoStore.ts支持多订单班状态管理
- [ ] 实现Agent动态加载和条件显示逻辑
- [ ] 开发多订单班workflow执行引擎
- [ ] 实现动态终端输出内容生成器
- [ ] 集成web_result结果展示页面
- [ ] 为每个订单班创建结果展示模板

### 界面优化任务
- [ ] 设计订单班选择卡片样式
- [ ] 实现订单班切换动画效果
- [ ] 优化Agent网格响应式布局
- [ ] 统一各订单班的视觉风格
- [ ] 添加loading和过渡动画

### 测试与部署任务
- [ ] 测试12个订单班的完整执行流程
- [ ] 实现性能优化（懒加载、缓存）
- [ ] 创建统一启动脚本
- [ ] 编写技术文档和使用说明

## 四、技术实现细节

### 4.1 Agent头像生成策略
```python
# 使用Google Gemini生成头像的prompt模板
prompt_template = """
生成一个{role}的专业头像：
- 风格：现代商务插画风格
- 色调：{color_scheme}
- 特征：{characteristics}
- 背景：简洁渐变背景
- 表情：自信专业
- 服装：{attire}
"""

# 各订单班的色调方案
color_schemes = {
    "文旅": "蓝色系",
    "食品": "绿色系",
    "财经商贸": "金色系",
    "智能开发": "紫色系",
    "智能制造": "橙色系"
    # ...
}
```

### 4.2 动态内容生成
```typescript
// 基于订单班生成不同的输出内容
const generateOutput = (orderClass: string, agent: Agent) => {
  const templates = {
    "文旅": {
      "信息检索专家": [
        "正在分析会展市场数据...",
        "> 发现市场规模{value}亿，年增长{growth}%",
        "> 识别目标展商：{exhibitors}"
      ]
    },
    "食品": {
      "营养配方师": [
        "正在设计营养菜单...",
        "> 设计{count}款核心产品",
        "> 热量控制：{calories}大卡"
      ]
    }
    // ...
  };

  return templates[orderClass][agent.name];
};
```

### 4.3 结果页面模板
```html
<!-- web_result/templates/food_result.html -->
<div class="result-container">
  <header>
    <h1>青莳轻食 - 中高端轻食店铺经营方案</h1>
    <div class="stats">
      <span>📊 投资回报期：14个月</span>
      <span>💰 初始投资：85万</span>
      <span>🎯 月营收：30-35万</span>
    </div>
  </header>

  <section class="content">
    <!-- 动态生成的内容 -->
  </section>
</div>
```

## 五、技术难点与解决方案

### 5.1 关键技术挑战
| 挑战 | 解决方案 |
|------|----------|
| 数据文件过大影响加载 | 实现懒加载，按需加载订单班数据 |
| Agent头像资源管理 | 使用CDN或图片压缩，提供fallback头像 |
| 不同订单班逻辑差异 | 策略模式+配置驱动，减少硬编码 |
| 结果页面模板复杂 | 组件化设计，复用通用模块 |

## 六、验收标准

### 6.1 功能验收
- ✅ 支持12个订单班动态切换
- ✅ Agent根据选择动态加载
- ✅ 每个订单班有独特的执行流程
- ✅ 生成对应的结果展示页面
- ✅ 一键启动所有服务

### 6.2 性能指标
- 页面加载时间 < 3秒
- 订单班切换响应 < 500ms
- Agent执行动画流畅（60fps）
- 内存占用 < 200MB

### 6.3 用户体验
- 清晰的订单班选择界面
- 流畅的执行过程展示
- 专业的结果输出
- 统一的视觉风格

## 七、核心实现要点

### 7.1 必须完成的功能
1. **订单班选择**：用户必须先选择订单班才能看到Agent
2. **动态Agent显示**：根据选择的订单班显示对应的专家
3. **个性化执行**：每个订单班有独特的执行内容和输出
4. **结果展示**：集成web_result，展示专业的输出成果

### 7.2 数据结构核心
- 使用JSON存储所有订单班配置
- 每个订单班包含：基本信息、Agent列表、执行流程、结果模板
- Agent信息包含：名称、角色、头像、输出样例

### 7.3 关键代码改造点
1. `RequirementModal.tsx` - 添加订单班选择网格
2. `AgentGrid.tsx` - 实现条件渲染，未选择时隐藏
3. `demoStore.ts` - 支持多订单班状态管理
4. `WorkflowPage.tsx` - 根据订单班加载不同数据

## 八、总结

本方案的核心创新：
- **一个项目，多个场景**：不再需要12个独立项目
- **数据驱动**：通过配置文件管理所有订单班
- **动态加载**：根据用户选择加载对应内容
- **统一体验**：所有订单班使用相同交互流程

这样的架构更优雅、更易维护、更易扩展。

---

*文档版本：2.0*
*创建日期：2025-09-28*
*状态：待审核*