xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b4e5e984747b0d1009ea8838f719d2db6d581072
n8n_Demo/README.md

324 lines
8.6 KiB
Markdown
Raw Normal View History

docs: 创建专业的项目 README 文档 详细说明: - 添加完整的项目介绍和架构说明 - 包含 7 个 AI Agent 的详细介绍 - 添加技术栈和 Mermaid 架构图 - 完善安装和使用指南 - 添加开发指南和 Git 工作流 - 新增 Windows 快速部署文档 - 更新前端组件和启动脚本 - 添加多种环境配置文件 修改的文件: - 新增 README.md 主文档 - 新增 doc/ 目录及部署文档 - 更新前端演示系统组件 - 添加多个启动脚本变体 - 配置文件优化 影响的功能模块: - 项目文档体系 - 部署和启动流程 - 前端展示系统 - 环境配置管理
2025-09-14 18:53:27 +08:00
# 🚀 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>
Reference in New Issue Copy Permalink