collabdocchat 1.2.13 → 2.0.0

package/src/pages/simplified-workflows.js

@@ -0,0 +1,651 @@
+// 简化的工作流视图 - 为非技术用户设计
+// 替换原有的复杂 JSON 配置方式
+
+async function renderSimplifiedWorkflowsView(container) {
+  if (!currentGroup) {
+    container.innerHTML = '<div class="empty-state">请先选择一个群组</div>';
+    return;
+  }
+
+  try {
+    const token = localStorage.getItem('token');
+    const response = await fetch(`http://localhost:8765/api/workflows/group/${currentGroup._id}`, {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    const result = await response.json();
+    const workflows = (result.data && result.data.workflows) || [];
+
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔄 工作流管理 - ${currentGroup.name}</h2>
+        <button class="btn-primary" id="createSimpleWorkflowBtn">+ 创建工作流</button>
+      </div>
+      
+      <div class="workflow-templates" style="margin-bottom: 30px;">
+        <h3 style="margin-bottom: 15px; color: var(--text-primary);">📋 快速创建模板</h3>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px;">
+          <div class="template-card" data-template="task-reminder">
+            <div class="template-icon">⏰</div>
+            <h4>任务提醒</h4>
+            <p>定时提醒成员完成任务</p>
+          </div>
+          <div class="template-card" data-template="daily-report">
+            <div class="template-icon">📊</div>
+            <h4>每日报告</h4>
+            <p>每天自动生成工作报告</p>
+          </div>
+          <div class="template-card" data-template="doc-approval">
+            <div class="template-icon">✅</div>
+            <h4>文档审批</h4>
+            <p>文档创建后自动通知审批</p>
+          </div>
+          <div class="template-card" data-template="welcome-message">
+            <div class="template-icon">👋</div>
+            <h4>欢迎消息</h4>
+            <p>新成员加入时自动发送欢迎</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="workflows-list" id="workflowsList">
+        ${workflows.length === 0 ? 
+          '<div class="empty-state">暂无工作流<br><small style="color: var(--text-secondary);">点击上方模板快速创建</small></div>' :
+          workflows.map(wf => createWorkflowCard(wf)).join('')
+        }
+      </div>
+
+      <!-- 简化的工作流创建模态框 -->
+      <div class="modal hidden" id="simpleWorkflowModal">
+        <div class="modal-content" style="max-width: 600px;">
+          <div class="modal-header">
+            <h3 id="workflowModalTitle">创建工作流</h3>
+            <button class="close-btn" id="closeWorkflowModal">&times;</button>
+          </div>
+          <form id="simpleWorkflowForm">
+            <div class="form-group">
+              <label>工作流名称 *</label>
+              <input type="text" id="wfName" required placeholder="例如：每日任务提醒">
+            </div>
+            
+            <div class="form-group">
+              <label>描述</label>
+              <textarea id="wfDescription" rows="2" placeholder="简单描述这个工作流的作用"></textarea>
+            </div>
+            
+            <div class="form-group">
+              <label>触发方式 *</label>
+              <select id="wfTriggerType" required>
+                <option value="">请选择触发方式</option>
+                <option value="manual">手动触发 - 需要手动点击执行</option>
+                <option value="daily">每天执行 - 每天固定时间自动执行</option>
+                <option value="weekly">每周执行 - 每周固定时间自动执行</option>
+                <option value="event">事件触发 - 特定事件发生时执行</option>
+              </select>
+            </div>
+
+            <!-- 每日执行选项 -->
+            <div class="form-group hidden" id="dailyOptions">
+              <label>执行时间</label>
+              <input type="time" id="dailyTime" value="09:00">
+            </div>
+
+            <!-- 每周执行选项 -->
+            <div class="form-group hidden" id="weeklyOptions">
+              <label>执行日期</label>
+              <select id="weeklyDay">
+                <option value="1">星期一</option>
+                <option value="2">星期二</option>
+                <option value="3">星期三</option>
+                <option value="4">星期四</option>
+                <option value="5">星期五</option>
+                <option value="6">星期六</option>
+                <option value="0">星期日</option>
+              </select>
+              <input type="time" id="weeklyTime" value="09:00" style="margin-top: 10px;">
+            </div>
+
+            <!-- 事件触发选项 -->
+            <div class="form-group hidden" id="eventOptions">
+              <label>触发事件</label>
+              <select id="eventType">
+                <option value="task_created">任务创建时</option>
+                <option value="task_completed">任务完成时</option>
+                <option value="doc_created">文档创建时</option>
+                <option value="member_joined">成员加入时</option>
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label>执行动作 *</label>
+              <select id="wfActionType" required>
+                <option value="">请选择执行动作</option>
+                <option value="send_notification">发送通知</option>
+                <option value="send_message">发送消息</option>
+                <option value="create_task">创建任务</option>
+                <option value="send_email">发送邮件</option>
+              </select>
+            </div>
+
+            <!-- 发送通知选项 -->
+            <div class="form-group hidden" id="notificationOptions">
+              <label>通知内容</label>
+              <textarea id="notificationContent" rows="3" placeholder="输入要发送的通知内容"></textarea>
+              <label style="margin-top: 10px;">通知对象</label>
+              <select id="notificationTarget">
+                <option value="all">所有成员</option>
+                <option value="admin">仅管理员</option>
+                <option value="creator">任务创建者</option>
+              </select>
+            </div>
+
+            <!-- 发送消息选项 -->
+            <div class="form-group hidden" id="messageOptions">
+              <label>消息内容</label>
+              <textarea id="messageContent" rows="3" placeholder="输入要发送的消息内容"></textarea>
+            </div>
+
+            <!-- 创建任务选项 -->
+            <div class="form-group hidden" id="taskOptions">
+              <label>任务标题</label>
+              <input type="text" id="taskTitle" placeholder="例如：完成每日报告">
+              <label style="margin-top: 10px;">任务描述</label>
+              <textarea id="taskDescription" rows="2" placeholder="任务的详细说明"></textarea>
+            </div>
+
+            <!-- 发送邮件选项 -->
+            <div class="form-group hidden" id="emailOptions">
+              <label>邮件主题</label>
+              <input type="text" id="emailSubject" placeholder="邮件主题">
+              <label style="margin-top: 10px;">邮件内容</label>
+              <textarea id="emailContent" rows="3" placeholder="邮件正文"></textarea>
+            </div>
+
+            <div style="display: flex; gap: 10px; margin-top: 20px;">
+              <button type="submit" class="btn-primary">创建工作流</button>
+              <button type="button" class="btn-secondary" id="cancelWorkflow">取消</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+
+    // 添加模板卡片样式
+    const style = document.createElement('style');
+    style.textContent = `
+      .template-card {
+        background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+        border: 2px solid var(--border);
+        border-radius: 12px;
+        padding: 20px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-align: center;
+      }
+      .template-card:hover {
+        border-color: var(--primary);
+        transform: translateY(-5px);
+        box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+      }
+      .template-icon {
+        font-size: 48px;
+        margin-bottom: 10px;
+      }
+      .template-card h4 {
+        margin: 10px 0 5px;
+        color: var(--text-primary);
+        font-size: 16px;
+      }
+      .template-card p {
+        margin: 0;
+        color: var(--text-secondary);
+        font-size: 13px;
+      }
+      .workflow-card {
+        background: var(--bg-card);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 20px;
+        margin-bottom: 15px;
+        transition: all 0.3s ease;
+      }
+      .workflow-card:hover {
+        border-color: var(--primary);
+        transform: translateX(5px);
+      }
+      .wf-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+      }
+      .wf-status {
+        padding: 4px 12px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .wf-status.active {
+        background: rgba(16,185,129,0.2);
+        color: var(--success);
+      }
+      .wf-status.inactive {
+        background: rgba(156,163,175,0.2);
+        color: var(--text-secondary);
+      }
+      .wf-meta {
+        display: flex;
+        gap: 15px;
+        margin: 10px 0;
+        font-size: 13px;
+        color: var(--text-secondary);
+      }
+      .wf-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 15px;
+      }
+    `;
+    document.head.appendChild(style);
+
+    // 创建工作流卡片
+    function createWorkflowCard(wf) {
+      const triggerText = getTriggerText(wf.trigger);
+      const actionText = getActionText(wf.steps);
+      
+      return `
+        <div class="workflow-card">
+          <div class="wf-header">
+            <h3>${wf.name}</h3>
+            <span class="wf-status ${wf.status}">${wf.status === 'active' ? '✅ 已激活' : '⏸️ 已停用'}</span>
+          </div>
+          <p style="color: var(--text-secondary); margin: 10px 0;">${wf.description || '暂无描述'}</p>
+          <div class="wf-meta">
+            <span>🔔 ${triggerText}</span>
+            <span>⚡ ${actionText}</span>
+            <span>📊 执行 ${wf.stats?.totalExecutions || 0} 次</span>
+          </div>
+          <div class="wf-actions">
+            ${wf.status === 'active' ? `
+              <button class="btn-secondary btn-sm" data-id="${wf._id}" data-action="trigger-wf">立即执行</button>
+              <button class="btn-warning btn-sm" data-id="${wf._id}" data-action="deactivate-wf">停用</button>
+            ` : `
+              <button class="btn-success btn-sm" data-id="${wf._id}" data-action="activate-wf">激活</button>
+            `}
+            <button class="btn-secondary btn-sm" data-id="${wf._id}" data-action="edit-wf">编辑</button>
+            <button class="btn-danger btn-sm" data-id="${wf._id}" data-action="delete-wf">删除</button>
+          </div>
+        </div>
+      `;
+    }
+
+    // 获取触发方式文本
+    function getTriggerText(trigger) {
+      if (!trigger) return '手动触发';
+      if (trigger.type === 'manual') return '手动触发';
+      if (trigger.type === 'scheduled') return '定时执行';
+      if (trigger.type === 'event') return '事件触发';
+      return '未知';
+    }
+
+    // 获取动作文本
+    function getActionText(steps) {
+      if (!steps || steps.length === 0) return '无动作';
+      const firstStep = steps[0];
+      if (firstStep.type === 'notification') return '发送通知';
+      if (firstStep.type === 'message') return '发送消息';
+      if (firstStep.type === 'task') return '创建任务';
+      if (firstStep.type === 'email') return '发送邮件';
+      return `${steps.length} 个步骤`;
+    }
+
+    // 模板卡片点击事件
+    document.querySelectorAll('.template-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const template = card.dataset.template;
+        openWorkflowModalWithTemplate(template);
+      });
+    });
+
+    // 创建工作流按钮
+    document.getElementById('createSimpleWorkflowBtn').addEventListener('click', () => {
+      openWorkflowModal();
+    });
+
+    // 工作流操作事件
+    setupWorkflowActions(token);
+
+  } catch (error) {
+    console.error('加载工作流失败:', error);
+    container.innerHTML = `
+      <div class="view-header">
+        <h2>🔄 工作流管理</h2>
+      </div>
+      <div class="empty-state">加载失败: ${error.message}</div>
+    `;
+  }
+}
+
+// 打开工作流模态框
+function openWorkflowModal(workflow = null) {
+  const modal = document.getElementById('simpleWorkflowModal');
+  const form = document.getElementById('simpleWorkflowForm');
+  
+  // 重置表单
+  form.reset();
+  hideAllOptions();
+  
+  // 如果是编辑模式，填充数据
+  if (workflow) {
+    document.getElementById('workflowModalTitle').textContent = '编辑工作流';
+    document.getElementById('wfName').value = workflow.name;
+    document.getElementById('wfDescription').value = workflow.description || '';
+    // ... 填充其他字段
+  } else {
+    document.getElementById('workflowModalTitle').textContent = '创建工作流';
+  }
+  
+  modal.classList.remove('hidden');
+  
+  // 设置事件监听
+  setupModalEvents();
+}
+
+// 使用模板打开模态框
+function openWorkflowModalWithTemplate(templateType) {
+  openWorkflowModal();
+  
+  const templates = {
+    'task-reminder': {
+      name: '任务提醒',
+      description: '每天早上9点提醒成员完成待办任务',
+      trigger: 'daily',
+      action: 'send_notification'
+    },
+    'daily-report': {
+      name: '每日报告',
+      description: '每天下午6点自动生成工作报告',
+      trigger: 'daily',
+      action: 'send_message'
+    },
+    'doc-approval': {
+      name: '文档审批',
+      description: '文档创建后自动通知管理员审批',
+      trigger: 'event',
+      action: 'send_notification'
+    },
+    'welcome-message': {
+      name: '欢迎消息',
+      description: '新成员加入时自动发送欢迎消息',
+      trigger: 'event',
+      action: 'send_message'
+    }
+  };
+  
+  const template = templates[templateType];
+  if (template) {
+    document.getElementById('wfName').value = template.name;
+    document.getElementById('wfDescription').value = template.description;
+    document.getElementById('wfTriggerType').value = template.trigger;
+    document.getElementById('wfActionType').value = template.action;
+    
+    // 触发change事件以显示相应选项
+    document.getElementById('wfTriggerType').dispatchEvent(new Event('change'));
+    document.getElementById('wfActionType').dispatchEvent(new Event('change'));
+  }
+}
+
+// 设置模态框事件
+function setupModalEvents() {
+  const triggerSelect = document.getElementById('wfTriggerType');
+  const actionSelect = document.getElementById('wfActionType');
+  
+  // 触发方式改变
+  triggerSelect.addEventListener('change', () => {
+    hideAllTriggerOptions();
+    const value = triggerSelect.value;
+    if (value === 'daily') {
+      document.getElementById('dailyOptions').classList.remove('hidden');
+    } else if (value === 'weekly') {
+      document.getElementById('weeklyOptions').classList.remove('hidden');
+    } else if (value === 'event') {
+      document.getElementById('eventOptions').classList.remove('hidden');
+    }
+  });
+  
+  // 执行动作改变
+  actionSelect.addEventListener('change', () => {
+    hideAllActionOptions();
+    const value = actionSelect.value;
+    if (value === 'send_notification') {
+      document.getElementById('notificationOptions').classList.remove('hidden');
+    } else if (value === 'send_message') {
+      document.getElementById('messageOptions').classList.remove('hidden');
+    } else if (value === 'create_task') {
+      document.getElementById('taskOptions').classList.remove('hidden');
+    } else if (value === 'send_email') {
+      document.getElementById('emailOptions').classList.remove('hidden');
+    }
+  });
+  
+  // 关闭按钮
+  document.getElementById('closeWorkflowModal').addEventListener('click', () => {
+    document.getElementById('simpleWorkflowModal').classList.add('hidden');
+  });
+  
+  document.getElementById('cancelWorkflow').addEventListener('click', () => {
+    document.getElementById('simpleWorkflowModal').classList.add('hidden');
+  });
+  
+  // 表单提交
+  document.getElementById('simpleWorkflowForm').addEventListener('submit', handleWorkflowSubmit);
+}
+
+// 隐藏所有选项
+function hideAllOptions() {
+  hideAllTriggerOptions();
+  hideAllActionOptions();
+}
+
+function hideAllTriggerOptions() {
+  document.getElementById('dailyOptions').classList.add('hidden');
+  document.getElementById('weeklyOptions').classList.add('hidden');
+  document.getElementById('eventOptions').classList.add('hidden');
+}
+
+function hideAllActionOptions() {
+  document.getElementById('notificationOptions').classList.add('hidden');
+  document.getElementById('messageOptions').classList.add('hidden');
+  document.getElementById('taskOptions').classList.add('hidden');
+  document.getElementById('emailOptions').classList.add('hidden');
+}
+
+// 处理表单提交
+async function handleWorkflowSubmit(e) {
+  e.preventDefault();
+  
+  const name = document.getElementById('wfName').value.trim();
+  const description = document.getElementById('wfDescription').value.trim();
+  const triggerType = document.getElementById('wfTriggerType').value;
+  const actionType = document.getElementById('wfActionType').value;
+  
+  if (!name || !triggerType || !actionType) {
+    alert('请填写所有必填项！');
+    return;
+  }
+  
+  // 构建触发器配置
+  const trigger = buildTriggerConfig(triggerType);
+  
+  // 构建步骤配置
+  const steps = buildStepsConfig(actionType);
+  
+  try {
+    const token = localStorage.getItem('token');
+    const response = await fetch('http://localhost:8765/api/workflows', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
+      },
+      body: JSON.stringify({
+        name,
+        description,
+        groupId: currentGroup._id,
+        trigger,
+        steps
+      })
+    });
+    
+    const result = await response.json();
+    
+    if (result.success || response.ok) {
+      alert('工作流创建成功！');
+      document.getElementById('simpleWorkflowModal').classList.add('hidden');
+      // 刷新列表
+      const contentArea = document.getElementById('contentArea');
+      renderSimplifiedWorkflowsView(contentArea);
+    } else {
+      alert('创建失败: ' + (result.error?.message || result.message || '未知错误'));
+    }
+  } catch (error) {
+    console.error('创建工作流失败:', error);
+    alert('创建失败: ' + error.message);
+  }
+}
+
+// 构建触发器配置
+function buildTriggerConfig(triggerType) {
+  const trigger = { type: triggerType };
+  
+  if (triggerType === 'daily') {
+    const time = document.getElementById('dailyTime').value;
+    const [hour, minute] = time.split(':');
+    trigger.schedule = `${minute} ${hour} * * *`; // Cron: 每天指定时间
+  } else if (triggerType === 'weekly') {
+    const day = document.getElementById('weeklyDay').value;
+    const time = document.getElementById('weeklyTime').value;
+    const [hour, minute] = time.split(':');
+    trigger.schedule = `${minute} ${hour} * * ${day}`; // Cron: 每周指定时间
+  } else if (triggerType === 'event') {
+    trigger.event = document.getElementById('eventType').value;
+  } else {
+    trigger.type = 'manual';
+  }
+  
+  return trigger;
+}
+
+// 构建步骤配置
+function buildStepsConfig(actionType) {
+  const steps = [];
+  
+  if (actionType === 'send_notification') {
+    const content = document.getElementById('notificationContent').value;
+    const target = document.getElementById('notificationTarget').value;
+    steps.push({
+      name: '发送通知',
+      type: 'notification',
+      config: {
+        message: content,
+        target: target
+      }
+    });
+  } else if (actionType === 'send_message') {
+    const content = document.getElementById('messageContent').value;
+    steps.push({
+      name: '发送消息',
+      type: 'message',
+      config: {
+        content: content
+      }
+    });
+  } else if (actionType === 'create_task') {
+    const title = document.getElementById('taskTitle').value;
+    const description = document.getElementById('taskDescription').value;
+    steps.push({
+      name: '创建任务',
+      type: 'task',
+      config: {
+        title: title,
+        description: description
+      }
+    });
+  } else if (actionType === 'send_email') {
+    const subject = document.getElementById('emailSubject').value;
+    const content = document.getElementById('emailContent').value;
+    steps.push({
+      name: '发送邮件',
+      type: 'email',
+      config: {
+        subject: subject,
+        body: content
+      }
+    });
+  }
+  
+  return steps;
+}
+
+// 设置工作流操作
+function setupWorkflowActions(token) {
+  // 激活/停用
+  document.querySelectorAll('[data-action="activate-wf"], [data-action="deactivate-wf"]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const action = btn.dataset.action === 'activate-wf' ? 'activate' : 'deactivate';
+      try {
+        await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}/${action}`, {
+          method: 'POST',
+          headers: { 'Authorization': `Bearer ${token}` }
+        });
+        alert(action === 'activate' ? '已激活工作流' : '已停用工作流');
+        const contentArea = document.getElementById('contentArea');
+        renderSimplifiedWorkflowsView(contentArea);
+      } catch (error) {
+        alert('操作失败: ' + error.message);
+      }
+    });
+  });
+  
+  // 立即执行
+  document.querySelectorAll('[data-action="trigger-wf"]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      if (confirm('确定要立即执行此工作流吗？')) {
+        try {
+          await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}/trigger`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify({ triggerData: {} })
+          });
+          alert('工作流已触发！');
+        } catch (error) {
+          alert('触发失败: ' + error.message);
+        }
+      }
+    });
+  });
+  
+  // 删除
+  document.querySelectorAll('[data-action="delete-wf"]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      if (confirm('确定要删除这个工作流吗？删除后无法恢复！')) {
+        try {
+          await fetch(`http://localhost:8765/api/workflows/${btn.dataset.id}`, {
+            method: 'DELETE',
+            headers: { 'Authorization': `Bearer ${token}` }
+          });
+          alert('工作流删除成功！');
+          const contentArea = document.getElementById('contentArea');
+          renderSimplifiedWorkflowsView(contentArea);
+        } catch (error) {
+          alert('删除失败: ' + error.message);
+        }
+      }
+    });
+  });
+}
+
+
+