Scoreboard/web/src/display/App.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, watch } from 'vue'
import type { Component } from 'vue'
import { mix, parseHexColor, readableForeground, toCss } from './color'
import { useShellFullscreen } from './shell'
import type { DisplayPageKey } from './types'
import { useScoreboard } from './useScoreboard'
import { useStageScale } from './useStageScale'
import { WINDOWED_TITLEBAR_HEIGHT, isWindowed } from './windowed'
import DetailOverlay from './components/DetailOverlay.vue'
import TickerBar from './components/TickerBar.vue'
import TopBar from './components/TopBar.vue'
import WindowedTitleBar from './components/WindowedTitleBar.vue'
import AnnouncementPage from './components/pages/AnnouncementPage.vue'
import AthleteStandingsPage from './components/pages/AthleteStandingsPage.vue'
import EventResultsPage from './components/pages/EventResultsPage.vue'
import LivePage from './components/pages/LivePage.vue'
import StandingsPage from './components/pages/StandingsPage.vue'
import TeamMedalsPage from './components/pages/TeamMedalsPage.vue'

const PAGES: Record<DisplayPageKey, Component> = {
  standings: StandingsPage,
  'team-medals': TeamMedalsPage,
  'athlete-standings': AthleteStandingsPage,
  'event-results': EventResultsPage,
  live: LivePage,
  announcement: AnnouncementPage,
}

const { bootstrap, dispose, page, settings } = useScoreboard()

// 单屏窗口化才有标题栏；kiosk 下 windowed 为 false，下面所有相关分支都不生效。
const windowed = isWindowed()
// Console 的 F11 是窗口级全屏，文档 API 看不到，两个来源的合成判断见 shell.ts。
// 全屏时自绘标题栏必须让位，否则舞台顶部被多扣 50px。
const fullscreen = useShellFullscreen()
const showTitleBar = computed(() => windowed && !fullscreen.value)
const { scale, offsetX, offsetY, fit } = useStageScale({
  topInset: () => (showTitleBar.value ? WINDOWED_TITLEBAR_HEIGHT : 0),
})

// 标题栏出现/消失会改变可用高度，必须重新算缩放（全屏切换不保证带 resize）。
watch(fullscreen, () => fit())

const currentPage = computed<Component>(() => PAGES[page.value])

const rootStyle = { '--display-titlebar-h': `${WINDOWED_TITLEBAR_HEIGHT}px` }
const barTitle = computed(() => settings.value?.display?.title?.trim() || '赛事标题待配置')
const barLogo = computed(() => settings.value?.display?.logo?.trim() ?? '')

const stageStyle = computed(() => ({
  transform: `scale(${scale.value})`,
  left: `${offsetX.value}px`,
  top: `${offsetY.value}px`,
}))

const background = computed(() => {
  const value = settings.value?.display?.background?.trim()
  return value !== undefined && value !== '' ? value : null
})

/** 主色由配置驱动，亮/暗变体与前景色在这里一次性算好挂成 CSS 变量。 */
const themeVars = computed<Record<string, string>>(() => {
  const vars: Record<string, string> = {}
  const primary = parseHexColor(settings.value?.display?.primaryColor ?? null)
  if (primary === null) return vars

  const light = mix(primary, { r: 255, g: 255, b: 255 }, 0.45)
  const dark = mix(primary, { r: 0, g: 0, b: 0 }, 0.45)
  vars['--primary'] = toCss(primary)
  vars['--primary-light'] = toCss(light)
  vars['--primary-dark'] = toCss(dark)
  vars['--primary-fg'] = readableForeground(primary)
  vars['--primary-text'] = toCss(light)
  vars['--primary-line'] = `rgba(${primary.r}, ${primary.g}, ${primary.b}, 0.38)`
  vars['--primary-flash'] = `rgba(${primary.r}, ${primary.g}, ${primary.b}, 0.14)`
  return vars
})

// 无人值守兜底：每 24h 刷新一次，清掉长跑累积的内存与渲染状态（06 第 8 节）。
const RELOAD_MS = 24 * 60 * 60 * 1000
let reloadTimer = 0

onMounted(() => {
  void bootstrap()
  reloadTimer = window.setTimeout(() => window.location.reload(), RELOAD_MS)
})

onUnmounted(() => {
  window.clearTimeout(reloadTimer)
  dispose()
})
</script>

<template>
  <div class="root" :style="rootStyle">
    <WindowedTitleBar v-if="showTitleBar" :title="barTitle" :logo="barLogo" />

    <div class="screen">
      <div class="stage" :style="[stageStyle, themeVars]">
        <!-- 兜底渐变与背景图互斥：两者都是 absolute inset:0 同层，同时存在时后画的渐变会整块盖住图片 -->
        <img v-if="background" class="bg" :src="background" alt="" />
        <div v-else class="bg-fallback" />

        <div class="content">
          <TopBar />
          <main class="main">
            <Transition name="page" mode="out-in">
              <component :is="currentPage" :key="page" />
            </Transition>
          </main>
          <TickerBar />
        </div>

        <DetailOverlay />
      </div>
    </div>
  </div>
</template>

<style scoped>
.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #000;
}
/* kiosk 下 root 里只有 .screen，flex:1 等价于原来的铺满视口 */
.screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #000;
  cursor: none;
}
.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  padding: 40px 48px;
  overflow: hidden;
  background: var(--bg);

  --primary: #4fd8ff;
  --primary-light: #8fe6ff;
  --primary-dark: #1b7fa8;
  --primary-fg: #04121c;
  --primary-text: #8fe6ff;
  --primary-line: rgba(79, 216, 255, 0.38);
  --primary-flash: rgba(79, 216, 255, 0.14);
}
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
.bg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(79, 216, 255, 0.16), transparent 55%),
    radial-gradient(ellipse at 88% 100%, rgba(255, 215, 94, 0.1), transparent 50%),
    linear-gradient(160deg, #0b1e3a 0%, #06152b 100%);
}
.content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main {
  flex: 1;
  min-height: 0;
  display: flex;
}
.main > * {
  flex: 1;
  min-width: 0;
}
.page-enter-active,
.page-leave-active {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(24px);
}
.page-leave-to {
  opacity: 0;
  transform: translateY(-24px);
}

:global(body) {
  cursor: none;
  overflow: hidden;
}
</style>