collabdocchat 2.4.3 → 2.4.5

package/src/pages/optimized-task-detail-original.js

@@ -0,0 +1,838 @@
+// 优化后的任务详情界面
+// 使用卡片式布局，提升视觉效果和信息层次
+
+function renderOptimizedTaskDetail(task, container) {
+  container.innerHTML = `
+    <div class="task-detail-view-modern">
+      <!-- 头部区域 -->
+      <div class="task-detail-header-modern">
+        <div class="task-header-left">
+          <h2>${task.title}</h2>
+          <div class="task-badges">
+            <span class="status-badge-modern status-${task.status}">
+              ${getStatusIcon(task.status)} ${getStatusText(task.status)}
+            </span>
+            ${task.priority ? `<span class="priority-badge-modern priority-${task.priority}">
+              ${getPriorityIcon(task.priority)} ${task.priority}
+            </span>` : ''}
+          </div>
+        </div>
+        <button class="btn-close-modern" id="closeTaskDetail">
+          <span>�?/span>
+        </button>
+      </div>
+
+      <!-- 任务基本信息卡片 -->
+      <div class="task-info-card-modern">
+        <h3 class="card-title-modern">
+          <span class="card-icon">📋</span> 任务信息
+        </h3>
+        <div class="task-info-grid-modern">
+          <div class="info-item-modern">
+            <div class="info-label-modern">
+              <span class="label-icon">👤</span> 任务组长
+            </div>
+            <div class="info-value-modern">${task.assignedTo || '未分�?}</div>
+          </div>
+          
+          <div class="info-item-modern">
+            <div class="info-label-modern">
+              <span class="label-icon">👥</span> 所属群�?            </div>
+            <div class="info-value-modern">${task.group || '未指�?}</div>
+          </div>
+          
+          <div class="info-item-modern">
+            <div class="info-label-modern">
+              <span class="label-icon">📅</span> 截止日期
+            </div>
+            <div class="info-value-modern">${task.deadline ? new Date(task.deadline).toLocaleString() : '�?}</div>
+          </div>
+          
+          <div class="info-item-modern">
+            <div class="info-label-modern">
+              <span class="label-icon">🕐</span> 创建时间
+            </div>
+            <div class="info-value-modern">${new Date(task.createdAt).toLocaleString()}</div>
+          </div>
+        </div>
+
+        ${task.description ? `
+          <div class="task-description-modern">
+            <div class="info-label-modern">
+              <span class="label-icon">📝</span> 任务描述
+            </div>
+            <div class="description-content-modern">${task.description}</div>
+          </div>
+        ` : ''}
+      </div>
+
+      <!-- 完成统计卡片 -->
+      <div class="task-stats-card-modern">
+        <h3 class="card-title-modern">
+          <span class="card-icon">📊</span> 完成统计
+        </h3>
+        <div class="stats-grid-modern">
+          <div class="stat-item-modern stat-total">
+            <div class="stat-icon-modern">👥</div>
+            <div class="stat-content-modern">
+              <div class="stat-label-modern">总人�?/div>
+              <div class="stat-value-modern">${task.members?.length || 0}</div>
+            </div>
+          </div>
+
+          <div class="stat-item-modern stat-completed">
+            <div class="stat-icon-modern">�?/div>
+            <div class="stat-content-modern">
+              <div class="stat-label-modern">已完�?/div>
+              <div class="stat-value-modern">${task.completedCount || 0}</div>
+            </div>
+          </div>
+
+          <div class="stat-item-modern stat-pending">
+            <div class="stat-icon-modern">�?/div>
+            <div class="stat-content-modern">
+              <div class="stat-label-modern">未完�?/div>
+              <div class="stat-value-modern">${(task.members?.length || 0) - (task.completedCount || 0)}</div>
+            </div>
+          </div>
+
+          <div class="stat-item-modern stat-progress">
+            <div class="stat-icon-modern">📈</div>
+            <div class="stat-content-modern">
+              <div class="stat-label-modern">完成�?/div>
+              <div class="stat-value-modern">${calculateProgress(task)}%</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 进度�?-->
+        <div class="progress-bar-container-modern">
+          <div class="progress-bar-modern">
+            <div class="progress-fill-modern" style="width: ${calculateProgress(task)}%">
+              <span class="progress-text-modern">${calculateProgress(task)}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 投票结果卡片（如果有投票�?-->
+      ${task.poll ? renderPollResults(task.poll) : ''}
+
+      <!-- 成员完成情况卡片 -->
+      <div class="task-members-card-modern">
+        <h3 class="card-title-modern">
+          <span class="card-icon">👥</span> 成员完成情况
+        </h3>
+        <div class="members-list-modern">
+          ${task.members?.map(member => renderMemberItem(member)).join('') || '<div class="empty-state-modern">暂无成员</div>'}
+        </div>
+      </div>
+
+      <!-- 操作按钮区域 -->
+      <div class="task-actions-modern">
+        <button class="btn-action-modern btn-edit" id="editTask">
+          <span>✏️</span> 编辑任务
+        </button>
+        <button class="btn-action-modern btn-complete" id="completeTask">
+          <span>�?/span> 标记完成
+        </button>
+        <button class="btn-action-modern btn-delete" id="deleteTask">
+          <span>🗑�?/span> 删除任务
+        </button>
+      </div>
+    </div>
+  `;
+
+  // 添加样式
+  addTaskDetailStyles();
+
+  // 绑定事件
+  setupTaskDetailEvents(task, container);
+}
+
+// 渲染投票结果
+function renderPollResults(poll) {
+  if (!poll || !poll.options) return '';
+
+  const totalVotes = poll.options.reduce((sum, opt) => sum + (opt.votes || 0), 0);
+
+  return `
+    <div class="task-poll-card-modern">
+      <h3 class="card-title-modern">
+        <span class="card-icon">📊</span> 投票结果
+      </h3>
+      <div class="poll-question-modern">${poll.question || '投票'}</div>
+      <div class="poll-options-modern">
+        ${poll.options.map(option => {
+          const percentage = totalVotes > 0 ? Math.round((option.votes || 0) / totalVotes * 100) : 0;
+          return `
+            <div class="poll-option-modern">
+              <div class="poll-option-header-modern">
+                <span class="poll-option-text-modern">${option.text}</span>
+                <span class="poll-option-count-modern">${option.votes || 0} �?(${percentage}%)</span>
+              </div>
+              <div class="poll-option-bar-modern">
+                <div class="poll-option-fill-modern" style="width: ${percentage}%"></div>
+              </div>
+            </div>
+          `;
+        }).join('')}
+      </div>
+      <div class="poll-total-modern">总投票数: ${totalVotes}</div>
+    </div>
+  `;
+}
+
+// 渲染成员�?function renderMemberItem(member) {
+  const isCompleted = member.completed || member.status === 'completed';
+  const completedTime = member.completedAt ? new Date(member.completedAt).toLocaleString() : '未完�?;
+
+  return `
+    <div class="member-item-modern ${isCompleted ? 'completed' : 'pending'}">
+      <div class="member-avatar-modern">
+        ${member.username ? member.username[0].toUpperCase() : '?'}
+      </div>
+      <div class="member-info-modern">
+        <div class="member-name-modern">${member.username || '未知用户'}</div>
+        <div class="member-time-modern">
+          ${isCompleted ? `�?${completedTime}` : '�?待完�?}
+        </div>
+      </div>
+      <div class="member-status-modern">
+        ${isCompleted ? 
+          '<span class="status-badge-small completed">已完�?/span>' : 
+          '<span class="status-badge-small pending">未完�?/span>'}
+      </div>
+    </div>
+  `;
+}
+
+// 计算完成进度
+function calculateProgress(task) {
+  if (!task.members || task.members.length === 0) return 0;
+  const completed = task.completedCount || 0;
+  return Math.round((completed / task.members.length) * 100);
+}
+
+// 获取状态图�?function getStatusIcon(status) {
+  const icons = {
+    'pending': '�?,
+    'in_progress': '🔄',
+    'completed': '�?,
+    'terminated': '�?
+  };
+  return icons[status] || '📋';
+}
+
+// 获取状态文�?function getStatusText(status) {
+  const texts = {
+    'pending': '待处�?,
+    'in_progress': '进行�?,
+    'completed': '已完�?,
+    'terminated': '已终�?
+  };
+  return texts[status] || '未知';
+}
+
+// 获取优先级图�?function getPriorityIcon(priority) {
+  const icons = {
+    'high': '🔴',
+    'medium': '🟡',
+    'low': '🟢'
+  };
+  return icons[priority] || '�?;
+}
+
+// 添加样式
+function addTaskDetailStyles() {
+  if (document.getElementById('task-detail-modern-styles')) return;
+
+  const style = document.createElement('style');
+  style.id = 'task-detail-modern-styles';
+  style.textContent = `
+    .task-detail-view-modern {
+      background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(99,102,241,0.03) 100%);
+      border-radius: 20px;
+      padding: 0;
+      max-width: 1200px;
+      max-height: 85vh;
+      margin: 0 auto;
+      animation: fadeInUp 0.5s ease;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    
+    /* 滚动条样�?*/
+    .task-detail-view-modern::-webkit-scrollbar {
+      width: 8px;
+    }
+    
+    .task-detail-view-modern::-webkit-scrollbar-track {
+      background: var(--bg-dark);
+      border-radius: 10px;
+    }
+    
+    .task-detail-view-modern::-webkit-scrollbar-thumb {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      border-radius: 10px;
+    }
+    
+    .task-detail-view-modern::-webkit-scrollbar-thumb:hover {
+      background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
+    }
+
+    .task-detail-header-modern {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 30px;
+      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99,102,241,0.05) 100%);
+      border-radius: 20px 20px 0 0;
+      border-bottom: 2px solid var(--border);
+    }
+
+    .task-header-left h2 {
+      margin: 0 0 12px;
+      font-size: 28px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .task-badges {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .status-badge-modern {
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .status-badge-modern.status-pending {
+      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+      color: white;
+    }
+
+    .status-badge-modern.status-in_progress {
+      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+      color: white;
+    }
+
+    .status-badge-modern.status-completed {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+    }
+
+    .status-badge-modern.status-terminated {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+    }
+
+    .priority-badge-modern {
+      padding: 8px 16px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: 600;
+      background: var(--bg-dark);
+      color: var(--text-primary);
+      border: 2px solid var(--border);
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .btn-close-modern {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--bg-dark);
+      border: 2px solid var(--border);
+      color: var(--text-secondary);
+      font-size: 24px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .btn-close-modern:hover {
+      background: var(--danger);
+      border-color: var(--danger);
+      color: white;
+      transform: rotate(90deg);
+    }
+
+    .task-info-card-modern,
+    .task-stats-card-modern,
+    .task-poll-card-modern,
+    .task-members-card-modern {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      padding: 24px;
+      margin: 20px 30px;
+      transition: all 0.3s ease;
+    }
+
+    .task-info-card-modern:hover,
+    .task-stats-card-modern:hover,
+    .task-poll-card-modern:hover,
+    .task-members-card-modern:hover {
+      box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+      border-color: var(--primary);
+    }
+
+    .card-title-modern {
+      margin: 0 0 20px;
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .card-icon {
+      font-size: 24px;
+    }
+
+    .task-info-grid-modern {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 20px;
+    }
+
+    .info-item-modern {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      transition: all 0.3s ease;
+    }
+
+    .info-item-modern:hover {
+      background: rgba(99,102,241,0.05);
+      border-color: var(--primary);
+      transform: translateY(-2px);
+    }
+
+    .info-label-modern {
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .label-icon {
+      font-size: 16px;
+    }
+
+    .info-value-modern {
+      font-size: 16px;
+      color: var(--text-primary);
+      font-weight: 600;
+    }
+
+    .task-description-modern {
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid var(--border);
+    }
+
+    .description-content-modern {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      margin-top: 12px;
+      line-height: 1.6;
+      color: var(--text-primary);
+    }
+
+    .stats-grid-modern {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    .stat-item-modern {
+      background: linear-gradient(135deg, var(--bg-dark) 0%, rgba(99,102,241,0.05) 100%);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      transition: all 0.3s ease;
+    }
+
+    .stat-item-modern:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 24px rgba(99,102,241,0.2);
+    }
+
+    .stat-item-modern.stat-total {
+      border-color: rgba(99,102,241,0.5);
+    }
+
+    .stat-item-modern.stat-completed {
+      border-color: rgba(16,185,129,0.5);
+    }
+
+    .stat-item-modern.stat-pending {
+      border-color: rgba(239,68,68,0.5);
+    }
+
+    .stat-item-modern.stat-progress {
+      border-color: rgba(245,158,11,0.5);
+    }
+
+    .stat-icon-modern {
+      width: 50px;
+      height: 50px;
+      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;
+    }
+
+    .stat-content-modern {
+      flex: 1;
+    }
+
+    .stat-label-modern {
+      font-size: 13px;
+      color: var(--text-secondary);
+      margin-bottom: 6px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .stat-value-modern {
+      font-size: 28px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .progress-bar-container-modern {
+      margin-top: 20px;
+    }
+
+    .progress-bar-modern {
+      width: 100%;
+      height: 40px;
+      background: var(--bg-dark);
+      border-radius: 20px;
+      overflow: hidden;
+      border: 2px solid var(--border);
+      position: relative;
+    }
+
+    .progress-fill-modern {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+      border-radius: 18px;
+      transition: width 0.6s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      box-shadow: 0 0 20px rgba(99,102,241,0.5);
+    }
+
+    .progress-text-modern {
+      color: white;
+      font-weight: 700;
+      font-size: 16px;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    }
+
+    .poll-question-modern {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 20px;
+      padding: 16px;
+      background: var(--bg-dark);
+      border-radius: 12px;
+      border-left: 4px solid var(--primary);
+    }
+
+    .poll-options-modern {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    .poll-option-modern {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      transition: all 0.3s ease;
+    }
+
+    .poll-option-modern:hover {
+      border-color: var(--primary);
+      transform: translateX(5px);
+    }
+
+    .poll-option-header-modern {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .poll-option-text-modern {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .poll-option-count-modern {
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--text-secondary);
+    }
+
+    .poll-option-bar-modern {
+      width: 100%;
+      height: 8px;
+      background: var(--bg-hover);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .poll-option-fill-modern {
+      height: 100%;
+      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
+      border-radius: 4px;
+      transition: width 0.6s ease;
+    }
+
+    .poll-total-modern {
+      text-align: center;
+      font-size: 14px;
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+
+    .members-list-modern {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .member-item-modern {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+      background: var(--bg-dark);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      transition: all 0.3s ease;
+    }
+
+    .member-item-modern:hover {
+      background: rgba(99,102,241,0.05);
+      border-color: var(--primary);
+      transform: translateX(5px);
+    }
+
+    .member-item-modern.completed {
+      border-left: 4px solid var(--success);
+      background: linear-gradient(90deg, rgba(16,185,129,0.1) 0%, transparent 100%);
+    }
+
+    .member-item-modern.pending {
+      border-left: 4px solid var(--danger);
+      background: linear-gradient(90deg, rgba(239,68,68,0.08) 0%, transparent 100%);
+    }
+
+    .member-avatar-modern {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      font-weight: 700;
+      color: white;
+      flex-shrink: 0;
+    }
+
+    .member-info-modern {
+      flex: 1;
+    }
+
+    .member-name-modern {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+    }
+
+    .member-time-modern {
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .member-status-modern {
+      flex-shrink: 0;
+    }
+
+    .status-badge-small {
+      padding: 6px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .status-badge-small.completed {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+    }
+
+    .status-badge-small.pending {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+    }
+
+    .task-actions-modern {
+      display: flex;
+      gap: 12px;
+      padding: 30px;
+      background: var(--bg-card);
+      border-radius: 0 0 20px 20px;
+      border-top: 2px solid var(--border);
+      flex-wrap: wrap;
+    }
+
+    .btn-action-modern {
+      flex: 1;
+      min-width: 150px;
+      padding: 14px 24px;
+      border: none;
+      border-radius: 12px;
+      font-size: 15px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .btn-action-modern span {
+      font-size: 18px;
+    }
+
+    .btn-edit {
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      color: white;
+    }
+
+    .btn-complete {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+    }
+
+    .btn-delete {
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      color: white;
+    }
+
+    .btn-action-modern:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+    }
+
+    .empty-state-modern {
+      text-align: center;
+      padding: 40px;
+      color: var(--text-secondary);
+      font-size: 15px;
+    }
+
+    @media (max-width: 768px) {
+      .task-detail-header-modern {
+        flex-direction: column;
+        gap: 20px;
+      }
+
+      .task-info-grid-modern {
+        grid-template-columns: 1fr;
+      }
+
+      .stats-grid-modern {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .task-actions-modern {
+        flex-direction: column;
+      }
+
+      .btn-action-modern {
+        width: 100%;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// 设置事件监听
+function setupTaskDetailEvents(task, container) {
+  // 关闭按钮
+  container.querySelector('#closeTaskDetail')?.addEventListener('click', () => {
+    container.closest('.modal')?.remove();
+  });
+
+  // 编辑任务
+  container.querySelector('#editTask')?.addEventListener('click', () => {
+    alert('编辑任务功能');
+    // 这里可以打开编辑表单
+  });
+
+  // 标记完成
+  container.querySelector('#completeTask')?.addEventListener('click', async () => {
+    if (confirm('确定要标记此任务为已完成吗？')) {
+      // 调用 API 标记完成
+      alert('任务已标记为完成');
+    }
+  });
+
+  // 删除任务
+  container.querySelector('#deleteTask')?.addEventListener('click', async () => {
+    if (confirm('确定要删除此任务吗？此操作不可撤销�?)) {
+      // 调用 API 删除任务
+      alert('任务已删�?);
+      container.closest('.modal')?.remove();
+    }
+  });
+}
+
+// 导出函数供其他模块使�?export { renderOptimizedTaskDetail };
+
+