feat: 字体可配并随赛事包打包 + 大屏调试标识收敛 + 报名表 CSV 编码兼容
三块改动，均为现场反馈：
一、字体配置与随包打包（此前「没有入口可以配置字体」，导出包也不带字体）
- 服务端新增 httpapi/fonts.go 与 4 条路由：GET /api/fonts（recorder）、
POST /api/fonts（admin，multipart file）、DELETE /api/fonts/{name}（admin）、
GET /uploads/fonts/{name}（匿名——大屏 @font-face 不带会话）
- 上传限 ttf/otf/woff/woff2、单个 20 MiB；文件名经 safeFontName 收敛且需与
fontContentType 往返一致，挡住路径穿越；重名 409、删除被引用字体 409
- 新增设置键 display.font_title / display.font_body（DTO fontTitle/fontBody，
随快照下发给大屏），写入时校验取值合法
- 导出：接上一直没被赋值的 IncludeFonts/FontsDir；包内落点用 uploads/fonts/
（运行时只读这里，落顶层 fonts/ 等于没人读）
- 大屏按配置动态注册字体并挂 --display-font-title/body，加载失败静默回落默认字体
- 管理端「赛事信息」新增字体区块：标题/正文字体下拉、上传、字体库、实时预览
二、大屏显示收敛
- 数据版本号角标 vN 彻底移除（原先只有窗口化窗口会显示，两处显隐口径不一致）
- 窗口化窗口按 F11 全屏后自绘标题栏不让位：根因是 Console 用 win.setFullScreen()
做窗口级全屏，而页面用 document.fullscreenElement 判断，后者恒为 null；
新增 display-preload.js 下发窗口级全屏状态，页面侧 shell.ts 把两级全屏取或，
无 preload 时（浏览器直连 /display）回落到文档级监听
三、报名表 CSV 编码兼容（用户报「解析中文字符遇到编码问题」）
- 服务端不再把原始字节直接喂给 csv.Reader：先摘 UTF-8 BOM，再认 UTF-16 LE/BE
BOM，其余非合法 UTF-8 按 GB18030 解（GBK 是其子集）
- 修复前症状：GBK 文件（Excel 另存为 CSV 的默认编码）中文变乱码；带 BOM 的文件
（Excel「CSV UTF-8」，也正是我们自己模板的格式）把 BOM 拼进第一列表头，
报「报名表缺少列 event_code」——连「下载模板→填→传回来」都走不通
- golang.org/x/text 由 indirect 提升为直接依赖，未新增外部依赖
测试：服务端 12 包全绿（新增 fonts_test.go / fonts_internal_test.go /
handlers_import_encoding_test.go）；前端 vue-tsc 通过、pnpm build 通过、157 例全过；
Console 语法检查 17 个文件通过。docs/ 与 devdocs/ 同步更新。
This commit is contained in:
AskaEth committed
1 parent
9c6d0bd3b3
commit
fc96d17660
42 files changed
+2451
-95
No files matched your search
+8
-11
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
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'
|
||||
@@ -28,13 +29,17 @@ const { bootstrap, dispose, page, settings } = useScoreboard()
|
||||
|
||||
// 单屏窗口化才有标题栏；kiosk 下 windowed 为 false，下面所有相关分支都不生效。
|
||||
const windowed = isWindowed()
|
||||
// Console 的 F11 由主进程切换全屏：全屏时自绘标题栏必须让位，否则舞台顶部被多扣 50px。
|
||||
const fullscreen = ref(document.fullscreenElement !== null)
|
||||
// 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` }
|
||||
@@ -74,20 +79,12 @@ const themeVars = computed<Record<string, string>>(() => {
|
||||
const RELOAD_MS = 24 * 60 * 60 * 1000
|
||||
let reloadTimer = 0
|
||||
|
||||
function onFullscreenChange(): void {
|
||||
fullscreen.value = document.fullscreenElement !== null
|
||||
// 标题栏出现/消失会改变可用高度，必须重新算缩放（fullscreenchange 不保证带 resize）。
|
||||
fit()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||||
void bootstrap()
|
||||
reloadTimer = window.setTimeout(() => window.location.reload(), RELOAD_MS)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('fullscreenchange', onFullscreenChange)
|
||||
window.clearTimeout(reloadTimer)
|
||||
dispose()
|
||||
})
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
import { isWindowed } from '../windowed'
|
||||
|
||||
const { booted, status, source, version, authRequired } = useScoreboard()
|
||||
const { booted, status, source, authRequired } = useScoreboard()
|
||||
|
||||
// connecting 是启动瞬间的正常状态，闪「连接中断」会误报；只有真正断开才提示。
|
||||
const offline = computed(() => booted.value && status.value === 'offline')
|
||||
const mock = computed(() => source.value === 'mock')
|
||||
// 数据版本号（change_log 版本）是给现场核对「这块屏有没有跟上服务端」用的调试信息，
|
||||
// 与「实例 · 屏」同规矩：只在窗口化调试时显示，kiosk 全屏不出现。
|
||||
const showVersion = computed(() => isWindowed() && version.value !== null)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -18,7 +14,6 @@ const showVersion = computed(() => isWindowed() && version.value !== null)
|
||||
<span v-if="mock" class="badge mock">示例数据</span>
|
||||
<span v-if="authRequired" class="badge auth">登录已失效 · 请重新登录</span>
|
||||
<span v-if="offline" class="badge offline">⚠ 连接中断 · 数据可能不是最新</span>
|
||||
<span v-if="showVersion" class="badge version">v{{ version }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -54,8 +49,4 @@ const showVersion = computed(() => isWindowed() && version.value !== null)
|
||||
border-color: rgba(255, 160, 64, 0.55);
|
||||
color: #ffd0a0;
|
||||
}
|
||||
.version {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onUnmounted, ref } from 'vue'
|
||||
import { formatClock } from '@/shared'
|
||||
import { useShellFullscreen } from '../shell'
|
||||
import { useScoreboard } from '../useScoreboard'
|
||||
import { isWindowed } from '../windowed'
|
||||
import OfflineBadge from './OfflineBadge.vue'
|
||||
@@ -21,13 +22,8 @@ const host = computed(() => settings.value?.event.host?.trim() || '主办方待
|
||||
const logo = computed(() => display.value?.logo?.trim() || '')
|
||||
const clock = computed(() => formatClock(now.value))
|
||||
// 单屏窗口化时用来分辨「这块屏是哪个实例」；现场展示（kiosk，或窗口化后按 F11 全屏）都不该出现。
|
||||
// 监听在 setup 阶段就挂上，onUnmounted 里摘掉，不引入额外 import。
|
||||
const fullscreen = ref(document.fullscreenElement !== null)
|
||||
function onFullscreenChange(): void {
|
||||
fullscreen.value = document.fullscreenElement !== null
|
||||
}
|
||||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||||
onUnmounted(() => document.removeEventListener('fullscreenchange', onFullscreenChange))
|
||||
// 窗口级全屏只有 Console 的 preload 看得到，合成判断与清理都在 shell.ts 里。
|
||||
const fullscreen = useShellFullscreen()
|
||||
|
||||
// 实例/屏号都缺失时返回空串，模板的 v-if 顺带挡掉空元素。
|
||||
const identity = computed(() => {
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
import type { EventSettings } from '@/shared'
|
||||
|
||||
/**
|
||||
* 大屏字体：把 settings 里的字体 id 解析成可用的 CSS 字体栈。
|
||||
*
|
||||
* 内置字体在 `@/shared/styles/fonts.css` 里已有 @font-face 与 `--font-*` 令牌，直接用令牌；
|
||||
* 上传字体要从 `<项目目录>/uploads/fonts/` 现取，这里动态注册 @font-face，
|
||||
* 家族名统一加 `scoreboard-custom-` 前缀，避免与内置家族撞名。
|
||||
*
|
||||
* 大屏是无人值守的：字体只是外观，任何一步失败都必须静默回落到内置默认字体，
|
||||
* 绝不能让整块屏空着或显示方块。
|
||||
*/
|
||||
|
||||
/** 内置字体 id → CSS 令牌（与 `fonts.css` 的 `--font-*` 一一对应）。 */
|
||||
export const BUILTIN_FONT_VARS: Readonly<Record<string, string>> = {
|
||||
'builtin:noto-sans': 'var(--font-noto-sans)',
|
||||
'builtin:noto-serif': 'var(--font-noto-serif)',
|
||||
'builtin:misans': 'var(--font-misans)',
|
||||
'builtin:source-han-sans': 'var(--font-source-han-sans)',
|
||||
}
|
||||
|
||||
/** 内置字体的下拉显示名（与服务端 GET /api/fonts 的 label 一致）。 */
|
||||
export const BUILTIN_FONTS: ReadonlyArray<{ id: string; label: string }> = [
|
||||
{ id: 'builtin:noto-sans', label: 'Noto Sans SC（思源黑体同源）' },
|
||||
{ id: 'builtin:noto-serif', label: 'Noto Serif SC（思源宋体同源）' },
|
||||
{ id: 'builtin:misans', label: 'MiSans' },
|
||||
{ id: 'builtin:source-han-sans', label: 'Source Han Sans CN（思源黑体）' },
|
||||
]
|
||||
|
||||
export const CUSTOM_FONT_PREFIX = 'custom:'
|
||||
export const CUSTOM_FONT_DIR = '/uploads/fonts/'
|
||||
export const CUSTOM_FAMILY_PREFIX = 'scoreboard-custom-'
|
||||
|
||||
const FONT_EXTENSIONS = ['.ttf', '.otf', '.woff', '.woff2']
|
||||
/** 上传字体的回落链：与内置默认令牌一致，注册失败时大屏仍是正常可读的黑体。 */
|
||||
const FALLBACK_STACK = "var(--font-noto-sans, 'Noto Sans SC', system-ui, sans-serif)"
|
||||
|
||||
/** 从 `custom:<文件名>` 取文件名；不是上传字体或扩展名不受支持时返回 null。 */
|
||||
export function customFontName(id: string | null | undefined): string | null {
|
||||
const value = (id ?? '').trim()
|
||||
if (!value.startsWith(CUSTOM_FONT_PREFIX)) return null
|
||||
const name = value.slice(CUSTOM_FONT_PREFIX.length)
|
||||
if (name === '') return null
|
||||
const lower = name.toLowerCase()
|
||||
return FONT_EXTENSIONS.some((ext) => lower.endsWith(ext)) ? name : null
|
||||
}
|
||||
|
||||
/** 上传字体的静态地址；文件名可能含汉字与空格，必须转义。 */
|
||||
export function customFontUrl(name: string): string {
|
||||
return CUSTOM_FONT_DIR + encodeURIComponent(name)
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传字体的 @font-face 家族名。
|
||||
*
|
||||
* 只保留字母数字与汉字：家族名会被拼进 CSS，引号/分号之类的字符必须挡在外面。
|
||||
*/
|
||||
export function customFontFamily(id: string | null | undefined): string | null {
|
||||
const name = customFontName(id)
|
||||
if (name === null) return null
|
||||
const safe = name
|
||||
.replace(/[^0-9A-Za-z\u3400-\u9fff\uf900-\ufaff]/g, '-')
|
||||
.replace(/^-+|-+$/g, '')
|
||||
return CUSTOM_FAMILY_PREFIX + (safe === '' ? 'font' : safe)
|
||||
}
|
||||
|
||||
/**
|
||||
* 字体 id → CSS 字体栈；空值或未知 id 返回 null（调用方保持现状，即内置默认字体）。
|
||||
*
|
||||
* 这是纯函数：上传字体即便还没注册成功，也返回带回落链的完整栈——
|
||||
* 浏览器会先用回落字体渲染，注册完成后自动切换，不会出现空白。
|
||||
*/
|
||||
export function fontStack(id: string | null | undefined): string | null {
|
||||
const value = (id ?? '').trim()
|
||||
if (value === '') return null
|
||||
const builtin = BUILTIN_FONT_VARS[value]
|
||||
if (builtin !== undefined) return builtin
|
||||
const family = customFontFamily(value)
|
||||
if (family === null) return null
|
||||
return `'${family}', ${FALLBACK_STACK}`
|
||||
}
|
||||
|
||||
/** 已注册（或正在注册）的上传字体，避免设置每次下发都重复加载同一份文件。 */
|
||||
const registered = new Map<string, Promise<string | null>>()
|
||||
|
||||
/**
|
||||
* 注册上传字体的 @font-face，成功返回家族名，失败返回 null。
|
||||
*
|
||||
* 加载失败不缓存：现场可能是服务端刚重启导致文件一时取不到，
|
||||
* 下次设置下发时应当重试，而不是把这块屏永久钉在默认字体上。
|
||||
*/
|
||||
export function registerCustomFont(id: string | null | undefined): Promise<string | null> {
|
||||
const value = (id ?? '').trim()
|
||||
const cached = registered.get(value)
|
||||
if (cached !== undefined) return cached
|
||||
|
||||
const task = loadCustomFont(value).then((family) => {
|
||||
if (family === null) registered.delete(value)
|
||||
return family
|
||||
})
|
||||
registered.set(value, task)
|
||||
return task
|
||||
}
|
||||
|
||||
async function loadCustomFont(id: string): Promise<string | null> {
|
||||
const name = customFontName(id)
|
||||
const family = customFontFamily(id)
|
||||
if (name === null || family === null) return null
|
||||
// 没有 FontFace API（老内核 / 非浏览器环境）时只能回落，不能让大屏报错。
|
||||
if (typeof FontFace === 'undefined' || typeof document === 'undefined' || document.fonts === undefined) {
|
||||
return null
|
||||
}
|
||||
|
||||
try {
|
||||
const face = new FontFace(family, `url("${customFontUrl(name)}")`)
|
||||
await face.load()
|
||||
document.fonts.add(face)
|
||||
return family
|
||||
} catch (error) {
|
||||
console.warn('[大屏字体] 上传字体加载失败，回落到默认字体：', id, error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
let applySeq = 0
|
||||
|
||||
/**
|
||||
* 把 settings 里的字体挂到 `document.documentElement` 的 CSS 变量上，
|
||||
* 由 `@/shared/styles/base.css` 消费（标题用 `--display-font-title`、正文用 `--display-font-body`）。
|
||||
*
|
||||
* 未配置或加载失败时删掉内联变量，让 base.css 的 `:root` 默认值生效——
|
||||
* 没配字体的赛事视觉必须与之前完全一致。
|
||||
*/
|
||||
export async function applyDisplayFonts(settings: EventSettings | null): Promise<void> {
|
||||
const seq = ++applySeq
|
||||
const display = settings?.display
|
||||
|
||||
const [title, body] = await Promise.all([
|
||||
resolveStack(display?.fontTitle),
|
||||
resolveStack(display?.fontBody),
|
||||
])
|
||||
// 加载期间可能又来了一份设置：丢弃过期结果，避免慢的旧字体盖掉新选择。
|
||||
if (seq !== applySeq) return
|
||||
|
||||
setRootFontVar('--display-font-title', title)
|
||||
setRootFontVar('--display-font-body', body)
|
||||
}
|
||||
|
||||
async function resolveStack(id: string | null | undefined): Promise<string | null> {
|
||||
const value = (id ?? '').trim()
|
||||
if (value === '' || BUILTIN_FONT_VARS[value] !== undefined) return fontStack(value)
|
||||
// 上传字体必须先确认能加载：加载不了就用默认字体，不留一个不存在的家族名在栈里。
|
||||
const family = await registerCustomFont(value)
|
||||
return family === null ? null : fontStack(value)
|
||||
}
|
||||
|
||||
function setRootFontVar(name: string, value: string | null): void {
|
||||
if (typeof document === 'undefined') return
|
||||
if (value === null) {
|
||||
document.documentElement.style.removeProperty(name)
|
||||
return
|
||||
}
|
||||
document.documentElement.style.setProperty(name, value)
|
||||
}
|
||||
@@ -359,6 +359,9 @@ export function parseSettings(source: unknown): DisplaySettings {
|
||||
// 公告在 settings 表里的键是 display.announce_text，聚合后是 display.announce；
|
||||
// 空白一律归一成 null，调用方只需判断「有没有公告」。
|
||||
const announce = str(settingValue(rec, 'display.announce', 'display.announce_text')).trim()
|
||||
// 字体 id 同理：空白归一成 null，调用方按「用默认字体」处理。
|
||||
const fontTitle = str(settingValue(rec, 'display.fontTitle', 'display.font_title')).trim()
|
||||
const fontBody = str(settingValue(rec, 'display.fontBody', 'display.font_body')).trim()
|
||||
return {
|
||||
event: {
|
||||
name: str(settingValue(rec, 'event.name', 'event.name')),
|
||||
@@ -375,6 +378,8 @@ export function parseSettings(source: unknown): DisplaySettings {
|
||||
primaryColor: strOrNull(settingValue(rec, 'display.primaryColor', 'display.theme_color')),
|
||||
rotateSeconds: num(settingValue(rec, 'display.rotateSeconds', 'display.rotate_seconds'), 8),
|
||||
announce: announce === '' ? null : announce,
|
||||
fontTitle: fontTitle === '' ? null : fontTitle,
|
||||
fontBody: fontBody === '' ? null : fontBody,
|
||||
},
|
||||
standings: {
|
||||
individualToTeamWeight: num(
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
import { onUnmounted, ref, type Ref } from 'vue'
|
||||
|
||||
/**
|
||||
* 大屏「是否全屏」的合成判断：两套互不相干的语义取或。
|
||||
*
|
||||
* - 窗口级：Console 里的 F11 走主进程 `win.setFullScreen()`，渲染进程的
|
||||
* `document.fullscreenElement` 始终是 null，只有 preload 转达的这条能看到；
|
||||
* - 文档级：浏览器里直接开 `/display` 时的 HTML 全屏，`document.fullscreenElement` 才是判据。
|
||||
*
|
||||
* 任一路判定全屏，页面就按全屏排布：窗口化标题栏让位，舞台按全屏高度重新缩放。
|
||||
*/
|
||||
|
||||
/** Console 的 display-preload.js 注入的能力；浏览器直接访问 `/display` 时不存在。 */
|
||||
export interface DisplayShellApi {
|
||||
/** 当前窗口是否处于窗口级全屏。 */
|
||||
isFullscreen: () => Promise<boolean>
|
||||
/** 订阅窗口级全屏变化，返回取消订阅函数。 */
|
||||
onFullscreenChange: (callback: (fullscreen: boolean) => void) => () => void
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
displayShell?: DisplayShellApi
|
||||
}
|
||||
}
|
||||
|
||||
/** 只用到全屏相关的两个成员，抽成窄接口便于测试注入替身。 */
|
||||
export interface FullscreenDocument {
|
||||
fullscreenElement: Element | null
|
||||
addEventListener(type: 'fullscreenchange', listener: () => void): void
|
||||
removeEventListener(type: 'fullscreenchange', listener: () => void): void
|
||||
}
|
||||
|
||||
export interface FullscreenDeps {
|
||||
/** 窗口级来源，默认取全局 `window.displayShell`。 */
|
||||
shell?: DisplayShellApi | null
|
||||
/** 文档级来源，默认取全局 `document`。 */
|
||||
doc?: FullscreenDocument | null
|
||||
}
|
||||
|
||||
export interface FullscreenTracker {
|
||||
get: () => boolean
|
||||
/** 订阅变化（与上次同值不重复通知），返回取消订阅函数。 */
|
||||
subscribe: (listener: (fullscreen: boolean) => void) => () => void
|
||||
/** 摘掉所有监听。 */
|
||||
dispose: () => void
|
||||
}
|
||||
|
||||
function resolveShell(): DisplayShellApi | null {
|
||||
if (typeof window === 'undefined') return null
|
||||
return window.displayShell ?? null
|
||||
}
|
||||
|
||||
function resolveDocument(): FullscreenDocument | null {
|
||||
if (typeof document === 'undefined') return null
|
||||
return document
|
||||
}
|
||||
|
||||
export function createFullscreenTracker(deps: FullscreenDeps = {}): FullscreenTracker {
|
||||
const shell = deps.shell === undefined ? resolveShell() : deps.shell
|
||||
const doc = deps.doc === undefined ? resolveDocument() : deps.doc
|
||||
|
||||
const listeners = new Set<(fullscreen: boolean) => void>()
|
||||
let windowFullscreen = false
|
||||
// 窗口事件可能先于 isFullscreen() 的应答到达，落了标记才不会让慢半拍的应答把新状态盖回去
|
||||
let windowEventSeen = false
|
||||
let disposed = false
|
||||
let last = false
|
||||
|
||||
const current = (): boolean => windowFullscreen || (doc !== null && doc.fullscreenElement !== null)
|
||||
|
||||
const emit = (): void => {
|
||||
const next = current()
|
||||
if (next === last) return
|
||||
last = next
|
||||
for (const listener of [...listeners]) listener(next)
|
||||
}
|
||||
|
||||
const onDocumentChange = (): void => emit()
|
||||
if (doc) doc.addEventListener('fullscreenchange', onDocumentChange)
|
||||
|
||||
let unsubscribeShell: (() => void) | null = null
|
||||
if (shell) {
|
||||
// 先订阅再查询：两步之间发生的切换不会被漏掉
|
||||
unsubscribeShell = shell.onFullscreenChange((value) => {
|
||||
windowEventSeen = true
|
||||
windowFullscreen = value === true
|
||||
emit()
|
||||
})
|
||||
// 页面加载时窗口可能已经是全屏（重载、渲染进程崩溃后重建），主动问一次
|
||||
void Promise.resolve(shell.isFullscreen()).then(
|
||||
(value) => {
|
||||
if (disposed || windowEventSeen) return
|
||||
windowFullscreen = value === true
|
||||
emit()
|
||||
},
|
||||
// 主进程没应答时保持文档级判断，不影响标题栏
|
||||
() => {}
|
||||
)
|
||||
}
|
||||
|
||||
last = current()
|
||||
|
||||
return {
|
||||
get: () => current(),
|
||||
subscribe: (listener) => {
|
||||
listeners.add(listener)
|
||||
return () => {
|
||||
listeners.delete(listener)
|
||||
}
|
||||
},
|
||||
dispose: () => {
|
||||
disposed = true
|
||||
listeners.clear()
|
||||
if (doc) doc.removeEventListener('fullscreenchange', onDocumentChange)
|
||||
if (unsubscribeShell) unsubscribeShell()
|
||||
unsubscribeShell = null
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
/** 组件用的响应式版本：状态变化刷新 Ref，卸载时摘掉监听。 */
|
||||
export function useShellFullscreen(): Ref<boolean> {
|
||||
const tracker = createFullscreenTracker()
|
||||
const fullscreen = ref(tracker.get())
|
||||
const unsubscribe = tracker.subscribe((value) => {
|
||||
fullscreen.value = value
|
||||
})
|
||||
onUnmounted(() => {
|
||||
unsubscribe()
|
||||
tracker.dispose()
|
||||
})
|
||||
return fullscreen
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
import { test } from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import {
|
||||
BUILTIN_FONT_VARS,
|
||||
applyDisplayFonts,
|
||||
customFontFamily,
|
||||
customFontName,
|
||||
customFontUrl,
|
||||
fontStack,
|
||||
registerCustomFont,
|
||||
} from '../fonts'
|
||||
import type { EventSettings } from '@/shared'
|
||||
|
||||
// 内置字体直接映射到 fonts.css 的令牌，回落链由令牌本身保证，前端不再抄一份。
|
||||
test('fontStack 把内置 id 映射到 CSS 令牌', () => {
|
||||
assert.equal(fontStack('builtin:noto-sans'), 'var(--font-noto-sans)')
|
||||
assert.equal(fontStack('builtin:noto-serif'), 'var(--font-noto-serif)')
|
||||
assert.equal(fontStack('builtin:misans'), 'var(--font-misans)')
|
||||
assert.equal(fontStack('builtin:source-han-sans'), 'var(--font-source-han-sans)')
|
||||
})
|
||||
|
||||
// 空值 / 未知 id 一律返回 null：调用方据此保持默认字体，绝不能塞一个坏家族名进去。
|
||||
test('fontStack 对空值与未知 id 返回 null', () => {
|
||||
for (const value of [null, undefined, '', ' ', 'builtin:nope', 'custom:font.xyz', '随便写的']) {
|
||||
assert.equal(fontStack(value), null, `fontStack(${String(value)}) 应为 null`)
|
||||
}
|
||||
})
|
||||
|
||||
// 上传字体的家族名统一带前缀，且只保留字母数字与汉字（家族名会拼进 CSS，不能被注入）。
|
||||
test('customFontFamily 生成安全且稳定的家族名', () => {
|
||||
assert.equal(customFontFamily('custom:my-font.ttf'), 'scoreboard-custom-my-font-ttf')
|
||||
assert.equal(customFontFamily('custom:思源宋体.otf'), 'scoreboard-custom-思源宋体-otf')
|
||||
assert.equal(customFontFamily('custom:Noto Sans SC.woff2'), 'scoreboard-custom-Noto-Sans-SC-woff2')
|
||||
assert.equal(customFontFamily('custom:"><script>.ttf'), 'scoreboard-custom-script--ttf')
|
||||
assert.equal(customFontFamily('builtin:misans'), null)
|
||||
})
|
||||
|
||||
// 上传字体的栈必须带回落链：文件取不到时浏览器直接落到内置默认字体，不会出现空白或方块。
|
||||
test('fontStack 给上传字体带上内置回落链', () => {
|
||||
const stack = fontStack('custom:思源宋体.ttf')
|
||||
assert.ok(stack !== null)
|
||||
assert.ok(stack.startsWith("'scoreboard-custom-思源宋体-ttf'"))
|
||||
assert.ok(stack.includes('var(--font-noto-sans'))
|
||||
})
|
||||
|
||||
test('customFontName 只认白名单扩展名', () => {
|
||||
assert.equal(customFontName('custom:思源宋体.ttf'), '思源宋体.ttf')
|
||||
assert.equal(customFontName('custom:a.WOFF2'), 'a.WOFF2')
|
||||
assert.equal(customFontName('custom:'), null)
|
||||
assert.equal(customFontName('custom:a.ttc'), null)
|
||||
assert.equal(customFontName('builtin:misans'), null)
|
||||
})
|
||||
|
||||
test('customFontUrl 转义汉字与空格', () => {
|
||||
assert.equal(customFontUrl('思源宋体.ttf'), '/uploads/fonts/%E6%80%9D%E6%BA%90%E5%AE%8B%E4%BD%93.ttf')
|
||||
assert.equal(customFontUrl('a b.ttf'), '/uploads/fonts/a%20b.ttf')
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// applyDisplayFonts：挂到 documentElement 的 CSS 变量上
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface FakeVar {
|
||||
style: { setProperty(name: string, value: string): void; removeProperty(name: string): void }
|
||||
vars: Record<string, string>
|
||||
}
|
||||
|
||||
/** node 里没有 DOM，这里造一个只记变量读写的最小实现，验证变量确实挂到了 html 上。 */
|
||||
function installFakeDocument(): FakeVar {
|
||||
const vars: Record<string, string> = {}
|
||||
const fake: FakeVar = {
|
||||
vars,
|
||||
style: {
|
||||
setProperty(name, value) {
|
||||
vars[name] = value
|
||||
},
|
||||
removeProperty(name) {
|
||||
delete vars[name]
|
||||
},
|
||||
},
|
||||
}
|
||||
;(globalThis as { document?: unknown }).document = { documentElement: fake }
|
||||
return fake
|
||||
}
|
||||
|
||||
function settingsWith(fontTitle: string | null, fontBody: string | null): EventSettings {
|
||||
return { display: { fontTitle, fontBody } } as unknown as EventSettings
|
||||
}
|
||||
|
||||
function uninstallDocument(): void {
|
||||
delete (globalThis as { document?: unknown }).document
|
||||
delete (globalThis as { FontFace?: unknown }).FontFace
|
||||
}
|
||||
|
||||
test('applyDisplayFonts 把选中的字体挂到 html 的 CSS 变量上', async () => {
|
||||
const doc = installFakeDocument()
|
||||
try {
|
||||
await applyDisplayFonts(settingsWith('builtin:noto-serif', 'custom:no-such-file.ttf'))
|
||||
assert.equal(doc.vars['--display-font-title'], 'var(--font-noto-serif)')
|
||||
// node 里没有 FontFace，上传字体注册必然失败，必须回落到默认（不设变量）。
|
||||
assert.equal(doc.vars['--display-font-body'], undefined)
|
||||
} finally {
|
||||
uninstallDocument()
|
||||
}
|
||||
})
|
||||
|
||||
test('applyDisplayFonts 未配置字体时清掉变量，回落到 base.css 的默认令牌', async () => {
|
||||
const doc = installFakeDocument()
|
||||
try {
|
||||
await applyDisplayFonts(settingsWith('builtin:misans', 'builtin:misans'))
|
||||
assert.equal(doc.vars['--display-font-title'], 'var(--font-misans)')
|
||||
|
||||
await applyDisplayFonts(settingsWith(null, null))
|
||||
assert.deepEqual(doc.vars, {})
|
||||
await applyDisplayFonts(null)
|
||||
assert.deepEqual(doc.vars, {})
|
||||
} finally {
|
||||
uninstallDocument()
|
||||
}
|
||||
})
|
||||
|
||||
// 字体文件取不到（解码失败 / 服务端刚重启）时注册返回 null，绝不能抛出去把大屏搞崩。
|
||||
test('上传字体加载失败时静默回落，不抛异常', async () => {
|
||||
const doc = installFakeDocument()
|
||||
;(globalThis as { FontFace?: unknown }).FontFace = class {
|
||||
async load(): Promise<never> {
|
||||
throw new Error('decode failed')
|
||||
}
|
||||
}
|
||||
try {
|
||||
const family = await registerCustomFont('custom:broken.ttf')
|
||||
assert.equal(family, null)
|
||||
await applyDisplayFonts(settingsWith('custom:broken.ttf', 'custom:broken.ttf'))
|
||||
// 失败不写变量：大屏仍是内置默认字体。
|
||||
assert.deepEqual(doc.vars, {})
|
||||
} finally {
|
||||
uninstallDocument()
|
||||
}
|
||||
})
|
||||
|
||||
// 注册成功后要带上真实的家族名，浏览器才会用上传字体渲染。
|
||||
test('上传字体注册成功后使用 scoreboard-custom- 家族名', async () => {
|
||||
const vars: Record<string, string> = {}
|
||||
;(globalThis as { document?: unknown }).document = {
|
||||
documentElement: {
|
||||
style: {
|
||||
setProperty: (name: string, value: string) => {
|
||||
vars[name] = value
|
||||
},
|
||||
removeProperty: (name: string) => {
|
||||
delete vars[name]
|
||||
},
|
||||
},
|
||||
},
|
||||
fonts: { add: () => undefined },
|
||||
}
|
||||
const added: unknown[] = []
|
||||
;(globalThis as { document: { fonts: { add(face: unknown): void } } }).document.fonts.add = (face) =>
|
||||
added.push(face)
|
||||
;(globalThis as { FontFace?: unknown }).FontFace = class {
|
||||
family: string
|
||||
constructor(family: string) {
|
||||
this.family = family
|
||||
}
|
||||
async load(): Promise<this> {
|
||||
return this
|
||||
}
|
||||
}
|
||||
try {
|
||||
const family = await registerCustomFont('custom:ok-font.ttf')
|
||||
assert.equal(family, 'scoreboard-custom-ok-font-ttf')
|
||||
assert.equal(added.length, 1)
|
||||
|
||||
await applyDisplayFonts(settingsWith('custom:ok-font.ttf', null))
|
||||
assert.equal(
|
||||
vars['--display-font-title'],
|
||||
"'scoreboard-custom-ok-font-ttf', var(--font-noto-sans, 'Noto Sans SC', system-ui, sans-serif)",
|
||||
)
|
||||
} finally {
|
||||
uninstallDocument()
|
||||
}
|
||||
})
|
||||
|
||||
// 内置字体的令牌表必须与服务端 GET /api/fonts 的 4 个 id 一一对应。
|
||||
test('BUILTIN_FONT_VARS 覆盖四款内置字体', () => {
|
||||
assert.deepEqual(Object.keys(BUILTIN_FONT_VARS).sort(), [
|
||||
'builtin:misans',
|
||||
'builtin:noto-sans',
|
||||
'builtin:noto-serif',
|
||||
'builtin:source-han-sans',
|
||||
])
|
||||
})
|
||||
@@ -0,0 +1,176 @@
|
||||
import { test } from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { createFullscreenTracker, type DisplayShellApi, type FullscreenDocument } from '../shell'
|
||||
|
||||
// 大屏「是否全屏」有两个来源：Console 里 F11 是窗口级全屏（页面看不到 document.fullscreenElement），
|
||||
// 浏览器直接开 /display 时才是文档级全屏。这里覆盖两路各自生效、取或合成，以及没有 preload 的回落。
|
||||
|
||||
const tick = () => new Promise<void>((resolve) => setImmediate(resolve))
|
||||
|
||||
/** document 替身：只实现全屏判断用到的三个成员。 */
|
||||
class FakeDocument implements FullscreenDocument {
|
||||
fullscreenElement: Element | null = null
|
||||
private listeners = new Set<() => void>()
|
||||
|
||||
addEventListener(_type: 'fullscreenchange', listener: () => void): void {
|
||||
this.listeners.add(listener)
|
||||
}
|
||||
|
||||
removeEventListener(_type: 'fullscreenchange', listener: () => void): void {
|
||||
this.listeners.delete(listener)
|
||||
}
|
||||
|
||||
/** 浏览器 HTML 全屏进出：改状态并派发 fullscreenchange。 */
|
||||
setFullscreen(value: boolean): void {
|
||||
this.fullscreenElement = value ? ({} as Element) : null
|
||||
for (const listener of [...this.listeners]) listener()
|
||||
}
|
||||
|
||||
get listenerCount(): number {
|
||||
return this.listeners.size
|
||||
}
|
||||
}
|
||||
|
||||
/** displayShell 替身：窗口级全屏，语义与主进程 win.setFullScreen 一致。 */
|
||||
class FakeShell implements DisplayShellApi {
|
||||
fullscreen = false
|
||||
private listeners = new Set<(fullscreen: boolean) => void>()
|
||||
|
||||
async isFullscreen(): Promise<boolean> {
|
||||
return this.fullscreen
|
||||
}
|
||||
|
||||
onFullscreenChange(callback: (fullscreen: boolean) => void): () => void {
|
||||
this.listeners.add(callback)
|
||||
return () => {
|
||||
this.listeners.delete(callback)
|
||||
}
|
||||
}
|
||||
|
||||
async setFullscreen(value: boolean): Promise<void> {
|
||||
this.fullscreen = value
|
||||
for (const listener of [...this.listeners]) listener(value)
|
||||
await tick()
|
||||
}
|
||||
|
||||
get listenerCount(): number {
|
||||
return this.listeners.size
|
||||
}
|
||||
}
|
||||
|
||||
test('窗口级全屏（F11）切换会通知订阅者', async () => {
|
||||
const shell = new FakeShell()
|
||||
const tracker = createFullscreenTracker({ shell, doc: new FakeDocument() })
|
||||
const seen: boolean[] = []
|
||||
tracker.subscribe((value) => seen.push(value))
|
||||
|
||||
assert.equal(tracker.get(), false)
|
||||
await shell.setFullscreen(true)
|
||||
assert.equal(tracker.get(), true)
|
||||
await shell.setFullscreen(false)
|
||||
assert.equal(tracker.get(), false)
|
||||
|
||||
assert.deepEqual(seen, [true, false])
|
||||
})
|
||||
|
||||
test('页面加载时窗口已经是全屏，主动查询能补上初始状态', async () => {
|
||||
const shell = new FakeShell()
|
||||
shell.fullscreen = true
|
||||
const tracker = createFullscreenTracker({ shell, doc: new FakeDocument() })
|
||||
const seen: boolean[] = []
|
||||
tracker.subscribe((value) => seen.push(value))
|
||||
|
||||
await tick()
|
||||
assert.equal(tracker.get(), true)
|
||||
assert.deepEqual(seen, [true])
|
||||
})
|
||||
|
||||
test('文档级全屏（浏览器 HTML 全屏）只看 document.fullscreenElement', () => {
|
||||
const doc = new FakeDocument()
|
||||
const tracker = createFullscreenTracker({ shell: null, doc })
|
||||
const seen: boolean[] = []
|
||||
tracker.subscribe((value) => seen.push(value))
|
||||
|
||||
doc.setFullscreen(true)
|
||||
assert.equal(tracker.get(), true)
|
||||
doc.setFullscreen(false)
|
||||
assert.equal(tracker.get(), false)
|
||||
|
||||
assert.deepEqual(seen, [true, false])
|
||||
})
|
||||
|
||||
test('两个来源取或：任一路全屏就算全屏', async () => {
|
||||
const shell = new FakeShell()
|
||||
const doc = new FakeDocument()
|
||||
const tracker = createFullscreenTracker({ shell, doc })
|
||||
|
||||
doc.setFullscreen(true)
|
||||
// 文档级还全屏时退出窗口级，合成结果必须仍是全屏
|
||||
await shell.setFullscreen(true)
|
||||
await shell.setFullscreen(false)
|
||||
assert.equal(tracker.get(), true)
|
||||
|
||||
doc.setFullscreen(false)
|
||||
assert.equal(tracker.get(), false)
|
||||
})
|
||||
|
||||
test('没有 displayShell 时优雅回落，不报错也不碰窗口级接口', () => {
|
||||
const doc = new FakeDocument()
|
||||
// Node 里没有全局 window，等价于浏览器直接访问 /display：默认取不到 displayShell
|
||||
const tracker = createFullscreenTracker({ doc })
|
||||
|
||||
doc.setFullscreen(true)
|
||||
assert.equal(tracker.get(), true)
|
||||
doc.setFullscreen(false)
|
||||
assert.equal(tracker.get(), false)
|
||||
})
|
||||
|
||||
test('窗口事件先于查询应答到达时，不会被过期应答盖回去', async () => {
|
||||
const doc = new FakeDocument()
|
||||
let release: (value: boolean) => void = () => {}
|
||||
const shell: DisplayShellApi = {
|
||||
isFullscreen: () => new Promise<boolean>((resolve) => {
|
||||
release = resolve
|
||||
}),
|
||||
onFullscreenChange: (callback) => {
|
||||
// 订阅时就立刻回调一次，模拟事件抢在 invoke 应答之前到达
|
||||
callback(true)
|
||||
return () => {}
|
||||
},
|
||||
}
|
||||
|
||||
const tracker = createFullscreenTracker({ shell, doc })
|
||||
assert.equal(tracker.get(), true)
|
||||
|
||||
release(false)
|
||||
await tick()
|
||||
assert.equal(tracker.get(), true)
|
||||
})
|
||||
|
||||
test('同值不重复通知，退订后不再收到', () => {
|
||||
const doc = new FakeDocument()
|
||||
const tracker = createFullscreenTracker({ shell: null, doc })
|
||||
const seen: boolean[] = []
|
||||
const unsubscribe = tracker.subscribe((value) => seen.push(value))
|
||||
|
||||
doc.setFullscreen(false)
|
||||
assert.deepEqual(seen, [])
|
||||
|
||||
doc.setFullscreen(true)
|
||||
unsubscribe()
|
||||
doc.setFullscreen(false)
|
||||
assert.deepEqual(seen, [true])
|
||||
})
|
||||
|
||||
test('dispose 摘掉文档级与窗口级两路监听', () => {
|
||||
const shell = new FakeShell()
|
||||
const doc = new FakeDocument()
|
||||
const tracker = createFullscreenTracker({ shell, doc })
|
||||
|
||||
assert.equal(doc.listenerCount, 1)
|
||||
assert.equal(shell.listenerCount, 1)
|
||||
|
||||
tracker.dispose()
|
||||
assert.equal(doc.listenerCount, 0)
|
||||
assert.equal(shell.listenerCount, 0)
|
||||
})
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
} from './guards'
|
||||
import type { DisplaySettings } from './guards'
|
||||
import { DEFAULT_ANNOUNCE_SECONDS, createAnnouncement, resolveAnnounceText } from './announce'
|
||||
import { applyDisplayFonts } from './fonts'
|
||||
import { createMockAthletes, createMockSnapshot } from './mock'
|
||||
import { readCachedSnapshot, writeCachedSnapshot } from './storage'
|
||||
import { DISPLAY_PAGES, normalizePage } from './types'
|
||||
@@ -395,6 +396,15 @@ function handleCommand(command: DisplayCommand): void {
|
||||
}
|
||||
}
|
||||
|
||||
// 大屏字体随设置变化：快照、缓存、示例数据任何一条路径改动 settings 都要重新挂字体。
|
||||
watch(
|
||||
settings,
|
||||
(next) => {
|
||||
void applyDisplayFonts(next)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
/**
|
||||
* 服务端把当前公告持久化在设置里（display.announce），快照与设置接口都带它。
|
||||
*
|
||||
|
||||
Reference in new issue
Block a user