3db7af209c
详细说明: - 修复了@n8n/config包的TypeScript配置错误 - 移除了不存在的jest-expect-message类型引用 - 清理了所有TypeScript构建缓存 - 更新了可行性分析文档，添加了技术实施方案 - 更新了Agent prompt文档 - 添加了会展策划工作流文档 - 包含了n8n-chinese-translation子项目 - 添加了exhibition-demo展示系统框架
385 lines
9.7 KiB
Markdown
385 lines
9.7 KiB
Markdown
# 会展策划多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*
|
||
*负责人：[待定]* |