157 lines
5.2 KiB
Markdown
157 lines
5.2 KiB
Markdown
|
# 展会策划 AI 多智能体演示系统项目总结
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
- **项目名称**: 展会策划 AI 多智能体协作演示系统
|
|||
|
|
- **开发时间**: 2025-09-08
|
|||
|
|
- **项目路径**: `/Users/xiaoqi/Documents/Dev/Project/2025-09-08_n8nDEMO演示/web_frontend/exhibition-demo`
|
|||
|
|
- **技术栈**: React 18 + TypeScript + Tailwind CSS + Framer Motion + Zustand + Vite
|
|||
|
|
- **部署端口**: 4173
|
|||
|
|
|
|||
|
|
## 核心功能实现
|
|||
|
|
|
|||
|
|
### 1. 多智能体架构
|
|||
|
|
系统包含 7 个专业 AI Agent：
|
|||
|
|
- **信息检索专家** (DeepSeek Chat Model5): 市场调研、数据收集、竞品分析
|
|||
|
|
- **设计专家** (Google Gemini Chat Model2): 视觉设计、空间布局、品牌形象
|
|||
|
|
- **财务预算专家** (DeepSeek Chat Model2): 成本核算、预算规划、ROI分析
|
|||
|
|
- **格式编辑专家** (DeepSeek Chat Model4): 文档格式化、内容结构优化
|
|||
|
|
- **活动执行专家** (DeepSeek Chat Model1): 执行计划、时间线管理、任务分配
|
|||
|
|
- **营销宣传专家** (DeepSeek Chat Model3): 推广策略、媒体规划、品牌传播
|
|||
|
|
- **会展策划专家** (Chat Models + Memories): 中央协调、方案整合、决策支持
|
|||
|
|
|
|||
|
|
### 2. 终端模拟系统
|
|||
|
|
- **打字机效果**: 30-40字/秒的输出速度
|
|||
|
|
- **进度条系统**: 实现了真实的卡顿效果（在15%, 40%, 68%, 90%位置）
|
|||
|
|
- **内容类型**: 支持文本、图片、进度条、结构化数据等多种输出
|
|||
|
|
- **滚动控制**: 自动滚动到最新内容，支持手动滚动查看历史
|
|||
|
|
|
|||
|
|
### 3. 用户交互流程
|
|||
|
|
1. **需求输入模态框** (`RequirementModal.tsx`)
|
|||
|
|
- 预设新能源汽车展模板
|
|||
|
|
- 支持自定义需求输入
|
|||
|
|
|
|||
|
|
2. **执行过程展示** (`WorkflowPageV4.tsx`)
|
|||
|
|
- 左侧嵌入 n8n 工作流可视化
|
|||
|
|
- 右侧终端实时输出
|
|||
|
|
- Agent 头像和状态显示
|
|||
|
|
|
|||
|
|
3. **结果展示模态框** (`ResultModal.tsx`)
|
|||
|
|
- 显示生成统计（68页文档、3分钟生成、30% ROI）
|
|||
|
|
- 章节完成状态
|
|||
|
|
- 查看详情和下载选项
|
|||
|
|
|
|||
|
|
### 4. 图片加载优化
|
|||
|
|
- **骨架屏加载**: 简单的灰色渐变动画
|
|||
|
|
- **同步加载**: 后续内容等待图片加载完成
|
|||
|
|
- **图片来源**: 使用实际展会策划文档中的图片
|
|||
|
|
|
|||
|
|
## 关键技术实现
|
|||
|
|
|
|||
|
|
### 状态管理 (Zustand)
|
|||
|
|
```typescript
|
|||
|
|
// store/demoStore.ts
|
|||
|
|
export interface Agent {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
icon: string;
|
|||
|
|
avatar?: string;
|
|||
|
|
model: string;
|
|||
|
|
role: string;
|
|||
|
|
status: 'waiting' | 'thinking' | 'generating' | 'done';
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 进度条卡顿效果
|
|||
|
|
```typescript
|
|||
|
|
const stutters = [15, 40, 68, 90];
|
|||
|
|
if (stutters.includes(progress)) {
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, getRandomDelay(1000, 3000)));
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 图片加载控制
|
|||
|
|
```typescript
|
|||
|
|
const handleImageLoad = (lineId: string) => {
|
|||
|
|
setImageLoadingStates(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
[lineId]: false
|
|||
|
|
}));
|
|||
|
|
// 图片加载完成后才继续执行
|
|||
|
|
setImageLoadComplete(true);
|
|||
|
|
};
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目文件结构
|
|||
|
|
```
|
|||
|
|
exhibition-demo/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── pages/
|
|||
|
|
│ │ └── WorkflowPageV4.tsx # 主演示页面（最终版本）
|
|||
|
|
│ ├── components/
|
|||
|
|
│ │ ├── RequirementModal.tsx # 需求输入
|
|||
|
|
│ │ └── ResultModal.tsx # 结果展示
|
|||
|
|
│ ├── store/
|
|||
|
|
│ │ └── demoStore.ts # 状态管理
|
|||
|
|
│ └── App.tsx
|
|||
|
|
├── public/
|
|||
|
|
│ ├── agents/ # Agent 头像
|
|||
|
|
│ └── images/ # 展会图片资源
|
|||
|
|
└── vite.config.ts # 端口配置 4173
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发过程中的关键优化
|
|||
|
|
|
|||
|
|
### 迭代历史
|
|||
|
|
- **V1**: 基础框架，缺少完整演示流程
|
|||
|
|
- **V2**: 添加嵌入式 n8n 工作流，终端风格执行
|
|||
|
|
- **V3**: 修复滚动问题，添加进度条和 Agent 头像
|
|||
|
|
- **V4**: 实现真实进度条效果，添加需求/结果模态框（最终版本）
|
|||
|
|
|
|||
|
|
### 解决的问题
|
|||
|
|
1. **滚动条问题**: 添加 `max-height: calc(100vh - 200px)` 和自定义滚动条样式
|
|||
|
|
2. **进度条真实性**: 改为覆盖式更新（updateProgressLine）而非追加
|
|||
|
|
3. **图片加载闪烁**: 添加骨架屏和同步等待机制
|
|||
|
|
4. **模态框触发**: 修正 useEffect 条件判断（currentAgentIndex >= 0）
|
|||
|
|
5. **TypeScript 类型错误**: 修正 NodeJS.Timeout 为 number 类型
|
|||
|
|
|
|||
|
|
## 部署和运行
|
|||
|
|
```bash
|
|||
|
|
# 安装依赖
|
|||
|
|
cd web_frontend/exhibition-demo
|
|||
|
|
pnpm install
|
|||
|
|
|
|||
|
|
# 开发模式
|
|||
|
|
pnpm dev
|
|||
|
|
|
|||
|
|
# 生产构建
|
|||
|
|
pnpm build
|
|||
|
|
|
|||
|
|
# 预览（端口 4173）
|
|||
|
|
pnpm preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目亮点
|
|||
|
|
1. **完整的多智能体协作演示**: 真实模拟 AI 团队协作过程
|
|||
|
|
2. **优秀的用户体验**: 流畅的动画、真实的执行效果
|
|||
|
|
3. **现代化技术栈**: React 18 最新特性、TypeScript 类型安全
|
|||
|
|
4. **可扩展架构**: 易于添加新的 Agent 或修改执行流程
|
|||
|
|
5. **视觉效果**: 干净现代的设计，避免丑陋的渐变色
|
|||
|
|
|
|||
|
|
## 相关资源
|
|||
|
|
- n8n 工作流地址: http://localhost:5678/workflow/XbfF8iRI4a69hmYS
|
|||
|
|
- 展会策划文档: `/web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
|
|||
|
|
- Git 分支: Web_Create
|
|||
|
|
- 最新提交: c0644d4b (2025-09-08)
|
|||
|
|
|
|||
|
|
## 重要配置
|
|||
|
|
- Vite 配置使用端口 4173
|
|||
|
|
- n8n 服务运行在端口 5678
|
|||
|
|
- 图片资源路径: public/images/
|
|||
|
|
- Agent 头像路径: public/agents/
|
|||
|
|
|
|||
|
|
## 未来优化建议
|
|||
|
|
1. 可以添加更多的 Agent 类型
|
|||
|
|
2. 支持自定义执行流程
|
|||
|
|
3. 添加导出功能（PDF、Word）
|
|||
|
|
4. 集成真实的 AI API 调用
|
|||
|
|
5. 支持多语言界面
|