前端
两个独立的 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 的版本和来源地址（这些只在管理端）。
- 时间范围（15 分钟 … 7 天）只在线路详情页；总览是卡片，Agent 主机状态通过 SSE（
/api/public/live?topics=hosts）实时更新，其余每 10 秒刷新。 - 生产部署时，把
display/dist放在站点根、admin/dist放在/admin/下（同源，Cookie 和 CSRF 才能工作）。