From 35d77cbb22018cade0a831bfb4613932bc5c41c8 Mon Sep 17 00:00:00 2001
From: empty <let5sne.mac@gmail.com>
Date: Fri, 16 Jan 2026 15:57:52 +0800
Subject: [PATCH] feat: enhance AdminControl and VoteResultsView

- Update AdminControl.vue with improved controls
- Enhance VoteResultsView.vue with better display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../client-screen/src/views/AdminControl.vue  | 360 ++++++++++++++++--
 .../src/views/VoteResultsView.vue             | 263 ++++++++++---
 2 files changed, 546 insertions(+), 77 deletions(-)

diff --git a/packages/client-screen/src/views/AdminControl.vue b/packages/client-screen/src/views/AdminControl.vue
index 50b23c8..e9ae27c 100644
--- a/packages/client-screen/src/views/AdminControl.vue
+++ b/packages/client-screen/src/views/AdminControl.vue
@@ -168,6 +168,58 @@ const lotteryPhaseLabel = computed(() => {
   }
 });
 
+// Award type labels
+const awardLabels: Record<string, string> = {
+  creative: '最佳创意奖',
+  visual: '最佳视觉奖',
+  atmosphere: '最佳气氛奖',
+  performance: '最佳表演奖',
+  teamwork: '最佳团队奖',
+  popularity: '最受欢迎奖',
+  potential: '最具潜力奖',
+};
+
+// Compute award statistics grouped by award type
+const awardStats = computed(() => {
+  const stats: Record<string, Array<{ programName: string; teamName: string; votes: number; programId: string }>> = {};
+  
+  // Initialize all award types
+  Object.keys(awardLabels).forEach(type => {
+    stats[type] = [];
+  });
+  
+  // Aggregate stamps by award type
+  admin.programs.forEach(program => {
+    if (program.stamps && program.stamps.length > 0) {
+      // Count stamps by type for this program
+      const typeCount: Record<string, number> = {};
+      program.stamps.forEach((stamp: any) => {
+        const type = stamp.ticketType || 'unknown';
+        typeCount[type] = (typeCount[type] || 0) + 1;
+      });
+      
+      // Add to stats
+      Object.entries(typeCount).forEach(([type, count]) => {
+        if (stats[type]) {
+          stats[type].push({
+            programId: program.id,
+            programName: program.name,
+            teamName: program.teamName,
+            votes: count,
+          });
+        }
+      });
+    }
+  });
+  
+  // Sort each award type by votes descending
+  Object.keys(stats).forEach(type => {
+    stats[type].sort((a, b) => b.votes - a.votes);
+  });
+  
+  return stats;
+});
+
 // Lifecycle
 onMounted(() => {
   admin.connect();
@@ -259,30 +311,6 @@ onUnmounted(() => {
         </div>
       </section>
 
-      <!-- Section A2: Program Votes Display -->
-      <section class="control-section program-section">
-        <div class="section-header">
-          <h2>节目票数</h2>
-          <span class="section-status">共 {{ admin.programs.length }} 个节目</span>
-        </div>
-
-        <div class="section-body">
-          <!-- Program Vote List (Read-only) -->
-          <div class="program-list">
-            <div
-              v-for="(program, idx) in admin.programs"
-              :key="program.id"
-              class="program-item readonly"
-            >
-              <span class="program-order">{{ idx + 1 }}</span>
-              <span class="program-name">{{ program.name }}</span>
-              <span class="program-team">{{ program.teamName }}</span>
-              <span class="program-votes">{{ program.votes }} 票</span>
-            </div>
-          </div>
-        </div>
-      </section>
-
       <!-- Section B: Lottery Controller -->
       <section class="control-section lottery-section">
         <div class="section-header">
@@ -1057,10 +1085,294 @@ $admin-danger: #ef4444;
   }
 }
 
+// Award Statistics Styles
+.award-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.award-group {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid $admin-border;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.award-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid $admin-border;
+
+  .award-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: $color-gold;
+  }
+
+  .award-total {
+    font-size: 12px;
+    color: $admin-text-muted;
+    background: rgba($admin-primary, 0.15);
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+}
+
+.award-programs {
+  padding: 8px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.program-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .program-name {
+    color: $admin-text;
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .program-team {
+    color: $admin-text-muted;
+    font-size: 11px;
+    white-space: nowrap;
+  }
+
+  .program-votes {
+    color: $admin-success;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: right;
+  }
+}
+
+.no-votes {
+  padding: 12px;
+  text-align: center;
+  color: $admin-text-muted;
+  font-size: 12px;
+  font-style: italic;
+}
+
 .modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   margin-top: 20px;
 }
+
+// ==========================================
+// Mobile Responsive Styles
+// ==========================================
+@media (max-width: 768px) {
+  // Header
+  .header {
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 12px 16px;
+
+    .title {
+      font-size: 18px;
+      order: -1;
+      width: 100%;
+      text-align: center;
+    }
+
+    .back-btn {
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+
+    .status-bar {
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
+      width: 100%;
+    }
+
+    .status-item {
+      font-size: 13px;
+    }
+  }
+
+  // Content Grid
+  .content {
+    grid-template-columns: 1fr;
+    padding: 16px;
+    gap: 16px;
+  }
+
+  // Control Sections
+  .control-section {
+    &.lottery-section,
+    &.global-section {
+      grid-column: span 1;
+    }
+  }
+
+  .section-header {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 12px 16px;
+
+    h2 {
+      font-size: 15px;
+    }
+
+    .round-indicator {
+      gap: 8px;
+    }
+  }
+
+  .section-body {
+    padding: 16px;
+  }
+
+  // Stats
+  .stat-row {
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .stat-item {
+    .stat-value {
+      font-size: 24px;
+    }
+  }
+
+  // Buttons
+  .button-group {
+    gap: 8px;
+  }
+
+  .ctrl-btn {
+    padding: 10px 16px;
+    font-size: 13px;
+    flex: 1;
+    min-width: 100px;
+    text-align: center;
+
+    &.large {
+      padding: 14px 24px;
+      font-size: 16px;
+      width: 100%;
+    }
+  }
+
+  // Prize Info
+  .prize-info {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+    padding: 12px 16px;
+    text-align: center;
+
+    .prize-level {
+      font-size: 18px;
+      width: 100%;
+    }
+  }
+
+  // Lottery Controls
+  .lottery-controls {
+    padding: 16px 0;
+  }
+
+  .complete-controls {
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+
+    .ctrl-btn {
+      width: 100%;
+    }
+  }
+
+  // Winners
+  .winners-list {
+    gap: 8px;
+  }
+
+  .winner-item {
+    padding: 6px 12px;
+
+    .winner-name {
+      font-size: 14px;
+    }
+  }
+
+  // Round Progress
+  .round-progress {
+    gap: 12px;
+    margin-top: 16px;
+    padding-top: 16px;
+  }
+
+  .round-dot {
+    width: 28px;
+    height: 28px;
+    font-size: 12px;
+  }
+
+  // Program List
+  .program-list {
+    max-height: 300px;
+  }
+
+  .program-item {
+    padding: 8px 12px;
+    font-size: 13px;
+  }
+
+  // Control Groups
+  .control-group {
+    margin-bottom: 20px;
+
+    h4 {
+      font-size: 11px;
+      margin-bottom: 10px;
+    }
+  }
+
+  // Modal
+  .modal {
+    width: 95vw;
+    padding: 20px;
+
+    h3 {
+      font-size: 16px;
+    }
+  }
+
+  .modal-input input {
+    padding: 10px;
+    font-size: 14px;
+  }
+
+  .modal-actions {
+    flex-direction: column;
+    gap: 10px;
+
+    .ctrl-btn {
+      width: 100%;
+    }
+  }
+}
 </style>
diff --git a/packages/client-screen/src/views/VoteResultsView.vue b/packages/client-screen/src/views/VoteResultsView.vue
index 27ab2fd..c29ac18 100644
--- a/packages/client-screen/src/views/VoteResultsView.vue
+++ b/packages/client-screen/src/views/VoteResultsView.vue
@@ -1,31 +1,85 @@
 <script setup lang="ts">
+import { computed, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { useAdminStore } from '../stores/admin';
+import { TICKET_TYPES } from '@gala/shared/constants';
 
 const router = useRouter();
+const admin = useAdminStore();
 
 function goBack() {
   router.push('/');
 }
 
-// Mock vote results
-const categories = [
-  {
-    name: '最佳员工',
-    results: [
-      { name: '张三', votes: 45, percentage: 30 },
-      { name: '李四', votes: 38, percentage: 25 },
-      { name: '王五', votes: 32, percentage: 21 },
-    ],
-  },
-  {
-    name: '最佳团队',
-    results: [
-      { name: '技术一组', votes: 52, percentage: 35 },
-      { name: '产品组', votes: 41, percentage: 27 },
-      { name: '设计组', votes: 35, percentage: 23 },
-    ],
-  },
-];
+// Award type labels
+const awardLabels: Record<string, string> = {
+  creative: '最佳创意奖',
+  visual: '最佳视觉奖',
+  atmosphere: '最佳气氛奖',
+  performance: '最佳表演奖',
+  teamwork: '最佳团队奖',
+  popularity: '最受欢迎奖',
+  potential: '最具潜力奖',
+};
+
+// Compute award statistics grouped by award type
+const awardResults = computed(() => {
+  const results: Array<{
+    awardType: string;
+    awardName: string;
+    programs: Array<{ id: string; name: string; teamName: string; votes: number; percentage: number }>;
+    totalVotes: number;
+  }> = [];
+
+  // Process each award type
+  TICKET_TYPES.forEach(awardType => {
+    const programStats: Map<string, { name: string; teamName: string; votes: number }> = new Map();
+    
+    // Aggregate stamps by program for this award type
+    admin.programs.forEach(program => {
+      if (program.stamps && program.stamps.length > 0) {
+        const count = program.stamps.filter((s: any) => s.ticketType === awardType).length;
+        if (count > 0) {
+          programStats.set(program.id, {
+            name: program.name,
+            teamName: program.teamName,
+            votes: count,
+          });
+        }
+      }
+    });
+
+    // Calculate total votes for this award
+    let totalVotes = 0;
+    programStats.forEach(p => totalVotes += p.votes);
+
+    // Convert to array and sort by votes descending
+    const programs = Array.from(programStats.entries())
+      .map(([id, data]) => ({
+        id,
+        name: data.name,
+        teamName: data.teamName,
+        votes: data.votes,
+        percentage: totalVotes > 0 ? Math.round((data.votes / totalVotes) * 100) : 0,
+      }))
+      .sort((a, b) => b.votes - a.votes)
+      .slice(0, 5); // Top 5 per award
+
+    results.push({
+      awardType,
+      awardName: awardLabels[awardType] || awardType,
+      programs,
+      totalVotes,
+    });
+  });
+
+  return results;
+});
+
+// Connect to admin store on mount
+onMounted(() => {
+  admin.connect();
+});
 </script>
 
 <template>
@@ -34,22 +88,36 @@ const categories = [
     <header class="header">
       <button class="back-btn" @click="goBack">← 返回</button>
       <h1 class="title gold-text">投票结果</h1>
-      <div class="placeholder"></div>
+      <div class="status-indicator">
+        <span class="dot" :class="admin.isConnected ? 'online' : 'offline'"></span>
+        {{ admin.isConnected ? '已连接' : '连接中...' }}
+      </div>
     </header>
 
-    <!-- Results grid -->
+    <!-- Results grid - 7 award categories -->
     <main class="results-grid">
-      <div v-for="category in categories" :key="category.name" class="category-card">
-        <h2 class="category-name">{{ category.name }}</h2>
+      <div v-for="award in awardResults" :key="award.awardType" class="category-card">
+        <div class="category-header">
+          <h2 class="category-name">{{ award.awardName }}</h2>
+          <span class="total-votes">{{ award.totalVotes }} 票</span>
+        </div>
+        
         <div class="results-list">
+          <div v-if="award.programs.length === 0" class="no-results">
+            暂无投票
+          </div>
           <div
-            v-for="(result, index) in category.results"
-            :key="result.name"
+            v-else
+            v-for="(result, index) in award.programs"
+            :key="result.id"
             class="result-item"
             :class="{ winner: index === 0 }"
           >
             <span class="rank">{{ index + 1 }}</span>
-            <span class="name">{{ result.name }}</span>
+            <div class="info">
+              <span class="name">{{ result.name }}</span>
+              <span class="team">{{ result.teamName }}</span>
+            </div>
             <div class="bar-container">
               <div class="bar" :style="{ width: result.percentage + '%' }"></div>
             </div>
@@ -77,16 +145,17 @@ const categories = [
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 50px;
+  padding: 24px 40px;
+  flex-shrink: 0;
 
   .back-btn {
     background: none;
     border: 1px solid $color-gold;
     color: $color-gold;
-    padding: 10px 20px;
+    padding: 8px 16px;
     border-radius: 8px;
     cursor: pointer;
-    font-size: 16px;
+    font-size: 14px;
     transition: all $transition-fast;
 
     &:hover {
@@ -95,47 +164,91 @@ const categories = [
   }
 
   .title {
-    font-size: 48px;
+    font-size: 36px;
     font-weight: bold;
   }
 
-  .placeholder {
-    width: 100px;
+  .status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      &.online {
+        background: #22c55e;
+        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
+      }
+
+      &.offline {
+        background: #666;
+      }
+    }
   }
 }
 
 .results-grid {
   flex: 1;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 40px;
-  padding: 40px 50px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+  padding: 20px 40px 40px;
+  align-content: start;
 }
 
 .category-card {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba($color-gold, 0.3);
-  border-radius: 16px;
-  padding: 30px;
+  border-radius: 12px;
+  padding: 20px;
+
+  .category-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba($color-gold, 0.2);
+  }
 
   .category-name {
-    font-size: 28px;
+    font-size: 20px;
     color: $color-gold;
-    margin-bottom: 24px;
-    text-align: center;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  .total-votes {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.5);
+    background: rgba($color-gold, 0.1);
+    padding: 4px 10px;
+    border-radius: 12px;
   }
 
   .results-list {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 10px;
+  }
+
+  .no-results {
+    padding: 20px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.4);
+    font-style: italic;
   }
 
   .result-item {
     display: flex;
     align-items: center;
-    gap: 16px;
-    padding: 16px;
+    gap: 12px;
+    padding: 10px 12px;
     background: rgba(255, 255, 255, 0.03);
     border-radius: 8px;
 
@@ -158,43 +271,87 @@ const categories = [
     }
 
     .rank {
-      width: 32px;
-      height: 32px;
+      width: 26px;
+      height: 26px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 50%;
-      font-size: 16px;
+      font-size: 13px;
       font-weight: bold;
+      flex-shrink: 0;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      min-width: 80px;
+      max-width: 100px;
     }
 
     .name {
-      width: 120px;
-      font-size: 20px;
+      font-size: 14px;
       color: $color-text-light;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .team {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.4);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .bar-container {
       flex: 1;
-      height: 24px;
+      height: 18px;
       background: rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
+      border-radius: 9px;
       overflow: hidden;
 
       .bar {
         height: 100%;
         background: linear-gradient(90deg, $color-primary-dark, $color-primary);
-        border-radius: 12px;
+        border-radius: 9px;
         transition: width 1s ease;
       }
     }
 
     .votes {
-      width: 60px;
+      width: 50px;
       text-align: right;
-      font-size: 18px;
+      font-size: 14px;
       color: $color-text-muted;
+      flex-shrink: 0;
+    }
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .header {
+    padding: 16px 20px;
+
+    .title {
+      font-size: 24px;
+    }
+  }
+
+  .results-grid {
+    grid-template-columns: 1fr;
+    padding: 16px 20px;
+    gap: 16px;
+  }
+
+  .category-card {
+    padding: 16px;
+
+    .category-name {
+      font-size: 18px;
     }
   }
 }