collabdocchat 1.2.13 → 2.0.0

package/src/components/optimized-poll-detail.js

@@ -0,0 +1,724 @@
+/**
+ * 优化后的投票详情界面
+ * 美化投票结果展示，提升用户体验
+ */
+
+export function renderOptimizedPollDetail(task, assignedMembers) {
+  const totalMembers = assignedMembers.length;
+  const isPollTask = task.type === 'poll' && task.pollData;
+  
+  if (!isPollTask) {
+    return '';
+  }
+
+  // 计算投票统计
+  const pollOptions = task.pollData.options || [];
+  const totalVotes = pollOptions.reduce((sum, option) => {
+    const voteCount = Array.isArray(option.votes) ? option.votes.length : Number(option.votes || 0);
+    return sum + voteCount;
+  }, 0);
+
+  const votedMembers = new Set();
+  pollOptions.forEach(option => {
+    if (Array.isArray(option.votes)) {
+      option.votes.forEach(vote => {
+        const userId = vote.user?._id || vote.user || vote;
+        votedMembers.add(String(userId));
+      });
+    }
+  });
+
+  const votedCount = votedMembers.size;
+  const notVotedCount = totalMembers - votedCount;
+  const voteRate = totalMembers > 0 ? Math.round((votedCount / totalMembers) * 100) : 0;
+
+  return `
+    <div class="poll-detail-modern">
+      <!-- 投票统计卡片 -->
+      <div class="poll-stats-header">
+        <h3>📊 投票统计</h3>
+        <div class="poll-stats-grid">
+          <div class="poll-stat-card">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);">
+              👥
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">总人数</div>
+              <div class="stat-value">${totalMembers}</div>
+            </div>
+          </div>
+
+          <div class="poll-stat-card">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
+              ✅
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">已投票</div>
+              <div class="stat-value">${votedCount}</div>
+            </div>
+          </div>
+
+          <div class="poll-stat-card">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
+              ⏳
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">未投票</div>
+              <div class="stat-value">${notVotedCount}</div>
+            </div>
+          </div>
+
+          <div class="poll-stat-card">
+            <div class="stat-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);">
+              📈
+            </div>
+            <div class="stat-info">
+              <div class="stat-label">投票率</div>
+              <div class="stat-value">${voteRate}%</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 投票率进度条 -->
+        <div class="vote-rate-progress">
+          <div class="progress-label">
+            <span>投票进度</span>
+            <span class="progress-percentage">${voteRate}%</span>
+          </div>
+          <div class="progress-bar-modern">
+            <div class="progress-fill-modern" style="width: ${voteRate}%;">
+              <div class="progress-shine"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 投票选项结果 -->
+      <div class="poll-options-section">
+        <h3>🗳️ 投票结果</h3>
+        <div class="poll-options-list">
+          ${pollOptions.map((option, index) => {
+            const voteCount = Array.isArray(option.votes) ? option.votes.length : Number(option.votes || 0);
+            const percentage = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 100) : 0;
+            const isWinning = voteCount > 0 && voteCount === Math.max(...pollOptions.map(o => 
+              Array.isArray(o.votes) ? o.votes.length : Number(o.votes || 0)
+            ));
+
+            return `
+              <div class="poll-option-card ${isWinning ? 'winning' : ''}">
+                <div class="option-header">
+                  <div class="option-rank">#${index + 1}</div>
+                  <div class="option-text">${option.text}</div>
+                  ${isWinning ? '<div class="winning-badge">🏆 领先</div>' : ''}
+                </div>
+                
+                <div class="option-stats">
+                  <div class="option-votes">
+                    <span class="votes-count">${voteCount}</span>
+                    <span class="votes-label">票</span>
+                  </div>
+                  <div class="option-percentage">${percentage}%</div>
+                </div>
+
+                <div class="option-progress">
+                  <div class="progress-bar-option">
+                    <div class="progress-fill-option" style="width: ${percentage}%; background: ${isWinning ? 'linear-gradient(90deg, #10b981 0%, #059669 100%)' : 'linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%)'};">
+                      <div class="progress-shine"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 投票成员列表 -->
+                ${voteCount > 0 ? `
+                  <div class="voters-list">
+                    <div class="voters-header">
+                      <span>投票成员：</span>
+                      <button class="btn-toggle-voters" onclick="toggleVoters(${index})">
+                        <span id="voters-toggle-${index}">展开 ▼</span>
+                      </button>
+                    </div>
+                    <div class="voters-content hidden" id="voters-${index}">
+                      ${Array.isArray(option.votes) ? option.votes.map(vote => {
+                        const userId = vote.user?._id || vote.user || vote;
+                        const member = assignedMembers.find(m => String(m.id) === String(userId));
+                        const username = member?.username || vote.user?.username || '未知用户';
+                        const votedAt = vote.votedAt ? new Date(vote.votedAt).toLocaleString() : '';
+                        
+                        return `
+                          <div class="voter-item">
+                            <div class="voter-avatar">${username[0].toUpperCase()}</div>
+                            <div class="voter-info">
+                              <div class="voter-name">${username}</div>
+                              ${votedAt ? `<div class="voter-time">${votedAt}</div>` : ''}
+                            </div>
+                          </div>
+                        `;
+                      }).join('') : ''}
+                    </div>
+                  </div>
+                ` : ''}
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+
+      <!-- 未投票成员 -->
+      ${notVotedCount > 0 ? `
+        <div class="not-voted-section">
+          <h3>⏳ 未投票成员 (${notVotedCount})</h3>
+          <div class="not-voted-list">
+            ${assignedMembers.filter(member => !votedMembers.has(String(member.id))).map(member => `
+              <div class="not-voted-item">
+                <div class="member-avatar">${member.username[0].toUpperCase()}</div>
+                <div class="member-name">${member.username}</div>
+                <div class="not-voted-badge">未投票</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+// 添加投票详情样式
+export function addPollDetailStyles() {
+  if (document.getElementById('poll-detail-modern-styles')) return;
+
+  const style = document.createElement('style');
+  style.id = 'poll-detail-modern-styles';
+  style.textContent = `
+    .poll-detail-modern {
+      margin-top: 30px;
+    }
+
+    .poll-stats-header {
+      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;
+      margin-bottom: 24px;
+    }
+
+    .poll-stats-header h3 {
+      margin: 0 0 20px;
+      font-size: 20px;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .poll-stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    .poll-stat-card {
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s ease;
+    }
+
+    .poll-stat-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+      border-color: var(--primary);
+    }
+
+    .poll-stat-card .stat-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      flex-shrink: 0;
+    }
+
+    .poll-stat-card .stat-info {
+      flex: 1;
+    }
+
+    .poll-stat-card .stat-label {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-bottom: 4px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .poll-stat-card .stat-value {
+      font-size: 28px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .vote-rate-progress {
+      margin-top: 20px;
+    }
+
+    .progress-label {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .progress-percentage {
+      color: var(--primary);
+    }
+
+    .progress-bar-modern {
+      height: 24px;
+      background: var(--bg-dark);
+      border-radius: 12px;
+      overflow: hidden;
+      position: relative;
+      border: 1px solid var(--border);
+    }
+
+    .progress-fill-modern {
+      height: 100%;
+      background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
+      border-radius: 12px;
+      transition: width 0.6s ease;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 8px;
+      color: white;
+      font-weight: 700;
+      font-size: 12px;
+    }
+
+    .progress-shine {
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+      animation: shine 2s infinite;
+    }
+
+    @keyframes shine {
+      to {
+        left: 100%;
+      }
+    }
+
+    .poll-options-section {
+      margin-bottom: 24px;
+    }
+
+    .poll-options-section h3 {
+      margin: 0 0 16px;
+      font-size: 20px;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .poll-options-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .poll-option-card {
+      background: var(--bg-card);
+      border: 2px solid var(--border);
+      border-radius: 16px;
+      padding: 20px;
+      transition: all 0.3s ease;
+    }
+
+    .poll-option-card:hover {
+      border-color: var(--primary);
+      box-shadow: 0 8px 24px rgba(99,102,241,0.15);
+    }
+
+    .poll-option-card.winning {
+      border-color: var(--success);
+      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16,185,129,0.05) 100%);
+    }
+
+    .option-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    .option-rank {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .poll-option-card.winning .option-rank {
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    }
+
+    .option-text {
+      flex: 1;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .winning-badge {
+      padding: 6px 12px;
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .option-stats {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .option-votes {
+      display: flex;
+      align-items: baseline;
+      gap: 4px;
+    }
+
+    .votes-count {
+      font-size: 32px;
+      font-weight: 800;
+      color: var(--text-primary);
+    }
+
+    .votes-label {
+      font-size: 14px;
+      color: var(--text-secondary);
+    }
+
+    .option-percentage {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--primary);
+    }
+
+    .poll-option-card.winning .option-percentage {
+      color: var(--success);
+    }
+
+    .option-progress {
+      margin-bottom: 16px;
+    }
+
+    .progress-bar-option {
+      height: 12px;
+      background: var(--bg-dark);
+      border-radius: 6px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .progress-fill-option {
+      height: 100%;
+      border-radius: 6px;
+      transition: width 0.6s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .voters-list {
+      border-top: 1px solid var(--border);
+      padding-top: 16px;
+    }
+
+    .voters-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-secondary);
+    }
+
+    .btn-toggle-voters {
+      background: transparent;
+      border: none;
+      color: var(--primary);
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 600;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: all 0.3s ease;
+    }
+
+    .btn-toggle-voters:hover {
+      background: rgba(99,102,241,0.1);
+    }
+
+    .voters-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 12px;
+    }
+
+    .voters-content.hidden {
+      display: none;
+    }
+
+    .voter-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px;
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      transition: all 0.3s ease;
+    }
+
+    .voter-item:hover {
+      border-color: var(--primary);
+      transform: translateX(3px);
+    }
+
+    .voter-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .voter-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .voter-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .voter-time {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    .not-voted-section {
+      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245,158,11,0.05) 100%);
+      border: 2px solid rgba(245,158,11,0.3);
+      border-radius: 16px;
+      padding: 24px;
+    }
+
+    .not-voted-section h3 {
+      margin: 0 0 16px;
+      font-size: 18px;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .not-voted-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      gap: 12px;
+    }
+
+    .not-voted-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px;
+      background: var(--bg-dark);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      transition: all 0.3s ease;
+    }
+
+    .not-voted-item:hover {
+      border-color: #f59e0b;
+      transform: translateY(-2px);
+    }
+
+    .member-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .member-name {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .not-voted-badge {
+      padding: 4px 8px;
+      background: rgba(245,158,11,0.2);
+      color: #f59e0b;
+      border-radius: 6px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+
+    /* 简单投票表单样式 */
+    .poll-form-simple {
+      background: var(--bg-dark);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 20px;
+      margin: 20px 0;
+    }
+
+    .poll-form-simple .poll-question {
+      margin-bottom: 16px;
+      font-size: 16px;
+      color: var(--text-primary);
+    }
+
+    .poll-option-simple {
+      padding: 12px;
+      background: var(--bg-card);
+      border: 2px solid var(--border);
+      border-radius: 8px;
+      margin-bottom: 10px;
+      transition: all 0.3s ease;
+    }
+
+    .poll-option-simple:hover {
+      border-color: var(--primary);
+      transform: translateX(3px);
+    }
+
+    .poll-option-simple label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: pointer;
+      width: 100%;
+    }
+
+    .poll-option-simple input[type="radio"],
+    .poll-option-simple input[type="checkbox"] {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+    }
+
+    .poll-option-simple .option-text {
+      flex: 1;
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--text-primary);
+    }
+
+    .voted-message {
+      text-align: center;
+      padding: 20px;
+      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16,185,129,0.05) 100%);
+      border: 2px solid var(--success);
+      border-radius: 12px;
+      margin: 20px 0;
+    }
+
+    .voted-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 20px;
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    @media (max-width: 768px) {
+      .poll-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      .voters-content {
+        grid-template-columns: 1fr;
+      }
+
+      .not-voted-list {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// 切换投票成员列表显示
+window.toggleVoters = function(index) {
+  const content = document.getElementById(`voters-${index}`);
+  const toggle = document.getElementById(`voters-toggle-${index}`);
+  
+  if (content && toggle) {
+    if (content.classList.contains('hidden')) {
+      content.classList.remove('hidden');
+      toggle.textContent = '收起 ▲';
+    } else {
+      content.classList.add('hidden');
+      toggle.textContent = '展开 ▼';
+    }
+  }
+};
+