# 🚀 n8n 展会策划 AI 多智能体演示系统

<div align="center">
  <img src="https://raw.githubusercontent.com/n8n-io/n8n/master/assets/n8n-logo.png" alt="n8n logo" width="200"/>
  
  **基于 n8n 工作流自动化平台的 AI 多智能体协作演示系统**
  
  [![n8n Version](https://img.shields.io/badge/n8n-v1.109.2-orange)](https://n8n.io)
  [![Language](https://img.shields.io/badge/Language-中文-red)](README.md)
  [![License](https://img.shields.io/badge/License-Apache%202.0-blue)](LICENSE)
  [![Status](https://img.shields.io/badge/Status-Active-success)](https://github.com)
</div>

---

## 📖 项目概述

这是一个集成了 **n8n 工作流自动化平台** 与 **AI 多智能体协作系统** 的展会策划演示项目。项目展示了如何使用 n8n 编排多个 AI Agent 协同工作，自动生成专业的展会策划方案。

### ✨ 核心特性

- 🤖 **7 个专业 AI Agent** 协同工作，覆盖展会策划全流程
- 🎯 **n8n 中文版** 完整汉化，3465+ 行专业翻译
- 🎨 **现代化 Web 界面** React 18 + TypeScript + Tailwind CSS
- ⚡ **实时执行展示** 终端风格输出，打字机效果
- 📊 **可视化工作流** 嵌入式 n8n 流程图实时展示
- 🚀 **一键启动** 智能启动脚本，自动环境检测

---

## 🏗️ 项目架构

```mermaid
graph TB
    subgraph "前端展示层"
        A[React 展示界面<br/>端口: 4173] 
        B[静态展会网站<br/>端口: 8080]
    end
    
    subgraph "工作流引擎"
        C[n8n 工作流平台<br/>端口: 5678]
        D[中文翻译模块]
    end
    
    subgraph "AI Agent 层"
        E[信息检索专家]
        F[设计专家]
        G[财务预算专家]
        H[格式编辑专家]
        I[活动执行专家]
        J[营销宣传专家]
        K[会展策划专家]
    end
    
    A --> C
    B --> C
    C --> D
    C --> E & F & G & H & I & J & K
    
    style A fill:#646cff,color:#fff
    style C fill:#ff6d5a,color:#fff
    style E fill:#10b981,color:#fff
    style F fill:#10b981,color:#fff
    style G fill:#10b981,color:#fff
    style H fill:#10b981,color:#fff
    style I fill:#10b981,color:#fff
    style J fill:#10b981,color:#fff
    style K fill:#10b981,color:#fff
```

---

## 📁 项目结构

```
2025-09-08_n8nDEMO演示/
├── 📂 n8n-n8n-1.109.2/          # n8n 核心源码（中文版）
│   ├── packages/                 # monorepo 包结构
│   │   ├── cli/                  # CLI 和后端服务
│   │   ├── core/                 # 工作流执行引擎
│   │   ├── editor-ui/            # Vue 3 前端应用
│   │   ├── nodes-base/           # 内置节点集成
│   │   └── @n8n/i18n/           # 国际化（含中文）
│   ├── start.sh                  # 智能启动脚本
│   └── LAUNCH.md                 # 启动指南文档
│
├── 📂 web_frontend/              # 前端应用
│   ├── exhibition-demo/          # React 演示系统
│   │   ├── src/
│   │   │   ├── pages/           # 页面组件
│   │   │   ├── components/      # UI 组件
│   │   │   └── store/           # 状态管理
│   │   └── package.json
│   │
│   └── web_result/              # 静态展会网站
│       ├── index.html           # 首页
│       ├── pages/               # 功能页面
│       └── data/                # 展会资源
│
├── 📂 doc/                      # 项目文档
└── 📄 CLAUDE.md                 # AI 开发助手配置
```

---

## 🚀 快速开始

### 前置要求

- **Node.js** >= 18.0.0
- **pnpm** >= 8.0.0
- **Git**
- 8GB+ 内存推荐

### 1️⃣ 克隆项目

```bash
git clone [your-repo-url]
cd 2025-09-08_n8nDEMO演示
```

### 2️⃣ 启动 n8n 工作流平台

```bash
# 进入 n8n 目录
cd n8n-n8n-1.109.2

# 方式一：使用智能启动脚本（推荐）
./start.sh

# 方式二：开发模式（支持热更新）
./start.sh -d

# 方式三：手动启动
pnpm install
pnpm build
pnpm start
```

访问 http://localhost:5678 - n8n 工作流编辑器（中文界面）

### 3️⃣ 启动展示前端

```bash
# React 演示系统
cd web_frontend/exhibition-demo
pnpm install
pnpm dev          # 开发模式 (端口 5173)
pnpm preview      # 生产预览 (端口 4173)

# 静态展会网站
cd web_frontend/web_result
./start.sh        # 启动 Node.js 服务器 (端口 8080)
```

---

## 🤖 AI Agent 团队

| Agent | 模型 | 职责 | 关键能力 |
|-------|------|------|----------|
| 🔍 **信息检索专家** | DeepSeek Chat | 市场调研 | 数据收集、竞品分析、趋势预测 |
| 🎨 **设计专家** | Google Gemini | 视觉设计 | 空间布局、品牌形象、3D建模 |
| 💰 **财务预算专家** | DeepSeek Chat | 成本核算 | 预算规划、ROI分析、资源优化 |
| 📝 **格式编辑专家** | DeepSeek Chat | 文档处理 | 格式规范、内容优化、排版美化 |
| ⚡ **活动执行专家** | DeepSeek Chat | 执行管理 | 时间线规划、任务分配、风险控制 |
| 📢 **营销宣传专家** | DeepSeek Chat | 品牌推广 | 媒体策略、内容营销、社交传播 |
| 🎯 **会展策划专家** | 多模型融合 | 中央协调 | 方案整合、决策支持、质量把控 |

---

## 💻 技术栈

### 后端技术
- **n8n Core** - 工作流自动化引擎
- **Node.js** + **TypeScript** - 运行环境
- **Express** - Web 服务器
- **TypeORM** - 数据库 ORM
- **SQLite/PostgreSQL** - 数据存储

### 前端技术
- **React 18** - UI 框架
- **Vue 3** - n8n 编辑器
- **TypeScript** - 类型安全
- **Tailwind CSS** - 样式框架
- **Framer Motion** - 动画库
- **Zustand** - 状态管理
- **Vite** - 构建工具

### AI 集成
- **DeepSeek API** - 主力 AI 模型
- **Google Gemini** - 创意设计
- **LangChain** - AI 编排框架

---

## 📚 核心功能

### 1. AI 多智能体协作
- 7 个专业 Agent 并行工作
- 智能任务分配和协调
- 实时状态同步和结果整合

### 2. 工作流可视化
- 实时流程图展示
- 节点执行状态追踪
- 数据流向可视化

### 3. 终端模拟系统
- 真实打字机效果（30-40字/秒）
- 进度条卡顿模拟（15%, 40%, 68%, 90%）
- 多媒体内容支持（文本、图片、数据表）

### 4. 成果展示
- 68页专业策划文档
- 3分钟快速生成
- 30% ROI 提升预期

---

## 🛠️ 开发指南

### 环境变量配置

创建 `.env` 文件：

```env
# n8n 配置
N8N_DEFAULT_LOCALE=zh-CN
N8N_SECURE_COOKIE=false
N8N_PORT=5678

# 前端配置
VITE_API_URL=http://localhost:5678
VITE_WS_URL=ws://localhost:5678
```

### 常用命令

```bash
# n8n 相关
pnpm build        # 构建所有包
pnpm dev          # 开发模式
pnpm test         # 运行测试
pnpm lint         # 代码检查
pnpm typecheck    # 类型检查

# 前端相关
pnpm dev          # 开发服务器
pnpm build        # 生产构建
pnpm preview      # 预览构建
```

### Git 工作流

```bash
# 工作分支
git checkout My_N8N

# 提交规范
git add .
git commit -m "feat: 新功能描述

详细说明:
- 完成的工作
- 修改的文件
- 影响的模块"
```

---

## 📈 项目亮点

- ✅ **完整中文化** - n8n 界面 100% 汉化，3465+ 行专业翻译
- ✅ **智能启动** - 一键启动脚本，自动环境检测和依赖安装
- ✅ **现代化 UI** - 深色主题、Glass Morphism、响应式设计
- ✅ **真实演示** - 模拟真实 AI 执行过程，包含进度和状态
- ✅ **生产就绪** - 完整的错误处理、日志记录、性能优化
- ✅ **易于扩展** - 模块化架构，便于添加新 Agent 和功能

---

## 🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

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

---

## 📄 许可证

本项目基于 [Apache License 2.0](LICENSE) 开源。

n8n 核心代码遵循 [n8n 公平代码许可证](https://github.com/n8n-io/n8n/blob/master/LICENSE.md)。

---

## 🙏 致谢

- [n8n.io](https://n8n.io) - 强大的工作流自动化平台
- [n8n-i18n-chinese](https://github.com/xushengfeng/n8n-i18n-chinese) - 中文翻译项目
- DeepSeek & Google Gemini - AI 模型支持
- 所有贡献者和使用者

---

## 📞 联系方式

- 项目维护：[Your Name]
- Email：[your.email@example.com]
- Issues：[GitHub Issues](https://github.com/your-repo/issues)

---

<div align="center">
  <b>🌟 如果这个项目对你有帮助，请给个 Star！🌟</b>
  
  Made with ❤️ by [Your Team]
</div>