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>
This commit is contained in:
empty
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user