fix: 修复TypeScript配置错误并更新项目文档

详细说明: - 修复了@n8n/config包的TypeScript配置错误 - 移除了不存在的jest-expect-message类型引用 - 清理了所有TypeScript构建缓存 - 更新了可行性分析文档，添加了技术实施方案 - 更新了Agent prompt文档 - 添加了会展策划工作流文档 - 包含了n8n-chinese-translation子项目 - 添加了exhibition-demo展示系统框架
2025-09-08 10:49:45 +08:00
parent 8cf9d36d81
commit 3db7af209c
426 changed files with 71699 additions and 4401 deletions
--- a/web_frontend/doc/会展策划工作流.md
+++ b/web_frontend/doc/会展策划工作流.md
@@ -0,0 +1,145 @@
+# 会展策划专家系统工作流
+
+## 工作流架构图
+
+```mermaid
+graph TB
+    %% 定义节点样式
+    classDef chatNode fill:#4a5568,stroke:#718096,color:#fff,stroke-width:2px
+    classDef triggerNode fill:#d69e2e,stroke:#ecc94b,color:#fff,stroke-width:2px
+    classDef splitNode fill:#805ad5,stroke:#9f7aea,color:#fff,stroke-width:2px
+    classDef notionNode fill:#e53e3e,stroke:#fc8181,color:#fff,stroke-width:2px
+    classDef summaryNode fill:#2b6cb0,stroke:#4299e1,color:#fff,stroke-width:3px
+    
+    %% 节点定义
+    Start[["🗨️ When chat message<br/>received"]]:::triggerNode
+    
+    %% 第一阶段：专业分析
+    subgraph Phase1 [" 第一阶段：专业分析 "]
+        Expert1["🔗 设计专家<br/>Google Gemini Chat<br/>Model2"]:::chatNode
+        Expert2["🔗 财务预算专家<br/>DeepSeek Chat<br/>Model2"]:::chatNode
+        Expert3["🔗 信息检索专家<br/>DeepSeek Chat<br/>Model5"]:::chatNode
+    end
+    
+    %% 中心汇总节点
+    Summary["📝 会展策划专家<br/>Chat Models + Memories<br/>(汇总与协调)"]:::summaryNode
+    
+    %% 第二阶段：执行规划
+    subgraph Phase2 [" 第二阶段：执行规划 "]
+        Expert4["🔗 格式编辑专家<br/>DeepSeek Chat<br/>Model4"]:::chatNode
+        Expert5["🔗 活动执行专家<br/>DeepSeek Chat<br/>Model1"]:::chatNode
+        Expert6["🔗 营销宣传专家<br/>DeepSeek Chat<br/>Model3"]:::chatNode
+    end
+    
+    %% 输出节点
+    Split["⚡ Split Out<br/>(输出分流)"]:::splitNode
+    Notion["📕 存储<br/>Create Page<br/>(Notion)"]:::notionNode
+    
+    %% 连接关系 - 第一阶段
+    Start --> Expert1
+    Start --> Expert2
+    Start --> Expert3
+    
+    Expert1 --> Summary
+    Expert2 --> Summary
+    Expert3 --> Summary
+    
+    %% 连接关系 - 第二阶段
+    Summary --> Expert4
+    Summary --> Expert5
+    Summary --> Expert6
+    
+    Expert4 --> Summary
+    Expert5 --> Summary
+    Expert6 --> Summary
+    
+    %% 输出连接
+    Summary --> Split
+    Split --> Notion
+```
+
+## 工作流说明
+
+### 整体架构
+这是一个**双向循环的专家系统工作流**，采用中心化协调模式，通过多个专业AI模型协同工作，完成复杂的会展策划任务。
+
+### 核心组件
+
+#### 1. 触发器 (Trigger)
+- **组件**: When chat message received
+- **功能**: 接收用户输入，启动整个工作流程
+
+#### 2. 第一阶段专家组
+- **设计专家** (Google Gemini Chat Model2)
+  - 负责展会视觉设计、空间布局
+  - 品牌形象和创意方案
+  
+- **财务预算专家** (DeepSeek Chat Model2)
+  - 成本核算与预算规划
+  - 投资回报率分析
+  
+- **信息检索专家** (DeepSeek Chat Model5)
+  - 市场调研和数据收集
+  - 竞品分析和行业趋势
+
+#### 3. 中央协调器
+- **会展策划专家** (Chat Models + Memories)
+  - 汇总各专家意见
+  - 协调不同领域的建议
+  - 维护上下文记忆
+  - 生成综合策划方案
+
+#### 4. 第二阶段专家组
+- **格式编辑专家** (DeepSeek Chat Model4)
+  - 文档格式化和排版
+  - 确保输出规范性
+  
+- **活动执行专家** (DeepSeek Chat Model1)
+  - 制定执行计划
+  - 时间线和任务分配
+  
+- **营销宣传专家** (DeepSeek Chat Model3)
+  - 推广策略制定
+  - 媒体渠道规划
+
+#### 5. 输出处理
+- **Split Out**: 将最终方案分流输出
+- **Notion存储**: 将策划方案保存到Notion页面
+
+### 工作流特点
+
+1. **双向循环机制**
+   - 第一阶段：收集专业意见
+   - 中央处理：汇总协调
+   - 第二阶段：细化执行
+   - 反馈优化：返回中央节点
+
+2. **多模型协同**
+   - 使用不同的AI模型处理不同专业领域
+   - Google Gemini用于创意设计
+   - DeepSeek用于逻辑分析和执行
+
+3. **记忆保持**
+   - 中央节点维护对话历史
+   - 确保上下文连贯性
+
+4. **结构化输出**
+   - 通过格式编辑专家规范化输出
+   - 自动存储到知识管理系统
+
+## 使用场景
+
+适用于：
+- 大型展会策划
+- 商业活动组织
+- 品牌发布会
+- 行业峰会论坛
+- 产品展示会
+
+## 优势
+
+1. **专业性**: 每个领域都有专门的AI专家处理
+2. **全面性**: 覆盖策划的各个方面
+3. **协调性**: 中央节点确保各部分协调一致
+4. **可追溯**: 所有决策过程都有记录
+5. **自动化**: 减少人工干预，提高效率
--- a/web_frontend/doc/可行性分析.md
+++ b/web_frontend/doc/可行性分析.md
@@ -1,10 +1,65 @@
-# 需求评估
+# 会展策划多Agent演示系统 - 技术实施方案

-我现在想做一个演示的DEMO，
+## 项目定义
+构建一个基于React的Web演示系统，实时展示多Agent协同生成会展策划方案的完整过程。
+
+## 技术决策
+- **框架**: React 18 + TypeScript
+- **动画**: Framer Motion + CSS Animations  
+- **样式**: Tailwind CSS (参考字节跳动、Flowith、Raycast设计风格)
+- **状态管理**: Zustand
+- **构建工具**: Vite
+
+## 演示参数
+- **总时长**: 3分钟
+- **文字生成速度**: 30-40字/秒
+- **Agent Prompt展示**: 完整展示，逐步显示
+- **交互控制**: 暂时不支持跳过，保证演示完整性
+
+## 设计风格指南
+- **视觉风格**: 简洁实用、年轻化、高端感
+- **参考产品**: 火山引擎、Trea、Flowith、Raycast
+- **核心特征**: 
+  - 精致的微动画
+  - 清晰的信息层级
+  - 中性色调搭配品牌色
+  - 优雅的过渡效果


-模拟一个Agent生成状态
+## 内容板块
+网页的Page形式按照一级标题进行独立输出，每一个一级标题都是一个独立页面

+分为
+- 策划案
+- 展会介绍与预期效果
+- 营销方案
+- 现场运营方案
+- 预算与收益分析
+- 风险评估与应急预案
+
+这个六个页面是必须要创建的
+
+## 演示流程
+- 可以先出一个页面，上面有一个run的按钮
+- 当点击run按钮的时候，开始执行mermaid的流程，每个流程独立输出对应Agent的Prompt，加一些延迟和loading动画，让它像终端生成一样生成每个内容的文字内容和图片内容
+- 需要增加文字生成的动画
+- 图片加载的时候，需要有loading转圈的动画，模拟延迟
+  
+## 整体目标
+其实就是仿真模拟出一个多Agent生成各个方案的一个演示动画
+
+## 页面内容完善
+
+- 创建一个TODO清单，扩展每个一级标题中信息缺失和不完善的部分
+
+- 让每个板块中的内容更加充实，符合现实业务场景，尽可能多
+
+## 构建网页规范
+
+- 在构建网页的时候需要满足参考claude.md中的superdesign规范
+- 现代化网页，符合UX设计规范的交互
+
+## Agent角色
 **Agent的角色有**

 1.信息检索专家:`web_frontend/data/Agent_prompt/信息检索专家.md`
@@ -20,7 +75,3 @@
 6.活动执行专家:`web_frontend/data/Agent_prompt/活动执行专家.md`

 7.营销宣传专家:`web_frontend/data/Agent_prompt/会展营销宣传专家.md`
-
-
-# 演示输出文档
-https://www.notion.so/266405c1652381f9b607ecd178ad93dd
--- a/web_frontend/doc/可行性分析_优化版.md
+++ b/web_frontend/doc/可行性分析_优化版.md
@@ -0,0 +1,385 @@
+# 会展策划多Agent演示系统 - 需求与可行性分析文档
+
+## 一、项目概述
+
+### 1.1 项目背景
+基于n8n工作流平台构建的多Agent协作系统，需要创建一个Web演示界面，直观展示AI Agent协同生成会展策划方案的完整过程。
+
+### 1.2 项目目标
+- **主要目标**：构建一个高保真的多Agent协作演示系统
+- **演示效果**：实时展示7个专业AI Agent协同工作，生成完整的汽车展会策划方案
+- **用户体验**：提供流畅的动画效果和交互体验，让观众理解Agent协作机制
+
+### 1.3 项目范围
+- **核心功能**：Agent工作流可视化、内容生成动画、成果展示
+- **演示内容**：基于`web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
+- **技术边界**：前端演示系统，不涉及真实的AI调用
+
+---
+
+## 二、需求分析
+
+### 2.1 功能需求
+
+#### 2.1.1 核心功能模块
+
+| 模块 | 功能描述 | 优先级 |
+|------|---------|--------|
+| **启动界面** | 展示系统介绍，提供"开始演示"按钮 | P0 |
+| **工作流可视化** | 基于Mermaid图动态展示Agent协作流程 | P0 |
+| **Agent执行动画** | 展示每个Agent的输入/输出，模拟思考过程 | P0 |
+| **内容生成展示** | 打字机效果展示文本，渐显效果展示图片 | P0 |
+| **成果展示页面** | 分页展示6个策划模块的完整内容 | P0 |
+| **进度指示器** | 显示当前执行阶段和整体进度 | P1 |
+| **交互控制** | 暂停/继续/重新开始功能 | P1 |
+
+#### 2.1.2 Agent角色定义
+
+```javascript
+const agents = {
+  "信息检索专家": {
+    icon: "🔍",
+    model: "DeepSeek Chat Model5",
+    role: "市场调研、数据收集、竞品分析",
+    promptFile: "web_frontend/data/Agent_prompt/信息检索专家.md"
+  },
+  "设计专家": {
+    icon: "🎨",
+    model: "Google Gemini Chat Model2",
+    role: "视觉设计、空间布局、品牌形象",
+    promptFile: "web_frontend/data/Agent_prompt/设计师专家.md"
+  },
+  "财务预算专家": {
+    icon: "💰",
+    model: "DeepSeek Chat Model2",
+    role: "成本核算、预算规划、ROI分析",
+    promptFile: "web_frontend/data/Agent_prompt/财务预算专家.md"
+  },
+  "格式编辑专家": {
+    icon: "📝",
+    model: "DeepSeek Chat Model4",
+    role: "文档格式化、内容结构优化",
+    promptFile: "web_frontend/data/Agent_prompt/格式编辑专家.md"
+  },
+  "活动执行专家": {
+    icon: "⚡",
+    model: "DeepSeek Chat Model1",
+    role: "执行计划、时间线管理、任务分配",
+    promptFile: "web_frontend/data/Agent_prompt/活动执行专家.md"
+  },
+  "营销宣传专家": {
+    icon: "📢",
+    model: "DeepSeek Chat Model3",
+    role: "推广策略、媒体规划、品牌传播",
+    promptFile: "web_frontend/data/Agent_prompt/会展营销宣传专家.md"
+  },
+  "会展策划专家": {
+    icon: "🎯",
+    model: "Chat Models + Memories",
+    role: "中央协调、方案整合、决策支持",
+    promptFile: "web_frontend/data/Agent_prompt/会展策划专家.md"
+  }
+}
+```
+
+### 2.2 内容需求
+
+#### 2.2.1 展示内容结构
+
+```yaml
+展会策划方案:
+  1. 策划案概述:
+     - 封面信息
+     - 策划背景
+     - 策划目的
+     - 策划依据
+     
+  2. 展会介绍与预期效果:
+     - 展会主题
+     - 展会地址
+     - 展品范围
+     - 目标参展商/观众
+     - 预计规模
+     - 预期效果
+     
+  3. 营销方案:
+     - 整体推广策略
+     - 线下推广方案
+     - 线上推广方案
+     - 精准邀请与对接
+     
+  4. 现场运营方案:
+     - 展区规划
+     - 现场服务
+     - 活动安排
+     - 展陈设计
+     
+  5. 预算与收益分析:
+     - 支出预算明细
+     - 收入预算明细
+     - 收益预测
+     - 投资回报率
+     
+  6. 风险评估与应急预案:
+     - 风险分析矩阵
+     - 应对措施
+     - 应急预案
+     - 保障体系
+```
+
+### 2.3 交互需求
+
+#### 2.3.1 用户流程
+
+```mermaid
+graph LR
+    A[访问页面] --> B[查看介绍]
+    B --> C[点击开始演示]
+    C --> D[观看Agent协作]
+    D --> E[查看生成内容]
+    E --> F[浏览完整方案]
+    F --> G[重新演示/退出]
+```
+
+#### 2.3.2 动画效果需求
+
+| 动画类型 | 应用场景 | 实现方式 | 时长 |
+|---------|---------|---------|------|
+| **淡入淡出** | Agent切换 | CSS transition | 0.3s |
+| **打字机效果** | 文本生成 | JavaScript逐字显示 | 30-50字/秒 |
+| **流光效果** | 工作流连线 | SVG animation | 持续 |
+| **加载动画** | 图片加载 | CSS spinner | 1-2s |
+| **进度条** | 整体进度 | CSS/JS动态更新 | 实时 |
+| **脉冲效果** | 当前Active Agent | CSS animation | 持续 |
+
+### 2.4 非功能需求
+
+#### 2.4.1 性能要求
+- 页面加载时间 < 3秒
+- 动画帧率 ≥ 30fps
+- 响应时间 < 200ms
+
+#### 2.4.2 兼容性要求
+- 浏览器：Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
+- 分辨率：1366x768 ~ 3840x2160
+- 设备：桌面端优先，平板端适配
+
+#### 2.4.3 设计规范
+- 遵循`claude.md`中的superdesign规范
+- 采用现代化UI设计语言
+- 保持视觉一致性和品牌调性
+
+---
+
+## 三、技术方案
+
+### 3.1 技术栈选择
+
+```javascript
+const techStack = {
+  framework: "React 18 / Vue 3",
+  styling: "Tailwind CSS + Framer Motion",
+  stateManagement: "Zustand / Pinia",
+  visualization: "D3.js / Mermaid.js",
+  animation: "GSAP / Lottie",
+  build: "Vite",
+  deployment: "Vercel / Netlify"
+}
+```
+
+### 3.2 架构设计
+
+```mermaid
+graph TB
+    subgraph Frontend[前端架构]
+        UI[UI层]
+        State[状态管理]
+        Animation[动画引擎]
+        Data[数据层]
+    end
+    
+    subgraph Components[核心组件]
+        Workflow[工作流组件]
+        Agent[Agent组件]
+        Content[内容展示组件]
+        Control[控制组件]
+    end
+    
+    UI --> State
+    State --> Animation
+    Animation --> Data
+    
+    Workflow --> Agent
+    Agent --> Content
+    Content --> Control
+```
+
+### 3.3 数据流设计
+
+```typescript
+interface DemoState {
+  // 演示状态
+  status: 'idle' | 'running' | 'paused' | 'completed'
+  currentPhase: number
+  currentAgent: string
+  progress: number
+  
+  // Agent状态
+  agents: {
+    [key: string]: {
+      status: 'waiting' | 'thinking' | 'generating' | 'done'
+      input: string
+      output: string
+      startTime: number
+      endTime: number
+    }
+  }
+  
+  // 内容状态
+  generatedContent: {
+    [section: string]: {
+      title: string
+      content: string
+      images: string[]
+      isComplete: boolean
+    }
+  }
+  
+  // 控制状态
+  controls: {
+    speed: number  // 1-5倍速
+    autoAdvance: boolean
+    showDetails: boolean
+  }
+}
+```
+
+---
+
+## 四、实施计划
+
+### 4.1 开发阶段
+
+| 阶段 | 任务 | 工时 | 依赖 |
+|------|------|------|------|
+| **Phase 1** | 环境搭建、基础框架 | 4h | - |
+| **Phase 2** | 工作流可视化组件 | 8h | Phase 1 |
+| **Phase 3** | Agent执行动画 | 12h | Phase 2 |
+| **Phase 4** | 内容生成展示 | 8h | Phase 3 |
+| **Phase 5** | 成果展示页面 | 6h | Phase 4 |
+| **Phase 6** | 交互优化、调试 | 6h | Phase 5 |
+| **总计** | - | **44h** | - |
+
+### 4.2 内容准备
+
+```yaml
+需要完善的内容:
+  1. Agent Prompts:
+     - 确保每个Agent的prompt文件完整
+     - 添加具体的输入输出示例
+     
+  2. 演示数据:
+     - 完善汽车展会策划案内容
+     - 准备配图资源（至少20张）
+     - 编写Agent对话脚本
+     
+  3. 文案优化:
+     - 系统介绍文案
+     - 操作引导文案
+     - 加载提示文案
+```
+
+---
+
+## 五、风险评估
+
+### 5.1 技术风险
+
+| 风险项 | 概率 | 影响 | 应对措施 |
+|--------|------|------|----------|
+| 动画性能问题 | 中 | 高 | 使用CSS动画优先，避免复杂计算 |
+| 浏览器兼容性 | 低 | 中 | 使用成熟框架，充分测试 |
+| 内容加载慢 | 中 | 中 | 实施懒加载，CDN加速 |
+
+### 5.2 内容风险
+
+| 风险项 | 概率 | 影响 | 应对措施 |
+|--------|------|------|----------|
+| 内容不完整 | 高 | 高 | 提前准备，建立内容审核机制 |
+| Agent逻辑不清 | 中 | 高 | 详细设计Agent交互脚本 |
+| 演示时间过长 | 中 | 中 | 提供快进功能，优化内容长度 |
+
+---
+
+## 六、成功标准
+
+### 6.1 功能完成度
+- [ ] 所有P0功能100%实现
+- [ ] P1功能至少80%实现
+- [ ] 无阻塞性bug
+
+### 6.2 用户体验
+- [ ] 演示流程流畅，无明显卡顿
+- [ ] 动画效果自然，符合预期
+- [ ] 内容展示清晰，易于理解
+
+### 6.3 演示效果
+- [ ] 能够完整展示Agent协作过程
+- [ ] 生成内容质量高，业务逻辑合理
+- [ ] 观众能够理解系统价值
+
+---
+
+## 七、附录
+
+### 7.1 参考资源
+- 工作流定义：`web_frontend/doc/会展策划工作流.md`
+- 演示内容：`web_frontend/data/会展策划/汽车展会展策划案_DEMO.md`
+- Agent定义：`web_frontend/data/Agent_prompt/`
+- 设计规范：`claude.md` (superdesign section)
+
+### 7.2 关键决策点
+
+需要与您确认的问题：
+
+1. **技术栈选择**
+   - 倾向于React还是Vue？
+   - 是否需要SSR支持？
+
+2. **演示节奏**
+   - 完整演示时长目标？(建议3-5分钟)
+   - 是否需要支持手动控制每个步骤？
+
+3. **内容深度**
+   - 每个Agent输出内容的详细程度？
+   - 是否需要展示完整的prompt和response？
+
+4. **视觉风格**
+   - 偏向科技感还是商务风？
+   - 颜色主题偏好？
+
+5. **部署方式**
+   - 静态部署还是需要后端支持？
+   - 是否需要数据统计功能？
+
+### 7.3 下一步行动
+
+1. **立即行动**
+   - 确认技术方案
+   - 完善内容素材
+   - 搭建开发环境
+
+2. **短期目标**（1周内）
+   - 完成核心功能开发
+   - 实现基础动画效果
+
+3. **长期优化**
+   - 性能优化
+   - 用户反馈收集
+   - 迭代改进
+
+---
+
+*文档版本：v2.0*
+*更新时间：2025-09-08*
+*负责人：[待定]*