38313038a3
详细说明: - 创建化工订单班(chemical)展示页面完整结构 - 实现300mm硅晶圆+SiO₂薄膜AI综合检测项目展示 - 使用紫色/紫罗兰科技主题(#7c3aed, #8b5cf6)突出半导体专业特色 - 深色主题采用深邃紫黑色(#0f0a1f)营造科技氛围 核心功能: - 4个展示区块:项目概述、判定标准、检测流程、检测结果 - 4个Agent角色展示:项目经理、质量工程师、AI系统工程师、数据分析师 - 智能数据动画:单片用时6分钟、批次1.5小时、AI可信度94%、合格率95% - 8张专业图片:检测背景、硅晶圆项目、光学检测、热力图等 - 深浅主题切换、平滑滚动、懒加载等交互功能 技术特性: - 玻璃态设计(glassmorphism)配合backdrop-filter - 视差滚动效果(background-attachment: fixed) - Intersection Observer实现动画和懒加载 - LocalStorage持久化主题偏好 - 响应式网格布局适配多屏幕 修复问题: - Agent头像映射:使用现有3个头像文件适配4个角色 - 图片文件名编码:修复全角/半角括号差异(使用sed命令) 文件清单: - web_frontend/web_result/order-classes/chemical/index.html (641行) - web_frontend/web_result/order-classes/chemical/css/styles.css (961行) - web_frontend/web_result/order-classes/chemical/js/main.js (266行) - 软链接:agent-avatars → data/订单班文档资料/化工/agent头像 - 软链接:images → data/订单班文档资料/化工/notion文稿/image 项目数据: - 检测对象:300mm P型硅晶圆20片 - 检测项目:外观(颗粒/划痕/腐蚀)、薄膜(厚度/均匀性)、电学(Rs)、成分(XPS) - 批次结果:19片合格、1片观察、0片不合格 - AI判定规则:≥0.90合格、0.80-0.90观察、<0.80待复核 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
n8n-chinese-translation
@ 174890c658
🚀 n8n 展会策划 AI 多智能体演示系统
基于 n8n 工作流自动化平台的 AI 多智能体协作演示系统
📖 项目概述
这是一个集成了 n8n 工作流自动化平台 与 AI 多智能体协作系统 的展会策划演示项目。项目展示了如何使用 n8n 编排多个 AI Agent 协同工作，自动生成专业的展会策划方案。
✨ 核心特性
- 🤖 7 个专业 AI Agent 协同工作，覆盖展会策划全流程
- 🎯 n8n 中文版 完整汉化，3465+ 行专业翻译
- 🎨 现代化 Web 界面 React 18 + TypeScript + Tailwind CSS
- ⚡ 实时执行展示 终端风格输出，打字机效果
- 📊 可视化工作流 嵌入式 n8n 流程图实时展示
- 🚀 一键启动 智能启动脚本，自动环境检测
🏗️ 项目架构
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️⃣ 克隆项目
git clone [your-repo-url]
cd 2025-09-08_n8nDEMO演示
2️⃣ 启动 n8n 工作流平台
# 进入 n8n 目录
cd n8n-n8n-1.109.2
# 方式一：使用智能启动脚本（推荐）
./start.sh
# 方式二：开发模式（支持热更新）
./start.sh -d
# 方式三：手动启动
pnpm install
pnpm build
pnpm start
访问 http://localhost:5678 - n8n 工作流编辑器（中文界面）
3️⃣ 启动展示前端
# 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 文件：
# 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
常用命令
# n8n 相关
pnpm build # 构建所有包
pnpm dev # 开发模式
pnpm test # 运行测试
pnpm lint # 代码检查
pnpm typecheck # 类型检查
# 前端相关
pnpm dev # 开发服务器
pnpm build # 生产构建
pnpm preview # 预览构建
Git 工作流
# 工作分支
git checkout My_N8N
# 提交规范
git add .
git commit -m "feat: 新功能描述
详细说明:
- 完成的工作
- 修改的文件
- 影响的模块"
📈 项目亮点
- ✅ 完整中文化 - n8n 界面 100% 汉化，3465+ 行专业翻译
- ✅ 智能启动 - 一键启动脚本，自动环境检测和依赖安装
- ✅ 现代化 UI - 深色主题、Glass Morphism、响应式设计
- ✅ 真实演示 - 模拟真实 AI 执行过程，包含进度和状态
- ✅ 生产就绪 - 完整的错误处理、日志记录、性能优化
- ✅ 易于扩展 - 模块化架构，便于添加新 Agent 和功能
🤝 贡献指南
欢迎贡献代码、报告问题或提出建议！
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'feat: Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
📄 许可证
本项目基于 Apache License 2.0 开源。
n8n 核心代码遵循 n8n 公平代码许可证。
🙏 致谢
- n8n.io - 强大的工作流自动化平台
- n8n-i18n-chinese - 中文翻译项目
- DeepSeek & Google Gemini - AI 模型支持
- 所有贡献者和使用者
📞 联系方式
- 项目维护：[Your Name]
- Email：[your.email@example.com]
- Issues：GitHub Issues
🌟 如果这个项目对你有帮助，请给个 Star！🌟
Made with ❤️ by [Your Team]