xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2b1ed656cddb8293d2cf575a43df0aa7a7a6faee
n8n_Demo/.serena/memories/exhibition_demo_multiagent_system.md
Yep_Q 2b1ed656cd 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>
2025-09-08 14:05:26 +08:00

5.2 KiB
Raw Blame History

展会策划 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)

// store/demoStore.ts
export interface Agent {
  id: string;
  name: string;
  icon: string;
  avatar?: string;
  model: string;
  role: string;
  status: 'waiting' | 'thinking' | 'generating' | 'done';
}

进度条卡顿效果

const stutters = [15, 40, 68, 90];
if (stutters.includes(progress)) {
  await new Promise(resolve => setTimeout(resolve, getRandomDelay(1000, 3000)));
}

图片加载控制

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 类型

部署和运行

# 安装依赖
cd web_frontend/exhibition-demo
pnpm install

# 开发模式
pnpm dev

# 生产构建
pnpm build

# 预览（端口 4173）
pnpm preview

项目亮点

  1. 完整的多智能体协作演示: 真实模拟 AI 团队协作过程
  2. 优秀的用户体验: 流畅的动画、真实的执行效果
  3. 现代化技术栈: React 18 最新特性、TypeScript 类型安全
  4. 可扩展架构: 易于添加新的 Agent 或修改执行流程
  5. 视觉效果: 干净现代的设计，避免丑陋的渐变色

相关资源

重要配置

  • Vite 配置使用端口 4173
  • n8n 服务运行在端口 5678
  • 图片资源路径: public/images/
  • Agent 头像路径: public/agents/

未来优化建议

  1. 可以添加更多的 Agent 类型
  2. 支持自定义执行流程
  3. 添加导出功能（PDF、Word）
  4. 集成真实的 AI API 调用
  5. 支持多语言界面