265 lines
9.0 KiB
Markdown
265 lines
9.0 KiB
Markdown
|
# 项目概述和架构 (2025-10-03)
|
|||
|
|
|
|||
|
|
## 📋 项目概述
|
|||
|
|
|
|||
|
|
### 项目名称
|
|||
|
|
**展会策划 AI 多智能体协作演示系统 + n8n 中文版工作流平台**
|
|||
|
|
|
|||
|
|
### 核心目标
|
|||
|
|
- 演示 AI 多智能体协作进行展会策划和专业领域解决方案
|
|||
|
|
- 展示 n8n 工作流平台的完整中文化版本
|
|||
|
|
- 提供 12 个专业领域的完整 AI Agent 协作演示
|
|||
|
|
|
|||
|
|
### 项目特色
|
|||
|
|
1. **多订单班系统**：单一 exhibition-demo 项目架构，动态切换 12 个订单班
|
|||
|
|
2. **AI Agent 协作**：每个订单班 6-10 个专业 Agent 全流程协作
|
|||
|
|
3. **n8n 中文化**：完整中文化的工作流自动化平台（3465 行翻译）
|
|||
|
|
4. **苹果风格设计**：统一的设计语言，简洁优雅的用户体验
|
|||
|
|
|
|||
|
|
## 🏗️ 技术架构
|
|||
|
|
|
|||
|
|
### 技术栈
|
|||
|
|
```yaml
|
|||
|
|
前端:
|
|||
|
|
框架: React 18 + TypeScript
|
|||
|
|
构建: Vite
|
|||
|
|
样式: Tailwind CSS
|
|||
|
|
状态: Zustand
|
|||
|
|
路由: React Router v6
|
|||
|
|
|
|||
|
|
后端:
|
|||
|
|
平台: n8n 1.109.2 (Node.js + TypeScript + Express)
|
|||
|
|
数据库: SQLite/PostgreSQL/MySQL (TypeORM)
|
|||
|
|
|
|||
|
|
包管理:
|
|||
|
|
工具: pnpm workspaces + Turbo
|
|||
|
|
版本: pnpm 8+
|
|||
|
|
|
|||
|
|
测试:
|
|||
|
|
单元: Jest
|
|||
|
|
E2E: Playwright
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 数据管理方案
|
|||
|
|
- **配置存储**: JSON 文件（orderClasses.json）
|
|||
|
|
- **终端模拟**: TypeScript 数据管理（src/data/terminalSimulations/）
|
|||
|
|
- **图片资源**: 软链接方式访问项目根目录数据文件夹
|
|||
|
|
- **状态管理**: Zustand + sessionStorage
|
|||
|
|
|
|||
|
|
### 端口配置（系统级硬约束）⚠️
|
|||
|
|
```
|
|||
|
|
n8n平台: 5678
|
|||
|
|
展会演示: 4173
|
|||
|
|
食品订单班: 4174
|
|||
|
|
Web结果展示: 4155 【禁止使用 8080 或其他端口】
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📁 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
2025-09-08_n8nDEMO演示/
|
|||
|
|
├── n8n-n8n-1.109.2/ # n8n 源代码（完整中文化）
|
|||
|
|
├── web_frontend/
|
|||
|
|
│ ├── exhibition-demo/ # 主演示系统 (React + TS)
|
|||
|
|
│ │ ├── src/
|
|||
|
|
│ │ │ ├── components/ # RequirementModal, OrderClassIcons
|
|||
|
|
│ │ │ ├── pages/ # WorkflowPageV4, ResultPageV2
|
|||
|
|
│ │ │ ├── data/
|
|||
|
|
│ │ │ │ ├── orderClasses.json # 12个订单班配置
|
|||
|
|
│ │ │ │ └── terminalSimulations/ # TypeScript终端数据
|
|||
|
|
│ │ │ │ ├── index.ts # 统一管理器
|
|||
|
|
│ │ │ │ ├── wenlu.ts # 文旅 ✅
|
|||
|
|
│ │ │ │ ├── food.ts # 食品 ✅
|
|||
|
|
│ │ │ │ ├── finance.ts # 财经商贸 ✅
|
|||
|
|
│ │ │ │ ├── logistics.ts # 交通物流 ✅
|
|||
|
|
│ │ │ │ ├── manufacturing.ts # 智能制造 ✅
|
|||
|
|
│ │ │ │ ├── dev.ts # 智能开发 ✅
|
|||
|
|
│ │ │ │ ├── civil.ts # 土木水利 ✅
|
|||
|
|
│ │ │ │ ├── energy.ts # 能源 ✅
|
|||
|
|
│ │ │ │ └── health.ts # 大健康 ✅
|
|||
|
|
│ │ │ └── store/ # Zustand状态管理
|
|||
|
|
│ │ └── public/
|
|||
|
|
│ │ └── data/订单班文档资料/ # 软链接到项目根目录
|
|||
|
|
│ ├── food-order-demo/ # 食品订单班独立系统
|
|||
|
|
│ └── web_result/ # 结果展示页面
|
|||
|
|
│ └── order-classes/ # 各订单班结果页
|
|||
|
|
│ └── food/ # 食品订单班 SuperDesign v5
|
|||
|
|
├── data/订单班文档资料/ # 12个订单班完整文档
|
|||
|
|
│ ├── 文旅/
|
|||
|
|
│ ├── 食品/
|
|||
|
|
│ ├── 财经商贸/
|
|||
|
|
│ ├── 智能开发/
|
|||
|
|
│ ├── 智能制造/
|
|||
|
|
│ ├── 视觉设计/
|
|||
|
|
│ ├── 交通物流/
|
|||
|
|
│ ├── 土木/
|
|||
|
|
│ ├── 大健康/
|
|||
|
|
│ ├── 能源/
|
|||
|
|
│ ├── 化工/
|
|||
|
|
│ └── 环保/
|
|||
|
|
├── .superdesign/
|
|||
|
|
│ ├── design_iterations/ # SuperDesign工作目录
|
|||
|
|
│ └── archive_食品_20251001/ # 食品订单班归档
|
|||
|
|
├── .serena/memories/ # Serena AI 记忆系统
|
|||
|
|
└── progress.md # 项目进度记录
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎨 12个订单班配置
|
|||
|
|
|
|||
|
|
| # | ID | 名称 | 项目案例 | 主题色 | 状态 |
|
|||
|
|
|---|-----|------|---------|--------|------|
|
|||
|
|
| 1 | food | 食品 | 青莳轻食连锁品牌 | 橙色 | ✅ |
|
|||
|
|
| 2 | wenlu | 文旅 | 2024长三角新能源汽车展 | 翠绿 | ✅ |
|
|||
|
|
| 3 | finance | 财经商贸 | 化妆品电商全链路运营 | 蓝色 | ✅ |
|
|||
|
|
| 4 | dev | 智能开发 | K12在线教育平台 | 紫色 | ✅ |
|
|||
|
|
| 5 | manufacturing | 智能制造 | 汽车零部件智能分拣系统 | 灰色 | ✅ |
|
|||
|
|
| 6 | design | 视觉设计 | 同里古镇农文旅宣传片 | 粉色 | ⏳ |
|
|||
|
|
| 7 | logistics | 交通物流 | 冷链AGV调度系统 | 靛蓝 | ✅ |
|
|||
|
|
| 8 | civil | 土木 | 滨河防洪堤加固工程 | 黄色 | ✅ |
|
|||
|
|
| 9 | health | 大健康 | AI心理咨询服务平台 | 红色 | ✅ |
|
|||
|
|
| 10 | energy | 能源 | 光伏电池片智能检测 | 绿色 | ✅ |
|
|||
|
|
| 11 | chemical | 化工 | 半导体材料质量检测 | 青色 | ⏳ |
|
|||
|
|
| 12 | environment | 环保 | 城市地表水环境监测 | 青柠 | ⏳ |
|
|||
|
|
|
|||
|
|
**完成进度**: 9/12 (75%) - 剩余3个订单班待开发
|
|||
|
|
|
|||
|
|
## 🎯 UI设计规范
|
|||
|
|
|
|||
|
|
### 设计语言
|
|||
|
|
- **风格**: 苹果风格设计语言，简洁优雅
|
|||
|
|
- **主色调**: 蓝色系（从紫色统一改为蓝色）
|
|||
|
|
- **字体**: 系统默认字体栈
|
|||
|
|
|
|||
|
|
### 组件设计
|
|||
|
|
- **动态视频Logo**: https://ddcz-1315997005.cos.ap-nanjing.myqcloud.com/static/video/cloude.mp4
|
|||
|
|
- **背景图片**: /public/image/bg.png
|
|||
|
|
|
|||
|
|
### 卡片效果
|
|||
|
|
- 3D悬浮动画
|
|||
|
|
- 脉冲光晕效果
|
|||
|
|
- hover上浮和旋转动画
|
|||
|
|
- 选中状态右上角勾选标记
|
|||
|
|
- 图标尺寸: 24px
|
|||
|
|
|
|||
|
|
### 标题优化
|
|||
|
|
- 文字大小: text-base（从text-sm增加）
|
|||
|
|
- 添加图标: FileText 和 PenTool
|
|||
|
|
- 颜色加深至 gray-800
|
|||
|
|
|
|||
|
|
## 🔧 技术细节
|
|||
|
|
|
|||
|
|
### 终端模拟系统
|
|||
|
|
```typescript
|
|||
|
|
// 打字机速度
|
|||
|
|
CHARS_PER_SECOND = 35
|
|||
|
|
|
|||
|
|
// 行间延迟
|
|||
|
|
LINE_DELAY = 100ms
|
|||
|
|
|
|||
|
|
// 数据加载
|
|||
|
|
import('@/data/terminalSimulations')
|
|||
|
|
|
|||
|
|
// 数据格式
|
|||
|
|
interface TerminalLine {
|
|||
|
|
type: 'system' | 'info' | 'output' | 'success' | 'image'
|
|||
|
|
content?: string
|
|||
|
|
imageSrc?: string
|
|||
|
|
imageAlt?: string
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 路由配置
|
|||
|
|
- **主入口**: `http://localhost:4173`
|
|||
|
|
- **Web结果**: `http://localhost:4155/`
|
|||
|
|
- **订单班结果**: `http://localhost:4155/order-class/{orderClassId}`
|
|||
|
|
- **URL参数**: `?orderClass=food/wenlu/finance/...`
|
|||
|
|
|
|||
|
|
### 数据加载流程
|
|||
|
|
1. 用户选择订单班
|
|||
|
|
2. 加载 orderClasses.json 配置
|
|||
|
|
3. 动态导入对应的 terminalSimulations/{orderClassId}.ts
|
|||
|
|
4. 执行 Agent 序列模拟
|
|||
|
|
5. 完成后跳转结果页面（sessionStorage + URL参数）
|
|||
|
|
|
|||
|
|
## 🚀 核心特性
|
|||
|
|
|
|||
|
|
### 1. 多订单班支持
|
|||
|
|
- 单一项目架构，动态切换
|
|||
|
|
- 统一的数据格式和接口
|
|||
|
|
- 12个订单班各有独特主题色和图标
|
|||
|
|
|
|||
|
|
### 2. AI Agent 协作展示
|
|||
|
|
- 每个订单班 6-10 个专业 Agent
|
|||
|
|
- 完整的工作流程模拟
|
|||
|
|
- 实时终端输出展示
|
|||
|
|
- 图片和数据可视化
|
|||
|
|
|
|||
|
|
### 3. SuperDesign 集成
|
|||
|
|
- 5轮迭代优化流程
|
|||
|
|
- 7维度评估体系
|
|||
|
|
- 响应式设计完善
|
|||
|
|
- 性能优化（懒加载、防抖）
|
|||
|
|
|
|||
|
|
### 4. n8n 工作流平台
|
|||
|
|
- 完整中文化（3465行翻译）
|
|||
|
|
- 工作流可视化编辑
|
|||
|
|
- 自动化任务执行
|
|||
|
|
|
|||
|
|
## ⚠️ 系统约束
|
|||
|
|
|
|||
|
|
### 硬性约束（必须遵守）
|
|||
|
|
1. ✅ **包管理**: 必须使用 pnpm（不能用 npm/yarn）
|
|||
|
|
2. ✅ **端口配置**: Web结果展示必须使用 4155
|
|||
|
|
3. ✅ **数据格式**: 终端模拟必须使用 TypeScript，不用 JSON
|
|||
|
|
4. ✅ **设计规范**: 必须保持苹果风格设计语言一致性
|
|||
|
|
5. ✅ **订单班数据**: 需要 agent prompt 和专家头像数据
|
|||
|
|
6. ✅ **主题色**: 所有订单班必须有独特的主题色和图标
|
|||
|
|
|
|||
|
|
### 开发规范
|
|||
|
|
1. n8n 命令在 `n8n-n8n-1.109.2/` 目录执行
|
|||
|
|
2. 提交前必须运行 lint 和 typecheck
|
|||
|
|
3. Git 提交到对应分支（当前：duoduo_Multiple_Agents）
|
|||
|
|
4. 命名规范：orderClassId 必须与 orderClasses.json 中的 id 一致
|
|||
|
|
|
|||
|
|
## 📊 项目进展
|
|||
|
|
|
|||
|
|
### 已完成
|
|||
|
|
- ✅ n8n 平台完整中文化
|
|||
|
|
- ✅ 12个订单班 AI Agent 架构设计
|
|||
|
|
- ✅ 9个订单班终端模拟开发
|
|||
|
|
- ✅ 食品订单班 SuperDesign v5（9.39/10评分）
|
|||
|
|
- ✅ UI优化（卡片动画、标题增强、代码清理）
|
|||
|
|
- ✅ 端口配置标准化
|
|||
|
|
- ✅ 图片资源软链接方案
|
|||
|
|
- ✅ 暂停/继续功能优化
|
|||
|
|
- ✅ 需求模板集成
|
|||
|
|
- ✅ TSX终端系统重构
|
|||
|
|
|
|||
|
|
### 待完成
|
|||
|
|
- ⏳ 补充其他订单班的 agent prompt 和头像数据
|
|||
|
|
- ⏳ 为剩余3个订单班添加 terminalSimulations（design, chemical, environment）
|
|||
|
|
- ⏳ Agent 卡片动画效果优化
|
|||
|
|
- ⏳ 结果页面展示效果完善
|
|||
|
|
- ⏳ SuperDesign 流程应用到其他订单班
|
|||
|
|
|
|||
|
|
## 🔗 访问地址
|
|||
|
|
|
|||
|
|
### 开发环境
|
|||
|
|
- **主入口**: http://localhost:4173 （展会演示）
|
|||
|
|
- **Web结果展示**: http://localhost:4155/
|
|||
|
|
- **文旅订单班**: http://localhost:4155/order-class/wenlu
|
|||
|
|
- **食品订单班**: http://localhost:4155/order-class/food
|
|||
|
|
|
|||
|
|
### 项目关键目录
|
|||
|
|
- 主演示系统: `web_frontend/exhibition-demo/`
|
|||
|
|
- n8n源代码: `n8n-n8n-1.109.2/`
|
|||
|
|
- 订单班数据: `data/订单班文档资料/`
|
|||
|
|
- SuperDesign工作: `.superdesign/`
|
|||
|
|
- 记忆系统: `.serena/memories/`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**最后更新**: 2025-10-03
|
|||
|
|
**当前分支**: duoduo_Multiple_Agents
|
|||
|
|
**完成度**: 75% (9/12 订单班)
|