2b1ed656cd
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余CTA元素 - 修正背景图片路径并优化透明度(opacity-10) - 为所有容器区域添加hover提示文字 - 删除'立即参与，共创绿色出行未来'整个CTA区块 - 优化页面加载器和图片错误处理 - 修复展会信息卡片文字对比度问题 - 增强多层背景遮罩效果 影响文件: - web_frontend/web_result/index.html - web_frontend/web_result/css/animations.css - web_frontend/web_result/js/main.js - 新增多个页面和样式文件 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
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. 支持多语言界面 |