Noah
486676db29
* feat(api): GET /v1/live-rates 录制中房间的每秒写盘速率瘦端点
/v1/streamers 每次查全表、拼齐全部字段，10 s 一次的节奏不适合调快；码率曲线需要 1 s 粒度，
新加一个只读内存的瘦端点：扫一遍 worker，对每个 Working 的房间读一次阶段一 RateMeter 的窗口均值，
返回 [{id, bytes_per_sec, ts}]。与 /v1/streamers 的 live_bytes_per_sec 同源同值；不新增采样任务、
服务端不存历史、Cache-Control: no-store；注册在 router() 内，--auth 时同一道登录校验。
Part of #1708
* feat(ui): 实时码率数据层与 uPlot 折线组件
- app/lib/use-live-rates.ts：页面内唯一的一份采样源。有订阅者时每秒拉一次 /v1/live-rates，
全部卸载 / 标签页隐藏即停；历史放模块级环形缓冲（每房间最近 3 分钟），组件卸载不清，
切走再切回曲线还在；帧里没有的房间补 null 成断口。useSyncExternalStore 订阅，无新帧不重渲染。
- app/ui/RateChart.tsx：uPlot 折线，full（带时间轴 / Y 轴，单位按窗口最大值自动选 KB/s / MB/s，
Y 从 0 起）与 sparkline（无坐标轴，hover 读数）两种形态；实例在 effect 里建 / 销毁，渲染期不碰 ref，
StrictMode 双次 effect 不留多余 canvas；配色每次绘制时读 Semi CSS 变量，深浅色切换不重建。
无采样 / 未录制只显示「—」占位，不画空图。
- app/ui/LiveRateChart.tsx：next/dynamic 懒加载入口 + 当前 / 峰值 / 均值统计条；
uPlot 与其 CSS 打进独立 chunk（约 23 KB gzip），首屏不含。
- 新依赖 uplot ^1.6.32（本 PR 唯一新依赖）。
Part of #1708
* feat(ui): 三处接入码率折线——弹层可折叠折线、卡片与监视器 sparkline
- 卡片弹层底部新增「写盘速率 · 最近 3 分钟」可折叠区（默认展开，折叠态记 localStorage
biliup.preview.rateChart）：标题行带当前 / 峰值 / 均值，展开时才轮询与加载 uPlot。
- 控制台 / 直播管理页录制中卡片：名称行下一条 60 s sparkline（28 px，hover 显示时刻与数值）。
- 历史记录页「实时监视」：工具栏新增「码率图」开关（默认关，记 biliup.monitor.rateChart），
开启后每路小窗下方一条 60 s sparkline；所有小窗共用同一次每秒请求。
Part of #1708
* style(api): live_rates 测试按 rustfmt 换行
* fix(ui): sparkline 的 hover 读数浮在折线上方，不再被容器裁掉
* docs(readme): 功能列表补充直播预览（封面 / 播放器 / 弹幕 / 码率曲线）
#1708 三个阶段至此完整，在 README 的功能列表里加一条说明。
Closes #1708
* feat(api): GET /v1/ws/live-rates 用 WebSocket 每秒推送码率帧
review 1（ForgQi）：复用现有的 WebSocket 机制推送而不是每秒轮询。WebSocket 不占浏览器对同一主机
HTTP/1.1 的六个并发连接（监视器 4 路视频 + 1 条弹幕 SSE 已用掉五个，这正是当初不用 SSE 的原因），
与日志页 /v1/ws/logs 同款：Origin 与 Host 同源校验、进程内连接数上限（16）、Ping 回 Pong、Close 即止。
连上立刻发一帧，之后每秒一帧，形状与 GET /v1/live-rates 相同；HTTP 版保留给 WebSocket 连不上时回退与 curl 核对。
两个路由都在 router() 内，--auth 下同一道登录校验。单测用手写的最小 WebSocket 客户端走完握手 + 两帧，不引新依赖。
* feat(ui): 码率数据改走 WebSocket；卡片 sparkline 加开关并叠在封面上
review 1（ForgQi）：
- use-live-rates.ts 首选一条 WebSocket /v1/ws/live-rates（服务端每秒推一帧，所有图表共用），
一帧都没收到就断开（反代没放行 upgrade、401）时回退到每秒 GET /v1/live-rates 轮询；中途断开退避重连，
标签页隐藏时断开、可见时重连；快照新增 transport: 'ws' | 'poll'。
- 控制台「进行中」区块头与直播管理页工具栏新增「码率图」开关（默认关，记 localStorage biliup.cards.rateChart，
两页共用）；开启后录制中卡片的 sparkline 叠在封面底部（深色渐变垫底、读数条在图区内；点击仍冒泡到封面打开预览），
封面没有 / 加载失败时退到名称行下方。
* test(api): 码率 WebSocket 连接上限测试改用独立信号量
CI 上与同一二进制里并发跑的 WebSocket 推送测试争用进程级信号量（后者占着一个许可），
上限测试拿不满 16 个而失败；改为像 ws.rs 的日志连接测试那样传入独立的 Semaphore。
208 lines
4.1 KiB
SCSS
208 lines
4.1 KiB
SCSS
.page {
|
|
padding: 24px 36px 48px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ===== 顶栏 ===== */
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 22px;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.docLink {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--semi-color-text-1);
|
|
text-decoration: none;
|
|
padding: 6px 10px;
|
|
border-radius: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.docLink:hover {
|
|
background: var(--semi-color-fill-0);
|
|
color: var(--semi-color-text-0);
|
|
}
|
|
.version {
|
|
font-size: 12px;
|
|
color: var(--semi-color-text-2);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.statusPill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 7px 14px;
|
|
border-radius: 999px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.statusPill.online {
|
|
background: rgba(var(--semi-green-4), 0.15);
|
|
color: rgb(var(--semi-green-5));
|
|
}
|
|
.statusPill.offline {
|
|
background: rgba(var(--semi-red-4), 0.15);
|
|
color: rgb(var(--semi-red-5));
|
|
}
|
|
.dot.online {
|
|
background: rgb(var(--semi-green-5));
|
|
box-shadow: 0 0 0 4px rgba(var(--semi-green-4), 0.18);
|
|
}
|
|
.dot.offline {
|
|
background: rgb(var(--semi-red-5));
|
|
box-shadow: 0 0 0 4px rgba(var(--semi-red-4), 0.18);
|
|
}
|
|
|
|
/* ===== 概览条 ===== */
|
|
.overview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 22px;
|
|
align-items: center;
|
|
margin-bottom: 26px;
|
|
padding: 14px 20px;
|
|
background: var(--semi-color-bg-1);
|
|
border: 1px solid var(--semi-color-fill-2);
|
|
border-radius: 12px;
|
|
box-shadow: 0 1px 2px rgba(var(--semi-grey-9), 0.04), 0 2px 6px rgba(var(--semi-grey-9), 0.03);
|
|
}
|
|
.ovItem {
|
|
font-size: 13px;
|
|
color: var(--semi-color-text-2);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.ovItem b {
|
|
color: var(--semi-color-text-0);
|
|
font-size: 15px;
|
|
font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.ovDot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
.ovDot.rec {
|
|
background: rgb(var(--semi-green-5));
|
|
animation: pulse 1.4s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(var(--semi-green-4), 0.5);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 6px rgba(var(--semi-green-4), 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(var(--semi-green-4), 0);
|
|
}
|
|
}
|
|
|
|
/* ===== 区块 ===== */
|
|
.section {
|
|
margin-bottom: 28px;
|
|
}
|
|
.secHead {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
margin: 0 0 12px;
|
|
}
|
|
.secLabel {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--semi-color-text-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.6px;
|
|
}
|
|
.secCount {
|
|
font-weight: 600;
|
|
margin-left: 6px;
|
|
color: var(--semi-color-text-1);
|
|
}
|
|
/* 区块头右侧：码率图开关 + 「直播管理 →」 */
|
|
.secTools {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.secLink {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: rgb(var(--semi-blue-4));
|
|
text-decoration: none;
|
|
}
|
|
.secLink:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.secNote {
|
|
font-size: 12px;
|
|
color: var(--semi-color-text-2);
|
|
}
|
|
|
|
/* ===== 卡片网格(卡片本体样式在 ui/streamer-card.module.scss) ===== */
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
|
|
gap: 12px;
|
|
align-items: start;
|
|
}
|
|
|
|
.timelineCard {
|
|
background: var(--semi-color-bg-1);
|
|
border: 1px solid var(--semi-color-fill-2);
|
|
border-radius: 12px;
|
|
padding: 18px 20px;
|
|
box-shadow: 0 1px 2px rgba(var(--semi-grey-9), 0.04), 0 2px 6px rgba(var(--semi-grey-9), 0.03);
|
|
}
|
|
|
|
/* ===== 错误 / 警告 ===== */
|
|
.errorBox {
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
.warnBox {
|
|
margin-bottom: 20px;
|
|
padding: 12px 16px;
|
|
border-radius: 10px;
|
|
background: rgba(var(--semi-orange-4), 0.12);
|
|
color: rgb(var(--semi-orange-5));
|
|
font-size: 13px;
|
|
border: 1px solid rgba(var(--semi-orange-4), 0.32);
|
|
}
|
|
|
|
/* ===== 响应式 ===== */
|
|
@media (max-width: 880px) {
|
|
.page {
|
|
padding: 20px 24px 36px;
|
|
}
|
|
}
|
|
@media (max-width: 520px) {
|
|
.page {
|
|
padding: 16px 16px 28px;
|
|
}
|
|
.grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.overview {
|
|
gap: 14px;
|
|
padding: 12px 16px;
|
|
}
|
|
}
|