Agent-n8n/.serena/memories/01_项目概述和架构.md

项目概述和架构 (2025-10-03)

📋 项目概述

项目名称

展会策划 AI 多智能体协作演示系统 + n8n 中文版工作流平台

核心目标

• 演示 AI 多智能体协作进行展会策划和专业领域解决方案
• 展示 n8n 工作流平台的完整中文化版本
• 提供 12 个专业领域的完整 AI Agent 协作演示

项目特色

1. 多订单班系统：单一 exhibition-demo 项目架构，动态切换 12 个订单班
2. AI Agent 协作：每个订单班 6-10 个专业 Agent 全流程协作
3. n8n 中文化：完整中文化的工作流自动化平台（3465 行翻译）
4. 苹果风格设计：统一的设计语言，简洁优雅的用户体验

🏗️ 技术架构

技术栈

前端:
  框架: 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

🔧 技术细节

终端模拟系统

// 打字机速度
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 订单班)