mixvideo-v2/AI_WORKFLOW_SYSTEM_DESIGN.md

AI工作流系统功能设计方案

🎯 系统概述

AI工作流页面是MixVideo的核心功能模块，旨在提供统一的AI任务管理和执行平台。当前已有基础架构，需要完善以下核心功能模块。

📋 当前状态分析

✅ 已实现

• 基础页面框架和导航
• 工作流列表组件 (WorkflowList)
• 智能表单生成器 (WorkflowFormGenerator)
• 工作流执行模态框 (WorkflowExecutionModal)
• 数据库表结构和迁移脚本
• Rust后端服务和API接口

❌ 待实现

• 执行历史管理
• 执行环境管理
• 工作流模板创建/编辑
• 实时状态监控
• 结果管理和下载

🏗️ 功能模块设计

1. 工作流模板管理

1.1 工作流创建器 (WorkflowCreator)

interface WorkflowCreatorProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (template: WorkflowTemplate) => void;
  editingTemplate?: WorkflowTemplate;
}

功能特性：

• 可视化工作流设计器
• 拖拽式节点编辑
• 参数配置界面生成
• 实时预览和验证
• 版本管理支持

1.2 工作流编辑器 (WorkflowEditor)

interface WorkflowEditorProps {
  template: WorkflowTemplate;
  onSave: (template: WorkflowTemplate) => void;
  onCancel: () => void;
}

功能特性：

• JSON配置编辑
• UI配置可视化编辑
• 参数schema定义
• 测试执行功能

2. 执行历史管理

2.1 执行历史列表 (ExecutionHistoryList)

interface ExecutionHistoryListProps {
  filter?: ExecutionRecordFilter;
  onViewDetails: (record: ExecutionRecord) => void;
  onRetry: (record: ExecutionRecord) => void;
  onDelete: (recordId: number) => void;
}

功能特性：

• 分页加载执行记录
• 多维度筛选（状态、时间、工作流类型）
• 批量操作（删除、重试）
• 执行统计图表
• 导出功能

2.2 执行详情查看器 (ExecutionDetailViewer)

interface ExecutionDetailViewerProps {
  record: ExecutionRecord;
  isOpen: boolean;
  onClose: () => void;
}

功能特性：

• 完整执行信息展示
• 输入输出数据查看
• 错误日志分析
• 执行时间线
• 结果下载

3. 执行环境管理

3.1 环境列表 (EnvironmentList)

interface EnvironmentListProps {
  environments: ExecutionEnvironment[];
  onAdd: () => void;
  onEdit: (env: ExecutionEnvironment) => void;
  onDelete: (envId: number) => void;
  onHealthCheck: (envId: number) => void;
}

功能特性：

• 环境状态实时监控
• 健康检查和性能统计
• 负载均衡配置
• 连接测试
• 批量管理

3.2 环境配置器 (EnvironmentConfigurator)

interface EnvironmentConfiguratorProps {
  environment?: ExecutionEnvironment;
  isOpen: boolean;
  onSave: (env: ExecutionEnvironment) => void;
  onClose: () => void;
}

功能特性：

• 环境类型选择（本地ComfyUI、Modal、RunPod）
• 连接参数配置
• 支持的工作流类型设置
• 资源限制配置
• 连接测试

4. 实时监控面板

4.1 执行监控器 (ExecutionMonitor)

interface ExecutionMonitorProps {
  activeExecutions: ExecutionRecord[];
  onCancel: (executionId: number) => void;
  onViewLogs: (executionId: number) => void;
}

功能特性：

• 实时执行状态更新
• 进度条和时间估算
• 资源使用监控
• 队列状态显示
• 一键取消功能

4.2 系统状态面板 (SystemStatusPanel)

interface SystemStatusPanelProps {
  systemStats: SystemStatistics;
  refreshInterval?: number;
}

功能特性：

• 系统整体状态概览
• 环境健康状态
• 执行队列统计
• 性能指标图表
• 告警通知

🎨 UI/UX 设计原则

1. 响应式设计

• 支持桌面端优化布局
• 自适应不同屏幕尺寸
• 移动端友好的交互

2. 状态可视化

• 清晰的状态指示器
• 进度条和加载动画
• 错误状态突出显示
• 成功状态确认反馈

3. 操作便捷性

• 快捷键支持
• 批量操作功能
• 拖拽排序
• 右键菜单

4. 数据展示

• 表格和卡片视图切换
• 高级筛选和搜索
• 数据导出功能
• 图表可视化

🔧 技术实现方案

1. 状态管理

// 使用Zustand进行状态管理
interface WorkflowStore {
  // 工作流模板
  templates: WorkflowTemplate[];
  selectedTemplate: WorkflowTemplate | null;
  
  // 执行记录
  executionHistory: ExecutionRecord[];
  activeExecutions: ExecutionRecord[];
  
  // 执行环境
  environments: ExecutionEnvironment[];
  
  // UI状态
  isCreating: boolean;
  isExecuting: boolean;
  
  // 操作方法
  loadTemplates: () => Promise<void>;
  createTemplate: (template: CreateWorkflowTemplateRequest) => Promise<void>;
  executeWorkflow: (request: ExecuteWorkflowRequest) => Promise<void>;
  // ...更多方法
}

2. 实时更新

// WebSocket连接用于实时状态更新
class WorkflowWebSocketService {
  connect(): void;
  disconnect(): void;
  subscribeToExecution(executionId: number): void;
  onStatusUpdate(callback: (update: ExecutionStatusUpdate) => void): void;
}

3. 数据缓存

// React Query用于数据缓存和同步
const useWorkflowTemplates = () => {
  return useQuery({
    queryKey: ['workflow-templates'],
    queryFn: () => invoke('get_workflow_templates'),
    staleTime: 5 * 60 * 1000, // 5分钟
  });
};

📊 数据流设计

1. 工作流执行流程

用户选择工作流 → 填写参数 → 提交执行 → 
选择环境 → 开始执行 → 实时状态更新 → 
完成/失败 → 结果展示 → 历史记录

2. 状态同步机制

前端状态 ↔ Tauri命令 ↔ Rust服务 ↔ 数据库
     ↓           ↓          ↓         ↓
  UI更新    参数验证   业务逻辑   数据持久化

🚀 实施优先级

Phase 1: 核心功能完善 (高优先级)

1. 执行历史管理 - 用户急需查看历史记录
2. 环境状态监控 - 确保系统稳定运行
3. 错误处理优化 - 提升用户体验

Phase 2: 管理功能增强 (中优先级)

1. 工作流创建器 - 支持用户自定义工作流
2. 批量操作 - 提高操作效率
3. 数据导出 - 满足数据分析需求

Phase 3: 高级功能 (低优先级)

1. 可视化设计器 - 提供更直观的编辑体验
2. 性能优化 - 大数据量处理优化
3. 插件系统 - 支持第三方扩展

💡 实现建议

1. 立即可实现的功能

• 执行历史列表: 基于现有API快速实现
• 环境状态显示: 利用现有健康检查机制
• 基础统计图表: 使用Chart.js或Recharts

2. 需要后端支持的功能

• 实时状态更新: 需要WebSocket或轮询机制
• 批量操作: 需要新的批量API接口
• 高级筛选: 需要数据库查询优化

3. 渐进式开发策略

1. 先实现基础的CRUD操作
2. 再添加实时监控功能
3. 最后完善高级管理功能

这个设计方案提供了完整的功能架构，你可以根据实际需求和开发资源来选择优先实现的功能模块。需要我详细实现某个特定模块吗？