# 项目概述和架构 (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 订单班)