9ab8cf48ab
完成内容: - 创建AI Agent架构设计文档，定义100+专业Agent - 创建orderClasses.json统一配置文件 - 每个订单班配置7-9个专业Agent - 定义4种Agent协作模式：串行、并行、主从、迭代 - 文档和资源重新组织整理 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
413 lines
13 KiB
Markdown
413 lines
13 KiB
Markdown
# 统一多订单班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*
|
||
*状态：待审核* |