collabdocchat 2.4.4 → 2.4.5

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

@@ -151,10 +151,22 @@ function renderOptimizedTaskDetail(task, container) {
 }
 
 // 渲染投票结果
+// 渲染投票结果（增强版 - 显示投票成员详情）
 function renderPollResults(poll) {
   if (!poll || !poll.options) return '';
 
   const totalVotes = poll.options.reduce((sum, opt) => sum + (opt.votes || 0), 0);
+  
+  // 获取所有已投票成员
+  const votedMembers = new Set();
+  poll.options.forEach(option => {
+    if (option.voters) {
+      option.voters.forEach(voter => {
+        const voterName = typeof voter === 'string' ? voter : voter.username;
+        votedMembers.add(voterName);
+      });
+    }
+  });
 
   return `
     <div class="task-poll-card-modern">
@@ -162,52 +174,116 @@ function renderPollResults(poll) {
         <span class="card-icon">📊</span> 投票结果
       </h3>
       <div class="poll-question-modern">${poll.question || '投票'}</div>
+      
+      <!-- 投票统计摘要 -->
+      <div class="poll-stats-summary">
+        <div class="poll-stat-item">
+          <span class="poll-stat-icon">✅</span>
+          <span class="poll-stat-label">已投票:</span>
+          <span class="poll-stat-value">${votedMembers.size}人</span>
+        </div>
+        <div class="poll-stat-item">
+          <span class="poll-stat-icon">⏳</span>
+          <span class="poll-stat-label">未投票:</span>
+          <span class="poll-stat-value">${(poll.totalMembers || 0) - votedMembers.size}人</span>
+        </div>
+        <div class="poll-stat-item">
+          <span class="poll-stat-icon">📊</span>
+          <span class="poll-stat-label">总票数:</span>
+          <span class="poll-stat-value">${totalVotes}票</span>
+        </div>
+      </div>
+
+      <!-- 投票选项列表 -->
       <div class="poll-options-modern">
-        ${poll.options.map(option => {
+        ${poll.options.map((option, index) => {
           const percentage = totalVotes > 0 ? Math.round((option.votes || 0) / totalVotes * 100) : 0;
+          const voters = option.voters || [];
           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>
+                <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>
+              ${voters.length > 0 ? `
+                <div class="poll-voters-list">
+                  <div class="poll-voters-header">
+                    <span class="poll-voters-icon">👥</span>
+                    <span class="poll-voters-title">投票成员 (${voters.length}人):</span>
+                  </div>
+                  <div class="poll-voters-tags">
+                    ${voters.map(voter => {
+                      const voterName = typeof voter === 'string' ? voter : voter.username;
+                      return `
+                        <span class="poll-voter-tag">
+                          <span class="voter-avatar">${voterName ? voterName[0].toUpperCase() : '?'}</span>
+                          <span class="voter-name">${voterName || '未知用户'}</span>
+                        </span>
+                      `;
+                    }).join('')}
+                  </div>
+                </div>
+              ` : `
+                <div class="poll-voters-empty">
+                  <span class="empty-icon">📭</span>
+                  <span class="empty-text">暂无人投票</span>
+                </div>
+              `}
             </div>
           `;
         }).join('')}
       </div>
-      <div class="poll-total-modern">总投票数: ${totalVotes}</div>
+      
+      <!-- 未投票成员列表 -->
+      ${renderUnvotedMembers(poll, votedMembers)}
     </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}` : '�?待完�?}
+// 渲染未投票成员列表
+function renderUnvotedMembers(poll, votedMembers) {
+  if (!poll.allMembers || poll.allMembers.length === 0) return '';
+  
+  const unvotedMembers = poll.allMembers.filter(member => {
+    const memberName = typeof member === 'string' ? member : member.username;
+    return !votedMembers.has(memberName);
+  });
+  
+  if (unvotedMembers.length === 0) {
+    return `
+      <div class="poll-unvoted-section all-voted">
+        <div class="poll-unvoted-header">
+          <span class="unvoted-icon">✅</span>
+          <span class="unvoted-title">所有成员已完成投票</span>
         </div>
       </div>
-      <div class="member-status-modern">
-        ${isCompleted ? 
-          '<span class="status-badge-small completed">已完�?/span>' : 
-          '<span class="status-badge-small pending">未完�?/span>'}
+    `;
+  }
+  
+  return `
+    <div class="poll-unvoted-section">
+      <div class="poll-unvoted-header">
+        <span class="unvoted-icon">⚠️</span>
+        <span class="unvoted-title">未投票成员 (${unvotedMembers.length}人):</span>
+      </div>
+      <div class="poll-unvoted-list">
+        ${unvotedMembers.map(member => {
+          const memberName = typeof member === 'string' ? member : member.username;
+          return `
+            <span class="poll-unvoted-tag">
+              <span class="unvoted-avatar">${memberName ? memberName[0].toUpperCase() : '?'}</span>
+              <span class="unvoted-name">${memberName || '未知用户'}</span>
+              <span class="unvoted-status">未投票</span>
+            </span>
+          `;
+        }).join('')}
       </div>
     </div>
   `;
 }
-
-// 计算完成进度
 function calculateProgress(task) {
   if (!task.members || task.members.length === 0) return 0;
   const completed = task.completedCount || 0;
@@ -776,6 +852,232 @@ function addTaskDetailStyles() {
       font-size: 15px;
     }
 
+
+    /* ========== 投票详情增强样式 ========== */
+    
+    /* 投票统计摘要 */
+    .poll-stats-summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 12px;
+      margin-bottom: 24px;
+      padding: 16px;
+      background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(139,92,246,0.05) 100%);
+      border-radius: 12px;
+      border: 1px solid var(--border);
+    }
+
+    .poll-stat-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      background: var(--bg-dark);
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      transition: all 0.3s ease;
+    }
+
+    .poll-stat-item:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(99,102,241,0.2);
+      border-color: var(--primary);
+    }
+
+    .poll-stat-icon {
+      font-size: 20px;
+      flex-shrink: 0;
+    }
+
+    .poll-stat-label {
+      font-size: 13px;
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+
+    .poll-stat-value {
+      font-size: 16px;
+      color: var(--text-primary);
+      font-weight: 700;
+      margin-left: auto;
+    }
+
+    /* 投票成员列表 */
+    .poll-voters-list {
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--border);
+    }
+
+    .poll-voters-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+      font-size: 13px;
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+
+    .poll-voters-icon {
+      font-size: 16px;
+    }
+
+    .poll-voters-title {
+      flex: 1;
+    }
+
+    .poll-voters-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .poll-voter-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.1) 100%);
+      border: 1px solid rgba(99,102,241,0.3);
+      border-radius: 20px;
+      transition: all 0.3s ease;
+      cursor: default;
+    }
+
+    .poll-voter-tag:hover {
+      background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.2) 100%);
+      border-color: var(--primary);
+      transform: scale(1.05);
+    }
+
+    .voter-avatar {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 700;
+      color: white;
+      flex-shrink: 0;
+    }
+
+    .voter-name {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    /* 空状态 */
+    .poll-voters-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 16px;
+      margin-top: 12px;
+      background: rgba(239,68,68,0.05);
+      border: 1px dashed rgba(239,68,68,0.3);
+      border-radius: 8px;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+
+    .empty-icon {
+      font-size: 18px;
+    }
+
+    .empty-text {
+      font-weight: 500;
+    }
+
+    /* 未投票成员区域 */
+    .poll-unvoted-section {
+      margin-top: 24px;
+      padding: 20px;
+      background: linear-gradient(135deg, rgba(239,68,68,0.05) 0%, rgba(220,38,38,0.05) 100%);
+      border: 1px solid rgba(239,68,68,0.2);
+      border-radius: 12px;
+    }
+
+    .poll-unvoted-section.all-voted {
+      background: linear-gradient(135deg, rgba(16,185,129,0.05) 0%, rgba(5,150,105,0.05) 100%);
+      border-color: rgba(16,185,129,0.3);
+    }
+
+    .poll-unvoted-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 16px;
+      font-size: 15px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+
+    .unvoted-icon {
+      font-size: 20px;
+    }
+
+    .unvoted-title {
+      flex: 1;
+    }
+
+    .poll-unvoted-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .poll-unvoted-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      background: var(--bg-dark);
+      border: 2px solid rgba(239,68,68,0.3);
+      border-radius: 20px;
+      transition: all 0.3s ease;
+      cursor: default;
+    }
+
+    .poll-unvoted-tag:hover {
+      background: rgba(239,68,68,0.1);
+      border-color: var(--danger);
+      transform: scale(1.05);
+    }
+
+    .unvoted-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 700;
+      color: white;
+      flex-shrink: 0;
+    }
+
+    .unvoted-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .unvoted-status {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--danger);
+      background: rgba(239,68,68,0.1);
+      padding: 2px 8px;
+      border-radius: 10px;
+    }
     @media (max-width: 768px) {
       .task-detail-header-modern {
         flex-direction: column;