3.8 KiB
3.8 KiB
06 · 大屏端设计
所属：运动会积分榜系统 · 开发文档集 版本：v0.1（讨论稿） · 2026-09-09 上游：README · 相关：05-接口与实时协议、10-部署与现场方案 ⚠️ 视觉方案尚未定稿（见 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() 适配任意窗口：
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）
- 同一套大屏页在手机上自适应（窄屏改为单列卡片）。
- 只读，不做交互编辑。
附录 · 设计令牌（占位）
: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;
}