Agent-n8n/doc/任务/构建12 个DEMO演示.md

DuoduoAgent(多多智能体_演示版) - 12个订单班演示构建计划

项目概述

定义

多多智能体是多多畅职为学生在订单班中提供的AI助手，帮助学生快速弥补与企业岗位需求之间的技能差距，实现精准就业对接。

核心价值

• 🎯 精准匹配: 根据不同行业订单班的特点，定制化AI智能体能力
• 🚀 快速成长: 通过智能体协作，加速学生技能提升
• 💼 就业导向: 直接对接企业需求，提高就业成功率

当前进度状态

✅ 已完成（1/12）

• 文旅订单班: 完整的演示系统（展会策划案例）
  • n8n工作流可视化
  • 7个专业AI Agent协作
  • 完整的前端展示页面

📝 文档已准备（11/12）✨ [更新于2025-09-28]

在 doc/notion文档资料/ 目录下，所有订单班文案已全部准备完成：

已有完整文案的订单班：

1. 财经商贸: 化妆品电商全链路运营一体化方案
2. 食品: 中高端个性化轻食店铺经营方案
3. 智能开发: 在线教育平台开发项目
4. 智能制造: 物流输送线节拍优化的PLC与机器人联合调试
5. 视觉设计: 同里农文旅宣传片策划案
6. 交通物流: 某冷链智慧共配中心"百车级"AGV全局交通管制与充电调度系统设计
7. 土木水利: 宁川市滨河防洪堤加固及生态修复工程（一期）投标方案
8. 大健康: 心理咨询实务中的AI辅助建议方案
9. 能源: 光伏晶硅电池片印后AOI检测与分拣单元
10. 化工: 半导体材料综合检测方案拟定与分析报告撰写
11. 环保: 某地表水环境质量考核断面水质采样方案撰写

⏳ 待开发演示系统（11/12）

需要基于已有文案开发演示系统的订单班

项目技术架构 ✨ [更新于2025-09-28]

统一架构方案（单项目多订单班）

2025-09-08_n8nDEMO演示/
├── n8n-n8n-1.109.2/           # n8n工作流引擎（中文版）
├── web_frontend/
│   ├── exhibition-demo/       # 主入口：React智能体执行过程模拟
│   │   ├── src/
│   │   │   ├── data/
│   │   │   │   └── orderClasses.json  # 12个订单班统一配置
│   │   │   ├── components/
│   │   │   │   ├── OrderClassSelector.tsx  # 订单班选择器
│   │   │   │   └── DynamicAgentGrid.tsx   # 动态Agent加载
│   │   │   └── services/
│   │   │       └── dataLoader.ts          # 动态数据加载
│   │   └── public/
│   │       └── agents/                    # Agent头像资源
│   │           ├── 文旅/
│   │           ├── 食品/
│   │           └── ...（12个订单班）
│   └── web_result/           # 结果展示（混合模板方案）
│       ├── index.html        # 统一入口
│       └── templates/        # 各订单班模板
└── doc/
    └── notion文档资料/        # 各订单班素材

技术栈

• 后端: n8n工作流引擎 (Node.js + TypeScript)
• 前端演示: React 18 + TypeScript + Vite + Zustand
• 结果展示: HTML5 + Tailwind CSS + 动态模板
• 数据存储: JSON文件（orderClasses.json）
• 运行端口:
  • n8n: 5678
  • React演示: 4173
  • 结果展示: 静态HTML + URL参数路由

12个订单班规划

订单班列表与特色定位

序号	订单班名称	状态	核心场景	AI Agent特色
1	文旅	✅ 系统完成	展会策划	7个协作Agent
2	财经商贸	📝 文档就绪	化妆品电商全链路运营	待设计
3	食品	📝 文档就绪	中高端轻食店铺经营	待设计
4	智能开发	📝 文档就绪	在线教育平台开发	待设计
5	智能制造	📝 文档就绪	物流PLC与机器人调试	待设计
6	视觉设计	📝 文档就绪	农文旅宣传片策划	待设计
7	交通物流	📝 文档就绪	AGV交通管制与充电调度	待设计
8	土木水利	📝 文档就绪	防洪堤工程投标方案	待设计
9	大健康	📝 文档就绪	心理咨询AI辅助方案	待设计
10	能源	📝 文档就绪	光伏电池片AOI检测	待设计
11	化工	📝 文档就绪	半导体材料检测分析	待设计
12	环保	📝 文档就绪	地表水质采样方案	待设计

技术实现方案 ✅ [已确定]

核心技术决策

1. 统一架构：单一exhibition-demo项目，动态切换12个订单班
2. 数据存储：JSON文件存储所有配置（避免数据库复杂度）
3. 结果展示：混合模板方案（基础模板+动态内容）
4. 页面跳转：URL参数传递订单班信息

用户交互流程

1. 进入exhibition-demo主页
   ↓
2. 点击"输入需求"按钮
   ↓
3. 显示12个订单班选项（grid grid-cols-1 gap-3）
   ↓
4. 选择订单班后，右侧Agent网格动态更新
   ↓
5. 执行生产流程演示
   ↓
6. 完成后跳转到web_result对应页面

关键功能实现

1. 订单班选择器

• 位置：RequirementModal组件内
• 布局：grid grid-cols-1 gap-3
• 功能：选择后动态加载对应Agent配置

2. Agent动态加载

• 数据源：orderClasses.json
• 加载时机：选择订单班后
• 显示逻辑：未选择时不显示Agent

3. 结果页面路由

// URL参数跳转
window.location.href = `/web_result/?orderClass=food`;

// 可选：sessionStorage存储详细数据
sessionStorage.setItem('resultData', JSON.stringify(data));

实施计划 ✨ [更新于2025-09-28]

第一阶段：文档准备 ✅ 已完成

• 所有12个订单班文案已全部准备完成
• 每个订单班都有明确的核心场景定义
• 文档统一存放在 doc/notion文档资料/ 目录

第二阶段：系统架构改造 🚀 当前重点

基础架构实现（统一入口）：

• 改造exhibition-demo添加订单班选择器
• 创建orderClasses.json统一配置文件
• 实现Agent动态加载机制
• 开发web_result混合模板系统
• 实现URL参数跳转逻辑

第三阶段：数据准备与配置

Agent数据收集与整理：

• 从n8n工程提取3个已有订单班Agent配置
• 设计其余9个订单班的Agent角色
• 生成所有Agent专家头像（约100个）
• 准备各订单班的演示数据和文案
• 配置每个订单班的执行流程

第四阶段：批量实施

完成12个订单班配置：

• 财经商贸: 化妆品电商运营方案
• 食品: 轻食店铺经营方案
• 智能开发: 在线教育平台开发
• 智能制造: PLC与机器人调试
• 视觉设计: 宣传片策划方案
• 交通物流: AGV调度系统
• 土木水利: 工程投标方案
• 大健康: 心理咨询方案
• 能源: 光伏质检分析
• 化工: 材料检测报告
• 环保: 水质监测方案

第五阶段：优化与部署

• 统一启动脚本开发
• 性能优化和测试
• 编写使用文档
• 部署到生产环境

成功标准

功能要求

• ✅ 12个订单班都有完整的演示系统
• ✅ 每个系统都能展示AI Agent协作过程
• ✅ 生成的结果符合各行业特点
• ✅ 用户体验流畅，视觉效果专业

技术要求

• ✅ 一键启动所有服务
• ✅ 部署流程简化到3步以内
• ✅ 支持快速切换不同订单班演示
• ✅ 代码复用率达到80%以上

业务要求

• ✅ 能够清晰展示多多智能体的价值
• ✅ 帮助学生理解技能提升路径
• ✅ 支持销售团队的演示需求
• ✅ 可扩展到更多订单班

资源需求

人力资源

• 前端开发：1-2人
• 内容策划：1人
• UI设计：1人（复用现有设计）
• 测试：1人

开发要求

• 无需时间预估（按实际进度推进）
• 数据驱动开发（等待Agent数据完整后统一实施）
• 架构优先（先完成基础架构改造）
• 复用最大化（基于文旅订单班模板）

风险管理

主要风险

1. 内容风险: 订单班缺少素材 ✅ 已解决

   • 所有12个订单班文案已全部准备完成

2. 技术风险: 部署复杂度增加

   • 缓解措施：早期实施统一部署方案（Docker Compose）

3. 时间风险: 开发效率问题

   • 缓解措施：使用模板化开发，最大化代码复用

下一步行动 🎯

待用户提供

1. Agent数据：其余11个订单班的Agent配置
   • 每个订单班7-9个专家角色
   • Agent名称、职责、技能描述
   • 输出样例和执行流程

准备就绪后执行

1. 架构改造

   • 改造exhibition-demo添加订单班选择器
   • 创建统一的orderClasses.json配置
   • 实现Agent动态加载逻辑

2. 数据整合

   • 提取n8n工程中的Agent配置
   • 生成所有Agent头像
   • 准备演示文案和数据

3. 功能实现

   • 开发web_result混合模板系统
   • 实现URL参数跳转机制
   • 完成12个订单班的完整流程

---

最后更新：2025-09-28 负责人：[待指定] 状态：文档准备完成，待开发