company-celebration/packages/client-screen/src/views/MainDisplay.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useDisplayStore } from '../stores/display';
import { BackgroundEffect } from '../pixi/BackgroundEffect';

const displayStore = useDisplayStore();

// Pixi.js background
const canvasRef = ref<HTMLCanvasElement | null>(null);
let backgroundEffect: BackgroundEffect | null = null;

// Time display
const currentTime = ref(new Date().toLocaleTimeString('zh-CN'));
let timeInterval: ReturnType<typeof setInterval> | null = null;

onMounted(async () => {
  // Connect to socket
  displayStore.connect();

  // Initialize Pixi.js background
  if (canvasRef.value) {
    backgroundEffect = new BackgroundEffect();
    await backgroundEffect.init(canvasRef.value);
  }

  // Update time every second
  timeInterval = setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString('zh-CN');
  }, 1000);
});

onUnmounted(() => {
  if (backgroundEffect) {
    backgroundEffect.destroy();
  }
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});
</script>

<template>
  <div class="cinematic-display">
    <!-- Pixi.js Canvas Background -->
    <canvas ref="canvasRef" class="background-canvas"></canvas>

    <!-- Corner Decorations -->
    <div class="corner-decoration top-left"></div>
    <div class="corner-decoration top-right"></div>
    <div class="corner-decoration bottom-left"></div>
    <div class="corner-decoration bottom-right"></div>

    <!-- Main Content -->
    <main class="content">
      <!-- Central Title -->
      <div class="title-section">
        <h1 class="main-title liquid-gold">马到成功</h1>
        <div class="subtitle-wrapper">
          <span class="year">2026</span>
          <span class="divider">·</span>
          <span class="event">年度盛典</span>
        </div>
      </div>

      <!-- Particle Ring Placeholder -->
      <div class="particle-ring"></div>
    </main>

    <!-- Status Footer -->
    <footer class="status-footer">
      <div class="status-item">
        <span class="dot online"></span>
        <span class="label">{{ displayStore.onlineUsers }} 人在线</span>
      </div>
      <div class="status-item time">
        <span class="label">{{ currentTime }}</span>
      </div>
      <div class="status-item">
        <span class="dot" :class="displayStore.isConnected ? 'ready' : 'offline'"></span>
        <span class="label">{{ displayStore.isConnected ? '已连接' : '未连接' }}</span>
      </div>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
@use '../assets/styles/variables.scss' as *;

.cinematic-display {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: $color-bg-wine;
}

.background-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

// Corner decorations (Chinese knot pattern)
.corner-decoration {
  position: absolute;
  width: 120px;
  height: 120px;
  z-index: 10;
  opacity: 0.6;
  pointer-events: none;

  &::before,
  &::after {
    content: '';
    position: absolute;
    background: $color-gold;
  }

  &::before {
    width: 80px;
    height: 2px;
  }

  &::after {
    width: 2px;
    height: 80px;
  }

  &.top-left {
    top: 40px;
    left: 40px;

    &::before { top: 0; left: 0; }
    &::after { top: 0; left: 0; }
  }

  &.top-right {
    top: 40px;
    right: 40px;

    &::before { top: 0; right: 0; }
    &::after { top: 0; right: 0; }
  }

  &.bottom-left {
    bottom: 40px;
    left: 40px;

    &::before { bottom: 0; left: 0; }
    &::after { bottom: 0; left: 0; }
  }

  &.bottom-right {
    bottom: 40px;
    right: 40px;

    &::before { bottom: 0; right: 0; }
    &::after { bottom: 0; right: 0; }
  }
}

.content {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title-section {
  text-align: center;

  .main-title {
    font-size: 160px;
    font-weight: 900;
    letter-spacing: 20px;
    margin-bottom: 30px;
  }

  .subtitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 32px;
    color: $color-text-muted;
    letter-spacing: 8px;

    .year {
      color: $color-gold;
      font-weight: bold;
    }

    .divider {
      color: $color-gold-dark;
    }

    .event {
      color: $color-text-light;
    }
  }
}

.particle-ring {
  position: absolute;
  width: 600px;
  height: 600px;
  border: 1px solid rgba($color-gold, 0.1);
  border-radius: 50%;
  animation: rotate-slow 60s linear infinite;
  pointer-events: none;

  &::before {
    content: '';
    position: absolute;
    inset: 40px;
    border: 1px solid rgba($color-gold, 0.15);
    border-radius: 50%;
    animation: rotate-slow 45s linear infinite reverse;
  }

  &::after {
    content: '';
    position: absolute;
    inset: 80px;
    border: 1px solid rgba($color-gold, 0.08);
    border-radius: 50%;
    animation: rotate-slow 30s linear infinite;
  }
}

.status-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: $color-text-muted;

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;

    &.online {
      background: #52c41a;
      box-shadow: 0 0 10px rgba(82, 196, 26, 0.5);
      animation: pulse 2s infinite;
    }

    &.ready {
      background: $color-gold;
      box-shadow: 0 0 10px rgba($color-gold, 0.5);
    }

    &.offline {
      background: #666;
    }
  }

  &.time {
    font-size: 18px;
    color: $color-text-light;
    font-variant-numeric: tabular-nums;
  }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
</style>