# 06 · 大屏端设计

> 所属：运动会积分榜系统 · 开发文档集
> 版本：v0.1（讨论稿） · 2026-09-09
> 上游：[README](./README.md) · 相关：[05-接口与实时协议](./05-接口与实时协议.md)、[10-部署与现场方案](./10-部署与现场方案.md)
> ⚠️ 视觉方案**尚未定稿**（见 D13），第 1 节的令牌为占位值，待设计稿确定后替换。

---

## 1. 视觉规范（占位，待定）

| 令牌 | 占位值 | 说明 |
| --- | --- | --- |
| 设计分辨率 | 3840 × 1920（16:9） | 按比例缩放适配任意窗口；1920×1080 同样支持 |
| 背景 | `#0b1e3a` | 深色底，投影环境下对比度好 |
| 主金色 | `#ffd75e` | 分数、冠军 |
| 强调青色 | `#4fd8ff` | 标题、次要强调 |
| 正文 | `#e8f1ff`，次要 `#9db4d4` | |
| 面板 | 半透明白 5% + 1–2px 蓝边 + 16px 圆角 | |
| 字体 | 思源黑体 / Noto Sans CJK SC | **本地打包，不依赖 CDN** |

> 以上仅为「深色底 + 高对比数据表格」的通用赛事大屏基线。D13 拍板后，本节整体替换为最终视觉规范（色板、字号阶梯、间距、圆角、阴影）。

## 2. 缩放适配（与视觉无关，可先落地）

以设计分辨率布局、整体 `transform: scale()` 适配任意窗口：

```js
const s = Math.min(window.innerWidth / 3840, window.innerHeight / 1920);
stage.style.transform = `scale(${s})`;
stage.style.left = (window.innerWidth - 3840 * s) / 2 + "px";
stage.style.top = (window.innerHeight - 1920 * s) / 2 + "px";
```

好处：一套 CSS 适配所有分辨率，不用为 1080p / 4K 写两份。

## 3. 页面与轮播

| 页 | 内容 | 默认 |
| --- | --- | --- |
| P1 | 总积分榜（全单位，含名次升降箭头） | 轮播页 |
| P2 | 奖牌榜 | 轮播页 |
| P3 | 纪录榜（历史最好成绩） | 轮播页 |
| P4 | 最新成绩 / 刚刚产生名次的项目 | 轮播页 |
| P5 | 单项成绩榜（当前正在进行的项目） | 轮播页 |
| P6 | 公告 / 图文 | 手动触发 |

- 轮播：默认 20s/页，可后台配置。
- 后台可**锁定**当前页（比赛高潮时不让它跳走）。
- 每页支持「无数据」占位态，避免开赛前空白。

> 页面清单需在 D7 确认。

## 4. 动效（克制、不炫技）

| 场景 | 动效 |
| --- | --- |
| 名次上升/下降 | 行高亮 + ↑↓ 箭头，2s 后淡出 |
| 分数变化 | 数字滚动递增/递减 |
| 新成绩上屏 | 该行从左滑入 + 短暂金色描边 |
| 破纪录 | 整屏横幅 + 项目/姓名/成绩，停留 5s |
| 公告 | 底部滚动条 |

> 动效原则：**不影响可读性**。所有动画在「减少动态效果」系统偏好下自动关闭。

## 5. 分辨率与性能

- 表格行数多时启用「自动滚动」或分页，不用虚拟滚动（行数少，虚拟滚动反而复杂）。
- 单页 DOM 节点控制在 2000 以内。
- 避免大面积 `box-shadow` / `backdrop-filter`（4K 下 GPU 压力大）。
- 动画优先 CSS transition，避免 JS 定时器累积泄漏。
- 每 24h 自动 `location.reload()` 兜底。

## 6. 无人值守自恢复

| 项 | 做法 |
| --- | --- |
| 断线 | 显示「⚠ 连接中断 · 数据可能不是最新」，继续展示缓存快照 |
| 重连 | 自动按 `lastVersion` 补增量，补不上取全量快照 |
| 崩溃 | 浏览器 kiosk 模式 + 系统开机自启；可选看门狗脚本 |
| 兜底 | 每 24h 自刷新；页面无内存增长 |

## 7. 移动端（若 D9 选 A）

- 同一套大屏页在手机上自适应（窄屏改为单列卡片）。
- 只读，不做交互编辑。

---

## 附录 · 设计令牌（占位）

```css
:root {
  /* 占位值，待 D13 视觉定稿后替换 */
  --bg: #0b1e3a;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(120, 180, 255, 0.25);
  --gold: #ffd75e;
  --cyan: #4fd8ff;
  --text: #e8f1ff;
  --text-dim: #9db4d4;
  --design-w: 3840px;
  --design-h: 1920px;
}
```