diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 7036828a..a36d226f 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -64,7 +64,8 @@ "Bash(npm run build:*)", "Bash(npm run preview:*)", "Bash(open http://localhost:4173)", - "Bash(find:*)" + "Bash(find:*)", + "Bash(open index.html)" ], "defaultMode": "acceptEdits", "additionalDirectories": [ diff --git a/.serena/memories/exhibition_demo_multiagent_system.md b/.serena/memories/exhibition_demo_multiagent_system.md new file mode 100644 index 00000000..0fcccbb4 --- /dev/null +++ b/.serena/memories/exhibition_demo_multiagent_system.md @@ -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. 支持多语言界面 \ No newline at end of file diff --git a/.superdesign/design_iterations/exhibition_site_1.html b/.superdesign/design_iterations/exhibition_site_1.html new file mode 100644 index 00000000..29886aea --- /dev/null +++ b/.superdesign/design_iterations/exhibition_site_1.html @@ -0,0 +1,424 @@ + + +
+ + ++ 引领绿色出行新时代 · 共创智能交通新未来 +
+2024年6月15-17日
+苏州国际博览中心
+50,000平方米
+参展企业
+专业观众
+同期活动
+媒体合作
+展示最新纯电动、混合动力、氢燃料电池等新能源汽车技术与产品
+聚焦固态电池、快充技术、电池回收等前沿动力电池解决方案
+展示L3-L5级自动驾驶、车路协同、智能座舱等创新技术
+超级快充、无线充电、换电站等充电基础设施整体解决方案
+5G-V2X、OTA升级、云服务平台等智能网联汽车技术展示
+工业4.0、柔性生产线、数字孪生等汽车智能制造解决方案
+6月15日 09:00-12:00
+政府领导致辞、产业发展报告发布
+6月15日 14:00-17:00
+20+品牌新车型全球首发
+6月16日 09:00-17:00
+8大专题论坛并行举办
+6月17日 09:00-15:00
+供需对接、项目签约仪式
++ 探索未来出行 · 引领产业变革 · 共创绿色生态 +
+ + +超大展览空间
+知名展商
+专业观众
+六大主题展区,全方位展示产业链创新成果
+ +固态电池、快充技术、电池管理系统等前沿技术展示
+L3-L5级自动驾驶、激光雷达、高精地图等核心技术
+超级快充、无线充电、换电站等基础设施解决方案
+纯电动、混合动力、氢能源等新能源整车展示
+5G-V2X、OTA升级、智能座舱等互联技术展示
+工业4.0、数字孪生、柔性制造等生产技术
+09:00 - 12:00
+14:00 - 17:00
+09:00 - 17:00
+携手行业领军企业,共创产业新生态
+ ++ 成为2024长三角新能源汽车产业博览会的一部分,共同见证行业变革时刻 +
+INITIALIZING_FUTURE_MOBILITY
+2024.06.15-17 | SUZHOU_EXPO_CENTER
+LOADING_SECTORS...
+固态电池 | 快充技术 | BMS系统
+L3-L5自动驾驶 | 激光雷达 | V2X
+超级快充 | 无线充电 | 换电站
+纯电动 | 混动 | 氢能源
+5G-V2X | OTA | 智能座舱
+工业4.0 | 数字孪生 | 柔性制造
+SYNCHRONIZING_SCHEDULE...
+09:00 - 12:00 | MAIN_HALL
+14:00 - 17:00 | HALL_A
+09:00 - 17:00 | MULTI_HALL
+09:00 - 15:00 | VIP_ZONE
++ 探索未来出行方式,引领产业创新发展,共创绿色智能生态。 +
+六大主题,全产业链覆盖
+固态电池、快充技术、电池管理系统
+L3-L5自动驾驶、激光雷达、V2X
+超级快充、无线充电、换电站
+纯电动、混合动力、氢能源
+5G-V2X、OTA升级、智能座舱
+工业4.0、数字孪生、柔性制造
+三天精彩,不容错过
+政府领导致辞、产业报告发布、战略合作签约
+20+品牌新车型全球首发、技术创新展示
+8大专题论坛、院士专家演讲、圆桌讨论
+供需对接、项目洽谈、签约仪式
++ 成为2024长三角新能源汽车产业博览会的一部分 +
++ 探索未来出行新模式 · 引领产业创新发展 · 共创绿色智能生态 +
+ +六大主题展区,全方位展示产业链创新成果
+固态电池、快充技术、电池管理系统、电池回收等前沿技术展示
+L3-L5级自动驾驶、激光雷达、高精地图、车路协同技术展示
+超级快充、无线充电、换电站、充电网络运营管理平台
+纯电动、混合动力、氢燃料电池等新能源汽车展示试驾
+5G-V2X、OTA升级、智能座舱、车载娱乐系统展示体验
+工业4.0、数字孪生、柔性生产线、智能工厂解决方案
+三天展会,百场活动,不容错过
+开幕日
+技术日
+商务日
+加入我们,共创新能源汽车产业未来
+