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,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>
|
||||
Reference in new issue
Block a user