feat: 多工作流后端实现

AI_WORKFLOW_SYSTEM_DESIGN.md

@@ -0,0 +1,292 @@
+# AI工作流系统功能设计方案
+
+## 🎯 系统概述
+
+AI工作流页面是MixVideo的核心功能模块，旨在提供统一的AI任务管理和执行平台。当前已有基础架构，需要完善以下核心功能模块。
+
+## 📋 当前状态分析
+
+### ✅ 已实现
+- 基础页面框架和导航
+- 工作流列表组件 (WorkflowList)
+- 智能表单生成器 (WorkflowFormGenerator)
+- 工作流执行模态框 (WorkflowExecutionModal)
+- 数据库表结构和迁移脚本
+- Rust后端服务和API接口
+
+### ❌ 待实现
+- 执行历史管理
+- 执行环境管理
+- 工作流模板创建/编辑
+- 实时状态监控
+- 结果管理和下载
+
+## 🏗️ 功能模块设计
+
+### 1. 工作流模板管理
+
+#### 1.1 工作流创建器 (WorkflowCreator)
+```typescript
+interface WorkflowCreatorProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (template: WorkflowTemplate) => void;
+  editingTemplate?: WorkflowTemplate;
+}
+```
+
+**功能特性：**
+- 可视化工作流设计器
+- 拖拽式节点编辑
+- 参数配置界面生成
+- 实时预览和验证
+- 版本管理支持
+
+#### 1.2 工作流编辑器 (WorkflowEditor)
+```typescript
+interface WorkflowEditorProps {
+  template: WorkflowTemplate;
+  onSave: (template: WorkflowTemplate) => void;
+  onCancel: () => void;
+}
+```
+
+**功能特性：**
+- JSON配置编辑
+- UI配置可视化编辑
+- 参数schema定义
+- 测试执行功能
+
+### 2. 执行历史管理
+
+#### 2.1 执行历史列表 (ExecutionHistoryList)
+```typescript
+interface ExecutionHistoryListProps {
+  filter?: ExecutionRecordFilter;
+  onViewDetails: (record: ExecutionRecord) => void;
+  onRetry: (record: ExecutionRecord) => void;
+  onDelete: (recordId: number) => void;
+}
+```
+
+**功能特性：**
+- 分页加载执行记录
+- 多维度筛选（状态、时间、工作流类型）
+- 批量操作（删除、重试）
+- 执行统计图表
+- 导出功能
+
+#### 2.2 执行详情查看器 (ExecutionDetailViewer)
+```typescript
+interface ExecutionDetailViewerProps {
+  record: ExecutionRecord;
+  isOpen: boolean;
+  onClose: () => void;
+}
+```
+
+**功能特性：**
+- 完整执行信息展示
+- 输入输出数据查看
+- 错误日志分析
+- 执行时间线
+- 结果下载
+
+### 3. 执行环境管理
+
+#### 3.1 环境列表 (EnvironmentList)
+```typescript
+interface EnvironmentListProps {
+  environments: ExecutionEnvironment[];
+  onAdd: () => void;
+  onEdit: (env: ExecutionEnvironment) => void;
+  onDelete: (envId: number) => void;
+  onHealthCheck: (envId: number) => void;
+}
+```
+
+**功能特性：**
+- 环境状态实时监控
+- 健康检查和性能统计
+- 负载均衡配置
+- 连接测试
+- 批量管理
+
+#### 3.2 环境配置器 (EnvironmentConfigurator)
+```typescript
+interface EnvironmentConfiguratorProps {
+  environment?: ExecutionEnvironment;
+  isOpen: boolean;
+  onSave: (env: ExecutionEnvironment) => void;
+  onClose: () => void;
+}
+```
+
+**功能特性：**
+- 环境类型选择（本地ComfyUI、Modal、RunPod）
+- 连接参数配置
+- 支持的工作流类型设置
+- 资源限制配置
+- 连接测试
+
+### 4. 实时监控面板
+
+#### 4.1 执行监控器 (ExecutionMonitor)
+```typescript
+interface ExecutionMonitorProps {
+  activeExecutions: ExecutionRecord[];
+  onCancel: (executionId: number) => void;
+  onViewLogs: (executionId: number) => void;
+}
+```
+
+**功能特性：**
+- 实时执行状态更新
+- 进度条和时间估算
+- 资源使用监控
+- 队列状态显示
+- 一键取消功能
+
+#### 4.2 系统状态面板 (SystemStatusPanel)
+```typescript
+interface SystemStatusPanelProps {
+  systemStats: SystemStatistics;
+  refreshInterval?: number;
+}
+```
+
+**功能特性：**
+- 系统整体状态概览
+- 环境健康状态
+- 执行队列统计
+- 性能指标图表
+- 告警通知
+
+## 🎨 UI/UX 设计原则
+
+### 1. 响应式设计
+- 支持桌面端优化布局
+- 自适应不同屏幕尺寸
+- 移动端友好的交互
+
+### 2. 状态可视化
+- 清晰的状态指示器
+- 进度条和加载动画
+- 错误状态突出显示
+- 成功状态确认反馈
+
+### 3. 操作便捷性
+- 快捷键支持
+- 批量操作功能
+- 拖拽排序
+- 右键菜单
+
+### 4. 数据展示
+- 表格和卡片视图切换
+- 高级筛选和搜索
+- 数据导出功能
+- 图表可视化
+
+## 🔧 技术实现方案
+
+### 1. 状态管理
+```typescript
+// 使用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. 实时更新
+```typescript
+// WebSocket连接用于实时状态更新
+class WorkflowWebSocketService {
+  connect(): void;
+  disconnect(): void;
+  subscribeToExecution(executionId: number): void;
+  onStatusUpdate(callback: (update: ExecutionStatusUpdate) => void): void;
+}
+```
+
+### 3. 数据缓存
+```typescript
+// 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. 最后完善高级管理功能
+
+这个设计方案提供了完整的功能架构，你可以根据实际需求和开发资源来选择优先实现的功能模块。需要我详细实现某个特定模块吗？