feat: 优化会展网站首页用户体验和视觉效果
主要改进: - 修复星形图标可见性问题，改为黄色高对比度显示 - 移除'立即参展'按钮，清理冗余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>
This commit is contained in:
Yep_Q
157
.serena/memories/exhibition_demo_multiagent_system.md
Normal file
157
.serena/memories/exhibition_demo_multiagent_system.md
Normal file
@@ -0,0 +1,157 @@
|
||||
# 展会策划 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. 支持多语言界面
|
||||
Reference in New Issue
Block a user