2fcaf21842
详细说明: - 添加完整的项目介绍和架构说明 - 包含 7 个 AI Agent 的详细介绍 - 添加技术栈和 Mermaid 架构图 - 完善安装和使用指南 - 添加开发指南和 Git 工作流 - 新增 Windows 快速部署文档 - 更新前端组件和启动脚本 - 添加多种环境配置文件 修改的文件: - 新增 README.md 主文档 - 新增 doc/ 目录及部署文档 - 更新前端演示系统组件 - 添加多个启动脚本变体 - 配置文件优化 影响的功能模块: - 项目文档体系 - 部署和启动流程 - 前端展示系统 - 环境配置管理
324 lines
8.6 KiB
Markdown
324 lines
8.6 KiB
Markdown
# 🚀 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 多智能体协作演示系统**
|
||
|
||
[](https://n8n.io)
|
||
[](README.md)
|
||
[](LICENSE)
|
||
[](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> |