1 Fork 0

Files

T

justme d1be70cda2 feat(web): 线路详情页的时间轴、EWMA 平滑和加载进度

- 先选日期，再在连续 48 小时（或 24 小时）的丢包缩略图上拖选区；选区可以跨零点，
  点轴或刻度时离得近的端点贴过去，悬停预览会动的端点；没有数据的时段画成斜纹
- 刻度下方的时长快捷档：30 分钟、1 小时、3 小时、6 小时、12 小时、整天
- 指标卡片平铺，丢包等标明 UDP/TCP；图表按 UDP、TCP、评分分组
- 图表数据刷新时原地更新（不再整张重建），毫秒到 1 秒以上显示成秒
- EWMA 平滑开关（关/轻/中/重），原始数据以淡线垫底
- 数据加载时卡片上显示进度条和占位；useQuery 区分定时刷新和用户触发的加载
- 前端可以在页面里指定后端地址和令牌（配合后端 Monitor__CorsOrigins）

2026-10-06 14:48:58 +08:00

4.5 KiB

Raw Blame History

前端

两个独立的 Vite + React + TypeScript 工程，共享 shared/（主题令牌、API 客户端与类型、图表、通用组件）。

目录	内容	访问
`display/`	展示端：Agent 卡片总览（线路质量 + 主机资源占用，实时刷新）、线路详情（延迟、丢包、抖动、TCP、UDP、评分、历史）、线路对比	`/`，匿名可看；站点没有公开时提示登录
`admin/`	管理端：Agent（添加、审批、启停、接管、删除、加入令牌）、Probe（创建、轮换密钥、吊销、删除、连接）、任务、按需测试、系统（设置、API 令牌、用户、事件、原始数据、分析）	`/admin/`，要登录
`shared/`	`theme/`（「纸墨」主题令牌和基础样式）、`api/`（客户端、从 OpenAPI 生成的类型）、`charts/`（uPlot 封装）、`ui/`（通用组件）

npm install                    # 在 web/ 下一次装好两个工程的依赖（npm workspaces）
npm run dev                                            # 两个一起启动
BACKEND_URL=https://mo.oeo.one npm run dev:display     # http://127.0.0.1:5173/
BACKEND_URL=https://mo.oeo.one npm run dev:admin       # http://127.0.0.1:5174/admin/
# 或者把 .env.example 复制成 .env.local，写好 BACKEND_URL，之后直接 npm run dev:display
npm run build                  # 各自输出到 display/dist 和 admin/dist
npm run gen:api                # 后端接口变了之后，重新生成 shared/api/schema.ts
npm run lint:css               # 颜色只能写在 shared/theme/tokens.css，其他样式一律引用令牌

连别的后端（本机跑前端、连线上的）：点页面右上角（管理端登录页右下角）的插头图标，填后端地址和 API 令牌（展示端：站点私有时需要只读令牌；管理端：admin 范围的令牌），保存后刷新。设置存在浏览器里；跨域时不带 Cookie，所以后端要设 Monitor__CorsOrigins=<这个前端的来源>（如 http://localhost:5173）。也可以用构建时的 VITE_API_BASE 给默认地址。

约定：

展示端能拿到的主机数据只有汇总的数字（CPU、内存、磁盘占用，网卡累计流量与瞬时网速，运行时长），没有 CPU 型号、主机名、网卡名，也没有任何 IP——后端的公开接口不返回它们，Agent 也根本不采集。展示端不显示 Probe 的版本和来源地址（这些只在管理端）。
线路详情页：先选哪一天（前一天 / 后一天 / 日期选择，URL 的 day=YYYY-MM-DD），下面是这一天的丢包缩略图，上面有可拖动的选区（拖空白处新建、拖两边调长短、拖中间平移；URL 的 at=起_止，单位是从选中那天 0 点算起的分钟，可以是负数或超过 1440）。缩略图的刻度缺省是 48 小时（连续两天，选区可以跨零点，比如晚高峰 20:00 到凌晨 02:00），也可以切成 24 小时（只看一天；URL 的 span=24，选区跨零点时自动用 48 小时）。刻度下方是选区长度：30 分钟、1 小时、3 小时、6 小时、12 小时、整天，点一下把选区设成这么长——今天且选区到现在为止的，继续看「最近一段」（实时刷新），否则保持选区的起点往后取。刻度上每小时一根短线，48 小时刻度每 3 小时标一个钟点（24 小时刻度每 2 小时），零点标日期；鼠标移到缩略图上会标出那个位置的时间；点一下空白处或者刻度下面的钟点：离那里近的端点（左端或右端）贴过去，另一个端点不动。鼠标停在轴上或刻度上时，会动的那个端点变色，它到目标位置之间染色：扩大是橙色，收缩是灰色。往日默认是整天；「整天」是本地时区的自然日。时间的文字不写「次日」，跨零点两头都写日期（2026年10月5日 21:06 – 2026年10月6日 02:31）。
图表上方有 EWMA 平滑开关（关、轻 α=0.3、中 α=0.1、重 α=0.03；URL 的 ewma=low|mid|high）：开了之后每条线画成指数加权移动平均，原始数据以淡线垫在后面，缺口处断开；只在浏览器里算，不影响汇总的指标数字。
图表在数据刷新（轮询、实时）时原地更新，不重建；拖选区时只在本地更新，松手才取数。
总览是卡片，Agent 主机状态通过 SSE（/api/public/live?topics=hosts）实时更新，其余每 10 秒刷新。
生产部署时，把 display/dist 放在站点根、admin/dist 放在 /admin/ 下（同源，Cookie 和 CSRF 才能工作）。

4.5 KiB Raw Blame History Unescape Escape

前端

4.5 KiB

Raw Blame History