collabdocchat 2.4.4 → 2.4.5

package/src/pages/update-poll-display.js

@@ -0,0 +1,380 @@
+// 更新脚本：将增强的投票显示功能集成到任务详情页面
+// 使用方法：在 optimized-task-detail.js 中引入此模块
+
+// 1. 在 renderOptimizedTaskDetail 函数中，将：
+//    ${task.poll ? renderPollResults(task.poll) : ''}
+// 替换为：
+//    ${task.poll ? renderPollResultsEnhanced(task.poll) : ''}
+
+// 2. 在 addTaskDetailStyles 函数调用后，添加：
+//    addPollEnhancedStyles();
+
+// 3. 替换 renderPollResults 函数为以下增强版本：
+
+function renderPollResultsEnhanced(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">
+      <h3 class="card-title-modern">
+        <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, 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>
+              </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>
+      
+      <!-- 未投票成员列表 -->
+      ${renderUnvotedMembers(poll, votedMembers)}
+    </div>
+  `;
+}
+
+// 4. 添加新函数 renderUnvotedMembers：
+
+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>
+    `;
+  }
+  
+  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>
+  `;
+}
+
+// 5. 在 addTaskDetailStyles 函数的 style.textContent 末尾添加以下样式：
+
+const pollEnhancedStyles = `
+    /* 投票统计摘要 */
+    .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;
+    }
+`;
+
+console.log('投票详情增强模块已加载');
+console.log('请按照注释中的说明更新 optimized-task-detail.js 文件');
+
+
+