collabdocchat 1.2.13 → 2.0.1

package/src/pages/optimized-workflow-view.js

@@ -0,0 +1,806 @@
+/**
+ * 优化后的工作流管理界面
+ * 可视化创建工作流，无需编写JSON代码
+ */
+
+async function renderOptimizedWorkflowView(container, currentGroup, apiService) {
+  if (!currentGroup) {
+    container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+    return;
+  }
+
+  try {
+    const token = localStorage.getItem('token');
+    
+    // 获取工作流列表
+    const workflowsResponse = await fetch(`http://localhost:8765/api/workflows/group/${currentGroup._id}`, {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    const workflowsResult = await workflowsResponse.json();
+    const workflows = workflowsResult.data?.workflows || [];
+    
+    console.log('📋 工作流列表:', workflows);
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔄 工作流管理 - ${currentGroup.name}</h2>
+        <button class="btn-primary" id="createWorkflowBtn">
+          <span style="font-size: 18px;">➕</span> 创建工作流
+        </button>
+      </div>
+
+      <!-- 工作流模板选择 -->
+      <div class="workflow-templates-section">
+        <h3 style="margin: 20px 0; color: var(--text-primary);">📋 快速开始 - 选择模板</h3>
+        <div class="workflow-templates-grid">
+          <div class="template-card" data-template="document-approval">
+            <div class="template-icon">📄</div>
+            <h4>文档审批流程</h4>
+            <p>创建文档后自动通知审批人</p>
+            <button class="btn-use-template">使用模板</button>
+          </div>
+
+          <div class="template-card" data-template="task-notification">
+            <div class="template-icon">📋</div>
+            <h4>任务通知流程</h4>
+            <p>任务创建时自动通知相关人员</p>
+            <button class="btn-use-template">使用模板</button>
+          </div>
+
+          <div class="template-card" data-template="auto-backup">
+            <div class="template-icon">💾</div>
+            <h4>自动备份流程</h4>
+            <p>定时自动备份重要数据</p>
+            <button class="btn-use-template">使用模板</button>
+          </div>
+
+          <div class="template-card" data-template="custom">
+            <div class="template-icon">⚙️</div>
+            <h4>自定义流程</h4>
+            <p>从零开始创建自定义工作流</p>
+            <button class="btn-use-template">创建</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 现有工作流列表 -->
+      <div class="workflows-list-section">
+        <h3 style="margin: 30px 0 20px; color: var(--text-primary);">📦 现有工作流</h3>
+        <div class="workflows-cards-grid" id="workflowCards">
+          ${workflows.length === 0 ? `
+            <div class="empty-state-modern">
+              <div class="empty-icon">📭</div>
+              <h3>暂无工作流</h3>
+              <p>选择上方模板快速创建工作流</p>
+            </div>
+          ` : workflows.map(workflow => createWorkflowCard(workflow)).join('')}
+        </div>
+      </div>
+
+      <!-- 创建工作流模态框 -->
+      <div class="modal hidden" id="createWorkflowModal">
+        <div class="modal-content" style="max-width: 800px;">
+          <div class="modal-header">
+            <h3>创建工作流</h3>
+            <button class="close-btn" id="closeCreateWorkflow">&times;</button>
+          </div>
+          <form id="createWorkflowForm">
+            <div class="workflow-form-modern">
+              <!-- 基本信息 -->
+              <div class="form-section">
+                <h4>📝 基本信息</h4>
+                <div class="form-group">
+                  <label>工作流名称 *</label>
+                  <input type="text" id="workflowName" placeholder="例如：文档审批流程" required>
+                </div>
+                <div class="form-group">
+                  <label>描述</label>
+                  <textarea id="workflowDescription" rows="3" placeholder="描述这个工作流的用途..."></textarea>
+                </div>
+              </div>
+
+              <!-- 触发条件 -->
+              <div class="form-section">
+                <h4>⚡ 触发条件</h4>
+                <div class="form-group">
+                  <label>触发类型 *</label>
+                  <select id="triggerType" required>
+                    <option value="">请选择触发类型</option>
+                    <option value="document_create">文档创建时</option>
+                    <option value="document_update">文档更新时</option>
+                    <option value="task_create">任务创建时</option>
+                    <option value="task_complete">任务完成时</option>
+                    <option value="message_send">消息发送时</option>
+                    <option value="scheduled">定时触发</option>
+                  </select>
+                </div>
+                <div class="form-group hidden" id="scheduleGroup">
+                  <label>定时规则（Cron表达式）</label>
+                  <input type="text" id="scheduleRule" placeholder="例如：0 9 * * * (每天9点)">
+                  <small>示例：0 9 * * * (每天9点)，0 */6 * * * (每6小时)</small>
+                </div>
+              </div>
+
+              <!-- 执行动作 -->
+              <div class="form-section">
+                <h4>🎯 执行动作</h4>
+                <div class="form-group">
+                  <label>动作类型 *</label>
+                  <select id="actionType" required>
+                    <option value="">请选择动作类型</option>
+                    <option value="notification">发送通知</option>
+                    <option value="email">发送邮件</option>
+                    <option value="create_task">创建任务</option>
+                    <option value="backup">执行备份</option>
+                    <option value="webhook">调用Webhook</option>
+                  </select>
+                </div>
+
+                <!-- 通知配置 -->
+                <div class="action-config hidden" id="notificationConfig">
+                  <div class="form-group">
+                    <label>通知消息</label>
+                    <textarea id="notificationMessage" rows="2" placeholder="通知内容..."></textarea>
+                  </div>
+                  <div class="form-group">
+                    <label>通知对象</label>
+                    <select id="notificationTarget">
+                      <option value="all">所有成员</option>
+                      <option value="admin">仅管理员</option>
+                      <option value="creator">创建者</option>
+                    </select>
+                  </div>
+                </div>
+
+                <!-- 邮件配置 -->
+                <div class="action-config hidden" id="emailConfig">
+                  <div class="form-group">
+                    <label>邮件主题</label>
+                    <input type="text" id="emailSubject" placeholder="邮件主题">
+                  </div>
+                  <div class="form-group">
+                    <label>邮件内容</label>
+                    <textarea id="emailBody" rows="3" placeholder="邮件内容..."></textarea>
+                  </div>
+                </div>
+
+                <!-- 任务配置 -->
+                <div class="action-config hidden" id="taskConfig">
+                  <div class="form-group">
+                    <label>任务标题</label>
+                    <input type="text" id="taskTitle" placeholder="任务标题">
+                  </div>
+                  <div class="form-group">
+                    <label>任务描述</label>
+                    <textarea id="taskDescription" rows="2" placeholder="任务描述..."></textarea>
+                  </div>
+                </div>
+
+                <!-- Webhook配置 -->
+                <div class="action-config hidden" id="webhookConfig">
+                  <div class="form-group">
+                    <label>Webhook URL</label>
+                    <input type="url" id="webhookUrl" placeholder="https://example.com/webhook">
+                  </div>
+                </div>
+              </div>
+
+              <!-- 条件过滤 -->
+              <div class="form-section">
+                <h4>🔍 条件过滤（可选）</h4>
+                <div class="form-group">
+                  <label>
+                    <input type="checkbox" id="enableCondition">
+                    启用条件过滤
+                  </label>
+                </div>
+                <div class="condition-config hidden" id="conditionConfig">
+                  <div class="form-group">
+                    <label>条件字段</label>
+                    <input type="text" id="conditionField" placeholder="例如：title">
+                  </div>
+                  <div class="form-group">
+                    <label>条件值</label>
+                    <input type="text" id="conditionValue" placeholder="例如：重要">
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div style="display: flex; gap: 10px; margin-top: 20px; justify-content: center;">
+              <button type="submit" class="btn-primary btn-large">
+                <span>✅</span> 创建工作流
+              </button>
+              <button type="button" class="btn-secondary btn-large" id="cancelCreateWorkflow">
+                <span>❌</span> 取消
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+
+    // 添加样式
+    addWorkflowStyles();
+
+    // 绑定事件
+    setupWorkflowEvents(token, container, currentGroup, apiService);
+
+  } catch (error) {
+    console.error('加载工作流管理失败:', error);
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔄 工作流管理</h2>
+      </div>
+      <div class="empty-state">加载失败: ${error.message}</div>
+    `;
+  }
+}
+
+// 创建工作流卡片
+function createWorkflowCard(workflow) {
+  const statusConfig = {
+    active: { icon: '✅', label: '运行中', color: '#10b981' },
+    inactive: { icon: '⏸️', label: '已暂停', color: '#f59e0b' },
+    error: { icon: '❌', label: '错误', color: '#ef4444' }
+  };
+
+  const config = statusConfig[workflow.status] || statusConfig.inactive;
+
+  return `
+    <div class="workflow-card-modern">
+      <div class="workflow-card-header">
+        <div class="workflow-icon">🔄</div>
+        <div class="workflow-card-title">
+          <h4>${workflow.name}</h4>
+          <span class="workflow-time">${new Date(workflow.createdAt).toLocaleString()}</span>
+        </div>
+        <div class="workflow-status-badge" style="background: ${config.color}20; color: ${config.color};">
+          ${config.icon} ${config.label}
+        </div>
+      </div>
+
+      <div class="workflow-card-body">
+        <p class="workflow-description">${workflow.description || '无描述'}</p>
+        <div class="workflow-info-row">
+          <span class="info-label">触发器</span>
+          <span class="info-value">${getTriggerText(workflow.trigger)}</span>
+        </div>
+        <div class="workflow-info-row">
+          <span class="info-label">执行次数</span>
+          <span class="info-value">${workflow.executionCount || 0} 次</span>
+        </div>
+      </div>
+
+      <div class="workflow-card-actions">
+        <button class="btn-action btn-toggle" data-id="${workflow._id}" data-status="${workflow.status}">
+          <span>${workflow.status === 'active' ? '⏸️' : '▶️'}</span> ${workflow.status === 'active' ? '暂停' : '启动'}
+        </button>
+        <button class="btn-action btn-edit" data-id="${workflow._id}">
+          <span>✏️</span> 编辑
+        </button>
+        <button class="btn-action btn-delete" data-id="${workflow._id}">
+          <span>🗑️</span> 删除
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+// 获取触发器文本
+function getTriggerText(trigger) {
+  if (!trigger) return '未知';
+  
+  const typeMap = {
+    'manual': '手动触发',
+    'scheduled': '定时触发',
+    'event': '事件触发'
+  };
+  
+  const eventMap = {
+    'document_create': '文档创建',
+    'document_update': '文档更新',
+    'task_create': '任务创建',
+    'task_complete': '任务完成',
+    'message_send': '消息发送'
+  };
+  
+  if (trigger.type === 'event' && trigger.event) {
+    return eventMap[trigger.event] || trigger.event;
+  }
+  
+  return typeMap[trigger.type] || trigger.type;
+}
+
+// 添加样式
+function addWorkflowStyles() {
+  if (document.getElementById('workflow-modern-styles')) return;
+
+  const style = document.createElement('style');
+  style.id = 'workflow-modern-styles';
+  style.textContent = `
+    .workflow-templates-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+
+    .template-card {
+      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+      border: 2px solid var(--border);
+      border-radius: 16px;
+      padding: 24px;
+      text-align: center;
+      transition: all 0.3s ease;
+      cursor: pointer;
+    }
+
+    .template-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 12px 32px rgba(99,102,241,0.2);
+      border-color: var(--primary);
+    }
+
+    .template-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+    }
+
+    .template-card h4 {
+      margin: 0 0 8px;
+      font-size: 16px;
+      color: var(--text-primary);
+    }
+
+    .template-card p {
+      margin: 0 0 16px;
+      font-size: 13px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    .btn-use-template {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 8px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      width: 100%;
+    }
+
+    .btn-use-template:hover {
+      transform: scale(1.05);
+      box-shadow: 0 4px 12px rgba(99,102,241,0.4);
+    }
+
+    .workflows-cards-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+      gap: 20px;
+    }
+
+    .workflow-card-modern {
+      background: var(--bg-card);
+      border: 2px solid var(--border);
+      border-radius: 16px;
+      padding: 20px;
+      transition: all 0.3s ease;
+    }
+
+    .workflow-card-modern:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+      border-color: var(--primary);
+    }
+
+    .workflow-card-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .workflow-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      flex-shrink: 0;
+    }
+
+    .workflow-card-title {
+      flex: 1;
+    }
+
+    .workflow-card-title h4 {
+      margin: 0 0 4px;
+      font-size: 16px;
+      color: var(--text-primary);
+    }
+
+    .workflow-time {
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
+
+    .workflow-status-badge {
+      padding: 6px 12px;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .workflow-card-body {
+      margin-bottom: 16px;
+    }
+
+    .workflow-description {
+      margin: 0 0 12px;
+      font-size: 14px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+    }
+
+    .workflow-info-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 0;
+      font-size: 14px;
+    }
+
+    .workflow-card-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .workflow-form-modern {
+      max-height: 60vh;
+      overflow-y: auto;
+      padding-right: 10px;
+    }
+
+    .form-section {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    .form-section h4 {
+      margin: 0 0 16px;
+      font-size: 16px;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .action-config,
+    .condition-config {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--border);
+    }
+
+    .btn-large {
+      padding: 14px 28px;
+      font-size: 15px;
+    }
+
+    .empty-state-modern {
+      grid-column: 1 / -1;
+      text-align: center;
+      padding: 60px 20px;
+      background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(99,102,241,0.03) 100%);
+      border-radius: 16px;
+      border: 2px dashed var(--border);
+    }
+
+    .empty-icon {
+      font-size: 64px;
+      margin-bottom: 20px;
+    }
+
+    .empty-state-modern h3 {
+      margin: 0 0 10px;
+      color: var(--text-primary);
+      font-size: 20px;
+    }
+
+    .empty-state-modern p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-size: 14px;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// 设置事件监听
+function setupWorkflowEvents(token, container, currentGroup, apiService) {
+  // 模板选择
+  document.querySelectorAll('.template-card').forEach(card => {
+    card.addEventListener('click', () => {
+      const template = card.dataset.template;
+      openWorkflowModal(template);
+    });
+  });
+
+  // 创建工作流按钮
+  document.getElementById('createWorkflowBtn')?.addEventListener('click', () => {
+    openWorkflowModal('custom');
+  });
+
+  // 关闭模态框
+  document.getElementById('closeCreateWorkflow')?.addEventListener('click', () => {
+    document.getElementById('createWorkflowModal').classList.add('hidden');
+  });
+
+  document.getElementById('cancelCreateWorkflow')?.addEventListener('click', () => {
+    document.getElementById('createWorkflowModal').classList.add('hidden');
+  });
+
+  // 触发类型变化
+  document.getElementById('triggerType')?.addEventListener('change', (e) => {
+    const scheduleGroup = document.getElementById('scheduleGroup');
+    if (e.target.value === 'scheduled') {
+      scheduleGroup.classList.remove('hidden');
+    } else {
+      scheduleGroup.classList.add('hidden');
+    }
+  });
+
+  // 动作类型变化
+  document.getElementById('actionType')?.addEventListener('change', (e) => {
+    // 隐藏所有配置
+    document.querySelectorAll('.action-config').forEach(el => el.classList.add('hidden'));
+    
+    // 显示对应配置
+    const configMap = {
+      'notification': 'notificationConfig',
+      'email': 'emailConfig',
+      'create_task': 'taskConfig',
+      'webhook': 'webhookConfig'
+    };
+    
+    const configId = configMap[e.target.value];
+    if (configId) {
+      document.getElementById(configId)?.classList.remove('hidden');
+    }
+  });
+
+  // 条件过滤开关
+  document.getElementById('enableCondition')?.addEventListener('change', (e) => {
+    const conditionConfig = document.getElementById('conditionConfig');
+    if (e.target.checked) {
+      conditionConfig.classList.remove('hidden');
+    } else {
+      conditionConfig.classList.add('hidden');
+    }
+  });
+
+  // 创建工作流表单提交
+  document.getElementById('createWorkflowForm')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    await createWorkflow(token, container, currentGroup, apiService);
+  });
+
+  // 工作流操作按钮
+  document.querySelectorAll('.btn-toggle').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const workflowId = btn.dataset.id;
+      const currentStatus = btn.dataset.status;
+      const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
+      
+      try {
+        await fetch(`http://localhost:8765/api/workflows/${workflowId}/status`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${token}`
+          },
+          body: JSON.stringify({ status: newStatus })
+        });
+        
+        alert(`工作流已${newStatus === 'active' ? '启动' : '暂停'}！`);
+        renderOptimizedWorkflowView(container, currentGroup, apiService);
+      } catch (error) {
+        alert('操作失败: ' + error.message);
+      }
+    });
+  });
+
+  document.querySelectorAll('.btn-delete').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      if (!confirm('确定要删除此工作流吗？')) return;
+
+      const workflowId = btn.dataset.id;
+      try {
+        await fetch(`http://localhost:8765/api/workflows/${workflowId}`, {
+          method: 'DELETE',
+          headers: { 'Authorization': `Bearer ${token}` }
+        });
+
+        alert('工作流删除成功！');
+        renderOptimizedWorkflowView(container, currentGroup, apiService);
+      } catch (error) {
+        alert('删除失败: ' + error.message);
+      }
+    });
+  });
+}
+
+// 打开工作流模态框并填充模板
+function openWorkflowModal(template) {
+  const modal = document.getElementById('createWorkflowModal');
+  modal.classList.remove('hidden');
+
+  // 根据模板填充表单
+  const templates = {
+    'document-approval': {
+      name: '文档审批流程',
+      description: '文档创建后自动通知管理员审批',
+      trigger: 'document_create',
+      action: 'notification',
+      notificationMessage: '新文档待审批',
+      notificationTarget: 'admin'
+    },
+    'task-notification': {
+      name: '任务通知流程',
+      description: '任务创建时自动通知所有成员',
+      trigger: 'task_create',
+      action: 'notification',
+      notificationMessage: '新任务已分配',
+      notificationTarget: 'all'
+    },
+    'auto-backup': {
+      name: '自动备份流程',
+      description: '每天凌晨2点自动备份数据',
+      trigger: 'scheduled',
+      scheduleRule: '0 2 * * *',
+      action: 'notification'
+    }
+  };
+
+  const templateData = templates[template];
+  if (templateData) {
+    document.getElementById('workflowName').value = templateData.name;
+    document.getElementById('workflowDescription').value = templateData.description;
+    document.getElementById('triggerType').value = templateData.trigger;
+    document.getElementById('actionType').value = templateData.action;
+    
+    // 触发类型变化事件
+    document.getElementById('triggerType').dispatchEvent(new Event('change'));
+    document.getElementById('actionType').dispatchEvent(new Event('change'));
+    
+    if (templateData.scheduleRule) {
+      document.getElementById('scheduleRule').value = templateData.scheduleRule;
+    }
+    if (templateData.notificationMessage) {
+      document.getElementById('notificationMessage').value = templateData.notificationMessage;
+    }
+    if (templateData.notificationTarget) {
+      document.getElementById('notificationTarget').value = templateData.notificationTarget;
+    }
+  }
+}
+
+// 创建工作流
+async function createWorkflow(token, container, currentGroup, apiService) {
+  const name = document.getElementById('workflowName').value;
+  const description = document.getElementById('workflowDescription').value;
+  const triggerType = document.getElementById('triggerType').value;
+  const actionType = document.getElementById('actionType').value;
+
+  // 构建触发器配置
+  const trigger = {};
+  
+  // 判断触发类型
+  if (triggerType === 'scheduled') {
+    trigger.type = 'scheduled';
+    trigger.schedule = document.getElementById('scheduleRule').value;
+  } else {
+    trigger.type = 'event';
+    trigger.event = triggerType;
+  }
+
+  // 构建工作流数据
+  const workflowData = {
+    name,
+    description,
+    groupId: currentGroup._id,
+    trigger: trigger,
+    steps: []
+  };
+
+  // 构建动作步骤
+  const step = {
+    name: actionType === 'notification' ? '发送通知' : 
+          actionType === 'email' ? '发送邮件' : 
+          actionType === 'create_task' ? '创建任务' : 
+          actionType === 'webhook' ? '调用Webhook' : '执行动作',
+    type: actionType,
+    order: 1,
+    config: {}
+  };
+
+  switch (actionType) {
+    case 'notification':
+      step.config.message = document.getElementById('notificationMessage').value;
+      step.config.notificationType = 'system';
+      // 根据目标设置接收者（这里简化处理，实际应该获取用户ID）
+      step.config.recipients = [];
+      break;
+    case 'email':
+      step.config.notificationType = 'email';
+      step.config.message = document.getElementById('emailSubject').value + '\n' + document.getElementById('emailBody').value;
+      break;
+    case 'create_task':
+      step.type = 'assignment';
+      step.config.message = document.getElementById('taskTitle').value;
+      break;
+    case 'webhook':
+      step.config.url = document.getElementById('webhookUrl').value;
+      step.config.method = 'POST';
+      break;
+  }
+
+  workflowData.steps.push(step);
+
+  // 添加条件过滤
+  if (document.getElementById('enableCondition').checked) {
+    const conditionField = document.getElementById('conditionField').value;
+    const conditionValue = document.getElementById('conditionValue').value;
+    
+    if (conditionField && conditionValue) {
+      workflowData.trigger.conditions = [{
+        field: conditionField,
+        operator: 'contains',
+        value: conditionValue
+      }];
+    }
+  }
+
+  console.log('📤 发送工作流数据:', workflowData);
+
+  try {
+    const response = await fetch('http://localhost:8765/api/workflows', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify(workflowData)
+    });
+
+    const result = await response.json();
+    console.log('📥 服务器响应:', result);
+    
+    if (result.success) {
+      alert('工作流创建成功！');
+      document.getElementById('createWorkflowModal').classList.add('hidden');
+      // 重新渲染工作流列表
+      await renderOptimizedWorkflowView(container, currentGroup, apiService);
+    } else {
+      alert('创建失败: ' + (result.error?.message || result.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('❌ 创建工作流失败:', error);
+    alert('创建失败: ' + error.message);
+  }
+}
+
+// 导出函数
+export { renderOptimizedWorkflowView };
+