n8n_Demo/web_frontend/exhibition-demo

AI 多智能体协同展示系统

🚀 项目概述

一个基于 React + TypeScript 构建的多智能体协同演示系统，支持12个专业领域的AI Agent协同工作，通过可视化终端和动态工作流展示智能体之间的协作过程。系统采用苹果风格设计语言，提供流畅的用户体验。

✨ 核心特性

🎯 多订单班系统

• 12个专业领域：食品、文旅、财经商贸、智能开发、智能制造、视觉设计、交通物流、土木、大健康、能源、化工、环保
• 动态内容加载：根据选择的订单班自动加载对应的Agent配置和演示内容
• 个性化主题：每个订单班拥有独特的颜色主题和图标系统

🤖 智能体系统

• 多Agent协同：每个订单班配置3-7个专业Agent
• 实时协作演示：展示Agent间的任务分配和协作流程
• 终端模拟：逼真的命令行终端效果，实时显示Agent执行进度

💎 界面设计

• 苹果风格UI：简洁优雅的设计语言
• 玻璃态效果：现代化的毛玻璃背景和卡片设计
• 动态视频Logo：集成动态视频元素提升视觉体验
• 响应式布局：完美适配不同屏幕尺寸

🎬 动画效果

• Framer Motion动画：流畅的页面过渡和元素动画
• 打字机效果：逼真的文字生成动画
• 3D卡片效果：hover时的旋转和浮动效果
• 脉冲光晕：选中状态的动态视觉反馈

🛠 技术栈

• 框架: React 18 + TypeScript
• 样式: Tailwind CSS + CSS Variables
• 动画: Framer Motion
• 图标: Lucide React
• 构建: Vite
• 代码质量: ESLint + TypeScript

📦 安装与运行

前置要求

• Node.js >= 16.0.0
• pnpm >= 6.0.0（推荐）或 npm >= 7.0.0

安装步骤

# 克隆项目
git clone [repository-url]

# 进入项目目录
cd web_frontend/exhibition-demo

# 安装依赖（推荐使用pnpm）
pnpm install

# 启动开发服务器
pnpm dev

开发服务器将在 http://localhost:5173 启动

生产构建

# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview

📁 项目结构

exhibition-demo/
├── src/
│   ├── components/             # React组件
│   │   ├── RequirementModal.tsx      # 需求输入弹窗（苹果风格）
│   │   ├── OrderClassIcons.tsx       # 订单班图标映射
│   │   ├── ContentGenerator.tsx      # 内容生成器
│   │   └── WorkflowVisualization.tsx # 工作流可视化
│   ├── pages/                  # 页面组件
│   │   ├── LandingPage.tsx          # 启动页（蓝色主题）
│   │   ├── WorkflowPageV4.tsx       # 工作流演示页（最新版）
│   │   └── ResultPageV2.tsx         # 结果展示页（优化版）
│   ├── data/                   # 数据文件
│   │   ├── orderClasses.json        # 12个订单班配置
│   │   └── terminalSimulations/     # 终端模拟数据（TypeScript）
│   │       ├── index.ts             # 数据导出入口
│   │       ├── wenlu.ts             # 文旅订单班数据
│   │       └── food.ts              # 食品订单班数据
│   ├── store/                  # 状态管理
│   │   └── demoStore.ts             # Zustand状态管理
│   ├── utils/                  # 工具函数
│   ├── App.tsx                # 主应用组件
│   └── main.tsx               # 应用入口
├── public/
│   └── image/                 # 静态图片资源
│       └── bg.png                   # 背景图片
├── package.json               # 项目配置
├── vite.config.ts            # Vite配置
├── tailwind.config.js        # Tailwind配置
└── tsconfig.json             # TypeScript配置

🎯 使用指南

基本流程

1. 访问首页：打开系统看到蓝色主题的启动页
2. 输入需求：点击"开始体验"，在弹窗中选择订单班并输入需求
3. 观看演示：系统自动展示Agent协作过程，包括：
   • 终端命令执行动画
   • Agent卡片状态变化
   • 实时进度展示
4. 查看结果：演示完成后查看生成的完整方案

URL参数支持

支持通过URL参数直接访问特定订单班：

http://localhost:5173/workflow?orderClass=food
http://localhost:5173/workflow?orderClass=wenlu

🎨 设计系统

颜色主题

每个订单班都有独特的主题色：

• 🍔 食品 - 橙色 (#f97316)
• 🌍 文旅 - 翠绿 (#10b981)
• 💰 财经商贸 - 蓝色 (#3b82f6)
• 💻 智能开发 - 紫色 (#8b5cf6)
• 🏭 智能制造 - 灰色 (#6b7280)
• 🎨 视觉设计 - 粉色 (#ec4899)
• 🚚 交通物流 - 靛蓝 (#6366f1)
• 🏗️ 土木 - 黄色 (#eab308)
• ❤️ 大健康 - 红色 (#ef4444)
• ⚡ 能源 - 绿色 (#22c55e)
• ⚗️ 化工 - 青色 (#14b8a6)
• 🌿 环保 - 青柠 (#84cc16)

UI组件特性

• 需求输入弹窗：苹果风格设计，带视频Logo和背景图
• 订单班选择卡片：3D悬浮效果，选中时有脉冲光晕
• 终端窗口：逼真的命令行界面，支持彩色输出
• Agent卡片：状态指示器，执行时有动画效果

🔧 配置说明

添加新的订单班

1. 在 src/data/orderClasses.json 中添加配置
2. 在 src/data/terminalSimulations/ 创建对应的TypeScript文件
3. 在 src/components/OrderClassIcons.tsx 中映射图标

调整动画速度

修改 src/pages/WorkflowPageV4.tsx 中的常量：

const CHARS_PER_SECOND = 35; // 打字速度
const LINE_DELAY = 100;      // 行间延迟

🚀 最近更新

• ✅ 实现12个订单班系统
• ✅ 升级为苹果风格UI设计
• ✅ 添加动态视频Logo
• ✅ 优化订单班选择卡片交互
• ✅ 统一使用蓝色主题
• ✅ 迁移到TypeScript数据管理
• ✅ 清理旧版本代码和未使用文件
• ✅ 增强标题字体大小和图标

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📝 许可证

MIT License

🙏 致谢

• n8n Workflow Platform
• React & TypeScript Community
• Tailwind CSS Team
• Framer Motion
• 所有开源贡献者

---

项目维护: 2024-2025 最后更新: 2025-09-29