106 lines
3.8 KiB
Markdown
106 lines
3.8 KiB
Markdown
# 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;
|
||
}
|
||
```
|