feat: redesign Big Screen voting view with philatelic postcard UI

- Add PostcardItem.vue component with Chinese postal aesthetics
- Add PostcardGrid.vue container with 4x2 CSS Grid layout
- Add Postmark.vue component for real-time vote stamp visualization
- Update LiveVotingView.vue with cream paper theme (#FDFBF7)
- Add Year of the Horse 2026 stamp image
- Add responsive breakpoints for different screen sizes
- Enhance admin service with program voting control
- Add vote stamp accumulation for big screen display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
2026-01-16 15:15:17 +08:00
parent 30cd29d45d
commit 84be8c4b5c
19 changed files with 2056 additions and 382 deletions

View File

@@ -43,6 +43,41 @@ function resumeVoting() {
admin.controlVoting('resume');
}
// Program voting control
function nextProgram() {
const socket = admin.getSocket();
if (socket) {
socket.emit('admin:next_program' as any, {}, (response: any) => {
if (!response.success) {
console.error('Failed to move to next program:', response.message);
}
});
}
}
function startProgramVoting(programId: string) {
const socket = admin.getSocket();
if (socket) {
socket.emit('admin:start_program' as any, { programId }, (response: any) => {
if (!response.success) {
console.error('Failed to start program voting:', response.message);
}
});
}
}
function toggleLateCatch() {
const socket = admin.getSocket();
if (socket) {
const newValue = !admin.allowLateCatch;
socket.emit('admin:toggle_late_catch' as any, { enabled: newValue }, (response: any) => {
if (!response.success) {
console.error('Failed to toggle late catch:', response.message);
}
});
}
}
// Lottery control
function startGalaxy() {
admin.controlLottery('start_galaxy');
@@ -224,6 +259,30 @@ 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">