1564396449
详细说明: - 添加了V2版本的工作流页面和结果页面 - 更新了Serena记忆文件 - 添加了详细实施计划文档 - 优化了Vite配置 - 更新了项目文档CLAUDE.md - 构建了演示系统的dist版本 - 包含了exhibition-demo的完整依赖
13 KiB
13 KiB
AI会展策划多Agent演示系统 - 详细实施计划
一、系统架构设计
1.1 核心模块划分
演示系统
├── 启动页模块
│ ├── 系统介绍
│ ├── Agent团队展示
│ └── 开始演示入口
├── 工作流演示模块
│ ├── Agent协作可视化
│ ├── 执行状态管理
│ ├── 内容生成动画
│ └── 进度控制
└── 结果展示模块
├── 策划方案展示
├── 内容导航
└── 导出功能
1.2 数据流设计
// 演示流程时序
const demoSequence = {
phase1: {
duration: 60000, // 60秒
agents: [
{
id: 'retrieval',
startTime: 0,
duration: 8000,
prompt: '分析2024长三角新能源汽车市场现状...',
output: '市场调研报告：\n1. 产业规模：...\n2. 主要企业：...'
},
{
id: 'design',
startTime: 2000,
duration: 8000,
prompt: '设计展会视觉方案和空间布局...',
output: '设计方案：\n1. 主视觉：科技蓝绿配色...\n2. 展区布局：...'
},
{
id: 'budget',
startTime: 4000,
duration: 8000,
prompt: '制定展会预算方案...',
output: '预算方案：\n总预算：900万元\n收入预期：1200万元...'
}
]
},
phase2: {
duration: 60000,
coordinator: {
startTime: 12000,
duration: 10000,
prompt: '整合各专家意见，形成初步方案...',
output: '综合方案框架已生成...'
}
},
phase3: {
duration: 60000,
agents: [
{
id: 'format',
startTime: 24000,
duration: 8000,
prompt: '优化文档格式和结构...',
output: '格式优化完成，生成标准策划文档...'
},
{
id: 'execution',
startTime: 26000,
duration: 8000,
prompt: '制定执行计划和时间表...',
output: '执行计划：\nD-90：启动招商\nD-60：媒体推广...'
},
{
id: 'marketing',
startTime: 28000,
duration: 8000,
prompt: '设计营销推广方案...',
output: '营销策略：\n1. 线上：社交媒体矩阵\n2. 线下：行业展会推广...'
}
]
}
};
二、界面详细设计
2.1 启动页设计
┌──────────────────────────────────────────────────────────┐
│ │
│ [动画Logo] │
│ │
│ AI 会展策划多Agent系统 │
│ │
│ 7个专业Agent × 智能协作 × 3分钟演示 │
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ Agent 团队 │ │
│ │ 🔍信息检索 🎨设计 💰财务 📝格式 │ │
│ │ ⚡执行 📢营销 🎯协调 │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ 演示案例预览 │ │
│ │ 项目：2024长三角新能源汽车展 │ │
│ │ 规模：50,000㎡ | 350展商 | 50,000人次 │ │
│ │ 时长：约3分钟完整演示 │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ [✨ 开始演示] [📖 了解更多] │
│ │
└──────────────────────────────────────────────────────────┘
2.2 工作流演示页设计
┌──────────────────────────────────────────────────────────┐
│ AI会展策划系统 ⏸暂停 ↻重置 00:45 / 03:00 │
├──────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────── 工作流状态 ──────────────┐ │
│ │ │ │
│ │ ①──→②──→③ │ │
│ │ ↘ ↓ ↙ │ │
│ │ ⑦ │ │
│ │ ↗ ↑ ↖ │ │
│ │ ④──→⑤──→⑥ │ │
│ │ │ │
│ │ ① 信息检索 ✓ ④ 格式编辑 ⚡ │ │
│ │ ② 设计专家 ✓ ⑤ 执行专家 ○ │ │
│ │ ③ 财务预算 ✓ ⑥ 营销专家 ○ │ │
│ │ ⑦ 策划协调 ⚡ │ │
│ └──────────────────────────────────────────┘ │
│ │
│ ┌─────────────── 当前执行 ────────────────┐ │
│ │ 📝 格式编辑专家 │ │
│ │ Model: DeepSeek Chat Model4 │ │
│ │ │ │
│ │ [Prompt] │ │
│ │ 请根据前期收集的信息，优化文档格式... │ │
│ │ 要求： │ │
│ │ 1. 标准化章节结构 │ │
│ │ 2. 统一术语表达█ │ │
│ │ │ │
│ │ [输出] │ │
│ │ 正在优化文档结构... │ │
│ │ ✓ 第一章：策划案概述 │ │
│ │ ⚡ 第二章：展会介绍█ │ │
│ └──────────────────────────────────────────┘ │
│ │
│ ┌─────────────── 内容预览 ────────────────┐ │
│ │ 📄 策划案概述 [████████] 100% │ │
│ │ 📄 展会介绍 [████░░░░] 45% │ │
│ │ 📄 营销方案 [░░░░░░░░] 0% │ │
│ │ 📄 现场运营 [░░░░░░░░] 0% │ │
│ │ 📄 预算分析 [░░░░░░░░] 0% │ │
│ │ 📄 风险评估 [░░░░░░░░] 0% │ │
│ └──────────────────────────────────────────┘ │
│ │
│ 总进度 [████████████░░░░░░░░░░░░░░] 40% │
└──────────────────────────────────────────────────────────┘
2.3 动画效果设计
2.3.1 Agent激活动画
// Agent节点激活效果
const agentActivation = {
idle: {
scale: 1,
opacity: 0.6,
border: '2px solid #e5e5e5'
},
active: {
scale: 1.2,
opacity: 1,
border: '3px solid #3b82f6',
animation: 'pulse 2s infinite',
glow: '0 0 20px rgba(59, 130, 246, 0.5)'
},
completed: {
scale: 1,
opacity: 1,
border: '2px solid #10b981',
checkmark: '✓'
}
};
2.3.2 文字生成动画
// 打字机效果配置
const typewriterConfig = {
speed: 35, // 35字/秒
cursor: '█',
cursorBlink: 500, // 光标闪烁间隔
lineDelay: 100, // 换行延迟
punctuationDelay: 200 // 标点停顿
};
2.3.3 工作流连线动画
// 数据流动效果
const flowAnimation = {
path: 'M0,0 L100,0',
strokeDasharray: '5,5',
animation: 'flow 2s linear infinite',
gradient: 'linear-gradient(90deg, #3b82f6, #8b5cf6)'
};
三、具体实现步骤
Phase 1: 数据准备（30分钟）
- Agent Prompt数据
const agentPrompts = {
retrieval: {
prompt: `作为信息检索专家，请分析以下需求：
1. 调研长三角地区新能源汽车产业现状
2. 收集主要参展商信息
3. 分析竞品展会数据
输出格式：结构化的市场分析报告`,
expectedOutput: `市场分析报告：
一、产业现状
- 长三角新能源汽车产量占全国40%
- 主要企业：特斯拉、蔚来、理想等
二、参展商分析
- 预计参展企业350家
- 国际品牌占比30%`
},
// ... 其他6个Agent的prompt
};
- 生成内容数据
const generatedContent = {
overview: {
title: '策划案概述',
sections: [
{
subtitle: '展会背景',
content: '在全球碳中和目标推动下...',
images: ['image1.jpg']
}
]
},
// ... 其他5个板块
};
Phase 2: 核心功能开发（2小时）
- 演示控制器
class DemoController {
constructor() {
this.currentPhase = 0;
this.currentAgent = null;
this.elapsedTime = 0;
this.isPaused = false;
}
start() {
this.timer = setInterval(() => {
if (!this.isPaused) {
this.tick();
}
}, 100);
}
tick() {
this.elapsedTime += 100;
this.updateAgentStates();
this.updateContent();
this.updateProgress();
}
}
- Agent状态管理
class AgentManager {
activateAgent(agentId) {
// 1. 更新视觉状态
// 2. 显示Prompt
// 3. 开始输出动画
// 4. 更新工作流连线
}
completeAgent(agentId) {
// 1. 标记完成
// 2. 传递数据到下一个Agent
// 3. 更新进度
}
}
- 内容生成器
class ContentGenerator {
typeWriter(text, element, speed = 35) {
let index = 0;
const interval = setInterval(() => {
if (index < text.length) {
element.textContent += text[index];
index++;
} else {
clearInterval(interval);
}
}, 1000 / speed);
}
}
Phase 3: UI实现（1小时）
- 使用单HTML文件架构
- 集成Tailwind CSS
- 实现响应式布局
- 添加动画效果
Phase 4: 测试优化（30分钟）
- 时序调试
- 动画流畅度优化
- 内容完整性检查
- 交互响应测试
四、关键技术点
4.1 状态同步
- 使用单一状态源管理所有Agent状态
- 确保动画与数据同步
- 实时更新UI反馈
4.2 性能优化
- 使用requestAnimationFrame优化动画
- 懒加载图片资源
- 防抖处理用户交互
4.3 用户体验
- 平滑的过渡动画
- 清晰的进度指示
- 可控的演示节奏
五、交付标准
-
功能完整性
- 完整的3分钟演示流程
- 7个Agent全部展示
- 6个内容板块生成
-
视觉效果
- 流畅的动画效果
- 符合设计规范的UI
- 响应式布局适配
-
代码质量
- 模块化设计
- 注释完整
- 易于维护扩展
六、时间安排
总计：4小时
- 0:00-0:30 数据准备
- 0:30-2:30 核心功能开发
- 2:30-3:30 UI实现
- 3:30-4:00 测试优化
七、风险控制
-
时序控制风险
- 方案：预设固定时间节点
- 备选：手动控制模式
-
动画性能风险
- 方案：降级处理
- 备选：减少并发动画
-
内容展示风险
- 方案：预加载所有内容
- 备选：分段加载