xiaoqi/n8n_Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成化工订单班图片处理和项目记忆重组

Browse Source 
详细说明:
- 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致）
- 完成环保、财经商贸订单班的图片重命名工作
- 重组项目记忆文件，按照功能模块编号（00-09）
- 删除旧的分散记忆文件，统一到新的编号体系
- 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts
- 清理web_result冗余文件（food react-app等）
- 新增playwright截图记录和记忆文档
- 影响模块：订单班文档资料、项目记忆系统、终端模拟系统
This commit is contained in:
Yep_Q
2025-10-04 00:34:44 +08:00
parent b50d700a2e
commit c579dae90a
172 changed files with 11168 additions and 11387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

333
web_frontend/exhibition-demo/src/data/terminalSimulations/chemical.ts Normal file
View File

@@ -0,0 +1,333 @@
/**
* 化工订单班 - 终端模拟数据
* 半导体AI综合检测项目
*/
import { Agent } from '@/store/demoStore';
import { SimulationData, TerminalLine, AgentOutput } from './index';
// 化工订单班专属Agent配置
const chemicalAgents: Agent[] = [
{
id: 'project_manager',
name: '项目经理',
icon: '👔',
avatar: '/data/订单班文档资料/化工/agent头像/质量标准与合规专家.jpg',
model: 'GPT-4',
role: '项目统筹与进度管理',
status: 'waiting',
},
{
id: 'ai_algorithm_engineer',
name: 'AI算法工程师',
icon: '🤖',
avatar: '/data/订单班文档资料/化工/agent头像/检测工程师1+2.jpg',
model: 'GPT-4',
role: 'AI模型训练与优化',
status: 'waiting',
},
{
id: 'senior_detection_engineer',
name: '高级检测工程师',
icon: '🔬',
avatar: '/data/订单班文档资料/化工/agent头像/检测工程师1+2.jpg',
model: 'Claude-3',
role: '检测方案设计与实施',
status: 'waiting',
},
{
id: 'optical_inspector',
name: '光电检测员',
icon: '📷',
avatar: '/data/订单班文档资料/化工/agent头像/检测技术员.jpg',
model: 'GPT-3.5',
role: '外观缺陷识别与量化',
status: 'waiting',
},
{
id: 'data_analyst',
name: '数据分析师',
icon: '📊',
avatar: '/data/订单班文档资料/化工/agent头像/检测技术员.jpg',
model: 'GPT-4',
role: '数据处理与报告生成',
status: 'waiting',
},
{
id: 'quality_expert',
name: '质量管理专家',
icon: '✅',
avatar: '/data/订单班文档资料/化工/agent头像/质量标准与合规专家.jpg',
model: 'Claude-3',
role: '质量标准制定与审核',
status: 'waiting',
},
];
export const chemicalSimulation = (): SimulationData => {
const startupSequence: TerminalLine[] = [
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
{ type: 'system', content: '初始化半导体检测环境...' },
{ type: 'system', content: '加载项目需求：300mm硅晶圆+表面SiO₂薄膜质量检测' },
{ type: 'info', content: '🎯 检测目标：单批次快速质量判定，AI主导检测流程' },
{ type: 'info', content: '📏 样品规格：300mm P型硅晶圆，SiO₂薄膜15.0±0.3nm' },
{ type: 'info', content: '🔍 检测项目：外观、薄膜、电学、成分四大类' },
{ type: 'info', content: '⚡ 效率要求：单片5-6分钟，全批20片≤2小时' },
{ type: 'info', content: '📈 质量标准：ISO 5洁净室，CMA/CNAS双认证' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在组建6人专家团队...' },
{ type: 'success', content: '✓ 项目经理就位' },
{ type: 'success', content: '✓ AI算法工程师就位' },
{ type: 'success', content: '✓ 高级检测工程师就位' },
{ type: 'success', content: '✓ 光电检测员就位' },
{ type: 'success', content: '✓ 数据分析师就位' },
{ type: 'success', content: '✓ 质量管理专家就位' },
{ type: 'system', content: '' },
{ type: 'system', content: '开始多Agent协作流程...' },
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
];
const agentSequence: AgentOutput[] = [
{
agent: () => chemicalAgents[0],
outputs: [
{ type: 'system', content: '>>> Agent-1: 项目经理初始化...' },
{ type: 'info', content: '👔 项目经理启动项目规划...' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在加载项目配置...' },
{ type: 'system', content: '' },
{ type: 'output', content: '项目基本信息:' },
{ type: 'output', content: ' • 检测单位：XX半导体第三方实验室' },
{ type: 'output', content: ' • 批次规模：20片/批，同批随机抽样' },
{ type: 'output', content: ' • 报告编号：AI-QC-202410-001' },
{ type: 'system', content: '' },
{ type: 'output', content: '检测环境配置:' },
{ type: 'output', content: ' • 洁净等级：ISO 5洁净室' },
{ type: 'output', content: ' • 温湿度控制：22±1℃，45±5%' },
{ type: 'output', content: ' • 粒子监控：实时稳定监测' },
{ type: 'system', content: '' },
{ type: 'output', content: 'AI系统设置:' },
{ type: 'output', content: ' • 可信度阈值：≥0.90合格，0.80-0.90观察，<0.80复核' },
{ type: 'output', content: ' • 缩点条件：前3点与AI预测偏差<2%' },
{ type: 'output', content: ' • 自动化程度：95%（仅低可信时人工介入）' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 项目规划完成，团队分工明确' },
]
},
{
agent: () => chemicalAgents[1],
outputs: [
{ type: 'system', content: '>>> Agent-2: AI算法工程师初始化...' },
{ type: 'info', content: '🤖 AI算法工程师配置检测模型...' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在加载深度学习模型...' },
{ type: 'system', content: 'CUDA环境检测: Available' },
{ type: 'system', content: 'GPU内存分配: 8GB' },
{ type: 'system', content: '' },
{ type: 'output', content: 'AI引擎架构:' },
{ type: 'output', content: ' • 视觉模型：YOLOv8缺陷检测' },
{ type: 'output', content: ' • 数据清洗：自动去噪、光照校正' },
{ type: 'output', content: ' • 预测模型：深度学习电学特性预测' },
{ type: 'output', content: ' • 判定引擎：多维度阈值自动比对' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/检测背景主图.jpg', imageAlt: '半导体AI检测系统架构' },
{ type: 'system', content: '' },
{ type: 'output', content: '模型优化策略:' },
{ type: 'output', content: ' • 训练数据：10万+历史样本' },
{ type: 'output', content: ' • 准确率：缺陷识别>98%' },
{ type: 'output', content: ' • 响应时间：单片判定≤45秒' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ AI模型部署完成，准确率达98.5%' },
]
},
{
agent: () => chemicalAgents[2],
outputs: [
{ type: 'system', content: '>>> Agent-3: 高级检测工程师初始化...' },
{ type: 'info', content: '🔬 高级检测工程师制定检测方案...' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在载入检测标准库...' },
{ type: 'progress', content: '加载SEMI标准', target: 100, stutters: [45, 78] },
{ type: 'progress', content: '加载国标GB/T', target: 100, stutters: [56, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '检测项目配置:' },
{ type: 'output', content: ' • 外观检测：颗粒≤35个/片，划痕≤50μm' },
{ type: 'output', content: ' • 薄膜检测：15.0±0.3nm，均匀性≤±3%' },
{ type: 'output', content: ' • 电学检测：方块电阻60±1.2Ω/□' },
{ type: 'output', content: ' • 成分检测：O/Si比2.00±0.05' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/硅晶圆检测项目.jpg', imageAlt: '硅晶圆检测项目分类' },
{ type: 'system', content: '' },
{ type: 'output', content: '测点优化方案:' },
{ type: 'output', content: ' • 标准9点法：中心1点+内环4点+外环4点' },
{ type: 'output', content: ' • AI智能缩点：前3点验证后缩减至5点' },
{ type: 'output', content: ' • 异常扩展：边缘敏感时升级至13点' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/光学镜头检测硅晶圆示意图.jpg', imageAlt: '光学检测系统示意' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 检测方案制定完成，覆盖率100%' },
]
},
{
agent: () => chemicalAgents[3],
outputs: [
{ type: 'system', content: '>>> Agent-4: 光电检测员初始化...' },
{ type: 'info', content: '📷 光电检测员执行外观检测...' },
{ type: 'system', content: '' },
{ type: 'system', content: '启动高分辨率扫描系统...' },
{ type: 'system', content: '校准光学镜头...' },
{ type: 'progress', content: '全片扫描中', target: 100, duration: 3000, stutters: [23, 56, 78, 91] },
{ type: 'system', content: '' },
{ type: 'output', content: '外观扫描参数:' },
{ type: 'output', content: ' • 扫描分辨率：0.2-0.3μm/px' },
{ type: 'output', content: ' • 检测范围：全片300mm区域' },
{ type: 'output', content: ' • 识别类型：颗粒、划痕、腐蚀坑' },
{ type: 'system', content: '' },
{ type: 'output', content: '缺陷识别结果:' },
{ type: 'output', content: ' • 颗粒检出：24个（≥0.3μm）' },
{ type: 'output', content: ' • 最大划痕：48μm（未超阈值）' },
{ type: 'output', content: ' • 腐蚀深度：最大8.6nm' },
{ type: 'output', content: ' • 缺陷分布：主要集中在第3象限外环' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/外观热力图（颗粒划痕腐蚀）.jpg', imageAlt: '外观缺陷热力分布图' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 外观检测完成，所有指标合格' },
]
},
{
agent: () => chemicalAgents[4],
outputs: [
{ type: 'system', content: '>>> Agent-5: 数据分析师初始化...' },
{ type: 'info', content: '📊 数据分析师处理测试数据...' },
{ type: 'system', content: '' },
{ type: 'system', content: '启动数据分析引擎...' },
{ type: 'system', content: '导入测量数据集...' },
{ type: 'progress', content: '数据清洗', target: 100, stutters: [34, 67] },
{ type: 'progress', content: '统计分析', target: 100, stutters: [45, 78, 92] },
{ type: 'system', content: '' },
{ type: 'output', content: '厚度测量分析:' },
{ type: 'output', content: ' • 均值：15.07nm（目标15.0nm）' },
{ type: 'output', content: ' • 均匀性：±2.6%（优于±3%标准）' },
{ type: 'output', content: ' • 偏移率：+0.47%' },
{ type: 'output', content: ' • 边缘敏感：否' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/厚度分布图.jpg', imageAlt: '薄膜厚度分布热力图' },
{ type: 'system', content: '' },
{ type: 'output', content: '电学特性分析:' },
{ type: 'output', content: ' • Rs均值：61.1Ω/□（略高于目标）' },
{ type: 'output', content: ' • 离散度：2.9Ω/□' },
{ type: 'output', content: ' • AI预测准确度：97.8%' },
{ type: 'output', content: ' • 判定：进入观察带' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/电学对比图.jpg', imageAlt: 'AI预测与实测对比分析' },
{ type: 'system', content: '' },
{ type: 'output', content: '成分抽检结果:' },
{ type: 'output', content: ' • O/Si比：2.02（目标2.00±0.05）' },
{ type: 'output', content: ' • 金属污染：<7×10⁹ atoms/cm²' },
{ type: 'output', content: ' • XPS峰位：无异常金属峰' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/成分抽检卡片.jpg', imageAlt: '成分分析检测卡片' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 数据分析完成，生成可视化报告' },
]
},
{
agent: () => chemicalAgents[5],
outputs: [
{ type: 'system', content: '>>> Agent-6: 质量管理专家初始化...' },
{ type: 'info', content: '✅ 质量管理专家进行最终审核...' },
{ type: 'system', content: '' },
{ type: 'system', content: '执行质量审核流程...' },
{ type: 'progress', content: '合规性检查', target: 100, stutters: [45, 89] },
{ type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [56, 78, 95] },
{ type: 'system', content: '' },
{ type: 'output', content: '批次检测总结:' },
{ type: 'output', content: ' • 检测完成度：100%（20片全检）' },
{ type: 'output', content: ' • 合格率：95%（19片合格，1片观察）' },
{ type: 'output', content: ' • AI可信度：平均0.94' },
{ type: 'output', content: ' • 用时统计：总计115分钟' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/化工/notion文稿/image/检测结果主图.jpg', imageAlt: '批次检测结果汇总' },
{ type: 'system', content: '' },
{ type: 'output', content: '质量判定结果:' },
{ type: 'output', content: ' ✓ 外观：合格（颗粒24个<35个）' },
{ type: 'output', content: ' ✓ 薄膜：合格（15.07nm在范围内）' },
{ type: 'output', content: ' ⚠️ 电学：观察（Rs略高但未越界）' },
{ type: 'output', content: ' ✓ 成分：合格（O/Si比正常）' },
{ type: 'system', content: '' },
{ type: 'output', content: '改进建议:' },
{ type: 'output', content: ' • 沉积时间下调1-2%降低Rs' },
{ type: 'output', content: ' • 下批优先复测边缘3点+中心1点' },
{ type: 'output', content: ' • 持续监控Rs趋势变化' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 质量审核通过，批次可放行！' },
]
},
];
const completionSequence: TerminalLine[] = [
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
{ type: 'system', content: '' },
{ type: 'success', content: '🎉 半导体AI综合检测项目圆满完成！' },
{ type: 'system', content: '' },
{ type: 'output', content: '项目成果总结:' },
{ type: 'output', content: ' • 检测效率：单片5-6分钟，批次<2小时' },
{ type: 'output', content: ' • AI准确率：98.5%，人工介入率<5%' },
{ type: 'output', content: ' • 质量保证：19/20片合格，1片观察' },
{ type: 'output', content: ' • 成本优化：人力成本降低60%' },
{ type: 'system', content: '' },
{ type: 'output', content: '交付物清单:' },
{ type: 'output', content: ' ✓ 《AI检测报告》PDF版' },
{ type: 'output', content: ' ✓ 外观热力分布图' },
{ type: 'output', content: ' ✓ 多维度数据分析图表' },
{ type: 'output', content: ' ✓ 质量改进建议书' },
{ type: 'output', content: ' ✓ 原始检测数据CSV' },
{ type: 'system', content: '' },
{ type: 'output', content: '技术亮点:' },
{ type: 'output', content: ' • AI主导：95%自动化判定' },
{ type: 'output', content: ' • 智能缩点：节省40%测试时间' },
{ type: 'output', content: ' • 实时预警：异常自动触发复核' },
{ type: 'system', content: '' },
{ type: 'success', content: '感谢6位专家的协作，为半导体制造保驾护航！' },
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
];
return {
orderClassId: 'chemical',
orderClassName: '化工',
projectTitle: '半导体AI综合检测项目',
agents: chemicalAgents,
startupSequence,
agentSequence,
completionSequence,
};
};

28
web_frontend/exhibition-demo/src/data/terminalSimulations/developer.ts
View File

@@ -123,6 +123,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '📝 需求文档撰写专员开始需求调研...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '需求调研', target: 100, stutters: [23, 45, 67, 89] },
{ type: 'progress', content: '文档生成', target: 100, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '执行需求调研与分析:' },
{ type: 'output', content: ' • 访谈K12教育机构，收集师生痛点' },
{ type: 'output', content: ' • 分析竞品平台（腾讯课堂、钉钉直播）' },
@@ -145,6 +148,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '📋 产品经理开始产品规划...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '功能设计', target: 100, stutters: [34, 56, 78] },
{ type: 'progress', content: '原型制作', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '设计产品功能矩阵:' },
{ type: 'output', content: ' 学生端：直播观看、作业提交、学习进度、错题本' },
{ type: 'output', content: ' 教师端：课程创建、直播互动、作业批改、成绩分析' },
@@ -169,6 +175,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '🏗️ 平台架构师开始系统架构设计...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '架构设计', target: 100, stutters: [23, 56, 78, 92] },
{ type: 'progress', content: '数据建模', target: 100, stutters: [34, 67] },
{ type: 'system', content: '' },
{ type: 'output', content: '设计技术架构方案:' },
{ type: 'output', content: ' 前端层：Vue3 + TypeScript + Vite + Ant Design Vue' },
{ type: 'output', content: ' 网关层：Spring Cloud Gateway + JWT认证' },
@@ -198,6 +207,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '🎨 UI设计师开始界面设计...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '视觉风格设计', target: 100, stutters: [45, 78] },
{ type: 'progress', content: '页面原型制作', target: 100, stutters: [23, 56, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '设计视觉风格:' },
{ type: 'output', content: ' • 配色方案：科技蓝 + 活力橙（符合K12教育调性）' },
{ type: 'output', content: ' • 设计规范：Material Design + 教育场景定制组件' },
@@ -227,6 +239,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '💻 前端开发工程师开始前端开发...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '组件开发', target: 100, stutters: [34, 56, 78, 95] },
{ type: 'progress', content: '页面集成', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'install', content: '安装前端依赖包...' },
{ type: 'output', content: ' npm install vue@next vue-router@4 pinia' },
{ type: 'output', content: ' npm install ant-design-vue axios' },
@@ -260,6 +275,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '⚙️ 后端开发工程师开始后端开发...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '微服务开发', target: 100, stutters: [23, 45, 67, 89] },
{ type: 'progress', content: 'API接口实现', target: 100, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '构建Spring Cloud微服务架构:' },
{ type: 'output', content: ' • gateway-service：API网关 + JWT认证' },
{ type: 'output', content: ' • user-service：用户管理 + RBAC权限' },
@@ -295,6 +313,10 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '🧪 软件测试工程师开始测试工作...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '功能测试', target: 100, stutters: [34, 56, 78, 92] },
{ type: 'progress', content: '性能测试', target: 100, stutters: [45, 89] },
{ type: 'progress', content: '安全测试', target: 100, stutters: [23, 67] },
{ type: 'system', content: '' },
{ type: 'output', content: '执行功能测试:' },
{ type: 'output', content: ' [✓] 用户注册登录：手机号/邮箱/微信三种方式' },
{ type: 'output', content: ' [✓] 课程管理：创建、编辑、删除、上传课件' },
@@ -328,6 +350,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '🎬 DEMO生成助手开始制作演示原型...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '演示脚本制作', target: 100, stutters: [23, 56, 78] },
{ type: 'progress', content: 'DEMO生成', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '生成演示视频脚本:' },
{ type: 'output', content: ' 场景1：学生端 - 注册登录 → 浏览课程 → 购买课程' },
{ type: 'output', content: ' 场景2：教师端 - 创建课程 → 开启直播 → 互动答疑' },
@@ -360,6 +385,9 @@ export const developerSimulation = (): SimulationData => ({
outputs: [
{ type: 'info', content: '📊 项目经理进行项目总结...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '项目汇总', target: 100, stutters: [34, 67, 89] },
{ type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '项目执行情况汇总:' },
{ type: 'output', content: ' • 开发周期：6个月（按计划完成）' },
{ type: 'output', content: ' • 团队规模：9人（需求1人、产品1人、架构1人、UI1人、前端3人、后端4人、测试2人）' },

366
web_frontend/exhibition-demo/src/data/terminalSimulations/environmental.ts Normal file
View File

@@ -0,0 +1,366 @@
/**
* 环保订单班 - 终端模拟数据
* 地表水环境质量考核断面水质采样监测项目
*/
import { Agent } from '@/store/demoStore';
import { SimulationData, TerminalLine, AgentOutput } from './index';
// 环保订单班专属Agent配置
const environmentalAgents: Agent[] = [
{
id: 'environmental_consultant',
name: '环境咨询师',
icon: '🌿',
avatar: '/data/订单班文档资料/环保/agent头像/环境咨询师.jpg',
model: 'GPT-4',
role: '法规解读与合规评估',
status: 'waiting',
},
{
id: 'water_sampling_expert',
name: '水质采样专家',
icon: '💧',
avatar: '/data/订单班文档资料/环保/agent头像/水质采样专家.jpg',
model: 'Claude-3',
role: '采样方案设计与技术指导',
status: 'waiting',
},
{
id: 'project_manager',
name: '环保项目经理',
icon: '📊',
avatar: '/data/订单班文档资料/环保/agent头像/环保项目经理.jpg',
model: 'GPT-4',
role: '项目统筹与进度管理',
status: 'waiting',
},
{
id: 'ehs_engineer',
name: 'EHS工程师',
icon: '⚠️',
avatar: '/data/订单班文档资料/环保/agent头像/EHS工程师.jpg',
model: 'GPT-3.5',
role: '安全评估与风险控制',
status: 'waiting',
},
{
id: 'quality_control',
name: '质量控制专家',
icon: '✅',
avatar: '/data/订单班文档资料/环保/agent头像/质量控制专家.jpg',
model: 'Claude-3',
role: '质控体系与数据验证',
status: 'waiting',
},
{
id: 'budget_expert',
name: '项目预算专家',
icon: '💰',
avatar: '/data/订单班文档资料/环保/agent头像/项目预算专家.jpg',
model: 'GPT-4',
role: '成本核算与预算控制',
status: 'waiting',
},
{
id: 'document_formatter',
name: '文案格式整理专员',
icon: '📝',
avatar: '/data/订单班文档资料/环保/agent头像/文案格式整理专员.jpg',
model: 'GPT-3.5',
role: '报告编制与文档规范',
status: 'waiting',
},
{
id: 'project_supervisor',
name: '项目主管',
icon: '🎯',
avatar: '/data/订单班文档资料/环保/agent头像/项目主管.jpg',
model: 'GPT-4',
role: '决策审核与质量把关',
status: 'waiting',
},
];
export const environmentalSimulation = (): SimulationData => {
const startupSequence: TerminalLine[] = [
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
{ type: 'system', content: '初始化环境监测管理系统...' },
{ type: 'system', content: '加载项目需求：地表水环境质量考核断面水质采样监测项目' },
{ type: 'info', content: '📍 监测地点：长江国考"长江大桥"断面' },
{ type: 'info', content: '📐 监测范围：主河道85m宽，3条采样垂线' },
{ type: 'info', content: '📊 监测指标：26项（理化、营养盐、重金属、有机物、生物）' },
{ type: 'info', content: '⏰ 监测频次：每月1次，全年12次' },
{ type: 'info', content: '🎯 质量目标：地表水Ⅲ类功能水体标准' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在组建8人专家团队...' },
{ type: 'success', content: '✓ 环境咨询师就位' },
{ type: 'success', content: '✓ 水质采样专家就位' },
{ type: 'success', content: '✓ 环保项目经理就位' },
{ type: 'success', content: '✓ EHS工程师就位' },
{ type: 'success', content: '✓ 质量控制专家就位' },
{ type: 'success', content: '✓ 项目预算专家就位' },
{ type: 'success', content: '✓ 文案格式整理专员就位' },
{ type: 'success', content: '✓ 项目主管就位' },
{ type: 'system', content: '' },
{ type: 'system', content: '开始多Agent协作流程...' },
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
];
const agentSequence: AgentOutput[] = [
{
agent: () => environmentalAgents[0],
outputs: [
{ type: 'info', content: '🌿 环境咨询师开始法规合规性评估...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '加载法规数据库', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '法规依据梳理:' },
{ type: 'output', content: ' • 《地表水环境质量标准》GB 3838-2002' },
{ type: 'output', content: ' • 《地表水监测技术规范》HJ/T 91-2022' },
{ type: 'output', content: ' • 《中华人民共和国环境保护法》' },
{ type: 'output', content: ' • 《水污染防治法》' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/中华人民共和国环境保护法截图.jpg', imageAlt: '环境保护法法规框架' },
{ type: 'system', content: '' },
{ type: 'output', content: '合规要求确认:' },
{ type: 'output', content: ' • 监测活动符合国家环保要求' },
{ type: 'output', content: ' • 数据具备法律效力' },
{ type: 'output', content: ' • 满足年度水质考核标准' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 法规合规性评估完成，项目符合所有监管要求' },
]
},
{
agent: () => environmentalAgents[1],
outputs: [
{ type: 'info', content: '💧 水质采样专家设计采样方案...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '分析水文数据', target: 100, stutters: [34, 67, 89] },
{ type: 'progress', content: '计算采样点位', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '断面布设方案:' },
{ type: 'output', content: ' • 对照断面：上游背景水质参考点' },
{ type: 'output', content: ' • 控制断面：污染源影响评估点' },
{ type: 'output', content: ' • 削减断面：下游治理效果监测点' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/长江采样布点图.jpg', imageAlt: '长江大桥断面采样布点' },
{ type: 'system', content: '' },
{ type: 'output', content: '垂线布设细化:' },
{ type: 'output', content: ' • L1左岸：距岸15m，水深3.0m' },
{ type: 'output', content: ' • C2中泓：距岸42.5m，水深5.0m' },
{ type: 'output', content: ' • R3右岸：距岸70m，水深2.8m' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/垂线分布图.jpg', imageAlt: '采样垂线分布示意' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 采样方案设计完成（3个断面×3条垂线×4个深度）' },
]
},
{
agent: () => environmentalAgents[2],
outputs: [
{ type: 'info', content: '📊 环保项目经理制定执行计划...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '分析项目需求', target: 100, stutters: [23, 56, 78] },
{ type: 'progress', content: '资源配置优化', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '项目执行计划:' },
{ type: 'output', content: ' • 监测周期：12个月连续监测' },
{ type: 'output', content: ' • 采样窗口：每月5-10日' },
{ type: 'output', content: ' • 采样时间：08:30-11:30' },
{ type: 'output', content: ' • 特殊要求：DO项目09:00前完成' },
{ type: 'system', content: '' },
{ type: 'output', content: '资源配置:' },
{ type: 'output', content: ' • 采样团队：6人专业团队' },
{ type: 'output', content: ' • 采样设备：Van Dorn采水器×3' },
{ type: 'output', content: ' • 监测仪器：YSI EXO2多参数仪' },
{ type: 'output', content: ' • 运输保障：冷藏运输车×2' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 项目执行计划制定完成，关键里程碑已设定' },
]
},
{
agent: () => environmentalAgents[3],
outputs: [
{ type: 'info', content: '⚠️ EHS工程师进行安全风险评估...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '风险识别分析', target: 100, stutters: [34, 67, 92] },
{ type: 'progress', content: '应急预案制定', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '现场安全措施:' },
{ type: 'output', content: ' • 个人防护：救生衣、防滑鞋、防护手套' },
{ type: 'output', content: ' • 采样船配备：救生圈、应急药品包' },
{ type: 'output', content: ' • 作业规范：酒精测试、双人作业' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/现场采样操作工作照.jpg', imageAlt: '现场安全采样作业' },
{ type: 'system', content: '' },
{ type: 'output', content: '环保要求:' },
{ type: 'output', content: ' • 废液分类收集处置' },
{ type: 'output', content: ' • 废酸交由资质单位处理' },
{ type: 'output', content: ' • 现场零排放要求' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 安全风险评估完成，HSE体系建立' },
]
},
{
agent: () => environmentalAgents[4],
outputs: [
{ type: 'info', content: '✅ 质量控制专家建立QA/QC体系...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '建立质控体系', target: 100, stutters: [23, 56, 89] },
{ type: 'progress', content: '数据验证流程', target: 100, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '质控措施设置:' },
{ type: 'output', content: ' • 平行样：每断面1组，比例≥10%' },
{ type: 'output', content: ' • 空白样：每批次1个全程序空白' },
{ type: 'output', content: ' • 加标回收：每20个样品1个，回收率80-120%' },
{ type: 'output', content: ' • 运输空白：每批次1个去离子水样' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/质量控制措施.jpg', imageAlt: '质量控制流程图' },
{ type: 'system', content: '' },
{ type: 'output', content: '数据验证体系:' },
{ type: 'output', content: ' • 初步审核：技术负责人复核' },
{ type: 'output', content: ' • 内部校验：历史数据对比' },
{ type: 'output', content: ' • 外部验证：标准值参考' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ QA/QC体系建立完成，确保数据准确性>95%' },
]
},
{
agent: () => environmentalAgents[5],
outputs: [
{ type: 'info', content: '💰 项目预算专家进行成本核算...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '成本分析计算', target: 100, stutters: [45, 67, 91] },
{ type: 'progress', content: '预算优化方案', target: 100, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '项目预算明细:' },
{ type: 'output', content: ' • 人工成本：采样团队6人×12月 = 72万元' },
{ type: 'output', content: ' • 设备折旧：监测设备年折旧 = 15万元' },
{ type: 'output', content: ' • 试剂耗材：26项×12月 = 28万元' },
{ type: 'output', content: ' • 实验分析：第三方检测费 = 45万元' },
{ type: 'output', content: ' • 运输物流：冷藏运输12次 = 8万元' },
{ type: 'output', content: ' • 管理费用：项目管理15% = 25万元' },
{ type: 'system', content: '' },
{ type: 'output', content: '成本优化方案:' },
{ type: 'output', content: ' • 批量采购试剂节省10%' },
{ type: 'output', content: ' • 优化采样路线降低运输成本' },
{ type: 'output', content: ' • 自动监测站减少人工成本' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 项目总预算：193万元（优化后：175万元）' },
]
},
{
agent: () => environmentalAgents[6],
outputs: [
{ type: 'info', content: '📝 文案格式整理专员编制技术文档...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '文档体系构建', target: 100, stutters: [23, 45, 78, 92] },
{ type: 'progress', content: '报告模板制作', target: 100, stutters: [34, 67] },
{ type: 'system', content: '' },
{ type: 'output', content: '技术文档体系:' },
{ type: 'output', content: ' • 《采样作业指导书》152页' },
{ type: 'output', content: ' • 《质量控制手册》98页' },
{ type: 'output', content: ' • 《数据管理规程》76页' },
{ type: 'output', content: ' • 《应急预案汇编》45页' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/采样流程.jpg', imageAlt: '标准化采样流程' },
{ type: 'system', content: '' },
{ type: 'output', content: '报告模板标准化:' },
{ type: 'output', content: ' • 月度监测报告模板' },
{ type: 'output', content: ' • 季度趋势分析模板' },
{ type: 'output', content: ' • 年度考核报告模板' },
{ type: 'output', content: ' • 应急监测报告模板' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 技术文档体系建立，符合CMA认证要求' },
]
},
{
agent: () => environmentalAgents[7],
outputs: [
{ type: 'info', content: '🎯 项目主管进行最终审核...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '方案综合审核', target: 100, stutters: [34, 56, 78, 95] },
{ type: 'progress', content: '报告生成', target: 100, duration: 2000, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '方案审核结果:' },
{ type: 'output', content: ' ✓ 技术方案：符合HJ/T 91-2022标准' },
{ type: 'output', content: ' ✓ 法规合规：满足所有监管要求' },
{ type: 'output', content: ' ✓ 质量体系：CMA认证标准' },
{ type: 'output', content: ' ✓ 预算控制：成本优化9.3%' },
{ type: 'output', content: ' ✓ 风险管控：HSE体系完备' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/环保/notion文稿/image/数据审核与验证图标.jpg', imageAlt: '项目审核验证' },
{ type: 'system', content: '' },
{ type: 'output', content: '项目批准执行:' },
{ type: 'output', content: ' • 合同编号：GZEP-2024-WQ-001' },
{ type: 'output', content: ' • 执行期限：2024.01-2024.12' },
{ type: 'output', content: ' • 质量承诺：数据准确率≥98%' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 项目方案审核通过，正式启动实施！' },
]
},
];
const completionSequence: TerminalLine[] = [
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
{ type: 'system', content: '' },
{ type: 'success', content: '🎉 地表水环境质量监测项目方案制定完成！' },
{ type: 'system', content: '' },
{ type: 'output', content: '项目成果总结:' },
{ type: 'output', content: ' • 监测方案：3断面×3垂线×4深度立体监测网' },
{ type: 'output', content: ' • 质量保证：QA/QC双重质控体系' },
{ type: 'output', content: ' • 合规认证：符合国家标准和CMA要求' },
{ type: 'output', content: ' • 成本优化：较预算节省9.3%' },
{ type: 'system', content: '' },
{ type: 'output', content: '交付物清单:' },
{ type: 'output', content: ' ✓ 《水质采样技术方案》完整版' },
{ type: 'output', content: ' ✓ 质量控制体系文件' },
{ type: 'output', content: ' ✓ HSE管理手册' },
{ type: 'output', content: ' ✓ 项目预算及执行计划' },
{ type: 'output', content: ' ✓ 标准化作业指导书' },
{ type: 'system', content: '' },
{ type: 'output', content: '预期效果:' },
{ type: 'output', content: ' • 确保断面水质达到Ⅲ类标准' },
{ type: 'output', content: ' • 为政府决策提供科学依据' },
{ type: 'output', content: ' • 支撑年度水质考核评价' },
{ type: 'system', content: '' },
{ type: 'success', content: '感谢8位专家的协作，守护绿水青山，共建美好家园！' },
{ type: 'system', content: '═══════════════════════════════════════════════════════════════' },
];
return {
orderClassId: 'environmental',
orderClassName: '环保',
projectTitle: '地表水环境质量考核断面水质采样监测项目',
agents: environmentalAgents,
startupSequence,
agentSequence,
completionSequence,
};
};

363
web_frontend/exhibition-demo/src/data/terminalSimulations/finance.ts Normal file
View File

@@ -0,0 +1,363 @@
import type { SimulationData } from './index';
import type { Agent } from '@/store/demoStore';
const financeAgents: Agent[] = [
{
id: 'user_analyst',
name: '用户分析师',
icon: '👥',
avatar: '/data/订单班文档资料/财经商贸/agent头像/用户分析师.jpg',
model: 'GPT-4',
role: '用户调研与市场洞察',
status: 'waiting',
},
{
id: 'competitor_analyst',
name: '竞品分析师',
icon: '🔍',
avatar: '/data/订单班文档资料/财经商贸/agent头像/竞品分析师.jpg',
model: 'GPT-4',
role: '竞品研究与市场定位',
status: 'waiting',
},
{
id: 'product_manager',
name: '产品经理',
icon: '📋',
avatar: '/data/订单班文档资料/财经商贸/agent头像/产品经理.jpg',
model: 'GPT-4',
role: '选品策略与产品规划',
status: 'waiting',
},
{
id: 'ecommerce_designer',
name: '电商店铺平面设计师',
icon: '🎨',
avatar: '/data/订单班文档资料/财经商贸/agent头像/电商店铺平面设计师.jpg',
model: 'GPT-4',
role: '视觉设计与素材制作',
status: 'waiting',
},
{
id: 'content_operation',
name: '内容电商运营专员',
icon: '📱',
avatar: '/data/订单班文档资料/财经商贸/agent头像/内容电商运营专员.jpg',
model: 'GPT-4',
role: '内容营销与达人合作',
status: 'waiting',
},
{
id: 'ad_specialist',
name: '广告投放师',
icon: '📊',
avatar: '/data/订单班文档资料/财经商贸/agent头像/广告投放师.jpg',
model: 'GPT-4',
role: '平台广告投放与优化',
status: 'waiting',
},
{
id: 'new_media_director',
name: '新媒体运营总监',
icon: '🚀',
avatar: '/data/订单班文档资料/财经商贸/agent头像/新媒体运营总监.jpg',
model: 'GPT-4',
role: '全渠道运营统筹',
status: 'waiting',
},
];
export const financeSimulation = (): SimulationData => ({
orderClassId: 'finance',
orderClassName: '财经商贸',
projectTitle: '可复美爽肤水电商全链路运营项目',
agents: financeAgents,
startupSequence: [
{ type: 'system', content: '初始化化妆品电商运营环境...' },
{ type: 'system', content: '加载项目需求：可复美爽肤水电商全链路运营项目' },
{ type: 'info', content: '目标平台：天猫+抖音+小红书三大主阵地' },
{ type: 'info', content: '目标人群：18-35岁年轻女性，月收入5000+' },
{ type: 'info', content: '产品定位：屏障修护+舒缓保湿，客单价150-300元' },
{ type: 'info', content: '核心竞争力：成分党友好+敏感肌适用+皮肤学背书' },
{ type: 'system', content: '' },
{ type: 'system', content: '正在组建7人电商运营团队...' },
{ type: 'success', content: '✓ 用户分析师就位' },
{ type: 'success', content: '✓ 竞品分析师就位' },
{ type: 'success', content: '✓ 产品经理就位' },
{ type: 'success', content: '✓ 电商店铺平面设计师就位' },
{ type: 'success', content: '✓ 内容电商运营专员就位' },
{ type: 'success', content: '✓ 广告投放师就位' },
{ type: 'success', content: '✓ 新媒体运营总监就位' },
{ type: 'system', content: '' },
{ type: 'system', content: '开始多Agent协作流程...' },
{ type: 'system', content: '════════════════════════════════════' },
],
agentSequence: [
{
agent: () => financeAgents[0],
outputs: [
{ type: 'info', content: '👥 用户分析师开始用户调研与市场洞察...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '用户调研', target: 100, stutters: [23, 56, 78] },
{ type: 'progress', content: '市场分析', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '用户分层体系:' },
{ type: 'output', content: ' • 年龄分层：18-24岁敏感肌/油皮、25-34岁初抗老/混干、35-45岁抗老/干皮' },
{ type: 'output', content: ' • 功效诉求：清洁控油、保湿修护、维稳舒缓、提亮焕肤、抗老紧致' },
{ type: 'output', content: ' • 价格承受力：入门59-129元、中档129-299元、高阶299-699元+' },
{ type: 'output', content: ' • 渠道偏好：内容电商重种草(抖音/小红书)，平台电商重转化(天猫/京东)' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/多个化妆品陈列图-无包装.jpg', imageAlt: '化妆品品类展示' },
{ type: 'system', content: '' },
{ type: 'output', content: '肤质细分人群画像:' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/油皮.jpg', imageAlt: '油皮人群特征' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/初抗老-混干.jpg', imageAlt: '初抗老混干人群特征' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/抗老-干皮.jpg', imageAlt: '抗老干皮人群特征' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 用户分层体系完成（3大年龄段×4大肤质×6大功效诉求）' },
{ type: 'success', content: '✓ 多维度渠道调研数据整合（抖音搜索热度+淘宝购买频率）' },
{ type: 'success', content: '✓ 核心用户画像锁定：25-34岁混干肌，月收入8000+，关注成分与功效' },
],
},
{
agent: () => financeAgents[1],
outputs: [
{ type: 'info', content: '🔍 竞品分析师开始竞品研究与市场定位...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '竞品收集', target: 100, stutters: [34, 67, 89] },
{ type: 'progress', content: 'SWOT分析', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '竞品矩阵分析（4大竞品品牌）:' },
{ type: 'output', content: ' • 薇诺娜：医学护肤背景，敏感肌专家定位，价格中高端，专业度强但场景延展性弱' },
{ type: 'output', content: ' • 敷尔佳：医美渠道起家，术后修护标签，成分党友好，但品牌延伸过快' },
{ type: 'output', content: ' • 悦木之源：雅诗兰黛集团，国际大牌背书，菌菇水爆款，价格高但性价比低' },
{ type: 'output', content: ' • 自然堂：国货大众路线，喜马拉雅植物成分，渠道下沉强但功效性弱' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水竞品分析.jpg', imageAlt: '爽肤水竞品对比分析' },
{ type: 'system', content: '' },
{ type: 'output', content: '差异化定位策略:' },
{ type: 'output', content: ' • 价格带：定位中档偏上（179-259元），高于自然堂，低于薇诺娜/悦木之源' },
{ type: 'output', content: ' • 功效点：屏障修护+舒缓保湿双核心，避开纯敏感肌单一定位' },
{ type: 'output', content: ' • 场景化：妆前急救+换季维稳+熬夜修护，多场景适配性强' },
{ type: 'output', content: ' • 证明体系：皮肤学测试+成分透明+用户真实测评，建立信任闭环' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 4大竞品SWOT分析完成' },
{ type: 'success', content: '✓ 市场空白点识别：中高端+多场景+成分透明赛道机会明确' },
{ type: 'success', content: '✓ 差异化卖点提炼：强成分+强证明+高颜价比三位一体' },
],
},
{
agent: () => financeAgents[2],
outputs: [
{ type: 'info', content: '📋 产品经理开始选品策略与产品规划...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '选品策略', target: 100, stutters: [23, 45, 78, 92] },
{ type: 'progress', content: '产品规划', target: 100, stutters: [34, 67] },
{ type: 'system', content: '' },
{ type: 'output', content: '品类对比分析:' },
{ type: 'output', content: ' • 爽肤水：质地轻薄吸收快，补水+二次清洁，清爽适合油皮/混合皮 ✓选定' },
{ type: 'output', content: ' • 乳液：轻盈不厚重，补水保湿兼具，但锁水力不如面霜' },
{ type: 'output', content: ' • 面霜：保湿封闭性强，适合干皮，但油皮易闷痘' },
{ type: 'output', content: ' • 精华液：活性成分浓度高，见效快，但单价高且需搭配使用' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/化妆品拍摄图.jpg', imageAlt: '化妆品产品拍摄' },
{ type: 'system', content: '' },
{ type: 'output', content: '主推产品确定 - 可复美爽肤水:' },
{ type: 'output', content: ' • 核心定位：屏障修护+舒缓保湿，用于承担声量与人群突破' },
{ type: 'output', content: ' • 卖点组合：强成分(温和保湿+屏障友好) + 强证明(皮肤学测试) + 高颜价比' },
{ type: 'output', content: ' • 产品规格：150ml主力款 + 300ml大容量礼盒装' },
{ type: 'output', content: ' • 价格策略：日常价199元，大促价169元，礼盒装299元(赠小样)' },
{ type: 'output', content: ' • 目标毛利：45-50%，确保营销投入空间' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品图.jpg', imageAlt: '可复美爽肤水产品图' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 品类优劣势对比分析完成（4大护肤品类）' },
{ type: 'success', content: '✓ 主推产品SKU规划完成（2个规格+礼盒装）' },
{ type: 'success', content: '✓ 价格体系设计完成（日常价+促销价+礼盒价）' },
],
},
{
agent: () => financeAgents[3],
outputs: [
{ type: 'info', content: '🎨 电商店铺平面设计师开始视觉设计与素材制作...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '视觉设计', target: 100, stutters: [34, 56, 78] },
{ type: 'progress', content: '素材制作', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '产品宣传海报设计（3套方案）:' },
{ type: 'output', content: ' • 方案一：深层补水主题 - "30秒提升角质层含水量，7天改善泛红干痒"' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-大海背景.jpg', imageAlt: '深层补水主题宣传' },
{ type: 'system', content: '' },
{ type: 'output', content: ' • 方案二：科学配方主题 - "皮肤学精准配方，无酒精/无香精/无色素低敏原则"' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-绿植背景.jpg', imageAlt: '科学配方主题宣传' },
{ type: 'system', content: '' },
{ type: 'output', content: ' • 方案三：场景化主题 - "妆前保湿/熬夜修护/旅行急救，随时随地护肤保护"' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/爽肤水产品宣传拍摄-海上礁石.jpg', imageAlt: '场景化主题宣传' },
{ type: 'system', content: '' },
{ type: 'output', content: '小红书种草卡片设计（4套风格）:' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计1.jpg', imageAlt: '小红书卡片设计1' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计2.jpg', imageAlt: '小红书卡片设计2' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计3.jpg', imageAlt: '小红书卡片设计3' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/小红书发帖卡片设计4.jpg', imageAlt: '小红书卡片设计4' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 3套产品宣传海报设计完成（深层补水/科学配方/场景化）' },
{ type: 'success', content: '✓ 4套小红书种草卡片设计完成（素人测评/成分科普/前后对比/场景推荐）' },
{ type: 'success', content: '✓ 视觉素材库建立（产品图+场景图+信息图，50+张可复用素材）' },
],
},
{
agent: () => financeAgents[4],
outputs: [
{ type: 'info', content: '📱 内容电商运营专员开始内容营销与达人合作...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '内容策划', target: 100, stutters: [23, 45, 67, 89] },
{ type: 'progress', content: '达人对接', target: 100, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '小红书种草营销策略:' },
{ type: 'output', content: ' • 核心人群：18-35岁女性白领/学生，一二线城市，护肤消费意愿强' },
{ type: 'output', content: ' • 内容形态：7天维稳打卡+成分机理拆解+前后对比+实验室证据图' },
{ type: 'output', content: ' • SEO优化：标题/正文/话题三处关键词布局，长期获取自然流量' },
{ type: 'output', content: ' • 达人矩阵：头部KOL 2名+腰部达人15名+尾部KOC 50名' },
{ type: 'output', content: ' • 转化承接：小红书种草→天猫旗舰店转化→抖音直播复购' },
{ type: 'system', content: '' },
{ type: 'output', content: '抖音内容电商运营:' },
{ type: 'output', content: ' • 短视频矩阵：产品测评+成分科普+使用教程+用户真实反馈' },
{ type: 'output', content: ' • 直播节奏：每周3场常规直播+大促专场，单场GMV目标50万+' },
{ type: 'output', content: ' • 互动策略：抽奖福利+限时秒杀+组合套装，提升停留时长与转化率' },
{ type: 'output', content: ' • 数据复盘：实时监控GPM(千次观看成交额)、停留时长、点击率' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 小红书种草SOP建立（搜索SEO+内容矩阵+达人合作）' },
{ type: 'success', content: '✓ 抖音内容电商运营方案（短视频+直播双驱动）' },
{ type: 'success', content: '✓ 跨平台转化链路设计（小红书种草→天猫转化→抖音复购）' },
],
},
{
agent: () => financeAgents[5],
outputs: [
{ type: 'info', content: '📊 广告投放师开始平台广告投放与优化...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '投放策略制定', target: 100, stutters: [34, 67, 92] },
{ type: 'progress', content: '效果优化', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '天猫搜索直通车投放:' },
{ type: 'output', content: ' • 核心词：爽肤水、补水爽肤水、敏感肌爽肤水、修护爽肤水、妆前保湿水' },
{ type: 'output', content: ' • 长尾词：换季敏感爽肤水、熬夜急救爽肤水、无酒精爽肤水、孕哺可用爽肤水' },
{ type: 'output', content: ' • 品牌词：可复美爽肤水、可复美补水水、可复美维稳水' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图1.jpg', imageAlt: '淘宝搜索广告示例1' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图2.jpg', imageAlt: '淘宝搜索广告示例2' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/淘宝关键词搜索图3.jpg', imageAlt: '淘宝搜索广告示例3' },
{ type: 'system', content: '' },
{ type: 'output', content: '天猫展示广告投放:' },
{ type: 'output', content: ' • 超级推荐："猜你喜欢"定向推送，触达浏览过敏感肌/修护类护肤品用户' },
{ type: 'output', content: ' • 品销宝：首页焦点图+类目坑位，大促期间提升曝光' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/产品推荐榜与热销.jpg', imageAlt: '产品推荐榜位展示' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/广告封面设计图.jpg', imageAlt: '广告封面设计' },
{ type: 'system', content: '' },
{ type: 'output', content: '平台电商优势分析:' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/平台电商优势展示图.jpg', imageAlt: '平台电商优势' },
{ type: 'system', content: '' },
{ type: 'output', content: '内容电商优势分析:' },
{ type: 'system', content: '' },
{ type: 'image', imageSrc: '/data/订单班文档资料/财经商贸/notion文稿/image/内容电商优势展示.jpg', imageAlt: '内容电商优势' },
{ type: 'system', content: '' },
{ type: 'output', content: '投放优化策略:' },
{ type: 'output', content: ' • 数据监控：实时跟踪ROI、点击率、转化率、加购成本' },
{ type: 'output', content: ' • 智能出价：高峰时段提高出价，低峰时段降低成本' },
{ type: 'output', content: ' • 人群分层：新客拉新、老客复购、流失召回三类人群差异化投放' },
{ type: 'output', content: ' • 预算分配：搜索广告50%、推荐广告30%、品牌广告20%' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 关键词体系建立（核心词15个+长尾词30个+品牌词5个）' },
{ type: 'success', content: '✓ 天猫广告投放策略完成（搜索直通车+超级推荐+品销宝）' },
{ type: 'success', content: '✓ 投放ROI目标设定（搜索ROI≥3.5，推荐ROI≥2.8）' },
],
},
{
agent: () => financeAgents[6],
outputs: [
{ type: 'info', content: '🚀 新媒体运营总监开始全渠道运营统筹...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '渠道整合', target: 100, stutters: [23, 45, 67, 89] },
{ type: 'progress', content: '策略制定', target: 100, duration: 2000, stutters: [34, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '全渠道运营策略总结:' },
{ type: 'output', content: ' • 天猫旗舰店：平台电商主战场，承担转化与复购，月GMV目标250万' },
{ type: 'output', content: ' • 抖音电商：内容电商+直播带货，快速爆发与声量扩散，月GMV目标180万' },
{ type: 'output', content: ' • 小红书：种草营销阵地，建立品牌心智与口碑，月新增笔记200+篇' },
{ type: 'output', content: ' • 私域运营：企业微信+社群，沉淀高价值用户，复购率目标35%' },
{ type: 'system', content: '' },
{ type: 'output', content: '数据驱动运营体系:' },
{ type: 'output', content: ' • 流量监控：日UV 5万+，跨平台流量分布监控' },
{ type: 'output', content: ' • 转化漏斗：曝光→点击→加购→成交全链路追踪，优化转化率至4.5%' },
{ type: 'output', content: ' • 用户生命周期：新客首购→30天二购→90天成为会员，LTV目标800元' },
{ type: 'output', content: ' • 舆情监控：实时监测品牌声量、用户评价、竞品动态' },
{ type: 'system', content: '' },
{ type: 'output', content: '大促节点规划:' },
{ type: 'output', content: ' • 38女王节：主推"换季敏感肌急救"，预售+直播，GMV目标500万' },
{ type: 'output', content: ' • 618年中大促：全店满减+赠品加码，冲击类目TOP10，GMV目标1200万' },
{ type: 'output', content: ' • 双11：超级品牌日+明星直播，破圈传播，GMV目标2500万' },
{ type: 'output', content: ' • 双12：清库存+会员专享，提升复购率，GMV目标800万' },
{ type: 'system', content: '' },
{ type: 'output', content: '团队协作与资源调配:' },
{ type: 'output', content: ' • 运营团队：5人（天猫2人+抖音2人+小红书1人）' },
{ type: 'output', content: ' • 客服团队：3人（售前2人+售后1人），工单响应时间≤3分钟' },
{ type: 'output', content: ' • 设计团队：2人（主图详情页+短视频素材）' },
{ type: 'output', content: ' • 仓储物流：合作第三方仓储，日发货能力3000单' },
{ type: 'output', content: ' • 月度预算：广告投放30万+达人合作20万+活动费用10万=60万' },
{ type: 'system', content: '' },
{ type: 'success', content: '✓ 全渠道运营策略制定完成（天猫+抖音+小红书+私域四位一体）' },
{ type: 'success', content: '✓ 年度GMV目标设定：首年3000万，次年8000万，三年破亿' },
{ type: 'success', content: '✓ 数据化运营体系建立（流量-转化-复购全链路数据看板）' },
],
},
],
completionSequence: [
{ type: 'system', content: '════════════════════════════════════' },
{ type: 'system', content: '' },
{ type: 'success', content: '🎉 可复美爽肤水电商全链路运营项目圆满完成！' },
{ type: 'system', content: '' },
{ type: 'output', content: '项目成果总结:' },
{ type: 'output', content: ' • 用户洞察：3大年龄段×4大肤质×6大功效诉求分层体系' },
{ type: 'output', content: ' • 竞品分析：4大品牌SWOT分析，差异化定位明确' },
{ type: 'output', content: ' • 产品规划：主推SKU确定，价格体系完善，毛利率45%+' },
{ type: 'output', content: ' • 视觉设计：3套宣传海报+4套小红书卡片+50张素材库' },
{ type: 'output', content: ' • 内容营销：小红书种草SOP+抖音直播运营+达人矩阵搭建' },
{ type: 'output', content: ' • 广告投放：50个关键词+3大广告形式+ROI目标3.0+' },
{ type: 'output', content: ' • 全局统筹：天猫+抖音+小红书+私域四大渠道运营方案' },
{ type: 'system', content: '' },
{ type: 'output', content: '交付物清单:' },
{ type: 'output', content: ' ✓ 用户调研报告（25页PPT）' },
{ type: 'output', content: ' ✓ 竞品分析报告（18页文档）' },
{ type: 'output', content: ' ✓ 选品策略方案（SKU规划+价格体系）' },
{ type: 'output', content: ' ✓ 视觉素材库（产品图+宣传海报+种草卡片，50+张）' },
{ type: 'output', content: ' ✓ 小红书种草SOP（内容矩阵+达人合作流程）' },
{ type: 'output', content: ' ✓ 天猫广告投放方案（关键词库+出价策略+预算分配）' },
{ type: 'output', content: ' ✓ 抖音直播运营手册（选品-话术-互动-复盘全流程）' },
{ type: 'output', content: ' ✓ 全渠道运营计划书（年度GMV目标+大促节点+团队配置）' },
{ type: 'system', content: '' },
{ type: 'output', content: '预期运营效果:' },
{ type: 'output', content: ' 📊 首年GMV目标：3000万（天猫1800万+抖音1000万+其他200万）' },
{ type: 'output', content: ' 📈 毛利率目标：45-50%，净利率15-20%' },
{ type: 'output', content: ' 🎯 用户规模：新增用户20万+，会员用户5万+' },
{ type: 'output', content: ' 🔁 复购率目标：35%+（行业平均25%）' },
{ type: 'output', content: ' ⭐ 品牌声量：小红书笔记2000+篇，抖音播放量5000万+' },
{ type: 'system', content: '' },
{ type: 'success', content: 'Agent的协作已完成，可复美爽肤水电商项目已成功启动！' },
{ type: 'system', content: '════════════════════════════════════' },
],
});

8
web_frontend/exhibition-demo/src/data/terminalSimulations/index.ts
View File

@@ -13,11 +13,14 @@ import { energySimulation } from './energy';
import { transportationSimulation } from './transportation';
import { intelligentManufacturingSimulation } from './intelligentManufacturing';
import { developerSimulation } from './developer';
import { financeSimulation } from './finance';
import { environmentalSimulation } from './environmental';
import { chemicalSimulation } from './chemical';
// 终端行类型定义
export interface TerminalLine {
type: 'info' | 'success' | 'warning' | 'error' | 'system' | 'output' | 'progress' | 'install' | 'file' | 'image';
content: string;
content?: string; // 改为可选,因为 image 类型不需要 content
agent?: string;
// 进度条相关
target?: number;
@@ -59,6 +62,9 @@ export const simulationMap: Record<string, SimulationGenerator> = {
transportation: transportationSimulation, // 交通物流
manufacturing: intelligentManufacturingSimulation, // 智能制造
developer: developerSimulation, // 智能开发
finance: financeSimulation, // 财经商贸
environmental: environmentalSimulation, // 环保
chemical: chemicalSimulation, // 化工
// 其他订单班暂未实现，缺少agent prompt和头像数据
};

43
web_frontend/exhibition-demo/src/data/terminalSimulations/transportation.ts
View File

@@ -116,6 +116,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[0],
outputs: [
{ type: 'info', content: '📋 需求分析师开始分析业务需求...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '业务调研分析', target: 100, stutters: [23, 56, 78] },
{ type: 'progress', content: '需求建模', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '识别核心痛点:' },
{ type: 'output', content: ' • 人工拣选效率仅为常温区55%' },
{ type: 'output', content: ' • 日出件量将达18万件' },
@@ -141,6 +145,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[1],
outputs: [
{ type: 'info', content: '🏗️ 系统架构师设计总体架构...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '架构分层设计', target: 100, stutters: [34, 67, 92] },
{ type: 'progress', content: '技术选型评估', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '设计五层架构体系:' },
{ type: 'output', content: ' • 接入层: ERP/MES/WMS/TMS系统对接' },
{ type: 'output', content: ' • 业务层: IWMS仓储管理 + TMS交通管理' },
@@ -166,6 +174,11 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[2],
outputs: [
{ type: 'info', content: '🤖 AGV算法工程师设计调度算法...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '路径规划算法', target: 100, stutters: [23, 45, 78, 95] },
{ type: 'progress', content: '调度策略优化', target: 100, stutters: [34, 67] },
{ type: 'progress', content: '仿真验证', target: 100, duration: 2000, stutters: [56, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: 'AGV导航系统设计:' },
{ type: 'output', content: ' • 激光SLAM高精度定位' },
{ type: 'output', content: ' • 低温环境误差补偿机制' },
@@ -217,6 +230,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[3],
outputs: [
{ type: 'info', content: '⚡ 能源工程师设计充电管理系统...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '充电策略设计', target: 100, stutters: [34, 56, 89] },
{ type: 'progress', content: '低温保护方案', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '智能充电策略:' },
{ type: 'output', content: ' • 双模式充电: 快充1.5C + 慢充0.5C' },
{ type: 'output', content: ' • 电量实时监测(SOC/SOH)' },
@@ -242,6 +259,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[4],
outputs: [
{ type: 'info', content: '❄️ 冷链技术总监设计环境适配方案...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '环境监测配置', target: 100, stutters: [23, 56, 78] },
{ type: 'progress', content: '低温适配优化', target: 100, stutters: [45, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '冷链环境感知:' },
{ type: 'output', content: ' • 温湿度实时监测' },
{ type: 'output', content: ' • 结霜检测传感器' },
@@ -260,6 +281,11 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[5],
outputs: [
{ type: 'info', content: '⚙️ 研发工程师实现核心功能...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '上位平台开发', target: 100, stutters: [34, 67, 92] },
{ type: 'progress', content: '嵌入式编程', target: 100, stutters: [23, 56] },
{ type: 'progress', content: 'PLC逻辑编写', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '上位调度平台开发:' },
{ type: 'output', content: ' • 任务控制模块' },
{ type: 'output', content: ' • 路径状态更新' },
@@ -283,6 +309,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[6],
outputs: [
{ type: 'info', content: '🔗 系统集成工程师设计联动方案...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '接口设计', target: 100, stutters: [45, 78] },
{ type: 'progress', content: '系统联调', target: 100, stutters: [34, 67, 89] },
{ type: 'system', content: '' },
{ type: 'output', content: '系统集成架构:' },
{ type: 'output', content: ' • WMS ↔ AGV调度平台' },
{ type: 'output', content: ' • AGV平台 ↔ 充电系统' },
@@ -316,6 +346,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[7],
outputs: [
{ type: 'info', content: '🎨 视觉设计师整理技术文档...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '文档编制', target: 100, stutters: [23, 56, 89] },
{ type: 'progress', content: '界面设计', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '技术文档结构:' },
{ type: 'output', content: ' • 项目背景与目标' },
{ type: 'output', content: ' • 技术架构设计' },
@@ -343,6 +377,10 @@ export const transportationSimulation = (): SimulationData => ({
agent: () => transportationAgents[8],
outputs: [
{ type: 'info', content: '✅ 技术专家进行方案评审...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '架构评审', target: 100, stutters: [34, 67, 89] },
{ type: 'progress', content: '风险评估', target: 100, stutters: [45, 78] },
{ type: 'system', content: '' },
{ type: 'output', content: '架构评审:' },
{ type: 'output', content: ' ✓ 五层架构逻辑清晰' },
{ type: 'output', content: ' ✓ 模块解耦合理' },
@@ -365,6 +403,11 @@ export const transportationSimulation = (): SimulationData => ({
{
agent: () => transportationAgents[9],
outputs: [
{ type: 'info', content: '📊 项目经理制定实施计划...' },
{ type: 'system', content: '' },
{ type: 'progress', content: '项目规划', target: 100, stutters: [23, 45, 78, 92] },
{ type: 'progress', content: '资源协调', target: 100, stutters: [34, 67] },
{ type: 'system', content: '' },
{ type: 'info', content: '📊 项目经理制定实施计划...' },
{ type: 'output', content: '项目周期规划:' },
{ type: 'output', content: ' • 第1-2周: 详细设计与仿真验证' },

105
web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx
View File

@@ -58,6 +58,7 @@ const WorkflowPageV4 = () => {
const logoClickTimerRef = useRef<number | null>(null);
const statusRef = useRef(status);
// const abortControllerRef = useRef<AbortController | null>(null);
const imageLoadPromisesRef = useRef<{ [key: string]: { resolve: () => void; reject: () => void } }>({});
// 更新 statusRef
useEffect(() => {
@@ -518,13 +519,26 @@ const WorkflowPageV4 = () => {
setTerminalLines(prev => [...prev, newLine]);
// 如果是图片类型，设置加载状态
// 如果是图片类型，设置加载状态并创建Promise
if (line.type === 'image' && line.imageSrc) {
setImageLoadingStates(prev => ({ ...prev, [lineId]: true }));
// 确保loading动画显示足够时间
setTimeout(() => {
setImageLoadingStates(prev => ({ ...prev, [lineId]: false }));
}, getRandomDelay(2000, 3500));
// 创建一个Promise用于等待图片加载
return new Promise<void>((resolve) => {
imageLoadPromisesRef.current[lineId] = {
resolve,
reject: () => {} // 提供一个空的reject函数
};
// 设置超时保护，防止图片加载失败导致永久阻塞
setTimeout(() => {
if (imageLoadPromisesRef.current[lineId]) {
console.warn(`Image loading timeout for ${lineId}`);
resolve();
delete imageLoadPromisesRef.current[lineId];
}
}, 10000); // 10秒超时
});
}
// 自动滚动到底部
@@ -533,6 +547,8 @@ const WorkflowPageV4 = () => {
terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
}
}, 10);
return Promise.resolve();
}, []);
// 更新进度条行（覆盖同一行）
@@ -705,25 +721,26 @@ const WorkflowPageV4 = () => {
const stutters = (output as any).stutters || [];
await executeProgress(output.content, stutters, agentData.name);
} else {
addTerminalLine({
// 等待图片加载完成
const loadPromise = addTerminalLine({
...output,
agent: output.type === 'system' ? undefined : agentData.name
});
// 根据类型设置延迟
let delay =
output.type === 'system' ? getRandomDelay(100, 300) :
output.type === 'install' ? getRandomDelay(200, 400) :
output.type === 'file' ? getRandomDelay(100, 200) :
output.type === 'info' && output.content === '' ? 50 :
getRandomDelay(30, 100);
// 如果是图片类型，等待图片加载完成
// 如果是图片类型，等待图片真正加载完成
if (output.type === 'image') {
delay = getRandomDelay(2500, 3500); // 等待图片加载动画完成
await loadPromise; // 等待图片加载完成
} else {
// 其他类型按原有逻辑延迟
const delay =
output.type === 'system' ? getRandomDelay(100, 300) :
output.type === 'install' ? getRandomDelay(200, 400) :
output.type === 'file' ? getRandomDelay(100, 200) :
output.type === 'info' && output.content === '' ? 50 :
getRandomDelay(30, 100);
await new Promise(resolve => setTimeout(resolve, delay));
}
await new Promise(resolve => setTimeout(resolve, delay));
}
}
@@ -1122,15 +1139,15 @@ const WorkflowPageV4 = () => {
{line.content}
</span>
{line.imageSrc && (
<div className="mt-3 mb-3">
{imageLoadingStates[line.id] ? (
<div className="mt-3 mb-3 relative">
{imageLoadingStates[line.id] && (
// 简单的骨架屏Loading效果
<div className="relative w-96 h-64 bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
{/* 骨架屏脉冲动画 */}
<div className="absolute inset-0">
<div className="h-full w-full bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 animate-pulse" />
</div>
{/* 简单的loading指示器 */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="flex items-center gap-2">
@@ -1140,21 +1157,37 @@ const WorkflowPageV4 = () => {
</div>
</div>
</div>
) : (
// 实际图片（淡入效果）
<motion.img
src={line.imageSrc}
alt={line.imageAlt || 'Generated image'}
className="max-w-md rounded-lg border-2 border-gray-700 shadow-xl"
style={{ maxHeight: '300px' }}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
onError={(e) => {
e.currentTarget.style.display = 'none';
}}
/>
)}
{/* 实际图片（淡入效果）- 始终渲染以触发加载 */}
<motion.img
src={line.imageSrc}
alt={line.imageAlt || 'Generated image'}
className="max-w-md rounded-lg border-2 border-gray-700 shadow-xl"
style={{
maxHeight: '300px',
display: imageLoadingStates[line.id] ? 'none' : 'block'
}}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
onLoad={() => {
// 图片加载完成后，隐藏骨架屏并resolve对应的Promise
setImageLoadingStates(prev => ({ ...prev, [line.id]: false }));
if (imageLoadPromisesRef.current[line.id]) {
imageLoadPromisesRef.current[line.id].resolve();
delete imageLoadPromisesRef.current[line.id];
}
}}
onError={(e) => {
e.currentTarget.style.display = 'none';
// 图片加载失败时也要隐藏骨架屏并resolve，避免阻塞
setImageLoadingStates(prev => ({ ...prev, [line.id]: false }));
if (imageLoadPromisesRef.current[line.id]) {
imageLoadPromisesRef.current[line.id].resolve();
delete imageLoadPromisesRef.current[line.id];
}
}}
/>
</div>
)}
</div>