Agent-n8n/doc/订单班演示策划方案/统一多订单班演示系统实施计划.md

统一多订单班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文件存储

数据结构设计

// 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 需求选择界面

// 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动态加载

// 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 执行流程管理

// 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头像生成策略

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

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

4.2 动态内容生成

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

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

4.3 结果页面模板

<!-- 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 状态：待审核