feat: M3-M7 全模块落地 + 集成接线
- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制） - M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配） - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出（差异预览） - 字体 vendor 子集化（4 套 x2 字重） - 集成：realtime/export/rules 接入 main+httpapi；backup 子命令 - 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
This commit is contained in:
AskaEth committed
1 parent
d0e3b93e76
commit
bc8b1ee6c0
145 files changed
+25159
-321
No files matched your search
@@ -0,0 +1,53 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
import { formatPoints } from '@/shared'
|
||||
import { prefersReducedMotion } from '../useReducedMotion'
|
||||
|
||||
const props = withDefaults(defineProps<{ value: number; duration?: number }>(), { duration: 900 })
|
||||
|
||||
const reduced = prefersReducedMotion()
|
||||
const shown = ref(props.value)
|
||||
let frame = 0
|
||||
|
||||
// 整数分数滚动时不要出现小数抖动；权重分（非整数）才保留两位。
|
||||
const text = computed(() =>
|
||||
formatPoints(Number.isInteger(props.value) ? Math.round(shown.value) : shown.value),
|
||||
)
|
||||
|
||||
function stop(): void {
|
||||
if (frame !== 0) {
|
||||
cancelAnimationFrame(frame)
|
||||
frame = 0
|
||||
}
|
||||
}
|
||||
|
||||
function run(target: number): void {
|
||||
stop()
|
||||
const from = shown.value
|
||||
if (reduced.value || props.duration <= 0 || from === target) {
|
||||
shown.value = target
|
||||
return
|
||||
}
|
||||
|
||||
const started = performance.now()
|
||||
const step = (now: number): void => {
|
||||
const progress = Math.min(1, (now - started) / props.duration)
|
||||
const eased = 1 - (1 - progress) ** 3
|
||||
shown.value = from + (target - from) * eased
|
||||
if (progress < 1) {
|
||||
frame = requestAnimationFrame(step)
|
||||
} else {
|
||||
shown.value = target
|
||||
frame = 0
|
||||
}
|
||||
}
|
||||
frame = requestAnimationFrame(step)
|
||||
}
|
||||
|
||||
watch(() => props.value, run)
|
||||
onUnmounted(stop)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="animated-number">{{ text }}</span>
|
||||
</template>
|
||||
@@ -0,0 +1,196 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
import AnimatedNumber from './AnimatedNumber.vue'
|
||||
|
||||
const { detail } = useScoreboard()
|
||||
|
||||
const remaining = ref(0)
|
||||
let timer = 0
|
||||
|
||||
// 倒计时按 openedAt 计算而不是每 1s 减一：页面被系统休眠后回来仍显示真实剩余时间。
|
||||
watch(
|
||||
detail,
|
||||
(state) => {
|
||||
window.clearInterval(timer)
|
||||
timer = 0
|
||||
if (state === null) {
|
||||
remaining.value = 0
|
||||
return
|
||||
}
|
||||
const tick = (): void => {
|
||||
const elapsed = (Date.now() - state.openedAt) / 1000
|
||||
remaining.value = Math.max(0, Math.ceil(state.autoCloseSeconds - elapsed))
|
||||
}
|
||||
tick()
|
||||
timer = window.setInterval(tick, 1000)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
onUnmounted(() => window.clearInterval(timer))
|
||||
|
||||
const items = computed(() => detail.value?.detail?.items ?? [])
|
||||
const totalPoints = computed(() => detail.value?.detail?.totalPoints ?? 0)
|
||||
const autoClose = computed(() => (detail.value?.autoCloseSeconds ?? 0) > 0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Transition name="overlay">
|
||||
<div v-if="detail" class="overlay">
|
||||
<div class="scrim" />
|
||||
<section class="panel">
|
||||
<header class="head">
|
||||
<div>
|
||||
<div class="kicker">积分明细</div>
|
||||
<h2>{{ detail.title }}</h2>
|
||||
</div>
|
||||
<div class="total">
|
||||
<AnimatedNumber :value="totalPoints" />
|
||||
<span class="unit">分</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="detail.loading" class="empty">正在获取明细…</div>
|
||||
<div v-else-if="items.length === 0" class="empty">暂无明细记录</div>
|
||||
<div v-else class="table">
|
||||
<div class="row head-row">
|
||||
<span class="col-name">项目 / 组别</span>
|
||||
<span class="col-rank">名次</span>
|
||||
<span class="col-result">成绩</span>
|
||||
<span class="col-points">积分</span>
|
||||
</div>
|
||||
<div v-for="item in items" :key="item.ledgerId" class="row">
|
||||
<span class="col-name">
|
||||
{{ item.eventName ?? '人工调整' }}
|
||||
<em v-if="item.categoryName">{{ item.categoryName }}</em>
|
||||
</span>
|
||||
<span class="col-rank">{{ item.rank ?? '—' }}</span>
|
||||
<span class="col-result">{{ item.resultText ?? '—' }}</span>
|
||||
<span class="col-points">{{ item.points }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="foot">
|
||||
<span v-if="autoClose">将在 {{ remaining }}s 后自动关闭</span>
|
||||
<span v-else>等待管理端关闭</span>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
.scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, rgba(4, 12, 26, 0.25) 0%, rgba(4, 12, 26, 0.85) 46%);
|
||||
}
|
||||
.panel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 40px 44px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(180deg, rgba(9, 24, 46, 0.98), rgba(7, 18, 36, 0.98));
|
||||
border-left: 3px solid var(--primary);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
.kicker {
|
||||
font-size: 20px;
|
||||
letter-spacing: 6px;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
h2 {
|
||||
margin-top: 8px;
|
||||
font-size: 46px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text);
|
||||
}
|
||||
.total {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
font-size: 60px;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.total .unit {
|
||||
font-size: 26px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.table {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 110px 160px 130px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 8px;
|
||||
font-size: 27px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
.head-row {
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.col-rank,
|
||||
.col-result,
|
||||
.col-points {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.col-points {
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
.col-name em {
|
||||
margin-left: 10px;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 30px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.foot {
|
||||
flex: none;
|
||||
padding-top: 16px;
|
||||
text-align: right;
|
||||
font-size: 22px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.overlay-enter-active,
|
||||
.overlay-leave-active {
|
||||
transition: opacity 0.35s ease;
|
||||
}
|
||||
.overlay-enter-from,
|
||||
.overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
|
||||
const { booted, status, source, version } = useScoreboard()
|
||||
|
||||
const offline = computed(() => booted.value && status.value !== 'online')
|
||||
const mock = computed(() => source.value === 'mock')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="badges">
|
||||
<span v-if="mock" class="badge mock">示例数据</span>
|
||||
<span v-if="offline" class="badge offline">⚠ 连接中断 · 数据可能不是最新</span>
|
||||
<span v-if="version !== null" class="badge version">v{{ version }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.badges {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.badge {
|
||||
padding: 5px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.offline {
|
||||
background: rgba(255, 96, 96, 0.16);
|
||||
border-color: rgba(255, 96, 96, 0.55);
|
||||
color: #ffb4b4;
|
||||
}
|
||||
.mock {
|
||||
background: rgba(255, 215, 94, 0.16);
|
||||
border-color: rgba(255, 215, 94, 0.5);
|
||||
color: var(--gold);
|
||||
}
|
||||
.version {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ title: string; hint?: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<header class="page-head">
|
||||
<h2>{{ title }}</h2>
|
||||
<span v-if="hint" class="hint">{{ hint }}</span>
|
||||
</header>
|
||||
<div class="page-body">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background: var(--panel);
|
||||
border: 2px solid var(--panel-border);
|
||||
border-radius: 18px;
|
||||
padding: 18px 28px 22px;
|
||||
}
|
||||
.page-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 18px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
h2 {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: var(--primary-text);
|
||||
}
|
||||
.hint {
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.page-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref, watch } from 'vue'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
|
||||
type TickerKind = 'medals' | 'results' | 'announcement'
|
||||
|
||||
interface TickerItem {
|
||||
key: TickerKind
|
||||
label: string
|
||||
}
|
||||
|
||||
const { standings, latestResults, announcement, detail, settings } = useScoreboard()
|
||||
|
||||
const topMedals = computed(() =>
|
||||
[...standings.value]
|
||||
.sort((a, b) => b.gold - a.gold || b.silver - a.silver || b.bronze - a.bronze)
|
||||
.slice(0, 3),
|
||||
)
|
||||
|
||||
const latestGroup = computed(() => latestResults.value[0] ?? null)
|
||||
|
||||
const items = computed<TickerItem[]>(() => {
|
||||
const result: TickerItem[] = []
|
||||
if (topMedals.value.length > 0) result.push({ key: 'medals', label: '奖牌榜 Top3' })
|
||||
if (latestGroup.value !== null) result.push({ key: 'results', label: '最新完成项目' })
|
||||
// 公告是固定槽位：没有公告时显示占位，避免底栏只剩两屏来回跳。
|
||||
result.push({ key: 'announcement', label: '公告' })
|
||||
return result
|
||||
})
|
||||
|
||||
const index = ref(0)
|
||||
const current = computed<TickerItem | null>(() => items.value[index.value] ?? items.value[0] ?? null)
|
||||
const paused = computed(() => detail.value !== null)
|
||||
const rotateMs = computed(() => Math.max(2, settings.value?.display.rotateSeconds ?? 8) * 1000)
|
||||
|
||||
let timer = 0
|
||||
|
||||
function restart(): void {
|
||||
window.clearInterval(timer)
|
||||
timer = 0
|
||||
if (paused.value) return
|
||||
timer = window.setInterval(() => {
|
||||
index.value = (index.value + 1) % Math.max(1, items.value.length)
|
||||
}, rotateMs.value)
|
||||
}
|
||||
|
||||
watch([rotateMs, paused], restart, { immediate: true })
|
||||
watch(
|
||||
() => items.value.length,
|
||||
(total) => {
|
||||
if (index.value >= total) index.value = 0
|
||||
},
|
||||
)
|
||||
onUnmounted(() => window.clearInterval(timer))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="ticker">
|
||||
<div v-if="current" class="label">{{ current.label }}</div>
|
||||
<div class="viewport">
|
||||
<div v-if="current" :key="current.key" class="item">
|
||||
<template v-if="current.key === 'medals'">
|
||||
<div v-for="(row, i) in topMedals" :key="row.teamId" class="chip">
|
||||
<span class="chip-rank">{{ i + 1 }}</span>
|
||||
<span class="chip-name">{{ row.shortName ?? row.teamName }}</span>
|
||||
<span class="chip-stat gold">金 {{ row.gold }}</span>
|
||||
<span class="chip-stat silver">银 {{ row.silver }}</span>
|
||||
<span class="chip-stat bronze">铜 {{ row.bronze }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else-if="current.key === 'results' && latestGroup">
|
||||
<div class="event-name">
|
||||
{{ latestGroup.eventName }}
|
||||
<span class="event-cat">{{ latestGroup.categoryName }}</span>
|
||||
</div>
|
||||
<div v-for="row in latestGroup.rows.slice(0, 3)" :key="row.entryId" class="chip">
|
||||
<span class="chip-rank">{{ row.rank ?? '—' }}</span>
|
||||
<span class="chip-name">{{ row.athleteName ?? row.teamName }}</span>
|
||||
<span class="chip-stat">{{ row.resultText }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="announce">{{ announcement?.text ?? '暂无公告' }}</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ticker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
height: 112px;
|
||||
flex: none;
|
||||
padding: 0 28px;
|
||||
border-radius: 18px;
|
||||
background: var(--panel);
|
||||
border: 2px solid var(--panel-border);
|
||||
}
|
||||
.label {
|
||||
flex: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--primary-fg);
|
||||
background: var(--primary);
|
||||
}
|
||||
.viewport {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.item {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 34px;
|
||||
white-space: nowrap;
|
||||
/* 只做入场淡入：切换时旧内容立即移除，不会因为离场过渡卡住而出现空档。 */
|
||||
animation: ticker-in 0.4s ease-out both;
|
||||
}
|
||||
@keyframes ticker-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(36px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 26px;
|
||||
}
|
||||
.chip-rank {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-dim);
|
||||
font-size: 22px;
|
||||
}
|
||||
.chip-name {
|
||||
color: var(--text);
|
||||
}
|
||||
.chip-stat {
|
||||
color: var(--text-dim);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.gold {
|
||||
color: var(--gold);
|
||||
}
|
||||
.silver {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.bronze {
|
||||
color: #e0995e;
|
||||
}
|
||||
.event-name {
|
||||
font-size: 28px;
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.event-cat {
|
||||
margin-left: 12px;
|
||||
font-size: 22px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.announce {
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref } from 'vue'
|
||||
import { formatClock } from '@/shared'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
import OfflineBadge from './OfflineBadge.vue'
|
||||
|
||||
const { settings, options } = useScoreboard()
|
||||
|
||||
const now = ref(new Date().toISOString())
|
||||
const timer = window.setInterval(() => {
|
||||
now.value = new Date().toISOString()
|
||||
}, 15_000)
|
||||
onUnmounted(() => window.clearInterval(timer))
|
||||
|
||||
const display = computed(() => settings.value?.display ?? null)
|
||||
const title = computed(() => display.value?.title.trim() || '赛事标题待配置')
|
||||
const subtitle = computed(() => display.value?.subtitle?.trim() ?? '')
|
||||
const host = computed(() => settings.value?.event.host?.trim() || '主办方待配置')
|
||||
const logo = computed(() => display.value?.logo?.trim() || '')
|
||||
const clock = computed(() => formatClock(now.value))
|
||||
const identity = computed(() => {
|
||||
const parts: string[] = []
|
||||
if (options.value.instance !== null) parts.push(`实例 ${options.value.instance}`)
|
||||
if (options.value.screen !== null) parts.push(`屏 ${options.value.screen}`)
|
||||
return parts.join(' · ')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="top">
|
||||
<div class="logo">
|
||||
<img v-if="logo" :src="logo" alt="" />
|
||||
<span v-else>会标</span>
|
||||
</div>
|
||||
|
||||
<div class="titles">
|
||||
<h1>{{ title }}</h1>
|
||||
<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="clock">{{ clock }}</div>
|
||||
<div class="host">{{ host }}</div>
|
||||
<div v-if="identity" class="identity">{{ identity }}</div>
|
||||
<OfflineBadge />
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
min-height: 132px;
|
||||
flex: none;
|
||||
}
|
||||
.logo {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--primary);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 22px;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
overflow: hidden;
|
||||
}
|
||||
.logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.titles {
|
||||
min-width: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 62px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 8px;
|
||||
white-space: nowrap;
|
||||
background: linear-gradient(180deg, #ffffff 25%, var(--primary-light) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.subtitle {
|
||||
margin-top: 8px;
|
||||
font-size: 26px;
|
||||
letter-spacing: 6px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.right {
|
||||
margin-left: auto;
|
||||
text-align: right;
|
||||
flex: none;
|
||||
}
|
||||
.clock {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
color: var(--text);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.host {
|
||||
margin-top: 6px;
|
||||
font-size: 24px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.identity {
|
||||
margin-top: 4px;
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(157, 180, 212, 0.6);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useScoreboard } from '../../useScoreboard'
|
||||
import PageFrame from '../PageFrame.vue'
|
||||
|
||||
const { announcement } = useScoreboard()
|
||||
|
||||
const text = computed(() => announcement.value?.text ?? '暂无公告')
|
||||
// 重复三遍 + padding-left 100%，滚动到末尾时下一条刚好接上，不出现空白。
|
||||
const marquee = computed(() => `${text.value} · ${text.value} · ${text.value}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageFrame title="公告">
|
||||
<div class="body">
|
||||
<p class="text">{{ text }}</p>
|
||||
</div>
|
||||
<div class="marquee">
|
||||
<div class="marquee-inner">{{ marquee }}</div>
|
||||
</div>
|
||||
</PageFrame>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.text {
|
||||
font-size: 56px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
color: var(--text);
|
||||
}
|
||||
.marquee {
|
||||
flex: none;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 16px 0 4px;
|
||||
border-top: 2px solid var(--primary-line);
|
||||
}
|
||||
.marquee-inner {
|
||||
display: inline-block;
|
||||
padding-left: 100%;
|
||||
font-size: 28px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-dim);
|
||||
animation: marquee 26s linear infinite;
|
||||
}
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { fitRowFont } from '../../fitFont'
|
||||
import { useScoreboard } from '../../useScoreboard'
|
||||
import AnimatedNumber from '../AnimatedNumber.vue'
|
||||
import PageFrame from '../PageFrame.vue'
|
||||
|
||||
const { athletes, settings } = useScoreboard()
|
||||
|
||||
const rows = computed(() => athletes.value)
|
||||
const showMedals = computed(() => settings.value?.standings.showIndividualBoard ?? true)
|
||||
|
||||
const rowFont = computed(() => fitRowFont(rows.value.length, 560))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageFrame title="个人积分奖牌榜">
|
||||
<div class="board" :class="{ 'no-medals': !showMedals }" :style="{ '--row-font': rowFont }">
|
||||
<div class="row head">
|
||||
<span>名次</span>
|
||||
<span class="name">姓名</span>
|
||||
<span class="team">单位</span>
|
||||
<span class="points">总分</span>
|
||||
<template v-if="showMedals">
|
||||
<span class="medal gold">金</span>
|
||||
<span class="medal silver">银</span>
|
||||
<span class="medal bronze">铜</span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-for="row in rows" :key="row.athleteId" class="row">
|
||||
<span class="rank" :class="`top-${Math.min(row.rank, 4)}`">{{ row.rank }}</span>
|
||||
<span class="name">{{ row.athleteName }}</span>
|
||||
<span class="team">{{ row.shortName ?? row.teamName }}</span>
|
||||
<span class="points"><AnimatedNumber :value="row.totalPoints" /></span>
|
||||
<template v-if="showMedals">
|
||||
<span class="medal gold">{{ row.gold }}</span>
|
||||
<span class="medal silver">{{ row.silver }}</span>
|
||||
<span class="medal bronze">{{ row.bronze }}</span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="rows.length === 0" class="empty">暂无个人积分数据</div>
|
||||
</div>
|
||||
</PageFrame>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr 1fr 200px 110px 110px 110px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
padding: 0 18px;
|
||||
font-size: var(--row-font, 42px);
|
||||
line-height: 1.1;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.no-medals .row {
|
||||
grid-template-columns: 130px 1fr 1fr 220px;
|
||||
}
|
||||
.head {
|
||||
flex: none;
|
||||
font-size: 22px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
.rank,
|
||||
.medal,
|
||||
.points {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.rank {
|
||||
font-weight: 800;
|
||||
}
|
||||
.top-1 {
|
||||
color: var(--gold);
|
||||
}
|
||||
.top-2 {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.top-3 {
|
||||
color: #e0995e;
|
||||
}
|
||||
.name,
|
||||
.team {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.team {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.82em;
|
||||
}
|
||||
.points {
|
||||
text-align: right;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
}
|
||||
.medal {
|
||||
text-align: center;
|
||||
}
|
||||
.gold {
|
||||
color: var(--gold);
|
||||
}
|
||||
.silver {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.bronze {
|
||||
color: #e0995e;
|
||||
}
|
||||
.empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { formatResultText } from '@/shared'
|
||||
import type { EventResultRow, ResultStatus } from '@/shared'
|
||||
import { useScoreboard } from '../../useScoreboard'
|
||||
import PageFrame from '../PageFrame.vue'
|
||||
|
||||
const { latestResults, options } = useScoreboard()
|
||||
|
||||
// 数据口径：state='published' 且 status='finished'，按发布时间倒序取前 N 个（06 第 5 节）。
|
||||
const groups = computed(() => latestResults.value.slice(0, options.value.resultsCount))
|
||||
|
||||
const STATUS_LABELS: Record<ResultStatus, string> = {
|
||||
ok: '',
|
||||
dq: 'DQ',
|
||||
dns: 'DNS',
|
||||
dnf: 'DNF',
|
||||
withdrawn: '退赛',
|
||||
}
|
||||
|
||||
function displayResult(row: EventResultRow): string {
|
||||
if (row.status !== 'ok') return STATUS_LABELS[row.status]
|
||||
if (row.resultValue === null) return row.resultText
|
||||
return formatResultText(row.resultValue, row.unit, row.unit === 's' ? 'time' : 'none')
|
||||
}
|
||||
|
||||
function displayName(row: EventResultRow): string {
|
||||
if (row.athleteName !== null && row.athleteName !== '') return row.athleteName
|
||||
if (row.memberNames !== null) return row.memberNames.join(' / ')
|
||||
return row.shortName ?? row.teamName
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageFrame title="分项成绩" :hint="`最新完成 ${groups.length} 项`">
|
||||
<div v-if="groups.length > 0" class="groups">
|
||||
<article v-for="group in groups" :key="`${group.eventId}-${group.categoryId}`" class="group">
|
||||
<header class="group-head">
|
||||
<h3>{{ group.eventName }}</h3>
|
||||
<span class="cat">{{ group.categoryName }}</span>
|
||||
</header>
|
||||
<div class="lines">
|
||||
<div
|
||||
v-for="row in group.rows.slice(0, 6)"
|
||||
:key="row.entryId"
|
||||
class="line"
|
||||
:class="`top-${Math.min(row.rank ?? 99, 4)}`"
|
||||
>
|
||||
<span class="rk">{{ row.rank ?? '—' }}</span>
|
||||
<span class="nm">{{ displayName(row) }}</span>
|
||||
<span class="team">{{ row.shortName ?? row.teamName }}</span>
|
||||
<span class="rs">{{ displayResult(row) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div v-else class="empty">暂无已发布项目</div>
|
||||
</PageFrame>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.groups {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 26px;
|
||||
}
|
||||
.group {
|
||||
flex: 1 1 0;
|
||||
max-width: 620px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
border: 1px solid var(--primary-line);
|
||||
border-radius: 14px;
|
||||
padding: 18px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.group-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
h3 {
|
||||
font-size: 34px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--primary-light);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cat {
|
||||
flex: none;
|
||||
font-size: 22px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.lines {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.line {
|
||||
display: grid;
|
||||
grid-template-columns: 60px 1fr 150px 170px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 11px 6px;
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
animation: row-in 0.45s ease-out both;
|
||||
}
|
||||
.line:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.rk {
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.nm {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.team {
|
||||
font-size: 22px;
|
||||
color: var(--text-dim);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rs {
|
||||
text-align: right;
|
||||
color: var(--gold);
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.top-1 .rk {
|
||||
color: var(--gold);
|
||||
}
|
||||
.top-2 .rk {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.top-3 .rk {
|
||||
color: #e0995e;
|
||||
}
|
||||
.empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
@keyframes row-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { formatRankChange } from '@/shared'
|
||||
import { fitRowFont } from '../../fitFont'
|
||||
import { useScoreboard } from '../../useScoreboard'
|
||||
import AnimatedNumber from '../AnimatedNumber.vue'
|
||||
import PageFrame from '../PageFrame.vue'
|
||||
|
||||
const { standings, rankDeltaFor } = useScoreboard()
|
||||
|
||||
const rows = computed(() => standings.value)
|
||||
|
||||
// 行高由 flex 均分，字号按行数算，单位再多也不会顶到轮播条下面。
|
||||
const rowFont = computed(() => fitRowFont(rows.value.length, 560))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageFrame title="总积分榜">
|
||||
<div class="board" :style="{ '--row-font': rowFont }">
|
||||
<div class="row head">
|
||||
<span class="rank">名次</span>
|
||||
<span class="name">单位</span>
|
||||
<span class="delta" />
|
||||
<span class="points">总分</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="row in rows"
|
||||
:key="row.teamId"
|
||||
class="row"
|
||||
:class="{ flash: rankDeltaFor(row.teamId) !== null }"
|
||||
>
|
||||
<span class="rank" :class="`top-${Math.min(row.rank, 4)}`">{{ row.rank }}</span>
|
||||
<span class="name">{{ row.teamName }}</span>
|
||||
<span class="delta">
|
||||
<span v-if="rankDeltaFor(row.teamId) !== null" :class="rankDeltaFor(row.teamId)! > 0 ? 'up' : 'down'">
|
||||
{{ formatRankChange(rankDeltaFor(row.teamId)) }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="points"><AnimatedNumber :value="row.totalPoints" /></span>
|
||||
</div>
|
||||
<div v-if="rows.length === 0" class="empty">暂无积分数据</div>
|
||||
</div>
|
||||
</PageFrame>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr 110px 260px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
padding: 0 18px;
|
||||
font-size: var(--row-font, 48px);
|
||||
line-height: 1.1;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
transition:
|
||||
background-color 0.4s ease,
|
||||
box-shadow 0.4s ease;
|
||||
}
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.head {
|
||||
flex: none;
|
||||
font-size: 22px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
.rank {
|
||||
font-weight: 800;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.top-1 {
|
||||
color: var(--gold);
|
||||
}
|
||||
.top-2 {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.top-3 {
|
||||
color: #e0995e;
|
||||
}
|
||||
.name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.points {
|
||||
text-align: right;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.delta {
|
||||
text-align: right;
|
||||
font-size: 0.7em;
|
||||
font-weight: 700;
|
||||
}
|
||||
.up {
|
||||
color: #5cf08a;
|
||||
}
|
||||
.down {
|
||||
color: #ff8a8a;
|
||||
}
|
||||
.flash {
|
||||
background: var(--primary-flash);
|
||||
box-shadow: inset 4px 0 0 var(--primary);
|
||||
}
|
||||
.empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { fitRowFont } from '../../fitFont'
|
||||
import { useScoreboard } from '../../useScoreboard'
|
||||
import PageFrame from '../PageFrame.vue'
|
||||
|
||||
const { standings } = useScoreboard()
|
||||
|
||||
const rows = computed(() =>
|
||||
[...standings.value].sort(
|
||||
(a, b) =>
|
||||
b.gold - a.gold || b.silver - a.silver || b.bronze - a.bronze || b.totalPoints - a.totalPoints,
|
||||
),
|
||||
)
|
||||
|
||||
const rowFont = computed(() => fitRowFont(rows.value.length, 560))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageFrame title="团体奖牌榜">
|
||||
<div class="board" :style="{ '--row-font': rowFont }">
|
||||
<div class="row head">
|
||||
<span>名次</span>
|
||||
<span class="name">单位</span>
|
||||
<span class="medal gold">金</span>
|
||||
<span class="medal silver">银</span>
|
||||
<span class="medal bronze">铜</span>
|
||||
<span class="total">合计</span>
|
||||
</div>
|
||||
<div v-for="(row, index) in rows" :key="row.teamId" class="row">
|
||||
<span class="rank" :class="`top-${Math.min(index + 1, 4)}`">{{ index + 1 }}</span>
|
||||
<span class="name">{{ row.teamName }}</span>
|
||||
<span class="medal gold">{{ row.gold }}</span>
|
||||
<span class="medal silver">{{ row.silver }}</span>
|
||||
<span class="medal bronze">{{ row.bronze }}</span>
|
||||
<span class="total">{{ row.medalTotal }}</span>
|
||||
</div>
|
||||
<div v-if="rows.length === 0" class="empty">暂无奖牌数据</div>
|
||||
</div>
|
||||
</PageFrame>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.board {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr 140px 140px 140px 180px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
padding: 0 18px;
|
||||
font-size: var(--row-font, 44px);
|
||||
line-height: 1.1;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
.row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.head {
|
||||
flex: none;
|
||||
font-size: 22px;
|
||||
letter-spacing: 4px;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 2px solid var(--primary-line);
|
||||
}
|
||||
.rank,
|
||||
.medal,
|
||||
.total {
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.rank {
|
||||
font-weight: 800;
|
||||
}
|
||||
.top-1 {
|
||||
color: var(--gold);
|
||||
}
|
||||
.top-2 {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.top-3 {
|
||||
color: #e0995e;
|
||||
}
|
||||
.name {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.gold {
|
||||
color: var(--gold);
|
||||
}
|
||||
.silver {
|
||||
color: #d8e2ee;
|
||||
}
|
||||
.bronze {
|
||||
color: #e0995e;
|
||||
}
|
||||
.total {
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
.empty {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 34px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user