Compare commits
18
Commits
3db3ce570a
..
master
| Author | SHA1 | Date | |
|---|---|---|---|
 tamakyi
|
bf27f7b385 | ||
|
tamakyi
|
20b499c350 | ||
|
tamakyi
|
a237d7ba86 | ||
|
tamakyi
|
6b0a23c38e | ||
|
tamakyi
|
f345626840 | ||
|
tamakyi
|
d2aa0a1163 | ||
|
tamakyi
|
752fad412b | ||
|
tamakyi
|
a3a683ff0e | ||
|
tamakyi
|
25b8b97970 | ||
|
tamakyi
|
4bb5296525 | ||
|
tamakyi
|
bdaa31f10c | ||
|
tamakyi
|
ea846dee31 | ||
|
tamakyi
|
a7408e2bb5 | ||
|
tamakyi
|
6f9a2d33ce | ||
|
tamakyi
|
fa7c708878 | ||
|
tamakyi
|
f0e5d91171 | ||
|
tamakyi
|
5b417c84f4 | ||
|
tamakyi
|
d88ba56156 |
@@ -9,3 +9,5 @@ local.monitors.json
|
||||
backups/
|
||||
# 助手的工作记录（含本机信息与运维笔记，默认不入库；如需版本化可删除此行）
|
||||
.workbuddy/
|
||||
# 运行期私有数据：通知去抖状态与事件时间线
|
||||
data/
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
- *接入*：把 UptimeRobot 已有的监控结果当数据源拉进来，与自建探测并列展示（异地视角），状态、延迟、90 天可用率、心率图全部映射自 UR 官方数据；UR 读取失败时保留上次数据，绝不把服务误判为离线
|
||||
- *输出*：提供 `/api/v2/getMonitors`，字段与状态码编码对齐 UptimeRobot v2，既有脚本/看板可直接消费
|
||||
- **滥用防护与信息泄露控制**：刷新接口仅内网/回环可触发、按来源冷却（429 + Retry-After）、可整体关闭；支持 `hideTargets` / `redactDetails` 与 `local.monitors.json` 私有配置分层，公开配置里可以只有服务名 —— 详见 [docs/SECURITY.md](docs/SECURITY.md)
|
||||
- **主题：砂狼白子**（默认启用，可一键切回默认主题）：简约风插画形象（右下角立绘 + 头像 logo/favicon，宽屏不遮挡表格）、青色光环水印、天蓝围巾飘带顶栏、倒十字发饰、公路车轮加载态。素材来源见 [主题](#主题砂狼白子)
|
||||
- **三种数据源自动解析**：边缘 API（实时）→ 静态快照 → 浏览器直连，也可用 `?source=` 强制指定
|
||||
|
||||
## 快速开始（本地）
|
||||
@@ -44,6 +45,12 @@ node prober/node/index.js --once --demo
|
||||
|
||||
# 自定义快照输出路径（--demo 会覆盖真实快照，需要保留真实数据时用它写到别处）
|
||||
node prober/node/index.js --once --demo --out=dist/status.json
|
||||
|
||||
# 通知渠道自检：给每个启用的渠道发一条测试消息（配好 SMTP / MeoW 后先跑这个）
|
||||
node prober/node/index.js --test-notify
|
||||
|
||||
# 通知状态与事件时间线的存放目录（默认 ./data，也可用环境变量 SHIROKO_DATA_DIR）
|
||||
node prober/node/index.js --data-dir=/var/lib/shiroko-monitor
|
||||
```
|
||||
|
||||
启动后打开 <http://localhost:8787/> 即可看到面板。无需安装任何依赖。
|
||||
@@ -60,11 +67,17 @@ shiroko-monitor/
|
||||
│ ├── monitors.json # ★ 监控目标配置（改这里）
|
||||
│ ├── status.json # 探针输出的状态快照（面板读取）
|
||||
│ └── assets/
|
||||
│ ├── style.css # 浅色主题 + 暗色自适应
|
||||
│ ├── app.js # 数据源解析 / 渲染 / 浏览器直连探测
|
||||
│ └── favicon.svg
|
||||
│ ├── style.css # 基础样式（浅色 + 暗色自适应）
|
||||
│ ├── theme-shiroko.css # 砂狼白子主题（仅在 body[data-theme=shiroko] 下生效）
|
||||
│ ├── shiroko-figure.webp # 简约风立绘（AI 生成后抠底，见「主题」章节）
|
||||
│ ├── shiroko-icon.webp # 简约风半身头像（同上）
|
||||
│ ├── favicon-shiroko.png # 白子主题图标（由头像生成）
|
||||
│ ├── shiroko-bike.webp # 简约风公路车插画（AI 生成后抠底）
|
||||
│ ├── deco-scarf.svg # 自绘：天蓝围巾飘带
|
||||
│ ├── app.js # 数据源解析 / 渲染 / 浏览器直连探测 / 主题切换
|
||||
│ └── favicon.svg # 默认主题图标
|
||||
├── prober/node/ # Node 探针（本地 / CI 用）
|
||||
│ ├── index.js # 巡检循环 + 静态服务器 + /api/* + /api/v2/getMonitors + --once/--demo/--out/--config
|
||||
│ ├── index.js # 巡检循环 + 静态服务器 + /api/* + /api/v2/getMonitors + --once/--demo/--out/--config/--test-notify
|
||||
│ └── lib/
|
||||
│ ├── http-probe.js # HTTP 探测（fetch，redirect: manual）
|
||||
│ ├── tcp-probe.js # TCP 探测（net.connect）
|
||||
@@ -74,7 +87,10 @@ shiroko-monitor/
|
||||
│ ├── verify.cjs # 热重载 / 数据一致性 / 刷新语义 / 面板渲染
|
||||
│ ├── verify-views.cjs # 视图渲染、切换持久化与数据源过滤
|
||||
│ ├── verify-security.cjs # banner 探测 / 脱敏 / 私有分层 / 刷新限流
|
||||
│ └── verify-uptimerobot.cjs # UR 映射单测 / 兼容接口 / 失败路径 / 真实 Key 冒烟
|
||||
│ ├── verify-uptimerobot.cjs # UR 映射单测 / 兼容接口 / 失败路径 / 真实 Key 冒烟
|
||||
│ ├── prepare-artwork.py # 从 assets-src/ 原图生成透明素材（边界 + 封闭区域两步抠图）
|
||||
│ └── verify-layout.cjs # 布局回归：极端内容 × 13 视口 × 2 视图，断言零横向滚动
|
||||
├── assets-src/ # 插画原始素材（AI 生成的白底原图，供重新处理）
|
||||
├── local.monitors.json # 私有配置（不入库）：真实地址、API Key
|
||||
├── edge/cloudflare/ # Cloudflare Workers 边缘探针
|
||||
│ ├── worker.js # cron 探针 + KV 存储 + /api/* + 静态伺服
|
||||
@@ -98,7 +114,11 @@ shiroko-monitor/
|
||||
"title": "Shiroko Monitor", // 面板标题
|
||||
"description": "轻量级服务监控面板",
|
||||
"view": "table", // 默认视图：table | cards
|
||||
"dataFilter": "both", // both | config | uptimerobot（详见「面板形态与数据源」）
|
||||
"theme": "shiroko", // shiroko（砂狼白子）| default
|
||||
"artwork": "", // 立绘图片路径（相对 public/），留空则不显示
|
||||
"decoOpacity": 0.78, // 人物/单车装饰的全局透明度（0~1，一个值同时作用于两者）
|
||||
"dataFilter": "both", // 展示口径：both | config | uptimerobot（详见「面板形态与数据源」）
|
||||
"probeScope": "all", // 探测范围：all | config | uptimerobot；不填则**跟随 dataFilter**
|
||||
"refreshInterval": 30, // 面板检查数据的最大间隔（秒，最小 5）；实际对齐服务端更新节奏
|
||||
"dataSource": "auto", // auto | api | static | browser
|
||||
"allowRefresh": true, // 是否允许触发强制探测（公网部署建议 false；详见 docs/SECURITY.md）
|
||||
@@ -106,6 +126,14 @@ shiroko-monitor/
|
||||
"refreshCooldownSec": 5, // 每个来源的触发冷却（秒）
|
||||
"hideTargets": false, // true = 面板不渲染任何地址（对外发布用）
|
||||
"redactDetails": false, // true = 快照 detail 只保留「正常/异常」
|
||||
"notify": { // 通知：故障/恢复/证书到期（SMTP 密码与 MeoW 昵称请放 local.monitors.json）
|
||||
"enabled": false,
|
||||
"failureThreshold": 2,
|
||||
"quietHours": "",
|
||||
"channels": { "email": { "enabled": false }, "meow": { "enabled": false } }
|
||||
},
|
||||
"tls": { "enabled": true, "checkIntervalSec": 21600, "alertDays": [14, 7, 3] },
|
||||
"maintenance": [], // 维护窗口：[{ from, to, id?, note? }]
|
||||
"uptimeRobot": { // UptimeRobot 只读数据源（Key 建议放 local.monitors.json）
|
||||
"enabled": false,
|
||||
"apiKey": "",
|
||||
@@ -253,6 +281,8 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
|
||||
指定方式（优先级从高到低）：URL 参数 `?view=table|cards` → 浏览器上次选择（localStorage）→ `settings.view` → 表格。
|
||||
|
||||
**移动端与窄窗口**：视口窄于 **1024px**（表格含心率图与可用率条，实测最小舒适宽度约 1010px）且用户没有显式选择过视图时，**自动使用卡片**；横竖屏切换时重算，显式选择（`?view=` 或点过切换器）始终优先。顶栏在 ≤820px 改为「标题 / 统计 / 控件」三行，立绘与固定装饰自动撤掉。
|
||||
|
||||
### 数据源过滤
|
||||
|
||||
| 值 | 含义 |
|
||||
@@ -284,6 +314,48 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
|
||||
效果：无论你什么时候打开页面，倒计时都显示「距服务端下一次更新还有多久」——刚更新完打开是 300s，过了 4 分钟打开就只剩 60s。静态快照与浏览器直连模式没有可对齐的服务端节奏，仍按 `refreshInterval` 轮询。
|
||||
|
||||
## 主题（砂狼白子）
|
||||
|
||||
面板名称叫 shiroko-monitor，主题自然取了《蔚蓝档案》的**砂狼白子**：她的光环、围巾、狼耳与配色都被做进了界面。人物形象用的是**简约风插画**（扁平配色、无阴影，见下），不是官方立绘。
|
||||
|
||||
### 主题里的元素
|
||||
|
||||
| 位置 | 元素 | 取自设定 |
|
||||
| --- | --- | --- |
|
||||
| 左上 logo / 浏览器图标 | **简约风半身头像**（光环 + 狼耳 + 围巾）+ 青色光环环（呼吸式外扩动画） | 生成插画的半身裁切 |
|
||||
| 右下角 | **简约风全身立绘**（透明底，窄身设计：实测 1280 / 1440 / 1920 下都不遮挡表格，页面也无横向滚动）；全局半透明（`settings.decoOpacity`，默认 0.78）+ 上下渐隐，融入背景 | 生成插画 |
|
||||
| 顶栏底边 | **天蓝色围巾飘带**：波浪形状 + 5 处褶皱纹路（自绘） | 天蓝色围巾是星野送给她的信物 |
|
||||
| 页脚下方 | **光环水印**（自绘：倾斜椭圆环 + 四方位带圆头的短杆） | 白子的光环是倾斜的椭圆环，四个方位各有一条带圆头的短杆，整体形似全息瞄准镜准星 |
|
||||
| 状态点 | **迷你光环**（外圈 + 中心点，在线时缓慢脉冲外扩） | 光环是基沃托斯学生的标志 |
|
||||
| 分组标题 | **青色倒十字发饰**（旋转 45°，自绘） | 她左侧刘海上别的青色十字发夹 |
|
||||
| 刷新按钮加载态 | **公路车轮**（轮圈 + 辐条 + 花鼓）旋转 | 她最爱的公路车（Bianchi ARIA 原型） |
|
||||
| 左下角 | 公路车插画（简约扁平风，与人物同一套视觉语言；与人物共用同一个全局透明度 `decoOpacity` + 两端渐隐） | 她最爱的公路车（Bianchi ARIA 原型） |
|
||||
| 配色 | 天蓝 / 青 + 藏蓝 + 灰白；「正常」色改为青绿（`#12b0a2`） | 阿拜多斯藏蓝校服 + 天蓝围巾 + 灰白发色 |
|
||||
|
||||
左下公路车、页脚光环、右下立绘构成页脚下方的一条装饰带，三者互不遮挡。
|
||||
|
||||
### 素材来源
|
||||
|
||||
| 类别 | 内容 | 来源 |
|
||||
| --- | --- | --- |
|
||||
| **插画（人物形象 + 座驾）** | `shiroko-figure.webp`（249×560）、`shiroko-icon.webp`（180×180）、`favicon-shiroko.png`（64×64）、`shiroko-bike.webp`（341×200） | **AI 生成**：按白子的设定要素（灰发狼耳 / 倾斜椭圆光环 / 天蓝围巾 / 藏蓝校服 / 公路车）描述生成，再用 Pillow 抠掉白底转为透明。**不是**官方美术素材，可自由替换或商用自行判断 |
|
||||
| 自绘装饰（SVG/CSS） | 围巾飘带 `deco-scarf.svg`、光环水印、迷你光环状态点、倒十字图标、车轮加载图标 | 本仓库原创，按公开设定还原 |
|
||||
| 设定资料（光环形状、发饰、围巾、配色、车型） | 设计依据 | [萌娘百科 · 砂狼白子](https://mzh.moegirl.org.cn/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90)、[Blue Archive Wiki](https://bluearchive.fandom.com/zh/wiki/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90)、[百度百科](https://baike.baidu.com/item/%E7%A0%82%E7%8B%BC%E7%99%BD%E5%AD%90/62839164) |
|
||||
| 曾用素材（已移除） | 最早一版用过官方立绘与头像，为改成简约形象已从仓库删除 | [SchaleDB](https://schaledb.com)：`images/student/portrait/10010.webp`、`images/student/icon/10010.webp`（Id `10010` = 砂狼白子），版权归 NEXON Games / Yostar；想换回官方图可再从该地址取 |
|
||||
|
||||
蔚蓝档案 / Blue Archive © NEXON Games · Yostar —— 角色与设定版权归原作者所有，本主题是个人自用面板的风格致敬。
|
||||
|
||||
### 切换与配置
|
||||
|
||||
```jsonc
|
||||
"theme": "shiroko", // shiroko | default（默认主题）；也可用地址栏 ?theme=default 临时覆盖
|
||||
"artwork": "assets/shiroko-figure.webp" // 立绘图片路径（相对 public/），留空则不显示
|
||||
```
|
||||
|
||||
优先级：`?theme=` → 浏览器上次选择（localStorage）→ `settings.theme`。顶栏右侧的光环图标按钮可一键切换。切回默认主题后，立绘、光环、斜纹、围巾飘带、公路车全部消失，回到最初的简洁样式。
|
||||
|
||||
**换成你自己的图**：把图片放进 `public/assets/`，再把 `artwork` 指向它即可（透明底 PNG/WebP 效果最好）。文件不存在时静默不显示，不会出现破图。
|
||||
|
||||
## 90 天可用率
|
||||
|
||||
探针每完成一次探测，就把它计入「当日分桶」：`monitors.<id>.daily["YYYY-MM-DD"] = { total, up }`，只保留最近 90 天（超出自动淘汰）。面板据此渲染 90 格色条与百分比。
|
||||
@@ -295,6 +367,196 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
- **浏览器直连模式**：不记录历史，色条显示灰色、「可用率数据积累中」——需要可用率请使用 Node 探针或边缘 Worker
|
||||
- **`--demo`** 会生成 90 天演示分桶（含绿/橙/红各档），仅用于界面预览；若不想覆盖真实快照，用 `--out=<path>` 写到别处
|
||||
|
||||
## 通知、证书与事件
|
||||
|
||||
### 通知（邮件 + MeoW）
|
||||
|
||||
面板只在你打开时展示状态，**通知**让故障主动找你。支持两个渠道：**邮件**（自写 SMTP 客户端，零依赖）与 **MeoW 推送**（按 [官方文档](https://www.chuckfang.com/MeoW/api_doc.html) 实现）。
|
||||
|
||||
```jsonc
|
||||
"notify": {
|
||||
"enabled": true,
|
||||
"failureThreshold": 2, // 连续失败 N 次才告警（去抖，默认 2；1 = 立即）
|
||||
"recoveryNotify": true, // 恢复时也发一条
|
||||
"quietHours": "23:00-07:00", // 静默时段（本地时间，支持跨零点），期间只记录不发送；留空全天
|
||||
"channels": {
|
||||
"email": {
|
||||
"enabled": true,
|
||||
"host": "smtp.example.com", "port": 465, // 465 隐式 TLS；587/25 自动 STARTTLS
|
||||
"user": "[email protected]", "pass": "密码",
|
||||
"from": "[email protected]", "to": ["[email protected]"],
|
||||
"allowInsecure": false // 服务器不支持 STARTTLS 时是否允许明文（默认拒绝）
|
||||
},
|
||||
"meow": {
|
||||
"enabled": true,
|
||||
"nickname": "你的昵称", // MeoW 以昵称寻址、无需 token，因此昵称等同密钥
|
||||
"baseUrl": "https://api.chuckfang.com",
|
||||
"msgType": "text" // text | html（html 可另配 htmlHeight）
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
行为要点：
|
||||
|
||||
- **去抖**：连续失败达到阈值才发「故障」；恢复时发「恢复」；同一轮多个目标变化会合并成一条，不刷屏
|
||||
- **重启不重复**：去抖状态持久化在 `data/notify-state.json`（私有目录，已 gitignore），重启/单轮模式都不重发
|
||||
- **静默时段**：支持 `23:00-07:00` 这类跨零点写法；静默期内照常记录事件，只是不发送
|
||||
- **MeoW 限流**：客户端本地也做限流（3 秒 1 条 / 15 每分钟 / 60 每小时），替你挡掉一部分官方 429；429/404/403 都会转成可读的错误原因
|
||||
- **CI 注意**：MeoW 官方明确不建议用多人共享的出口 IP（GitHub Actions 即属此类），CI 场景建议只开邮件渠道
|
||||
- **自检**：`node prober/node/index.js --test-notify` 给每个启用渠道发一条测试消息，确认配置可用
|
||||
|
||||
> SMTP 密码与 MeoW 昵称属于私密信息，请放在 `local.monitors.json`（已 gitignore），不要写进公开的 `monitors.json`。
|
||||
|
||||
### TLS 证书监控
|
||||
|
||||
对 `https://` 目标，探针额外做一次 TLS 握手读取证书有效期（默认 6 小时一次）：
|
||||
|
||||
- 面板在名称旁显示徽标：剩余 **≤14 天**黄色、**≤7 天**红色，悬停可见到期日与签发者
|
||||
- 剩余 ≤14 / 7 / 3 天时按阈值告警；同一张证书每个阈值只发一次，换证书后重新计算；**已过期的证书只报最严重的一档**
|
||||
- 单个目标不需要可设 `"tls": false`
|
||||
|
||||
```jsonc
|
||||
"tls": { "enabled": true, "checkIntervalSec": 21600, "alertDays": [14, 7, 3] }
|
||||
```
|
||||
|
||||
### 维护窗口
|
||||
|
||||
计划重启/迁移期间，不想污染可用率统计、也不想被告警轰炸：
|
||||
|
||||
```jsonc
|
||||
"maintenance": [
|
||||
{ "from": "2026-10-14T02:00", "to": "2026-10-14T04:00", "id": "box", "note": "升级迁移" }
|
||||
]
|
||||
```
|
||||
|
||||
- `id` 可省略（对所有目标生效），也支持写成数组
|
||||
- 窗口内：探测照常进行，但**不计入当日可用率**、**不发告警**，面板显示「维护中」徽标；事件时间线照常记录并带 `maintenance: true`
|
||||
|
||||
### 事件时间线
|
||||
|
||||
每次状态翻转（故障 / 恢复 / 证书阈值）都会追加到 `data/events.json`（私有目录，保留最近 500 条），并通过 `GET /api/events` 读取。快照里也会带上最近 20 条供面板使用；`redactDetails` 开启时，快照内事件只保留类型与时间。
|
||||
|
||||
**面板展示**：监控列表下方有一个「最近事件」区块（最多 20 条），每行显示 `时间 / 类型 / 目标 / 详情`；维护窗口内的事件会带「维护」标记（表示未计入可用率、未发告警）。无事件时区块自动隐藏。
|
||||
|
||||
### 响应时间趋势
|
||||
|
||||
当日分桶在 `{ total, up }` 之外还累计 `latSum / latCount / latMax`（仅在线样本），探针据此在快照里给出 `lat: { avg, max, days: [{ key, avg }] }`：
|
||||
|
||||
- **卡片视图**：可用率条下方多一条「90 天日均延迟」细柱图（取最近 30 天），悬停看单日数值，右侧为 90 天均值
|
||||
- **表格视图**：可用率列的 tooltip 里追加 `90 天日均延迟 X ms（峰值 Y ms）`
|
||||
- 数据从探针开始累计当天起累积，跑满 90 天后覆盖全周期；离线样本不计入延迟统计
|
||||
|
||||
## 管理后台（2FA 保护）
|
||||
|
||||
面板右侧没有「编辑」入口：所有会改配置的操作都放在独立的管理后台 `/admin`，**必须绑定并通过两步验证才能进入**。
|
||||
|
||||
### 启用
|
||||
|
||||
```bash
|
||||
# 1. 设置绑定口令（只在首次绑定时需要，用于防止被人抢先绑定自己的验证器）
|
||||
export SHIROKO_ADMIN_SETUP_KEY='换成你自己的长口令'
|
||||
node prober/node/index.js
|
||||
|
||||
# 2. 打开 http://<host>:8787/admin
|
||||
```
|
||||
|
||||
不设置 `SHIROKO_ADMIN_SETUP_KEY` 时绑定入口直接关闭（接口返回 503），管理后台处于「完全不可用」状态。
|
||||
|
||||
### 绑定流程
|
||||
|
||||
1. 输入 `SHIROKO_ADMIN_SETUP_KEY` → 服务端生成一个 20 字节 Base32 密钥
|
||||
2. 用 Google Authenticator / Microsoft Authenticator / 1Password / Aegis 扫码，或手动输入密钥（页面同时提供可复制的 `otpauth://` 链接）
|
||||
3. 输入 App 显示的 6 位验证码完成绑定
|
||||
4. **立刻保存 10 枚恢复码**（只显示这一次），每枚只能用一次，用于手机丢失或验证器清库
|
||||
|
||||
绑定完成后每次进入管理界面都需要重新输入 6 位动态码或一枚恢复码。
|
||||
|
||||
### 管理功能
|
||||
|
||||
| 功能 | 说明 |
|
||||
| --- | --- |
|
||||
| 运行状态 | 监控数 / 在线 / 离线 / 平均延迟 / 90 天可用率，数据更新时间，各数据源目标数与同步状态 |
|
||||
| 探测范围 | `all` / `config` / `uptimerobot`，决定探针真正发请求的范围，改动立即热重载 |
|
||||
| 展示口径 | `all` / `config` / `uptimerobot`，只影响面板展示，与探测范围相互独立 |
|
||||
| 维护窗口 | 新增/删除窗口，可限定单个目标或全部目标；窗口内不计入可用率、不发告警 |
|
||||
| 立即重新探测 | 手动跑一轮探测（复用面板刷新同一条路径） |
|
||||
| 通知自检 | 给每个已启用渠道发一条测试消息 |
|
||||
| 监控目标 | 只读列表（名称 / 分组 / 类型 / 地址 / 间隔） |
|
||||
|
||||
**所有写操作只落 `local.monitors.json`（私有、不入库），绝不改 `public/monitors.json`。**
|
||||
|
||||
### 安全设计
|
||||
|
||||
- **未绑定时管理接口一律 403**，不存在「先跳过 2FA 进管理界面」的路径
|
||||
- 会话 id 为 32 字节随机数，**服务端只存 SHA-256 哈希**；进程重启即清空全部会话
|
||||
- 会话 cookie 为 `HttpOnly; SameSite=Strict`，30 分钟无操作失效，最长 2 小时
|
||||
- 同一时间步的 6 位码**用过即作废**（防截图重放）；恢复码一次性，用后立刻从落盘档案中移除
|
||||
- 登录失败按 IP 计数，连续 5 次失败后指数退避锁定（1m → 2m → 4m …上限 30m）
|
||||
- 只信任 socket 对端地址，**不解析 `X-Forwarded-For`**（可被伪造）
|
||||
- 2FA 档案存 `data/admin-2fa.json`（`data/` 已在 `.gitignore` 中），恢复码只存哈希
|
||||
- 丢失全部验证码时的逃生口：用 `SHIROKO_ADMIN_SETUP_KEY` 重置 2FA（会清空密钥与全部恢复码，需重新绑定）
|
||||
|
||||
> 部署到公网时建议放在 HTTPS 反向代理之后：会话 cookie 未设 `Secure`（纯 HTTP 下设了会导致 cookie 完全不发送），由代理层负责加密传输。
|
||||
|
||||
### 面板上的管理入口（`settings.adminUrl`）
|
||||
|
||||
如果你把管理端放在别的地址（内网 IP、Tailscale、VPS 域名、隧道……随便哪种），可以在管理界面里把这个地址填进**「面板上的管理入口链接」**，公开面板的页脚就会出现一个「管理」按钮指向它。
|
||||
|
||||
- **留空 = 面板不显示任何管理入口**（默认状态，避免在公网面板上暴露管理面的位置）
|
||||
- 地址只接受 `http` / `https`，其它协议（`javascript:` 等）会被拒绝
|
||||
- 写入位置是 `local.monitors.json`（私有层），所以填了之后**只有你自己的面板**会出现这个按钮
|
||||
|
||||
面板本身不关心你怎么暴露管理端 —— 它只负责「你填什么就跳到什么」。
|
||||
|
||||
### 让管理端能被外部访问
|
||||
|
||||
探针**默认只监听 `127.0.0.1`**，外部访问不到。需要时用 `settings.admin.allowRemote` 打开：
|
||||
|
||||
```jsonc
|
||||
// local.monitors.json
|
||||
{ "settings": { "admin": { "allowRemote": true } } }
|
||||
```
|
||||
|
||||
打开后探针监听 `0.0.0.0`，启动日志会就此告警。**怎么把流量送到这个端口由你决定** —— 反向代理、隧道、VPN、直连公网 IP 都行，本项目不做任何假设。
|
||||
|
||||
> ⚠️ 注意：打开后同一端口上的公开面板（`/` 与 `/api/status`）也会跟着对外可达。它们本身是只读的，但目标名称、地址与可用率会一并暴露。如果不希望这样，请在你自己那层（反向代理/隧道）按路径收窄。
|
||||
|
||||
### 面板部署在别处（跨域只读）
|
||||
|
||||
> 完整步骤见 **[docs/DEPLOY-PAGES.md](docs/DEPLOY-PAGES.md)**（GitHub Pages 面板 + 本地探针的部署指南，含常见问题排查）
|
||||
|
||||
面板与探针可以放在两台机器上：面板放 GitHub Pages / Cloudflare（静态托管），探针放你家里或内网的机器上持续探测。两项配置：
|
||||
|
||||
| 配置 | 作用 |
|
||||
| --- | --- |
|
||||
| `settings.dataUrl` | 面板去哪里取数据，例 `https://monitor.example.com`。留空表示与探针同源 |
|
||||
| `settings.corsOrigins` | 允许跨域读取的**页面地址**，逗号分隔的完整 origin，如 `https://you.github.io` |
|
||||
|
||||
两者都在管理界面里填（改完立即生效）。
|
||||
|
||||
**硬限制（务必先看）**：GitHub Pages 强制 HTTPS，而浏览器的**混合内容**策略禁止 HTTPS 页面 `fetch` HTTP 资源 —— 这与 CORS 无关，改设置也没用。**因此 `dataUrl` 必须与面板页面同为 HTTPS**（你自己搭隧道给本地探针套 HTTPS 即可）。
|
||||
|
||||
安全设计：
|
||||
|
||||
- **绝不使用 `Access-Control-Allow-Origin: *`** —— 那等于让任意网站都能读走你的监控数据。默认只放行本机回环地址（`localhost` / `127.0.0.1`，**忽略端口**，因为本地前端常跑在 5173 这类端口）
|
||||
- 白名单里的 origin 必须**精确匹配**，`https://you.github.io.evil.com` 这种前缀伪造会被拒
|
||||
- 回显具体 origin 并带 `Vary: Origin`，避免中间缓存串味
|
||||
- **管理端永不放行跨域**：`/admin` 与 `/api/admin/*` 不带任何 `Access-Control-*` 头，外部页面无法读取也无法写入
|
||||
- 跨域读到的配置同样经过密钥剥离
|
||||
|
||||
### 部署形态与可写能力
|
||||
|
||||
| 部署形态 | 面板可读 | 探测 | 通知/维护窗口/事件 | 管理端（2FA） |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 本地 Node | ✅ | ✅ | ✅ | ✅ |
|
||||
| Cloudflare Workers | ✅ | ✅（含 UptimeRobot 数据源） | ❌ | ❌ 403 |
|
||||
| GitHub Pages / EdgeOne Pages | ✅ | ❌（仅展示 CI 快照） | ❌ | ❌ 不存在 |
|
||||
|
||||
**管理端只存在于「本地 Node」形态。** 边缘环境访问 `/admin` 或 `/api/admin/*` 会得到 403 + 指向文档的提示（而非 404，明确表达「这里不提供写能力」）。
|
||||
|
||||
原因是这些能力依赖本地状态：2FA 档案与会话存在 `data/` 目录与进程内存里，而 Workers 无文件系统、isolate 之间不共享内存（KV 又是最终一致，无法承载「恢复码一次性使用」这类语义）。
|
||||
|
||||
## 部署方案
|
||||
|
||||
| 方案 | 架构 | 数据更新 | 成本 | 适合场景 |
|
||||
@@ -388,6 +650,165 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
- [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」，tooltip 内含服务端更新节奏与快照生成时间
|
||||
- [x] `scripts/verify.cjs` 适配纯外部数据源部署（自动跳过不适用的探测类断言），并新增「倒计时对齐服务端」断言
|
||||
|
||||
### v0.12.1 已实现
|
||||
|
||||
**让边缘部署真正可用 + 管理端远程访问 + 前后端分离**
|
||||
|
||||
起因：核实「管理端在 Cloudflare 上是否有效」时发现一个更要紧的问题 —— Worker **完全没有 UptimeRobot 同步能力**（`runChecks` 的探测目标只有 `config.monitors`）。而实际配置是 `dataFilter: uptimerobot`，也就是说**直接部署到 Worker 面板会是空的**：它探测 8 个本地条目，而真正在监控的 6 个 UR 目标它根本不认识。
|
||||
|
||||
- [x] **`edge/cloudflare/uptimerobot.js`（新增）**：Workers 版 UR 只读数据源，与 `prober/node/lib/uptimerobot.js` 同一套语义（术语、状态映射、ratios 解析、故障原因提取）
|
||||
- [x] **`worker.js` 探测集合扩展**：自建目标 + UR 镜像目标统一纳入一轮探测；UR 目标只拉取不探测，采用其状态并补齐本地 `daily` 分桶
|
||||
- [x] **`probeScope` 与 `dataFilter` 解耦**（与本地探针同语义）：未显式设置 `probeScope` 时跟随 `dataFilter`；`config` 范围下不拉 UR，`uptimerobot` 范围下不探测本地
|
||||
- [x] **同步失败降级**：UR 拉取失败时标记 `sources.uptimerobot.ok = false` 并保留上次数据，**绝不把目标判为离线或从面板消失**
|
||||
- [x] **UR 侧删除的监控自动清理**，避免僵尸条目
|
||||
- [x] 快照新增 `probeScope` 字段；UR 目标带 `meta`（面板据此区分自建/外部）与 `uptimeRatios`（面板算官方可用率）
|
||||
- [x] **`settings.admin.allowRemote`**：探针**默认只监听 `127.0.0.1`**；显式打开才监听全网卡，启动日志就此告警（实测：默认时非环回地址连不上，打开后可达）。**怎么把流量送到这个端口由使用者自己决定**，项目不做任何假设
|
||||
- [x] **`settings.adminUrl`（面板管理入口）**：管理界面里填一个地址，公开面板页脚就出现「管理」按钮指向它；留空则完全不显示（默认，避免在公网面板暴露管理面位置）。只接受 `http`/`https`，`javascript:` 等协议被服务端拒绝
|
||||
- [x] **前后端分离落地**：Worker 侧 `/admin` 与 `/api/admin/*` 显式返回 **403 + 指向文档的提示**（而非默默落到静态资源变成 404），确保边缘侧**没有任何可写面**；管理端只在本地 Node 侧运行
|
||||
- [x] **修掉一个既存的密钥泄露**：`/api/monitors` 无鉴权却回吐合并后的完整配置，**包含私有层的 UptimeRobot API Key**。现在两侧（Node 与 Worker）都对对外响应剥离 `uptimeRobot.apiKey`，保留 `enabled` 等非敏感字段供面板读取；探针内部同步仍用完整配置
|
||||
- [x] **面板配置改为以服务端合并版为准**：原先只读静态 `monitors.json`（公开层），导致管理端写入私有层的设置（如 `adminUrl`）面板看不到。现在启动时额外拉 `/api/monitors` 合并 `settings`；纯静态部署没有该接口时沿用公开配置
|
||||
- [x] 文档：`DEPLOYMENT.md` 补「接入 UptimeRobot 数据源」与「远程访问管理端」，各部署形态对照表加「UptimeRobot 数据源 / 管理端」两行；`SECURITY.md` 补部署形态可写能力对照、配置接口不得泄露密钥、代理层下的限流粒度损失
|
||||
|
||||
**测试**：`verify-worker.cjs` 扩到 40 项（新增 `[E]` 配置接口密钥泄露 4 条）；`verify-security.cjs` 扩到 25 项（新增 `[D2]` 密钥泄露 5 条）。全项目 8 套 314 项全部通过。
|
||||
|
||||
过程中抓到两个真 bug：① UR 同步失败时降级路径引用了不含 `meta` 的旧对象，导致 `name`/`url` 为 `undefined`、UR 目标从面板上消失；② `stats.total` 按 `config.monitors.length` 计数，在 `probeScope=uptimerobot` 时与实际参与的目标数不符。
|
||||
|
||||
**另有一处既存漏洞**（本轮顺带修复）：`/api/monitors` 从引入私有层叠加机制起就无鉴权回吐完整配置，只要在 `local.monitors.json` 里配了 `uptimeRobot.apiKey`，任何访客 `curl /api/monitors` 就能拿到。这个漏洞与本轮改动无关，是之前埋下的。
|
||||
|
||||
> 另有一条测试夹具层面的教训：内存版 KV 必须实现 `get(key, 'json')` 的类型参数（真实 Workers KV 会自动反序列化），否则 `state.monitors` 恒为 undefined —— 表现为「状态永远读不到」，看起来像产品代码坏了。
|
||||
|
||||
### v0.12.0 已实现
|
||||
|
||||
**① 每行绝对等高**（你的要求：不再有「内容长度相当时才等高」）
|
||||
|
||||
- [x] 行高与内容长度**彻底解耦**：新增 `--row-h: 72px` 作为唯一基准，表格结构上就给每一行定死高度
|
||||
- [x] 名称列改为「文本区限两行 + 徽标区固定单行」两段式；文本区用 `.clamp2`（`-webkit-line-clamp: 2` + **固定 `height`**）。这里必须是 `height` 而不是 `max-height`——后者会让短内容缩成一行、长内容撑到两行，反而产生两种行高（实测 66px / 71px 混杂）
|
||||
- [x] 地址列同样限两行；`延迟/结果/最近检测` 改为 `nowrap` + 省略号（这类值本就短）
|
||||
- [x] 分组标题行用 `:not(.group-row)` 排除在数据行规则之外，否则会一并被套上 72px
|
||||
- [x] **事件表与监控表格共用同一个 `--row-h`**，两张表在视觉上也严格对齐（此前事件表是 66px）
|
||||
- [x] 完整值仍可通过悬停 `title` 查看（已加断言：所有会被截断的单元格都必须带 `title`）
|
||||
- [x] **卡片视图**同样等高（grid 拉伸，13 视口 × 250px 全一致）
|
||||
|
||||
**② 管理 WebUI + 2FA 绑定才能进入**
|
||||
|
||||
- [x] 新增 `/admin` 管理后台与 `/api/admin/*` 接口；**未绑定 2FA 时除绑定流程外一律 403**，不存在绕过路径
|
||||
- [x] 零依赖实现 **TOTP（RFC 6238）**：HOTP 动态截断 + Base32 编解码，**用 RFC 4226 与 RFC 6238 官方测试向量验证**（10 + 6 个向量全对）
|
||||
- [x] **内置 QR 码生成器**（byte 模式 / ECC L / 版本 1–10，GF(256) Reed-Solomon + 8 种掩码惩罚评分）。用独立解码器实测：版本 1 与版本 6 的二维码都能读出**逐字节完全一致**的内容
|
||||
- [x] 绑定流程四步：口令 → 生成密钥（扫码/手输/`otpauth` 链接）→ 验证 6 位码 → 展示 10 枚一次性恢复码
|
||||
- [x] 绑定完成后凭本次验证码**直接换取会话**，无需再输一遍
|
||||
- [x] 安全设计：会话 id 32 字节随机数且**服务端只存哈希**；`HttpOnly + SameSite=Strict` cookie；30 分钟空闲 / 2 小时最长；**同一时间步的码用过即作废**（防重放）；恢复码一次性；登录失败按 IP 指数退避锁定（5 次起，1m→2m→…→30m）；**不解析 `X-Forwarded-For`**
|
||||
- [x] 管理功能：运行状态、探测范围、展示口径、维护窗口增删、立即重探、通知自检、目标只读列表、最近事件
|
||||
- [x] **所有写操作只落 `local.monitors.json`（私有、不入库）**，绝不改 `public/monitors.json`（已加断言逐项校验）
|
||||
- [x] 逃生口：用 `SHIROKO_ADMIN_SETUP_KEY` 重置 2FA
|
||||
|
||||
> 过程中抓到并修掉三个真 bug：① **会话 cookie 的 `Path=/admin` 覆盖不到 `/api/admin/*` 接口**，登录返回 200 但紧接着所有操作 401；② 恢复码登录被 `verifyTotp` 的 `invalid-format` 提前挡掉（恢复码是 10 位字母数字，不是 6 位数字）；③ 超大请求体用 `req.destroy()` 硬断连接，客户端只看到 `fetch failed` 而拿不到状态码。
|
||||
|
||||
### v0.11.2 已实现
|
||||
|
||||
**修复你反馈的两个问题**
|
||||
|
||||
- [x] **「狼的评论系统」那一条高度/样式与其他行不一致**：实测在线行 **58px**、离线行 **43px**。根因是**可用率列的 90 格 mini 条**——它是 `inline-flex` 元素，参与行内布局时其基线会把行盒抬高约 15px，于是「当天有可用率数据、条正常渲染」的行比不带条的行高出一截。修复：给单元格内容统一 `vertical-align: middle`、mini 条容器改 flex 布局，现在**所有行等高（实测 43px）**
|
||||
- [x] **「最近事件」改为与表格同一套样式**：不再用独立的「时间线卡片」风格，改为**与监控表格完全同构的表格**（相同的圆角容器、表头样式、行分隔线、hover、状态底色）——故障行淡红、证书行淡琥珀、恢复行不染；类型以小徽标呈现，详情列完整显示
|
||||
- 实现上刻意**不共用 `.monitor-table` 类名**，避免被其他按类名统计/定位的逻辑误算（这一点被测试当场抓到：共用类名时面板条目数被多算 1~8 个）
|
||||
|
||||
> 说明：这一版的行高只在「内容长度相当」时保证一致；名称或地址特别长时允许换行（上一版要求的「数据完整显示」），此时行自然更高。**已在 v0.12.0 改为绝对等高**（文本列限两行 + 悬停看全文）。
|
||||
|
||||
### v0.11.1 已实现
|
||||
|
||||
**修复你反馈的三个问题**
|
||||
|
||||
- [x] **表格显示不全**：`table-layout: fixed` 保证了不横向滚动，但列内仍是 `nowrap`，实测**长 URL 被截掉 388px、名称截掉 219px、可用率条截掉 35px**（1440 宽下共 14 个单元格被截断）。改为**允许换行**（地址 `break-all`、名称/结果 `overflow-wrap: anywhere`）并重排列宽比例——数据完整显示且**仍然零横向滚动**（已加断言：注入超长名称/地址后截断单元格 = 0）
|
||||
- [x] **「最近事件」完全没样式**：原因是上次追加 CSS 的命令是 `node --check app.js && cat >> style.css`，`--check` 报错导致 `&&` 短路，**CSS 根本没写进文件**（只有 HTML 裸奔）。这次用编辑器写入并加了断言。同时**重做为时间线样式**：左侧竖线 + 按类型着色的圆点、类型徽标、左描边分色；避免短名称后面拖出大片空白（名称列按内容自适应）；**默认折叠为最近 8 条**，可「展开全部 N 条」
|
||||
- [x] **`dataFilter: uptimerobot` 仍在探测本地目标**：新增 `settings.probeScope`（`all` / `config` / `uptimerobot`），**不填则跟随 `dataFilter`** —— 只展示一个来源时不再探测另一个来源的目标（省资源、少打扰）；想保留探测可显式设 `"probeScope": "all"`。启动日志会明确打印当前口径与范围
|
||||
|
||||
**顺带修掉两个连带问题**
|
||||
|
||||
- [x] **UR 镜像目标此前不产生事件也不告警**：`evaluateRound` 只遍历本地配置目标，而配了 `uptimerobot` 口径时你关心的恰恰是 UR 目标 —— 等于「收不到任何提醒」。现在两类目标统一纳入事件与告警
|
||||
- [x] **去抖计数被评估频率放大**：`evaluateRound` 每秒被调用，原来每次评估都让 `failStreak +1`，一个持续离线的目标 1 秒就凑够「连续 2 次失败」触发告警。改为**按探测时间戳去重**，只在真正产生新结果的那一轮累加；同时无状态变化时不再反复落盘
|
||||
|
||||
**测试**：`verify-views` [J] 段扩到 11 条（长内容不截断 / 仍不滚动 / 事件时间线布局 / 类型着色 / 折叠与展开），`verify-notify` 新增 [D3] 4 条（探测范围跟随、不再探测本地、显式 all 恢复探测、探测范围与展示口径解耦）与去抖计数断言。
|
||||
|
||||
### v0.11.0 已实现（P1 收尾）
|
||||
|
||||
- [x] **「最近事件」面板区块**：监控列表下方展示最近 20 条状态翻转（故障 / 恢复 / 证书 / 维护），无事件自动隐藏；窄屏隐藏「详情」列
|
||||
- [x] **90 天响应时间趋势**：当日分桶累计 `latSum/latCount/latMax`，快照输出 `lat: { avg, max, days[] }`；卡片视图在可用率条下新增延迟细柱图（最近 30 天 + 90 天均值），表格视图在可用率列 tooltip 追加日均/峰值
|
||||
- [x] `--demo` 同步生成 90 天延迟样例（含起伏形状），静态部署也能看到趋势效果
|
||||
- [x] `verify-views` 新增 [J] 段 5 条断言（趋势条渲染 / 30 格 / tooltip / 事件空态 / 无溢出），**P0+P1 全部完成**
|
||||
|
||||
> 至此最初规划的 P0（通知、证书）与 P1（事件时间线、维护窗口、响应时间趋势）全部落地。
|
||||
|
||||
### v0.10.0 已实现（P0：通知 + 证书）
|
||||
|
||||
- [x] **通知渠道①：邮件** —— 自写极简 SMTP 客户端（**零依赖**，不引 nodemailer）：465 隐式 TLS / 587·25 自动 STARTTLS、AUTH LOGIN 与 PLAIN、UTF-8 主题按 RFC2047 编码 + base64 正文、多收件人、5xx 与连接错误可读；服务器不支持 STARTTLS 时**默认拒绝明文发信**（需显式 `allowInsecure`）
|
||||
- [x] **通知渠道②：MeoW 推送** —— 按[官方文档](https://www.chuckfang.com/MeoW/api_doc.html)实现：昵称寻址无 token、`msgType`/`htmlHeight` 走查询参数、**HTTP 恒 200 改为按响应体 status 判定**、429/404/403 转成可读原因、本地限流器遵守 3s/15min/60h
|
||||
- [x] **告警逻辑**：连续 N 次失败才告警（去抖）+ 恢复通知 + 同轮多点变化合并为一条 + **去抖状态持久化**（重启不重复）+ 静默时段（跨零点，只记录不发送）
|
||||
- [x] **事件时间线**：`data/events.json`（保留最近 500 条）+ `GET /api/events` + 快照内附最近 20 条；`redactDetails` 时脱敏
|
||||
- [x] **TLS 证书监控**：对 https 目标单独握手取有效期（默认 6 小时一次），面板徽标（≤14 天黄 / ≤7 天红），阈值 14/7/3 各告一次、已过期只报最严重一档、换证书自动重置
|
||||
- [x] **维护窗口**：窗口内不计入可用率、不发告警、显示「维护中」徽标，事件仍记录
|
||||
- [x] **`--test-notify` 自检命令** 与 `--data-dir` 私有数据目录（默认 `./data`，已 gitignore）
|
||||
- [x] 新增 `scripts/verify-notify.cjs`：**39 项断言**（假 SMTP 服务器 / 假 MeoW 服务器 / 静默时段 / 限流器 / 三轮集成验证去抖与恢复 / 维护窗口抑制 / 真实证书握手）
|
||||
|
||||
> 测试过程中抓到并修掉两个真 bug：① SMTP 空闲超时没有处理，服务器不响应会把探针循环**挂死**；② MeoW 限流器把空历史当成 0，**第一条通知永远被自己拦掉**；③ 去抖状态在「无事发生」的轮次不落盘，导致连续失败计数丢失、永远达不到告警阈值。
|
||||
|
||||
### v0.9.1 已实现
|
||||
|
||||
- [x] **「任何情况下都不需要横向滚动」定为硬要求并落地**：表格改为**流式列宽**（`table-layout: fixed` + 百分比列宽），表头允许换行、单元格裁剪，心率图与可用率条随宽度伸缩；从结构上不可能撑出横向滚动
|
||||
- [x] 修复两个只有极端内容才暴露的撑破（普通数据下测不出来）：
|
||||
- **卡片视图**在 <768px 曾溢出最多 495px —— grid 轨道 `minmax(300px, 1fr)` + 网格项默认 `min-width: auto`，被超长 URL 撑到 801px；改为 `minmax(min(300px, 100%), 1fr)` + `.card { min-width: 0 }`
|
||||
- **表格**在 <768px 曾溢出 8~42px —— 表头 `white-space: nowrap` 在窄列里溢出；改为换行 + 裁剪
|
||||
- [x] 新增 `scripts/verify-layout.cjs`：自带极端配置（40 目标 / 6 分组 / 超长名称与 URL）+ 临时静态服务，扫描 **13 种视口 × 2 视图**，26 项断言零横向滚动
|
||||
- [x] 被截断的名称/目标补 `title`，鼠标悬停可看完整值
|
||||
|
||||
### v0.9.0 已实现
|
||||
|
||||
**修复你反馈的两个问题**
|
||||
|
||||
- [x] **装饰遮罩「看不出效果」**：人物与单车改为**统一全局半透明**（`settings.decoOpacity`，默认 0.78，一个值同时作用于两者）+ 各自的边缘渐隐；此前立绘是 0.92（几乎无感）、单车 0.80，两者还不一致
|
||||
- [x] **切换视图时人物比例变化**：删掉了「卡片视图把立绘缩到 300px」的规则（那是上一版为躲让卡片加的），现在两种视图尺寸完全一致
|
||||
- [x] **保留原始素材**：AI 生成的白底原图归档到 `assets-src/`，处理流程写成可复现脚本 `scripts/prepare-artwork.py`（边界洪泛 + 封闭区域补抠 + 裁边缩放 + 补白）
|
||||
|
||||
**全局审阅发现并修复的问题**
|
||||
|
||||
- [x] 🔴 **无障碍对比度不达标（两套主题都中招）**：状态色直接当文字色用时远低于 WCAG AA 4.5:1（白子主题「在线」2.71:1、「等待」2.56:1；默认主题 3.30:1 / 3.19:1）。改为**双色体系**：填充色（圆点、心率条、边框）保持鲜亮并保证 ≥3:1，文字色用同色系加深值并保证 ≥4.5:1；暗色模式同步。新增 8 条对比度断言（逐层合成实际背景色，正确处理 `color-mix` 半透明底）
|
||||
- [x] 🔴 **暗色模式下主题是坏的**：顶栏/卡片/表头/分组行是硬编码白色渐变，配上深色页面就是「白顶栏 + 深底」；改为随明暗模式切换的变量（新增 `docs/screenshot-dark.png`）
|
||||
- [x] 🟠 **平板竖屏（768px）表格要内部横滚 242px**：自动切卡片的阈值从 700px 提到 **1024px**（= 表格实测最小舒适宽度），显式选择视图仍然优先
|
||||
- [x] 🟠 **Cloudflare Worker 快照缺字段**：补 `dataUpdatedAt` / `updateIntervalSec` / `dataFilter`，边缘部署与本地探针口径一致（否则倒计时不会对齐服务端）
|
||||
- [x] 🟡 清理失效 CSS（`.logo .halo`，随内联光环 SVG 移除后遗留）
|
||||
|
||||
**测试脚本自身修掉的两个 bug**（都会导致误报）
|
||||
|
||||
- 对比度取样把 `color(srgb r g b / a)` 的 0~1 分量当成 0~255、把半透明底色当不透明 → 改为逐层合成实际背景色
|
||||
- 「立绘不影响阅读」把**渐变背景**（卡片用 `background-image`）误判为透明 → 判定补上背景图检查
|
||||
|
||||
### v0.8.3 已实现
|
||||
|
||||
- [x] **修复抠图漏区**：此前只用「边界洪泛」抠底，光环**环内**、单车**车架三角区与轮圈内扇形**这些被围起来的封闭白色区域没被处理，会留成白块。改为再补一次「封闭白色区域」按面积清理（人物/单车/图标三张图都处理了；脸部、袜子等服装白已确认保留）
|
||||
- [x] **人物与单车加半透明 + 渐隐遮罩**：立绘 `opacity .92` + 上下渐隐，单车 `opacity .8` + 两端渐隐 + 轻微降饱和，不再像贴上去的贴纸
|
||||
|
||||
### v0.8.2 已实现
|
||||
|
||||
- [x] 左下角公路车换成**简约扁平风插画**（AI 生成 + 抠底，与人物同一套视觉语言），替换掉此前自绘的线稿 SVG；页脚下方装饰带（公路车 / 光环 / 人物）风格统一
|
||||
|
||||
### v0.8.1 已实现
|
||||
|
||||
- [x] **修复移动端顶栏塌陷**：窄屏（≤820px）改为「标题 / 统计 / 控件」三行布局，统计均分视口宽度，页脚改纵向堆叠 —— 此前统计数字会挤成竖排并压住标题
|
||||
- [x] **窄屏默认卡片视图**（≤700px）：表格在手机上必须横向拖动，改由卡片呈现；横竖屏切换时重算，用户显式选过视图则尊重其选择
|
||||
- [x] 窄屏与横屏手机自动撤掉立绘、公路车、光环水印等固定装饰，避免压住内容或溢出
|
||||
- [x] `verify-views` 新增移动端专项断言 7 项（默认卡片 / 无横向溢出 / 顶栏三行 / 统计铺满 / 装饰隐藏 / 页脚不裁切 / 无 JS 错误）
|
||||
|
||||
### v0.8.0 已实现
|
||||
|
||||
- [x] **形象换成简约风插画**（AI 生成 + 抠底，非官方美术素材）：右下角全身立绘、logo 与 favicon 用同款半身像；官方立绘/头像已从仓库移除
|
||||
- [x] **修复：桌面端表格需要横向拖动** —— 上一版为避让立绘给内容区加了 240px 右内边距，而 `.grid` 是 `max-width: 1200px`，内边距在 1200 内部吃掉宽度，导致 1200px 以上的屏幕也必然溢出。改为「立绘收窄 + 置于内容之下」，实测 1280 / 1440 / 1920 三种宽度下页面与表格均 **0 溢出、0 重叠**
|
||||
- [x] **修复：立绘遮挡光环水印** —— 光环水印移到页脚下方空带，与左下公路车、右下立绘形成一条装饰带，互不遮挡
|
||||
|
||||
### v0.7.0 已实现
|
||||
|
||||
- [x] **砂狼白子主题**（默认启用）：官方立绘（右下角，宽屏自动为它让位）+ 头像 logo/favicon（光环环呼吸动画）+ 天蓝围巾飘带顶栏 + 倒十字发饰分组标识 + 公路车轮加载态 + 按官方造型还原的倾斜椭圆光环水印；配套青绿主色调
|
||||
- [x] 主题切换：`settings.theme` / `?theme=` / 顶栏光环按钮（localStorage 记忆），默认主题完整保留
|
||||
- [x] `settings.artwork` 立绘位，默认指向内置立绘；未配置或文件缺失时静默不显示
|
||||
- [x] 修复：`dataFilter=uptimerobot`（只展示外部数据源）时「平均延迟」恒为「–」——原规则一律排除 UR 延迟，改为「混合来源时排除、纯外部来源时以其为唯一口径」，服务端与面板同步调整
|
||||
|
||||
### 路线图（后续迭代）
|
||||
|
||||
- [ ] 通知渠道：Webhook / Server 酱 / Telegram / Bark / 邮件
|
||||
@@ -401,6 +822,23 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
|
||||
- [ ] 面板：更多形态（如时间线视图、地图视图）、明暗主题手动切换、可用率区间可配置（7/30/90 天）
|
||||
- [ ] 状态页 JSON API 的 CORS 开放与缓存策略细化
|
||||
|
||||
## 本地运行
|
||||
|
||||
**零依赖，不需要 `npm install`**：
|
||||
|
||||
```bash
|
||||
git clone https://github.com/tamakyi/shiroko-monitor.git
|
||||
cd shiroko-monitor
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
打开 <http://localhost:8787/>（管理端在 `/admin`）。要求 Node.js ≥ 18。
|
||||
|
||||
改 `public/monitors.json` 里的 `monitors` 即可添加自己的目标，**文件会被自动热重载，不用重启**。
|
||||
|
||||
- 完整说明（三种运行模式 / 配置分层 / 开机自启 / 常见问题）→ **[docs/DEPLOY-LOCAL.md](docs/DEPLOY-LOCAL.md)**
|
||||
- 面板部署到 GitHub Pages → **[docs/DEPLOY-PAGES.md](docs/DEPLOY-PAGES.md)**
|
||||
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
@@ -411,25 +849,33 @@ node prober/node/index.js
|
||||
node prober/node/index.js --once
|
||||
|
||||
# UI 自动化实测（需 playwright，仅开发验证用，驱动系统 Chrome）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify.cjs # 热重载 / 数据一致性 / 刷新语义 / 面板（21 项）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify-views.cjs # 视图与数据源过滤（10 项）
|
||||
node scripts/verify-security.cjs # banner 探测 / 脱敏 / 私有分层 / 刷新限流（20 项）
|
||||
UPTIMEROBOT_API_KEY=ur... node scripts/verify-uptimerobot.cjs # UR 映射/兼容接口/失败路径/冒烟（22 项）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify.cjs # 热重载 / 数据一致性 / 刷新语义 / 面板（17 项）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify-views.cjs # 视图与数据源过滤 / 对比度 / 等高 / 事件区块（47 项）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify-layout.cjs # 13 视口 × 2 视图零横向溢出 + 行高一致（26 项）
|
||||
NODE_PATH=<playwright 的 node_modules> node scripts/verify-admin.cjs # 管理端 2FA 全流程（102 项：RFC 向量 / 绑定 / 会话 / 限流 / 接口 / 页面）
|
||||
node scripts/verify-worker.cjs # Cloudflare Worker（40 项：UR 映射 / 探测范围 / 失败降级 / 管理端拒绝 / 密钥泄露）
|
||||
node scripts/verify-security.cjs # banner 探测 / 脱敏 / 私有分层 / 刷新限流 / 密钥泄露 / CORS 白名单（40 项）
|
||||
node scripts/verify-notify.cjs # 通知与证书（44 项：假 SMTP / 假 MeoW / 去抖 / 恢复 / 维护窗口 / 真实证书）
|
||||
UPTIMEROBOT_API_KEY=ur... node scripts/verify-uptimerobot.cjs # UR 映射/兼容接口/失败路径/冒烟（18 项）
|
||||
```
|
||||
|
||||
`verify-security.cjs` 会临时起一个假 SSH 服务与静默端口，验证 banner 探测的在线/不匹配/超时三种判定、默认不回显版本、脱敏与私有配置分层，以及刷新接口的 429/403 行为。`verify-uptimerobot.cjs` 用合成 payload 做无网映射单测，真实 Key 冒烟为可选（未设置环境变量则跳过）。
|
||||
`verify-security.cjs` 会临时起一个假 SSH 服务与静默端口，验证 banner 探测的在线/不匹配/超时三种判定、默认不回显版本、脱敏与私有配置分层，以及刷新接口的 429/403 行为。`verify-uptimerobot.cjs` 用合成 payload 做无网映射单测，真实 Key 冒烟为可选（未设置环境变量则跳过）。`verify-notify.cjs` 会临时起**假 SMTP 服务器与假 MeoW 服务器**，完整走一遍邮件握手与推送协议，并真跑三轮探针验证去抖、恢复、维护窗口抑制与事件落盘；真实证书握手需要外网，无网络时自动跳过（不计失败）。`verify-layout.cjs` 用极端内容（40 目标 / 6 分组 / 超长名称与 URL）在 13 种视口 × 2 种视图下断言零横向溢出**且行高完全一致**。`verify-admin.cjs` 先用 RFC 4226 / RFC 6238 官方测试向量校验自实现的 TOTP，再覆盖 2FA 绑定、会话生命周期、防重放、失败限流、HTTP 鉴权边界与页面流程。`verify-worker.cjs` 把 Worker 以 data: URL 动态载入（绕开 `cloudflare:sockets`），注入假的 KV / 静态资源 / UptimeRobot 服务器，**不需要 wrangler 也不需要联网**即可验证边缘逻辑。
|
||||
|
||||
代码约定：探针与面板通过 `status.json` / `/api/status` 的同一份 JSON 契约协作；新增探测类型时只需在 `prober/node/lib/` 与 `edge/cloudflare/worker.js` 各实现一个 `probeXxx(monitor)`，返回 `{ status, latency, code, detail }` 即可被面板直接渲染。
|
||||
|
||||
## 界面截图
|
||||
|
||||
| 表格（默认视图） | 卡片视图 |
|
||||
| 砂狼白子主题（默认，表格视图） | 默认主题 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
UptimeRobot 数据源（`?filter=uptimerobot`，截图中含真实监控名与域名，公开发布前可自行删除）：`docs/screenshot-uptimerobot.png`
|
||||
| 深色模式（白子主题） | 卡片视图（白子主题） |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
演示数据（90 天满档）与移动端：`docs/screenshot-demo.png`、`docs/screenshot-mobile.png`
|
||||
移动端（390×844，自动切卡片 + 顶栏三行）：`docs/screenshot-mobile.png`
|
||||
|
||||
UptimeRobot 数据源（`?filter=uptimerobot`，截图中含真实监控名与域名，公开发布前可自行删除）：`docs/screenshot-uptimerobot.png`；演示数据 90 天满档：`docs/screenshot-demo.png`
|
||||
|
||||
## 致谢与定位
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 277 KiB |
@@ -0,0 +1,282 @@
|
||||
# 本地运行指南
|
||||
|
||||
全部跑在自己机器上：探针、面板、管理端都在 `http://localhost:8787`。
|
||||
|
||||
**零依赖** —— 不需要 `npm install`，只用 Node 自带模块。
|
||||
|
||||
---
|
||||
|
||||
## 最短路径（三条命令）
|
||||
|
||||
```bash
|
||||
git clone https://github.com/tamakyi/shiroko-monitor.git
|
||||
cd shiroko-monitor
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
打开 <http://localhost:8787/> 就能看到面板（内置了 8 个示例目标，第一次启动后约一分钟内有数据）。
|
||||
|
||||
要求：**Node.js ≥ 18**（`node -v` 查看）。
|
||||
|
||||
---
|
||||
|
||||
## 启动后有什么
|
||||
|
||||
| 地址 | 用途 |
|
||||
| --- | --- |
|
||||
| <http://localhost:8787/> | 公开面板（只读） |
|
||||
| <http://localhost:8787/admin> | 管理端（需先绑定 2FA） |
|
||||
| <http://localhost:8787/api/status> | 状态快照（JSON） |
|
||||
|
||||
启动日志会告诉你当前的探测范围与数据源，例如：
|
||||
|
||||
```
|
||||
shiroko-monitor v0.12.3
|
||||
面板: http://localhost:8787/
|
||||
管理后台: http://localhost:8787/admin （仅本机可访问；需远程访问请设 settings.admin.allowRemote=true）
|
||||
展示口径: both 探测范围: all —— 全部（自建 8 个）
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 三种运行模式
|
||||
|
||||
### 1. 常驻（默认）
|
||||
|
||||
```bash
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
按各目标自己的 `interval` 持续探测，Ctrl+C 停止。**适合长期使用。**
|
||||
|
||||
### 2. 跑一轮就退（CI 用）
|
||||
|
||||
```bash
|
||||
node prober/node/index.js --once
|
||||
```
|
||||
|
||||
探测一轮、写出 `public/status.json` 后退出。
|
||||
|
||||
### 3. 演示数据（不想真探测）
|
||||
|
||||
```bash
|
||||
node prober/node/index.js --once --demo
|
||||
```
|
||||
|
||||
生成一份假的状态快照，用于静态部署的首版占位。
|
||||
|
||||
### 常用参数
|
||||
|
||||
| 参数 | 作用 |
|
||||
| --- | --- |
|
||||
| `--config=<path>` | 指定公开配置（默认 `public/monitors.json`） |
|
||||
| `--local-config=<path>` | 指定私有配置（默认 `local.monitors.json`） |
|
||||
| `--out=<path>` | 指定快照输出（默认 `public/status.json`） |
|
||||
| `--data-dir=<path>` | 指定私有数据目录（默认 `./data`，存通知去抖状态与事件） |
|
||||
| `--test-notify` | 给所有已启用渠道发一条测试消息 |
|
||||
| `PORT=9000 node prober/node/index.js` | 换端口（`PORT` 是环境变量，不是参数） |
|
||||
|
||||
---
|
||||
|
||||
## 配置自己的监控目标
|
||||
|
||||
编辑 `public/monitors.json` 的 `monitors` 数组：
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"id": "my-site", // 唯一标识，改了会丢失该目标的历史
|
||||
"name": "我的站点",// 显示名
|
||||
"group": "生产环境",// 分组（面板按它分页签）
|
||||
"type": "http",// http | tcp | banner
|
||||
"url": "https://example.com",
|
||||
"expectStatus": [200], // 哪些状态码算正常
|
||||
"interval": 60,// 探测间隔（秒）
|
||||
"timeout": 10 // 超时（秒）
|
||||
}
|
||||
```
|
||||
|
||||
TCP 与 banner 类型：
|
||||
|
||||
```jsonc
|
||||
{ "id": "db-5432", "name": "数据库", "type": "tcp", "host": "10.0.0.5", "port": 5432, "interval": 60 }
|
||||
{ "id": "ssh", "name": "SSH", "type": "banner", "host": "10.0.0.6", "port": 22,
|
||||
"expectBanner": "^SSH-2.0", "timeout": 10 }// 匹配标识串正则
|
||||
```
|
||||
|
||||
改完**自动热重载**（监听文件变化，约 200ms 生效），不用重启。
|
||||
|
||||
---
|
||||
|
||||
## 配置怎么分层
|
||||
|
||||
| 文件 | 是否入库 | 放什么 |
|
||||
| --- | --- | --- |
|
||||
| `public/monitors.json` | ✅ | 目标定义、非敏感设置（会随 GitHub Pages 公开） |
|
||||
| `local.monitors.json` | ❌（`.gitignore`） | 真实地址、`apiKey`、私有覆盖 |
|
||||
|
||||
`local.monitors.json` **可选**，不存在也能跑。要用时自建：
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"_comment": "按 id 覆盖 public/monitors.json 的同名条目，或覆盖 settings",
|
||||
"settings": {
|
||||
"uptimeRobot": { "enabled": true, "apiKey": "ur1769665-...", "pollIntervalSec": 300 },
|
||||
"probeScope": "all"
|
||||
},
|
||||
"monitors": [
|
||||
{ "id": "example-com", "url": "https://real-host.internal" } // 只写要覆盖的字段
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
> ⚠️ **API Key 绝不要写进 `public/monitors.json`** —— 它会随 Pages 部署公开。
|
||||
|
||||
---
|
||||
|
||||
## 接UptimeRobot
|
||||
|
||||
项目支持把UptimeRobot 上已有的监控结果接进来（作为「异地探测视角」与自建探测并列展示）。**只读**，用 `ur` 开头的只读 Key 即可。
|
||||
|
||||
```jsonc
|
||||
// local.monitors.json
|
||||
{
|
||||
"settings": {
|
||||
"uptimeRobot": {
|
||||
"enabled": true,
|
||||
"apiKey": "ur1769665-xxxxxxxx",
|
||||
"pollIntervalSec": 300
|
||||
},
|
||||
"probeScope": "uptimerobot" // 只同步 UR，不探测本地配置的目标
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
也可以直接用环境变量：`UPTIMEROBOT_API_KEY=ur... node prober/node/index.js`
|
||||
|
||||
---
|
||||
|
||||
## 启用管理端（可选）
|
||||
|
||||
管理端能改配置、加维护窗口、发通知自检。**必须先绑定 2FA。**
|
||||
|
||||
```bash
|
||||
# Windows PowerShell
|
||||
$env:SHIROKO_ADMIN_SETUP_KEY='换成一串足够长的随机口令'
|
||||
node prober/node/index.js
|
||||
|
||||
# macOS / Linux
|
||||
export SHIROKO_ADMIN_SETUP_KEY='换成一串足够长的随机口令'
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
打开 <http://localhost:8787/admin>，四步绑定：
|
||||
|
||||
1. 输入 `SHIROKO_ADMIN_SETUP_KEY` → 生成密钥
|
||||
2. 用验证器 App 扫码（或手动输入密钥 / 复制 `otpauth://` 链接）
|
||||
3. 输入 App 显示的 6 位码 → 完成绑定
|
||||
4. **保存 10 枚恢复码**（只显示这一次）
|
||||
|
||||
之后每次进入管理界面都要输 6 位动态码或一枚恢复码。
|
||||
|
||||
> 不设 `SHIROKO_ADMIN_SETUP_KEY` 时绑定入口直接关闭，管理端处于「完全不可用」状态 —— 这是安全的默认值。
|
||||
|
||||
---
|
||||
|
||||
## 通知（可选）
|
||||
|
||||
支持邮件（SMTP）与 [MeoW](https://www.chuckfang.com/MeoW/api_doc.html) 推送，写在 `local.monitors.json`：
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"settings": {
|
||||
"notify": {
|
||||
"enabled": true,
|
||||
"failureThreshold": 2,// 连续失败几次才告警
|
||||
"recoveryNotify": true, // 恢复时也通知
|
||||
"quietHours": "23:00-08:00",// 静默时段（不打扰）
|
||||
"channels": {
|
||||
"email": {
|
||||
"enabled": true,
|
||||
"host": "smtp.example.com",
|
||||
"port": 465,
|
||||
"secure": true, // 465 隐式 TLS；587 用 STARTTLS
|
||||
"user": "[email protected]",
|
||||
"pass": "授权码",
|
||||
"from": "[email protected]",
|
||||
"to": ["[email protected]"]
|
||||
},
|
||||
"meow": { "enabled": false, "nickname": "你的MeoW昵称" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
配好后自检一下：
|
||||
|
||||
```bash
|
||||
node prober/node/index.js --test-notify
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 开机自启（可选）
|
||||
|
||||
**macOS / Linux（systemd）**
|
||||
|
||||
```ini
|
||||
# /etc/systemd/system/shiroko-monitor.service
|
||||
[Unit]
|
||||
Description=shiroko-monitor
|
||||
After=network-online.target
|
||||
|
||||
[Service]
|
||||
WorkingDirectory=/opt/shiroko-monitor
|
||||
ExecStart=/usr/bin/node prober/node/index.js
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
Environment=SHIROKO_ADMIN_SETUP_KEY=你的口令
|
||||
Environment=SHIROKO_DATA_DIR=/var/lib/shiroko
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
```bash
|
||||
sudo systemctl enable --now shiroko-monitor
|
||||
sudo journalctl -u shiroko-monitor -f
|
||||
```
|
||||
|
||||
**Windows（NSSM）**
|
||||
|
||||
```powershell
|
||||
nssm install ShirokoMonitor "C:\Program Files\nodejs\node.exe" "C:\shiroko-monitor\prober\node\index.js"
|
||||
nssm set ShirokoMonitor AppDirectory C:\shiroko-monitor
|
||||
nssm set ShirokoMonitor AppEnvironmentExtra SHIROKO_ADMIN_SETUP_KEY=你的口令
|
||||
nssm start ShirokoMonitor
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
**面板一直显示「等待检测」**
|
||||
第一次启动后需要等第一轮探测完成（按各目标的 `interval`，最长可能几分钟）。看日志确认探测范围。
|
||||
|
||||
**面板是空的**
|
||||
检查日志里的「探测范围」。若显示「仅 UptimeRobot（0 个）」说明你把 `dataFilter` 设成了 `uptimerobot` 但没配 API Key —— 把它改成 `both`，或配置 `uptimeRobot.apiKey`。
|
||||
|
||||
**想改端口**
|
||||
`PORT=9000 node prober/node/index.js`（环境变量，不是命令行参数）。
|
||||
|
||||
**端口被占用**
|
||||
`PORT=9000 node prober/node/index.js` 换一个。
|
||||
|
||||
**改了配置没生效**
|
||||
文件监听有 200ms 防抖，稍等即可；若是 `local.monitors.json`，确认 JSON 格式正确（尾逗号会导致解析失败，此时日志会打印 `[config] 重载失败`）。
|
||||
|
||||
**数据存在哪**
|
||||
`public/status.json`（快照，会入库）与 `data/`（通知去抖状态、事件时间线、2FA 档案，不入库）。换机器时前者可以不带。
|
||||
|
||||
**内存占用**
|
||||
常驻约 60–80 MB RSS。目标多、心率历史长时会略增。
|
||||
@@ -0,0 +1,200 @@
|
||||
# 部署指南：GitHub Pages 面板 + 本地探针
|
||||
|
||||
面向的场景：**面板托管在 GitHub Pages（公开、免运维），探测跑在自己家里/内网的机器上**。
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐ ┌──────────────────────────────────┐
|
||||
│ GitHub Pages（静态托管） │ HTTPS │ 你自己的机器（内网/家用） │
|
||||
│ ├─ index.html + assets/ │◄────────┤ ├─ Node 探针：持续探测 │
|
||||
│ └─ 读 status.json 取配置 │ fetch │ ├─ /admin 管理端（2FA 保护） │
|
||||
│ │ │ └─ 写 local.monitors.json │
|
||||
└─────────────────────────────┘ └──────────────────────────────────┘
|
||||
```
|
||||
|
||||
为什么面板不能直接读本地探针？因为 GitHub Pages 是**纯静态**的，只能读仓库里的文件。
|
||||
数据要上去，靠两件事：**跨域读接口**（本指南的方式）或 **Actions 提交快照**（下文备选方案）。
|
||||
|
||||
---
|
||||
|
||||
## 一、先决条件
|
||||
|
||||
| 条件 | 说明 |
|
||||
| --- | --- |
|
||||
| **本地探针有 HTTPS 地址** | Pages 强制 HTTPS，浏览器禁止 HTTPS 页面请求 HTTP（混合内容）。用你自己的隧道 / 反代给探针套一层 HTTPS |
|
||||
| Node.js ≥ 18| 零依赖，只需 Node 自带模块 |
|
||||
| 一个 GitHub 仓库 | 公开仓库即可（Pages 免费额度对公开仓库无限） |
|
||||
|
||||
> ⚠️ **混合内容是硬限制**：即使 CORS 配对了，只要探针是 `http://`，浏览器仍会直接拦截请求，控制台只留一行 `Mixed Content ... was blocked`。这一条没有绕过办法。
|
||||
|
||||
---
|
||||
|
||||
## 二、本地：跑探针
|
||||
|
||||
```bash
|
||||
git clone <你的仓库>
|
||||
cd shiroko-monitor
|
||||
|
||||
# 私有配置（可选）：真实地址、API Key 等敏感信息放这里，不入库
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>想用私有配置文件？</summary>
|
||||
|
||||
`local.monitors.json` 是可选的，不存在也能跑（会直接用 `public/monitors.json`）。
|
||||
需要拆分敏感信息时自建即可，结构如下：
|
||||
|
||||
```jsonc
|
||||
// local.monitors.json（已在 .gitignore 中）
|
||||
{
|
||||
"_comment": "按 id 覆盖 public/monitors.json 的同名条目，或覆盖 settings",
|
||||
"settings": {
|
||||
"uptimeRobot": { "enabled": true, "apiKey": "ur...", "pollIntervalSec": 300 },
|
||||
"probeScope": "all"
|
||||
},
|
||||
"monitors": [
|
||||
{ "id": "example-com", "url": "https://real-internal-host.example" }
|
||||
]
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
启动后确认：
|
||||
|
||||
```
|
||||
面板:http://localhost:8787/
|
||||
管理后台: http://localhost:8787/admin
|
||||
```
|
||||
|
||||
### 让探针能被外部访问
|
||||
|
||||
默认它**只监听 `127.0.0.1`**。要让隧道/反代连进来，在 `local.monitors.json` 里打开：
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"settings": {
|
||||
"admin": { "allowRemote": true } // 监听 0.0.0.0
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> 打开后同一端口上的公开面板也会对外可达（只读，但目标名称/地址/可用率会暴露）。
|
||||
> 如果不希望这样，请在隧道那层按路径只放行 `/admin` 与 `/api/admin/*`。
|
||||
|
||||
### 绑定管理端 2FA（必做）
|
||||
|
||||
管理端能改配置、发通知，必须先绑定两步验证：
|
||||
|
||||
```bash
|
||||
# 首次绑定需要这个口令（只从环境变量读，不写进任何文件）
|
||||
export SHIROKO_ADMIN_SETUP_KEY='换成一串足够长的随机口令'
|
||||
node prober/node/index.js
|
||||
```
|
||||
|
||||
然后打开 `https://你的隧道地址/admin`，按提示扫码绑定、保存恢复码。
|
||||
|
||||
---
|
||||
|
||||
## 三、页面：部署到 GitHub Pages
|
||||
|
||||
### 1. 开启 Pages
|
||||
|
||||
仓库 **Settings → Pages → Build and deployment → Source** 选 **GitHub Actions**。
|
||||
|
||||
### 2. 推送代码
|
||||
|
||||
```bash
|
||||
git push
|
||||
```
|
||||
|
||||
### 3. 填两处配置（关键）
|
||||
|
||||
打开 `https://你的隧道地址/admin`，在「口径与范围」区块填：
|
||||
|
||||
| 字段 | 填什么 |
|
||||
| --- | --- |
|
||||
| **面板上的管理入口链接** | `https://你的隧道地址/admin` —— Pages 面板页脚会出现「管理」按钮跳过去 |
|
||||
| **跨域数据源地址** | `https://你的隧道地址`（不带路径）—— 面板从这里取数据 |
|
||||
| **允许跨域读取的页面地址** | `https://你的用户名.github.io` —— 必须是完整来源，含协议 |
|
||||
|
||||
填完立刻生效。回本地仓库提交改动：
|
||||
|
||||
```bash
|
||||
git add public/monitors.json && git commit -m "chore: 配置跨域数据源" && git push
|
||||
```
|
||||
|
||||
> 配置写在 `local.monitors.json`（私有层）的话，Pages 上的面板读不到 ——
|
||||
> 它只能读仓库里的 `public/monitors.json`。所以上面的两步（管理界面填 → 提交仓库）都要做。
|
||||
|
||||
### 4. 验证
|
||||
|
||||
打开 `https://你的用户名.github.io/<仓库名>/`，检查：
|
||||
|
||||
- 页脚数据源显示「**远程探针（跨域）**」—— 说明跨域打通了
|
||||
- 表格有数据且状态正常
|
||||
- 页脚有「管理」按钮，点击能跳到管理端
|
||||
- **页面上没有「刷新」按钮** —— 跨域模式下该接口必然被`refreshLocalOnly` 挡下，隐藏比给一个失败的按钮好
|
||||
|
||||
---
|
||||
|
||||
## 四、安全要点
|
||||
|
||||
| 事项 | 说明 |
|
||||
| --- | --- |
|
||||
| **管理端 2FA 必须绑定** | TOTP（Google Authenticator 等）+ 10 枚一次性恢复码 |
|
||||
| **恢复码离线保存** | 只在绑定时显示一次，用掉一枚少一枚 |
|
||||
| **跨域白名单不要图省事写 `*`** | 代码里不存在 `*` 分支，写了也不生效。必须写完整来源，如 `https://you.github.io` |
|
||||
| **管理端永不放行跨域** | `/admin` 与 `/api/admin/*` 不带任何 `Access-Control-*` 头，外部页面既读不到也改不了 |
|
||||
| **会话** | 30 分钟无操作失效，最长 2 小时；进程重启全部失效 |
|
||||
| **登录限流** | 同一 IP 连续 5 次失败后指数退避锁定 |
|
||||
| **API Key** | 放 `local.monitors.json` 或环境变量，**绝不要写进 `public/monitors.json`**（会随Pages 公开） |
|
||||
|
||||
---
|
||||
|
||||
## 五、备选：不用跨域，改用 Actions 提交快照
|
||||
|
||||
如果不想暴露探针的 HTTPS 地址，可以让数据「流」到 Pages 而不是「拉」：
|
||||
|
||||
```yaml
|
||||
# .github/workflows/monitor.yml（示意）
|
||||
on:
|
||||
schedule: [{ cron: '*/5 * * * *' }]
|
||||
workflow_dispatch:
|
||||
jobs:
|
||||
probe:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- run: node prober/node/index.js --once --config=public/monitors.json
|
||||
- run: |
|
||||
git config user.name github-actions[bot]
|
||||
git config user.email 41898282+github-actions[bot]@users.noreply.github.com
|
||||
git add public/status.json
|
||||
git diff --staged --quiet || git commit -m "chore: status" && git push
|
||||
```
|
||||
|
||||
面板用 `?source=static` 读仓库里的 `status.json`。
|
||||
|
||||
**取舍**：探测跑在 GitHub Runner 上（不是你的机器），延迟 ≤5 分钟，且**没有通知、维护窗口、事件、2FA 管理端**。适合纯展示需求。
|
||||
|
||||
---
|
||||
|
||||
## 六、常见问题
|
||||
|
||||
**面板一直转圈 / 报错**
|
||||
浏览器控制台看具体报错：
|
||||
- `Mixed Content ... was blocked` → 探针地址不是 HTTPS，回第一节
|
||||
- `blocked by CORS policy` → 「允许跨域读取的页面地址」没填对，或与实际访问地址不一致（含 `www`、端口、大小写）
|
||||
- `Failed to fetch` 且数据源显示「浏览器直连」 → 面板拿不到数据，退到了兜底模式
|
||||
|
||||
**页脚没有「管理」按钮**
|
||||
「面板上的管理入口链接」为空（默认就是空的，为了不在公网暴露管理面位置）。
|
||||
|
||||
**跨域下没有刷新按钮**
|
||||
这是预期行为。跨域模式下 `/api/refresh` 会被服务端的 `refreshLocalOnly` 挡下（对端是代理地址而非私网），前端自动隐藏了这个按钮。
|
||||
|
||||
**改了配置但面板没变**
|
||||
管理端写的是 `local.monitors.json`（私有层）。如果那部分设置需要 Pages 上的面板看到，得手动同步到 `public/monitors.json` 并提交。
|
||||
|
||||
**本机开发时前端跨域被拒**
|
||||
默认白名单放行 `localhost` / `127.0.0.1`且**忽略端口**，所以 `localhost:5173` 这类能直接用。若你在局域网 IP 上跑前端，需把那个地址显式加进白名单。
|
||||
@@ -73,9 +73,36 @@ wrangler deploy
|
||||
- 手动触发一轮：`curl https://<worker 域名>/api/refresh`（等待本轮完成后返回最新快照，与本地探针同语义）
|
||||
- cron 表达式在 `wrangler.toml` 的 `[triggers].crons` 中调整（`* * * * *` = 每分钟）
|
||||
|
||||
### 接入 UptimeRobot 数据源
|
||||
|
||||
Worker 与本地探针共用同一套 UptimeRobot 语义（只读，映射逻辑见 `edge/cloudflare/uptimerobot.js`）。API Key 用 secret 传入，**不要写进 `monitors.json`**（它会随静态资源公开）：
|
||||
|
||||
```bash
|
||||
wrangler secret put UPTIMEROBOT_API_KEY # 填 ur... 开头的只读 Key
|
||||
```
|
||||
|
||||
同时在 `public/monitors.json` 的 `settings` 里开启（`apiKey` 留空，由 secret 提供）：
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"settings": {
|
||||
"dataFilter": "uptimerobot", // 只展示 UptimeRobot 目标
|
||||
"uptimeRobot": { "enabled": true, "apiKey": "" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
行为与本地探针一致：
|
||||
|
||||
- `probeScope` 决定真正发请求的范围（`all` / `config` / `uptimerobot`），未显式设置时跟随 `dataFilter`
|
||||
- UptimeRobot 目标只拉取不探测，采用其状态并补齐本地 `daily` 分桶
|
||||
- 同步失败时**保留上次数据**并把 `sources.uptimerobot.ok` 置为 `false`，绝不因此把目标判为离线
|
||||
- UR 侧删除的监控会从面板移除，避免残留僵尸条目
|
||||
|
||||
注意事项：
|
||||
|
||||
- **TCP 出站连接（`cloudflare:sockets`）需要 Workers 付费计划（$5/月）**；免费计划下 `http` 类型探测与面板完全正常，`tcp` 类型会报错并记为离线
|
||||
- **banner 类型边缘端不支持**（需原始 socket 读取），会记为离线并给出说明文案；这类目标请用本地探针
|
||||
- KV 为最终一致存储，刚写入后立即读取可能有秒级延迟，对分钟级巡检无影响
|
||||
- 90 天可用率分桶随 state 一起存于 KV，按 **UTC 日期** 分桶（边缘环境无本地时区）；每分钟 cron 约 1440 次/天
|
||||
- 免费版 Worker 每日 10 万次请求，面板静态资源走 Assets 不计入 Worker 请求数
|
||||
@@ -126,7 +153,35 @@ EdgeOne Pages 当前以静态托管为主，采用与方案二相同的「静态
|
||||
| TCP 探测 | ✅ | ✅（Actions 内） | 付费版 ✅ / 免费版 ❌ | 同 GH Pages |
|
||||
| 真实状态码 | ✅ | ✅ | ✅ | ✅ |
|
||||
| 内网目标 | ✅（浏览器同网即可） | ❌ | ❌ | ❌ |
|
||||
| UptimeRobot 数据源 | ✅ | ✅ | ✅ | ❌（需改用自建探测） |
|
||||
| 通知 / 维护窗口 / 事件 | ✅ | ❌ | ❌ | ❌ |
|
||||
| **管理端（2FA）** | ✅ | ❌ | ❌ | ❌ |
|
||||
| 国内访问速度 | 本机最快 | 一般 | 一般 | 快 |
|
||||
| 运维成本 | 需保活进程 | 零 | 零 | 零 |
|
||||
|
||||
建议：个人/演示用 **GitHub Pages**；生产公网监控用 **Cloudflare Workers**；服务对象在国内且以 HTTP 监控为主用 **EdgeOne Pages**；内网资产用 **本地 Node**。
|
||||
|
||||
> ⚠️ **管理端只存在于「本地 Node」部署形态。** 其余形态的部署环境只提供只读面板与探测，没有任何写接口 —— Cloudflare Worker 上访问 `/admin` 或 `/api/admin/*` 会得到 403（而非 404，因为那里确实不提供管理能力）。需要管理操作（改配置、维护窗口、通知自检、立即重探）时，在本地 Node 那一侧完成。
|
||||
>
|
||||
> 原因不是「没做」，而是这些能力依赖本地状态：2FA 档案与会话存在 `data/` 目录与进程内存里，而 Workers 无文件系统、会话状态也无法跨 isolate 共享（KV 又是最终一致，无法承载「恢复码一次性」这类语义）。把这个结论说清楚，比在边缘环境里做一个半可靠的管理端更有价值。
|
||||
|
||||
---
|
||||
|
||||
## 远程访问管理端
|
||||
|
||||
探针**默认只监听 `127.0.0.1`**，外部访问不到。需要时用 `settings.admin.allowRemote` 打开：
|
||||
|
||||
```jsonc
|
||||
// local.monitors.json
|
||||
{ "settings": { "admin": { "allowRemote": true } } }
|
||||
```
|
||||
|
||||
打开后探针监听 `0.0.0.0`，启动日志会明确警告 —— 提醒你该端口同时伺服公开面板，前置层必须启用 HTTPS。
|
||||
|
||||
**怎么把流量送到这个端口由你决定**：反向代理、隧道、VPN、直连公网 IP 都行，本项目不做任何假设，也不会替你生成某种特定的部署配置。
|
||||
|
||||
### 让面板知道管理端在哪
|
||||
|
||||
管理界面里有一项「**面板上的管理入口链接**」：填上管理端的实际地址后，公开面板页脚会出现一个「管理」按钮指向它；留空则不显示（默认，避免在公网面板上暴露管理面的位置）。地址只接受 `http` / `https`。
|
||||
|
||||
这样部署形态与面板展示就解耦了：面板部署在 Cloudflare、管理端在别处、访客从面板点进去 —— 中间怎么连通由你的网络决定。
|
||||
|
||||
+88
-4
@@ -105,7 +105,8 @@ banner 探测的副作用仅有一次 TCP 连接与读取，与端口扫描器
|
||||
| 泄露面 | 风险 | 措施 |
|
||||
| --- | --- | --- |
|
||||
| `public/monitors.json` | 面板必需文件，静态部署必然公开，含真实 URL / 内网主机端口 | **私有配置分层**：公开文件只写 `id/name/group`，真实地址放仓库根的 `local.monitors.json`（已 gitignore），探针按 `id` 合并覆盖 |
|
||||
| `status.json` / `/api/status` | 探针输出，Pages 部署会公开，`detail` 可能含地址、版本、错误码 | `settings.redactDetails: true` → detail 只保留「正常/异常」；TCP 详情已默认不含地址；UptimeRobot 镜像目标的地址在 `hideTargets` 开启时不下发 |
|
||||
| 通知凭据 | SMTP 密码、MeoW 昵称（等同密钥）泄露 → 被冒名发信/推送 | 与地址一样只放 `local.monitors.json` 或环境变量；`public/monitors.json` 中 `notify.channels.*` 保持 `enabled: false` |
|
||||
| `status.json` / `/api/status` | 探针输出，Pages 部署会公开，`detail` 可能含地址、版本、错误码 | `settings.redactDetails: true` → detail 只保留「正常/异常」；TCP 详情已默认不含地址；UptimeRobot 镜像目标的地址在 `hideTargets` 开启时不下发；事件时间线在 `redactDetails` 下只保留类型与时间 |
|
||||
| 面板渲染 | 直接把地址、错误详情展示给访客 | `settings.hideTargets: true` → 不渲染任何地址（含 tooltip），显示「已隐藏」 |
|
||||
| UptimeRobot API Key | 泄露后可读取（只读 Key 不能改配置，但会暴露监控清单） | 只放 `local.monitors.json`（gitignore）或环境变量 `UPTIMEROBOT_API_KEY`；`public/monitors.json` 里 `apiKey` 必须留空 |
|
||||
| `/api/v2/getMonitors`（兼容接口） | 无鉴权，暴露全部目标与可用率 | 内容与公开面板一致，故默认开放；如需收敛请在其前方加带认证的代理，或设 `allowRefresh: false` 并只暴露静态快照 |
|
||||
@@ -146,9 +147,92 @@ banner 探测的副作用仅有一次 TCP 连接与读取，与端口扫描器
|
||||
|
||||
---
|
||||
|
||||
## 四、其他基线
|
||||
## 四、管理后台（`/admin`）的鉴权边界
|
||||
|
||||
v0.12.0 起，所有会改配置的操作都放在 `/admin`，**必须绑定并通过两步验证才能进入**。
|
||||
|
||||
### 部署形态与可写能力
|
||||
|
||||
管理端**只存在于「本地 Node 探针」这一种部署形态**。各形态的可写面：
|
||||
|
||||
| 部署形态 | 面板可读 | 探测 | 管理端（2FA） |
|
||||
| --- | --- | --- | --- |
|
||||
| 本地 Node | ✅ | ✅ | ✅ |
|
||||
| Cloudflare Workers | ✅ | ✅ | ❌ 403 |
|
||||
| GitHub Pages / EdgeOne Pages（纯静态） | ✅ | ❌（仅展示 CI 产出的快照） | ❌ 不存在 |
|
||||
|
||||
边缘形态访问 `/admin` 或 `/api/admin/*` 会得到 **403 + 指向本文的提示**，而不是 404 —— 明确表达「这里不提供写能力」，避免访客把 404 误读成路径写错。
|
||||
|
||||
这不是「没做」，而是这些能力依赖本地状态：2FA 档案与会话存在 `data/` 目录与进程内存中，而 Workers 无文件系统、isolate 之间不共享内存（KV 又是最终一致，无法承载「恢复码一次性使用」这类语义）。
|
||||
|
||||
### 远程访问
|
||||
|
||||
探针在内网时若需从外网访问 `/admin`，用 `settings.admin.allowRemote` 打开远程访问（**默认关闭**，此时只监听 `127.0.0.1`）：
|
||||
|
||||
```jsonc
|
||||
// local.monitors.json
|
||||
{ "settings": { "admin": { "allowRemote": true } } }
|
||||
```
|
||||
|
||||
**怎么把流量送到这个端口由你决定**（反向代理 / 隧道 / VPN / 直连公网 IP），本项目不做任何假设。唯一要提醒的是：打开后该端口同时伺服公开面板，也就是说 `/` 与 `/api/status` 也会跟着对外可达 —— 这两项本身只读，但目标名称、地址与可用率会一并暴露。若不希望如此，请在你自己的那层按路径收窄。
|
||||
|
||||
### 配置接口不得泄露密钥
|
||||
|
||||
`/api/monitors` 与 Worker 上的同名接口都**无鉴权**，因此对外响应一律剥离 `uptimeRobot.apiKey`（保留 `enabled` 等非敏感字段供面板读取）。探针内部同步 UptimeRobot 仍使用完整配置，剥离只作用于 HTTP 出口。`/api/status` 与静态 `monitors.json` 同样不含私有层内容。
|
||||
|
||||
### 跨域只读白名单（CORS）
|
||||
|
||||
面板部署在别处（GitHub Pages / Cloudflare）、探针在另一台机器时，需要让指定页面跨域读取状态与配置。配置项：`settings.dataUrl`（面板去哪里取数据）与 `settings.corsOrigins`（允许哪些页面读取）。
|
||||
|
||||
核心风险是「任意网站都能读走监控数据」，措施：
|
||||
|
||||
| 风险 | 措施 |
|
||||
| --- | --- |
|
||||
| 开放成 `*` 导致任意网站可读 | **代码里不存在 `*` 分支**：白名单里写 `*` 不会放行任何来源（已加断言） |
|
||||
| 本机回环被任意端口冒用 | 默认只放行 `localhost` / `127.0.0.1` 且**忽略端口**（本地前端常跑 5173）；其余必须精确匹配完整 origin |
|
||||
| 前缀伪造域名（`https://you.github.io.evil.com`） | 精确字符串匹配，不做子串判断（已加断言） |
|
||||
| 协议降级（`https://localhost` 冒用 http 的默认项） | 协议必须一致才走回环豁免（已加断言） |
|
||||
| 中间缓存串味（把 A 的响应给 B） | 回显具体 origin 并带 `Vary: Origin` |
|
||||
| **外部页面读取或改写管理端** | `/admin` 与 `/api/admin/*` **一律不带 `Access-Control-*` 头**，预检直接 403（已加断言） |
|
||||
| 外部页面借 CORS 触发有副作用的调用 | `/api/admin/*` 完全不放行；`/api/refresh` 另有 `refreshDecision` 的限流与 `refreshLocalOnly` 兜底 |
|
||||
| 跨域读到密钥 | 跨域响应与同源响应走同一套剥离逻辑，`uptimeRobot.apiKey` 不会回吐（已加断言） |
|
||||
|
||||
### 威胁模型与对应措施
|
||||
|
||||
| 威胁 | 措施 |
|
||||
| --- | --- |
|
||||
| 未绑定就被抢先接管管理端 | 绑定需 `SHIROKO_ADMIN_SETUP_KEY`；未绑定时 `/api/admin/*` 除绑定流程外**一律 403**；未设置该环境变量时绑定入口直接关闭（503） |
|
||||
| 未授权者经外部网络访问管理端 | 打开 `allowRemote` 后，防护完全依赖管理端的 TOTP 校验 + 会话哈希 + 失败限流三重；默认不监听外部地址 |
|
||||
| 配置接口泄露 UptimeRobot Key | 对外响应剥离 `uptimeRobot.apiKey`；内部同步仍用完整配置（有断言覆盖两侧） |
|
||||
| 面板成为探测他人管理面的跳板 | 管理入口链接只接受 `http`/`https`，`javascript:` 等协议被服务端拒绝；不配置则不渲染入口 |
|
||||
| 恶意枚举 6 位码（100 万种） | 按 IP 计数，连续 5 次失败后指数退避锁定（1m → 2m → 4m …上限 30m）；锁定期间即使验证码正确也拒绝 |
|
||||
| 会话 id 被窃取 | id 为 32 字节随机数，**服务端只存 SHA-256 哈希**；cookie 为 `HttpOnly`（JS 读不到）+ `SameSite=Strict`；30 分钟空闲失效、最长 2 小时；进程重启清空全部会话 |
|
||||
| 截图复用验证码 | 记录最近使用的 TOTP counter，**同一时间步的码用过即作废** |
|
||||
| 恢复码泄露 | 只存 SHA-256 哈希（带随机盐），一次性使用，用后立刻从档案中移除 |
|
||||
| 伪造来源 IP 绕过限流 | **只信任 socket 对端地址，不解析 `X-Forwarded-For`**（可被任意伪造）。若前面挂了反向代理/隧道，对端地址是代理节点，因此限流是按代理 IP 而非真实客户端统计的 —— 这是有代理层时的已知粒度损失 |
|
||||
| 篡改请求 | `Path=/` + `HttpOnly` + `SameSite=Strict`；请求体上限 64KB，超出返回 413；参数逐项白名单校验（如 `probeScope` 只接受三个枚举值、`adminUrl` 只接受 http/https） |
|
||||
| 通过管理端把密钥写进仓库 | **所有写操作只落 `local.monitors.json`**（私有、已 gitignore），绝不改 `public/monitors.json` |
|
||||
|
||||
### 已知限制（请按需叠加外部措施）
|
||||
|
||||
- **会话 cookie 未设 `Secure`**：纯 HTTP 下设置 `Secure` 会导致 cookie 完全不发送，管理端直接不可用。部署到公网时请放在 HTTPS 反向代理之后，由代理层负责加密传输
|
||||
- **绑定口令 `SHIROKO_ADMIN_SETUP_KEY` 只能从环境变量读取**，不写入任何文件；重启后需要重新设置才能再次绑定或重置
|
||||
- **2FA 档案（`data/admin-2fa.json`）是明文 secret**：该文件权限应仅限运行用户，且 `data/` 已在 `.gitignore` 中
|
||||
- **会话存在内存里**：多实例部署时各实例的会话不共享，需要粘性会话或改为单实例
|
||||
- **忘记 2FA 且忘记绑定口令**时只能停服务、删除 `data/admin-2fa.json` 后重新绑定
|
||||
|
||||
### 验证方式
|
||||
|
||||
```bash
|
||||
node scripts/verify-admin.cjs # 102 项：RFC 向量 / 绑定 / 会话 / 防重放 / 限流 / HTTP 边界 / 页面流程
|
||||
```
|
||||
|
||||
该脚本会先用 **RFC 4226 与 RFC 6238 官方测试向量**校验自实现的 TOTP（这是整个 2FA 的地基），再覆盖绑定流程、会话生命周期、恢复码一次性、防重放、失败限流，以及「未绑定时所有写接口必须 403」这类鉴权边界。
|
||||
|
||||
## 五、其他基线
|
||||
|
||||
- `.gitignore` 已包含 `local.monitors.json` 与 `.dev.vars`（Cloudflare 本地密钥）
|
||||
- Worker 的 `REFRESH_TOKEN` 用 `wrangler secret put REFRESH_TOKEN` 管理，不要写进 `wrangler.toml`
|
||||
- 面板为只读前端：无 cookie、无写入接口、无服务端会话；渲染配置字段时统一做 HTML 转义（`escapeHtml`），XSS 面仅剩配置自身
|
||||
- Node 探针同时充当静态服务器，**不要直接暴露公网**；确实需要时在其前方加带认证的反向代理，并设 `allowRefresh: false`
|
||||
- **UptimeRobot API Key 在 Worker 上必须用 `wrangler secret put UPTIMEROBOT_API_KEY`**，写进 `public/monitors.json` 会随静态资源公开。只用 `ur*` 开头的只读 Key
|
||||
- **公开面板**（`/`）仍是只读前端：无 cookie、无写入接口、无服务端会话；渲染配置字段时统一做 HTML 转义（`escapeHtml`），XSS 面仅剩配置自身。管理能力全部隔离在 `/admin` 与 `/api/admin/*`（需会话）
|
||||
- Node 探针同时充当静态服务器，**默认只监听 `127.0.0.1`**；需要远程访问时用 `settings.admin.allowRemote=true` 显式打开，并确保前置代理已启用 HTTPS
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 431 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 324 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 924 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 243 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 407 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 260 KiB |
@@ -0,0 +1,128 @@
|
||||
/**
|
||||
* UptimeRobot 只读数据源（API v2）—— Cloudflare Workers 版
|
||||
*
|
||||
* 与 prober/node/lib/uptimerobot.js 共用同一份语义（术语对齐见该文件顶部注释），
|
||||
* 但按 Workers 环境改了两处：
|
||||
* 1. 没有 node:crypto / node:fs，API Key 从 env（wrangler secret）读取
|
||||
* 2. 限流改为「按 KV 里记录的上次同步时间判断」，KV 最终一致对分钟级同步无影响
|
||||
*
|
||||
* 只读：仅调用 getMonitors，不做任何写操作，因此用 ur* 开头的只读 Key 即可。
|
||||
*/
|
||||
|
||||
const API_URL = 'https://api.uptimerobot.com/v2/getMonitors';
|
||||
const TYPE_LABEL = { 1: 'HTTP', 2: 'KEYWORD', 3: 'PING', 4: 'PORT' };
|
||||
|
||||
// 暂停/未检测都归入 pending：否则会被误报成「离线」
|
||||
const STATUS_MAP = { 0: 'pending', 1: 'pending', 2: 'up', 8: 'down', 9: 'down' };
|
||||
|
||||
function splitNums(value) {
|
||||
return String(value ?? '').split('-').map(Number).filter(Number.isFinite);
|
||||
}
|
||||
|
||||
function ratiosToObject(value, ratios) {
|
||||
const nums = splitNums(value);
|
||||
const out = {};
|
||||
ratios.forEach((r, i) => { if (Number.isFinite(nums[i])) out[r] = nums[i]; });
|
||||
return out;
|
||||
}
|
||||
|
||||
function targetOf(m) {
|
||||
if (m.type === 4 && m.port) return `${m.url ? `${m.url}:` : ''}${m.port}`;
|
||||
return m.url || '';
|
||||
}
|
||||
|
||||
function latestDownReason(logs) {
|
||||
const down = (logs ?? []).find((l) => l.type === 1);
|
||||
const reason = down?.reason;
|
||||
if (!reason) return null;
|
||||
const code = String(reason.code ?? '').trim();
|
||||
const detail = String(reason.detail ?? '').trim();
|
||||
return { code: code || null, text: [code, detail].filter(Boolean).join(' ') || null };
|
||||
}
|
||||
|
||||
/** 把 UptimeRobot 的 getMonitors 响应映射成内部结构（纯函数，可离线单测） */
|
||||
export function mapUptimeRobotMonitors(payload, options = {}) {
|
||||
const group = options.group || 'UptimeRobot';
|
||||
const ratios = options.ratios ?? [1, 7, 30, 90];
|
||||
const now = options.now ?? Date.now();
|
||||
const historyLimit = options.historyLimit ?? 48;
|
||||
const monitors = [];
|
||||
|
||||
for (const m of payload?.monitors ?? []) {
|
||||
const status = STATUS_MAP[m.status] ?? 'pending';
|
||||
const samples = Array.isArray(m.response_times) ? m.response_times : [];
|
||||
const logs = Array.isArray(m.logs) ? m.logs : [];
|
||||
// UR 侧的真实检测时刻：正常取最新响应样本，故障取最近一次故障日志
|
||||
const lastCheckSec = status === 'down' ? logs.find((l) => l.type === 1)?.datetime : samples[0]?.datetime;
|
||||
const lastCheckIso = new Date((Number(lastCheckSec) || Math.floor(now / 1000)) * 1000).toISOString();
|
||||
|
||||
const history = samples
|
||||
.slice(0, historyLimit)
|
||||
.map((s) => ({ t: new Date(s.datetime * 1000).toISOString(), ok: Number(s.value) > 0, ms: Math.max(0, Number(s.value) || 0) }))
|
||||
.reverse();
|
||||
if (status === 'down') history.push({ t: lastCheckIso, ok: false, ms: 0 });
|
||||
|
||||
const last = samples[0]?.value;
|
||||
const avg = m.average_response_time;
|
||||
const latency = Number.isFinite(Number(last)) && Number(last) > 0
|
||||
? Math.round(Number(last))
|
||||
: Number.isFinite(Number(avg)) ? Math.round(Number(avg)) : null;
|
||||
|
||||
const reason = latestDownReason(logs);
|
||||
let detail;
|
||||
if (status === 'up') detail = 'UptimeRobot：运行正常';
|
||||
else if (status === 'down') detail = `UptimeRobot：${reason?.text ?? '连接失败'}`;
|
||||
else detail = m.status === 0 ? 'UptimeRobot：监控已暂停' : 'UptimeRobot：尚未检测';
|
||||
|
||||
monitors.push({
|
||||
id: `ur-${m.id}`,
|
||||
name: m.friendly_name || `UptimeRobot #${m.id}`,
|
||||
group,
|
||||
type: 'ur',
|
||||
url: targetOf(m),
|
||||
source: 'uptimerobot',
|
||||
sourceId: m.id,
|
||||
sourceType: m.type,
|
||||
sourceLabel: TYPE_LABEL[m.type] ?? `TYPE${m.type}`,
|
||||
interval: Number(m.interval) || 300,
|
||||
status,
|
||||
latency,
|
||||
code: status === 'down' && reason?.code ? Number(reason.code) || null : null,
|
||||
detail,
|
||||
lastCheckIso,
|
||||
history,
|
||||
uptimeRatios: ratiosToObject(m.custom_uptime_ratio, ratios),
|
||||
downSeconds: ratiosToObject(m.custom_down_durations, ratios),
|
||||
});
|
||||
}
|
||||
return monitors;
|
||||
}
|
||||
|
||||
/**
|
||||
* 拉取 UptimeRobot 监控列表。
|
||||
* @param {string} apiKey
|
||||
* @param {{ratios?: number[], timeoutMs?: number}} [options]
|
||||
*/
|
||||
export async function fetchUptimeRobotMonitors({ apiKey, ratios = [1, 7, 30, 90], timeoutMs = 15000 }) {
|
||||
if (!apiKey) throw new Error('缺少 UptimeRobot API Key');
|
||||
const body = new URLSearchParams({
|
||||
api_key: apiKey,
|
||||
format: 'json',
|
||||
response_times: '1',
|
||||
response_times_average: '30',
|
||||
custom_uptime_ratios: ratios.join('-'),
|
||||
logs: '1',
|
||||
log_types: '1-2',
|
||||
// 注意：custom_down_durations 不能作为请求参数传入（v2 会返回 invalid_parameter）
|
||||
});
|
||||
const res = await fetch(API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/x-www-form-urlencoded', accept: 'application/json' },
|
||||
body,
|
||||
signal: AbortSignal.timeout(timeoutMs),
|
||||
});
|
||||
if (!res.ok) throw new Error(`UptimeRobot HTTP ${res.status}`);
|
||||
const payload = await res.json();
|
||||
if (payload.stat !== 'ok') throw new Error(`UptimeRobot 返回错误：${payload.error?.message || payload.error?.type || 'unknown'}`);
|
||||
return mapUptimeRobotMonitors(payload, { ratios });
|
||||
}
|
||||
+138
-5
@@ -2,16 +2,21 @@
|
||||
* shiroko-monitor 边缘探针（Cloudflare Workers）
|
||||
*
|
||||
* - scheduled：cron 每分钟触发一轮探测（HTTP 用 fetch，TCP 用 cloudflare:sockets）
|
||||
* 探测目标 = 配置里的自建目标 + UptimeRobot 只读镜像目标（与本地 Node 探针同口径）
|
||||
* - 状态与历史心率整体存于 KV 的 state 键（小规模单键足够，上限 25MB）
|
||||
* - /api/status、/api/monitors、/api/refresh 由本 Worker 提供，其余请求交给静态资源
|
||||
*
|
||||
* 管理端说明：本 Worker 不提供任何写接口，/admin 与 /api/admin/* 一律拒绝
|
||||
* （管理操作在本地 Node 探针侧完成，见 docs/DEPLOYMENT.md）。
|
||||
*
|
||||
* 注意：cloudflare:sockets 的 TCP 出站连接需要 Workers 付费计划；
|
||||
* 免费计划下 http 类型探测与静态面板均可正常使用，tcp 类型会返回 down。
|
||||
*/
|
||||
|
||||
import { connect } from 'cloudflare:sockets';
|
||||
import { fetchUptimeRobotMonitors } from './uptimerobot.js';
|
||||
|
||||
const VERSION = '0.6.0';
|
||||
const VERSION = '0.12.2';
|
||||
const HISTORY_LIMIT = 48;
|
||||
const UPTIME_DAYS = 90;
|
||||
const USER_AGENT = 'shiroko-monitor/0.3 (lightweight uptime panel)';
|
||||
@@ -35,17 +40,28 @@ export default {
|
||||
async fetch(request, env, ctx) {
|
||||
const url = new URL(request.url);
|
||||
if (url.pathname === '/api/status') return json(await getStatus(env, ctx));
|
||||
if (url.pathname === '/api/monitors') return json(await getMonitors(env, request.url));
|
||||
if (url.pathname === '/api/monitors') return json(stripSecrets(await getMonitors(env, request.url)));
|
||||
if (url.pathname === '/api/refresh') {
|
||||
// 公网上的强制探测必须显式开启，避免被任意访客当作「探测放大器」使用
|
||||
const gate = refreshGate(env, request);
|
||||
if (!gate.ok) return json({ error: gate.error }, { status: gate.status });
|
||||
return json(await runChecksDedup(env));
|
||||
}
|
||||
// 管理端只存在于本地 Node 探针：这里显式拒绝而非落到静态资源，
|
||||
// 避免访客把 404 误读成「路径写错」，也确保 Worker 侧没有任何可写面
|
||||
if (url.pathname === '/admin' || url.pathname.startsWith('/api/admin')) {
|
||||
return json({
|
||||
error: 'admin-not-here',
|
||||
hint: '管理端（含 2FA）只在本地 Node 探针上运行，不在 Cloudflare Worker 上。部署方式见 docs/DEPLOYMENT.md',
|
||||
}, { status: 403 });
|
||||
}
|
||||
return env.ASSETS.fetch(request);
|
||||
},
|
||||
};
|
||||
|
||||
// 供 scripts/verify-worker.cjs 离线单测 runChecks（生产路径不依赖它）
|
||||
export const __test = { runChecks, mapStatus: null };
|
||||
|
||||
// 未配置 REFRESH_TOKEN 时一律拒绝（wrangler secret put REFRESH_TOKEN 开启）；
|
||||
// 比较采用等长逐字节异或，避免按字符提前返回带来的时序差异
|
||||
function refreshGate(env, request) {
|
||||
@@ -94,6 +110,14 @@ async function getMonitors(env, baseUrl) {
|
||||
return { settings: {}, monitors: [] };
|
||||
}
|
||||
|
||||
// 对外提供配置时必须剥掉密钥：/api/monitors 无鉴权，而配置里可能含 UptimeRobot API Key
|
||||
// （该 Key 以 secret 形式传入 env，不写进 monitors.json，但手动写进 KV 的配置可能带）
|
||||
function stripSecrets(config) {
|
||||
const ur = config?.settings?.uptimeRobot;
|
||||
if (!ur) return config;
|
||||
return { ...config, settings: { ...config.settings, uptimeRobot: { ...ur, apiKey: undefined } } };
|
||||
}
|
||||
|
||||
async function getStatus(env, ctx) {
|
||||
const state = (await env.MONITOR_KV.get('state', 'json')) ?? { monitors: {}, generatedAt: null };
|
||||
if (!state.generatedAt) ctx.waitUntil(runChecks(env));
|
||||
@@ -154,14 +178,98 @@ async function runChecks(env) {
|
||||
const state = (await env.MONITOR_KV.get('state', 'json')) ?? { monitors: {} };
|
||||
const monitors = state.monitors ?? {};
|
||||
const redact = config.settings?.redactDetails === true;
|
||||
|
||||
// 探测范围与展示口径解耦：dataFilter 只管展示，probeScope 决定真正发请求的范围
|
||||
const filter = ['both', 'config', 'uptimerobot'].includes(config.settings?.dataFilter) ? config.settings.dataFilter : 'both';
|
||||
const scope = ['all', 'config', 'uptimerobot'].includes(config.settings?.probeScope)
|
||||
? config.settings.probeScope
|
||||
: (filter === 'both' ? 'all' : filter);
|
||||
|
||||
// UptimeRobot 目标：只拉取不探测。同步失败时保留上次数据，绝不因此把目标判为离线
|
||||
const urCfg = config.settings?.uptimeRobot ?? {};
|
||||
const urKey = String(urCfg.apiKey || '').trim();
|
||||
const urEnabled = urCfg.enabled === true && Boolean(urKey);
|
||||
const urStatus = state.sources?.uptimerobot ?? { enabled: false, ok: null, count: 0 };
|
||||
let urList = [];
|
||||
if (scope !== 'config' && urEnabled) {
|
||||
try {
|
||||
const ratios = Array.isArray(urCfg.ratios) && urCfg.ratios.length ? urCfg.ratios.map(Number).filter(Number.isFinite) : [1, 7, 30, 90];
|
||||
urList = await fetchUptimeRobotMonitors({ apiKey: urKey, ratios });
|
||||
urStatus.enabled = true;
|
||||
urStatus.ok = true;
|
||||
urStatus.error = null;
|
||||
urStatus.count = urList.length;
|
||||
urStatus.lastSyncAt = new Date().toISOString();
|
||||
} catch (err) {
|
||||
urStatus.enabled = true;
|
||||
urStatus.ok = false;
|
||||
urStatus.error = String(err?.message ?? err);
|
||||
}
|
||||
}
|
||||
|
||||
// 本轮要处理的全部目标：自建（scope 含 config）+ UR 镜像（scope 含 uptimerobot）
|
||||
const localTargets = scope === 'uptimerobot' ? [] : (config.monitors ?? []);
|
||||
const urTargets = scope === 'config' ? [] : urList;
|
||||
const urById = new Map(urTargets.map((m) => [m.id, m]));
|
||||
|
||||
let up = 0;
|
||||
let down = 0;
|
||||
let pending = 0;
|
||||
let latencySum = 0;
|
||||
let latencyCount = 0;
|
||||
|
||||
// 本次同步没拿到数据时（失败或被限流跳过），沿用上一轮已写入快照的 UR 目标：
|
||||
// 直接保留其 status / meta / uptimeRatios，只更新 daily 分桶，绝不把目标改成离线或删掉。
|
||||
// 注意不能直接复用 urTargets 里的旧对象——那需要 meta 里的名称/地址，缺了就渲染不出行。
|
||||
const urSource = urTargets.length
|
||||
? urTargets.map((m) => ({ ...m, _fresh: true }))
|
||||
: Object.entries(monitors)
|
||||
.filter(([, s]) => s.meta?.source === 'uptimerobot')
|
||||
.map(([id, s]) => ({
|
||||
id,
|
||||
name: s.meta.name,
|
||||
group: s.meta.group,
|
||||
url: s.meta.url,
|
||||
sourceLabel: s.meta.sourceLabel,
|
||||
interval: s.meta.interval,
|
||||
status: s.status,
|
||||
latency: s.latency,
|
||||
code: s.code,
|
||||
detail: s.detail,
|
||||
lastCheckIso: s.lastCheck,
|
||||
history: s.history ?? [],
|
||||
uptimeRatios: s.uptimeRatios,
|
||||
_fresh: false,
|
||||
}));
|
||||
|
||||
for (const m of urSource) {
|
||||
const prev = monitors[m.id];
|
||||
const daily = { ...(prev?.daily ?? {}) };
|
||||
const key = dayKey();
|
||||
const bucket = daily[key] ?? (daily[key] = { total: 0, up: 0 });
|
||||
bucket.total++;
|
||||
if (m.status === 'up') bucket.up++;
|
||||
pruneDaily(daily);
|
||||
|
||||
monitors[m.id] = {
|
||||
status: m.status,
|
||||
latency: m.latency ?? null,
|
||||
code: m.code ?? null,
|
||||
detail: redact ? (m.status === 'up' ? '正常' : '异常') : m.detail,
|
||||
lastCheck: m.lastCheckIso ?? new Date().toISOString(),
|
||||
// meta 让面板认出这是外部数据源目标（名称/分组/协议都来自 UR 侧）
|
||||
meta: { name: m.name, group: m.group ?? 'UptimeRobot', url: m.url ?? '', source: 'uptimerobot', sourceLabel: m.sourceLabel ?? 'HTTP', interval: m.interval ?? 300, type: 'ur' },
|
||||
uptimeRatios: m.uptimeRatios,
|
||||
history: m.history ?? [],
|
||||
daily,
|
||||
};
|
||||
if (m.status === 'up') { up++; if (m.latency != null) { latencySum += m.latency; latencyCount++; } }
|
||||
else if (m.status === 'down') down++;
|
||||
else pending++;
|
||||
}
|
||||
|
||||
await Promise.all(
|
||||
(config.monitors ?? []).map(async (m) => {
|
||||
localTargets.map(async (m) => {
|
||||
const prev = monitors[m.id];
|
||||
const r = await probeMonitor(m);
|
||||
r.checkedAt = new Date().toISOString();
|
||||
@@ -187,12 +295,21 @@ async function runChecks(env) {
|
||||
up++;
|
||||
latencySum += r.latency ?? 0;
|
||||
latencyCount++;
|
||||
} else {
|
||||
} else if (r.status === 'down') {
|
||||
down++;
|
||||
} else {
|
||||
pending++;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
// UR 侧已删除的监控要从面板移除，避免残留僵尸条目
|
||||
if (scope !== 'config' && urEnabled && urStatus.ok && urById.size) {
|
||||
for (const [id, s] of Object.entries(monitors)) {
|
||||
if (s.meta?.source === 'uptimerobot' && !urById.has(id)) delete monitors[id];
|
||||
}
|
||||
}
|
||||
|
||||
let uptimeUp = 0;
|
||||
let uptimeTotal = 0;
|
||||
for (const m of Object.values(monitors)) {
|
||||
@@ -202,12 +319,28 @@ async function runChecks(env) {
|
||||
}
|
||||
}
|
||||
|
||||
// 与本地探针保持同一份快照口径：dataUpdatedAt / updateIntervalSec / dataFilter
|
||||
// 面板据此把倒计时对齐服务端节奏，并按同一过滤口径展示
|
||||
const intervals = [];
|
||||
if (filter !== 'uptimerobot') {
|
||||
for (const m of config.monitors ?? []) {
|
||||
const n = Number(m.interval);
|
||||
if (Number.isFinite(n) && n > 0) intervals.push(n);
|
||||
}
|
||||
}
|
||||
|
||||
const next = {
|
||||
prober: `shiroko-monitor-worker/${VERSION}`,
|
||||
demo: false,
|
||||
generatedAt: new Date().toISOString(),
|
||||
// state.generatedAt 是上一轮探测完成的时间，即「数据最后变更时刻」
|
||||
dataUpdatedAt: state.generatedAt ?? new Date().toISOString(),
|
||||
updateIntervalSec: Math.max(5, Math.round(intervals.length ? Math.min(...intervals) : 60)),
|
||||
dataFilter: filter,
|
||||
probeScope: scope,
|
||||
sources: { uptimerobot: { ...urStatus, syncing: false } },
|
||||
stats: {
|
||||
total: (config.monitors ?? []).length,
|
||||
total: localTargets.length + urSource.length,
|
||||
up,
|
||||
down,
|
||||
pending,
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "shiroko-monitor",
|
||||
"version": "0.1.0",
|
||||
"description": "轻量级服务监控面板：纯静态前端 + Node/边缘探针，支持 HTTP 与 TCP 探测",
|
||||
"version": "0.12.3",
|
||||
"description": "轻量级服务监控面板：纯静态前端 + Node/边缘探针，支持 HTTP/TCP 探测、UptimeRobot 数据源与 2FA 管理端",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node prober/node/index.js",
|
||||
|
||||
+502
-20
@@ -20,6 +20,10 @@ import { probeHttp } from './lib/http-probe.js';
|
||||
import { probeTcp } from './lib/tcp-probe.js';
|
||||
import { probeBanner } from './lib/banner-probe.js';
|
||||
import { fetchUptimeRobotMonitors } from './lib/uptimerobot.js';
|
||||
import { notifyAll, sendTestNotifications, createMeoWLimiter } from './lib/notify.js';
|
||||
import { probeCertificate, tlsTargetOf } from './lib/tls-probe.js';
|
||||
import { createAdminAuth } from './lib/admin.js';
|
||||
import { createAdminRouter } from './lib/admin-routes.js';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const ROOT = path.resolve(__dirname, '../..');
|
||||
@@ -35,13 +39,15 @@ const CONCURRENCY = 8;
|
||||
const WRITE_DEBOUNCE_MS = 300;
|
||||
const DEFAULT_INTERVAL_SEC = 60;
|
||||
const PORT = Number(process.env.PORT || 8787);
|
||||
const VERSION = '0.6.0';
|
||||
const VERSION = '0.12.2';
|
||||
const UR_DEFAULT_POLL_SEC = 300;
|
||||
const UR_MIN_REFRESH_GAP_MS = 60000;
|
||||
|
||||
const argv = process.argv.slice(2);
|
||||
const ONCE = argv.includes('--once');
|
||||
const DEMO = argv.includes('--demo');
|
||||
// --test-notify：只给各通知渠道发一条自检消息后退出（不探测、不写快照）
|
||||
const TEST_NOTIFY = argv.includes('--test-notify');
|
||||
|
||||
// --out=<path> 或 --out <path>：指定快照输出路径（默认 public/status.json）
|
||||
function argValue(name) {
|
||||
@@ -54,6 +60,10 @@ const OUT_PATH = path.resolve(argValue('--out') || STATUS_PATH);
|
||||
// --config / --local-config：多实例或测试时指定配置文件（默认 public/monitors.json 与仓库根的私有覆盖）
|
||||
const CONFIG_OVERRIDE = argValue('--config');
|
||||
const LOCAL_CONFIG_OVERRIDE = argValue('--local-config');
|
||||
// --data-dir=<path>：通知状态与事件时间线的存放目录（默认 ./data，也可用环境变量 SHIROKO_DATA_DIR）
|
||||
if (argValue('--data-dir')) process.env.SHIROKO_DATA_DIR = argValue('--data-dir');
|
||||
// 私有数据目录：通知状态（告警去抖）与事件时间线，含本机运行痕迹，默认不入库
|
||||
const DATA_DIR = process.env.SHIROKO_DATA_DIR ? path.resolve(process.env.SHIROKO_DATA_DIR) : path.join(ROOT, 'data');
|
||||
const ACTIVE_CONFIG_PATH = CONFIG_OVERRIDE ? path.resolve(CONFIG_OVERRIDE) : CONFIG_PATH;
|
||||
const ACTIVE_LOCAL_CONFIG_PATH = LOCAL_CONFIG_OVERRIDE ? path.resolve(LOCAL_CONFIG_OVERRIDE) : LOCAL_CONFIG_PATH;
|
||||
|
||||
@@ -67,6 +77,7 @@ const MIME = {
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.ico': 'image/x-icon',
|
||||
'.webp': 'image/webp',
|
||||
'.woff2': 'font/woff2',
|
||||
};
|
||||
|
||||
@@ -91,6 +102,20 @@ function loadLocalOverlay() {
|
||||
}
|
||||
}
|
||||
|
||||
// 对外提供配置时必须剥掉密钥：/api/monitors 无鉴权，而合并后的 config 含私有层的
|
||||
// UptimeRobot API Key（以及未来的其他凭据）。面板只需要非敏感的 settings 字段。
|
||||
function publicConfig(config) {
|
||||
const ur = config.settings?.uptimeRobot;
|
||||
if (!ur) return config;
|
||||
return {
|
||||
...config,
|
||||
settings: {
|
||||
...config.settings,
|
||||
uptimeRobot: { ...ur, apiKey: undefined },
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function loadPersistedStatus() {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(STATUS_PATH, 'utf8'));
|
||||
@@ -110,14 +135,43 @@ function pruneDaily(daily) {
|
||||
while (keys.length > UPTIME_DAYS) delete daily[keys.shift()];
|
||||
}
|
||||
|
||||
function recordDaily(daily, ok) {
|
||||
// 记录一次探测到「当日分桶」；latency 仅在在线时传入（离线结果没有有意义的延迟）
|
||||
// 同时累计延迟统计（sum/count/max），用于面板的 90 天延迟趋势
|
||||
function recordDaily(daily, ok, latency = null) {
|
||||
const key = dayKey();
|
||||
const bucket = daily[key] ?? (daily[key] = { total: 0, up: 0 });
|
||||
bucket.total++;
|
||||
if (ok) bucket.up++;
|
||||
if (ok) {
|
||||
bucket.up++;
|
||||
if (Number.isFinite(latency) && latency >= 0) {
|
||||
bucket.latSum = (bucket.latSum ?? 0) + latency;
|
||||
bucket.latCount = (bucket.latCount ?? 0) + 1;
|
||||
bucket.latMax = Math.max(bucket.latMax ?? 0, latency);
|
||||
}
|
||||
}
|
||||
pruneDaily(daily);
|
||||
}
|
||||
|
||||
// 从分桶聚合延迟趋势（90 天）：返回 { avg, max, days: [{ key, avg }] }
|
||||
function latencyTrend(daily) {
|
||||
const keys = Object.keys(daily ?? {}).sort();
|
||||
const days = [];
|
||||
let sum = 0;
|
||||
let count = 0;
|
||||
let max = 0;
|
||||
for (const key of keys) {
|
||||
const b = daily[key];
|
||||
if (!b?.latCount) continue;
|
||||
const avg = Math.round(b.latSum / b.latCount);
|
||||
days.push({ key, avg });
|
||||
sum += b.latSum;
|
||||
count += b.latCount;
|
||||
max = Math.max(max, b.latMax ?? 0);
|
||||
}
|
||||
if (!count) return null;
|
||||
return { avg: Math.round(sum / count), max, days };
|
||||
}
|
||||
|
||||
function intervalMs(monitor) {
|
||||
const sec = Number(monitor.interval);
|
||||
// 非法或缺失的 interval 一律回落到默认值，避免算出 NaN 让该目标永久不再被调度
|
||||
@@ -172,7 +226,7 @@ async function syncUptimeRobot(runtime, { minGapMs = 0 } = {}) {
|
||||
s.history = item.history;
|
||||
s.uptimeRatios = item.uptimeRatios;
|
||||
s.downSeconds = item.downSeconds;
|
||||
if (item.status !== 'pending') recordDaily(s.daily, item.status === 'up');
|
||||
if (item.status !== 'pending') recordDaily(s.daily, item.status === 'up', item.latency);
|
||||
}
|
||||
// 清理 UR 侧已删除的监控
|
||||
for (const [id, s] of runtime.state) {
|
||||
@@ -258,7 +312,7 @@ async function probeDue(runtime, force = false) {
|
||||
const { config, state } = runtime;
|
||||
const now = Date.now();
|
||||
const due = [];
|
||||
for (const m of config.monitors) {
|
||||
for (const m of localProbeTargets(config)) {
|
||||
const s = state.get(m.id);
|
||||
if (!s || s.inFlight) continue;
|
||||
// UptimeRobot 镜像目标由其自身节点探测，本探针只拉取结果
|
||||
@@ -279,7 +333,7 @@ async function probeDue(runtime, force = false) {
|
||||
s.lastResult = result;
|
||||
s.history.push({ t: result.checkedAt, ok: result.status === 'up', ms: result.latency ?? 0 });
|
||||
if (s.history.length > HISTORY_LIMIT) s.history.shift();
|
||||
recordDaily(s.daily, result.status === 'up');
|
||||
recordDaily(s.daily, result.status === 'up', result.latency);
|
||||
const tag = result.status === 'up' ? '[up] ' : '[down]';
|
||||
console.log(`${tag} ${m.id.padEnd(20)} ${String(result.latency ?? '-').padStart(5)}ms ${result.detail}`);
|
||||
} catch (err) {
|
||||
@@ -308,7 +362,230 @@ function memoryStats() {
|
||||
return { rssMB: mb(m.rss), heapUsedMB: mb(m.heapUsed), heapTotalMB: mb(m.heapTotal) };
|
||||
}
|
||||
|
||||
/* ---------- 数据源过滤 ---------- */
|
||||
/* ---------- 通知（邮件 / MeoW）、事件时间线、维护窗口与证书监控 ---------- */
|
||||
|
||||
const DEFAULT_TLS_CHECK_SEC = 21600; // 证书默认 6 小时查一次
|
||||
const TLS_ALERT_DAYS = [14, 7, 3];
|
||||
const EVENT_LIMIT = 500;
|
||||
const EVENT_IN_SNAPSHOT = 20;
|
||||
|
||||
function notifyConfig(config) {
|
||||
const n = config.settings?.notify ?? {};
|
||||
const channels = n.channels ?? {};
|
||||
return {
|
||||
enabled: n.enabled === true && Object.values(channels).some((c) => c?.enabled === true),
|
||||
failureThreshold: Math.max(1, Number(n.failureThreshold) || 2),
|
||||
recoveryNotify: n.recoveryNotify !== false,
|
||||
quietHours: n.quietHours ?? null,
|
||||
channels,
|
||||
};
|
||||
}
|
||||
|
||||
function tlsConfig(config) {
|
||||
const t = config.settings?.tls ?? {};
|
||||
const alertDays = Array.isArray(t.alertDays) ? t.alertDays.map(Number).filter(Number.isFinite) : null;
|
||||
return {
|
||||
enabled: t.enabled !== false, // 默认对 https 目标开启
|
||||
checkIntervalSec: Math.max(600, Number(t.checkIntervalSec) || DEFAULT_TLS_CHECK_SEC),
|
||||
alertDays: alertDays?.length ? alertDays.sort((a, b) => b - a) : TLS_ALERT_DAYS,
|
||||
};
|
||||
}
|
||||
|
||||
// 维护窗口：{ from, to, id?: string|string[], note? }；不写 id 表示对所有目标生效
|
||||
function activeMaintenanceFor(config, id, at = new Date()) {
|
||||
const list = config.settings?.maintenance;
|
||||
if (!Array.isArray(list) || !list.length) return null;
|
||||
const t = at.getTime();
|
||||
for (const w of list) {
|
||||
const from = Date.parse(w.from);
|
||||
const to = Date.parse(w.to);
|
||||
if (!Number.isFinite(from) || !Number.isFinite(to) || t < from || t > to) continue;
|
||||
if (!w.id) return w;
|
||||
const ids = Array.isArray(w.id) ? w.id : [w.id];
|
||||
if (ids.includes(id)) return w;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function readJson(file, fallback) {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function writeJson(file, data) {
|
||||
fs.mkdirSync(path.dirname(file), { recursive: true });
|
||||
fs.writeFileSync(file, `${JSON.stringify(data, null, 2)}\n`);
|
||||
}
|
||||
|
||||
const NOTIFY_STATE_PATH = () => path.join(DATA_DIR, 'notify-state.json');
|
||||
const EVENTS_PATH = () => path.join(DATA_DIR, 'events.json');
|
||||
// 2FA 档案：与通知状态同放私有数据目录（data/ 已在 .gitignore 中）
|
||||
const ADMIN_2FA_PATH = () => path.join(DATA_DIR, 'admin-2fa.json');
|
||||
|
||||
function monitorNotifyState(runtime, id) {
|
||||
const list = runtime.notifyState.monitors;
|
||||
if (!list[id]) list[id] = { lastStatus: null, failStreak: 0, lastCheckedAt: null, notifiedTls: [], tlsValidTo: null };
|
||||
return list[id];
|
||||
}
|
||||
|
||||
function appendEvents(runtime, entries) {
|
||||
if (!entries.length) return;
|
||||
runtime.events = [...runtime.events, ...entries].slice(-EVENT_LIMIT);
|
||||
writeJson(EVENTS_PATH(), runtime.events);
|
||||
}
|
||||
|
||||
// 通知 + 事件：每轮探测结束后评估状态翻转（带去抖）、恢复、维护窗口抑制
|
||||
async function evaluateRound(runtime) {
|
||||
const notify = notifyConfig(runtime.config);
|
||||
const events = [];
|
||||
const pendingNotifications = [];
|
||||
let changed = false;
|
||||
|
||||
// 事件与告警覆盖两类目标：本地探测目标 + UptimeRobot 镜像目标
|
||||
// （UR 镜像目标同样会发生状态翻转，只拉数据不告警等于「配了 uptimerobot 口径就收不到任何提醒」）
|
||||
const targets = localProbeTargets(runtime.config).map((m) => ({ id: m.id, name: m.name, target: m.url ?? `${m.host}:${m.port}` }));
|
||||
for (const [id, s] of runtime.state) {
|
||||
if (s.monitor?.source !== 'uptimerobot') continue;
|
||||
targets.push({ id, name: s.monitor.name, target: s.monitor.url ?? '', source: 'uptimerobot' });
|
||||
}
|
||||
|
||||
for (const m of targets) {
|
||||
const r = runtime.state.get(m.id)?.lastResult;
|
||||
if (!r || r.status === 'pending') continue;
|
||||
const st = monitorNotifyState(runtime, m.id);
|
||||
// 去抖计数只应该跟着「新的探测结果」走：本函数每秒被调用，若每次评估都累加，
|
||||
// 一个持续离线的目标会在 1 秒内就凑够「连续失败 N 次」，阈值形同虚设
|
||||
const stamp = r.checkedAt ?? null;
|
||||
if (st.lastCheckedAt !== stamp) {
|
||||
st.lastCheckedAt = stamp;
|
||||
st.failStreak = r.status === 'down' ? (st.failStreak ?? 0) + 1 : 0;
|
||||
changed = true;
|
||||
}
|
||||
const maintenance = activeMaintenanceFor(runtime.config, m.id);
|
||||
const at = new Date().toISOString();
|
||||
|
||||
if (r.status === 'down') {
|
||||
// 去抖：连续失败达到阈值才算确认故障（阈值 1 表示立即告警）
|
||||
if (st.lastStatus === 'down' || st.failStreak < notify.failureThreshold) continue;
|
||||
st.lastStatus = 'down';
|
||||
changed = true;
|
||||
st.lastNotifiedAt = at;
|
||||
events.push({ t: at, id: m.id, name: m.name, type: 'down', detail: r.detail ?? null, maintenance: Boolean(maintenance) });
|
||||
if (!maintenance) {
|
||||
pendingNotifications.push({
|
||||
subject: `【故障】${m.name} 连接失败`,
|
||||
text: `目标：${m.name}\n地址：${m.target}\n时间:${at}\n详情：${r.detail ?? '无'}\n连续失败：${st.failStreak} 次\n\n—— shiroko-monitor`,
|
||||
});
|
||||
}
|
||||
} else if (r.status === 'up') {
|
||||
if (st.lastStatus === null) {
|
||||
st.lastStatus = 'up'; // 首次观测不产生「恢复」噪音
|
||||
changed = true;
|
||||
continue;
|
||||
}
|
||||
if (st.lastStatus === 'down') {
|
||||
st.lastStatus = 'up';
|
||||
st.lastNotifiedAt = at;
|
||||
changed = true;
|
||||
events.push({ t: at, id: m.id, name: m.name, type: 'up', detail: '已恢复', maintenance: Boolean(maintenance) });
|
||||
if (notify.recoveryNotify && !maintenance) {
|
||||
pendingNotifications.push({
|
||||
subject: `【恢复】${m.name} 已恢复正常`,
|
||||
text: `目标：${m.name}\n地址：${m.target}\n恢复时间：${at}\n延迟：${r.latency ?? '—'} ms\n\n—— shiroko-monitor`,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (events.length) {
|
||||
appendEvents(runtime, events);
|
||||
console.log(`[events] 新增 ${events.length} 条：${events.map((e) => `${e.name} ${e.type}`).join('、')}`);
|
||||
}
|
||||
// 汇总成一条通知，避免同一轮多点故障刷屏
|
||||
if (pendingNotifications.length) {
|
||||
const message = pendingNotifications.length === 1
|
||||
? pendingNotifications[0]
|
||||
: {
|
||||
subject: `【${pendingNotifications.length} 个目标状态变化】shiroko-monitor`,
|
||||
text: pendingNotifications.map((p) => p.text).join('\n\n──────────\n\n'),
|
||||
};
|
||||
const res = await notifyAll(notify, message, { logger: console });
|
||||
runtime.notifyState.lastResult = { at: new Date().toISOString(), ...res };
|
||||
changed = true;
|
||||
}
|
||||
// 只在状态真变化时落盘：tick 会每秒调用本函数，无变化时不写文件
|
||||
if (changed) saveNotifyState(runtime);
|
||||
}
|
||||
|
||||
// 证书检查：按 checkIntervalSec 逐个握手，跨阈值时告警（同一张证书每个阈值只告一次）
|
||||
async function checkCertificates(runtime) {
|
||||
const tlsCfg = tlsConfig(runtime.config);
|
||||
if (!tlsCfg.enabled) return;
|
||||
const now = Date.now();
|
||||
const events = [];
|
||||
const messages = [];
|
||||
|
||||
for (const m of localProbeTargets(runtime.config)) {
|
||||
const target = tlsTargetOf(m);
|
||||
if (!target) continue;
|
||||
const prev = runtime.tls.get(m.id);
|
||||
if (prev && now - (prev.checkedAtMs ?? 0) < tlsCfg.checkIntervalSec * 1000) continue;
|
||||
const result = await probeCertificate({ ...target, timeoutMs: Math.max(5, Number(m.timeout) || 8) * 1000 });
|
||||
runtime.tls.set(m.id, { ...result, checkedAt: new Date().toISOString(), checkedAtMs: now });
|
||||
|
||||
const st = monitorNotifyState(runtime, m.id);
|
||||
if (result.error) {
|
||||
console.warn(`[tls] ${m.id} 证书检查失败：${result.error}`);
|
||||
continue;
|
||||
}
|
||||
// 换了证书（validTo 变化）→ 重置已通知阈值，新证书重新提醒
|
||||
if (st.tlsValidTo !== result.validTo) {
|
||||
st.tlsValidTo = result.validTo;
|
||||
st.notifiedTls = [];
|
||||
}
|
||||
const maintenance = activeMaintenanceFor(runtime.config, m.id);
|
||||
// 已过期的证书只报最严重的一档（避免一次刷三条）
|
||||
const thresholds = result.daysLeft <= 0 ? tlsCfg.alertDays.slice(-1) : tlsCfg.alertDays;
|
||||
for (const threshold of thresholds) {
|
||||
if (result.daysLeft > threshold || (st.notifiedTls ?? []).includes(threshold)) continue;
|
||||
st.notifiedTls = [...(st.notifiedTls ?? []), threshold];
|
||||
const at = new Date().toISOString();
|
||||
events.push({ t: at, id: m.id, name: m.name, type: 'tls', detail: `证书剩余 ${result.daysLeft} 天（阈值 ${threshold} 天）`, maintenance: Boolean(maintenance) });
|
||||
if (!maintenance) {
|
||||
messages.push(`- ${m.name}：证书剩余 ${result.daysLeft} 天（到期 ${result.validTo.slice(0, 10)}，签发者 ${result.issuer ?? '未知'}）`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (events.length) {
|
||||
appendEvents(runtime, events);
|
||||
if (messages.length) {
|
||||
const res = await notifyAll(notifyConfig(runtime.config), {
|
||||
subject: `【证书提醒】${messages.length} 个证书即将到期`,
|
||||
text: `${messages.join('\n')}\n\n签发者与到期时间取自实际握手，请及时续期。\n\n—— shiroko-monitor`,
|
||||
}, { logger: console });
|
||||
runtime.notifyState.lastResult = { at: new Date().toISOString(), ...res };
|
||||
}
|
||||
saveNotifyState(runtime);
|
||||
}
|
||||
}
|
||||
|
||||
function saveNotifyState(runtime) {
|
||||
writeJson(NOTIFY_STATE_PATH(), runtime.notifyState);
|
||||
}
|
||||
|
||||
// 通知与证书检查串行执行：避免并发轮次重复发同一条告警
|
||||
function queueEvaluation(runtime, task) {
|
||||
runtime.notifyChain = (runtime.notifyChain ?? Promise.resolve())
|
||||
.then(() => task(runtime))
|
||||
.catch((err) => console.error(`[notify] 评估异常：${err.stack || err.message}`));
|
||||
return runtime.notifyChain;
|
||||
}
|
||||
|
||||
|
||||
// 只影响「展示与快照输出」，不影响探测：配置文件里的目标始终按各自 interval 探测
|
||||
function dataFilter(config) {
|
||||
@@ -316,6 +593,26 @@ function dataFilter(config) {
|
||||
return ['both', 'config', 'uptimerobot'].includes(f) ? f : 'both';
|
||||
}
|
||||
|
||||
// 探测范围（是否真的去探本地配置里的目标）：
|
||||
// 显式设置 settings.probeScope 优先（all | config | uptimerobot）
|
||||
// 未设置时**跟随 dataFilter** —— 面板只要一个来源的数据，就没必要再把另一个来源的目标探测一遍
|
||||
// （既省资源，也避免不必要的对外请求；想保留探测可显式设 "all"）
|
||||
function probeScopeSetting(config) {
|
||||
const p = config.settings?.probeScope;
|
||||
if (['all', 'config', 'uptimerobot'].includes(p)) return p;
|
||||
const f = dataFilter(config);
|
||||
return f === 'both' ? 'all' : f;
|
||||
}
|
||||
|
||||
function externalSyncEnabled(config) {
|
||||
return probeScopeSetting(config) !== 'config';
|
||||
}
|
||||
|
||||
// 本轮需要本地探测的目标（UR 镜像目标不在此列，它们由 UR 节点探测、这里只拉结果）
|
||||
function localProbeTargets(config) {
|
||||
return probeScopeSetting(config) === 'uptimerobot' ? [] : config.monitors;
|
||||
}
|
||||
|
||||
/* ---------- 服务端更新节奏 ---------- */
|
||||
|
||||
// 快照里回报「数据最后变更时刻」与「服务端产出新数据的节奏」，供面板把倒计时对齐到服务端，
|
||||
@@ -348,6 +645,9 @@ function snapshot(runtime, demo = false) {
|
||||
const hideUrls = config.settings?.hideTargets === true;
|
||||
const includeConfig = filter !== 'uptimerobot';
|
||||
const includeExternal = filter !== 'config';
|
||||
// 混合来源时平均延迟只统计自建探测（UR 的延迟来自其探测节点，与本机视角不可比）；
|
||||
// 若展示集合只有外部数据源，则 UR 延迟就是唯一口径，照常统计
|
||||
const latencyEligible = (isUr) => !isUr || filter === 'uptimerobot';
|
||||
const monitors = {};
|
||||
let up = 0;
|
||||
let down = 0;
|
||||
@@ -376,8 +676,7 @@ function snapshot(runtime, demo = false) {
|
||||
}
|
||||
if (r.status === 'up') {
|
||||
up++;
|
||||
// 平均延迟只统计自建探针：UR 的延迟来自其探测节点，与本机视角不可比
|
||||
if (!isUr && r.latency != null) {
|
||||
if (latencyEligible(isUr) && r.latency != null) {
|
||||
latencySum += r.latency;
|
||||
latencyCount++;
|
||||
}
|
||||
@@ -413,7 +712,18 @@ function snapshot(runtime, demo = false) {
|
||||
};
|
||||
entry.uptimeRatios = s.uptimeRatios ?? null;
|
||||
entry.downSeconds = s.downSeconds ?? null;
|
||||
} else {
|
||||
// 证书与维护窗口信息（来自独立的握手检查与配置），供面板打标
|
||||
const tlsInfo = runtime.tls?.get(id);
|
||||
if (tlsInfo) entry.tls = redact
|
||||
? { daysLeft: tlsInfo.daysLeft ?? null, error: tlsInfo.error ? '不可用' : null }
|
||||
: { daysLeft: tlsInfo.daysLeft ?? null, validTo: tlsInfo.validTo ?? null, issuer: tlsInfo.issuer ?? null, checkedAt: tlsInfo.checkedAt ?? null, error: tlsInfo.error ?? null };
|
||||
const maintenance = activeMaintenanceFor(config, id);
|
||||
if (maintenance) entry.maintenance = { note: maintenance.note ?? null, to: maintenance.to ?? null };
|
||||
}
|
||||
// 90 天延迟趋势（自当日分桶聚合，自建与 UR 镜像目标都适用）
|
||||
const trend = latencyTrend(s.daily);
|
||||
if (trend) entry.lat = trend;
|
||||
monitors[id] = entry;
|
||||
}
|
||||
|
||||
@@ -426,6 +736,8 @@ function snapshot(runtime, demo = false) {
|
||||
updateIntervalSec: updateIntervalSec(config, filter),
|
||||
// 让面板与服务端共用同一份过滤口径，避免私有配置覆盖后两边不一致
|
||||
dataFilter: filter,
|
||||
// 探测范围（本地目标 / 外部数据源），面板据此显示「数据源」与是否停止本地探测
|
||||
probeScope: probeScopeSetting(config),
|
||||
stats: {
|
||||
total: entries.length,
|
||||
up,
|
||||
@@ -436,6 +748,25 @@ function snapshot(runtime, demo = false) {
|
||||
memory: memoryStats(),
|
||||
},
|
||||
sources: { uptimerobot: { ...(runtime.ur ?? {}) } },
|
||||
// 通知能力与最近事件（事件含目标名与原因，redactDetails 时只保留类型与时间）
|
||||
notify: (() => {
|
||||
const n = notifyConfig(config);
|
||||
return {
|
||||
enabled: n.enabled,
|
||||
channels: Object.entries(n.channels ?? {}).filter(([, c]) => c?.enabled).map(([k]) => k),
|
||||
quietHours: n.quietHours,
|
||||
failureThreshold: n.failureThreshold,
|
||||
lastResult: runtime.notifyState?.lastResult ?? null,
|
||||
};
|
||||
})(),
|
||||
// 只下发当前展示口径内目标的事件：切到 uptimerobot 口径后不该再看到「已经不管的目标」的旧事件
|
||||
events: (runtime.events ?? [])
|
||||
.filter((e) => monitors[e.id])
|
||||
.slice(-EVENT_IN_SNAPSHOT)
|
||||
.reverse()
|
||||
.map((e) => (redact
|
||||
? { t: e.t, id: e.id, type: e.type, name: e.name, detail: e.type === 'down' ? '异常' : e.type === 'up' ? '恢复' : e.detail, maintenance: e.maintenance }
|
||||
: e)),
|
||||
monitors,
|
||||
};
|
||||
}
|
||||
@@ -484,6 +815,7 @@ function forceRound(runtime) {
|
||||
await settleInflight(runtime.state);
|
||||
runtime.forcedAt = Date.now();
|
||||
scheduleWrite(runtime);
|
||||
queueEvaluation(runtime, evaluateRound);
|
||||
} catch (err) {
|
||||
console.error(`[refresh] 强制探测异常：${err.message}`);
|
||||
} finally {
|
||||
@@ -528,7 +860,10 @@ function writeDemo(config) {
|
||||
const key = dayKey(new Date(Date.now() - d * 86400000));
|
||||
const missRatio = alwaysDown ? 1 : (seed + d * 13) % 23 === 0 ? 0.05 : (seed + d * 7) % 11 === 0 ? 0.012 : 0;
|
||||
const miss = Math.round(perDay * missRatio);
|
||||
daily[key] = { total: perDay, up: perDay - miss };
|
||||
// 演示用延迟：随日期缓慢起伏，让 90 天趋势有形状可看
|
||||
const up = perDay - miss;
|
||||
const avg = alwaysDown ? 0 : 40 + ((seed + d * 5) % 160);
|
||||
daily[key] = { total: perDay, up, latSum: avg * up, latCount: up, latMax: avg + 60 };
|
||||
}
|
||||
s.daily = daily;
|
||||
}
|
||||
@@ -541,6 +876,56 @@ function sendJson(res, data, { status = 200, headers = {} } = {}) {
|
||||
res.end(JSON.stringify(data));
|
||||
}
|
||||
|
||||
/* ---------- 跨域只读（前端可部署在别处，数据源指向本机） ---------- */
|
||||
|
||||
// 允许跨域读取的前端来源。默认放行本机：本地开发时前端页面与探针常常跑在不同端口上
|
||||
// （例如 Vite 的 5173），而 origin 是「协议 + 主机 + 端口」的完整组合，
|
||||
// 因此默认项按「忽略端口」匹配，主机相同即放行。
|
||||
// 部署在 GitHub Pages / Cloudflare 等其它域名时，在 settings.corsOrigins 里显式列出
|
||||
// 完整 origin（含协议与端口，如 https://you.github.io）。绝不使用 '*'：
|
||||
// 那等于让任意网站都能读走监控数据。
|
||||
function corsOrigins(config) {
|
||||
const extra = Array.isArray(config.settings?.corsOrigins)
|
||||
? config.settings.corsOrigins.map((s) => String(s).trim()).filter(Boolean)
|
||||
: [];
|
||||
return { exact: new Set(extra), loopbackHosts: new Set(['127.0.0.1', 'localhost', '[::1]']) };
|
||||
}
|
||||
|
||||
// 请求的 origin 是否在白名单内。主机是本机回环地址时忽略端口（本地开发常见形态），
|
||||
// 其余情况要求完整 origin 精确匹配。
|
||||
function originAllowed(reqOrigin, config) {
|
||||
let u;
|
||||
try { u = new URL(reqOrigin); } catch { return false; }
|
||||
const { exact, loopbackHosts } = corsOrigins(config);
|
||||
if (exact.has(reqOrigin)) return true;
|
||||
return u.protocol === 'http:' && loopbackHosts.has(u.hostname);
|
||||
}
|
||||
|
||||
// 返回跨域响应头；origin 不在白名单时返回空对象（请求本身照常处理，只是浏览器读不到响应）
|
||||
function corsHeaders(req, config) {
|
||||
const origin = req.headers.origin;
|
||||
if (!origin || !originAllowed(origin, config)) return {};
|
||||
return {
|
||||
'access-control-allow-origin': origin, // 回显具体 origin，由白名单保证安全
|
||||
'access-control-allow-methods': 'GET, POST, OPTIONS',
|
||||
'access-control-allow-headers': 'content-type',
|
||||
'access-control-max-age': '86400',
|
||||
vary: 'Origin', // 缓存必须区分 Origin，否则会串味
|
||||
};
|
||||
}
|
||||
|
||||
// 只读接口的预检响应。写接口（/api/refresh、/api/admin/*）不放行 OPTIONS，
|
||||
// 因此外部页面无法用简单请求之外的方式触发有副作用的调用。
|
||||
function handlePreflight(req, res, config) {
|
||||
const headers = corsHeaders(req, config);
|
||||
if (!headers['access-control-allow-origin']) {
|
||||
res.writeHead(403);
|
||||
return res.end('origin not allowed');
|
||||
}
|
||||
res.writeHead(204, headers);
|
||||
res.end();
|
||||
}
|
||||
|
||||
/* ---------- /api/refresh 滥用防护 ---------- */
|
||||
|
||||
// 仅信任 socket 的对端地址，不解析 X-Forwarded-For（可被伪造）；若前方挂了反向代理，请改用 allowRefresh:false
|
||||
@@ -614,19 +999,59 @@ function toUptimeRobotResponse(runtime) {
|
||||
|
||||
// runtime 是持有器对象：热重载只更新其属性，服务器与巡检循环始终读到最新引用
|
||||
function createServer(runtime) {
|
||||
const adminAuth = createAdminAuth({ storePath: ADMIN_2FA_PATH() });
|
||||
// 私有层被管理端改写后要立刻生效：沿用与 fs.watch 热重载相同的复用逻辑，保留内存态
|
||||
const reloadConfig = () => {
|
||||
const next = loadConfig();
|
||||
runtime.state = hydrate(next, runtime.state);
|
||||
runtime.config = next;
|
||||
};
|
||||
const handleAdminApi = createAdminRouter({
|
||||
auth: adminAuth,
|
||||
localConfigPath: ACTIVE_LOCAL_CONFIG_PATH,
|
||||
reloadConfig,
|
||||
runtime,
|
||||
fns: {
|
||||
snapshot,
|
||||
dataFilter,
|
||||
probeScopeSetting,
|
||||
localProbeTargets,
|
||||
notifyConfig,
|
||||
tlsConfig,
|
||||
notifyLastResult: () => snapshot(runtime).notify ?? null,
|
||||
forceRound,
|
||||
scheduleWrite,
|
||||
forcedMaxWaitMs: FORCED_MAX_WAIT_MS,
|
||||
version: VERSION,
|
||||
},
|
||||
});
|
||||
|
||||
return http.createServer(async (req, res) => {
|
||||
const url = new URL(req.url, `http://${req.headers.host || 'localhost'}`);
|
||||
const { config, state } = runtime;
|
||||
try {
|
||||
if (url.pathname === '/api/status') return sendJson(res, snapshot(runtime));
|
||||
if (url.pathname === '/api/monitors') return sendJson(res, config);
|
||||
if (url.pathname.startsWith('/api/admin/')) return await handleAdminApi(req, res, url);
|
||||
if (url.pathname === '/admin' || url.pathname === '/admin/') {
|
||||
const file = path.join(PUBLIC_DIR, 'admin.html');
|
||||
res.writeHead(200, { 'content-type': MIME['.html'], 'cache-control': 'no-store' });
|
||||
return void fs.createReadStream(file).pipe(res);
|
||||
}
|
||||
// 预检：只对只读接口与 /api/refresh 放行（/api/admin/* 一律不放行，管理端必须同源访问）。
|
||||
// /api/refresh 虽然有副作用，但已有 refreshDecision 的限流与 refreshLocalOnly 兜底，
|
||||
// 且它不带自定义头时属于「简单请求」——浏览器无论如何都会把它发出去，
|
||||
// 加跨域头只影响响应能否被 JS 读到（前端据此退回只读），不影响安全性。
|
||||
if (req.method === 'OPTIONS' && (url.pathname === '/api/status' || url.pathname === '/api/monitors' || url.pathname === '/api/events' || url.pathname === '/api/refresh' || url.pathname === '/api/v2/getMonitors' || url.pathname === '/v2/getMonitors')) {
|
||||
return handlePreflight(req, res, config);
|
||||
}
|
||||
if (url.pathname === '/api/status') return sendJson(res, snapshot(runtime), { headers: corsHeaders(req, config) });
|
||||
if (url.pathname === '/api/monitors') return sendJson(res, publicConfig(config), { headers: corsHeaders(req, config) });
|
||||
if (url.pathname === '/api/refresh') {
|
||||
const decide = refreshDecision(config, req.socket.remoteAddress);
|
||||
if (!decide.ok) {
|
||||
// 只回错误码，不回显目标地址与内部细节
|
||||
return sendJson(res, { error: decide.error }, {
|
||||
status: decide.status,
|
||||
headers: decide.retryAfter ? { 'retry-after': String(decide.retryAfter) } : {},
|
||||
headers: { ...(decide.retryAfter ? { 'retry-after': String(decide.retryAfter) } : {}), ...corsHeaders(req, config) },
|
||||
});
|
||||
}
|
||||
// scope=external：只同步 UptimeRobot，不跑本地探测轮次（面板在「只看 UR」模式下用）
|
||||
@@ -643,13 +1068,19 @@ function createServer(runtime) {
|
||||
]);
|
||||
// 浏览器中断请求（切页/关标签）是常态：等待期间连接可能已断开，此时不能再写响应
|
||||
if (res.writableEnded || res.destroyed) return;
|
||||
return sendJson(res, snapshot(runtime));
|
||||
return sendJson(res, snapshot(runtime), { headers: corsHeaders(req, config) });
|
||||
}
|
||||
|
||||
// UptimeRobot 兼容的只读接口（GET/POST 均可）：已有脚本/看板可直接消费本服务数据。
|
||||
// 不做鉴权，因为其暴露内容与公开面板一致；如需鉴权请在其前方加代理。
|
||||
if (url.pathname === '/api/v2/getMonitors' || url.pathname === '/v2/getMonitors') {
|
||||
return sendJson(res, toUptimeRobotResponse(runtime));
|
||||
return sendJson(res, toUptimeRobotResponse(runtime), { headers: corsHeaders(req, config) });
|
||||
}
|
||||
|
||||
// 事件时间线：面板「事件」视图取这里（含通知去抖前的全部状态翻转记录）
|
||||
if (url.pathname === '/api/events') {
|
||||
const list = [...(runtime.events ?? [])].reverse();
|
||||
return sendJson(res, { total: list.length, events: list.slice(0, 200) }, { headers: corsHeaders(req, config) });
|
||||
}
|
||||
|
||||
let rel = decodeURIComponent(url.pathname);
|
||||
@@ -686,18 +1117,38 @@ async function main() {
|
||||
config: loadConfig(),
|
||||
state: null,
|
||||
dataUpdatedAt: Date.now(),
|
||||
// 通知去抖状态与事件时间线从私有数据目录恢复，重启不会重复告警
|
||||
notifyState: readJson(NOTIFY_STATE_PATH(), { monitors: {} }),
|
||||
events: readJson(EVENTS_PATH(), []),
|
||||
tls: new Map(),
|
||||
tlsLastCheckMs: 0,
|
||||
ur: { enabled: false, ok: null, error: null, lastSyncAt: null, count: 0, syncing: false, lastSyncMs: 0 },
|
||||
};
|
||||
if (TEST_NOTIFY) {
|
||||
// 通道自检：只发一条测试消息，不探测、不写快照
|
||||
const cfg = notifyConfig(runtime.config);
|
||||
if (!cfg.enabled) {
|
||||
console.error('未启用任何通知渠道（settings.notify.enabled 或 channels.*.enabled 未开启）');
|
||||
process.exitCode = 1;
|
||||
return;
|
||||
}
|
||||
console.log('通知通道自检：');
|
||||
const out = await sendTestNotifications(cfg, { logger: console });
|
||||
if (out.some((r) => !r.ok)) process.exitCode = 1;
|
||||
return;
|
||||
}
|
||||
if (DEMO) {
|
||||
writeDemo(runtime.config);
|
||||
return;
|
||||
}
|
||||
runtime.state = hydrate(runtime.config);
|
||||
// 启用 UptimeRobot 时先同步一次，保证首次渲染就有异地探测数据
|
||||
await syncUptimeRobot(runtime);
|
||||
if (externalSyncEnabled(runtime.config)) await syncUptimeRobot(runtime);
|
||||
|
||||
if (ONCE) {
|
||||
await probeDue(runtime, true);
|
||||
await queueEvaluation(runtime, evaluateRound);
|
||||
await queueEvaluation(runtime, checkCertificates);
|
||||
writeStatus(snapshot(runtime));
|
||||
const s = snapshot(runtime).stats;
|
||||
console.log(`[once] 完成：共 ${s.total}，在线 ${s.up}，离线 ${s.down}`);
|
||||
@@ -723,22 +1174,53 @@ async function main() {
|
||||
|
||||
setInterval(() => {
|
||||
probeDue(runtime)
|
||||
.then(() => scheduleWrite(runtime))
|
||||
.then(() => {
|
||||
scheduleWrite(runtime);
|
||||
queueEvaluation(runtime, evaluateRound);
|
||||
})
|
||||
.catch((err) => console.error(`[tick] ${err.stack || err}`));
|
||||
// UptimeRobot 按自身 pollIntervalSec 拉取，失败不影响本地巡检
|
||||
if (Date.now() - runtime.ur.lastSyncMs >= uptimeRobotConfig(runtime.config).pollIntervalSec * 1000) {
|
||||
if (externalSyncEnabled(runtime.config) && Date.now() - runtime.ur.lastSyncMs >= uptimeRobotConfig(runtime.config).pollIntervalSec * 1000) {
|
||||
syncUptimeRobot(runtime)
|
||||
.then(() => scheduleWrite(runtime))
|
||||
.catch(() => { /* syncUptimeRobot 内部已记录错误 */ });
|
||||
}
|
||||
// 证书到期检查：按 checkIntervalSec 周期执行（默认 6 小时），握手失败只记录不影响巡检
|
||||
if (Date.now() - runtime.tlsLastCheckMs >= tlsConfig(runtime.config).checkIntervalSec * 1000) {
|
||||
runtime.tlsLastCheckMs = Date.now();
|
||||
queueEvaluation(runtime, checkCertificates);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
createServer(runtime).listen(PORT, () => {
|
||||
// 管理端是否允许经由非本机地址访问（如 Cloudflare Tunnel 挂到公网）。
|
||||
// 默认关闭：探针通常只该在内网/本机使用，暴露管理面必须由使用者显式打开。
|
||||
const adminCfg = runtime.config.settings?.admin ?? {};
|
||||
const adminPublic = adminCfg.allowRemote === true;
|
||||
const BIND_HOST = adminPublic ? '0.0.0.0' : '127.0.0.1';
|
||||
|
||||
createServer(runtime).listen(PORT, BIND_HOST, () => {
|
||||
console.log(`shiroko-monitor v${VERSION}`);
|
||||
console.log(`面板: http://localhost:${PORT}/`);
|
||||
console.log(`状态 API: http://localhost:${PORT}/api/status`);
|
||||
console.log(`兼容接口: http://localhost:${PORT}/api/v2/getMonitors （UptimeRobot getMonitors 只读兼容）`);
|
||||
console.log(`监控目标: ${runtime.config.monitors.length} 个自建探测${runtime.ur.enabled ? ` + ${runtime.ur.count} 个 UptimeRobot 监控` : ''}（配置热重载已启用）`);
|
||||
const scope = probeScopeSetting(runtime.config);
|
||||
const localCount = localProbeTargets(runtime.config).length;
|
||||
const scopeText = {
|
||||
all: `全部（自建 ${localCount} 个${runtime.ur.enabled ? ` + UptimeRobot ${runtime.ur.count} 个` : ''}）`,
|
||||
config: `仅自建（${localCount} 个，不同步 UptimeRobot）`,
|
||||
uptimerobot: `仅 UptimeRobot（${runtime.ur.count} 个，**不探测本地配置里的 ${runtime.config.monitors.length} 个目标**）`,
|
||||
}[scope];
|
||||
console.log(`展示口径: ${dataFilter(runtime.config)} 探测范围: ${scope} —— ${scopeText}（settings.probeScope 可显式覆盖）`);
|
||||
if (!localCount && !runtime.ur.enabled) {
|
||||
console.warn('[warn] 当前没有任何数据源：本地探测已关闭且 UptimeRobot 未启用，面板将显示「等待检测」');
|
||||
}
|
||||
if (adminPublic) {
|
||||
console.log(`管理后台: http://localhost:${PORT}/admin`);
|
||||
console.warn(`[warn] settings.admin.allowRemote=true —— 探针正在监听 ${BIND_HOST}，管理端可经由反向代理/隧道从外部访问。`);
|
||||
console.warn(' 该端口同时伺服公开面板，请确保管理端已绑定 2FA，且前置代理已启用 HTTPS。');
|
||||
} else {
|
||||
console.log(`管理后台: http://localhost:${PORT}/admin （仅本机可访问；需远程访问请设 settings.admin.allowRemote=true）`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,396 @@
|
||||
/**
|
||||
* 管理端 HTTP 接口（全部挂在 /api/admin/*）
|
||||
*
|
||||
* 鉴权模型：
|
||||
* · 未绑定 2FA 时，除绑定流程外的所有接口一律 403
|
||||
* · 绑定流程需要一次性口令 SHIROKO_ADMIN_SETUP_KEY（服务端只做定长比较，不落盘）
|
||||
* · 绑定完成后，每次操作都必须带有效会话 cookie（sid）
|
||||
* · 登录失败按 IP 计数并指数退避
|
||||
*
|
||||
* 所有写操作只落 local.monitors.json（私有、不入库），绝不改 public/monitors.json。
|
||||
*/
|
||||
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
|
||||
const COOKIE_NAME = 'shiroko_admin';
|
||||
const MAX_BODY = 64 * 1024; // 管理接口都是小 JSON，64KB 足够挡住滥用
|
||||
const SETUP_KEY = () => String(process.env.SHIROKO_ADMIN_SETUP_KEY || '').trim();
|
||||
|
||||
function sendJson(res, data, { status = 200, headers = {} } = {}) {
|
||||
res.writeHead(status, { 'content-type': 'application/json; charset=utf-8', 'cache-control': 'no-store', ...headers });
|
||||
res.end(JSON.stringify(data));
|
||||
}
|
||||
|
||||
function readBody(req) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let size = 0;
|
||||
const chunks = [];
|
||||
req.on('data', (c) => {
|
||||
size += c.length;
|
||||
if (size > MAX_BODY) {
|
||||
// 不能 destroy 连接：客户端只会看到 fetch failed 而拿不到状态码。
|
||||
// 停止累积并标记，等 end 事件按正常路径回 413。
|
||||
req.__tooLarge = true;
|
||||
return;
|
||||
}
|
||||
chunks.push(c);
|
||||
});
|
||||
req.on('end', () => {
|
||||
if (req.__tooLarge) return reject(Object.assign(new Error('body-too-large'), { code: 'body-too-large' }));
|
||||
if (!chunks.length) return resolve({});
|
||||
try { resolve(JSON.parse(Buffer.concat(chunks).toString('utf8'))); } catch { reject(Object.assign(new Error('bad-json'), { code: 'bad-json' })); }
|
||||
});
|
||||
req.on('error', () => reject(Object.assign(new Error('aborted'), { code: 'aborted' })));
|
||||
});
|
||||
}
|
||||
|
||||
// 把 readBody 的失败翻译成明确的 4xx，而不是掉进 500 或让连接直接断开
|
||||
async function readJsonBody(req, res) {
|
||||
try {
|
||||
return { ok: true, value: await readBody(req) };
|
||||
} catch (err) {
|
||||
const code = err.code;
|
||||
if (code === 'body-too-large') sendJson(res, { error: 'body-too-large', hint: `请求体超过 ${MAX_BODY} 字节` }, { status: 413 });
|
||||
else if (code === 'bad-json') sendJson(res, { error: 'bad-json' }, { status: 400 });
|
||||
else sendJson(res, { error: 'bad-request' }, { status: 400 });
|
||||
return { ok: false };
|
||||
}
|
||||
}
|
||||
|
||||
function parseCookies(header = '') {
|
||||
const out = {};
|
||||
for (const part of String(header).split(';')) {
|
||||
const i = part.indexOf('=');
|
||||
if (i < 0) continue;
|
||||
out[part.slice(0, i).trim()] = decodeURIComponent(part.slice(i + 1).trim());
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
// 只认 socket 对端地址：X-Forwarded-For 可被任意伪造
|
||||
const clientIp = (req) => String(req.socket.remoteAddress ?? '').replace(/^::ffff:/i, '');
|
||||
|
||||
// Path 必须覆盖接口路径：会话 cookie 在 /admin 页面与 /api/admin/* 接口之间共用，
|
||||
// 只写 Path=/admin 会导致接口请求不带 cookie（登录成功但随即 401）
|
||||
const SESSION_COOKIE = (sid) => `${COOKIE_NAME}=${encodeURIComponent(sid)}; Path=/; HttpOnly; SameSite=Strict; Max-Age=7200`;
|
||||
const CLEAR_COOKIE = () => `${COOKIE_NAME}=; Path=/; HttpOnly; SameSite=Strict; Max-Age=0`;
|
||||
|
||||
// 管理端的写操作统一落私有层：public/monitors.json 是会随仓库分发的公开文件，不该被接口改写
|
||||
function savePrivateConfig(localPath, mutate) {
|
||||
let current = {};
|
||||
try { current = JSON.parse(fs.readFileSync(localPath, 'utf8')); } catch { /* 文件不存在则从空开始 */ }
|
||||
const next = mutate(current) ?? current;
|
||||
fs.mkdirSync(path.dirname(localPath), { recursive: true });
|
||||
fs.writeFileSync(localPath, `${JSON.stringify(next, null, 2)}\n`);
|
||||
return next;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {object} deps
|
||||
* @param {object} deps.auth createAdminAuth 的返回值
|
||||
* @param {string} deps.localConfigPath私有配置路径（管理端写入的唯一目标）
|
||||
* @param {() => void} deps.reloadConfig 热重载配置（私有层改动后必须调用）
|
||||
* @param {object} deps.runtime 探针运行态
|
||||
* @param {object} deps.fns index.js 内部的配置/快照函数（避免循环依赖，显式注入）
|
||||
*/
|
||||
export function createAdminRouter({ auth, localConfigPath, reloadConfig, runtime, fns }) {
|
||||
const { snapshot, dataFilter, probeScopeSetting, localProbeTargets, notifyConfig, tlsConfig, notifyLastResult, forceRound, scheduleWrite, forcedMaxWaitMs, version } = fns;
|
||||
|
||||
function requireBound(res) {
|
||||
if (auth.isBound()) return true;
|
||||
sendJson(res, { error: 'not-bound', hint: '需先在 /admin 完成 2FA 绑定' }, { status: 403 });
|
||||
return false;
|
||||
}
|
||||
|
||||
function requireSession(req, res) {
|
||||
const sid = parseCookies(req.headers.cookie)[COOKIE_NAME];
|
||||
if (!auth.verifySession(sid)) {
|
||||
sendJson(res, { error: 'unauthorized' }, { status: 401, headers: { 'set-cookie': CLEAR_COOKIE() } });
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function overview() {
|
||||
const cfg = runtime.config;
|
||||
const s = cfg.settings ?? {};
|
||||
const snap = snapshot(runtime);
|
||||
return {
|
||||
version,
|
||||
status: {
|
||||
dataFilter: dataFilter(cfg),
|
||||
probeScope: probeScopeSetting(cfg),
|
||||
urEnabled: runtime.ur.enabled,
|
||||
urOk: runtime.ur.ok,
|
||||
urError: runtime.ur.error,
|
||||
urCount: runtime.ur.count,
|
||||
localCount: localProbeTargets(cfg).length,
|
||||
configCount: cfg.monitors.length,
|
||||
dataUpdatedAt: new Date(runtime.dataUpdatedAt).toISOString(),
|
||||
},
|
||||
stats: snap.stats,
|
||||
notify: notifyLastResult(),
|
||||
settings: {
|
||||
dataFilter: dataFilter(cfg),
|
||||
probeScope: probeScopeSetting(cfg),
|
||||
refreshInterval: s.refreshInterval ?? null,
|
||||
hideTargets: s.hideTargets === true,
|
||||
notifyEnabled: notifyConfig(cfg).enabled,
|
||||
tlsEnabled: tlsConfig(cfg).enabled,
|
||||
adminUrl: s.adminUrl ?? '',
|
||||
dataUrl: s.dataUrl ?? '',
|
||||
corsOrigins: Array.isArray(s.corsOrigins) ? s.corsOrigins : [],
|
||||
},
|
||||
maintenance: Array.isArray(s.maintenance) ? s.maintenance : [],
|
||||
monitors: cfg.monitors.map((m) => ({
|
||||
id: m.id,
|
||||
name: m.name,
|
||||
group: m.group ?? '未分组',
|
||||
type: m.type,
|
||||
target: m.url ?? (m.host ? `${m.host}${m.port ? `:${m.port}` : ''}` : ''),
|
||||
interval: m.interval ?? null,
|
||||
timeout: m.timeout ?? null,
|
||||
})),
|
||||
twofa: auth.status(),
|
||||
events: [...(runtime.events ?? [])].reverse().slice(0, 50),
|
||||
};
|
||||
}
|
||||
|
||||
return async function handleAdminApi(req, res, url) {
|
||||
const ip = clientIp(req);
|
||||
const p = url.pathname;
|
||||
|
||||
/* ---- 2FA 状态：未登录也要能查（页面据此决定显示绑定还是登录） ---- */
|
||||
if (p === '/api/admin/status' && req.method === 'GET') {
|
||||
return sendJson(res, {
|
||||
bound: auth.isBound(),
|
||||
setupKeyConfigured: Boolean(SETUP_KEY()),
|
||||
twofa: auth.status(),
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- 绑定流程 ---- */
|
||||
if (p === '/api/admin/2fa/setup' && req.method === 'POST') {
|
||||
if (auth.isBound()) return sendJson(res, { error: 'already-bound' }, { status: 409 });
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const out = auth.beginSetup(body.key, ip);
|
||||
if (!out.ok) return sendJson(res, { error: out.error }, { status: out.error === 'setup-disabled' ? 503 : 401 });
|
||||
return sendJson(res, out);
|
||||
}
|
||||
|
||||
if (p === '/api/admin/2fa/confirm' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const out = auth.confirmSetup(body.setupToken, body.code);
|
||||
if (!out.ok) return sendJson(res, { error: out.error }, { status: 400 });
|
||||
console.log(`[admin] 2FA 已绑定（来自 ${ip}），恢复码已生成，请妥善保存`);
|
||||
// 回传刚才用过的那枚验证码：前端据此直接换取会话，省掉用户再输一遍
|
||||
return sendJson(res, { ok: true, recoveryCodes: out.recoveryCodes, confirmCode: String(body.code ?? '').trim() });
|
||||
}
|
||||
|
||||
/* ---- 登录 / 登出 ---- */
|
||||
if (p === '/api/admin/login' && req.method === 'POST') {
|
||||
if (!requireBound(res)) return;
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const out = auth.login(body.code, ip);
|
||||
if (!out.ok) {
|
||||
return sendJson(res, { error: out.error, fails: out.fails ?? null }, {
|
||||
status: out.error === 'locked' ? 429 : 401,
|
||||
headers: out.retryAfter ? { 'retry-after': String(out.retryAfter) } : {},
|
||||
});
|
||||
}
|
||||
console.log(`[admin] 登录成功（${out.via}，来自 ${ip}）`);
|
||||
return sendJson(res, { ok: true, via: out.via }, { headers: { 'set-cookie': SESSION_COOKIE(out.sessionId) } });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/logout' && req.method === 'POST') {
|
||||
auth.destroySession(parseCookies(req.headers.cookie)[COOKIE_NAME]);
|
||||
return sendJson(res, { ok: true }, { headers: { 'set-cookie': CLEAR_COOKIE() } });
|
||||
}
|
||||
|
||||
/* ---- 以下全部需要「已绑定 + 有效会话」 ---- */
|
||||
if (!requireBound(res)) return;
|
||||
if (!requireSession(req, res)) return;
|
||||
|
||||
if (p === '/api/admin/overview' && req.method === 'GET') {
|
||||
return sendJson(res, overview());
|
||||
}
|
||||
|
||||
if (p === '/api/admin/maintenance' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const from = Date.parse(body.from);
|
||||
const to = Date.parse(body.to);
|
||||
if (!Number.isFinite(from) || !Number.isFinite(to) || to <= from) {
|
||||
return sendJson(res, { error: 'invalid-window', hint: '开始/结束时间无效，或结束早于开始' }, { status: 400 });
|
||||
}
|
||||
const entry = {
|
||||
from: new Date(from).toISOString(),
|
||||
to: new Date(to).toISOString(),
|
||||
...(body.note ? { note: String(body.note).slice(0, 200) } : {}),
|
||||
...(body.id ? { id: String(body.id).slice(0, 64) } : {}),
|
||||
};
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
const list = Array.isArray(local.settings?.maintenance) ? local.settings.maintenance : [];
|
||||
// 只保留最近 20 条，避免配置文件被历史窗口撑大
|
||||
local.settings = { ...(local.settings ?? {}), maintenance: [...list, entry].slice(-20) };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
return sendJson(res, { ok: true, entry });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/maintenance' && req.method === 'DELETE') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const target = Number(body.index);
|
||||
if (!Number.isInteger(target) || target < 0) return sendJson(res, { error: 'invalid-index' }, { status: 400 });
|
||||
// 越界要显式拒绝：splice 对越界下标是静默 no-op，会让「删了但没删掉」看起来像成功
|
||||
const current = (() => {
|
||||
try { return JSON.parse(fs.readFileSync(localConfigPath, 'utf8')).settings?.maintenance; } catch { return null; }
|
||||
})();
|
||||
const size = Array.isArray(current) ? current.length : 0;
|
||||
if (target >= size) return sendJson(res, { error: 'invalid-index', hint: `当前共 ${size} 个维护窗口` }, { status: 400 });
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
const list = Array.isArray(local.settings?.maintenance) ? [...local.settings.maintenance] : [];
|
||||
list.splice(target, 1);
|
||||
local.settings = { ...(local.settings ?? {}), maintenance: list };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
return sendJson(res, { ok: true });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/probe-scope' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const scope = String(body.probeScope ?? '');
|
||||
if (!['all', 'config', 'uptimerobot'].includes(scope)) return sendJson(res, { error: 'invalid-scope' }, { status: 400 });
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
local.settings = { ...(local.settings ?? {}), probeScope: scope };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
console.log(`[admin] 探测范围改为 ${scope}（来自 ${ip}）`);
|
||||
return sendJson(res, { ok: true, probeScope: scope });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/data-filter' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const filter = String(body.dataFilter ?? '');
|
||||
if (!['both', 'config', 'uptimerobot'].includes(filter)) return sendJson(res, { error: 'invalid-filter' }, { status: 400 });
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
local.settings = { ...(local.settings ?? {}), dataFilter: filter };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
console.log(`[admin] 展示口径改为 ${filter}（来自 ${ip}）`);
|
||||
return sendJson(res, { ok: true, dataFilter: filter });
|
||||
}
|
||||
|
||||
// 面板上的管理入口链接：只存地址，不做任何暴露判断（怎么暴露由使用者自己决定）
|
||||
if (p === '/api/admin/admin-url' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const raw = String(body.adminUrl ?? '').trim();
|
||||
if (raw) {
|
||||
// 只收 http/https：面板会把它渲染成 <a href>，javascript: 之类必须挡住
|
||||
let u;
|
||||
try { u = new URL(raw); } catch { return sendJson(res, { error: 'invalid-url', hint: '不是合法的绝对 URL' }, { status: 400 }); }
|
||||
if (u.protocol !== 'http:' && u.protocol !== 'https:') {
|
||||
return sendJson(res, { error: 'invalid-url', hint: '只支持 http/https' }, { status: 400 });
|
||||
}
|
||||
}
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
local.settings = { ...(local.settings ?? {}), adminUrl: raw };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
console.log(`[admin] 面板管理入口链接${raw ? `已设置为 ${raw}` : '已清空'}（来自 ${ip}）`);
|
||||
return sendJson(res, { ok: true, adminUrl: raw });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/remote' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
// 跨域数据源：允许省略协议（默认 https），省得使用者每次都写全
|
||||
const rawUrl = String(body.dataUrl ?? '').trim();
|
||||
let dataUrl = '';
|
||||
if (rawUrl) {
|
||||
let u;
|
||||
try { u = new URL(/^https?:\/\//i.test(rawUrl) ? rawUrl : `https://${rawUrl}`); } catch {
|
||||
return sendJson(res, { error: 'invalid-url', hint: '不是合法的地址' }, { status: 400 });
|
||||
}
|
||||
if (u.protocol !== 'http:' && u.protocol !== 'https:') {
|
||||
return sendJson(res, { error: 'invalid-url', hint: '只支持 http/https' }, { status: 400 });
|
||||
}
|
||||
dataUrl = u.origin + u.pathname.replace(/\/+$/, '');
|
||||
}
|
||||
// CORS 白名单：只收完整的 origin，且拒绝 '*'
|
||||
const origins = Array.isArray(body.corsOrigins)
|
||||
? body.corsOrigins.map((s) => String(s).trim()).filter(Boolean)
|
||||
: String(body.corsOrigins ?? '').split(',').map((s) => s.trim()).filter(Boolean);
|
||||
const bad = origins.filter((o) => o === '*' || !/^https?:\/\/[^\s/]+(:\d+)?$/.test(o));
|
||||
if (bad.length) {
|
||||
return sendJson(res, { error: 'invalid-origin', hint: `这些写法不合法（必须是完整来源，且不允许 *）：${bad.join(', ')}` }, { status: 400 });
|
||||
}
|
||||
savePrivateConfig(localConfigPath, (local) => {
|
||||
local.settings = { ...(local.settings ?? {}), dataUrl, corsOrigins: origins };
|
||||
return local;
|
||||
});
|
||||
reloadConfig();
|
||||
scheduleWrite(runtime);
|
||||
console.log(`[admin] 跨域设置已保存：dataUrl=${dataUrl || '(空)'}，corsOrigins=${origins.length ? origins.join(' ') : '(默认)'}`);
|
||||
return sendJson(res, { ok: true, dataUrl, corsOrigins: origins });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/probe-now' && req.method === 'POST') {
|
||||
await Promise.race([forceRound(runtime), new Promise((r) => setTimeout(r, forcedMaxWaitMs))]);
|
||||
if (res.writableEnded || res.destroyed) return;
|
||||
return sendJson(res, { ok: true, stats: snapshot(runtime).stats });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/notify-test' && req.method === 'POST') {
|
||||
const cfg = notifyConfig(runtime.config);
|
||||
if (!cfg.enabled) return sendJson(res, { error: 'notify-disabled', hint: '未启用任何通知渠道' }, { status: 400 });
|
||||
const results = await sendTestNotificationsLazy(cfg);
|
||||
return sendJson(res, { ok: results.every((r) => r.ok), results });
|
||||
}
|
||||
|
||||
if (p === '/api/admin/2fa/reset' && req.method === 'POST') {
|
||||
const parsed = await readJsonBody(req, res);
|
||||
if (!parsed.ok) return;
|
||||
const body = parsed.value;
|
||||
const out = auth.reset(body.key);
|
||||
if (!out.ok) return sendJson(res, { error: out.error }, { status: 401 });
|
||||
console.log(`[admin] 2FA 已重置，需重新绑定（来自 ${ip}）`);
|
||||
return sendJson(res, { ok: true }, { headers: { 'set-cookie': CLEAR_COOKIE() } });
|
||||
}
|
||||
|
||||
return sendJson(res, { error: 'not-found' }, { status: 404 });
|
||||
};
|
||||
|
||||
// 通知自检只在调用时才 import，避免主进程启动就拉起 SMTP 代码路径
|
||||
async function sendTestNotificationsLazy(cfg) {
|
||||
const { sendTestNotifications } = await import('./notify.js');
|
||||
return sendTestNotifications(cfg, { logger: console });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
/**
|
||||
* 管理端鉴权：2FA 绑定、登录、会话、失败限流
|
||||
*
|
||||
* 安全约束（与项目的零依赖、一切自建原则一致）：
|
||||
* · 未绑定 2FA 时，任何管理接口都不可用 —— 绑定动作本身也需要一次性 setup key
|
||||
* · 会话 id 用 32 字节随机数，服务端只存哈希（内存态，进程重启即全部失效）
|
||||
* · 登录失败按 IP 计数，超过阈值指数退避，避免在线爆破 6 位码
|
||||
* · 恢复码一次性使用，用后立刻作废并落盘
|
||||
* · 管理写操作一律落 local.monitors.json（私有、不入库），不污染 public 配置
|
||||
*/
|
||||
|
||||
import crypto from 'node:crypto';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import {
|
||||
DEFAULT_DIGITS,
|
||||
DEFAULT_PERIOD_SEC,
|
||||
generateRecoveryCodes,
|
||||
generateSecret,
|
||||
hashRecoveryCode,
|
||||
otpauthUri,
|
||||
totpCounter,
|
||||
verifyTotp,
|
||||
} from './totp.js';
|
||||
|
||||
const SESSION_TTL_MS = 2 * 60 * 60 * 1000; // 会话最长 2 小时
|
||||
const SESSION_IDLE_MS = 30 * 60 * 1000; // 30 分钟无操作即失效
|
||||
const MAX_FAILS = 5;
|
||||
const LOCK_BASE_MS = 60 * 1000; // 首次锁定 1 分钟，之后翻倍
|
||||
const LOCK_MAX_MS = 30 * 60 * 1000;
|
||||
const SETUP_TTL_MS = 10 * 60 * 1000; // 未完成的绑定流程 10 分钟作废
|
||||
|
||||
const sha256 = (s) => crypto.createHash('sha256').update(s).digest('hex');
|
||||
const token = (bytes = 32) => crypto.randomBytes(bytes).toString('base64url');
|
||||
|
||||
/**
|
||||
* @param {object} opts
|
||||
* @param {string} opts.storePath 2FA 档案落盘位置（data/admin-2fa.json，已 gitignore）
|
||||
* @param {string} opts.setupKey 环境变量 SHIROKO_ADMIN_SETUP_KEY 提供的绑定口令
|
||||
* @param {() => number} [opts.now] 便于测试注入时间
|
||||
*/
|
||||
export function createAdminAuth({ storePath, setupKey = '', now = Date.now }) {
|
||||
let store = load();
|
||||
const sessions = new Map(); // hash(sessionId) -> { createdAt, lastSeenAt, ip }
|
||||
const fails = new Map(); // ip -> { count, until }
|
||||
let setup = null; // { key, secret, createdAt, ip } —— 绑定过程中的临时态
|
||||
|
||||
function load() {
|
||||
try {
|
||||
return JSON.parse(fs.readFileSync(storePath, 'utf8'));
|
||||
} catch {
|
||||
return { bound: false };
|
||||
}
|
||||
}
|
||||
|
||||
function save() {
|
||||
fs.mkdirSync(path.dirname(storePath), { recursive: true });
|
||||
fs.writeFileSync(storePath, `${JSON.stringify(store, null, 2)}\n`);
|
||||
}
|
||||
|
||||
function isBound() {
|
||||
return store.bound === true && typeof store.secret === 'string' && store.secret.length > 0;
|
||||
}
|
||||
|
||||
/* ---------- 绑定 ---------- */
|
||||
|
||||
function configuredSetupKey() {
|
||||
return String(setupKey || process.env.SHIROKO_ADMIN_SETUP_KEY || '').trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* 第一步：提交绑定口令，换取一个待确认的 secret。
|
||||
* 口令从环境变量读取且只做定长比较，服务端不保存它的副本。
|
||||
*/
|
||||
function beginSetup(inputKey, ip) {
|
||||
if (isBound()) return { ok: false, error: 'already-bound' };
|
||||
const want = configuredSetupKey();
|
||||
if (!want) return { ok: false, error: 'setup-disabled' };
|
||||
if (!safeEqual(String(inputKey ?? ''), want)) return { ok: false, error: 'bad-setup-key' };
|
||||
setup = { key: token(24), secret: generateSecret(), createdAt: now(), ip };
|
||||
const label = 'shiroko-monitor';
|
||||
return {
|
||||
ok: true,
|
||||
setupToken: setup.key,
|
||||
secret: setup.secret,
|
||||
uri: otpauthUri({ secret: setup.secret, label, issuer: label }),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 第二步：验证器 App 里能出码即证明绑定成功，落盘 secret 并给出一批恢复码。
|
||||
*/
|
||||
function confirmSetup(setupTokenValue, code) {
|
||||
if (isBound()) return { ok: false, error: 'already-bound' };
|
||||
if (!setup || setup.key !== String(setupTokenValue ?? '')) return { ok: false, error: 'no-setup' };
|
||||
if (now() - setup.createdAt > SETUP_TTL_MS) { setup = null; return { ok: false, error: 'setup-expired' }; }
|
||||
const reason = verifyTotp(setup.secret, code, { atMs: now(), digits: DEFAULT_DIGITS, periodSec: DEFAULT_PERIOD_SEC });
|
||||
if (reason) return { ok: false, error: reason };
|
||||
const salt = token(16);
|
||||
const recoveryCodes = generateRecoveryCodes();
|
||||
store = {
|
||||
bound: true,
|
||||
secret: setup.secret,
|
||||
salt,
|
||||
recovery: recoveryCodes.map((c) => hashRecoveryCode(c, salt)),
|
||||
digits: DEFAULT_DIGITS,
|
||||
periodSec: DEFAULT_PERIOD_SEC,
|
||||
issuer: 'shiroko-monitor',
|
||||
boundAt: new Date(now()).toISOString(),
|
||||
lastUsedCounter: null,
|
||||
};
|
||||
setup = null;
|
||||
save();
|
||||
return { ok: true, recoveryCodes };
|
||||
}
|
||||
|
||||
/* ---------- 登录 ---------- */
|
||||
|
||||
function lockState(ip) {
|
||||
const rec = fails.get(ip);
|
||||
if (!rec) return { locked: false, waitMs: 0 };
|
||||
if (rec.until && rec.until > now()) return { locked: true, waitMs: rec.until - now() };
|
||||
if (rec.until && rec.until <= now()) { rec.until = 0; rec.count = 0; }
|
||||
return { locked: false, waitMs: 0 };
|
||||
}
|
||||
|
||||
function noteFail(ip) {
|
||||
const rec = fails.get(ip) ?? { count: 0, until: 0 };
|
||||
rec.count += 1;
|
||||
if (rec.count >= MAX_FAILS) {
|
||||
const mult = 2 ** Math.min(rec.count - MAX_FAILS, 5); // 1m → 2m → 4m … 上限 30m
|
||||
rec.until = now() + Math.min(LOCK_BASE_MS * mult, LOCK_MAX_MS);
|
||||
}
|
||||
fails.set(ip, rec);
|
||||
return rec;
|
||||
}
|
||||
|
||||
function noteSuccess(ip) {
|
||||
fails.delete(ip);
|
||||
}
|
||||
|
||||
function consumeRecovery(inputCode) {
|
||||
const code = String(inputCode ?? '').trim().toUpperCase();
|
||||
const hash = hashRecoveryCode(code, store.salt);
|
||||
const idx = store.recovery.indexOf(hash);
|
||||
if (idx < 0) return false;
|
||||
store.recovery.splice(idx, 1); // 一次性
|
||||
save();
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 登录：6 位 TOTP 码，或任一枚未使用的恢复码。
|
||||
* 通过后签发会话 id（明文只在这一刻返回一次，服务端只留哈希）。
|
||||
*/
|
||||
function login(inputCode, ip) {
|
||||
if (!isBound()) return { ok: false, error: 'not-bound' };
|
||||
const lock = lockState(ip);
|
||||
if (lock.locked) return { ok: false, error: 'locked', retryAfter: Math.ceil(lock.waitMs / 1000) };
|
||||
|
||||
const digits = store.digits ?? DEFAULT_DIGITS;
|
||||
const periodSec = store.periodSec ?? DEFAULT_PERIOD_SEC;
|
||||
const reason = verifyTotp(store.secret, inputCode, { atMs: now(), digits, periodSec });
|
||||
|
||||
let via = null;
|
||||
let replay = false;
|
||||
if (reason === null) {
|
||||
// 防重放：同一时间步的码用过即作废，防止截图被二次使用
|
||||
const counter = totpCounter({ atMs: now(), periodSec });
|
||||
if (store.lastUsedCounter != null && counter <= store.lastUsedCounter) replay = true;
|
||||
else via = 'totp';
|
||||
} else if (consumeRecovery(inputCode)) {
|
||||
// 恢复码兜底：手机丢了、验证器清库了仍可进入。
|
||||
// 恢复码是 10 位字母数字，会先被 verifyTotp 判为 invalid-format，属正常路径。
|
||||
via = 'recovery';
|
||||
}
|
||||
|
||||
if (!via) {
|
||||
const rec = noteFail(ip);
|
||||
// 回同一个错误码，不告诉攻击者「格式不对」还是「值不对」
|
||||
return { ok: false, error: replay ? 'replayed' : 'invalid-code', fails: rec.count, locked: rec.until > now() };
|
||||
}
|
||||
|
||||
if (via === 'totp') {
|
||||
store.lastUsedCounter = totpCounter({ atMs: now(), periodSec });
|
||||
save();
|
||||
}
|
||||
noteSuccess(ip);
|
||||
return { ok: true, sessionId: issue(ip), via };
|
||||
}
|
||||
|
||||
/* ---------- 会话 ---------- */
|
||||
|
||||
function issue(ip) {
|
||||
const id = token(32);
|
||||
sessions.set(sha256(id), { createdAt: now(), lastSeenAt: now(), ip });
|
||||
return id;
|
||||
}
|
||||
|
||||
/** 校验并续期；返回会话对象或 null（同时清理过期项） */
|
||||
function verifySession(sessionId) {
|
||||
if (!sessionId) return null;
|
||||
const key = sha256(sessionId);
|
||||
const s = sessions.get(key);
|
||||
if (!s) return null;
|
||||
const t = now();
|
||||
if (t - s.createdAt > SESSION_TTL_MS || t - s.lastSeenAt > SESSION_IDLE_MS) {
|
||||
sessions.delete(key);
|
||||
return null;
|
||||
}
|
||||
s.lastSeenAt = t;
|
||||
return s;
|
||||
}
|
||||
|
||||
function destroySession(sessionId) {
|
||||
if (sessionId) sessions.delete(sha256(sessionId));
|
||||
}
|
||||
|
||||
function activeSessions() {
|
||||
const t = now();
|
||||
return [...sessions.values()].filter((s) => t - s.createdAt <= SESSION_TTL_MS && t - s.lastSeenAt <= SESSION_IDLE_MS).length;
|
||||
}
|
||||
|
||||
/** 重置 2FA（丢失全部验证码时的逃生口，需提供 setup key） */
|
||||
function reset(inputKey) {
|
||||
const want = configuredSetupKey();
|
||||
if (!want || !safeEqual(String(inputKey ?? ''), want)) return { ok: false, error: 'bad-setup-key' };
|
||||
store = { bound: false };
|
||||
sessions.clear();
|
||||
fails.clear();
|
||||
setup = null;
|
||||
save();
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
function status() {
|
||||
return {
|
||||
bound: isBound(),
|
||||
boundAt: store.boundAt ?? null,
|
||||
recoveryLeft: Array.isArray(store.recovery) ? store.recovery.length : 0,
|
||||
sessions: activeSessions(),
|
||||
// 恢复码用量超过一半时提示重新生成，避免某天发现全用完了
|
||||
recoveryLow: isBound() && Array.isArray(store.recovery) && store.recovery.length <= 3,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
isBound, beginSetup, confirmSetup, login, verifySession, destroySession,
|
||||
activeSessions, reset, status, lockState,
|
||||
logoutAll: () => sessions.clear(),
|
||||
};
|
||||
}
|
||||
|
||||
function safeEqual(a, b) {
|
||||
const x = Buffer.from(String(a), 'utf8');
|
||||
const y = Buffer.from(String(b), 'utf8');
|
||||
// 长度不等时也走一次比较，避免通过响应时间推断口令长度
|
||||
const pad = Math.max(x.length, y.length);
|
||||
const xa = Buffer.alloc(pad);
|
||||
const ya = Buffer.alloc(pad);
|
||||
x.copy(xa);
|
||||
y.copy(ya);
|
||||
return crypto.timingSafeEqual(xa, ya) && x.length === y.length;
|
||||
}
|
||||
@@ -0,0 +1,324 @@
|
||||
/**
|
||||
* 通知发送：邮件（手写 SMTP，零依赖）+ MeoW 推送
|
||||
*
|
||||
* 为什么手写 SMTP：本项目刻意保持零运行时依赖（Node 内置模块够用），
|
||||
* 引入 nodemailer 会带来一串传递依赖，对一个自用面板不划算。
|
||||
* 只实现发信必需的流程：EHLO → (STARTTLS) → AUTH → MAIL/RCPT/DATA → QUIT。
|
||||
*
|
||||
* MeoW 接口要点（据 https://www.chuckfang.com/MeoW/api_doc.html ）：
|
||||
* - 无需 token，昵称即寻址：POST https://api.chuckfang.com/{昵称}
|
||||
* - HTTP 状态恒为 200，成功与否看响应体的 status 字段
|
||||
* - msgType / htmlHeight 是查询参数，不是 body 参数
|
||||
* - 非会员限流：3 秒 1 条、每分钟 15 条、每小时 60 条
|
||||
* - 官方提醒：不要用多人共享的出口 IP（CI 环境建议只用邮件）
|
||||
*/
|
||||
|
||||
import net from 'node:net';
|
||||
import tls from 'node:tls';
|
||||
|
||||
const CRLF = '\r\n';
|
||||
|
||||
/* ---------- 邮件 ---------- */
|
||||
|
||||
function encodeHeader(value) {
|
||||
// 非 ASCII 主题按 RFC 2047 base64 编码，避免中文主题乱码
|
||||
return /^[\x20-\x7E]*$/.test(value) ? value : `=?UTF-8?B?${Buffer.from(value, 'utf8').toString('base64')}?=`;
|
||||
}
|
||||
|
||||
function base64Body(text) {
|
||||
// 正文用 base64：既免去 quoted-printable 的编码复杂度，也不会出现以 "." 开头的行（无需 dot-stuffing）
|
||||
return (Buffer.from(text, 'utf8').toString('base64').match(/.{1,76}/g) ?? []).join(CRLF);
|
||||
}
|
||||
|
||||
function buildMessage({ from, to, subject, text }) {
|
||||
return [
|
||||
`From: ${from}`,
|
||||
`To: ${to.join(', ')}`,
|
||||
`Subject: ${encodeHeader(subject)}`,
|
||||
`Date: ${new Date().toUTCString()}`,
|
||||
'MIME-Version: 1.0',
|
||||
'Content-Type: text/plain; charset=UTF-8',
|
||||
'Content-Transfer-Encoding: base64',
|
||||
'',
|
||||
base64Body(text),
|
||||
'',
|
||||
].join(CRLF);
|
||||
}
|
||||
|
||||
/** 极简 SMTP 会话：读 3 位状态码响应（支持多行 `250-` 连续响应） */
|
||||
function createSession(socket, timeoutMs) {
|
||||
let buffer = '';
|
||||
let waiter = null;
|
||||
socket.setEncoding('utf8');
|
||||
socket.on('data', (chunk) => {
|
||||
buffer += chunk;
|
||||
if (!waiter) return;
|
||||
// 一条完整响应以 `\d{3} `（空格结尾）结束
|
||||
const lines = buffer.split(CRLF);
|
||||
const complete = lines.some((l) => /^\d{3} /.test(l));
|
||||
if (complete) {
|
||||
const reply = buffer;
|
||||
buffer = '';
|
||||
const w = waiter;
|
||||
waiter = null;
|
||||
w.resolve(reply);
|
||||
}
|
||||
});
|
||||
const fail = (err) => {
|
||||
if (waiter) {
|
||||
const w = waiter;
|
||||
waiter = null;
|
||||
w.reject(err);
|
||||
}
|
||||
};
|
||||
socket.on('error', fail);
|
||||
socket.on('close', () => fail(new Error('SMTP 连接被关闭')));
|
||||
// 空闲超时必须主动断开：否则服务器不响应时读响应会一直挂着，把探针循环卡死
|
||||
socket.on('timeout', () => {
|
||||
socket.destroy();
|
||||
fail(new Error(`SMTP 响应超时（${timeoutMs}ms）`));
|
||||
});
|
||||
return {
|
||||
read: () => new Promise((resolve, reject) => {
|
||||
const timer = setTimeout(() => {
|
||||
waiter = null;
|
||||
reject(new Error(`SMTP 响应超时（${timeoutMs}ms）`));
|
||||
}, timeoutMs);
|
||||
waiter = {
|
||||
resolve: (v) => { clearTimeout(timer); resolve(v); },
|
||||
reject: (e) => { clearTimeout(timer); reject(e); },
|
||||
};
|
||||
}),
|
||||
write: (line) => socket.write(line + CRLF),
|
||||
code: (reply) => Number(reply.slice(0, 3)),
|
||||
raw: () => socket,
|
||||
};
|
||||
}
|
||||
|
||||
async function connect(socket) {
|
||||
await new Promise((resolve, reject) => {
|
||||
socket.once('connect', resolve);
|
||||
socket.once('secureConnect', resolve);
|
||||
socket.once('error', reject);
|
||||
});
|
||||
return socket;
|
||||
}
|
||||
|
||||
export async function sendEmail(cfg, { subject, text }, { timeoutMs = 15000 } = {}) {
|
||||
const host = cfg.host;
|
||||
const port = Number(cfg.port) || 465;
|
||||
if (!host) throw new Error('邮件通道缺少 host');
|
||||
if (!cfg.from) throw new Error('邮件通道缺少发件人 from');
|
||||
const to = Array.isArray(cfg.to) ? cfg.to.filter(Boolean) : [cfg.to].filter(Boolean);
|
||||
if (!to.length) throw new Error('邮件通道缺少收件人 to');
|
||||
|
||||
// 465 走隐式 TLS；587/25 先明文再 STARTTLS
|
||||
const implicitTls = port === 465 || cfg.secure === true;
|
||||
let socket = implicitTls
|
||||
? tls.connect({ host, port, servername: cfg.servername || host, rejectUnauthorized: cfg.rejectUnauthorized !== false })
|
||||
: net.connect({ host, port });
|
||||
socket.setTimeout(timeoutMs);
|
||||
await connect(socket);
|
||||
|
||||
let session = createSession(socket, timeoutMs);
|
||||
const expect = async (wanted) => {
|
||||
const reply = await session.read();
|
||||
const code = session.code(reply);
|
||||
if (code !== wanted) throw new Error(`SMTP 期望 ${wanted} 但收到：${reply.trim().split(CRLF).pop()}`);
|
||||
return reply;
|
||||
};
|
||||
|
||||
await expect(220);
|
||||
session.write(`EHLO ${cfg.helo || 'shiroko-monitor'}`);
|
||||
let caps = await expect(250);
|
||||
|
||||
if (!implicitTls) {
|
||||
if (/STARTTLS/i.test(caps)) {
|
||||
session.write('STARTTLS');
|
||||
await expect(220);
|
||||
socket = await new Promise((resolve, reject) => {
|
||||
const upgraded = tls.connect({ socket, servername: cfg.servername || host, rejectUnauthorized: cfg.rejectUnauthorized !== false }, () => resolve(upgraded));
|
||||
upgraded.once('error', reject);
|
||||
});
|
||||
socket.setTimeout(timeoutMs);
|
||||
session = createSession(socket, timeoutMs);
|
||||
session.write(`EHLO ${cfg.helo || 'shiroko-monitor'}`);
|
||||
caps = await expect(250);
|
||||
} else if (cfg.allowInsecure !== true) {
|
||||
// 默认拒绝明文发信（凭据会裸奔）；仅测试或本机可信中继场景下显式开启
|
||||
throw new Error('SMTP 服务器不支持 STARTTLS，已中止（如需明文传输请显式设置 allowInsecure: true）');
|
||||
}
|
||||
}
|
||||
|
||||
if (cfg.user) {
|
||||
if (/AUTH[ =-].*PLAIN/i.test(caps) && !/AUTH[ =-].*LOGIN/i.test(caps)) {
|
||||
session.write(`AUTH PLAIN ${Buffer.from(`\0${cfg.user}\0${cfg.pass ?? ''}`, 'utf8').toString('base64')}`);
|
||||
} else {
|
||||
session.write('AUTH LOGIN');
|
||||
await expect(334);
|
||||
session.write(Buffer.from(cfg.user, 'utf8').toString('base64'));
|
||||
await expect(334);
|
||||
session.write(Buffer.from(cfg.pass ?? '', 'utf8').toString('base64'));
|
||||
}
|
||||
await expect(235);
|
||||
}
|
||||
|
||||
session.write(`MAIL FROM:<${cfg.from}>`);
|
||||
await expect(250);
|
||||
for (const rcpt of to) {
|
||||
session.write(`RCPT TO:<${rcpt}>`);
|
||||
const reply = await session.read();
|
||||
if (![250, 251].includes(session.code(reply))) throw new Error(`收件人被拒（${rcpt}）：${reply.trim()}`);
|
||||
}
|
||||
session.write('DATA');
|
||||
await expect(354);
|
||||
socket.write(buildMessage({ from: cfg.from, to, subject, text }) + CRLF + '.' + CRLF);
|
||||
await expect(250);
|
||||
session.write('QUIT');
|
||||
socket.end();
|
||||
return { channel: 'email', ok: true, detail: `已投递至 ${to.join(', ')}` };
|
||||
}
|
||||
|
||||
/* ---------- MeoW ---------- */
|
||||
|
||||
export async function sendMeoW(cfg, { title, text }, { timeoutMs = 12000, fetchImpl = fetch } = {}) {
|
||||
const nickname = cfg.nickname;
|
||||
if (!nickname) throw new Error('MeoW 通道缺少 nickname');
|
||||
if (nickname.includes('/')) throw new Error('MeoW 昵称不允许包含斜杠');
|
||||
const base = (cfg.baseUrl || 'https://api.chuckfang.com').replace(/\/+$/, '');
|
||||
const params = new URLSearchParams();
|
||||
if (cfg.msgType && cfg.msgType !== 'text') {
|
||||
params.set('msgType', cfg.msgType);
|
||||
if (cfg.htmlHeight) params.set('htmlHeight', String(cfg.htmlHeight));
|
||||
}
|
||||
if (cfg.url) params.set('url', cfg.url);
|
||||
const query = params.toString() ? `?${params}` : '';
|
||||
const res = await fetchImpl(`${base}/${encodeURIComponent(nickname)}${query}`, {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify({ title, msg: text }),
|
||||
signal: AbortSignal.timeout(timeoutMs),
|
||||
});
|
||||
let payload = null;
|
||||
try {
|
||||
payload = await res.json();
|
||||
} catch {
|
||||
throw new Error(`MeoW 响应不是 JSON（HTTP ${res.status}）`);
|
||||
}
|
||||
// 注意：HTTP 状态恒为 200，必须以响应体的 status 为准
|
||||
const status = Number(payload?.status);
|
||||
if (status !== 200) {
|
||||
const reason = payload?.message || payload?.msg || '未知错误';
|
||||
const hint = status === 429 ? '（触发频率限制：3 秒 1 条 / 15 每分钟 / 60 每小时）'
|
||||
: status === 404 ? '（昵称未注册）'
|
||||
: status === 403 ? '（内容被策略拦截）' : '';
|
||||
throw new Error(`MeoW 推送失败 status=${status} ${reason}${hint}`);
|
||||
}
|
||||
return { channel: 'meow', ok: true, detail: payload.message || payload.msg || '推送成功' };
|
||||
}
|
||||
|
||||
/* ---------- 调度 ---------- */
|
||||
|
||||
export function parseQuietHours(spec) {
|
||||
if (!spec) return null;
|
||||
const m = /^(\d{1,2}):(\d{2})\s*-\s*(\d{1,2}):(\d{2})$/.exec(String(spec).trim());
|
||||
if (!m) return null;
|
||||
const [from, to] = [Number(m[1]) * 60 + Number(m[2]), Number(m[3]) * 60 + Number(m[4])];
|
||||
return { from, to };
|
||||
}
|
||||
|
||||
export function inQuietHours(spec, date = new Date()) {
|
||||
const range = parseQuietHours(spec);
|
||||
if (!range) return false;
|
||||
const now = date.getHours() * 60 + date.getMinutes();
|
||||
// 跨零点（如 23:00-07:00）
|
||||
return range.from <= range.to ? now >= range.from && now < range.to : now >= range.from || now < range.to;
|
||||
}
|
||||
|
||||
/** MeoW 客户端限流：保守遵守 3 秒 1 条 / 每分钟 15 条 / 每小时 60 条 */
|
||||
export function createMeoWLimiter(now = () => Date.now()) {
|
||||
let history = [];
|
||||
return {
|
||||
allow() {
|
||||
const t = now();
|
||||
history = history.filter((x) => t - x < 3600_000);
|
||||
const last = history.length ? history.at(-1) : Number.NEGATIVE_INFINITY; // 空历史不能当成 0，否则首条必被拦
|
||||
const inMinute = history.filter((x) => t - x < 60_000).length;
|
||||
if (t - last < 3000 || inMinute >= 15 || history.length >= 60) return false;
|
||||
return true;
|
||||
},
|
||||
mark() {
|
||||
history.push(now());
|
||||
},
|
||||
state: () => history.length,
|
||||
};
|
||||
}
|
||||
|
||||
const meowLimiter = createMeoWLimiter();
|
||||
|
||||
/**
|
||||
* 按配置把一条通知发到所有启用的渠道。
|
||||
* 静默时段内不发送，但返回 suppressed 标记（调用方仍需记录事件）。
|
||||
*/
|
||||
export async function notifyAll(cfg, message, { logger = console, fetchImpl = fetch, now = () => Date.now() } = {}) {
|
||||
if (!cfg?.enabled) return { suppressed: false, skipped: 'notify-disabled', results: [] };
|
||||
if (inQuietHours(cfg.quietHours)) {
|
||||
logger.log?.(`[notify] 静默时段（${cfg.quietHours}），本条不发送：${message.subject}`);
|
||||
return { suppressed: true, results: [] };
|
||||
}
|
||||
const results = [];
|
||||
const channels = cfg.channels ?? {};
|
||||
|
||||
if (channels.email?.enabled) {
|
||||
try {
|
||||
results.push(await sendEmail(channels.email, message));
|
||||
} catch (err) {
|
||||
results.push({ channel: 'email', ok: false, error: err.message });
|
||||
}
|
||||
}
|
||||
if (channels.meow?.enabled) {
|
||||
if (!meowLimiter.allow()) {
|
||||
results.push({ channel: 'meow', ok: false, error: '本地限流：为避免触发 MeoW 频率限制，本条已跳过', rateLimited: true });
|
||||
} else {
|
||||
try {
|
||||
meowLimiter.mark();
|
||||
results.push(await sendMeoW(channels.meow, message, { fetchImpl }));
|
||||
} catch (err) {
|
||||
results.push({ channel: 'meow', ok: false, error: err.message });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const failed = results.filter((r) => !r.ok);
|
||||
if (failed.length) logger.error?.(`[notify] 部分渠道发送失败：${failed.map((f) => `${f.channel}: ${f.error}`).join(' | ')}`);
|
||||
if (!failed.length && results.length) logger.log?.(`[notify] 已发送：${message.subject}`);
|
||||
return { suppressed: false, results };
|
||||
}
|
||||
|
||||
/** 自检：给每个启用的渠道发一条测试消息（不经过静默时段判定） */
|
||||
export async function sendTestNotifications(cfg, { logger = console, fetchImpl = fetch } = {}) {
|
||||
const channels = cfg?.channels ?? {};
|
||||
const subject = 'shiroko-monitor 通知自检';
|
||||
const text = `这是一条通道自检消息，收到即表示该渠道配置可用。\n时间：${new Date().toLocaleString('zh-CN')}`;
|
||||
const out = [];
|
||||
if (channels.email?.enabled) {
|
||||
try {
|
||||
out.push(await sendEmail(channels.email, { subject, text }));
|
||||
} catch (err) {
|
||||
out.push({ channel: 'email', ok: false, error: err.message });
|
||||
}
|
||||
} else {
|
||||
out.push({ channel: 'email', ok: false, error: '未启用（settings.notify.channels.email.enabled = false）' });
|
||||
}
|
||||
if (channels.meow?.enabled) {
|
||||
try {
|
||||
out.push(await sendMeoW(channels.meow, { title: subject, text }, { fetchImpl }));
|
||||
} catch (err) {
|
||||
out.push({ channel: 'meow', ok: false, error: err.message });
|
||||
}
|
||||
} else {
|
||||
out.push({ channel: 'meow', ok: false, error: '未启用（settings.notify.channels.meow.enabled = false）' });
|
||||
}
|
||||
for (const r of out) logger.log?.(` ${r.ok ? '✓' : '✗'} ${r.channel}：${r.ok ? r.detail : r.error}`);
|
||||
return out;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* TLS 证书探测：只做一次握手取 notAfter，用于「证书还有多久过期」提醒。
|
||||
*
|
||||
* 为什么不复用 HTTP 探测：现有探测走 fetch（undici），拿不到对端证书；
|
||||
* 单独握手更轻，也不影响既有探测路径与判定逻辑。
|
||||
* rejectUnauthorized 设为 false：证书已过期/不受信时也要能读到有效期，
|
||||
* 是否通过校验由 socket.authorized 反映。
|
||||
*/
|
||||
|
||||
import tls from 'node:tls';
|
||||
|
||||
export async function probeCertificate({ host, port = 443, servername, timeoutMs = 8000 }) {
|
||||
if (!host) return { error: '缺少主机名' };
|
||||
return new Promise((resolve) => {
|
||||
let settled = false;
|
||||
const finish = (result) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
try {
|
||||
socket.destroy();
|
||||
} catch { /* 忽略 */ }
|
||||
resolve(result);
|
||||
};
|
||||
const socket = tls.connect(
|
||||
{ host, port, servername: servername || host, rejectUnauthorized: false, timeout: timeoutMs },
|
||||
() => {
|
||||
let cert;
|
||||
try {
|
||||
cert = socket.getPeerCertificate();
|
||||
} catch (err) {
|
||||
return finish({ error: `读取证书失败：${err.message}` });
|
||||
}
|
||||
if (!cert || !cert.valid_to) return finish({ error: '未取到证书有效期' });
|
||||
const validTo = new Date(cert.valid_to);
|
||||
if (Number.isNaN(validTo.getTime())) return finish({ error: `证书有效期无法解析：${cert.valid_to}` });
|
||||
finish({
|
||||
error: null,
|
||||
validTo: validTo.toISOString(),
|
||||
daysLeft: Math.floor((validTo.getTime() - Date.now()) / 86_400_000),
|
||||
issuer: cert.issuer?.O || cert.issuer?.CN || null,
|
||||
subject: cert.subject?.CN || null,
|
||||
authorized: socket.authorized === true,
|
||||
});
|
||||
},
|
||||
);
|
||||
socket.on('error', (err) => finish({ error: err.message }));
|
||||
socket.on('timeout', () => finish({ error: `TLS 握手超时（${timeoutMs}ms）` }));
|
||||
});
|
||||
}
|
||||
|
||||
/** 从监控目标推断是否需要/如何进行证书检查 */
|
||||
export function tlsTargetOf(monitor) {
|
||||
if (!monitor || monitor.tls === false) return null;
|
||||
const url = monitor.url;
|
||||
if (!url || !/^https:\/\//i.test(url)) return null;
|
||||
try {
|
||||
const parsed = new URL(url);
|
||||
return { host: parsed.hostname, port: Number(parsed.port) || 443, servername: parsed.hostname };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* TOTP（RFC 6238）+ Base32，零依赖实现
|
||||
*
|
||||
* 只用 node:crypto 的 HMAC，不引第三方库。验证器 App（Google Authenticator /
|
||||
* Microsoft Authenticator / 1Password / Aegis 等）都用同一套算法。
|
||||
*
|
||||
* 参考：RFC 6238 TOTP、RFC 4226 HOTP、RFC 3548 Base32。
|
||||
*/
|
||||
|
||||
import crypto from 'node:crypto';
|
||||
|
||||
const BASE32_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
|
||||
|
||||
/* ---------- Base32 ---------- */
|
||||
|
||||
export function base32Encode(buf) {
|
||||
let bits = 0;
|
||||
let value = 0;
|
||||
let out = '';
|
||||
for (const byte of buf) {
|
||||
value = (value << 8) | byte;
|
||||
bits += 8;
|
||||
while (bits >= 5) {
|
||||
out += BASE32_ALPHABET[(value >>> (bits - 5)) & 31];
|
||||
bits -= 5;
|
||||
}
|
||||
}
|
||||
if (bits > 0) out += BASE32_ALPHABET[(value << (5 - bits)) & 31];
|
||||
return out;
|
||||
}
|
||||
|
||||
// 容忍用户输入里的小写、空格与连字符（很多 App 展示密钥时会分组）
|
||||
export function base32Decode(str) {
|
||||
const clean = String(str ?? '').toUpperCase().replace(/[\s-]/g, '');
|
||||
let bits = 0;
|
||||
let value = 0;
|
||||
const out = [];
|
||||
for (const ch of clean) {
|
||||
const idx = BASE32_ALPHABET.indexOf(ch);
|
||||
if (idx < 0) continue; // 跳过无法识别的字符（如误粘贴的 '0'/'1'/'8'/'9'）
|
||||
value = (value << 5) | idx;
|
||||
bits += 5;
|
||||
if (bits >= 8) {
|
||||
out.push((value >>> (bits - 8)) & 255);
|
||||
bits -= 8;
|
||||
}
|
||||
}
|
||||
return Buffer.from(out);
|
||||
}
|
||||
|
||||
/* ---------- 密钥 ---------- */
|
||||
|
||||
// 20 字节 = 160 位，符合 RFC 4226 对 HMAC-SHA1 的建议强度
|
||||
export function generateSecret(bytes = 20) {
|
||||
return base32Encode(crypto.randomBytes(bytes));
|
||||
}
|
||||
|
||||
/* ---------- TOTP ---------- */
|
||||
|
||||
export const DEFAULT_DIGITS = 6;
|
||||
export const DEFAULT_PERIOD_SEC = 30;
|
||||
// 允许 ±1 个时间窗：手机时间与服务端有几秒偏差是常态，也容忍一次网络延迟
|
||||
export const DEFAULT_WINDOW = 1;
|
||||
|
||||
export function hotp(secretBuf, counter, digits = DEFAULT_DIGITS) {
|
||||
const msg = Buffer.alloc(8);
|
||||
msg.writeBigUInt64BE(BigInt(counter));
|
||||
const hmac = crypto.createHmac('sha1', secretBuf).update(msg).digest();
|
||||
// RFC 4226 动态截断：取最后一个字节的低 4 位作偏移
|
||||
const offset = hmac[hmac.length - 1] & 0x0f;
|
||||
const code = ((hmac[offset] & 0x7f) << 24) | (hmac[offset + 1] << 16) | (hmac[offset + 2] << 8) | hmac[offset + 3];
|
||||
return String(code % 10 ** digits).padStart(digits, '0');
|
||||
}
|
||||
|
||||
export function totp(secretBuf, { atMs = Date.now(), periodSec = DEFAULT_PERIOD_SEC, digits = DEFAULT_DIGITS } = {}) {
|
||||
return hotp(secretBuf, Math.floor(atMs / 1000 / periodSec), digits);
|
||||
}
|
||||
|
||||
/**
|
||||
* 校验用户输入的验证码。
|
||||
* 返回 null 表示通过；返回字符串表示拒绝原因（供接口回显，不泄露密钥相关信息）。
|
||||
*/
|
||||
export function verifyTotp(secret, code, { atMs = Date.now(), periodSec = DEFAULT_PERIOD_SEC, digits = DEFAULT_DIGITS, window = DEFAULT_WINDOW } = {}) {
|
||||
const clean = String(code ?? '').replace(/\s|-/g, '');
|
||||
if (!new RegExp(`^\\d{${digits}}$`).test(clean)) return 'invalid-format';
|
||||
const secretBuf = base32Decode(secret);
|
||||
if (secretBuf.length < 10) return 'invalid-secret';
|
||||
const counter = Math.floor(atMs / 1000 / periodSec);
|
||||
// 用定长比较，避免逐字符提前返回带来的时序侧信道
|
||||
const a = Buffer.from(clean, 'utf8');
|
||||
for (let w = -window; w <= window; w++) {
|
||||
const expect = Buffer.from(hotp(secretBuf, counter + w, digits), 'utf8');
|
||||
if (expect.length === a.length && crypto.timingSafeEqual(expect, a)) return null;
|
||||
}
|
||||
return 'invalid-code';
|
||||
}
|
||||
|
||||
// 当前验证码所属的时间步：用于「同一步内不得重复使用」的防重放
|
||||
export function totpCounter({ atMs = Date.now(), periodSec = DEFAULT_PERIOD_SEC } = {}) {
|
||||
return Math.floor(atMs / 1000 / periodSec);
|
||||
}
|
||||
|
||||
/* ---------- otpauth URI（给验证器扫码用） ---------- */
|
||||
|
||||
export function otpauthUri({ secret, label, issuer, digits = DEFAULT_DIGITS, periodSec = DEFAULT_PERIOD_SEC }) {
|
||||
const q = new URLSearchParams({ secret, digits: String(digits), period: String(periodSec) });
|
||||
// issuer 同时出现在路径与查询参数里：兼容各家 App 的两种解析方式
|
||||
if (issuer) q.set('issuer', issuer);
|
||||
return `otpauth://totp/${encodeURIComponent(issuer ?? label)}:${encodeURIComponent(label)}?${q}`;
|
||||
}
|
||||
|
||||
/* ---------- 恢复码 ---------- */
|
||||
|
||||
// 每个码 10 字符，形如 X7K2-9QMD4；只存哈希，明文只在绑定成功时展示一次
|
||||
export function generateRecoveryCodes(count = 10) {
|
||||
const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // 去掉易混淆的 0/O/1/I
|
||||
const codes = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
let s = '';
|
||||
const bytes = crypto.randomBytes(10);
|
||||
for (let j = 0; j < 10; j++) s += alphabet[bytes[j] % alphabet.length];
|
||||
codes.push(`${s.slice(0, 5)}-${s.slice(5)}`);
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
// 归一化后再哈希：用户从别处抄码常漏掉连字符或用小写，两种都要能登录
|
||||
export function hashRecoveryCode(code, salt) {
|
||||
const norm = String(code ?? '').toUpperCase().replace(/[\s-]/g, '');
|
||||
return crypto.createHash('sha256').update(`${salt}:${norm}`).digest('hex');
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>管理后台 · Shiroko Monitor</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="stylesheet" href="/assets/theme-shiroko.css">
|
||||
<link rel="stylesheet" href="/assets/admin.css">
|
||||
</head>
|
||||
<body class="admin-body">
|
||||
<header class="admin-topbar">
|
||||
<div class="brand">
|
||||
<span class="logo" aria-hidden="true"></span>
|
||||
<div class="brand-text">
|
||||
<h1>管理后台</h1>
|
||||
<p>需绑定并通过 2FA 验证后才能进入</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-topbar-right">
|
||||
<span class="admin-ver" id="admin-ver">–</span>
|
||||
<a class="admin-link" href="/">← 返回面板</a>
|
||||
<button type="button" class="admin-btn admin-btn-ghost" id="logout-btn" hidden>退出登录</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="admin-main">
|
||||
<!-- 状态探测中 -->
|
||||
<section class="admin-card" id="loading"><p class="admin-muted">正在检查 2FA 状态…</p></section>
|
||||
|
||||
<!-- ① 未绑定：先绑定 2FA -->
|
||||
<section class="admin-card" id="bind-panel" hidden>
|
||||
<h2>第一步：绑定 2FA</h2>
|
||||
<p class="admin-muted">管理后台必须绑定两步验证后才能进入。请先在启动探针的环境里设置 <code>SHIROKO_ADMIN_SETUP_KEY</code>，然后在这里输入它以生成密钥。</p>
|
||||
|
||||
<div class="admin-step" id="step-key">
|
||||
<label for="setup-key">绑定口令（SHIROKO_ADMIN_SETUP_KEY）</label>
|
||||
<div class="admin-row">
|
||||
<input type="password" id="setup-key" autocomplete="off" placeholder="环境变量里设置的那个值" inputmode="text">
|
||||
<button type="button" class="admin-btn" id="setup-start">生成密钥</button>
|
||||
</div>
|
||||
<p class="admin-msg" id="setup-key-msg"></p>
|
||||
</div>
|
||||
|
||||
<div class="admin-step" id="step-secret" hidden>
|
||||
<h3>第二步：把密钥加入你的验证器 App</h3>
|
||||
<ol class="admin-ol">
|
||||
<li>用 Google Authenticator / Microsoft Authenticator / 1Password / Aegis 扫描二维码，或</li>
|
||||
<li>手动输入下面的密钥（Base32）：</li>
|
||||
</ol>
|
||||
<div class="qr-box"><canvas id="qr" width="220" height="220" aria-label="2FA 绑定二维码"></canvas></div>
|
||||
<div class="secret-box">
|
||||
<code id="secret-text">–</code>
|
||||
<button type="button" class="admin-btn admin-btn-sm" id="copy-secret">复制密钥</button>
|
||||
</div>
|
||||
<details class="admin-details">
|
||||
<summary>扫码不方便？复制 otpauth 链接</summary>
|
||||
<div class="secret-box"><code id="uri-text">–</code><button type="button" class="admin-btn admin-btn-sm" id="copy-uri">复制链接</button></div>
|
||||
</details>
|
||||
<h3>第三步：输入 App 显示的 6 位验证码完成绑定</h3>
|
||||
<div class="admin-row">
|
||||
<input type="text" id="confirm-code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="6 位数字">
|
||||
<button type="button" class="admin-btn" id="confirm-btn">完成绑定</button>
|
||||
</div>
|
||||
<p class="admin-msg" id="confirm-msg"></p>
|
||||
</div>
|
||||
|
||||
<div class="admin-step" id="step-recovery" hidden>
|
||||
<h3>第四步：保存恢复码（只显示这一次）</h3>
|
||||
<p class="admin-muted">每个恢复码只能用一次，用于手机丢失、验证器清库时登录。请离线保存，不要只存在这台机器上。</p>
|
||||
<div class="recovery-box" id="recovery-list"></div>
|
||||
<div class="admin-row">
|
||||
<button type="button" class="admin-btn admin-btn-sm" id="copy-recovery">复制全部恢复码</button>
|
||||
<button type="button" class="admin-btn admin-btn-primary" id="recovery-done">我已保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ② 已绑定未登录：输 2FA 码登录 -->
|
||||
<section class="admin-card admin-card-narrow" id="login-panel" hidden>
|
||||
<h2>两步验证</h2>
|
||||
<p class="admin-muted">输入验证器 App 的 6 位动态码，或使用一枚未用过的恢复码。</p>
|
||||
<div class="admin-row">
|
||||
<input type="text" id="login-code" inputmode="numeric" autocomplete="one-time-code" placeholder="验证码 / 恢复码" autofocus>
|
||||
<button type="button" class="admin-btn admin-btn-primary" id="login-btn">进入</button>
|
||||
</div>
|
||||
<p class="admin-msg" id="login-msg"></p>
|
||||
<details class="admin-details">
|
||||
<summary>验证码设备丢了？</summary>
|
||||
<p class="admin-muted">用一枚未使用的恢复码登录；或用 <code>SHIROKO_ADMIN_SETUP_KEY</code> 重置 2FA（重置后需重新绑定）。</p>
|
||||
<div class="admin-row">
|
||||
<input type="password" id="reset-key" placeholder="SHIROKO_ADMIN_SETUP_KEY" autocomplete="off">
|
||||
<button type="button" class="admin-btn admin-btn-danger" id="reset-btn">重置 2FA</button>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- ③ 已登录：管理面板 -->
|
||||
<section id="console-panel" hidden>
|
||||
<div class="admin-card" id="stat-card">
|
||||
<h2>运行状态</h2>
|
||||
<div class="admin-stats" id="admin-stats"></div>
|
||||
<p class="admin-muted" id="updated-at">–</p>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>口径与范围</h2>
|
||||
<div class="admin-field">
|
||||
<label for="probe-scope">探测范围</label>
|
||||
<select id="probe-scope">
|
||||
<option value="all">全部（自建 + UptimeRobot）</option>
|
||||
<option value="config">仅自建配置</option>
|
||||
<option value="uptimerobot">仅 UptimeRobot</option>
|
||||
</select>
|
||||
<p class="admin-hint">决定探针真正发请求的范围；改动立即生效并热重载配置。</p>
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="data-filter">展示口径</label>
|
||||
<select id="data-filter">
|
||||
<option value="both">全部</option>
|
||||
<option value="config">仅自建配置</option>
|
||||
<option value="uptimerobot">仅 UptimeRobot</option>
|
||||
</select>
|
||||
<p class="admin-hint">只影响面板展示哪些目标；与探测范围相互独立。</p>
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="admin-url">面板上的管理入口链接</label>
|
||||
<input type="url" id="admin-url" placeholder="https://admin.example.com/admin" autocomplete="off">
|
||||
<p class="admin-hint">
|
||||
填了之后，公开面板页脚会出现一个「管理」按钮指向这里；<b>留空则不显示</b>。
|
||||
地址由你自行决定怎么暴露（内网 IP、Tailscale、VPS 域名、隧道……都可以），
|
||||
面板不做任何假设。
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="data-url">跨域数据源地址</label>
|
||||
<input type="url" id="data-url" placeholder="https://monitor.example.com" autocomplete="off">
|
||||
<p class="admin-hint">
|
||||
仅当<b>面板部署在别处</b>（GitHub Pages / Cloudflare）而探针在另一台机器时才需要填。
|
||||
填了之后面板会去这个地址取数据，因此<b>该地址必须与页面同为 HTTPS</b> ——
|
||||
HTTPS 页面读 HTTP 会被浏览器以「混合内容」为由直接拦截，与跨域设置无关。
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="cors-origins">允许跨域读取的页面地址</label>
|
||||
<input type="text" id="cors-origins" placeholder="https://you.github.io, https://monitor.example.com" autocomplete="off">
|
||||
<p class="admin-hint">
|
||||
逗号分隔，<b>必须是完整来源（含协议与端口）</b>。只有这里列出的页面才能跨域读走监控数据；
|
||||
默认只放行 <code>http://127.0.0.1</code> 与 <code>http://localhost</code>。管理端本身永远不同源开放。
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-row">
|
||||
<button type="button" class="admin-btn" id="probe-now">立即重新探测</button>
|
||||
<button type="button" class="admin-btn" id="notify-test">发送通知自检</button>
|
||||
</div>
|
||||
<p class="admin-msg" id="action-msg"></p>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>维护窗口</h2>
|
||||
<p class="admin-muted">窗口内的目标不计入可用率、也不发故障告警。</p>
|
||||
<div class="admin-field-row">
|
||||
<div class="admin-field">
|
||||
<label for="mw-from">开始</label>
|
||||
<input type="datetime-local" id="mw-from">
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="mw-to">结束</label>
|
||||
<input type="datetime-local" id="mw-to">
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-field-row">
|
||||
<div class="admin-field">
|
||||
<label for="mw-id">仅限目标（留空 = 全部）</label>
|
||||
<select id="mw-id"><option value="">全部目标</option></select>
|
||||
</div>
|
||||
<div class="admin-field">
|
||||
<label for="mw-note">备注</label>
|
||||
<input type="text" id="mw-note" maxlength="200" placeholder="例如：升级数据库">
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-row">
|
||||
<button type="button" class="admin-btn admin-btn-primary" id="mw-add">新增窗口</button>
|
||||
</div>
|
||||
<div class="mw-list" id="mw-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>监控目标</h2>
|
||||
<p class="admin-muted">当前配置中的目标（探测范围为 uptimerobot 时，本地目标不会被真正探测）。</p>
|
||||
<div class="table-scroll">
|
||||
<table class="admin-table">
|
||||
<thead><tr><th>名称</th><th>分组</th><th>类型</th><th>目标</th><th>间隔</th></tr></thead>
|
||||
<tbody id="monitor-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>最近事件</h2>
|
||||
<div class="table-scroll">
|
||||
<table class="admin-table ev-table">
|
||||
<thead><tr><th>时间</th><th>类型</th><th>目标</th><th>详情</th></tr></thead>
|
||||
<tbody id="event-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-card">
|
||||
<h2>安全</h2>
|
||||
<p class="admin-muted" id="twofa-summary">–</p>
|
||||
<p class="admin-muted">会话最长 2 小时，30 分钟无操作自动失效；进程重启会清空所有会话。</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script type="module" src="/assets/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,171 @@
|
||||
/* 管理后台：复用面板的配色变量，跟随浅色/深色与砂狼主题 */
|
||||
|
||||
body.admin-body { min-height: 100vh; }
|
||||
|
||||
.admin-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 20px;
|
||||
padding: 12px 20px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.admin-topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.admin-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||||
.admin-ver { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
|
||||
.admin-link { font-size: 13px; color: var(--accent); text-decoration: none; }
|
||||
.admin-link:hover { text-decoration: underline; }
|
||||
|
||||
.admin-main {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 18px 20px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
padding: 16px 18px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.admin-card-narrow { max-width: 460px; }
|
||||
.admin-card h2 { margin: 0 0 10px; font-size: 14px; font-weight: 650; }
|
||||
.admin-card h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 650; color: var(--text-2); }
|
||||
.admin-muted { margin: 0 0 10px; font-size: 12px; line-height: 1.7; color: var(--text-2); }
|
||||
.admin-muted code { font-family: var(--mono); background: var(--bg); padding: 0 4px; border-radius: 4px; }
|
||||
.admin-hint { margin: 4px 0 0; font-size: 11px; color: var(--text-2); line-height: 1.6; }
|
||||
|
||||
.admin-step { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
|
||||
.admin-step:first-of-type { border-top: 0; }
|
||||
.admin-ol { margin: 6px 0 10px; padding-left: 20px; font-size: 12px; line-height: 1.9; color: var(--text-2); }
|
||||
|
||||
.admin-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.admin-row input, .admin-row select { flex: 1 1 200px; min-width: 0; }
|
||||
|
||||
.admin-field { margin: 10px 0; min-width: 0; }
|
||||
.admin-field label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
|
||||
.admin-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.admin-field-row .admin-field { flex: 1 1 220px; }
|
||||
|
||||
input[type="text"], input[type="password"], input[type="datetime-local"], select {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
}
|
||||
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
|
||||
|
||||
.admin-btn {
|
||||
padding: 7px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admin-btn:hover { background: var(--bg); border-color: var(--accent); }
|
||||
.admin-btn:disabled { opacity: 0.55; cursor: default; }
|
||||
.admin-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.admin-btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
|
||||
.admin-btn-danger { border-color: color-mix(in srgb, var(--down) 45%, var(--border)); color: var(--down-text); }
|
||||
.admin-btn-sm { padding: 4px 10px; font-size: 12px; }
|
||||
.admin-btn-ghost { padding: 5px 12px; font-size: 12px; }
|
||||
|
||||
.admin-msg { margin: 8px 0 0; font-size: 12px; min-height: 18px; color: var(--text-2); }
|
||||
.admin-msg.err { color: var(--down-text); }
|
||||
.admin-msg.ok { color: var(--up-text); }
|
||||
|
||||
.qr-box { display: flex; justify-content: center; margin: 10px 0; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
|
||||
.qr-box canvas { width: 220px; height: 220px; image-rendering: pixelated; }
|
||||
|
||||
.secret-box {
|
||||
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
|
||||
padding: 8px 10px; margin-bottom: 8px;
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
|
||||
}
|
||||
.secret-box code { flex: 1 1 200px; min-width: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; line-height: 1.6; }
|
||||
|
||||
.admin-details { margin-top: 10px; font-size: 12px; color: var(--text-2); }
|
||||
.admin-details summary { cursor: pointer; color: var(--accent); }
|
||||
.admin-details > *:not(summary) { margin-top: 8px; }
|
||||
|
||||
.recovery-box {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
|
||||
gap: 6px; margin-bottom: 10px;
|
||||
}
|
||||
.recovery-box code {
|
||||
padding: 6px 8px; background: var(--bg); border: 1px solid var(--border);
|
||||
border-radius: 6px; font-family: var(--mono); font-size: 12px; text-align: center;
|
||||
}
|
||||
|
||||
.admin-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
|
||||
.admin-stat { text-align: center; min-width: 56px; }
|
||||
.admin-stat b { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.admin-stat label { font-size: 11px; color: var(--text-2); }
|
||||
.admin-stat.up b { color: var(--up-text); }
|
||||
.admin-stat.down b { color: var(--down-text); }
|
||||
.admin-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--text-2); }
|
||||
.admin-kv code { font-family: var(--mono); color: var(--text); }
|
||||
|
||||
.mw-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
|
||||
.mw-item {
|
||||
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
||||
padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.mw-item .mw-time { font-family: var(--mono); }
|
||||
.mw-item .mw-note { color: var(--text-2); }
|
||||
.mw-item.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
|
||||
.mw-tag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; }
|
||||
.mw-tag.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
|
||||
.mw-tag.idle { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
|
||||
|
||||
.table-scroll { overflow-x: auto; }
|
||||
.admin-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
|
||||
.admin-table th {
|
||||
padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 600;
|
||||
color: var(--text-2); background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap;
|
||||
}
|
||||
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.admin-table tbody tr:last-child td { border-bottom: 0; }
|
||||
.admin-table tbody tr[data-status="down"] { background: color-mix(in srgb, var(--down) 6%, transparent); }
|
||||
.admin-table tbody tr[data-status="up"] { background: color-mix(in srgb, var(--up) 5%, transparent); }
|
||||
.admin-table tbody tr[data-status="pending"] { background: color-mix(in srgb, var(--pending) 6%, transparent); }
|
||||
.admin-table td.mono { font-family: var(--mono); }
|
||||
.admin-table th:nth-child(1) { width: 26%; }
|
||||
.admin-table th:nth-child(2) { width: 16%; }
|
||||
.admin-table th:nth-child(3) { width: 11%; }
|
||||
.admin-table th:nth-child(4) { width: 30%; }
|
||||
.admin-table th:nth-child(5) { width: 17%; }
|
||||
.admin-table.ev-table th:nth-child(1) { width: 15%; }
|
||||
.admin-table.ev-table th:nth-child(2) { width: 10%; }
|
||||
.admin-table.ev-table th:nth-child(3) { width: 25%; }
|
||||
.admin-table.ev-table th:nth-child(4) { width: 50%; }
|
||||
.ev-badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 650; }
|
||||
tr[data-status="down"] .ev-badge { background: var(--down-bg); color: var(--down-text); }
|
||||
tr[data-status="up"] .ev-badge { background: var(--up-bg); color: var(--up-text); }
|
||||
tr[data-status="pending"] .ev-badge { background: var(--pending-bg); color: var(--pending-text); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.admin-topbar { padding: 10px 14px; }
|
||||
.admin-main { padding: 14px 14px 40px; }
|
||||
.admin-field-row { flex-direction: column; gap: 0; }
|
||||
.admin-table.ev-table td.mono, .admin-table.ev-table th:nth-child(4) { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,625 @@
|
||||
/**
|
||||
* 管理后台前端：绑定 2FA → 登录 → 管理面板
|
||||
*
|
||||
* 零依赖，QR 码用内置的最小实现生成（只支持 byte 模式、ECC L、版本自动 1–10），
|
||||
* 覆盖 otpauth 链接（通常 60–120 字节）的长度。
|
||||
*/
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const ESC = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
|
||||
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ESC[c]);
|
||||
|
||||
const API = '/api/admin';
|
||||
|
||||
let setupDraft = null; // 绑定过程中的临时状态：{ setupToken, secret, uri }
|
||||
|
||||
async function api(path, { method = 'GET', body } = {}) {
|
||||
const res = await fetch(`${API}${path}`, {
|
||||
method,
|
||||
credentials: 'same-origin',
|
||||
cache: 'no-store',
|
||||
headers: body ? { 'content-type': 'application/json' } : {},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
signal: AbortSignal.timeout(30000),
|
||||
});
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch { /* 空响应体 */ }
|
||||
return { ok: res.ok, status: res.status, data, retryAfter: res.headers.get('retry-after') };
|
||||
}
|
||||
|
||||
function msg(el, text, kind = '') {
|
||||
el.textContent = text;
|
||||
el.className = `admin-msg${kind ? ` ${kind}` : ''}`;
|
||||
}
|
||||
|
||||
const ERROR_TEXT = {
|
||||
'bad-setup-key': '绑定口令不正确',
|
||||
'setup-disabled': '未设置 SHIROKO_ADMIN_SETUP_KEY 环境变量，管理端未开放绑定',
|
||||
'already-bound': '已完成绑定，不能重复绑定',
|
||||
'no-setup': '绑定流程已失效，请重新开始',
|
||||
'setup-expired': '绑定流程超过 10 分钟已失效，请重新开始',
|
||||
'invalid-code': '验证码不正确',
|
||||
'invalid-format': '格式不正确',
|
||||
replayed: '该验证码已被使用过，请等下一个时间窗',
|
||||
locked: '失败次数过多，请稍后再试',
|
||||
'not-bound': '尚未绑定 2FA',
|
||||
unauthorized: '会话已失效，请重新登录',
|
||||
'invalid-window': '时间无效，或结束早于开始',
|
||||
'invalid-index': '窗口序号无效',
|
||||
'invalid-scope': '探测范围取值无效',
|
||||
'invalid-filter': '展示口径取值无效',
|
||||
'notify-disabled': '未启用任何通知渠道',
|
||||
};
|
||||
|
||||
const errText = (code, hint) => ERROR_TEXT[code] ?? hint ?? '操作失败';
|
||||
|
||||
/* ============================================================
|
||||
* QR 码生成（byte 模式 / ECC L / 版本 1–10）
|
||||
* 参考 ISO/IEC 18004；这里只保留生成 otpauth 链接所需的最小子集。
|
||||
* ============================================================ */
|
||||
|
||||
// GF(256) 对数/指数表，本原多项式 0x11D
|
||||
const GF_EXP = new Uint8Array(512);
|
||||
const GF_LOG = new Uint8Array(256);
|
||||
(function initGf() {
|
||||
let x = 1;
|
||||
for (let i = 0; i < 255; i++) {
|
||||
GF_EXP[i] = x;
|
||||
GF_LOG[x] = i;
|
||||
x <<= 1;
|
||||
if (x & 0x100) x ^= 0x11d;
|
||||
}
|
||||
for (let i = 255; i < 512; i++) GF_EXP[i] = GF_EXP[i - 255];
|
||||
})();
|
||||
|
||||
const gfMul = (a, b) => (a === 0 || b === 0 ? 0 : GF_EXP[GF_LOG[a] + GF_LOG[b]]);
|
||||
|
||||
function rsGeneratorPoly(degree) {
|
||||
let poly = [1];
|
||||
for (let i = 0; i < degree; i++) {
|
||||
const next = new Array(poly.length + 1).fill(0);
|
||||
for (let j = 0; j < poly.length; j++) {
|
||||
next[j] ^= poly[j];
|
||||
next[j + 1] ^= gfMul(poly[j], GF_EXP[i]);
|
||||
}
|
||||
poly = next;
|
||||
}
|
||||
return poly;
|
||||
}
|
||||
|
||||
function rsEncode(data, ecLen) {
|
||||
const gen = rsGeneratorPoly(ecLen);
|
||||
const res = new Uint8Array(data.length + ecLen);
|
||||
res.set(data);
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const factor = res[i];
|
||||
if (factor === 0) continue;
|
||||
for (let j = 0; j < gen.length; j++) res[i + j] ^= gfMul(gen[j], factor);
|
||||
}
|
||||
return res.slice(data.length);
|
||||
}
|
||||
|
||||
// 版本 1–10 在 ECC L 下的参数表：[总码字数, EC 每块码字数, 组1块数, 组1数据码字, 组2块数, 组2数据码字]
|
||||
// 索引 0 = 版本 1
|
||||
const VERSIONS = [
|
||||
null,
|
||||
[26, 7, 1, 19, 0, 0],
|
||||
[44, 10, 1, 34, 0, 0],
|
||||
[70, 15, 1, 55, 0, 0],
|
||||
[100, 20, 1, 80, 0, 0],
|
||||
[134, 26, 1, 108, 0, 0],
|
||||
[172, 18, 2, 68, 0, 0],
|
||||
[196, 20, 2, 78, 0, 0],
|
||||
[242, 24, 2, 97, 0, 0],
|
||||
[292, 30, 2, 116, 0, 0],
|
||||
[346, 18, 2, 68, 2, 69],
|
||||
];
|
||||
|
||||
const ALIGN_POS = {
|
||||
1: [], 2: [6, 18], 3: [6, 22], 4: [6, 26], 5: [6, 30],
|
||||
6: [6, 34], 7: [6, 22, 38], 8: [6, 24, 42], 9: [6, 26, 46], 10: [6, 28, 50],
|
||||
};
|
||||
|
||||
function pickVersion(byteLen) {
|
||||
for (let v = 1; v <= 10; v++) {
|
||||
const [, ecLen, b1, d1, b2, d2] = VERSIONS[v];
|
||||
const capacityBits = b1 * d1 * 8 + b2 * d2 * 8;
|
||||
const headerBits = 4 + (v < 10 ? 8 : 16);
|
||||
if (headerBits + byteLen * 8 <= capacityBits) return v;
|
||||
}
|
||||
throw new Error('内容过长，无法生成二维码');
|
||||
}
|
||||
|
||||
function buildCodewords(bytes, version) {
|
||||
const [, ecLen, b1, d1, b2, d2] = VERSIONS[version];
|
||||
const totalData = b1 * d1 + b2 * d2;
|
||||
const bits = [];
|
||||
const put = (val, len) => { for (let i = len - 1; i >= 0; i--) bits.push((val >> i) & 1); };
|
||||
put(0b0100, 4); // byte 模式
|
||||
put(bytes.length, version < 10 ? 8 : 16);
|
||||
for (const b of bytes) put(b, 8);
|
||||
// 终止符最多 4 个 0，再补齐到字节边界
|
||||
for (let i = 0; i < 4 && bits.length < totalData * 8; i++) bits.push(0);
|
||||
while (bits.length % 8 !== 0) bits.push(0);
|
||||
const codewords = new Uint8Array(totalData);
|
||||
for (let i = 0; i < bits.length; i += 8) {
|
||||
let byte = 0;
|
||||
for (let j = 0; j < 8; j++) byte = (byte << 1) | bits[i + j];
|
||||
codewords[i / 8] = byte;
|
||||
}
|
||||
// 填充字节 0xEC / 0x11 交替
|
||||
const PAD = [0xec, 0x11];
|
||||
for (let i = bits.length / 8, k = 0; i < totalData; i++, k++) codewords[i] = PAD[k % 2];
|
||||
|
||||
// 分块 + 纠错 + 交织
|
||||
const blocks = [];
|
||||
let off = 0;
|
||||
for (let i = 0; i < b1; i++) { blocks.push(codewords.slice(off, off + d1)); off += d1; }
|
||||
for (let i = 0; i < b2; i++) { blocks.push(codewords.slice(off, off + d2)); off += d2; }
|
||||
const ecBlocks = blocks.map((b) => rsEncode(b, ecLen));
|
||||
const out = [];
|
||||
const maxData = Math.max(d1, d2);
|
||||
for (let i = 0; i < maxData; i++) for (const b of blocks) if (i < b.length) out.push(b[i]);
|
||||
for (let i = 0; i < ecLen; i++) for (const b of ecBlocks) out.push(b[i]);
|
||||
return out;
|
||||
}
|
||||
|
||||
function makeMatrix(version, codewords) {
|
||||
const size = version * 4 + 17;
|
||||
const m = Array.from({ length: size }, () => new Array(size).fill(null));
|
||||
const setFn = (r, c, v) => { if (r >= 0 && r < size && c >= 0 && c < size) m[r][c] = v; };
|
||||
|
||||
const finder = (r0, c0) => {
|
||||
for (let r = -1; r <= 7; r++) {
|
||||
for (let c = -1; c <= 7; c++) {
|
||||
const inRing = (r >= 0 && r <= 6 && (c === 0 || c === 6)) || (c >= 0 && c <= 6 && (r === 0 || r === 6));
|
||||
const inCore = r >= 2 && r <= 4 && c >= 2 && c <= 4;
|
||||
setFn(r0 + r, c0 + c, inRing || inCore ? 1 : 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
finder(0, 0);
|
||||
finder(0, size - 7);
|
||||
finder(size - 7, 0);
|
||||
|
||||
// 校正图形（跳过与 finder 图案重叠的位置）
|
||||
for (const r of ALIGN_POS[version] ?? []) {
|
||||
for (const c of ALIGN_POS[version] ?? []) {
|
||||
if ((r <= 8 && c <= 8) || (r <= 8 && c >= size - 9) || (r >= size - 9 && c <= 8)) continue;
|
||||
for (let dr = -2; dr <= 2; dr++) {
|
||||
for (let dc = -2; dc <= 2; dc++) {
|
||||
setFn(r + dr, c + dc, Math.max(Math.abs(dr), Math.abs(dc)) !== 1 ? 1 : 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 定时图形
|
||||
for (let i = 8; i < size - 8; i++) {
|
||||
setFn(6, i, i % 2 === 0 ? 1 : 0);
|
||||
setFn(i, 6, i % 2 === 0 ? 1 : 0);
|
||||
}
|
||||
|
||||
// 预留格式信息位（15 位）与版本信息位（版本 ≥ 7）
|
||||
for (let i = 0; i <= 8; i++) {
|
||||
if (m[8][i] === null) setFn(8, i, 0);
|
||||
if (m[i][8] === null) setFn(i, 8, 0);
|
||||
}
|
||||
for (let i = 0; i < 8; i++) {
|
||||
if (m[8][size - 1 - i] === null) setFn(8, size - 1 - i, 0);
|
||||
if (m[size - 1 - i][8] === null) setFn(size - 1 - i, 8, 0);
|
||||
}
|
||||
if (version >= 7) {
|
||||
for (let i = 0; i < 18; i++) {
|
||||
setFn(Math.floor(i / 3), size - 11 + (i % 3), 0);
|
||||
setFn(size - 11 + (i % 3), Math.floor(i / 3), 0);
|
||||
}
|
||||
}
|
||||
|
||||
const reserved = m.map((row) => row.map((v) => v !== null));
|
||||
|
||||
// 数据按之字形填入（从右下角起，每两列一组，方向交替）
|
||||
let bitIndex = 0;
|
||||
const dataBits = [];
|
||||
for (const cw of codewords) for (let i = 7; i >= 0; i--) dataBits.push((cw >> i) & 1);
|
||||
let upward = true;
|
||||
for (let col = size - 1; col > 0; col -= 2) {
|
||||
if (col === 6) col--; // 跳过垂直定时图形所在列
|
||||
for (let k = 0; k < size; k++) {
|
||||
const row = upward ? size - 1 - k : k;
|
||||
for (const c of [col, col - 1]) {
|
||||
if (reserved[row][c]) continue;
|
||||
m[row][c] = dataBits[bitIndex] ? 1 : 0;
|
||||
bitIndex++;
|
||||
}
|
||||
}
|
||||
upward = !upward;
|
||||
}
|
||||
|
||||
// 8 种掩码，按 ISO 惩罚分选最低
|
||||
const maskFns = [
|
||||
(r, c) => (r + c) % 2 === 0,
|
||||
(r) => r % 2 === 0,
|
||||
(r, c) => c % 3 === 0,
|
||||
(r, c) => (r + c) % 3 === 0,
|
||||
(r, c) => (Math.floor(r / 2) + Math.floor(c / 3)) % 2 === 0,
|
||||
(r, c) => ((r * c) % 2) + ((r * c) % 3) === 0,
|
||||
(r, c) => (((r * c) % 2) + ((r * c) % 3)) % 2 === 0,
|
||||
(r, c) => (((r + c) % 2) + ((r * c) % 3)) % 2 === 0,
|
||||
];
|
||||
|
||||
const applyMask = (base, fn) => base.map((row, r) => row.map((v, c) => (reserved[r][c] ? v : (v ^ (fn(r, c) ? 1 : 0)))));
|
||||
const penalty = (g) => {
|
||||
let score = 0;
|
||||
// 规则 1：同色连续 ≥5
|
||||
for (const line of [...g, ...g[0].map((_, c) => g.map((row) => row[c]))]) {
|
||||
let run = 1;
|
||||
for (let i = 1; i < line.length; i++) {
|
||||
if (line[i] === line[i - 1]) run++;
|
||||
else { if (run >= 5) score += run - 2; run = 1; }
|
||||
}
|
||||
if (run >= 5) score += run - 2;
|
||||
}
|
||||
// 规则 2：2×2 同色块
|
||||
for (let r = 0; r < g.length - 1; r++) {
|
||||
for (let c = 0; c < g.length - 1; c++) {
|
||||
const v = g[r][c];
|
||||
if (v === g[r][c + 1] && v === g[r + 1][c] && v === g[r + 1][c + 1]) score += 3;
|
||||
}
|
||||
}
|
||||
// 规则 4：黑白比例偏离 50%
|
||||
let dark = 0;
|
||||
for (const row of g) for (const v of row) dark += v;
|
||||
const pct = (dark * 100) / (g.length * g.length);
|
||||
score += Math.floor(Math.abs(pct - 50) / 5) * 10;
|
||||
return score;
|
||||
};
|
||||
|
||||
let best = null;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const cand = applyMask(m, maskFns[i]);
|
||||
const sc = penalty(cand);
|
||||
if (!best || sc < best.score) best = { score: sc, grid: cand, mask: i };
|
||||
}
|
||||
|
||||
// 写回格式信息：ECC L 的指示位为 0b01，拼接 3 位掩码编号后按 BCH(15,5) 计算校验并与 0x5412 掩码异或
|
||||
const fmtData = (0b01 << 3) | best.mask;
|
||||
let bch = fmtData << 10;
|
||||
for (let i = 4; i >= 0; i--) {
|
||||
if (bch & (1 << (i + 10))) bch ^= 0b10100110111 << i;
|
||||
}
|
||||
const format = ((fmtData << 10) | (bch & 0x3ff)) ^ 0b101010000010010;
|
||||
const f = bitsOf(format, 15);
|
||||
for (let i = 0; i <= 5; i++) best.grid[8][i] = f[i];
|
||||
best.grid[8][7] = f[6];
|
||||
best.grid[8][8] = f[7];
|
||||
best.grid[7][8] = f[8];
|
||||
for (let i = 9; i <= 14; i++) best.grid[14 - i][8] = f[i];
|
||||
for (let i = 0; i <= 7; i++) best.grid[size - 1 - i][8] = f[i];
|
||||
for (let i = 8; i <= 14; i++) best.grid[8][size - 15 + i] = f[i];
|
||||
best.grid[size - 8][8] = 1; // 固定的黑点
|
||||
|
||||
return best.grid;
|
||||
}
|
||||
|
||||
function bitsOf(val, len) {
|
||||
const out = [];
|
||||
for (let i = len - 1; i >= 0; i--) out.push((val >> i) & 1);
|
||||
return out;
|
||||
}
|
||||
|
||||
/** 把文本渲染成 canvas 上的二维码 */
|
||||
function renderQr(text, canvas) {
|
||||
const bytes = [...new TextEncoder().encode(text)];
|
||||
const version = pickVersion(bytes.length);
|
||||
const grid = makeMatrix(version, buildCodewords(bytes, version));
|
||||
const n = grid.length;
|
||||
const scale = Math.floor(canvas.width / (n + 2));
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = '#000000';
|
||||
const offset = Math.floor((canvas.width - n * scale) / 2);
|
||||
for (let r = 0; r < n; r++) {
|
||||
for (let c = 0; c < n; c++) {
|
||||
if (grid[r][c]) ctx.fillRect(offset + c * scale, offset + r * scale, scale, scale);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 流程控制
|
||||
* ============================================================ */
|
||||
|
||||
async function boot() {
|
||||
const { ok, data } = await api('/status');
|
||||
if (!ok) { msg($('loading'), '无法连接服务端'); return; }
|
||||
$('loading').hidden = true;
|
||||
if (!data.bound) {
|
||||
if (!data.setupKeyConfigured) {
|
||||
$('bind-panel').hidden = false;
|
||||
msg($('setup-key-msg'), '服务端未设置 SHIROKO_ADMIN_SETUP_KEY，绑定未开放。请在启动探针的环境里设置后重启。', 'err');
|
||||
$('setup-start').disabled = true;
|
||||
return;
|
||||
}
|
||||
$('bind-panel').hidden = false;
|
||||
return;
|
||||
}
|
||||
// 已绑定：直接试拉概览，能拉到说明会话还有效
|
||||
const ov = await api('/overview');
|
||||
if (ov.ok) return showConsole(ov.data);
|
||||
$('login-panel').hidden = false;
|
||||
$('login-code').focus();
|
||||
}
|
||||
|
||||
function showConsole(data) {
|
||||
$('login-panel').hidden = true;
|
||||
$('bind-panel').hidden = true;
|
||||
$('console-panel').hidden = false;
|
||||
$('logout-btn').hidden = false;
|
||||
$('admin-ver').textContent = `shiroko-monitor v${data.version}`;
|
||||
renderConsole(data);
|
||||
}
|
||||
|
||||
function renderConsole(d) {
|
||||
const s = d.stats ?? {};
|
||||
$('admin-stats').innerHTML = [
|
||||
`<div class="admin-stat"><b>${s.total ?? '–'}</b><label>监控数</label></div>`,
|
||||
`<div class="admin-stat up"><b>${s.up ?? '–'}</b><label>在线</label></div>`,
|
||||
`<div class="admin-stat down"><b>${s.down ?? '–'}</b><label>离线</label></div>`,
|
||||
`<div class="admin-stat"><b>${s.avgLatency != null ? `${s.avgLatency} ms` : '–'}</b><label>平均延迟</label></div>`,
|
||||
`<div class="admin-stat"><b>${s.avgUptime90 != null ? `${s.avgUptime90}%` : '–'}</b><label>90天可用率</label></div>`,
|
||||
].join('');
|
||||
const st = d.status ?? {};
|
||||
const channels = d.notify?.channels ?? [];
|
||||
$('updated-at').innerHTML =
|
||||
`数据更新于 ${esc(new Date(st.dataUpdatedAt ?? Date.now()).toLocaleString('zh-CN', { hour12: false }))} · ` +
|
||||
`自建目标 ${st.localCount ?? 0} 个 / 配置 ${st.configCount ?? 0} 个 / UptimeRobot ${st.urCount ?? 0} 个` +
|
||||
(st.urEnabled ? (st.urOk === false ? `（<b>同步异常：${esc(st.urError ?? '')}</b>）` : '（已启用）') : '（未启用）') +
|
||||
(channels.length ? ` · 通知渠道 ${esc(channels.join(' + '))}` : '');
|
||||
|
||||
$('probe-scope').value = d.settings?.probeScope ?? 'all';
|
||||
$('data-filter').value = d.settings?.dataFilter ?? 'both';
|
||||
$('admin-url').value = d.settings?.adminUrl ?? '';
|
||||
$('admin-url').dataset.saved = $('admin-url').value;
|
||||
$('data-url').value = d.settings?.dataUrl ?? '';
|
||||
$('cors-origins').value = (d.settings?.corsOrigins ?? []).join(', ');
|
||||
|
||||
// 维护窗口目标下拉
|
||||
const sel = $('mw-id');
|
||||
const cur = sel.value;
|
||||
sel.innerHTML = '<option value="">全部目标</option>' + d.monitors.map((m) => `<option value="${esc(m.id)}">${esc(m.name)}</option>`).join('');
|
||||
if (cur) sel.value = cur;
|
||||
|
||||
const now = Date.now();
|
||||
$('mw-list').innerHTML = d.maintenance.length
|
||||
? d.maintenance.map((w, i) => {
|
||||
const active = Date.parse(w.from) <= now && now <= Date.parse(w.to);
|
||||
const scope = w.id ? (d.monitors.find((m) => m.id === w.id)?.name ?? w.id) : '全部目标';
|
||||
return `<div class="mw-item${active ? ' active' : ''}">
|
||||
<span class="mw-tag ${active ? 'active' : 'idle'}">${active ? '进行中' : '待生效'}</span>
|
||||
<span class="mw-time">${esc(String(w.from).replace('T', ' ').slice(0, 16))} → ${esc(String(w.to).replace('T', ' ').slice(0, 16))}</span>
|
||||
<span class="mw-note">${esc(scope)}${w.note ? ` · ${esc(w.note)}` : ''}</span>
|
||||
<button type="button" class="admin-btn admin-btn-sm admin-btn-danger" data-del="${i}">删除</button>
|
||||
</div>`;
|
||||
}).join('')
|
||||
: '<p class="admin-muted">暂无维护窗口。</p>';
|
||||
for (const btn of $('mw-list').querySelectorAll('[data-del]')) {
|
||||
btn.addEventListener('click', async () => {
|
||||
const r = await api('/maintenance', { method: 'DELETE', body: { index: Number(btn.dataset.del) } });
|
||||
if (r.ok) refresh();
|
||||
else msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
});
|
||||
}
|
||||
|
||||
$('monitor-list').innerHTML = d.monitors.map((m) => `<tr>
|
||||
<td title="${esc(m.name)}">${esc(m.name)}</td>
|
||||
<td>${esc(m.group)}</td>
|
||||
<td>${esc(m.type)}</td>
|
||||
<td class="mono" title="${esc(m.target)}">${esc(m.target)}</td>
|
||||
<td>${m.interval != null ? `${m.interval}s` : '–'}</td>
|
||||
</tr>`).join('');
|
||||
|
||||
const labels = { down: '故障', up: '恢复', tls: '证书', maintenance: '维护' };
|
||||
const statusOf = { down: 'down', up: 'up', tls: 'pending', maintenance: 'up' };
|
||||
$('event-list').innerHTML = d.events.length
|
||||
? d.events.map((e) => `<tr data-status="${esc(statusOf[e.type] ?? 'up')}">
|
||||
<td title="${esc(new Date(e.t).toLocaleString('zh-CN', { hour12: false }))}">${esc(new Date(e.t).toLocaleString('zh-CN', { hour12: false }))}</td>
|
||||
<td><span class="ev-badge">${esc(labels[e.type] ?? e.type)}</span></td>
|
||||
<td title="${esc(e.name)}">${esc(e.name)}</td>
|
||||
<td class="mono" title="${esc(e.detail ?? '')}">${esc(e.detail ?? '')}</td>
|
||||
</tr>`).join('')
|
||||
: '<tr><td colspan="4">暂无事件</td></tr>';
|
||||
|
||||
const tf = d.twofa ?? {};
|
||||
$('twofa-summary').innerHTML = `已绑定于 ${esc(tf.boundAt ?? '–')} · 剩余恢复码 ${tf.recoveryLeft ?? 0} 枚 · 当前会话 ${tf.sessions ?? 0} 个`
|
||||
+ (tf.recoveryLow ? ' · <b style="color:var(--pending-text)">恢复码不足 3 枚，请重新绑定以获取新的一批</b>' : '');
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
const r = await api('/overview');
|
||||
if (r.ok) renderConsole(r.data);
|
||||
else if (r.status === 401) { $('console-panel').hidden = true; $('login-panel').hidden = false; }
|
||||
}
|
||||
|
||||
/* ---------- 绑定 ---------- */
|
||||
|
||||
$('setup-start').addEventListener('click', async () => {
|
||||
const key = $('setup-key').value;
|
||||
msg($('setup-key-msg'), '');
|
||||
const r = await api('/2fa/setup', { method: 'POST', body: { key } });
|
||||
if (!r.ok) { msg($('setup-key-msg'), errText(r.data?.error, r.data?.hint), 'err'); return; }
|
||||
setupDraft = { setupToken: r.data.setupToken, secret: r.data.secret, uri: r.data.uri };
|
||||
$('setup-key').value = '';
|
||||
$('step-key').hidden = true;
|
||||
$('step-secret').hidden = false;
|
||||
$('secret-text').textContent = r.data.secret.replace(/(.{4})/g, '$1 ').trim();
|
||||
$('uri-text').textContent = r.data.uri;
|
||||
try { renderQr(r.data.uri, $('qr')); } catch (err) { msg($('confirm-msg'), `二维码生成失败，可手动输入密钥：${err.message}`, 'err'); }
|
||||
$('confirm-code').focus();
|
||||
});
|
||||
|
||||
$('copy-secret').addEventListener('click', () => copy(setupDraft?.secret ?? ''));
|
||||
$('copy-uri').addEventListener('click', () => copy(setupDraft?.uri ?? ''));
|
||||
|
||||
async function copy(text) {
|
||||
if (!text) return;
|
||||
try { await navigator.clipboard.writeText(text); } catch { /* 非安全上下文下 clipboard 不可用 */ }
|
||||
}
|
||||
|
||||
$('confirm-btn').addEventListener('click', async () => {
|
||||
const code = $('confirm-code').value.trim();
|
||||
msg($('confirm-msg'), '');
|
||||
const r = await api('/2fa/confirm', { method: 'POST', body: { setupToken: setupDraft?.setupToken, code } });
|
||||
if (!r.ok) { msg($('confirm-msg'), errText(r.data?.error), 'err'); return; }
|
||||
$('step-secret').hidden = true;
|
||||
$('step-recovery').hidden = false;
|
||||
setupDraft.confirmCode = r.data.confirmCode;
|
||||
$('recovery-list').innerHTML = r.data.recoveryCodes.map((c) => `<code>${esc(c)}</code>`).join('');
|
||||
$('copy-recovery').onclick = () => copy(r.data.recoveryCodes.join('\n'));
|
||||
});
|
||||
|
||||
// 绑定完成即视为本次操作已通过 2FA（刚用 App 的验证码证明了持有），
|
||||
// 直接用绑定时那枚验证码换会话，不再要求用户再输一次
|
||||
$('recovery-done').addEventListener('click', async () => {
|
||||
$('recovery-done').disabled = true;
|
||||
const r = await api('/login', { method: 'POST', body: { code: setupDraft?.confirmCode } });
|
||||
$('recovery-done').disabled = false;
|
||||
if (r.ok) {
|
||||
const ov = await api('/overview');
|
||||
if (ov.ok) return showConsole(ov.data);
|
||||
}
|
||||
// 兜底：让用户手动登录（同一时间窗内的码已被防重放消费，也属正常）
|
||||
$('bind-panel').hidden = true;
|
||||
$('login-panel').hidden = false;
|
||||
$('login-code').focus();
|
||||
});
|
||||
|
||||
/* ---------- 登录 ---------- */
|
||||
|
||||
$('login-btn').addEventListener('click', doLogin);
|
||||
$('login-code').addEventListener('keydown', (e) => { if (e.key === 'Enter') doLogin(); });
|
||||
|
||||
async function doLogin() {
|
||||
const code = $('login-code').value.trim();
|
||||
if (!code) return;
|
||||
msg($('login-msg'), '');
|
||||
$('login-btn').disabled = true;
|
||||
try {
|
||||
const r = await api('/login', { method: 'POST', body: { code } });
|
||||
if (!r.ok) {
|
||||
const extra = r.data?.fails ? `（已失败 ${r.data.fails} 次）` : (r.retryAfter ? `（约 ${r.retryAfter} 秒后可试）` : '');
|
||||
msg($('login-msg'), errText(r.data?.error) + extra, 'err');
|
||||
return;
|
||||
}
|
||||
$('login-code').value = '';
|
||||
const ov = await api('/overview');
|
||||
if (ov.ok) showConsole(ov.data);
|
||||
else msg($('login-msg'), '登录成功但读取概览失败，请刷新页面', 'err');
|
||||
} finally {
|
||||
$('login-btn').disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
$('reset-btn').addEventListener('click', async () => {
|
||||
const key = $('reset-key').value;
|
||||
if (!key) return;
|
||||
if (!confirm('重置 2FA 会清空已绑定的密钥与全部恢复码，需重新绑定。确定继续？')) return;
|
||||
const r = await api('/2fa/reset', { method: 'POST', body: { key } });
|
||||
if (r.ok) location.reload();
|
||||
else msg($('login-msg'), errText(r.data?.error), 'err');
|
||||
});
|
||||
|
||||
$('logout-btn').addEventListener('click', async () => {
|
||||
await api('/logout', { method: 'POST' });
|
||||
location.reload();
|
||||
});
|
||||
|
||||
/* ---------- 管理操作 ---------- */
|
||||
|
||||
$('probe-scope').addEventListener('change', async (e) => {
|
||||
const r = await api('/probe-scope', { method: 'POST', body: { probeScope: e.target.value } });
|
||||
if (r.ok) { msg($('action-msg'), `探测范围已改为 ${e.target.value}`, 'ok'); refresh(); }
|
||||
else msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
});
|
||||
|
||||
$('data-filter').addEventListener('change', async (e) => {
|
||||
const r = await api('/data-filter', { method: 'POST', body: { dataFilter: e.target.value } });
|
||||
if (r.ok) { msg($('action-msg'), `展示口径已改为 ${e.target.value}`, 'ok'); refresh(); }
|
||||
else msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
});
|
||||
|
||||
$('admin-url').addEventListener('change', async (e) => {
|
||||
const v = e.target.value.trim();
|
||||
const r = await api('/admin-url', { method: 'POST', body: { adminUrl: v } });
|
||||
if (r.ok) {
|
||||
msg($('action-msg'), v ? `面板页脚将显示指向 ${v} 的「管理」入口` : '已清空，面板不再显示管理入口', 'ok');
|
||||
refresh();
|
||||
} else {
|
||||
msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
e.target.value = $('admin-url').dataset.saved ?? '';
|
||||
}
|
||||
});
|
||||
|
||||
async function saveRemoteSettings() {
|
||||
const dataUrl = $('data-url').value.trim();
|
||||
const corsOrigins = $('cors-origins').value.split(',').map((s) => s.trim()).filter(Boolean);
|
||||
const r = await api('/remote', { method: 'POST', body: { dataUrl, corsOrigins } });
|
||||
if (r.ok) {
|
||||
msg($('action-msg'), dataUrl ? `跨域数据源：${r.data.dataUrl}；已放行 ${r.data.corsOrigins.length} 个来源` : '已清空跨域数据源', 'ok');
|
||||
refresh();
|
||||
} else {
|
||||
msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
}
|
||||
}
|
||||
|
||||
$('data-url').addEventListener('change', saveRemoteSettings);
|
||||
$('cors-origins').addEventListener('change', saveRemoteSettings);
|
||||
|
||||
$('probe-now').addEventListener('click', async () => {
|
||||
const btn = $('probe-now');
|
||||
btn.disabled = true;
|
||||
msg($('action-msg'), '正在探测…');
|
||||
try {
|
||||
const r = await api('/probe-now', { method: 'POST' });
|
||||
if (r.ok) { msg($('action-msg'), `探测完成：在线 ${r.data.stats.up}，离线 ${r.data.stats.down}`, 'ok'); refresh(); }
|
||||
else msg($('action-msg'), '探测失败', 'err');
|
||||
} finally { btn.disabled = false; }
|
||||
});
|
||||
|
||||
$('notify-test').addEventListener('click', async () => {
|
||||
const btn = $('notify-test');
|
||||
btn.disabled = true;
|
||||
msg($('action-msg'), '正在发送…');
|
||||
try {
|
||||
const r = await api('/notify-test', { method: 'POST' });
|
||||
if (!r.ok) { msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err'); return; }
|
||||
const detail = (r.data.results ?? []).map((x) => `${x.channel} ${x.ok ? '成功' : `失败：${x.error}`}`).join('；');
|
||||
msg($('action-msg'), detail || '无渠道', r.data.ok ? 'ok' : 'err');
|
||||
} finally { btn.disabled = false; }
|
||||
});
|
||||
|
||||
// 维护窗口默认填「现在起 1 小时」
|
||||
(function initDefaults() {
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const fmt = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
const now = new Date();
|
||||
$('mw-from').value = fmt(now);
|
||||
$('mw-to').value = fmt(new Date(now.getTime() + 60 * 60 * 1000));
|
||||
})();
|
||||
|
||||
$('mw-add').addEventListener('click', async () => {
|
||||
const from = $('mw-from').value;
|
||||
const to = $('mw-to').value;
|
||||
if (!from || !to) { msg($('action-msg'), '请填写开始与结束时间', 'err'); return; }
|
||||
const body = { from: new Date(from).toISOString(), to: new Date(to).toISOString() };
|
||||
const note = $('mw-note').value.trim();
|
||||
const id = $('mw-id').value;
|
||||
if (note) body.note = note;
|
||||
if (id) body.id = id;
|
||||
const r = await api('/maintenance', { method: 'POST', body });
|
||||
if (r.ok) { msg($('action-msg'), '维护窗口已新增', 'ok'); $('mw-note').value = ''; refresh(); }
|
||||
else msg($('action-msg'), errText(r.data?.error, r.data?.hint), 'err');
|
||||
});
|
||||
|
||||
boot();
|
||||
+291
-21
@@ -1,4 +1,4 @@
|
||||
const VERSION = '0.6.0';
|
||||
const VERSION = '0.12.2';
|
||||
const HB_LIMIT = 48;
|
||||
const UPTIME_DAYS = 90;
|
||||
const BROWSER_CONCURRENCY = 6;
|
||||
@@ -15,6 +15,8 @@ const state = {
|
||||
source: null,
|
||||
filter: 'all',
|
||||
view: 'cards',
|
||||
theme: 'default',
|
||||
eventsExpanded: false,
|
||||
refreshTimer: null,
|
||||
nextRefreshAt: 0,
|
||||
loading: false,
|
||||
@@ -26,6 +28,7 @@ const $ = (id) => document.getElementById(id);
|
||||
|
||||
const SOURCE_LABEL = {
|
||||
api: '边缘 API（实时）',
|
||||
remote: '远程探针（跨域）',
|
||||
static: '静态快照',
|
||||
browser: '浏览器直连',
|
||||
};
|
||||
@@ -34,7 +37,10 @@ const ESC = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''
|
||||
const escapeHtml = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ESC[c]);
|
||||
|
||||
async function fetchJson(url, timeoutMs = 8000) {
|
||||
const res = await fetch(url, { cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) });
|
||||
// 相对路径 + 存在远程数据源时，自动改写到该地址（跨域读取由对方开放 CORS）
|
||||
const base = remoteBase();
|
||||
const full = base && url.startsWith('api/') ? `${base}/${url}` : url;
|
||||
const res = await fetch(full, { cache: 'no-store', signal: AbortSignal.timeout(timeoutMs) });
|
||||
if (!res.ok) {
|
||||
const err = new Error(`HTTP ${res.status}`);
|
||||
err.status = res.status;
|
||||
@@ -79,11 +85,38 @@ async function mapLimit(items, limit, fn) {
|
||||
function setSource(s) {
|
||||
state.source = s;
|
||||
$('source-badge').textContent = `数据源：${SOURCE_LABEL[s] ?? s}`;
|
||||
// 跨域模式下「刷新」没有意义：/api/refresh 会被服务端的 refreshLocalOnly 挡住
|
||||
// （对端是代理地址而非私网），前端也会退回只读。与其给一个必然失败的按钮，不如隐藏。
|
||||
const crossOrigin = s === 'remote';
|
||||
const btn = $('refresh-btn');
|
||||
if (btn) {
|
||||
btn.hidden = crossOrigin;
|
||||
btn.title = crossOrigin ? '' : '立即重新跑一轮探测（需要服务端允许）';
|
||||
}
|
||||
const ctrl = document.querySelector('.controls');
|
||||
if (ctrl) ctrl.classList.toggle('no-refresh', crossOrigin);
|
||||
}
|
||||
|
||||
// 跨域数据源：settings.dataUrl 指向另一台机器上的探针（通常是本机，但页面部署在别处）。
|
||||
// 例："https://monitor.example.com" —— 前端会从 https://monitor.example.com/api/status 取数据。
|
||||
// 该地址必须与本页同为 HTTPS，否则浏览器会以「混合内容」为由拦截（与 CORS 无关）。
|
||||
function remoteBase() {
|
||||
const raw = String(state.config?.settings?.dataUrl ?? '').trim();
|
||||
if (!raw) return '';
|
||||
try {
|
||||
const u = new URL(raw);
|
||||
return u.protocol === 'http:' || u.protocol === 'https:' ? u.origin + u.pathname.replace(/\/+$/, '') : '';
|
||||
} catch {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
async function resolveSource() {
|
||||
const forced = new URLSearchParams(location.search).get('source');
|
||||
const mode = forced || state.config.settings?.dataSource || 'auto';
|
||||
// 配置了远程数据源时，「api」与「auto」都优先尝试远程地址
|
||||
const remote = remoteBase();
|
||||
const apiUrl = remote ? `${remote}/api/status` : 'api/status';
|
||||
if (mode === 'browser') return setSource('browser');
|
||||
if (mode === 'static') {
|
||||
try {
|
||||
@@ -95,17 +128,17 @@ async function resolveSource() {
|
||||
}
|
||||
if (mode === 'api') {
|
||||
try {
|
||||
await fetchJson('api/status', 5000);
|
||||
return setSource('api');
|
||||
await fetchJson(apiUrl, 6000);
|
||||
return setSource(remote ? 'remote' : 'api');
|
||||
} catch {
|
||||
return setSource('browser');
|
||||
}
|
||||
}
|
||||
// auto：优先边缘 API，其次静态快照，最后浏览器直连
|
||||
// auto：优先远程/边缘 API，其次静态快照，最后浏览器直连
|
||||
try {
|
||||
await fetchJson('api/status', 3000);
|
||||
return setSource('api');
|
||||
} catch { /* 无边缘 API */ }
|
||||
await fetchJson(apiUrl, 4000);
|
||||
return setSource(remote ? 'remote' : 'api');
|
||||
} catch { /* 无边缘/远程 API */ }
|
||||
try {
|
||||
await fetchJson('status.json', 3000);
|
||||
return setSource('static');
|
||||
@@ -225,9 +258,76 @@ function uptimeSummary(st) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 90 天日均延迟趋势（卡片视图）：取最近 30 天的日均延迟画成细柱，右侧给 90 天均值
|
||||
function latTrendBar(lat) {
|
||||
const days = lat?.days?.slice(-30) ?? [];
|
||||
if (days.length < 2) return '';
|
||||
const max = Math.max(...days.map((d) => d.avg), 1);
|
||||
const bars = days.map((d) => {
|
||||
const h = Math.max(10, Math.round((d.avg / max) * 100));
|
||||
return `<span class="lat-cell" style="height:${h}%" title="${escapeHtml(d.key)}：日均 ${d.avg} ms"></span>`;
|
||||
}).join('');
|
||||
return `<div class="lat-trend" title="90 天日均延迟 ${lat.avg} ms · 峰值 ${lat.max} ms（数据来自当日分桶累计）">
|
||||
<span class="lat-label">延迟</span>
|
||||
<span class="lat-bars">${bars}</span>
|
||||
<span class="lat-avg">${lat.avg} ms</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// 最近事件区块（故障 / 恢复 / 证书阈值 / 维护窗口内的事件）
|
||||
// 默认只列最近 EVENTS_COLLAPSED 条，其余折叠在「展开全部」后面，避免长列表把页面撑得过长
|
||||
const EVENTS_COLLAPSED = 8;
|
||||
|
||||
function renderEvents() {
|
||||
const box = $('events');
|
||||
if (!box) return;
|
||||
const list = $('events-list');
|
||||
const empty = $('events-empty');
|
||||
const count = $('events-count');
|
||||
// 事件随分组页签联动：只展示当前页签下目标的事件。
|
||||
// 用「当前可见目标 id 集合」反查，而不是事件自身的 group 字段 ——
|
||||
// 外部数据源（UptimeRobot）的事件在快照里没有 group，按名字反查才准。
|
||||
const visibleIds = new Set(visibleGroups().flatMap(([, list]) => list.map((m) => m.id)));
|
||||
const all = (state.status?.events ?? []).filter((e) => visibleIds.has(e.id));
|
||||
box.hidden = all.length === 0;
|
||||
empty.hidden = all.length > 0;
|
||||
if (!all.length) {
|
||||
// 必须清空列表：仅隐藏区块的话旧行仍留在 DOM 里（换个分组再切回来会看到过期内容）
|
||||
list.innerHTML = '';
|
||||
if (count) count.textContent = '';
|
||||
const more = $('events-more');
|
||||
if (more) more.hidden = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const expanded = state.eventsExpanded === true;
|
||||
const shown = expanded ? all : all.slice(0, EVENTS_COLLAPSED);
|
||||
if (count) count.textContent = all.length > shown.length ? `最近 ${shown.length} / ${all.length} 条` : `最近 ${all.length} 条`;
|
||||
|
||||
const label = { down: '故障', up: '恢复', tls: '证书', maintenance: '维护' };
|
||||
// 与监控表格同一套结构（tr/td + data-status），因此行高、边框、hover、状态底色天然一致
|
||||
const statusOf = { down: 'down', up: 'up', tls: 'pending', maintenance: 'up' };
|
||||
list.innerHTML = shown.map((e) => {
|
||||
const maint = e.maintenance ? '<span class="ev-maint" title="维护窗口内，未计入可用率、未发送告警">维护</span>' : '';
|
||||
return `<tr class="ev" data-status="${escapeHtml(statusOf[e.type] ?? 'up')}">
|
||||
<td class="ev-time" title="${escapeHtml(fmtTime(e.t))}">${escapeHtml(fmtRelative(e.t))}</td>
|
||||
<td class="ev-type"><span class="ev-badge">${escapeHtml(label[e.type] ?? e.type)}</span>${maint}</td>
|
||||
<td class="ev-name" title="${escapeHtml(e.name)}"><span class="clamp2">${escapeHtml(e.name)}</span></td>
|
||||
<td class="ev-detail" title="${escapeHtml(e.detail ?? '')}"><span class="clamp2">${escapeHtml(e.detail ?? '')}</span></td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
|
||||
const more = $('events-more');
|
||||
if (more) {
|
||||
const hidden = all.length - shown.length;
|
||||
more.hidden = all.length <= EVENTS_COLLAPSED;
|
||||
more.textContent = expanded ? '收起' : `展开全部 ${all.length} 条`;
|
||||
more.dataset.hidden = String(hidden);
|
||||
}
|
||||
}
|
||||
|
||||
function uptimeBar(st) {
|
||||
const daily = st?.daily;
|
||||
const cells = lastNDays(UPTIME_DAYS).map((key) => {
|
||||
const daily = st?.daily; const cells = lastNDays(UPTIME_DAYS).map((key) => {
|
||||
const b = daily?.[key];
|
||||
let cls = 'lv-none';
|
||||
let tip = `${key} · 无数据`;
|
||||
@@ -284,7 +384,8 @@ function renderCard(m) {
|
||||
|
||||
const head = document.createElement('div');
|
||||
head.className = 'card-head';
|
||||
head.innerHTML = `<span class="dot"></span><h3>${escapeHtml(m.name)}</h3><span class="type-badge">${escapeHtml(typeLabel(m))}</span>`;
|
||||
// 名称列在窄屏会被截断，title 保证鼠标悬停仍能看到完整名称
|
||||
head.innerHTML = `<span class="dot"></span><h3 title="${escapeHtml(m.name)}">${escapeHtml(m.name)}</h3><span class="type-badge">${escapeHtml(typeLabel(m))}</span>${certBadge(st)}${maintBadge(st)}`;
|
||||
|
||||
const target = document.createElement('div');
|
||||
target.className = 'card-target';
|
||||
@@ -307,14 +408,14 @@ function renderCard(m) {
|
||||
hb.innerHTML = heartbeatSvg(st?.history);
|
||||
|
||||
const up = document.createElement('div');
|
||||
up.innerHTML = uptimeBar(st);
|
||||
up.innerHTML = `${uptimeBar(st)}${latTrendBar(st?.lat)}`;
|
||||
|
||||
const detail = document.createElement('div');
|
||||
detail.className = 'card-detail';
|
||||
detail.title = st?.detail ?? '';
|
||||
detail.textContent = st?.detail ?? '等待检测';
|
||||
|
||||
card.append(head, target, metrics, hb, up.firstElementChild ?? document.createElement('div'), detail);
|
||||
card.append(head, target, metrics, hb, up, detail);
|
||||
return card;
|
||||
}
|
||||
|
||||
@@ -354,6 +455,25 @@ function isExternal(m) {
|
||||
return m.source === 'uptimerobot';
|
||||
}
|
||||
|
||||
// 证书徽标：仅在临近到期时出现（≤14 天黄色、≤7 天红色），避免常驻打扰
|
||||
function certBadge(st) {
|
||||
const t = st?.tls;
|
||||
if (!t || t.daysLeft == null) return '';
|
||||
if (t.error) return `<span class="tls-badge danger" title="证书检查失败：${escapeHtml(t.error)}">证书异常</span>`;
|
||||
if (t.daysLeft > 14) return '';
|
||||
const cls = t.daysLeft <= 7 ? 'danger' : 'warn';
|
||||
const tip = `证书到期：${escapeHtml(String(t.validTo ?? '').slice(0, 10))}${t.issuer ? `（${escapeHtml(t.issuer)}）` : ''}`;
|
||||
return `<span class="tls-badge ${cls}" title="${tip}">证书 ${t.daysLeft} 天</span>`;
|
||||
}
|
||||
|
||||
// 维护窗口徽标：该时段内不计入可用率统计、不发告警
|
||||
function maintBadge(st) {
|
||||
const m = st?.maintenance;
|
||||
if (!m) return '';
|
||||
const tip = `维护窗口${m.to ? `至 ${escapeHtml(String(m.to).replace('T', ' ').slice(0, 16))}` : ''}${m.note ? `：${escapeHtml(m.note)}` : ''}\n期间不计入可用率、不发告警`;
|
||||
return `<span class="maint-badge" title="${tip}">维护中</span>`;
|
||||
}
|
||||
|
||||
function renderTabs() {
|
||||
const nav = $('group-tabs');
|
||||
const monitors = allMonitors();
|
||||
@@ -379,6 +499,8 @@ function setFilter(g) {
|
||||
state.filter = g;
|
||||
renderTabs();
|
||||
renderView();
|
||||
// 事件按当前页签过滤，切页签后必须一并重渲染
|
||||
renderEvents();
|
||||
}
|
||||
|
||||
function visibleGroups() {
|
||||
@@ -465,16 +587,23 @@ function tableRow(m, hide) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.dataset.status = s.cls;
|
||||
tr.dataset.id = m.id;
|
||||
const targetCell = hide ? '' : `<td class="t-target" title="${escapeHtml(targetText(m))}">${escapeHtml(targetText(m))}</td>`;
|
||||
const targetCell = hide ? '' : `<td class="t-target" title="${escapeHtml(targetText(m))}"><span class="clamp2">${escapeHtml(targetText(m))}</span></td>`;
|
||||
// 名称与徽标分行：名称限两行、徽标独占一行，两者高度都固定，行高不再随名称/地址长度变化
|
||||
const tags = `${typeLabel(m) ? `<span class="type-badge">${escapeHtml(typeLabel(m))}</span>` : ''}${certBadge(st)}${maintBadge(st)}`;
|
||||
tr.innerHTML =
|
||||
`<td class="t-state"><span class="dot"></span>${s.label}</td>` +
|
||||
`<td class="t-name">${escapeHtml(m.name)}<span class="type-badge">${escapeHtml(typeLabel(m))}</span></td>` +
|
||||
`<td class="t-name" title="${escapeHtml(m.name)}"><span class="clamp2">${escapeHtml(m.name)}</span><span class="t-tags">${tags}</span></td>` +
|
||||
targetCell +
|
||||
`<td class="t-num">${st?.latency != null ? `${st.latency} ms` : '–'}</td>` +
|
||||
`<td class="t-num">${escapeHtml(resultText(st, m))}</td>` +
|
||||
`<td class="t-num" title="${escapeHtml(fmtTime(st?.lastCheck))}">${fmtRelative(st?.lastCheck)}</td>` +
|
||||
`<td class="t-hb">${heartbeatSvg(st?.history)}</td>` +
|
||||
`<td class="t-uptime">${up ? `<span class="u-mini">${miniUptimeBar(st?.daily)}</span><span class="t-pct">${up.pct.toFixed(1)}%</span>` : '<span class="t-pct">–</span>'}</td>`;
|
||||
`<td class="t-hb">${heartbeatSvg(st?.history)}</td>`;
|
||||
const latTip = st?.lat ? ` · 90 天日均延迟 ${st.lat.avg} ms（峰值 ${st.lat.max} ms）` : '';
|
||||
const uptimeCell = document.createElement('td');
|
||||
uptimeCell.className = 't-uptime';
|
||||
uptimeCell.title = `${up ? `可用率 ${up.pct.toFixed(1)}%` : '可用率数据积累中'}${latTip}`;
|
||||
uptimeCell.innerHTML = up ? `<span class="u-mini">${miniUptimeBar(st?.daily)}</span><span class="t-pct">${up.pct.toFixed(1)}%</span>` : '<span class="t-pct">–</span>';
|
||||
tr.appendChild(uptimeCell);
|
||||
return tr;
|
||||
}
|
||||
|
||||
@@ -506,14 +635,26 @@ function renderViewSwitch() {
|
||||
}
|
||||
}
|
||||
|
||||
// 表格在窄屏必须横向滚动。实测表格最小舒适宽度约 1010px（列含心率图与可用率条），
|
||||
// 因此视口窄于 1024px 时默认落到卡片；用户显式选择过视图则以选择为准。
|
||||
const TABLE_MIN_WIDTH = 1024;
|
||||
|
||||
function isNarrowScreen() {
|
||||
return window.innerWidth < TABLE_MIN_WIDTH;
|
||||
}
|
||||
|
||||
function resolveView() {
|
||||
const q = new URLSearchParams(location.search).get('view');
|
||||
if (q && VIEWS[q]) return q;
|
||||
let saved = null;
|
||||
try {
|
||||
saved = localStorage.getItem('shiroko.view');
|
||||
} catch { /* 隐私模式下 localStorage 不可用 */ }
|
||||
const cfg = state.config?.settings?.view;
|
||||
return [q, saved, cfg, DEFAULT_VIEW].find((v) => v && VIEWS[v]) ?? DEFAULT_VIEW;
|
||||
const resolved = [saved, cfg, DEFAULT_VIEW].find((v) => v && VIEWS[v]) ?? DEFAULT_VIEW;
|
||||
// 用户没在这个设备上显式选过视图时，窄屏自动落到卡片（表格在手机上要横向拖）
|
||||
if (!saved && resolved === 'table' && isNarrowScreen()) return 'cards';
|
||||
return resolved;
|
||||
}
|
||||
|
||||
function setView(view, { persist = true } = {}) {
|
||||
@@ -537,6 +678,8 @@ function localStats() {
|
||||
let latCount = 0;
|
||||
let uptimeUp = 0;
|
||||
let uptimeTotal = 0;
|
||||
// 与探针口径一致：混合来源时平均延迟只统计自建探测；若展示集合只有外部数据源，则以其延迟为唯一口径
|
||||
const hasProbe = monitors.some((m) => !isExternal(m));
|
||||
for (const m of monitors) {
|
||||
const st = state.status?.monitors?.[m.id];
|
||||
if (!st || st.status === 'pending') {
|
||||
@@ -545,8 +688,7 @@ function localStats() {
|
||||
}
|
||||
if (st.status === 'up') up++;
|
||||
else down++;
|
||||
// 与探针口径一致：平均延迟只统计自建探测目标
|
||||
if (!isExternal(m) && st.latency != null) {
|
||||
if (st.latency != null && (!isExternal(m) || !hasProbe)) {
|
||||
latSum += st.latency;
|
||||
latCount++;
|
||||
}
|
||||
@@ -566,6 +708,25 @@ function localStats() {
|
||||
};
|
||||
}
|
||||
|
||||
// 管理入口：地址写在 settings.adminUrl（可为内网地址、Tailscale 地址、VPS 域名等，
|
||||
// 由使用者自己决定怎么暴露）。默认不配置即不渲染，避免在公网面板上泄露管理面位置。
|
||||
function renderAdminLink() {
|
||||
const el = $('admin-link');
|
||||
if (!el) return;
|
||||
const raw = String(state.config?.settings?.adminUrl ?? '').trim();
|
||||
// 只接受 http/https，避免 javascript: 之类被当作可点击链接注入
|
||||
let url = null;
|
||||
try {
|
||||
const u = new URL(raw);
|
||||
if (u.protocol === 'http:' || u.protocol === 'https:') url = u;
|
||||
} catch { /* 不是合法绝对 URL 则视为未配置 */ }
|
||||
if (!url) { el.hidden = true; return; }
|
||||
el.href = url.href;
|
||||
el.textContent = '管理';
|
||||
el.title = `管理后台：${url.href}\n需绑定 2FA 并通过两步验证才能进入`;
|
||||
el.hidden = false;
|
||||
}
|
||||
|
||||
function renderSummary() {
|
||||
const st = state.status;
|
||||
const stats = localStats();
|
||||
@@ -599,6 +760,22 @@ function renderSummary() {
|
||||
? `服务端数据最后变更：${fmtTime(state.status?.dataUpdatedAt)}（距现在 ${fmtRelative(state.status?.dataUpdatedAt)}）\n快照生成：${fmtTime(st?.generatedAt)}\n服务端更新节奏：每 ${serverCadenceSec() ?? '—'} 秒`
|
||||
: '尚无服务端数据';
|
||||
$('demo-chip').hidden = !st?.demo;
|
||||
// 通知渠道状态：有失败渠道时给出具体原因（点开 title 看）
|
||||
const notify = st?.notify;
|
||||
const nb = $('notify-badge');
|
||||
if (nb) {
|
||||
const failed = (notify?.lastResult?.results ?? []).filter((r) => !r.ok);
|
||||
if (!notify?.enabled) {
|
||||
nb.hidden = true;
|
||||
} else {
|
||||
nb.hidden = false;
|
||||
nb.classList.toggle('warn-chip', failed.length > 0);
|
||||
nb.textContent = `通知：${(notify.channels ?? []).join(' + ') || '无'}${notify.lastResult ? ` · 最近 ${fmtRelative(notify.lastResult.at)}` : ''}${failed.length ? ` · ${failed.length} 个渠道失败` : ''}`;
|
||||
nb.title = failed.length
|
||||
? `发送失败：${failed.map((r) => `${r.channel}: ${r.error}`).join('\n')}`
|
||||
: (notify.lastResult ? `最近一次：${notify.lastResult.at}，${(notify.lastResult.results ?? []).map((r) => `${r.channel} ${r.ok ? '成功' : '失败'}`).join('、')}` : '尚未发送过通知');
|
||||
}
|
||||
}
|
||||
const ur = st?.sources?.uptimerobot;
|
||||
const urChip = $('ur-chip');
|
||||
if (urChip) {
|
||||
@@ -612,6 +789,8 @@ function renderAll() {
|
||||
renderTabs();
|
||||
renderViewSwitch();
|
||||
renderView();
|
||||
renderEvents();
|
||||
renderAdminLink();
|
||||
}
|
||||
|
||||
function renderError(err) {
|
||||
@@ -666,7 +845,10 @@ function setLoading(on, text = '刷新中…') {
|
||||
state.loading = on;
|
||||
const btn = $('refresh-btn');
|
||||
btn.disabled = on;
|
||||
btn.textContent = on ? text : '刷新';
|
||||
// 车轮图标（砂狼白子骑行意象，主题里会转起来）
|
||||
btn.innerHTML = on
|
||||
? `<svg class="wheel" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" opacity="0.35"/><g stroke="currentColor" stroke-width="1.3"><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="4.9" y1="4.9" x2="19.1" y2="19.1"/><line x1="19.1" y1="4.9" x2="4.9" y2="19.1"/></g><circle cx="12" cy="12" r="2.2" fill="currentColor"/></svg><span>${escapeHtml(text)}</span>`
|
||||
: '刷新';
|
||||
}
|
||||
|
||||
async function refresh({ force = false } = {}) {
|
||||
@@ -748,9 +930,88 @@ function startAutoRefresh() {
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/* ---------- 主题 ---------- */
|
||||
|
||||
const THEMES = { default: '默认', shiroko: '砂狼白子' };
|
||||
|
||||
function resolveTheme() {
|
||||
const q = new URLSearchParams(location.search).get('theme');
|
||||
let saved = null;
|
||||
try {
|
||||
saved = localStorage.getItem('shiroko.theme');
|
||||
} catch { /* 隐私模式 */ }
|
||||
return [q, saved, state.config?.settings?.theme].find((t) => t && THEMES[t]) ?? 'default';
|
||||
}
|
||||
|
||||
// 角色立绘位：主题为白子且配置了 artwork 时才插入；文件不存在则静默移除（不留破图）
|
||||
function applyArtwork() {
|
||||
document.querySelector('.artwork')?.remove();
|
||||
const src = state.config?.settings?.artwork;
|
||||
if (state.theme !== 'shiroko' || !src) return;
|
||||
const img = document.createElement('img');
|
||||
img.className = 'artwork';
|
||||
img.alt = '';
|
||||
img.src = src;
|
||||
img.addEventListener('error', () => img.remove());
|
||||
document.body.appendChild(img);
|
||||
}
|
||||
|
||||
// favicon 格式协商：同尺寸的 WebP 体积更小，浏览器按 type 自动挑第一个认识的；
|
||||
// 不认识 WebP 的旧浏览器会跳到 PNG，两者并存保证任何环境都有图标。
|
||||
function setFavicon(shiroko) {
|
||||
const head = document.head;
|
||||
if (!head) return;
|
||||
for (const el of head.querySelectorAll('link[data-favicon]')) el.remove();
|
||||
const links = shiroko
|
||||
? [
|
||||
{ href: 'assets/favicon-shiroko.webp', type: 'image/webp' },
|
||||
{ href: 'assets/favicon-shiroko.png', type: 'image/png' },
|
||||
]
|
||||
: [{ href: 'assets/favicon.svg', type: 'image/svg+xml' }];
|
||||
for (const l of links) {
|
||||
const el = document.createElement('link');
|
||||
el.rel = 'icon';
|
||||
el.href = l.href;
|
||||
el.type = l.type;
|
||||
el.dataset.favicon = '1';
|
||||
head.appendChild(el);
|
||||
}
|
||||
}
|
||||
|
||||
function applyTheme(theme, { persist = true } = {}) {
|
||||
state.theme = THEMES[theme] ? theme : 'default';
|
||||
if (state.theme === 'default') delete document.body.dataset.theme;
|
||||
else document.body.dataset.theme = state.theme;
|
||||
// 装饰（人物/单车）的全局透明度：一个值同时作用于两者，避免其中一个更抢眼
|
||||
const decoOpacity = Number(state.config?.settings?.decoOpacity);
|
||||
document.body.style.setProperty('--sh-deco-opacity', String(Number.isFinite(decoOpacity) && decoOpacity > 0 && decoOpacity <= 1 ? decoOpacity : 0.78));
|
||||
if (persist) {
|
||||
try {
|
||||
localStorage.setItem('shiroko.theme', state.theme);
|
||||
} catch { /* 忽略 */ }
|
||||
}
|
||||
setFavicon(state.theme === 'shiroko');
|
||||
applyArtwork();
|
||||
const btn = $('theme-btn');
|
||||
if (btn) {
|
||||
btn.classList.toggle('active', state.theme === 'shiroko');
|
||||
btn.title = state.theme === 'shiroko' ? '当前主题：砂狼白子（点击切回默认）' : '当前主题：默认（点击切换到砂狼白子主题）';
|
||||
}
|
||||
}
|
||||
|
||||
function bindEvents() {
|
||||
// 只有手动点「刷新」才会触发一次重新检测；自动刷新是只读的
|
||||
$('refresh-btn').addEventListener('click', () => refresh({ force: true }));
|
||||
$('theme-btn')?.addEventListener('click', () => applyTheme(state.theme === 'shiroko' ? 'default' : 'shiroko'));
|
||||
$('events-more')?.addEventListener('click', () => {
|
||||
state.eventsExpanded = !state.eventsExpanded;
|
||||
renderEvents();
|
||||
});
|
||||
// 横竖屏切换 / 窗口缩放时重算视图（不覆盖用户显式选择，故 persist: false）
|
||||
window.addEventListener('resize', () => {
|
||||
const next = resolveView();
|
||||
if (next !== state.view) setView(next, { persist: false });
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 启动 ---------- */
|
||||
@@ -762,11 +1023,20 @@ async function init() {
|
||||
renderError(err);
|
||||
return;
|
||||
}
|
||||
// 配置以服务端合并后的版本为准（/api/monitors 含 private overlay）：
|
||||
// 静态 monitors.json 是不入库的公开层，管理端写入的设置只落在私有层，
|
||||
// 不合并的话面板读不到（例如 adminUrl）。
|
||||
// 纯静态部署没有这个接口，此时沿用已读到的公开配置即可。
|
||||
try {
|
||||
const merged = await fetchJson('api/monitors', 5000);
|
||||
if (merged?.settings) state.config = { ...state.config, settings: { ...state.config.settings, ...merged.settings } };
|
||||
} catch { /* 无边缘接口（静态部署）：保留公开配置 */ }
|
||||
document.title = state.config.settings?.title || 'Shiroko Monitor';
|
||||
$('site-title').textContent = state.config.settings?.title || 'Shiroko Monitor';
|
||||
$('site-desc').textContent = state.config.settings?.description || '';
|
||||
const versionEl = document.querySelector('.version');
|
||||
if (versionEl) versionEl.textContent = `shiroko-monitor v${VERSION}`;
|
||||
applyTheme(resolveTheme());
|
||||
await resolveSource();
|
||||
state.view = resolveView();
|
||||
bindEvents();
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 60" fill="none" preserveAspectRatio="none">
|
||||
<title>天蓝色围巾飘带（自绘）</title>
|
||||
<defs>
|
||||
<linearGradient id="sg" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0" stop-color="#a9e9ff"/>
|
||||
<stop offset="0.45" stop-color="#2ea8dc"/>
|
||||
<stop offset="1" stop-color="#1c2f4d"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 波浪形的围巾：上边缘平直贴合顶栏，下边缘起波 -->
|
||||
<path d="M0 6 H600 V22 C560 38 520 12 480 26 C440 40 400 14 360 28 C320 42 280 12 240 26 C200 40 160 14 120 28 C80 42 40 16 0 30 Z"
|
||||
fill="url(#sg)"/>
|
||||
<!-- 围巾的褶皱纹路 -->
|
||||
<g stroke="#ffffff" stroke-opacity="0.35" stroke-width="2" stroke-linecap="round">
|
||||
<path d="M60 16 C58 22 58 26 60 30"/>
|
||||
<path d="M180 16 C178 22 178 26 180 30"/>
|
||||
<path d="M300 16 C298 22 298 26 300 30"/>
|
||||
<path d="M420 16 C418 22 418 26 420 30"/>
|
||||
<path d="M540 16 C538 22 538 26 540 30"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 987 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
+254
-32
@@ -5,10 +5,13 @@
|
||||
--text: #111827;
|
||||
--text-2: #6b7280;
|
||||
--up: #16a34a;
|
||||
--up-text: #15803d;
|
||||
--up-bg: #f0fdf4;
|
||||
--down: #dc2626;
|
||||
--down-text: #b91c1c;
|
||||
--down-bg: #fef2f2;
|
||||
--pending: #d97706;
|
||||
--pending-text: #92400e;
|
||||
--pending-bg: #fffbeb;
|
||||
--accent: #2563eb;
|
||||
--uptime-ok: #16a34a;
|
||||
@@ -18,6 +21,11 @@
|
||||
--mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, "Courier New", monospace;
|
||||
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
--shadow: 0 1px 2px rgb(0 0 0 / 0.04);
|
||||
/* 表格行高基准：固定像素，行高与内容长度彻底解耦（任意长度内容下行高都相同）。
|
||||
72px = 名称两行(36) + 徽标行(18) + 上下内边距(16)，监控表与事件表共用同一个值，
|
||||
两张表因此在视觉上也严格对齐。 */
|
||||
--row-h: 72px;
|
||||
--group-row-h: 32px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -28,10 +36,13 @@
|
||||
--text: #e5e7eb;
|
||||
--text-2: #9ca3af;
|
||||
--up: #4ade80;
|
||||
--up-text: #4ade80;
|
||||
--up-bg: #10281c;
|
||||
--down: #f87171;
|
||||
--down-text: #f87171;
|
||||
--down-bg: #2a1517;
|
||||
--pending: #fbbf24;
|
||||
--pending-text: #fbbf24;
|
||||
--pending-bg: #2a2113;
|
||||
--accent: #60a5fa;
|
||||
--uptime-none: #2a2f3a;
|
||||
@@ -91,6 +102,8 @@ body {
|
||||
.brand-text p { margin: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
|
||||
.stats { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
|
||||
.controls { display: flex; align-items: center; gap: 8px; }
|
||||
|
||||
.pill {
|
||||
padding: 4px 12px;
|
||||
@@ -99,17 +112,19 @@ body {
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pill.ok { background: var(--up-bg); color: var(--up); }
|
||||
.pill.bad { background: var(--down-bg); color: var(--down); }
|
||||
.pill.pending { background: var(--pending-bg); color: var(--pending); }
|
||||
.pill.ok { background: var(--up-bg); color: var(--up-text); }
|
||||
.pill.bad { background: var(--down-bg); color: var(--down-text); }
|
||||
.pill.pending { background: var(--pending-bg); color: var(--pending-text); }
|
||||
|
||||
.stat { text-align: center; min-width: 44px; }
|
||||
.stat b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.stat label { font-size: 11px; color: var(--text-2); }
|
||||
.stat-up b { color: var(--up); }
|
||||
.stat-down b { color: var(--down); }
|
||||
.stat-up b { color: var(--up-text); }
|
||||
.stat-down b { color: var(--down-text); }
|
||||
|
||||
#refresh-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
@@ -123,6 +138,29 @@ body {
|
||||
#refresh-btn:hover { background: var(--bg); }
|
||||
#refresh-btn:disabled { opacity: 0.6; cursor: default; }
|
||||
|
||||
/* 加载态用的车轮图标（砂狼白子骑行意象） */
|
||||
.wheel { width: 14px; height: 14px; margin-right: 6px; animation: spin 0.9s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* 图标按钮（主题切换） */
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--surface);
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.icon-btn svg { width: 16px; height: 16px; }
|
||||
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.icon-btn.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
|
||||
|
||||
/* ---------- 视图切换 ---------- */
|
||||
.view-switch { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
|
||||
.view-btn {
|
||||
@@ -138,6 +176,8 @@ body {
|
||||
.view-btn + .view-btn { border-left: 1px solid var(--border); }
|
||||
.view-btn:hover { color: var(--text); }
|
||||
.view-btn.active { background: var(--accent); color: #fff; }
|
||||
/* 跨域模式下刷新按钮被隐藏（见 app.js setSource），此时控件区只剩视图切换 */
|
||||
.controls.no-refresh { gap: 0; }
|
||||
|
||||
/* ---------- 分组页签 ---------- */
|
||||
.group-tabs {
|
||||
@@ -166,7 +206,7 @@ body {
|
||||
/* ---------- 卡片网格 ---------- */
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
|
||||
gap: 14px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
@@ -185,6 +225,9 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
/* 网格项默认 min-width:auto，长 URL/名称会把卡片撑破容器 —— 显式允许收缩并裁剪 */
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
padding: 14px 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
@@ -256,7 +299,7 @@ body {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.card[data-status="down"] .card-detail { color: var(--down); }
|
||||
.card[data-status="down"] .card-detail { color: var(--down-text); }
|
||||
|
||||
.empty {
|
||||
grid-column: 1 / -1;
|
||||
@@ -292,12 +335,34 @@ body {
|
||||
color: var(--text-2);
|
||||
}
|
||||
.footer .version { margin-left: auto; }
|
||||
.demo-chip { padding: 1px 8px; border-radius: 999px; background: var(--pending-bg); color: var(--pending); font-weight: 600; }
|
||||
.warn-chip { padding: 1px 8px; border-radius: 999px; background: var(--down-bg); color: var(--down); font-weight: 600; }
|
||||
/* 管理入口：仅在配置了 settings.adminUrl 时出现；默认隐藏，避免在公网面板上暴露管理面位置 */
|
||||
.admin-link {
|
||||
padding: 1px 9px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
color: var(--text-2);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.admin-link:hover { color: var(--accent); border-color: var(--accent); }
|
||||
.demo-chip { padding: 1px 8px; border-radius: 999px; background: var(--pending-bg); color: var(--pending-text); font-weight: 600; }
|
||||
.warn-chip { padding: 1px 8px; border-radius: 999px; background: var(--down-bg); color: var(--down-text); font-weight: 600; }
|
||||
|
||||
/* 窄屏（手机 / 竖屏平板）：顶栏改为三行——标题 / 统计 / 控件，避免挤成一团 */
|
||||
@media (max-width: 820px) {
|
||||
.topbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px 14px; }
|
||||
.summary { flex-direction: column; align-items: stretch; gap: 8px; }
|
||||
.stats { justify-content: space-between; gap: 4px; }
|
||||
.stat { min-width: 0; flex: 1 1 0; }
|
||||
.stat b { font-size: 15px; }
|
||||
.stat label { font-size: 10px; }
|
||||
.controls { justify-content: flex-end; gap: 10px; }
|
||||
.footer { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 20px; }
|
||||
.footer .version { margin-left: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.topbar { padding: 10px 14px; }
|
||||
.summary { gap: 6px 12px; }
|
||||
.grid { grid-template-columns: 1fr; padding: 12px 14px 8px; }
|
||||
.group-tabs { padding: 12px 14px 0; }
|
||||
.footer { padding: 8px 14px 24px; }
|
||||
@@ -314,43 +379,200 @@ body[data-view="table"] .grid { display: block; }
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.monitor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.monitor-table {
|
||||
width: 100%;
|
||||
/* 列宽按百分比分配 + 固定表格算法：表格永远恰好铺满容器宽度，不会撑出横向滚动 */
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* 行高基准：所有数据行恒为 --row-h，与内容长度彻底解耦。
|
||||
内容再长也不会把某一行撑高（文本列各自限行截断 + 单元格 overflow:hidden）。
|
||||
分组标题行另设 --group-row-h，用 :not() 排除掉，否则同样会被这条规则套上。 */
|
||||
.monitor-table tbody tr:not(.group-row) { height: var(--row-h); }
|
||||
.group-row td { height: var(--group-row-h); }
|
||||
/* 表格列宽：状态 / 服务 / 目标 / 延迟 / 结果 / 最近检测 / 心率 / 90天可用率 = 100%
|
||||
地址与结果列给足比例，避免长 URL、长名称被截断 */
|
||||
.monitor-table th:nth-child(1) { width: 7%; }
|
||||
.monitor-table th:nth-child(2) { width: 15%; }
|
||||
.monitor-table th:nth-child(3) { width: 24%; }
|
||||
.monitor-table th:nth-child(4) { width: 7%; }
|
||||
.monitor-table th:nth-child(5) { width: 9%; }
|
||||
.monitor-table th:nth-child(6) { width: 10%; }
|
||||
.monitor-table th:nth-child(7) { width: 15%; }
|
||||
.monitor-table th:nth-child(8) { width: 13%; }
|
||||
.monitor-table th {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.monitor-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
||||
.monitor-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; line-height: 1.4; }
|
||||
/* 所有行统一基线：可用率的 mini 条是 inline-flex，其基线会把行盒撑高十几像素，
|
||||
导致带条的行比不带的行高出一截（实测 58px vs 43px） */
|
||||
.monitor-table td > * { vertical-align: middle; }
|
||||
.u-mini { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
|
||||
/* 限行截断：文本再多也只占固定的两行，行高因此与内容长度彻底解耦。
|
||||
height 而非 max-height —— 只有 1 行内容时也照样占满 2 行，行高才恒定；
|
||||
max-height 会让短内容缩成 1 行、长内容撑到 2 行，反而出现两种行高。
|
||||
-webkit-line-clamp 是 Chrome/Safari/Edge 的实现，height + overflow 兜底 Firefox。 */
|
||||
.clamp2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
height: 2.8em;
|
||||
}
|
||||
.monitor-table tbody tr[data-status="pending"] { background: color-mix(in srgb, var(--pending) 6%, transparent); }
|
||||
.monitor-table tbody tr:last-child td { border-bottom: 0; }
|
||||
.monitor-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
|
||||
.monitor-table tbody tr[data-status="down"] { background: color-mix(in srgb, var(--down) 6%, transparent); }
|
||||
.group-row td { padding: 7px 12px; font-size: 12px; font-weight: 650; color: var(--text-2); background: var(--bg); }
|
||||
.group-row td { padding: 7px 12px; font-size: 12px; font-weight: 650; color: var(--text-2); background: var(--bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.t-state { white-space: nowrap; }
|
||||
.t-state .dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
|
||||
tr[data-status="up"] .t-state { color: var(--up); }
|
||||
tr[data-status="down"] .t-state { color: var(--down); }
|
||||
tr[data-status="pending"] .t-state { color: var(--pending); }
|
||||
.t-name { white-space: nowrap; }
|
||||
.t-name .type-badge { margin-left: 8px; }
|
||||
.t-target {
|
||||
max-width: 280px;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
color: var(--text-2);
|
||||
tr[data-status="up"] .t-state { color: var(--up-text); }
|
||||
tr[data-status="down"] .t-state { color: var(--down-text); }
|
||||
tr[data-status="pending"] .t-state { color: var(--pending-text); }
|
||||
/* 名称列：文本区限两行，徽标区固定单行高度 —— 整格高度恒定 */
|
||||
.t-name { white-space: normal; }
|
||||
.t-name .clamp2 { overflow-wrap: anywhere; }
|
||||
.t-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 16px;
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.t-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.t-hb { width: 160px; }
|
||||
.t-hb svg { display: block; width: 150px; height: 24px; }
|
||||
.t-uptime { white-space: nowrap; }
|
||||
.uptime-bar-mini { display: inline-flex; width: 110px; height: 8px; margin-right: 8px; vertical-align: middle; }
|
||||
.t-pct { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
|
||||
.t-name .type-badge { margin-left: 0; }
|
||||
.t-target {
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
line-height: 1.45;
|
||||
color: var(--text-2);
|
||||
white-space: normal;
|
||||
}
|
||||
.t-target .clamp2 { overflow-wrap: anywhere; word-break: break-all; }
|
||||
.t-num { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* 证书 / 维护徽标：出现在名称旁，不占独立列 */
|
||||
.tls-badge, .maint-badge {
|
||||
margin-left: 8px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
cursor: help;
|
||||
}
|
||||
.tls-badge.warn { background: var(--pending-bg); color: var(--pending-text); }
|
||||
.tls-badge.danger { background: var(--down-bg); color: var(--down-text); }
|
||||
.maint-badge { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
|
||||
.card-head .tls-badge, .card-head .maint-badge { flex: none; }
|
||||
.t-hb svg { display: block; width: 100%; max-width: 150px; height: 24px; }
|
||||
.t-uptime { white-space: normal; }
|
||||
/* 可用率条随视口伸缩；极窄时只留百分比，避免挤压其他列 */
|
||||
.uptime-bar-mini { display: flex; flex: none; width: clamp(32px, 6vw, 84px); height: 8px; margin-right: 0; vertical-align: middle; }
|
||||
.t-pct { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
|
||||
@media (max-width: 640px) {
|
||||
.uptime-bar-mini { display: none; }
|
||||
}
|
||||
|
||||
/* ---------- 最近事件：时间线风格（故障 / 恢复 / 证书提醒） ---------- */
|
||||
.events {
|
||||
max-width: 1200px;
|
||||
margin: 18px auto 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.events-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
||||
.events-head h2 { margin: 0; font-size: 13px; font-weight: 650; color: var(--text); letter-spacing: 0.02em; }
|
||||
.events-count { font-size: 11px; color: var(--text-2); }
|
||||
.events-more {
|
||||
margin-left: auto;
|
||||
padding: 3px 10px;
|
||||
font-size: 11px;
|
||||
color: var(--accent);
|
||||
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.events-more:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
|
||||
|
||||
/* 事件表：直接复用监控表格的外观（圆角、边框、行分隔、hover、状态底色），
|
||||
只额外定义列宽与类型徽标，保证两处视觉完全一致 */
|
||||
/* 事件表：显式声明与监控表格相同的观感（不共用 .monitor-table 类，
|
||||
避免被其他按类名统计/定位的逻辑误算），列宽与类型徽标单独定义 */
|
||||
.events-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
|
||||
.events-table tbody tr { height: var(--row-h); }
|
||||
.events-table th {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
background: var(--bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.events-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; line-height: 1.4; overflow: hidden; }
|
||||
.events-table tbody tr:last-child td { border-bottom: 0; }
|
||||
.events-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
|
||||
.events-table tbody tr[data-status="down"] { background: color-mix(in srgb, var(--down) 6%, transparent); }
|
||||
.events-table tbody tr[data-status="pending"] { background: color-mix(in srgb, var(--pending) 6%, transparent); }
|
||||
.events-wrap { margin-top: 0; }
|
||||
.events-table th:nth-child(1) { width: 11%; }
|
||||
.events-table th:nth-child(2) { width: 9%; }
|
||||
.events-table th:nth-child(3) { width: 26%; }
|
||||
.events-table th:nth-child(4) { width: 54%; }
|
||||
.ev-time { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.ev-badge {
|
||||
display: inline-block;
|
||||
padding: 1px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
}
|
||||
tr[data-status="down"] .ev-badge { background: var(--down-bg); color: var(--down-text); }
|
||||
tr[data-status="up"] .ev-badge { background: var(--up-bg); color: var(--up-text); }
|
||||
tr[data-status="pending"] .ev-badge { background: var(--pending-bg); color: var(--pending-text); }
|
||||
.ev-maint { margin-left: 6px; border-radius: 999px; padding: 0 6px; font-size: 10px; font-weight: 650; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
|
||||
.ev-name { font-weight: 600; }
|
||||
.ev-detail { color: var(--text-2); }
|
||||
/* 事件表：单元格一律顶部对齐。clamp2 为了保证等高固定了 height:2.8em，
|
||||
若单元格按 middle 对齐，17px 的徽标与 36px 的文本框居中基准不同，
|
||||
同一行里「类型」会比「时间/目标/详情」低约 9px（实测截图确认）。 */
|
||||
.events-table td { vertical-align: top; }
|
||||
.events-table td > * { vertical-align: top; }
|
||||
/* 事件行的行高已由 --row-h 固定，clamp2 可以只做上限不必占满两行 */
|
||||
.events-table .clamp2 { height: auto; max-height: 2.8em; }
|
||||
/* 事件表的长文本同样限两行，保证与监控表格一致的等高行 */
|
||||
.ev-name, .ev-detail { white-space: normal; }
|
||||
.ev-name > .clamp2, .ev-detail > .clamp2 { overflow-wrap: anywhere; }
|
||||
.events-empty { margin: 0; padding: 12px; font-size: 12px; color: var(--text-2); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.events { padding: 0 14px; }
|
||||
.events-table th:nth-child(4), .ev-detail { display: none; }
|
||||
}
|
||||
|
||||
/* ---------- 卡片：90 天日均延迟趋势 ---------- */
|
||||
.lat-trend { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
|
||||
.lat-label { font-size: 11px; color: var(--text-2); flex: none; }
|
||||
.lat-bars { display: flex; align-items: flex-end; gap: 1px; height: 20px; flex: 1; min-width: 0; }
|
||||
.lat-cell { flex: 1; min-width: 2px; background: color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 1px; }
|
||||
.lat-cell:hover { background: var(--accent); }
|
||||
.lat-avg { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; flex: none; }
|
||||
|
||||
|
||||
@@ -0,0 +1,263 @@
|
||||
/* ============================================================
|
||||
砂狼白子主题（shiroko）
|
||||
真实素材（头像 / 立绘）来自社区数据库 SchaleDB，版权归 NEXON Games · Yostar；
|
||||
其余装饰为自绘几何图形，均按其公开设定还原：
|
||||
· 光环：倾斜的椭圆环 + 四方位带圆头的短杆（全息瞄准镜准星意象）
|
||||
· 发饰：青色倒十字（旋转 45°）
|
||||
· 围巾：天蓝色飘带（星野的信物）
|
||||
· 座驾：公路车
|
||||
仅在 body[data-theme="shiroko"] 下生效，不影响默认主题。
|
||||
============================================================ */
|
||||
|
||||
body[data-theme="shiroko"] {
|
||||
--bg: #eef7fd;
|
||||
--surface: #ffffff;
|
||||
--border: #d3e6f5;
|
||||
--text: #17253d;
|
||||
--text-2: #55708c;
|
||||
--up: #0da093;
|
||||
--up-text: #0e7c72;
|
||||
--up-bg: #e4faf6;
|
||||
--down: #e0524e;
|
||||
--down-text: #c0362f;
|
||||
--down-bg: #fdecec;
|
||||
--pending: #c07d0d;
|
||||
--pending-text: #8a5a00;
|
||||
--pending-bg: #fff7e6;
|
||||
--accent: #0e7490;
|
||||
--uptime-ok: #0da093;
|
||||
--uptime-warn: #c07d0d;
|
||||
--uptime-bad: #e0524e;
|
||||
--uptime-none: #dbe8f3;
|
||||
--shadow: 0 1px 2px rgb(23 60 100 / 0.05), 0 10px 26px -20px rgb(23 60 100 / 0.35);
|
||||
--sh-sky: #8fe0ff;
|
||||
--sh-sky-deep: #2ea8dc;
|
||||
--sh-navy: #1c2f4d;
|
||||
/* 面板/表头/分组的底色与标题色随明暗模式切换（此前是硬编码浅色，暗色模式会「白顶栏 + 深页面」） */
|
||||
--sh-panel-1: #ffffff;
|
||||
--sh-panel-2: #f6fcff;
|
||||
--sh-card-2: #fbfdff;
|
||||
--sh-th-1: #f7fcff;
|
||||
--sh-th-2: #eef7fd;
|
||||
--sh-group: #eaf6fd;
|
||||
--sh-title: #1c2f4d;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body[data-theme="shiroko"] {
|
||||
--bg: #0a1622;
|
||||
--surface: #101d2c;
|
||||
--border: #1d3247;
|
||||
--text: #e4eef7;
|
||||
--text-2: #8ba6bf;
|
||||
--up: #2fd4c2;
|
||||
--up-text: #4fe0cf;
|
||||
--up-bg: #0d2a2a;
|
||||
--down: #f4736c;
|
||||
--down-text: #f9a29c;
|
||||
--down-bg: #2c1518;
|
||||
--pending: #e8b344;
|
||||
--pending-text: #f0c76a;
|
||||
--pending-bg: #2a2113;
|
||||
--accent: #55c2ef;
|
||||
--uptime-ok: #2fd4c2;
|
||||
--uptime-none: #1a2b3d;
|
||||
--shadow: none;
|
||||
--sh-panel-1: #14243a;
|
||||
--sh-panel-2: #101d2c;
|
||||
--sh-card-2: #0e1a27;
|
||||
--sh-th-1: #16273c;
|
||||
--sh-th-2: #101d2c;
|
||||
--sh-group: #132437;
|
||||
--sh-title: #e4eef7;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- 背景：天蓝渐变 + 淡斜纹 ---------- */
|
||||
body[data-theme="shiroko"] {
|
||||
background-color: var(--bg);
|
||||
background-image:
|
||||
repeating-linear-gradient(135deg, rgb(46 168 220 / 4%) 0 1px, transparent 1px 9px),
|
||||
radial-gradient(120% 60% at 50% -20%, rgb(143 224 255 / 26%), transparent 70%),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 70%), transparent 320px);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* 页脚下方空带：按官方造型还原的光环水印（倾斜椭圆环 + 四方位圆头短杆），
|
||||
与左下角公路车、右下角立绘形成一条装饰带，互不遮挡 */
|
||||
body[data-theme="shiroko"]::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 44%;
|
||||
bottom: 0;
|
||||
width: 330px;
|
||||
height: 180px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
opacity: 0.5;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 130'><g stroke='%232ea8dc' stroke-opacity='0.11' fill='none' stroke-linecap='round'><ellipse cx='120' cy='64' rx='86' ry='38' stroke-width='11'/><ellipse cx='120' cy='70' rx='48' ry='21' stroke-width='6'/><g stroke-width='7'><line x1='22' y1='64' x2='6' y2='64'/><line x1='218' y1='64' x2='234' y2='64'/><line x1='120' y1='18' x2='120' y2='2'/><line x1='120' y1='110' x2='120' y2='126'/></g></g><g fill='%232ea8dc' fill-opacity='0.11'><circle cx='6' cy='64' r='4.6'/><circle cx='234' cy='64' r='4.6'/><circle cx='120' cy='2' r='4.6'/><circle cx='120' cy='126' r='4.6'/></g></svg>");
|
||||
}
|
||||
|
||||
/* 左下角：简约风公路车插画（与人物同一套扁平风格） */
|
||||
body[data-theme="shiroko"]::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
left: 8px;
|
||||
bottom: 2px;
|
||||
width: 158px;
|
||||
height: 93px;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
/* 全局半透明 + 两端渐隐，弱化「一块贴图」的突兀感 */
|
||||
opacity: var(--sh-deco-opacity, 0.78);
|
||||
filter: saturate(0.92);
|
||||
mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
|
||||
background: url("shiroko-bike.webp") no-repeat center / contain;
|
||||
}
|
||||
|
||||
/* ---------- 顶栏：天蓝到白 + 底部围巾飘带 ---------- */
|
||||
body[data-theme="shiroko"] .topbar {
|
||||
background: linear-gradient(180deg, var(--sh-panel-1) 0%, var(--sh-panel-2) 100%);
|
||||
border-bottom: 0;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
body[data-theme="shiroko"] .topbar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
background: url("deco-scarf.svg") repeat-x bottom left / 300px 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ---------- 品牌：真实头像 + 光环环 ---------- */
|
||||
body[data-theme="shiroko"] .logo {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #eaf7ff url("shiroko-icon.webp") center / cover no-repeat;
|
||||
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sh-sky-deep), 0 0 12px rgb(46 168 220 / 55%);
|
||||
animation: avatar-halo 3.4s ease-out infinite;
|
||||
}
|
||||
@keyframes avatar-halo {
|
||||
0% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sh-sky-deep), 0 0 12px rgb(46 168 220 / 55%); }
|
||||
65% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgb(46 168 220 / 0%), 0 0 16px rgb(46 168 220 / 30%); }
|
||||
100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sh-sky-deep), 0 0 12px rgb(46 168 220 / 55%); }
|
||||
}
|
||||
body[data-theme="shiroko"] .brand-text h1 {
|
||||
color: var(--sh-title);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* 分组标题前的青色倒十字发饰（旋转 45°） */
|
||||
body[data-theme="shiroko"] .group-title::before,
|
||||
body[data-theme="shiroko"] .group-row td::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 7px;
|
||||
vertical-align: middle;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><g transform='rotate(45 10 10)' fill='%232ea8dc'><rect x='8.5' y='0.5' width='3' height='19' rx='1.4'/><rect x='0.5' y='8.5' width='19' height='3' rx='1.4'/></g><circle cx='10' cy='10' r='2.6' fill='%23bfeaff'/></svg>");
|
||||
}
|
||||
|
||||
/* ---------- 状态点 → 迷你光环 ---------- */
|
||||
body[data-theme="shiroko"] [data-status="up"] { --sh-state: var(--up); }
|
||||
body[data-theme="shiroko"] [data-status="down"] { --sh-state: var(--down); }
|
||||
body[data-theme="shiroko"] [data-status="pending"] { --sh-state: var(--pending); }
|
||||
body[data-theme="shiroko"] .dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: transparent;
|
||||
border: 2px solid var(--sh-state, var(--pending));
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
box-shadow: 0 0 7px -1px var(--sh-state, var(--pending));
|
||||
}
|
||||
body[data-theme="shiroko"] .dot::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 2.5px;
|
||||
border-radius: 50%;
|
||||
background: var(--sh-state, var(--pending));
|
||||
}
|
||||
body[data-theme="shiroko"] .card[data-status="up"] .dot { animation: halo-pulse 2.6s ease-out infinite; }
|
||||
@keyframes halo-pulse {
|
||||
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); }
|
||||
70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--up) 0%, transparent); }
|
||||
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 0%, transparent); }
|
||||
}
|
||||
|
||||
/* ---------- 卡片 / 表格 / 交互 ---------- */
|
||||
body[data-theme="shiroko"] .card {
|
||||
border-left-width: 3px;
|
||||
background: linear-gradient(180deg, var(--sh-panel-1), var(--sh-card-2));
|
||||
}
|
||||
body[data-theme="shiroko"] .tab.active,
|
||||
body[data-theme="shiroko"] .view-btn.active {
|
||||
background: linear-gradient(135deg, var(--sh-sky-deep), #1b7fb4);
|
||||
box-shadow: 0 3px 10px -4px rgb(46 168 220 / 70%);
|
||||
}
|
||||
body[data-theme="shiroko"] #refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||||
body[data-theme="shiroko"] .monitor-table th {
|
||||
background: linear-gradient(180deg, var(--sh-th-1), var(--sh-th-2));
|
||||
color: var(--sh-title);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
body[data-theme="shiroko"] .monitor-table tbody tr:hover { background: rgb(46 168 220 / 6%); }
|
||||
body[data-theme="shiroko"] .group-row td {
|
||||
background: linear-gradient(90deg, var(--sh-group), var(--sh-th-1));
|
||||
border-left: 3px solid var(--sh-sky-deep);
|
||||
color: var(--sh-title);
|
||||
}
|
||||
body[data-theme="shiroko"] .table-wrap { box-shadow: var(--shadow); }
|
||||
body[data-theme="shiroko"] .uptime-cell.lv-none {
|
||||
background-image: repeating-linear-gradient(135deg, rgb(46 168 220 / 16%) 0 1px, transparent 1px 3px);
|
||||
background-color: var(--uptime-none);
|
||||
}
|
||||
|
||||
/* ---------- 刷新按钮的公路车轮加载态 ---------- */
|
||||
body[data-theme="shiroko"] #refresh-btn .wheel { animation: wheel-spin 0.9s linear infinite; }
|
||||
@keyframes wheel-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* ---------- 简约风立绘（settings.artwork，默认指向内置形象） ---------- */
|
||||
/* --sh-deco-opacity 由面板按 settings.decoOpacity 注入，人物与单车共用同一个值 */
|
||||
body[data-theme="shiroko"] .artwork {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
height: min(40vh, 340px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
/* 全局半透明（整张图统一淡化）+ 上下渐隐，读起来是背景插画而不是贴上去的贴纸 */
|
||||
opacity: var(--sh-deco-opacity, 0.78);
|
||||
filter: drop-shadow(0 6px 18px rgb(23 60 100 / 10%));
|
||||
mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 92%, rgb(0 0 0 / 45%) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 92%, rgb(0 0 0 / 45%) 100%);
|
||||
}
|
||||
/* 窄屏：立绘与固定装饰全部撤掉，避免压住内容或溢出（手机只保留配色与围巾飘带） */
|
||||
@media (max-width: 820px) {
|
||||
body[data-theme="shiroko"] .artwork,
|
||||
body[data-theme="shiroko"]::before,
|
||||
body[data-theme="shiroko"]::after { display: none; }
|
||||
}
|
||||
/* 横屏手机：可用高度很小，立绘同样撤掉 */
|
||||
@media (max-height: 520px) {
|
||||
body[data-theme="shiroko"] .artwork { display: none; }
|
||||
}
|
||||
/* 注：立绘尺寸在卡片/表格两种视图下必须保持一致，不再按视图改高度 */
|
||||
|
||||
/* 内容层置于装饰之上 */
|
||||
body[data-theme="shiroko"] .grid,
|
||||
body[data-theme="shiroko"] .footer,
|
||||
body[data-theme="shiroko"] .group-tabs { position: relative; z-index: 1; }
|
||||
+44
-9
@@ -5,8 +5,9 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="轻量级服务监控面板：HTTP 可用性与 TCP 端口探测">
|
||||
<title>Shiroko Monitor</title>
|
||||
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" data-favicon="1">
|
||||
<link rel="stylesheet" href="assets/style.css">
|
||||
<link rel="stylesheet" href="assets/theme-shiroko.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
@@ -19,13 +20,27 @@
|
||||
</div>
|
||||
<div class="summary">
|
||||
<span id="overall-pill" class="pill pending">检测中…</span>
|
||||
<div class="stat"><b id="stat-total">–</b><label>监控数</label></div>
|
||||
<div class="stat stat-up"><b id="stat-up">–</b><label>在线</label></div>
|
||||
<div class="stat stat-down"><b id="stat-down">–</b><label>离线</label></div>
|
||||
<div class="stat"><b id="stat-latency">–</b><label>平均延迟</label></div>
|
||||
<div class="stat"><b id="stat-uptime">–</b><label>90天可用率</label></div>
|
||||
<div class="view-switch" id="view-switch" role="group" aria-label="视图切换"></div>
|
||||
<button id="refresh-btn" type="button">刷新</button>
|
||||
<div class="stats">
|
||||
<div class="stat"><b id="stat-total">–</b><label>监控数</label></div>
|
||||
<div class="stat stat-up"><b id="stat-up">–</b><label>在线</label></div>
|
||||
<div class="stat stat-down"><b id="stat-down">–</b><label>离线</label></div>
|
||||
<div class="stat"><b id="stat-latency">–</b><label>平均延迟</label></div>
|
||||
<div class="stat"><b id="stat-uptime">–</b><label>90天可用率</label></div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="view-switch" id="view-switch" role="group" aria-label="视图切换"></div>
|
||||
<button id="theme-btn" type="button" class="icon-btn" title="切换主题">
|
||||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||||
<circle cx="50" cy="50" r="31" fill="none" stroke="currentColor" stroke-width="8"/>
|
||||
<circle cx="50" cy="50" r="15" fill="none" stroke="currentColor" stroke-width="4" opacity="0.7"/>
|
||||
<polygon points="46.4,4 53.6,4 51.2,15 48.8,15" fill="currentColor"/>
|
||||
<polygon points="46.4,96 53.6,96 51.2,85 48.8,85" fill="currentColor"/>
|
||||
<polygon points="4,46.4 4,53.6 15,51.2 15,48.8" fill="currentColor"/>
|
||||
<polygon points="96,46.4 96,53.6 85,51.2 85,48.8" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="refresh-btn" type="button">刷新</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -35,13 +50,33 @@
|
||||
<div class="empty">正在加载监控配置…</div>
|
||||
</main>
|
||||
|
||||
<!-- 最近事件：故障 / 恢复 / 证书提醒（含维护窗口内的事件） -->
|
||||
<section class="events" id="events" hidden>
|
||||
<div class="events-head">
|
||||
<h2>最近事件</h2>
|
||||
<span class="events-count" id="events-count"></span>
|
||||
<button type="button" class="events-more" id="events-more" hidden>展开全部</button>
|
||||
</div>
|
||||
<div class="table-wrap events-wrap">
|
||||
<table class="events-table">
|
||||
<thead>
|
||||
<tr><th>时间</th><th>类型</th><th>目标</th><th>详情</th></tr>
|
||||
</thead>
|
||||
<tbody id="events-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="events-empty" id="events-empty" hidden>暂无事件记录（故障、恢复与证书提醒会出现在这里）</p>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<span id="source-badge" class="footer-item">数据源：–</span>
|
||||
<span id="demo-chip" class="footer-item demo-chip" hidden>演示数据</span>
|
||||
<span id="ur-chip" class="footer-item warn-chip" hidden>UptimeRobot 同步异常</span>
|
||||
<span id="notify-badge" class="footer-item" hidden>通知 –</span>
|
||||
<span id="updated-at" class="footer-item">–</span>
|
||||
<span id="countdown" class="footer-item">–</span>
|
||||
<span class="footer-item version">shiroko-monitor v0.6.0</span>
|
||||
<a id="admin-link" class="footer-item admin-link" hidden>管理</a>
|
||||
<span class="footer-item version">shiroko-monitor v0.12.2</span>
|
||||
</footer>
|
||||
|
||||
<script type="module" src="assets/app.js"></script>
|
||||
|
||||
@@ -3,9 +3,15 @@
|
||||
"title": "Shiroko Monitor",
|
||||
"description": "轻量级服务监控面板",
|
||||
"view": "table",
|
||||
"dataFilter": "uptimerobot",
|
||||
"theme": "shiroko",
|
||||
"artwork": "assets/shiroko-figure.webp",
|
||||
"decoOpacity": 0.78,
|
||||
"dataFilter": "both",
|
||||
"refreshInterval": 300,
|
||||
"dataSource": "auto",
|
||||
"adminUrl": "",
|
||||
"dataUrl": "",
|
||||
"corsOrigins": [],
|
||||
"uptimeRobot": {
|
||||
"enabled": false,
|
||||
"apiKey": "",
|
||||
|
||||
+2686
-549
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,124 @@
|
||||
#!/usr/bin/env python3
|
||||
"""从 assets-src/ 的原始插画生成 public/assets/ 下的透明素材。
|
||||
|
||||
为什么要这么处理：
|
||||
图像生成返回的是**白底**图，需要抠成透明。抠白底分两步，缺一不可——
|
||||
1) 边界洪泛：把与图片边界连通的白色变透明（背景主体）
|
||||
2) 封闭区域补抠：被图形围起来的白色区域与边界不连通，第 1 步碰不到它们。
|
||||
光环环内、单车车架三角、轮圈内扇形都会因此留成白块（v0.8.3 之前就踩过）
|
||||
注意：不能简单「全局抠白」，那会把角色的脸/袜子/衣服白一起抠掉。
|
||||
本脚本按连通域面积处理，并跳过角色躯干区域，保留服装白。
|
||||
|
||||
用法（PyPI 的 Pillow）：
|
||||
python scripts/prepare-artwork.py
|
||||
"""
|
||||
from collections import deque
|
||||
from pathlib import Path
|
||||
|
||||
from PIL import Image, ImageDraw
|
||||
|
||||
ROOT = Path(__file__).resolve().parent.parent
|
||||
SRC = ROOT / "assets-src"
|
||||
DST = ROOT / "public" / "assets"
|
||||
SENTINEL = (255, 0, 255)
|
||||
WHITE_TOLERANCE = 18 # 与纯白的最大通道差
|
||||
|
||||
|
||||
def is_white(px):
|
||||
return px[3] > 128 and px[0] > 255 - WHITE_TOLERANCE and px[1] > 255 - WHITE_TOLERANCE and px[2] > 255 - WHITE_TOLERANCE
|
||||
|
||||
|
||||
def connected_regions(im, w, h):
|
||||
"""列出所有「近白且连通」的区域：[(面积, [(x, y), ...]), ...]"""
|
||||
px = im.load()
|
||||
seen = [[False] * w for _ in range(h)]
|
||||
regions = []
|
||||
for y in range(h):
|
||||
for x in range(w):
|
||||
if seen[y][x] or not is_white(px[x, y]):
|
||||
continue
|
||||
queue = deque([(x, y)])
|
||||
seen[y][x] = True
|
||||
cells = []
|
||||
while queue:
|
||||
cx, cy = queue.popleft()
|
||||
cells.append((cx, cy))
|
||||
for nx, ny in ((cx + 1, cy), (cx - 1, cy), (cx, cy + 1), (cx, cy - 1)):
|
||||
if 0 <= nx < w and 0 <= ny < h and not seen[ny][nx] and is_white(px[nx, ny]):
|
||||
seen[ny][nx] = True
|
||||
queue.append((nx, ny))
|
||||
regions.append((len(cells), cells))
|
||||
return regions
|
||||
|
||||
|
||||
def cut_out(src: Path, dst: Path, target_height: int, *, min_area: int, square: bool = False,
|
||||
skip_below: float | None = None, quality: int = 92):
|
||||
"""抠白底 -> 裁边 -> 按高度缩放 -> 存 webp。
|
||||
square: 裁边后补成正方形（头像/图标用，避免圆形裁切与 favicon 变形）
|
||||
skip_below: 只清理位于该纵向比例（0~1）以上的封闭区域；None 表示全部清理
|
||||
"""
|
||||
im = Image.open(src).convert("RGBA")
|
||||
width, height = im.size
|
||||
|
||||
# 第 1 步：边界洪泛（连通到边界的背景）
|
||||
rgb = im.convert("RGB")
|
||||
for x, y in ((0, 0), (width - 1, 0), (0, height - 1), (width - 1, height - 1),
|
||||
(width // 2, 0), (0, height // 2), (width - 1, height // 2), (width // 2, height - 1)):
|
||||
if rgb.getpixel((x, y)) != SENTINEL:
|
||||
ImageDraw.floodfill(rgb, (x, y), SENTINEL, thresh=WHITE_TOLERANCE + 24)
|
||||
sentinel_px = rgb.load()
|
||||
px = im.load()
|
||||
for y in range(height):
|
||||
for x in range(width):
|
||||
if sentinel_px[x, y] == SENTINEL:
|
||||
px[x, y] = (0, 0, 0, 0)
|
||||
|
||||
# 第 2 步：封闭区域补抠（按面积阈值 + 可选纵向范围）
|
||||
removed = 0
|
||||
for area, cells in connected_regions(im, width, height):
|
||||
if area < min_area:
|
||||
continue
|
||||
if skip_below is not None and min(cy for _, cy in cells) > height * skip_below:
|
||||
continue # 疑似服装白，保留
|
||||
for x, y in cells:
|
||||
px[x, y] = (0, 0, 0, 0)
|
||||
removed += area
|
||||
|
||||
box = im.getbbox()
|
||||
if box:
|
||||
im = im.crop(box)
|
||||
if square:
|
||||
side = max(im.size)
|
||||
canvas = Image.new("RGBA", (side, side), (0, 0, 0, 0))
|
||||
canvas.paste(im, ((side - im.width) // 2, (side - im.height) // 2))
|
||||
im = canvas
|
||||
scale = target_height / im.height
|
||||
im = im.resize((round(im.width * scale), target_height), Image.LANCZOS)
|
||||
im.save(dst, "WEBP", quality=quality, method=6)
|
||||
print(f"{dst.name}: {im.size} 补抠封闭白区 {removed}px，体积 {dst.stat().st_size / 1024:.1f}KB")
|
||||
return im
|
||||
|
||||
|
||||
def main():
|
||||
# 立绘：560 高（与 CSS 里 min(40vh, 340px) 的显示尺寸对应，留 1.6 倍余量给高 DPI）
|
||||
figure = cut_out(SRC / "figure-original.png", DST / "shiroko-figure.webp", 560, min_area=150)
|
||||
# 图标：补成正方形再缩到 180，供圆形头像与 favicon 使用
|
||||
icon = cut_out(SRC / "icon-original.png", DST / "shiroko-icon.webp", 180, min_area=15, square=True)
|
||||
|
||||
# favicon 两种格式都产出：PNG 64 与 WebP 64。
|
||||
# PNG 不删——favicon 是浏览器最早的请求，WebP 覆盖虽广但旧浏览器会直接不显示图标，
|
||||
# 留 PNG 作回退代价只有几 KB，换来「任何浏览器都有图标」更稳妥。
|
||||
icon64 = icon.resize((64, 64), Image.LANCZOS)
|
||||
icon64.save(DST / "favicon-shiroko.png", "PNG", optimize=True)
|
||||
icon64.save(DST / "favicon-shiroko.webp", "WEBP", quality=90, method=6)
|
||||
png_kb = (DST / "favicon-shiroko.png").stat().st_size / 1024
|
||||
webp_kb = (DST / "favicon-shiroko.webp").stat().st_size / 1024
|
||||
print(f"favicon-shiroko: 64x64，PNG {png_kb:.1f}KB / WebP {webp_kb:.1f}KB")
|
||||
|
||||
# 单车：200 高，通体无服装白，全部清理
|
||||
cut_out(SRC / "bike-original.png", DST / "shiroko-bike.webp", 200, min_area=20)
|
||||
print("完成。视觉上请确认：光环环内、车架三角、轮圈内扇形均为透明，且角色的脸/袜子/衣服完好。")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -0,0 +1,369 @@
|
||||
/**
|
||||
* shiroko-monitor 管理端验证：2FA 绑定、登录、会话、限流与管理接口
|
||||
*
|
||||
* 覆盖：
|
||||
* [A] TOTP / Base32 —— RFC 4226 与 RFC 6238 官方测试向量（算法正确性的地基）
|
||||
* [B] 2FA 档案 —— 绑定流程、恢复码一次性、session 生命周期、防重放、失败限流
|
||||
* [C] HTTP 接口 —— 未绑定时一律 403、越权路径、cookie 属性、私有配置写入
|
||||
* [D] 页面 —— 未绑定只见绑定流程；绑定后需 2FA 才能进管理界面
|
||||
*
|
||||
* 用法：node scripts/verify-admin.cjs
|
||||
*/
|
||||
const fs = require('node:fs');
|
||||
const http = require('node:http');
|
||||
const os = require('node:os');
|
||||
const path = require('node:path');
|
||||
const { spawn } = require('node:child_process');
|
||||
const { chromium } = require('playwright');
|
||||
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const PROBER = path.join(ROOT, 'prober', 'node', 'index.js');
|
||||
const CHROME = 'C:/Program Files/Google/Chrome/Application/chrome.exe';
|
||||
const PORT = 8891;
|
||||
const SETUP_KEY = 'verify-admin-setup-key';
|
||||
|
||||
const results = [];
|
||||
const check = (name, pass, detail) => {
|
||||
results.push({ name, pass });
|
||||
console.log(`${pass ? ' ✓' : ' ✗'} ${name}${detail ? ` — ${detail}` : ''}`);
|
||||
};
|
||||
const group = (t) => console.log(`\n${t}`);
|
||||
|
||||
// 与服务端 lib/totp.js 同一套实现，用它算出「App 会显示的码」
|
||||
const lib = path.join(ROOT, 'prober', 'node', 'lib', 'totp.js');
|
||||
|
||||
async function loadLib() {
|
||||
return import(`file:///${lib.replace(/\\/g, '/')}`);
|
||||
}
|
||||
|
||||
async function withServer(env, fn) {
|
||||
const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-admin-'));
|
||||
fs.cpSync(path.join(ROOT, 'public'), tmp, { recursive: true });
|
||||
const cfg = path.join(tmp, 'monitors.json');
|
||||
const base = JSON.parse(fs.readFileSync(cfg, 'utf8'));
|
||||
base.settings.dataFilter = 'config';
|
||||
fs.writeFileSync(cfg, `${JSON.stringify(base, null, 2)}\n`);
|
||||
// 本地探测配置指向本地夹具，避免真实网络请求拖慢测试
|
||||
const localCfg = path.join(tmp, 'local.json');
|
||||
fs.writeFileSync(localCfg, JSON.stringify({ settings: {}, monitors: [] }));
|
||||
|
||||
const child = spawn(process.execPath, [PROBER, '--once'], {
|
||||
env: { ...process.env, PORT: String(PORT), SHIROKO_DATA_DIR: tmp, SHIROKO_ADMIN_SETUP_KEY: env.setupKey ?? SETUP_KEY },
|
||||
stdio: 'ignore',
|
||||
});
|
||||
// --once 会退出，因此另起一个常驻进程供 HTTP 测试
|
||||
const server = spawn(process.execPath, [PROBER, `--config=${cfg}`, `--local-config=${localCfg}`, `--out=${path.join(tmp, 'status.json')}`], {
|
||||
env: { ...process.env, PORT: String(PORT), SHIROKO_DATA_DIR: tmp, SHIROKO_ADMIN_SETUP_KEY: env.setupKey ?? SETUP_KEY },
|
||||
stdio: 'ignore',
|
||||
});
|
||||
await new Promise((r) => setTimeout(r, 4000));
|
||||
try {
|
||||
await fn({ tmp, cfg, localCfg });
|
||||
} finally {
|
||||
server.kill();
|
||||
child.kill();
|
||||
fs.rmSync(tmp, { recursive: true, force: true });
|
||||
}
|
||||
}
|
||||
|
||||
const req = async (path_, { method = 'GET', body, cookie } = {}) => {
|
||||
const res = await fetch(`http://localhost:${PORT}${path_}`, {
|
||||
method,
|
||||
headers: {
|
||||
...(body ? { 'content-type': 'application/json' } : {}),
|
||||
...(cookie ? { cookie } : {}),
|
||||
},
|
||||
body: body ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch { /* 无 JSON 体 */ }
|
||||
return { status: res.status, data, cookie: res.headers.get('set-cookie') };
|
||||
};
|
||||
|
||||
async function main() {
|
||||
const { totp, base32Decode, hotp, base32Encode, base32Decode: dec, generateSecret, generateRecoveryCodes, hashRecoveryCode, verifyTotp, otpauthUri } = await loadLib();
|
||||
const { createAdminAuth } = await import(`file:///${path.join(ROOT, 'prober', 'node', 'lib', 'admin.js').replace(/\\/g, '/')}`);
|
||||
|
||||
/* ============ [A] TOTP 算法（RFC 官方向量） ============ */
|
||||
group('[A] TOTP / Base32 算法（RFC 4226 & RFC 6238 官方测试向量）');
|
||||
const ascii20 = Buffer.from('12345678901234567890', 'ascii');
|
||||
const hotpExpected = ['755224', '287082', '359152', '969429', '338314', '254676', '287922', '162583', '399871', '520489'];
|
||||
check('RFC 4226 HOTP 十个向量全部匹配', hotpExpected.every((v, i) => hotp(ascii20, i) === v), hotpExpected.slice(0, 3).join(',') + '…');
|
||||
const totpTimes = [59, 1111111109, 1111111111, 1234567890, 2000000000, 20000000000];
|
||||
const totpExpected = ['94287082', '07081804', '14050471', '89005924', '69279037', '65353130'];
|
||||
check('RFC 6238 TOTP（SHA1/8 位）六个向量全部匹配', totpTimes.every((t, i) => totp(ascii20, { atMs: t * 1000, digits: 8 }) === totpExpected[i]), totpExpected.join(','));
|
||||
|
||||
const sec = generateSecret();
|
||||
check('生成密钥为 20 字节（160 位，RFC 4226 建议强度）', base32Decode(sec).length === 20, `${base32Decode(sec).length} 字节`);
|
||||
check('Base32 编解码可往返', base32Encode(base32Decode(sec)) === sec, sec.slice(0, 8) + '…');
|
||||
check('Base32 解码容忍小写/空格/连字符', Buffer.compare(dec('ABCD EFGH-IJKL'), dec('abcdefghijkl')) === 0, `归一化后 ${dec('abcd efgh-ijkl').length} 字节`);
|
||||
const uri = otpauthUri({ secret: sec, label: 'shiroko', issuer: 'shiroko-monitor' });
|
||||
check('otpauth 链接含 secret/digits/period/issuer', /secret=/.test(uri) && /digits=6/.test(uri) && /period=30/.test(uri) && /issuer=shiroko-monitor/.test(uri), uri.slice(0, 70) + '…');
|
||||
const good = totp(base32Decode(sec));
|
||||
check('正确验证码通过校验', verifyTotp(sec, good) === null, good);
|
||||
check('错误验证码被拒', verifyTotp(sec, '000000') === 'invalid-code' || verifyTotp(sec, good) === 'invalid-code');
|
||||
check('格式非法的输入被拒', verifyTotp(sec, 'abc') === 'invalid-format', '');
|
||||
check('验证码容错 ±1 个时间窗', verifyTotp(sec, totp(base32Decode(sec), { atMs: Date.now() - 30000 })) === null, '30 秒前');
|
||||
check('超窗（5 分钟前）的码被拒', verifyTotp(sec, totp(base32Decode(sec), { atMs: Date.now() - 5 * 60000 })) === 'invalid-code', '');
|
||||
const rc = generateRecoveryCodes(10);
|
||||
check('恢复码 10 枚且格式为 XXXXX-XXXXX', rc.length === 10 && rc.every((c) => /^[A-Z2-9]{5}-[A-Z2-9]{5}$/.test(c)), rc[0]);
|
||||
check('恢复码不含易混淆字符 0/O/1/I', rc.join('').replace(/-/g, '').split('').every((ch) => !"01IO".includes(ch)), '');
|
||||
check('恢复码哈希对小写/去连字符/带空格均一致', (() => {
|
||||
const s = 'salt123';
|
||||
const h = hashRecoveryCode(rc[0], s);
|
||||
return h === hashRecoveryCode(rc[0].toLowerCase(), s) && h === hashRecoveryCode(rc[0].replace('-', ''), s) && h === hashRecoveryCode(` ${rc[0]} `, s);
|
||||
})(), '');
|
||||
|
||||
/* ============ [B] 2FA 档案与会话 ============ */
|
||||
group('[B] 2FA 档案：绑定 / 会话 / 防重放 / 限流');
|
||||
const btmp = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-2fa-'));
|
||||
let clock = Date.now();
|
||||
const A = createAdminAuth({ storePath: path.join(btmp, 'admin.json'), setupKey: SETUP_KEY, now: () => clock });
|
||||
|
||||
check('初始状态为未绑定', A.isBound() === false, JSON.stringify(A.status()));
|
||||
check('错误绑定口令被拒', A.beginSetup('wrong', '1.1.1.1').error === 'bad-setup-key');
|
||||
const s1 = A.beginSetup(SETUP_KEY, '10.0.0.1');
|
||||
check('正确口令换取密钥', s1.ok && s1.secret.length === 32 && s1.uri.startsWith('otpauth://'), `${s1.secret.slice(0, 8)}…`);
|
||||
check('未完成绑定时不可登录', A.login('123456', '10.0.0.1').error === 'not-bound');
|
||||
check('错误验证码无法完成绑定', A.confirmSetup(s1.setupToken, '000000').ok === false);
|
||||
check('错误的 setupToken 被拒', A.confirmSetup('forged', '000000').error === 'no-setup');
|
||||
clock += 11 * 60 * 1000;
|
||||
check('绑定流程 10 分钟后失效', A.confirmSetup(s1.setupToken, '000000').error === 'setup-expired');
|
||||
const s2 = A.beginSetup(SETUP_KEY, '10.0.0.1');
|
||||
const bound = A.confirmSetup(s2.setupToken, totp(base32Decode(s2.secret), { atMs: clock }));
|
||||
check('正确验证码完成绑定并生成 10 枚恢复码', bound.ok && bound.recoveryCodes.length === 10, `首枚 ${bound.recoveryCodes[0]}`);
|
||||
check('绑定后不能再次绑定', A.beginSetup(SETUP_KEY, '10.0.0.1').error === 'already-bound');
|
||||
check('档案落盘在 data 目录（已 gitignore）', fs.existsSync(path.join(btmp, 'admin.json')), 'admin.json');
|
||||
const stored = JSON.parse(fs.readFileSync(path.join(btmp, 'admin.json'), 'utf8'));
|
||||
check('落盘文件不含恢复码明文', !stored.recovery?.some?.((h) => bound.recoveryCodes.includes(h)) && typeof stored.recovery[0] === 'string' && stored.recovery[0].length === 64, '仅存 sha256');
|
||||
|
||||
const l1 = A.login(bound.recoveryCodes[0], '2.2.2.2');
|
||||
check('恢复码可登录', l1.ok && l1.via === 'recovery', '');
|
||||
check('会话 id 为高熵随机串', l1.sessionId.length >= 40, `${l1.sessionId.length} 字符`);
|
||||
check('有效会话可校验通过', A.verifySession(l1.sessionId) !== null);
|
||||
check('伪造的会话 id 被拒', A.verifySession('forged-session') === null);
|
||||
check('同一枚恢复码不能复用', A.login(bound.recoveryCodes[0], '2.2.2.2').ok === false);
|
||||
check('剩余恢复码减 1', A.status().recoveryLeft === 9, `${A.status().recoveryLeft} 枚`);
|
||||
|
||||
const store2 = JSON.parse(fs.readFileSync(path.join(btmp, 'admin.json'), 'utf8'));
|
||||
const code2 = totp(base32Decode(store2.secret), { atMs: clock });
|
||||
const l2 = A.login(code2, '3.3.3.3');
|
||||
check('TOTP 可登录', l2.ok && l2.via === 'totp', code2);
|
||||
check('同一时间步的码不能重放', A.login(code2, '3.3.3.3').error === 'replayed');
|
||||
clock += 31000;
|
||||
const code3 = totp(base32Decode(store2.secret), { atMs: clock });
|
||||
check('下一个时间窗的码可用', A.login(code3, '3.3.3.3').ok === true, code3);
|
||||
|
||||
// 登出与空闲超时
|
||||
A.destroySession(l1.sessionId);
|
||||
check('登出后会话立即失效', A.verifySession(l1.sessionId) === null);
|
||||
clock += 31 * 60 * 1000;
|
||||
check('超过 30 分钟空闲的会话失效', A.verifySession(l2.sessionId) === null);
|
||||
check('超过 2 小时的最长会话失效', (() => {
|
||||
clock -= 31 * 60 * 1000;
|
||||
const l = A.login(totp(base32Decode(store2.secret), { atMs: clock }), '4.4.4.4');
|
||||
clock += 2 * 60 * 60 * 1000 + 1000;
|
||||
return A.verifySession(l.sessionId) === null;
|
||||
})(), '');
|
||||
|
||||
// 限流
|
||||
const L = createAdminAuth({ storePath: path.join(btmp, 'admin.json'), setupKey: SETUP_KEY, now: () => clock });
|
||||
let last = null;
|
||||
for (let i = 0; i < 5; i++) last = L.login('000000', '9.9.9.9');
|
||||
check('连续 5 次失败后锁定该 IP', last.locked === true, `失败 ${last.fails} 次`);
|
||||
check('锁定期间即使验证码正确也进不去', (() => {
|
||||
const fresh = JSON.parse(fs.readFileSync(path.join(btmp, 'admin.json'), 'utf8'));
|
||||
clock += 31 * 1000;
|
||||
const r = L.login(totp(base32Decode(fresh.secret), { atMs: clock }), '9.9.9.9');
|
||||
return r.ok === false && r.error === 'locked';
|
||||
})(), '');
|
||||
check('其他 IP 不受该 IP 锁定影响', (() => {
|
||||
const fresh = JSON.parse(fs.readFileSync(path.join(btmp, 'admin.json'), 'utf8'));
|
||||
clock += 31 * 1000;
|
||||
return L.login(totp(base32Decode(fresh.secret), { atMs: clock }), '8.8.8.8').ok === true;
|
||||
})(), '');
|
||||
check('登录成功即清零该 IP 的失败计数', (() => {
|
||||
const fresh = JSON.parse(fs.readFileSync(path.join(btmp, 'admin.json'), 'utf8'));
|
||||
clock += 31 * 1000;
|
||||
L.login('000000', '7.7.7.7');
|
||||
clock += 31 * 1000;
|
||||
const r = L.login(totp(base32Decode(fresh.secret), { atMs: clock }), '7.7.7.7');
|
||||
return r.ok === true && L.status() !== null;
|
||||
})(), '');
|
||||
|
||||
check('重置需正确的 setup key', A.reset('wrong').ok === false);
|
||||
check('重置后回到未绑定并清空会话', (() => { const r = A.reset(SETUP_KEY); return r.ok && A.isBound() === false && A.activeSessions() === 0; })(), '');
|
||||
|
||||
/* ============ [C] HTTP 接口 ============ */
|
||||
group('[C] HTTP 接口：鉴权边界与写入落点');
|
||||
await withServer({}, async ({ tmp, localCfg }) => {
|
||||
const st = await req('/api/admin/status');
|
||||
check('未登录可查 2FA 状态（供页面决定显示绑定还是登录）', st.status === 200 && st.data.bound === false, JSON.stringify(st.data).slice(0, 80));
|
||||
check('状态接口不回显 setup key 本身', !JSON.stringify(st.data).includes(SETUP_KEY), '');
|
||||
|
||||
const locked = await req('/api/admin/overview');
|
||||
check('未绑定时概览接口 403', locked.status === 403 && locked.data.error === 'not-bound', `HTTP ${locked.status}`);
|
||||
const locked2 = await req('/api/admin/probe-now', { method: 'POST' });
|
||||
check('未绑定时立即重探 403', locked2.status === 403, `HTTP ${locked2.status}`);
|
||||
const locked3 = await req('/api/admin/maintenance', { method: 'POST', body: { from: '2030-01-01T00:00:00Z', to: '2030-01-01T01:00:00Z' } });
|
||||
check('未绑定时新增维护窗口 403', locked3.status === 403, `HTTP ${locked3.status}`);
|
||||
check('未绑定时写操作没有产生任何文件改动', !fs.existsSync(localCfg) || JSON.parse(fs.readFileSync(localCfg, 'utf8')).settings?.maintenance === undefined, '');
|
||||
|
||||
check('错误绑定口令返回 401', (await req('/api/admin/2fa/setup', { method: 'POST', body: { key: 'wrong' } })).status === 401);
|
||||
const setupRes = await req('/api/admin/2fa/setup', { method: 'POST', body: { key: SETUP_KEY } });
|
||||
check('正确口令换取密钥', setupRes.status === 200 && setupRes.data.secret?.length === 32, setupRes.data.uri?.slice(0, 50) + '…');
|
||||
check('绑定响应含 secret 与 uri 但不含恢复码', !setupRes.data.recoveryCodes, '');
|
||||
|
||||
const c0 = totp(base32Decode(setupRes.data.secret));
|
||||
const badConfirm = await req('/api/admin/2fa/confirm', { method: 'POST', body: { setupToken: setupRes.data.setupToken, code: '000000' } });
|
||||
check('错误验证码无法完成绑定', badConfirm.status === 400, `HTTP ${badConfirm.status}`);
|
||||
const confirm = await req('/api/admin/2fa/confirm', { method: 'POST', body: { setupToken: setupRes.data.setupToken, code: c0 } });
|
||||
check('正确验证码完成绑定并返回恢复码', confirm.status === 200 && confirm.data.recoveryCodes?.length === 10, '');
|
||||
check('重复绑定返回 409', (await req('/api/admin/2fa/setup', { method: 'POST', body: { key: SETUP_KEY } })).status === 409);
|
||||
|
||||
// 会话边界
|
||||
check('已绑定但无会话时概览 401', (await req('/api/admin/overview')).status === 401);
|
||||
check('伪造会话 cookie 无效', (await req('/api/admin/overview', { cookie: 'shiroko_admin=forged' })).status === 401);
|
||||
|
||||
const badLogin = await req('/api/admin/login', { method: 'POST', body: { code: '000000' } });
|
||||
check('错误验证码登录 401', badLogin.status === 401 && badLogin.data.error === 'invalid-code', `失败计数 ${badLogin.data.fails}`);
|
||||
const login = await req('/api/admin/login', { method: 'POST', body: { code: c0 } });
|
||||
check('正确验证码登录 200', login.status === 200, `方式 ${login.data.via}`);
|
||||
const setCookie = login.cookie ?? '';
|
||||
check('会话 cookie 为 HttpOnly', /HttpOnly/i.test(setCookie), setCookie.slice(0, 60) + '…');
|
||||
check('会话 cookie 为 SameSite=Strict', /SameSite=Strict/i.test(setCookie), '');
|
||||
check('会话 cookie 的 Path 覆盖接口路径', /Path=\//i.test(setCookie), /Path=\/admin/.test(setCookie) ? '仍是 /admin（接口收不到）' : 'Path=/');
|
||||
const sid = /shiroko_admin=([^;]+)/.exec(setCookie)?.[1];
|
||||
check('同码不能重放', (await req('/api/admin/login', { method: 'POST', body: { code: c0 } })).data.error === 'replayed');
|
||||
|
||||
const ov = await req('/api/admin/overview', { cookie: `shiroko_admin=${sid}` });
|
||||
check('带会话可读概览', ov.status === 200 && typeof ov.data.stats?.total === 'number', `目标 ${ov.data.stats?.total} 个`);
|
||||
check('概览含 2FA 状态但不泄露 secret', Boolean(ov.data.twofa) && !JSON.stringify(ov.data.twofa).includes('secret'), '');
|
||||
|
||||
// 管理写操作：只落私有层
|
||||
const pubBefore = fs.readFileSync(path.join(tmp, 'monitors.json'), 'utf8');
|
||||
const mw = await req('/api/admin/maintenance', { cookie: `shiroko_admin=${sid}`, method: 'POST', body: { from: '2030-01-01T00:00:00Z', to: '2030-01-01T01:00:00Z', note: '验证窗口' } });
|
||||
check('新增维护窗口 200', mw.status === 200 && mw.data.entry.note === '验证窗口', '');
|
||||
check('维护窗口落在私有配置里', JSON.parse(fs.readFileSync(localCfg, 'utf8')).settings?.maintenance?.length === 1, 'local.json');
|
||||
check('公开配置未被改动', fs.readFileSync(path.join(tmp, 'monitors.json'), 'utf8') === pubBefore, '');
|
||||
check('无效时间窗口被拒 400', (await req('/api/admin/maintenance', { cookie: `shiroko_admin=${sid}`, method: 'POST', body: { from: '2030-01-02T00:00:00Z', to: '2030-01-01T00:00:00Z' } })).status === 400);
|
||||
check('非法 probeScope 被拒 400', (await req('/api/admin/probe-scope', { cookie: `shiroko_admin=${sid}`, method: 'POST', body: { probeScope: 'evil' } })).status === 400);
|
||||
const scope = await req('/api/admin/probe-scope', { cookie: `shiroko_admin=${sid}`, method: 'POST', body: { probeScope: 'all' } });
|
||||
check('切换探测范围 200', scope.status === 200, scope.data.probeScope);
|
||||
check('无会话时切换范围 401', (await req('/api/admin/probe-scope', { method: 'POST', body: { probeScope: 'all' } })).status === 401);
|
||||
check('未知管理接口 404', (await req('/api/admin/nope', { cookie: `shiroko_admin=${sid}` })).status === 404);
|
||||
|
||||
// 删除维护窗口
|
||||
check('删除维护窗口 200', (await req('/api/admin/maintenance', { cookie: `shiroko_admin=${sid}`, method: 'DELETE', body: { index: 0 } })).status === 200);
|
||||
check('删除后窗口为空', (JSON.parse(fs.readFileSync(localCfg, 'utf8')).settings?.maintenance ?? []).length === 0);
|
||||
check('删除越界序号被拒 400', (await req('/api/admin/maintenance', { cookie: `shiroko_admin=${sid}`, method: 'DELETE', body: { index: 99 } })).status === 400);
|
||||
|
||||
// 登出
|
||||
check('登出 200', (await req('/api/admin/logout', { cookie: `shiroko_admin=${sid}`, method: 'POST' })).status === 200);
|
||||
check('登出后会话失效', (await req('/api/admin/overview', { cookie: `shiroko_admin=${sid}` })).status === 401);
|
||||
|
||||
// 超大请求体
|
||||
const big = await req('/api/admin/login', { method: 'POST', body: { code: 'x'.repeat(200000) } });
|
||||
check('超大请求体返回 413（而不是断开连接）', big.status === 413 && big.data?.error === 'body-too-large', `HTTP ${big.status}`);
|
||||
check('超大请求后服务仍存活', (await req('/api/admin/status')).status === 200, '');
|
||||
const badJson = await fetch(`http://localhost:${PORT}/api/admin/login`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{not json' });
|
||||
check('非法 JSON 返回 400', badJson.status === 400, `HTTP ${badJson.status}`);
|
||||
});
|
||||
|
||||
// 未设置 setup key 时绑定应关闭
|
||||
group('[C2] 未设置 SHIROKO_ADMIN_SETUP_KEY 时绑定关闭');
|
||||
await withServer({ setupKey: '' }, async () => {
|
||||
const st = await req('/api/admin/status');
|
||||
check('状态接口声明未配置绑定口令', st.data.setupKeyConfigured === false, '');
|
||||
const r = await req('/api/admin/2fa/setup', { method: 'POST', body: { key: '' } });
|
||||
check('绑定接口返回 503（管理端未开放）', r.status === 503, `HTTP ${r.status}`);
|
||||
});
|
||||
|
||||
/* ============ [D] 页面 ============ */
|
||||
group('[D] 管理页面：未绑定只见绑定流程，绑定后必须过 2FA');
|
||||
const browser = await chromium.launch({ executablePath: CHROME, args: ['--no-sandbox'] });
|
||||
await withServer({}, async () => {
|
||||
const page = await browser.newPage({ viewport: { width: 1200, height: 900 } });
|
||||
const errors = [];
|
||||
page.on('pageerror', (e) => errors.push(e.message));
|
||||
await page.goto(`http://localhost:${PORT}/admin`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(700);
|
||||
check('/admin 页面可访问且是绑定流程', await page.isVisible('#bind-panel'), '仅显示绑定面板');
|
||||
check('未绑定时不出现管理面板', !(await page.isVisible('#console-panel')));
|
||||
check('页面 noindex（不被搜索引擎收录）', (await page.getAttribute('meta[name="robots"]', 'content'))?.includes('noindex'), '');
|
||||
|
||||
await page.fill('#setup-key', SETUP_KEY);
|
||||
await page.click('#setup-start');
|
||||
await page.waitForSelector('#secret-text', { state: 'visible', timeout: 10000 });
|
||||
const shownSecret = (await page.textContent('#secret-text')).replace(/\s/g, '');
|
||||
check('页面展示 Base32 密钥并分组', shownSecret.length === 32, shownSecret.slice(0, 8) + '…');
|
||||
const qrInk = await page.evaluate(() => {
|
||||
const c = document.getElementById('qr');
|
||||
const d = c.getContext('2d').getImageData(0, 0, c.width, c.height).data;
|
||||
let dark = 0;
|
||||
for (let i = 0; i < d.length; i += 4) if (d[i] < 128) dark++;
|
||||
return dark / (d.length / 4);
|
||||
});
|
||||
check('二维码已渲染（非空白）', qrInk > 0.3 && qrInk < 0.6, `${(qrInk * 100).toFixed(1)}% 黑点`);
|
||||
|
||||
await page.fill('#confirm-code', totp(base32Decode(shownSecret)));
|
||||
await page.click('#confirm-btn');
|
||||
await page.waitForSelector('#recovery-list code', { timeout: 10000 });
|
||||
const codes = await page.$$eval('#recovery-list code', (els) => els.map((e) => e.textContent));
|
||||
check('绑定完成展示 10 枚恢复码', codes.length === 10, codes[0]);
|
||||
check('确认绑定前不展示管理面板', !(await page.isVisible('#console-panel')));
|
||||
|
||||
await page.click('#recovery-done');
|
||||
await page.waitForSelector('#console-panel', { state: 'visible', timeout: 15000 });
|
||||
check('绑定完成后凭本次 2FA 直接进入管理界面', await page.isVisible('#console-panel'));
|
||||
const stats = (await page.textContent('#admin-stats')).replace(/\s+/g, ' ');
|
||||
check('管理界面渲染运行统计', /\d+监控数/.test(stats), stats.slice(0, 60));
|
||||
check('管理界面列出监控目标', (await page.$$('#monitor-list tr')).length > 0, `${(await page.$$('#monitor-list tr')).length} 个`);
|
||||
check('管理界面展示 2FA 摘要（恢复码余量）', /剩余恢复码\s*10\s*枚/.test((await page.textContent('#twofa-summary')).replace(/\s+/g, ' ')), '');
|
||||
|
||||
// 管理操作
|
||||
await page.click('#mw-add');
|
||||
await page.waitForTimeout(800);
|
||||
check('可新增维护窗口', (await page.$$('#mw-list .mw-item')).length === 1, '');
|
||||
await page.selectOption('#probe-scope', 'all');
|
||||
await page.waitForTimeout(800);
|
||||
check('可切换探测范围', /已改为 all/.test(await page.textContent('#action-msg')), '');
|
||||
await page.selectOption('#data-filter', 'both');
|
||||
await page.waitForTimeout(800);
|
||||
check('可切换展示口径', /已改为 both/.test(await page.textContent('#action-msg')), '');
|
||||
|
||||
// 会话持久性 + 登出
|
||||
await page.reload({ waitUntil: 'domcontentloaded' });
|
||||
await page.waitForTimeout(900);
|
||||
check('刷新后仍处于登录态（cookie 有效）', await page.isVisible('#console-panel'));
|
||||
await page.click('#logout-btn');
|
||||
await page.waitForTimeout(1200);
|
||||
check('登出后回到 2FA 登录页', await page.isVisible('#login-panel'));
|
||||
check('登出后看不到管理面板', !(await page.isVisible('#console-panel')));
|
||||
|
||||
// 错误验证码
|
||||
await page.fill('#login-code', '000000');
|
||||
await page.click('#login-btn');
|
||||
await page.waitForTimeout(600);
|
||||
check('错误验证码给出可读提示', /验证码不正确/.test(await page.textContent('#login-msg')), (await page.textContent('#login-msg')).trim());
|
||||
|
||||
check('管理页面无 JS 错误', errors.length === 0, errors.join(' | ') || '无');
|
||||
await page.close();
|
||||
});
|
||||
await browser.close();
|
||||
|
||||
fs.rmSync(btmp, { recursive: true, force: true });
|
||||
|
||||
const failed = results.filter((x) => !x.pass);
|
||||
console.log(`\n结果：${results.length - failed.length}/${results.length} 通过`);
|
||||
if (failed.length) {
|
||||
console.log('失败项：');
|
||||
for (const f of failed) console.log(` ✗ ${f.name}`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error('FAILED:', err.stack || err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
/**
|
||||
* shiroko-monitor 布局回归：任何宽度、任何内容都不应出现横向滚动
|
||||
*
|
||||
* 硬要求（用户明确）：不允许出现「需要滚动才能看全」的情况。
|
||||
* 因此这里用**极端内容**（超长名称 / 超长 URL / 6 个分组 / 40 个目标）+ 13 种视口 × 2 种视图
|
||||
* 做扫描，断言页面与表格容器都不能有横向溢出。
|
||||
*
|
||||
* 为什么要用极端内容：常规内容下很多撑破问题不会暴露（实测卡片视图在 320px 下
|
||||
* 曾因 grid 的 min-width:auto 被长 URL 撑到 801px，溢出 495px）。
|
||||
*
|
||||
* 用法：node scripts/verify-layout.cjs
|
||||
*/
|
||||
const fs = require('node:fs');
|
||||
const http = require('node:http');
|
||||
const os = require('node:os');
|
||||
const path = require('node:path');
|
||||
const { spawn } = require('node:child_process');
|
||||
const { chromium } = require('playwright');
|
||||
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const PROBER = path.join(ROOT, 'prober', 'node', 'index.js');
|
||||
const CHROME = 'C:/Program Files/Google/Chrome/Application/chrome.exe';
|
||||
const PORT = 8893;
|
||||
const WIDTHS = [320, 360, 390, 480, 600, 768, 820, 900, 1024, 1280, 1440, 1920, 2560];
|
||||
|
||||
const results = [];
|
||||
const check = (name, pass, detail) => {
|
||||
results.push({ name, pass });
|
||||
console.log(`${pass ? ' ✓' : ' ✗'} ${name}${detail ? ` — ${detail}` : ''}`);
|
||||
};
|
||||
const MIME = { '.html': 'text/html;charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.webp': 'image/webp', '.png': 'image/png' };
|
||||
|
||||
// 极端配置：长名称 + 长 URL + 多分组 + 多目标
|
||||
function hostileConfig() {
|
||||
const groups = ['超长分组名称测试一二三四五', '公共服务', '基础设施与内网设备', 'UptimeRobot', '外部依赖', '测试用极端分组名'];
|
||||
const monitors = [];
|
||||
for (let i = 0; i < 40; i++) {
|
||||
monitors.push({
|
||||
id: `hostile-${i}`,
|
||||
name: i % 3 === 0 ? `这是一个非常非常长的监控目标名称用于测试极端情况下的布局表现与截断行为-${i + 1}` : `目标-${i + 1}`,
|
||||
group: groups[i % groups.length],
|
||||
type: 'http',
|
||||
url: i % 2 === 0 ? `https://very-long-subdomain-name-for-testing-layout.example.com/very/long/path/segment?with=query&and=more&even=more&idx=${i}` : `https://s${i}.example.com`,
|
||||
expectStatus: [200],
|
||||
interval: 60,
|
||||
timeout: 5,
|
||||
});
|
||||
}
|
||||
return monitors;
|
||||
}
|
||||
|
||||
function runOnce(args) {
|
||||
return new Promise((resolve) => {
|
||||
const child = spawn(process.execPath, [PROBER, ...args], { stdio: 'ignore' });
|
||||
child.on('exit', (code) => resolve(code));
|
||||
});
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-layout-'));
|
||||
const cfg = path.join(tmp, 'monitors.json');
|
||||
fs.cpSync(path.join(ROOT, 'public'), tmp, { recursive: true });
|
||||
const base = JSON.parse(fs.readFileSync(cfg, 'utf8'));
|
||||
base.settings.dataFilter = 'config';
|
||||
base.monitors = hostileConfig();
|
||||
fs.writeFileSync(cfg, `${JSON.stringify(base, null, 2)}\n`);
|
||||
await runOnce(['--once', '--demo', `--config=${cfg}`, `--local-config=${path.join(tmp, 'none.json')}`, `--out=${path.join(tmp, 'status.json')}`]);
|
||||
console.log(`极端内容：${base.monitors.length} 个目标 / 6 个分组，视口 ${WIDTHS.length} 种 × 2 视图\n`);
|
||||
|
||||
const server = http.createServer((req, res) => {
|
||||
const rel = decodeURIComponent(req.url.split('?')[0]);
|
||||
const file = path.join(tmp, rel === '/' ? 'index.html' : rel);
|
||||
fs.readFile(file, (err, data) => {
|
||||
if (err) {
|
||||
res.writeHead(404);
|
||||
res.end();
|
||||
return;
|
||||
}
|
||||
res.writeHead(200, { 'content-type': MIME[path.extname(file)] ?? 'application/octet-stream' });
|
||||
res.end(data);
|
||||
});
|
||||
});
|
||||
await new Promise((r) => server.listen(PORT, r));
|
||||
|
||||
const browser = await chromium.launch({ executablePath: CHROME, args: ['--no-sandbox'] });
|
||||
let worst = null;
|
||||
try {
|
||||
for (const view of ['table', 'cards']) {
|
||||
for (const width of WIDTHS) {
|
||||
const page = await browser.newPage({ viewport: { width, height: 900 } });
|
||||
await page.goto(`http://localhost:${PORT}/?source=static&view=${view}`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('.card, table.monitor-table', { timeout: 20000 });
|
||||
await page.waitForTimeout(400);
|
||||
const r = await page.evaluate(() => ({
|
||||
page: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
wrap: (() => { const w = document.querySelector('.table-wrap'); return w ? w.scrollWidth - w.clientWidth : 0; })(),
|
||||
grid: (() => { const g = document.querySelector('.grid'); return g ? g.scrollWidth - g.clientWidth : 0; })(),
|
||||
// 表格视图额外要求绝对等高：40 个目标、6 个分组、名称与 URL 长短悬殊，
|
||||
// 行高仍须只有一个取值（硬要求：每行绝对等高）
|
||||
rowHs: document.body.dataset.view === 'table'
|
||||
? [...new Set([...document.querySelectorAll('table.monitor-table tbody tr:not(.group-row)')]
|
||||
.map((tr) => Math.round(tr.getBoundingClientRect().height)))]
|
||||
: null,
|
||||
cardHs: document.body.dataset.view === 'cards'
|
||||
? [...new Set([...document.querySelectorAll('.card')].map((c) => Math.round(c.getBoundingClientRect().height)))]
|
||||
: null,
|
||||
}));
|
||||
const bad = Math.max(r.page, r.wrap, r.grid);
|
||||
if (!worst || bad > worst.bad) worst = { bad, view, width, r };
|
||||
const extra = view === 'table'
|
||||
? (r.rowHs?.length === 1 ? `行高 ${r.rowHs[0]}px` : `行高 ${(r.rowHs ?? []).join('/')}`)
|
||||
: (r.cardHs?.length === 1 ? `卡片高 ${r.cardHs[0]}px` : `卡片高 ${(r.cardHs ?? []).join('/')}`);
|
||||
check(`${String(width).padStart(4)}px ${view} 无横向溢出且等高`, bad <= 0 && ((view === 'table' ? r.rowHs : r.cardHs) ?? []).length === 1,
|
||||
`页面 ${r.page} / 表格 ${r.wrap} / 网格 ${r.grid}，${extra}`);
|
||||
await page.close();
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
await browser.close();
|
||||
server.close();
|
||||
fs.rmSync(tmp, { recursive: true, force: true });
|
||||
}
|
||||
|
||||
if (worst && worst.bad > 0) console.log(`\n最大溢出：${worst.width}px ${worst.view} → ${worst.bad}px`);
|
||||
const failed = results.filter((x) => !x.pass);
|
||||
console.log(`\n结果：${results.length - failed.length}/${results.length} 通过`);
|
||||
if (failed.length) process.exit(1);
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error('FAILED:', err.stack || err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -0,0 +1,401 @@
|
||||
/**
|
||||
* shiroko-monitor 通知与证书验证
|
||||
*
|
||||
* 覆盖：
|
||||
* A. 邮件通道（假 SMTP 服务器）：完整握手、AUTH LOGIN、多收件人、UTF-8 主题与正文、
|
||||
* 5xx 报错路径、不支持 STARTTLS 时默认拒绝明文
|
||||
* B. MeoW 通道（假 HTTP 服务器）：成功（status=200）、404 昵称未注册、429 限流、
|
||||
* 「HTTP 200 但业务 status≠200」、非 JSON 响应
|
||||
* C. 静默时段（含跨零点）与 MeoW 本地限流器
|
||||
* D. 集成：真跑探针 --once，验证去抖（连续失败 N 次才通知）、恢复通知、
|
||||
* 事件时间线落盘、维护窗口抑制告警但仍记录事件
|
||||
* E. 证书：tlsTargetOf 解析 + 真实握手（无网络则跳过，不算失败）
|
||||
*
|
||||
* 用法：node scripts/verify-notify.cjs
|
||||
*/
|
||||
const fs = require('node:fs');
|
||||
const net = require('node:net');
|
||||
const http = require('node:http');
|
||||
const os = require('node:os');
|
||||
const path = require('node:path');
|
||||
const { spawn } = require('node:child_process');
|
||||
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const PROBER = path.join(ROOT, 'prober', 'node', 'index.js');
|
||||
const LIB = path.join(ROOT, 'prober', 'node', 'lib', 'notify.js');
|
||||
const TLS_LIB = path.join(ROOT, 'prober', 'node', 'lib', 'tls-probe.js');
|
||||
const SMTP_PORT = 8895;
|
||||
const MEOW_PORT = 8896;
|
||||
const results = [];
|
||||
|
||||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
function check(name, pass, detail) {
|
||||
results.push({ name, pass });
|
||||
console.log(`${pass ? ' ✓' : ' ✗'} ${name}${detail ? ` — ${detail}` : ''}`);
|
||||
}
|
||||
|
||||
/* ---------- 假 SMTP 服务器 ---------- */
|
||||
|
||||
function startFakeSmtp() {
|
||||
const received = [];
|
||||
let failAt = null; // 'auth' | 'mail' 注入 5xx
|
||||
const server = net.createServer((socket) => {
|
||||
let buf = '';
|
||||
let stage = 'greeting'; // greeting → ehlo → auth-user → auth-pass → ready → data
|
||||
const send = (line) => socket.write(`${line}\r\n`);
|
||||
send('220 fake-smtp ready');
|
||||
socket.on('data', (chunk) => {
|
||||
buf += chunk.toString('utf8');
|
||||
if (!buf.endsWith('\r\n')) return;
|
||||
const line = buf.trim();
|
||||
buf = '';
|
||||
const cmd = line.split(/\s+/)[0].toUpperCase();
|
||||
// 不实现 TLS：EHLO 只通告 AUTH LOGIN（客户端会按 allowInsecure 决定是否明文继续）
|
||||
if (stage === 'greeting' && cmd === 'EHLO') {
|
||||
// SMTP 多行响应：最后一行必须是「250 + 空格」才算终止（客户端按此判定）
|
||||
send('250-fake-smtp');
|
||||
send('250-AUTH LOGIN PLAIN');
|
||||
send('250 OK');
|
||||
stage = 'ehlo';
|
||||
} else if (cmd === 'AUTH' && line.toUpperCase().startsWith('AUTH LOGIN')) {
|
||||
if (failAt === 'auth') return send('535 认证失败');
|
||||
send('334 VXNlcm5hbWU6');
|
||||
stage = 'auth-user';
|
||||
} else if (stage === 'auth-user') {
|
||||
send('334 UGFzc3dvcmQ6');
|
||||
stage = 'auth-pass';
|
||||
} else if (stage === 'auth-pass') {
|
||||
send('235 认证成功');
|
||||
stage = 'ready';
|
||||
} else if (cmd === 'MAIL') {
|
||||
if (failAt === 'mail') return send('550 发件人被拒');
|
||||
received.push({ mailFrom: /<([^>]*)>/.exec(line)?.[1] ?? '' });
|
||||
send('250 ok');
|
||||
} else if (cmd === 'RCPT') {
|
||||
const addr = /<([^>]*)>/.exec(line)?.[1] ?? '';
|
||||
if (!received.length) received.push({});
|
||||
received.at(-1).rcpt = [...(received.at(-1).rcpt ?? []), addr];
|
||||
send('250 ok');
|
||||
} else if (cmd === 'DATA') {
|
||||
send('354 end with <CRLF>.<CRLF>');
|
||||
stage = 'data';
|
||||
} else if (stage === 'data') {
|
||||
received.at(-1).raw = line;
|
||||
stage = 'done';
|
||||
send('250 queued');
|
||||
} else if (cmd === 'QUIT') {
|
||||
send('221 bye');
|
||||
socket.end();
|
||||
} else {
|
||||
send('250 ok');
|
||||
}
|
||||
});
|
||||
socket.on('error', () => {});
|
||||
});
|
||||
return new Promise((resolve) => server.listen(SMTP_PORT, '127.0.0.1', () => resolve({
|
||||
received,
|
||||
failAt: (v) => { failAt = v; },
|
||||
close: () => new Promise((r) => server.close(r)),
|
||||
})));
|
||||
}
|
||||
|
||||
/* ---------- 假 MeoW 服务器 ---------- */
|
||||
|
||||
function startFakeMeoW() {
|
||||
const received = [];
|
||||
const server = http.createServer((req, res) => {
|
||||
const nickname = decodeURIComponent(req.url.split('?')[0].replace(/^\//, ''));
|
||||
let body = '';
|
||||
req.on('data', (c) => (body += c));
|
||||
req.on('end', () => {
|
||||
received.push({ nickname, url: req.url, body });
|
||||
const json = (status, message) => {
|
||||
res.writeHead(200, { 'content-type': 'application/json' });
|
||||
res.end(JSON.stringify({ status, message }));
|
||||
};
|
||||
// 注意：MeoW 的 HTTP 状态恒为 200，业务结果只在 body 里
|
||||
if (nickname === 'ok') return json(200, '推送成功');
|
||||
if (nickname === 'limited') return json(429, '请求过于频繁');
|
||||
if (nickname === 'missing') return json(404, '昵称未注册');
|
||||
res.writeHead(200, { 'content-type': 'text/html' });
|
||||
res.end('<html>not json</html>');
|
||||
});
|
||||
});
|
||||
return new Promise((resolve) => server.listen(MEOW_PORT, '127.0.0.1', () => resolve({
|
||||
received,
|
||||
close: () => new Promise((r) => server.close(r)),
|
||||
})));
|
||||
}
|
||||
|
||||
/* ---------- 探针进程 ---------- */
|
||||
|
||||
function runOnce(args) {
|
||||
return new Promise((resolve) => {
|
||||
const child = spawn(process.execPath, [PROBER, ...args], { stdio: ['ignore', 'pipe', 'pipe'] });
|
||||
let out = '';
|
||||
child.stdout.on('data', (d) => (out += d));
|
||||
child.stderr.on('data', (d) => (out += d));
|
||||
child.on('exit', (code) => resolve({ code, out }));
|
||||
});
|
||||
}
|
||||
|
||||
function writeConfig(dir, overrides = {}) {
|
||||
const cfg = {
|
||||
settings: {
|
||||
title: 'notify-test',
|
||||
dataFilter: 'config',
|
||||
refreshInterval: 60,
|
||||
notify: {
|
||||
enabled: true,
|
||||
failureThreshold: 2,
|
||||
recoveryNotify: true,
|
||||
channels: {
|
||||
email: {
|
||||
enabled: true, host: '127.0.0.1', port: SMTP_PORT, secure: false, allowInsecure: true,
|
||||
user: '[email protected]', pass: 'secret', from: '[email protected]',
|
||||
to: ['[email protected]', '[email protected]'],
|
||||
},
|
||||
meow: { enabled: true, nickname: 'ok', baseUrl: `http://127.0.0.1:${MEOW_PORT}` },
|
||||
},
|
||||
},
|
||||
},
|
||||
monitors: [
|
||||
// 拒绝连接 → 离线（127.0.0.1:1 一定连不上）
|
||||
{ id: 'down-tcp', name: '必然离线的 TCP', group: '测试', type: 'tcp', host: '127.0.0.1', port: 1, interval: 60, timeout: 3 },
|
||||
// data: URL 一定成功 → 在线
|
||||
{ id: 'up-http', name: '必然在线的 HTTP', group: '测试', type: 'http', url: 'data:text/plain,ok', expectStatus: [200], interval: 60, timeout: 5 },
|
||||
],
|
||||
...overrides,
|
||||
};
|
||||
const file = path.join(dir, 'monitors.json');
|
||||
fs.writeFileSync(file, `${JSON.stringify(cfg, null, 2)}\n`);
|
||||
return { file, cfg };
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const { sendEmail, sendMeoW, sendTestNotifications, notifyAll, parseQuietHours, inQuietHours, createMeoWLimiter } = await import(`file://${LIB.replace(/\\/g, '/')}`);
|
||||
const { probeCertificate, tlsTargetOf } = await import(`file://${TLS_LIB.replace(/\\/g, '/')}`);
|
||||
const smtp = await startFakeSmtp();
|
||||
const meow = await startFakeMeoW();
|
||||
|
||||
try {
|
||||
/* ---------- A. 邮件通道 ---------- */
|
||||
console.log('\n[A] 邮件通道（假 SMTP）');
|
||||
const emailCfg = {
|
||||
enabled: true, host: '127.0.0.1', port: SMTP_PORT, secure: false, allowInsecure: true,
|
||||
user: '[email protected]', pass: 's3cret!', from: '[email protected]', to: ['[email protected]', '[email protected]'],
|
||||
};
|
||||
await sendEmail(emailCfg, { subject: '【故障】测试目标 连接失败', text: '第一行\n第二行：中文内容' });
|
||||
const mail = smtp.received.at(-1);
|
||||
check('邮件已发出', Boolean(mail?.raw), '假服务器收到 DATA');
|
||||
check('发件人与收件人正确', mail?.mailFrom === '[email protected]' && mail?.rcpt?.join(',') === '[email protected],[email protected]', `${mail?.mailFrom} → ${mail?.rcpt?.join(',')}`);
|
||||
const headers = (mail?.raw ?? '').split('\r\n\r\n')[0] ?? '';
|
||||
const bodyB64 = (mail?.raw ?? '').split('\r\n\r\n')[1] ?? '';
|
||||
check('中文主题按 RFC2047 编码', /^Subject: =\?UTF-8\?B\?/m.test(headers), headers.split('\r\n').find((l) => l.startsWith('Subject:'))?.slice(0, 46) + '…');
|
||||
check('正文 base64 且可解码出中文', Buffer.from(bodyB64.replace(/\r\n/g, ''), 'base64').toString('utf8').includes('第二行：中文内容'), '');
|
||||
check('声明 UTF-8 字符集', /Content-Type: text\/plain; charset=UTF-8/.test(headers), '');
|
||||
|
||||
smtp.failAt('mail');
|
||||
let err = null;
|
||||
try { await sendEmail(emailCfg, { subject: 'x', text: 'y' }); } catch (e) { err = e; }
|
||||
check('SMTP 5xx 被识别为失败', /发件人被拒/.test(err?.message ?? ''), err?.message ?? '未抛错');
|
||||
smtp.failAt(null); // 复位注入的故障，避免污染后续用例
|
||||
|
||||
let err2 = null;
|
||||
try { await sendEmail({ ...emailCfg, host: '127.0.0.1', port: 8999 }, { subject: 'x', text: 'y' }); } catch (e) { err2 = e; }
|
||||
check('连不上 SMTP 时报错可读', /ECONNREFUSED|超时|连接/.test(err2?.message ?? ''), err2?.message?.slice(0, 60) ?? '未抛错');
|
||||
|
||||
let err3 = null;
|
||||
try { await sendEmail({ ...emailCfg, allowInsecure: false }, { subject: 'x', text: 'y' }); } catch (e) { err3 = e; }
|
||||
check('服务器无 STARTTLS 时默认拒绝明文发信', /STARTTLS/.test(err3?.message ?? ''), err3?.message?.slice(0, 70) ?? '未抛错');
|
||||
|
||||
/* ---------- B. MeoW 通道 ---------- */
|
||||
console.log('\n[B] MeoW 通道（假 HTTP）');
|
||||
const meowCfg = { nickname: 'ok', baseUrl: `http://127.0.0.1:${MEOW_PORT}` };
|
||||
const r1 = await sendMeoW(meowCfg, { title: '标题', text: '正文' });
|
||||
check('status=200 判定为成功', r1.ok === true, r1.detail ?? '');
|
||||
const req1 = meow.received.at(-1);
|
||||
check('昵称走路径、msgType 不作为 body', req1.nickname === 'ok' && !req1.body.includes('msgType'), `POST /${req1.nickname}${req1.url.includes('?') ? req1.url.slice(req1.url.indexOf('?')) : ''}`);
|
||||
check('JSON body 含 title 与 msg', (() => { const b = JSON.parse(req1.body); return b.title === '标题' && b.msg === '正文'; })(), '');
|
||||
|
||||
for (const [nick, label] of [['limited', '429 限流'], ['missing', '404 昵称未注册']]) {
|
||||
let e = null;
|
||||
try { await sendMeoW({ ...meowCfg, nickname: nick }, { title: 't', text: 'm' }); } catch (err3) { e = err3; }
|
||||
check(`${label} 被识别为失败`, Boolean(e), e?.message?.slice(0, 70) ?? '未抛错');
|
||||
}
|
||||
|
||||
let e4 = null;
|
||||
try { await sendMeoW({ ...meowCfg, nickname: 'broken' }, { title: 't', text: 'm' }); } catch (err4) { e4 = err4; }
|
||||
check('非 JSON 响应被识别为失败', /不是 JSON/.test(e4?.message ?? ''), e4?.message?.slice(0, 50) ?? '');
|
||||
|
||||
let e5 = null;
|
||||
try { await sendMeoW({ ...meowCfg, nickname: 'a/b' }, { title: 't', text: 'm' }); } catch (err5) { e5 = err5; }
|
||||
check('昵称含斜杠被拒绝', /斜杠/.test(e5?.message ?? ''), e5?.message ?? '');
|
||||
|
||||
/* ---------- C. 静默时段与限流器 ---------- */
|
||||
console.log('\n[C] 静默时段与限流器');
|
||||
check('静默时段解析', parseQuietHours('23:00-07:00').from === 23 * 60, '');
|
||||
check('跨零点判定（23:30 在静默中）', inQuietHours('23:00-07:00', new Date('2026-10-13T23:30:00')) === true, '');
|
||||
check('跨零点判定（07:30 不在静默中）', inQuietHours('23:00-07:00', new Date('2026-10-13T07:30:00')) === false, '');
|
||||
check('同时段判定（09:00-17:00 内）', inQuietHours('09:00-17:00', new Date('2026-10-13T12:00:00')) === true, '');
|
||||
|
||||
const limiter = createMeoWLimiter(() => 0);
|
||||
check('限流器首次放行', limiter.allow() === true, '');
|
||||
limiter.mark();
|
||||
check('限流器 3 秒内拦截', limiter.allow() === false, '');
|
||||
|
||||
const quiet = await notifyAll(
|
||||
{ enabled: true, quietHours: '23:00-07:00', channels: { meow: { enabled: true, nickname: 'ok', baseUrl: `http://127.0.0.1:${MEOW_PORT}` } } },
|
||||
{ subject: '静默测试', text: '不应发送' },
|
||||
{ logger: console, fetchImpl: fetch },
|
||||
);
|
||||
const before = meow.received.length;
|
||||
const now = new Date();
|
||||
const quietCfg = { enabled: true, quietHours: `${String(now.getHours()).padStart(2, '0')}:00-${String(now.getHours()).padStart(2, '0')}:59`, channels: { meow: { enabled: true, nickname: 'ok', baseUrl: `http://127.0.0.1:${MEOW_PORT}` } } };
|
||||
const q = await notifyAll(quietCfg, { subject: '静默测试', text: '不应发送' }, { logger: console });
|
||||
check('静默时段内不发送且标记 suppressed', q.suppressed === true && meow.received.length === before, `received ${before} → ${meow.received.length}`);
|
||||
|
||||
/* ---------- D. 集成：真探针 ---------- */
|
||||
console.log('\n[D] 集成（探针 --once × 多轮）');
|
||||
const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-notify-'));
|
||||
fs.cpSync(path.join(ROOT, 'public'), tmp, { recursive: true });
|
||||
const { file } = writeConfig(tmp);
|
||||
const dataDir = path.join(tmp, 'data');
|
||||
const outFile = path.join(tmp, 'status.json');
|
||||
const common = [`--config=${file}`, `--local-config=${file}`, `--out=${outFile}`, `--data-dir=${dataDir}`];
|
||||
|
||||
const beforeMail = smtp.received.length;
|
||||
const beforeMeow = meow.received.length;
|
||||
|
||||
const run1 = await runOnce(['--once', ...common]);
|
||||
check('第一轮探测成功', run1.code === 0, run1.out.split('\n').find((l) => l.includes('[once]')) ?? '');
|
||||
const mailAfter1 = smtp.received.length - beforeMail;
|
||||
const meowAfter1 = meow.received.length - beforeMeow;
|
||||
check('离线目标连续 2 次失败才告警：第一轮不通知', mailAfter1 === 0 && meowAfter1 === 0, `邮件 ${mailAfter1} / MeoW ${meowAfter1}`);
|
||||
|
||||
// 事件文件只在有事件时才落盘，因此要容忍不存在
|
||||
const readEvents = (dir) => {
|
||||
const f = path.join(dir, 'events.json');
|
||||
return fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : [];
|
||||
};
|
||||
const events1 = readEvents(dataDir);
|
||||
check('第一轮未记录事件（去抖中）', events1.length === 0, `events=${events1.length}`);
|
||||
|
||||
await runOnce(['--once', ...common]);
|
||||
const mailAfter2 = smtp.received.length - beforeMail;
|
||||
const meowAfter2 = meow.received.length - beforeMeow;
|
||||
check('第二轮达到阈值：邮件与 MeoW 各 1 条', mailAfter2 === 1 && meowAfter2 === 1, `邮件 ${mailAfter2} / MeoW ${meowAfter2}`);
|
||||
const decodeMail = (raw) => {
|
||||
const [head, body = ''] = raw.split('\r\n\r\n');
|
||||
const subject = /^Subject: =\?UTF-8\?B\?(.*)\?=/m.exec(head);
|
||||
return {
|
||||
subject: subject ? Buffer.from(subject[1], 'base64').toString('utf8') : (/^Subject: (.*)$/m.exec(head)?.[1] ?? ''),
|
||||
body: Buffer.from(body.replace(/\r\n/g, ''), 'base64').toString('utf8'),
|
||||
};
|
||||
};
|
||||
const downMail = smtp.received.at(-1);
|
||||
const downDecoded = decodeMail(downMail.raw);
|
||||
check('告警邮件含目标名称与详情', /必然离线的 TCP/.test(downDecoded.body) && /【故障】/.test(downDecoded.subject), `主题「${downDecoded.subject}」正文 ${downDecoded.body.length} 字符`);
|
||||
const events2 = readEvents(dataDir);
|
||||
check('事件时间线记录 down', events2.some((e) => e.type === 'down' && e.id === 'down-tcp'), JSON.stringify(events2.map((e) => e.type)));
|
||||
// 去抖计数必须与「探测轮次」绑定：评估每秒跑一次，不能每秒累加
|
||||
const ns2 = JSON.parse(fs.readFileSync(path.join(dataDir, 'notify-state.json'), 'utf8'));
|
||||
check('连续失败计数=探测轮数（不被每秒评估放大）', ns2.monitors['down-tcp'].failStreak === 2, `failStreak=${ns2.monitors['down-tcp'].failStreak}，期望 2`);
|
||||
|
||||
await runOnce(['--once', ...common]);
|
||||
const mailAfter3 = smtp.received.length - beforeMail;
|
||||
check('第三轮不重复告警（去抖状态已持久化）', mailAfter3 === 1, `邮件累计 ${mailAfter3}`);
|
||||
|
||||
// 恢复：把离线目标换成 data: URL，下一轮应发「恢复」
|
||||
const upCfg = JSON.parse(fs.readFileSync(file, 'utf8'));
|
||||
upCfg.monitors = upCfg.monitors.map((m) => (m.id === 'down-tcp' ? { ...m, type: 'http', url: 'data:text/plain,ok', expectStatus: [200] } : m));
|
||||
delete upCfg.monitors.find((m) => m.id === 'down-tcp').host;
|
||||
delete upCfg.monitors.find((m) => m.id === 'down-tcp').port;
|
||||
fs.writeFileSync(file, `${JSON.stringify(upCfg, null, 2)}\n`);
|
||||
await runOnce(['--once', ...common]);
|
||||
const recovery = smtp.received.at(-1);
|
||||
const recoveryDecoded = decodeMail(recovery.raw);
|
||||
check('恢复时发送「恢复」通知', /【恢复】/.test(recoveryDecoded.subject) && /恢复时间/.test(recoveryDecoded.body), `主题「${recoveryDecoded.subject}」`);
|
||||
const events3 = readEvents(dataDir);
|
||||
check('事件时间线记录 up（恢复）', events3.some((e) => e.type === 'up' && e.id === 'down-tcp'), JSON.stringify(events3.map((e) => e.type)));
|
||||
|
||||
/* ---------- D2. 维护窗口 ---------- */
|
||||
console.log('\n[D2] 维护窗口抑制告警');
|
||||
const tmp2 = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-maint-'));
|
||||
fs.cpSync(path.join(ROOT, 'public'), tmp2, { recursive: true });
|
||||
const { file: file2 } = writeConfig(tmp2);
|
||||
const cfg2 = JSON.parse(fs.readFileSync(file2, 'utf8'));
|
||||
cfg2.settings.maintenance = [{ from: new Date(Date.now() - 3600_000).toISOString(), to: new Date(Date.now() + 3600_000).toISOString(), note: '计划维护' }];
|
||||
fs.writeFileSync(file2, `${JSON.stringify(cfg2, null, 2)}\n`);
|
||||
const dataDir2 = path.join(tmp2, 'data');
|
||||
const outFile2 = path.join(tmp2, 'status.json');
|
||||
const beforeMail2 = smtp.received.length;
|
||||
await runOnce(['--once', `--config=${file2}`, `--local-config=${file2}`, `--out=${outFile2}`, `--data-dir=${dataDir2}`]);
|
||||
await runOnce(['--once', `--config=${file2}`, `--local-config=${file2}`, `--out=${outFile2}`, `--data-dir=${dataDir2}`]);
|
||||
check('维护窗口内不发告警', smtp.received.length === beforeMail2, `新增 ${smtp.received.length - beforeMail2} 封`);
|
||||
const events4 = readEvents(dataDir2);
|
||||
check('维护窗口内仍记录事件（标记 maintenance）', events4.some((e) => e.type === 'down' && e.maintenance === true), JSON.stringify(events4.map((e) => `${e.type}:${e.maintenance}`)));
|
||||
const snap2 = JSON.parse(fs.readFileSync(outFile2, 'utf8'));
|
||||
check('快照中目标带维护标记', snap2.monitors['down-tcp'].maintenance?.note === '计划维护', '');
|
||||
|
||||
/* ---------- D3. 探测范围可选（probeScope） ---------- */
|
||||
console.log('\n[D3] 探测范围（probeScope）');
|
||||
const tmp3 = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-scope-'));
|
||||
fs.cpSync(path.join(ROOT, 'public'), tmp3, { recursive: true });
|
||||
const { file: file3 } = writeConfig(tmp3);
|
||||
const scopeCfg = JSON.parse(fs.readFileSync(file3, 'utf8'));
|
||||
scopeCfg.settings.dataFilter = 'uptimerobot'; // 只展示 UR 口径
|
||||
scopeCfg.settings.uptimeRobot = { enabled: false }; // 本测试不连 UR，只看本地探测是否发生
|
||||
scopeCfg.monitors.push({ id: 'local-must-not-run', name: '不该被探测的本地目标', group: '测试', type: 'tcp', host: '127.0.0.1', port: 1, interval: 60, timeout: 3 });
|
||||
fs.writeFileSync(file3, `${JSON.stringify(scopeCfg, null, 2)}\n`);
|
||||
const scopeArgs = (cfgFile, out, data) => ['--once', `--config=${cfgFile}`, `--local-config=${cfgFile}`, `--out=${out}`, `--data-dir=${data}`];
|
||||
|
||||
const outA = path.join(tmp3, 'a.json');
|
||||
const resA = await runOnce(scopeArgs(file3, outA, path.join(tmp3, 'da')));
|
||||
const snapA = JSON.parse(fs.readFileSync(outA, 'utf8'));
|
||||
check('dataFilter=uptimerobot 时探测范围自动跟随', snapA.probeScope === 'uptimerobot', `probeScope=${snapA.probeScope}`);
|
||||
check('跟随口径时不再探测本地配置目标', !/local-must-not-run/.test(resA.out), resA.out.split('\n').filter((l) => /\[up\]|\[down\]/.test(l)).join(' | ').slice(0, 80) || '本地探测日志为空');
|
||||
|
||||
// 对照：显式 probeScope=all 时应恢复本地探测（证明是「可选」而非「砍掉」）
|
||||
scopeCfg.settings.probeScope = 'all';
|
||||
fs.writeFileSync(file3, `${JSON.stringify(scopeCfg, null, 2)}\n`);
|
||||
const outB = path.join(tmp3, 'b.json');
|
||||
const resB = await runOnce(scopeArgs(file3, outB, path.join(tmp3, 'db')));
|
||||
const snapB = JSON.parse(fs.readFileSync(outB, 'utf8'));
|
||||
check('显式 probeScope=all 时恢复本地探测', snapB.probeScope === 'all' && /local-must-not-run/.test(resB.out), `probeScope=${snapB.probeScope}`);
|
||||
check('探测范围与展示口径解耦（all + uptimerobot 展示）', snapB.dataFilter === 'uptimerobot' && snapB.probeScope === 'all', `filter=${snapB.dataFilter} scope=${snapB.probeScope}`);
|
||||
|
||||
/* ---------- E. 证书 ---------- */
|
||||
console.log('\n[E] 证书');
|
||||
check('tlsTargetOf 识别 https 目标', tlsTargetOf({ type: 'http', url: 'https://www.example.com:8443/x' }).port === 8443, '');
|
||||
check('tlsTargetOf 忽略 http 目标', tlsTargetOf({ type: 'http', url: 'http://www.example.com' }) === null, '');
|
||||
check('tlsTargetOf 尊重 tls:false', tlsTargetOf({ type: 'http', url: 'https://www.example.com', tls: false }) === null, '');
|
||||
try {
|
||||
const cert = await probeCertificate({ host: 'www.example.com', timeoutMs: 8000 });
|
||||
if (cert.error) {
|
||||
console.log(` - 真实握手失败（可能无外网）：${cert.error} → 跳过`);
|
||||
} else {
|
||||
check('真实证书可取到剩余天数', Number.isFinite(cert.daysLeft) && cert.daysLeft > -1, `剩余 ${cert.daysLeft} 天，签发者 ${cert.issuer}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(` - 真实握手异常：${err.message} → 跳过`);
|
||||
}
|
||||
|
||||
/* ---------- F. 通道自检 CLI ---------- */
|
||||
console.log('\n[F] --test-notify 自检命令');
|
||||
const test = await runOnce(['--test-notify', ...common]);
|
||||
check('--test-notify 退出码为 0 且报告两渠道', test.code === 0 && /email/.test(test.out) && /meow/i.test(test.out), test.out.split('\n').slice(-4).join(' | ').slice(0, 120));
|
||||
} finally {
|
||||
await smtp.close();
|
||||
await meow.close();
|
||||
}
|
||||
|
||||
const failed = results.filter((r) => !r.pass);
|
||||
console.log(`\n结果：${results.length - failed.length}/${results.length} 通过`);
|
||||
if (failed.length) process.exit(1);
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error('FAILED:', err.stack || err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
@@ -148,6 +148,101 @@ async function main() {
|
||||
check('只读模式下面板数据接口仍可用', r5.status === 200, `status=${r5.status}`);
|
||||
srvB.kill();
|
||||
|
||||
// ---------- D2：接口不得泄露私有层密钥 ----------
|
||||
console.log('\n[D2] 配置接口的密钥泄露');
|
||||
// 私有层放一个可识别的假 key：/api/monitors 无鉴权，绝不能把它回吐给面板或访客
|
||||
const SECRET = 'urFAKE-0123456789abcdefSECRET';
|
||||
const pubCfg = path.join(TMP, 'secret-pub.json');
|
||||
const privCfg = path.join(TMP, 'secret-priv.json');
|
||||
fs.writeFileSync(pubCfg, JSON.stringify({ settings: { uptimeRobot: { enabled: false, apiKey: '' } }, monitors: [] }, null, 2));
|
||||
fs.writeFileSync(privCfg, JSON.stringify({ settings: { uptimeRobot: { enabled: true, apiKey: SECRET } } }, null, 2));
|
||||
const srvC = startProber([`--config=${pubCfg}`, `--local-config=${privCfg}`, `--out=${path.join(TMP, 'c.json')}`], { PORT: '8896' });
|
||||
await waitForHttp('http://127.0.0.1:8896/api/status');
|
||||
|
||||
const mResp = await fetch('http://127.0.0.1:8896/api/monitors');
|
||||
const mText = await mResp.text();
|
||||
check('/api/monitors 不回吐私有层的 API Key', !mText.includes(SECRET) && !mText.includes('FAKE'), mText.includes(SECRET) ? '泄露了！' : '未泄露');
|
||||
const mJson = JSON.parse(mText);
|
||||
check('/api/monitors 的 uptimeRobot.apiKey 被剥离', !('apiKey' in (mJson.settings?.uptimeRobot ?? {})), JSON.stringify(mJson.settings?.uptimeRobot));
|
||||
check('/api/monitors 仍返回非敏感配置（面板要读）', typeof mJson.settings?.uptimeRobot?.enabled === 'boolean' && Array.isArray(mJson.monitors), `enabled=${mJson.settings?.uptimeRobot?.enabled}`);
|
||||
|
||||
const sText = await (await fetch('http://127.0.0.1:8896/api/status')).text();
|
||||
check('/api/status 快照不含 API Key', !sText.includes(SECRET), '');
|
||||
const pubText = await (await fetch('http://127.0.0.1:8896/monitors.json')).text();
|
||||
check('静态 monitors.json 不含私有层内容', !pubText.includes(SECRET), '');
|
||||
srvC.kill();
|
||||
|
||||
// ---------- D3：跨域只读（CORS 白名单） ----------
|
||||
// 场景：前端部署在 GitHub Pages / Cloudflare，探针在另一台机器，
|
||||
// 需要让指定页面能跨域读状态与配置。核心风险是「任意网站都能读走监控数据」。
|
||||
console.log('\n[D3] 跨域只读白名单');
|
||||
const corsCfg = path.join(TMP, 'cors.json');
|
||||
fs.writeFileSync(corsCfg, JSON.stringify({
|
||||
settings: {
|
||||
title: 't',
|
||||
corsOrigins: ['https://you.github.io', 'https://monitor.example.com'],
|
||||
uptimeRobot: { enabled: true, apiKey: SECRET },
|
||||
},
|
||||
monitors: [],
|
||||
}, null, 2));
|
||||
const srvD = startProber([`--config=${corsCfg}`, `--local-config=${corsCfg}`, `--out=${path.join(TMP, 'd.json')}`], { PORT: '8895' });
|
||||
await waitForHttp('http://127.0.0.1:8895/api/status');
|
||||
|
||||
const acaoOf = async (pathname, origin, method = 'GET') => {
|
||||
const res = await fetch(`http://127.0.0.1:8895${pathname}`, { method, headers: { Origin: origin } });
|
||||
return res.headers.get('access-control-allow-origin');
|
||||
};
|
||||
|
||||
check('白名单内的 GitHub Pages 来源被放行', await acaoOf('/api/status', 'https://you.github.io') === 'https://you.github.io');
|
||||
check('白名单内的自定义域名被放行', await acaoOf('/api/status', 'https://monitor.example.com') === 'https://monitor.example.com');
|
||||
check('白名单外的站点被拒（无跨域头）', await acaoOf('/api/status', 'https://evil.example') === null);
|
||||
check('前缀伪造的域名被拒（如 https://you.github.io.evil.com）', await acaoOf('/api/status', 'https://you.github.io.evil.com') === null);
|
||||
check('协议不符的同域被拒（https 的 localhost 不匹配 http 默认项）', await acaoOf('/api/status', 'https://localhost') === null);
|
||||
|
||||
// 本机回环：默认放行且忽略端口（本地前端与探针常跑在不同端口）
|
||||
check('本机 localhost 放行（任意端口）', await acaoOf('/api/status', 'http://localhost:5173') === 'http://localhost:5173');
|
||||
check('本机 127.0.0.1 放行（任意端口）', await acaoOf('/api/status', 'http://127.0.0.1:3000') === 'http://127.0.0.1:3000');
|
||||
check('局域网 IP 未列入白名单时被拒', await acaoOf('/api/status', 'http://192.168.1.5:5173') === null);
|
||||
|
||||
// 预检
|
||||
const pre = await fetch('http://127.0.0.1:8895/api/status', { method: 'OPTIONS', headers: { Origin: 'https://you.github.io', 'Access-Control-Request-Method': 'GET' } });
|
||||
check('合法来源的预检返回 204 且带跨域头', pre.status === 204 && pre.headers.get('access-control-allow-origin') === 'https://you.github.io', `HTTP ${pre.status}`);
|
||||
const preBad = await fetch('http://127.0.0.1:8895/api/status', { method: 'OPTIONS', headers: { Origin: 'https://evil.example', 'Access-Control-Request-Method': 'GET' } });
|
||||
check('非法来源的预检被拒 403', preBad.status === 403, `HTTP ${preBad.status}`);
|
||||
|
||||
// 各只读接口都放行
|
||||
const readOnly = ['/api/status', '/api/monitors', '/api/events', '/api/v2/getMonitors'];
|
||||
const allowed = [];
|
||||
for (const p of readOnly) allowed.push((await acaoOf(p, 'https://you.github.io')) === 'https://you.github.io');
|
||||
check('四个只读接口都支持跨域', allowed.every(Boolean), readOnly.filter((_, i) => !allowed[i]).join(',') || '全部放行');
|
||||
|
||||
// 关键：管理端绝不能跨域
|
||||
const adminAcao = [];
|
||||
for (const p of ['/api/admin/status', '/api/admin/overview', '/api/admin/login']) {
|
||||
const r = await fetch(`http://127.0.0.1:8895${p}`, { method: 'GET', headers: { Origin: 'https://you.github.io' } });
|
||||
adminAcao.push(r.headers.get('access-control-allow-origin'));
|
||||
}
|
||||
check('管理端接口一律不带跨域头（必须同源访问）', adminAcao.every((v) => v === null), JSON.stringify(adminAcao));
|
||||
const adminPre = await fetch('http://127.0.0.1:8895/api/admin/overview', { method: 'OPTIONS', headers: { Origin: 'https://you.github.io', 'Access-Control-Request-Method': 'POST' } });
|
||||
check('管理端的预检被拒 403（外部页面无法发写操作）', adminPre.status === 403, `HTTP ${adminPre.status}`);
|
||||
|
||||
// 跨域读到的配置同样不得含密钥
|
||||
const corsMonitors = await (await fetch('http://127.0.0.1:8895/api/monitors', { headers: { Origin: 'https://you.github.io' } })).text();
|
||||
check('跨域读取配置时不泄露 API Key', !corsMonitors.includes(SECRET), corsMonitors.includes(SECRET) ? '泄露了！' : '未泄露');
|
||||
srvD.kill();
|
||||
|
||||
// corsOrigins 里不允许 '*'
|
||||
console.log('\n[D4] corsOrigins 的写法校验');
|
||||
const starCfg = path.join(TMP, 'star.json');
|
||||
fs.writeFileSync(starCfg, JSON.stringify({ settings: { title: 't', corsOrigins: ['*'] }, monitors: [] }, null, 2));
|
||||
const { corsOrigins: corsFn } = await import(`file://${PROBER.replace(/\\/g, '/')}`).catch(() => ({}));
|
||||
// corsOrigins 未导出时以 HTTP 层验证：配置 '*' 后不应变成任意来源可读
|
||||
const srvE = startProber([`--config=${starCfg}`, `--local-config=${starCfg}`, `--out=${path.join(TMP, 'e.json')}`], { PORT: '8894' });
|
||||
await waitForHttp('http://127.0.0.1:8894/api/status');
|
||||
const starRes = await fetch('http://127.0.0.1:8894/api/status', { headers: { Origin: 'https://anything.example' } });
|
||||
check("corsOrigins 配成 '*' 不会放行任意来源（必须写完整 origin）", starRes.headers.get('access-control-allow-origin') === null, starRes.headers.get('access-control-allow-origin') ?? '无跨域头');
|
||||
srvE.kill();
|
||||
|
||||
// ---------- E：来源判定 ----------
|
||||
console.log('\n[E] 来源判定');
|
||||
const { isPrivateAddress } = await import(`file://${PROBER.replace(/\\/g, '/')}`);
|
||||
|
||||
@@ -6,7 +6,10 @@
|
||||
* 用法：NODE_PATH=<playwright node_modules> node scripts/verify-views.cjs [baseUrl]
|
||||
*/
|
||||
const fs = require('node:fs');
|
||||
const http = require('node:http');
|
||||
const os = require('node:os');
|
||||
const path = require('node:path');
|
||||
const { spawn } = require('node:child_process');
|
||||
const { chromium } = require('playwright');
|
||||
|
||||
const BASE = process.argv[2] || 'http://localhost:8787';
|
||||
@@ -48,8 +51,39 @@ async function main() {
|
||||
bodyView: document.body.dataset.view,
|
||||
count: document.querySelectorAll(sel).length,
|
||||
activeBtn: document.querySelector('.view-btn.active')?.textContent ?? '',
|
||||
// 页面与表格都不应出现横向溢出（历史上立绘避让的 padding 曾导致桌面端需要横向拖动）
|
||||
overflowPage: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
overflowTable: (() => {
|
||||
const w = document.querySelector('.table-wrap');
|
||||
return w ? Math.round(w.scrollWidth - w.clientWidth) : 0;
|
||||
})(),
|
||||
}), SELECTOR[view]);
|
||||
check(`${view} 视图渲染 ${shown} 个条目`, info.count === shown, `count=${info.count}, 切换器=${info.activeBtn}`);
|
||||
check(`${view} 视图无横向溢出（无需拖动）`, info.overflowPage <= 0 && info.overflowTable <= 0, `页面溢出 ${info.overflowPage}px，表格溢出 ${info.overflowTable}px`);
|
||||
// 立绘若存在：要么不与内容重叠，要么确实位于不透明面板之下（立绘 z-index 低于内容，不应影响阅读）
|
||||
const artOverlap = await page.evaluate(() => {
|
||||
const art = document.querySelector('.artwork');
|
||||
if (!art || getComputedStyle(art).display === 'none') return null;
|
||||
const a = art.getBoundingClientRect();
|
||||
const opaque = (bg) => {
|
||||
const m = bg.match(/rgba?\(([^)]+)\)/);
|
||||
if (!m) return false;
|
||||
const parts = m[1].split(',').map(Number);
|
||||
return parts.length < 4 || parts[3] === 1;
|
||||
};
|
||||
const hits = [...document.querySelectorAll('table.monitor-table tbody tr, .card')]
|
||||
.map((el) => ({ r: el.getBoundingClientRect(), el }))
|
||||
.filter(({ r }) => r.right > a.left + 8 && r.bottom > a.top && r.top < a.bottom)
|
||||
.map(({ el }) => {
|
||||
// 不透明判定要同时看背景色与背景图（卡片用的是渐变背景，backgroundColor 仍是透明）
|
||||
const cs = getComputedStyle(el);
|
||||
if (cs.backgroundImage !== 'none') return true;
|
||||
const chain = [cs, getComputedStyle(el.closest('.table-wrap, .grid') ?? el)];
|
||||
return chain.some((s) => s.backgroundImage !== 'none' || opaque(s.backgroundColor));
|
||||
});
|
||||
return { count: hits.length, allOpaque: hits.every(Boolean) };
|
||||
});
|
||||
if (artOverlap) check(`${view} 视图立绘不影响阅读（不重叠或位于面板之下）`, artOverlap.count === 0 || artOverlap.allOpaque, `重叠 ${artOverlap.count} 个，均在面板之下=${artOverlap.allOpaque}`);
|
||||
await page.screenshot({ path: path.join(__dirname, '..', 'docs', `screenshot-view-${view}.png`), fullPage: true });
|
||||
}
|
||||
|
||||
@@ -113,6 +147,337 @@ async function main() {
|
||||
fs.writeFileSync(CONFIG, raw); // 还原
|
||||
}
|
||||
|
||||
// ---------- H. 移动端（窄屏） ----------
|
||||
console.log('\n[H] 移动端窄屏');
|
||||
const mCtx = await browser.newContext({ viewport: { width: 390, height: 844 }, isMobile: true, deviceScaleFactor: 2 });
|
||||
const mp = await mCtx.newPage();
|
||||
const mErrors = [];
|
||||
mp.on('pageerror', (e) => mErrors.push(e.message));
|
||||
// 不带 ?view=：窄屏下应自动落到卡片视图（表格在手机上必须横向拖动）
|
||||
await mp.goto(`${BASE}/?source=api`, { waitUntil: 'domcontentloaded' });
|
||||
await mp.waitForSelector('.card', { timeout: 20000 });
|
||||
await mp.waitForTimeout(1500);
|
||||
const mob = await mp.evaluate(() => {
|
||||
const top = (sel) => { const el = document.querySelector(sel); return el ? Math.round(el.getBoundingClientRect().top) : -1; };
|
||||
const statsW = Math.round(document.querySelector('.stats')?.getBoundingClientRect().width ?? 0);
|
||||
const lastFooter = [...document.querySelectorAll('.footer-item')].pop();
|
||||
return {
|
||||
view: document.body.dataset.view,
|
||||
overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
brandTop: top('.brand'), statsTop: top('.stats'), controlsTop: top('.controls'),
|
||||
statsW, vw: window.innerWidth,
|
||||
artwork: getComputedStyle(document.querySelector('.artwork') ?? document.body).display,
|
||||
beforeDisplay: getComputedStyle(document.body, '::before').display,
|
||||
afterDisplay: getComputedStyle(document.body, '::after').display,
|
||||
footerRight: lastFooter ? Math.round(lastFooter.getBoundingClientRect().right) : -1,
|
||||
cards: document.querySelectorAll('.card').length,
|
||||
tabsWrapped: getComputedStyle(document.querySelector('.topbar')).flexDirection,
|
||||
};
|
||||
});
|
||||
check('窄屏默认使用卡片视图', mob.view === 'cards', `data-view=${mob.view}`);
|
||||
check('窄屏无横向溢出', mob.overflow <= 0, `溢出 ${mob.overflow}px`);
|
||||
check('顶栏在窄屏改为纵向三行（标题/统计/控件）', mob.brandTop < mob.statsTop && mob.statsTop < mob.controlsTop && mob.tabsWrapped === 'column', `top: ${mob.brandTop}/${mob.statsTop}/${mob.controlsTop}, flex=${mob.tabsWrapped}`);
|
||||
check('统计行铺满视口宽度', Math.abs(mob.statsW - mob.vw) <= 32, `stats=${mob.statsW} 视口=${mob.vw}`);
|
||||
check('窄屏撤掉立绘与固定装饰', mob.artwork === 'none' && mob.beforeDisplay === 'none' && mob.afterDisplay === 'none', `立绘=${mob.artwork} 左装饰=${mob.beforeDisplay} 光环水印=${mob.afterDisplay}`);
|
||||
check('页脚内容不被裁切', mob.footerRight > 0 && mob.footerRight <= mob.vw, `最后一项右边界 ${mob.footerRight} / 视口 ${mob.vw}`);
|
||||
check('窄屏渲染无 JS 错误', mErrors.length === 0, mErrors.join(' | ') || '无');
|
||||
await mp.screenshot({ path: path.join(__dirname, '..', 'docs', 'screenshot-mobile.png'), fullPage: true });
|
||||
await mCtx.close();
|
||||
|
||||
// ---------- I. 无障碍：文字与图形对比度（WCAG AA） ----------
|
||||
console.log('\n[I] 对比度（WCAG AA：正文 ≥4.5，图形 ≥3.0）');
|
||||
// 对比度需在表格视图下采样（在线/离线状态文字在表格行里）
|
||||
await page.goto(`${BASE}/?source=api&view=table`, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('table.monitor-table tbody tr[data-status]', { timeout: 20000 });
|
||||
await page.waitForTimeout(1000);
|
||||
const contrast = await page.evaluate(() => {
|
||||
// 颜色可能是 rgb()/rgba() 或 color(srgb r g b / a)（color-mix 的结果），统一解析后逐层合成，
|
||||
// 否则半透明底色会被当成不透明、0~1 分量会被当成 0~255，算出的比值是错的
|
||||
const parseColor = (c) => {
|
||||
const nums = (c.match(/[\d.]+/g) ?? []).map(Number);
|
||||
const srgb = c.startsWith('color(srgb');
|
||||
const [r, g, b] = srgb ? nums.slice(0, 3).map((v) => v * 255) : nums.slice(0, 3);
|
||||
const a = srgb ? (nums.length > 3 ? nums[3] : 1) : (nums.length > 3 ? nums[3] : 1);
|
||||
return { r, g, b, a };
|
||||
};
|
||||
const effectiveBg = (el) => {
|
||||
const chain = [];
|
||||
for (let n = el; n; n = n.parentElement) chain.push(n);
|
||||
let bg = { r: 255, g: 255, b: 255 };
|
||||
for (const n of chain.reverse()) {
|
||||
const c = parseColor(getComputedStyle(n).backgroundColor);
|
||||
if (!c.a) continue;
|
||||
bg = { r: bg.r * (1 - c.a) + c.r * c.a, g: bg.g * (1 - c.a) + c.g * c.a, b: bg.b * (1 - c.a) + c.b * c.a };
|
||||
}
|
||||
return `rgb(${Math.round(bg.r)}, ${Math.round(bg.g)}, ${Math.round(bg.b)})`;
|
||||
};
|
||||
const luminance = ([r, g, b]) => {
|
||||
const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
|
||||
return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
|
||||
};
|
||||
const ratio = (fg, bg) => {
|
||||
const a = luminance([parseColor(fg).r, parseColor(fg).g, parseColor(fg).b]);
|
||||
const b = luminance([parseColor(bg).r, parseColor(bg).g, parseColor(bg).b]);
|
||||
const [hi, lo] = a > b ? [a, b] : [b, a];
|
||||
return (hi + 0.05) / (lo + 0.05);
|
||||
};
|
||||
const sample = (sel, label) => {
|
||||
const el = document.querySelector(sel);
|
||||
if (!el) return null;
|
||||
return { label, text: el.textContent.trim().slice(0, 8), r: +ratio(getComputedStyle(el).color, effectiveBg(el)).toFixed(2) };
|
||||
};
|
||||
const out = [
|
||||
sample('tr[data-status="up"] .t-state', '在线状态文字'),
|
||||
sample('tr[data-status="down"] .t-state', '离线状态文字'),
|
||||
sample('tr[data-status="pending"] .t-state', '等待状态文字'),
|
||||
sample('#stat-up', '在线统计数字'),
|
||||
sample('#stat-down', '离线统计数字'),
|
||||
sample('#overall-pill', '顶部状态胶囊'),
|
||||
sample('.t-target', '目标地址'),
|
||||
sample('.footer-item', '页脚文字'),
|
||||
].filter(Boolean);
|
||||
// 图形：状态点边框色 vs 其所在卡片底色（图形标准 3:1）
|
||||
const dot = document.querySelector('.dot');
|
||||
if (dot) out.push({ label: '状态点图形', r: +ratio(getComputedStyle(dot).borderTopColor, effectiveBg(dot)).toFixed(2), graphic: true });
|
||||
return out;
|
||||
});
|
||||
for (const c of contrast) {
|
||||
if (c.r == null) continue;
|
||||
const need = c.graphic ? 3 : 4.5;
|
||||
check(`${c.label}对比度 ≥${need}`, c.r >= need, `${c.r}:1`);
|
||||
}
|
||||
|
||||
// ---------- J. 事件区块与延迟趋势（演示快照，进程内临时服务） ----------
|
||||
console.log('\n[J] 事件区块与延迟趋势');
|
||||
const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'shiroko-events-'));
|
||||
try {
|
||||
fs.cpSync(path.join(__dirname, '..', 'public'), tmpDir, { recursive: true });
|
||||
const cfgPath = path.join(tmpDir, 'monitors.json');
|
||||
const demoCfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8'));
|
||||
demoCfg.settings.dataFilter = 'config';
|
||||
fs.writeFileSync(cfgPath, `${JSON.stringify(demoCfg, null, 2)}\n`);
|
||||
await new Promise((resolve) => {
|
||||
const child = spawn(process.execPath, [path.join(__dirname, '..', 'prober', 'node', 'index.js'),
|
||||
'--once', '--demo', `--config=${cfgPath}`, `--local-config=${path.join(tmpDir, 'none.json')}`,
|
||||
`--out=${path.join(tmpDir, 'status.json')}`], { stdio: 'ignore' });
|
||||
child.on('exit', (code) => resolve(code));
|
||||
});
|
||||
const demoServer = http.createServer((req, res) => {
|
||||
const rel = decodeURIComponent(req.url.split('?')[0]);
|
||||
const file = path.join(tmpDir, rel === '/' ? 'index.html' : rel);
|
||||
fs.readFile(file, (err, data) => {
|
||||
if (err) {
|
||||
res.writeHead(404);
|
||||
res.end();
|
||||
return;
|
||||
}
|
||||
const mime = { '.html': 'text/html;charset=utf-8', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.webp': 'image/webp', '.png': 'image/png' }[path.extname(file)] ?? 'application/octet-stream';
|
||||
res.writeHead(200, { 'content-type': mime });
|
||||
res.end(data);
|
||||
});
|
||||
});
|
||||
await new Promise((r) => demoServer.listen(8894, r));
|
||||
const dp = await browser.newPage({ viewport: { width: 1440, height: 900 } });
|
||||
await dp.goto('http://localhost:8894/?source=static&view=cards', { waitUntil: 'domcontentloaded' });
|
||||
await dp.waitForSelector('.card', { timeout: 20000 });
|
||||
await dp.waitForTimeout(1200);
|
||||
const dj = await dp.evaluate(() => ({
|
||||
cards: document.querySelectorAll('.card').length,
|
||||
trends: document.querySelectorAll('.lat-trend').length,
|
||||
cellsPerTrend: document.querySelector('.lat-trend')?.children[1]?.children.length ?? 0,
|
||||
trendTip: document.querySelector('.lat-trend')?.title ?? '',
|
||||
eventsHidden: document.getElementById('events').hidden,
|
||||
overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||||
}));
|
||||
check('卡片视图渲染 90 天延迟趋势条', dj.trends > 0 && dj.cellsPerTrend === 30, `${dj.trends} 条 × ${dj.cellsPerTrend} 格`);
|
||||
check('趋势条 tooltip 含日均与峰值', /90 天日均延迟 \d+ ms · 峰值 \d+ ms/.test(dj.trendTip), dj.trendTip.slice(0, 60));
|
||||
check('无事件时区块隐藏', dj.eventsHidden === true, '');
|
||||
check('演示视图无横向溢出', dj.overflow <= 0, `${dj.overflow}px`);
|
||||
// 表格视图：可用率列 tooltip 应带日均延迟
|
||||
await dp.evaluate(() => document.querySelector('.view-btn').click());
|
||||
await dp.waitForSelector('table.monitor-table', { timeout: 10000 });
|
||||
await dp.waitForTimeout(500);
|
||||
const dt = await dp.evaluate(() => document.querySelector('tr[data-status] .t-uptime')?.title ?? '');
|
||||
check('表格可用率 tooltip 含 90 天日均延迟', /90 天日均延迟 \d+ ms/.test(dt), dt.slice(0, 60));
|
||||
|
||||
// ---- 行高一致性：先在「内容等长」下取基准 ----
|
||||
// 注意：名称来自 monitors.json，不是 status.json（改错文件会假通过）
|
||||
const statusPath = path.join(tmpDir, 'status.json');
|
||||
const snap = JSON.parse(fs.readFileSync(statusPath, 'utf8'));
|
||||
const cfgPath2 = path.join(tmpDir, 'monitors.json');
|
||||
const cfgJson = JSON.parse(fs.readFileSync(cfgPath2, 'utf8'));
|
||||
const ids = Object.keys(snap.monitors);
|
||||
cfgJson.monitors.forEach((m, i) => { m.name = `目标 ${i + 1}`; });
|
||||
fs.writeFileSync(cfgPath2, `${JSON.stringify(cfgJson, null, 2)}\n`);
|
||||
await dp.goto('http://localhost:8894/?source=static&view=table', { waitUntil: 'domcontentloaded' });
|
||||
await dp.waitForSelector('table.monitor-table tbody tr[data-status]', { timeout: 20000 });
|
||||
await dp.waitForTimeout(900);
|
||||
const heights = await dp.evaluate(() => {
|
||||
const hs = [...document.querySelectorAll('table.monitor-table tbody tr[data-status]')].map((tr) => Math.round(tr.getBoundingClientRect().height));
|
||||
return { hs, unique: [...new Set(hs)] };
|
||||
});
|
||||
check('内容等长时表格各行等高（可用率条不再撑高行）', heights.unique.length === 1, `行高 ${heights.unique.join('/')}（共 ${heights.hs.length} 行）`);
|
||||
const baseRowH = heights.unique[0] ?? 0;
|
||||
const groupHs = await dp.evaluate(() => [...new Set([...document.querySelectorAll('table.monitor-table tbody tr.group-row')].map((tr) => Math.round(tr.getBoundingClientRect().height)))]);
|
||||
check('分组标题行自身等高且不与数据行混淆', groupHs.length === 1 && groupHs[0] !== baseRowH, `分组行高 ${groupHs.join('/')}，数据行 ${baseRowH}px`);
|
||||
|
||||
// ---- 极端内容：行高仍须完全一致，且不得出现横向滚动 ----
|
||||
// 注入超长名称与超长地址（外加一条超长事件详情），要求行高与基准逐像素相同
|
||||
let injected = 0;
|
||||
cfgJson.monitors.forEach((m, i) => {
|
||||
if (i % 3 === 0) { m.name = `这是一个相当长的监控目标名称用于验证绝对等高-${'X'.repeat(40)}-${m.id}`; injected++; }
|
||||
if (i % 3 === 1) { m.url = `https://very-long-subdomain.example.com/${'segment/'.repeat(12)}?q=${'y'.repeat(30)}`; injected++; }
|
||||
});
|
||||
fs.writeFileSync(cfgPath2, `${JSON.stringify(cfgJson, null, 2)}\n`);
|
||||
// 注入事件，验证事件区块的时间线样式、折叠与等高
|
||||
snap.events = Array.from({ length: 12 }, (_, i) => ({
|
||||
t: new Date(Date.now() - i * 60000).toISOString(),
|
||||
id: ids[0],
|
||||
name: i % 2 ? `事件目标-${'长'.repeat(50)}` : (snap.monitors[ids[0]]?.name ?? 'x'),
|
||||
type: i % 2 ? 'down' : 'up',
|
||||
detail: i % 2 ? `connect ETIMEDOUT ${'203.0.113.'.repeat(6)}` : '已恢复',
|
||||
maintenance: false,
|
||||
}));
|
||||
fs.writeFileSync(statusPath, JSON.stringify(snap));
|
||||
await dp.goto('http://localhost:8894/?source=static&view=table', { waitUntil: 'domcontentloaded' });
|
||||
await dp.waitForSelector('table.monitor-table tbody tr[data-status]', { timeout: 20000 });
|
||||
await dp.waitForTimeout(900);
|
||||
// 极端内容下的行高必须与等长内容下逐像素相同
|
||||
const eqLong = await dp.evaluate(() => {
|
||||
const hs = [...document.querySelectorAll('table.monitor-table tbody tr[data-status]')].map((tr) => Math.round(tr.getBoundingClientRect().height));
|
||||
const ev = [...document.querySelectorAll('.events-table tbody tr')].map((tr) => Math.round(tr.getBoundingClientRect().height));
|
||||
return { hs, hsU: [...new Set(hs)], ev, evU: [...new Set(ev)] };
|
||||
});
|
||||
check('极端内容下表格各行仍绝对等高（与等长内容逐像素相同）', eqLong.hsU.length === 1 && eqLong.hsU[0] === baseRowH, `行高 ${eqLong.hsU.join('/')}，基准 ${baseRowH}px（注入 ${injected} 条长内容，共 ${eqLong.hs.length} 行）`);
|
||||
check('极端内容下事件表各行等高且与监控表格一致', eqLong.evU.length === 1 && eqLong.evU[0] === baseRowH, `事件行高 ${eqLong.evU.join('/')}`);
|
||||
const clip = await dp.evaluate(() => {
|
||||
let clipped = 0;
|
||||
let worst = 0;
|
||||
for (const tr of document.querySelectorAll('tr[data-status]')) {
|
||||
for (const td of tr.querySelectorAll('td')) {
|
||||
const d = td.scrollWidth - td.clientWidth;
|
||||
if (d > 1) { clipped++; worst = Math.max(worst, d); }
|
||||
}
|
||||
}
|
||||
const wrap = document.querySelector('.table-wrap');
|
||||
return { clipped, worst, pageOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth, tableOverflow: wrap ? wrap.scrollWidth - wrap.clientWidth : 0 };
|
||||
});
|
||||
// 横向方向：单元格内容一律不得溢出（限高不换行时最容易被长 URL 顶破）
|
||||
check(`表格单元格无横向溢出（注入 ${injected} 条长内容）`, clip.clipped === 0, `溢出单元格 ${clip.clipped} 个，最大 ${clip.worst}px`);
|
||||
check('表格仍无横向滚动', clip.pageOverflow <= 0 && clip.tableOverflow <= 0, `页面 ${clip.pageOverflow} / 表格 ${clip.tableOverflow}`);
|
||||
// 纵向方向：长内容改为「限两行 + title 悬停看全文」，完整值仍必须可取
|
||||
// 注意 display 的计算值不可作为判据：Chrome 实现了标准 line-clamp 后会把
|
||||
// display 从 -webkit-box 规范化为 flow-root，这里改查 -webkit-line-clamp 计算值
|
||||
const clamp = await dp.evaluate(() => {
|
||||
const els = [...document.querySelectorAll('.monitor-table .clamp2, .events-table .clamp2')];
|
||||
const clamped = els.filter((e) => e.scrollHeight - e.clientHeight > 1);
|
||||
const noTitle = [...document.querySelectorAll('.t-name, .t-target, .ev-name, .ev-detail')].filter((td) => !td.title);
|
||||
const cs = els[0] ? getComputedStyle(els[0]) : null;
|
||||
return {
|
||||
total: els.length,
|
||||
clamped: clamped.length,
|
||||
noTitle: noTitle.length,
|
||||
overflow: cs?.overflow ?? '',
|
||||
clamp: cs?.webkitLineClamp ?? cs?.lineClamp ?? '',
|
||||
h: els[0] ? Math.round(els[0].getBoundingClientRect().height) : 0,
|
||||
};
|
||||
});
|
||||
check('长文本限两行显示且 overflow:hidden（等高的前提）', clamp.clamped > 0 && clamp.overflow === 'hidden' && clamp.clamp === '2', `限行 ${clamp.clamped}/${clamp.total}，-webkit-line-clamp=${clamp.clamp}，元素高 ${clamp.h}px`);
|
||||
check('被截断的单元格仍带 title（悬停可看完整值）', clamp.noTitle === 0, `缺 title 的单元格 ${clamp.noTitle} 个`);
|
||||
const evr = await dp.evaluate(() => {
|
||||
const table = document.querySelector('.events-table');
|
||||
const evRow = table?.querySelector('tbody tr');
|
||||
const cs = evRow ? getComputedStyle(evRow) : null;
|
||||
const more = document.getElementById('events-more');
|
||||
return {
|
||||
shown: (evRow ? table.querySelectorAll('tbody tr').length : 0),
|
||||
tag: table?.tagName ?? 'none',
|
||||
hasThead: Boolean(table?.querySelector('thead th')),
|
||||
headerSameSize: (() => {
|
||||
const mon = document.querySelector('.monitor-table thead th');
|
||||
const ev = table?.querySelector('thead th');
|
||||
return mon && ev ? getComputedStyle(mon).fontSize === getComputedStyle(ev).fontSize : false;
|
||||
})(),
|
||||
rowBg: cs?.backgroundColor ?? '',
|
||||
cellBorder: evRow ? getComputedStyle(evRow.querySelector('td')).borderBottomWidth : '',
|
||||
moreHidden: more?.hidden ?? true,
|
||||
moreText: more?.textContent ?? '',
|
||||
count: document.getElementById('events-count')?.textContent ?? '',
|
||||
};
|
||||
});
|
||||
check('事件区块与监控表格同构（table + thead）', evr.tag === 'TABLE' && evr.hasThead === true && evr.headerSameSize === true, `${evr.tag}，表头字号一致=${evr.headerSameSize}`);
|
||||
const evBg = await dp.evaluate(() => {
|
||||
const rows = [...document.querySelectorAll('.events-table tbody tr')];
|
||||
const down = rows.find((r) => r.dataset.status === 'down');
|
||||
const up = rows.find((r) => r.dataset.status === 'up');
|
||||
return { down: down ? getComputedStyle(down).backgroundColor : '无', up: up ? getComputedStyle(up).backgroundColor : '无', downCells: down ? down.querySelectorAll('td').length : 0 };
|
||||
});
|
||||
check('事件行复用表格状态底色（故障行着色、恢复行不染）', /^(color\(|rgba?\(\d)/.test(evBg.down) && evBg.down !== 'rgba(0, 0, 0, 0)' && evBg.up === 'rgba(0, 0, 0, 0)' && evBg.downCells === 4, `故障=${evBg.down.slice(0, 30)} 恢复=${evBg.up} 列数=${evBg.downCells}`);
|
||||
// 事件行的四列文字必须落在同一水平线上。此前 clamp2 固定 height:2.8em（36px）、
|
||||
// 而徽标只有 17px，单元格按 middle 对齐时两者居中基准不同，
|
||||
// 「类型」会比「时间/目标/详情」低约 9px（实测截图确认）。
|
||||
const evAlign = await dp.evaluate(() => {
|
||||
const rows = [...document.querySelectorAll('.events-table tbody tr')];
|
||||
const spreads = [];
|
||||
for (const tr of rows) {
|
||||
const tops = [];
|
||||
for (const td of tr.querySelectorAll('td')) {
|
||||
// Range 要用独立实例：selectNodeContents 返回的是布尔值，不是 Range
|
||||
const range = document.createRange();
|
||||
range.selectNodeContents(td);
|
||||
const rects = [...range.getClientRects()];
|
||||
if (rects.length) tops.push(Math.round(rects[0].top));
|
||||
}
|
||||
if (tops.length) spreads.push(Math.max(...tops) - Math.min(...tops));
|
||||
}
|
||||
return { worst: spreads.length ? Math.max(...spreads) : -1, rows: spreads.length };
|
||||
});
|
||||
check('事件行各列文字顶端对齐（徽标与文本同一水平线）', evAlign.worst === 0, `最大错位 ${evAlign.worst}px（${evAlign.rows} 行）`);
|
||||
// 跨域模式下隐藏刷新按钮（该模式下 /api/refresh 必然被 refreshLocalOnly 挡下）
|
||||
const refreshBtnShown = await dp.evaluate(() => !document.getElementById('refresh-btn').hidden);
|
||||
check('同源模式下保留刷新按钮', refreshBtnShown === true, `可见=${refreshBtnShown}`);
|
||||
check('事件默认折叠为 8 条并可展开', evr.shown === 8 && evr.moreHidden === false && /展开全部 12 条/.test(evr.moreText), `显示 ${evr.shown} 条，按钮「${evr.moreText}」，计数「${evr.count}」`);
|
||||
|
||||
// ---- 事件随分组页签联动 ----
|
||||
// 此前 setFilter 只重渲染视图不重渲染事件，且过滤依据用的是 allMonitors()
|
||||
// （只受 dataFilter 约束、不受分组影响），导致切页签后事件纹丝不动。
|
||||
const evTabs = await dp.evaluate(() => [...document.querySelectorAll('#group-tabs .tab')].map((t) => t.textContent.trim()));
|
||||
// 找一个「事件里没有目标」的分组：演示数据的 12 条事件全部挂在 ids[0] 上，
|
||||
// 因此要排除 ids[0] 所属的那个分组
|
||||
const ids0Group = cfgJson.monitors.find((m) => m.id === ids[0])?.group || '未分组';
|
||||
const quietTab = evTabs.find((t) => !t.startsWith('全部') && !t.startsWith(ids0Group));
|
||||
check('存在可用于验证的分组页签', Boolean(quietTab), `事件目标属于「${ids0Group}」，可用安静分组：${quietTab ?? '无'}`);
|
||||
if (quietTab) {
|
||||
await dp.click(`#group-tabs .tab:text-is("${quietTab}")`);
|
||||
await dp.waitForTimeout(500);
|
||||
const evAfter = await dp.evaluate(() => {
|
||||
const visIds = [...document.querySelectorAll('table.monitor-table tbody tr[data-status]')].map((tr) => tr.dataset.id);
|
||||
const rows = [...document.querySelectorAll('.events-table tbody tr')];
|
||||
return {
|
||||
visibleTargets: visIds,
|
||||
events: rows.length,
|
||||
// 事件行里的目标名必须都属于当前页签可见的目标
|
||||
names: rows.map((tr) => tr.querySelector('.ev-name')?.textContent?.trim()),
|
||||
hidden: document.getElementById('events').hidden,
|
||||
};
|
||||
});
|
||||
check('切分组页签后事件同步过滤（不再显示其它分组的事件）', evAfter.events === 0 && evAfter.hidden === true,
|
||||
`「${quietTab}」页签下事件 ${evAfter.events} 条、区块隐藏=${evAfter.hidden}`);
|
||||
}
|
||||
await dp.click('#group-tabs .tab:text-matches("^全部")');
|
||||
await dp.waitForTimeout(400);
|
||||
const evBack = await dp.evaluate(() => document.querySelectorAll('.events-table tbody tr').length);
|
||||
check('切回「全部」恢复完整事件', evBack === 8, `${evBack} 条`);
|
||||
await dp.click('#events-more');
|
||||
await dp.waitForTimeout(300);
|
||||
const evExpanded = await dp.evaluate(() => ({ shown: document.querySelectorAll('.events-table tbody tr').length, text: document.getElementById('events-more').textContent }));
|
||||
check('展开后显示全部事件', evExpanded.shown === 12 && evExpanded.text === '收起', `显示 ${evExpanded.shown} 条`);
|
||||
await dp.close();
|
||||
await new Promise((r) => demoServer.close(r));
|
||||
} finally {
|
||||
fs.rmSync(tmpDir, { recursive: true, force: true });
|
||||
}
|
||||
|
||||
// 429 是刷新限流保护在起作用（快速连续导航各触发一次强制探测），面板已优雅降级为只读数据；
|
||||
// 这里只把 429 以外的错误视为失败
|
||||
const hardErrors = errors.filter((e) => !/429/.test(e));
|
||||
|
||||
@@ -0,0 +1,257 @@
|
||||
/**
|
||||
* Cloudflare Worker 边缘探针验证（离线，不需要 wrangler）
|
||||
*
|
||||
* 做法：把 worker.js 与 uptimerobot.js 以 data: URL 动态载入，
|
||||
* 注入假的 ASSETS / MONITOR_KV / UptimeRobot 服务器，实测：
|
||||
* [A] UptimeRobot 映射（暂停/离线/可用率/端口目标）
|
||||
* [B] 探测范围（probeScope）与展示口径解耦
|
||||
* [C] UR 同步失败时保留上次数据，绝不误判为离线
|
||||
* [D] 管理端路由（/admin 与 /api/admin/* 一律拒绝，Worker 无可写面）
|
||||
*
|
||||
* 用法：node scripts/verify-worker.cjs
|
||||
*/
|
||||
const fs = require('node:fs');
|
||||
const http = require('node:http');
|
||||
const path = require('node:path');
|
||||
|
||||
const ROOT = path.join(__dirname, '..');
|
||||
const EDGE = path.join(ROOT, 'edge', 'cloudflare');
|
||||
const UR_PORT = 8896;
|
||||
const HTTP_PORT = 8895;
|
||||
|
||||
const results = [];
|
||||
const check = (name, pass, detail) => {
|
||||
results.push({ name, pass });
|
||||
console.log(` ${pass ? '✓' : '✗'} ${name}${detail ? ` — ${detail}` : ''}`);
|
||||
};
|
||||
const group = (t) => console.log(`\n${t}`);
|
||||
|
||||
const UR_PAYLOAD = {
|
||||
stat: 'ok',
|
||||
monitors: [
|
||||
{
|
||||
id: 700001, friendly_name: 'UR-主站', url: 'https://a.example.com', type: 1, status: 2, interval: 300,
|
||||
average_response_time: '120',
|
||||
response_times: [{ datetime: Math.floor(Date.now() / 1000) - 60, value: '118' }, { datetime: Math.floor(Date.now() / 1000) - 360, value: '130' }],
|
||||
custom_uptime_ratio: '100-100-99.980-99.990', custom_down_durations: '0-0-120-260',
|
||||
logs: [{ type: 2, datetime: Math.floor(Date.now() / 1000) - 86400 }],
|
||||
},
|
||||
{
|
||||
id: 700002, friendly_name: 'UR-端口', url: 'b.example.com', port: 8443, type: 4, status: 9, interval: 300,
|
||||
average_response_time: '0', response_times: [{ datetime: Math.floor(Date.now() / 1000) - 120, value: '0' }],
|
||||
custom_uptime_ratio: '98-99-99.5-99.7', custom_down_durations: '300-600-1200-2400',
|
||||
logs: [{ type: 1, datetime: Math.floor(Date.now() / 1000) - 120, reason: { code: '503', detail: 'Service Unavailable' } }],
|
||||
},
|
||||
{
|
||||
id: 700003, friendly_name: 'UR-暂停', url: 'https://c.example.com', type: 1, status: 0, interval: 300,
|
||||
response_times: [], custom_uptime_ratio: '100-100-100-100', custom_down_durations: '0-0-0-0', logs: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 假 UptimeRobot：正常返回 payload；切到 error 模式返回 stat=fail
|
||||
let urMode = 'ok';
|
||||
function startUrServer() {
|
||||
return http.createServer((req, res) => {
|
||||
let body = '';
|
||||
req.on('data', (c) => { body += c; });
|
||||
req.on('end', () => {
|
||||
res.writeHead(200, { 'content-type': 'application/json' });
|
||||
if (urMode === 'fail') return res.end(JSON.stringify({ stat: 'fail', error: { type: 'invalid_parameter', message: 'bad key' } }));
|
||||
res.end(JSON.stringify(UR_PAYLOAD));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 载入 Worker：替换 cloudflare:sockets 与 UR 模块的 API 地址
|
||||
async function loadWorker() {
|
||||
let ur = fs.readFileSync(path.join(EDGE, 'uptimerobot.js'), 'utf8');
|
||||
ur = ur.replace("const API_URL = 'https://api.uptimerobot.com/v2/getMonitors';", `const API_URL = 'http://localhost:${UR_PORT}/v2/getMonitors';`);
|
||||
const urUrl = `data:text/javascript;base64,${Buffer.from(ur).toString('base64')}`;
|
||||
|
||||
let w = fs.readFileSync(path.join(EDGE, 'worker.js'), 'utf8');
|
||||
// Workers 专有模块在 Node 下无法加载，替换为抛错桩（测试只覆盖 http 与 UR 路径）
|
||||
w = w.replace("import { connect } from 'cloudflare:sockets';", "const connect = () => { throw new Error('TCP unavailable in offline test'); };");
|
||||
w = w.replace("import { fetchUptimeRobotMonitors } from './uptimerobot.js';", `import { fetchUptimeRobotMonitors } from '${urUrl}';`);
|
||||
return import(`data:text/javascript;base64,${Buffer.from(w).toString('base64')}`);
|
||||
}
|
||||
|
||||
// 内存版 KV + 静态资源夹具
|
||||
function makeEnv(settings, monitors) {
|
||||
const kv = new Map();
|
||||
const config = JSON.stringify({ settings, monitors });
|
||||
return {
|
||||
MONITOR_KV: {
|
||||
// 与真实 KV 一致：type='json' 时自动反序列化，否则返回原始字符串
|
||||
async get(key, type) {
|
||||
const v = kv.get(key);
|
||||
if (v == null) return null;
|
||||
return type === 'json' ? JSON.parse(v) : v;
|
||||
},
|
||||
async put(k, v) { kv.set(k, v); },
|
||||
},
|
||||
ASSETS: {
|
||||
// 与真实 Workers 一致：这里收到的是 URL 对象而非 Request
|
||||
async fetch(input) {
|
||||
const raw = String(input && typeof input.href === 'string' ? input.href : input);
|
||||
const pathname = new URL(raw, 'http://placeholder').pathname;
|
||||
if (pathname === '/monitors.json') {
|
||||
return new Response(config, { headers: { 'content-type': 'application/json' } });
|
||||
}
|
||||
return new Response('not found', { status: 404 });
|
||||
},
|
||||
},
|
||||
_kv: kv,
|
||||
};
|
||||
}
|
||||
|
||||
const LOCAL_TARGETS = [
|
||||
{ id: 'local-1', name: '本地A', type: 'http', url: `http://127.0.0.1:${HTTP_PORT}/ok`, interval: 60 },
|
||||
{ id: 'local-2', name: '本地B', type: 'http', url: `http://127.0.0.1:${HTTP_PORT}/ok`, interval: 60 },
|
||||
];
|
||||
|
||||
// 记录哪些 URL 被真正探测过（用于验证探测范围）
|
||||
let probed = [];
|
||||
const origFetch = globalThis.fetch;
|
||||
|
||||
async function main() {
|
||||
const urSrv = startUrServer();
|
||||
await new Promise((r) => urSrv.listen(UR_PORT, r));
|
||||
const httpSrv = http.createServer((req, res) => { res.writeHead(200); res.end('ok'); });
|
||||
await new Promise((r) => httpSrv.listen(HTTP_PORT, r));
|
||||
|
||||
const worker = await loadWorker();
|
||||
const { fetchUptimeRobotMonitors } = await import(
|
||||
`data:text/javascript;base64,${Buffer.from(
|
||||
fs.readFileSync(path.join(EDGE, 'uptimerobot.js'), 'utf8')
|
||||
.replace("const API_URL = 'https://api.uptimerobot.com/v2/getMonitors';", `const API_URL = 'http://localhost:${UR_PORT}/v2/getMonitors';`)
|
||||
).toString('base64')}`
|
||||
);
|
||||
|
||||
/* ---------- [A] UptimeRobot 映射 ---------- */
|
||||
group('[A] UptimeRobot 映射');
|
||||
const list = await fetchUptimeRobotMonitors({ apiKey: 'ur-test-key' });
|
||||
check('映射出 3 个目标', list.length === 3, list.map((m) => m.name).join('、'));
|
||||
check('在线目标延迟取自最新响应样本', list[0].latency === 118, `${list[0].latency}ms`);
|
||||
check('离线目标取故障日志 code 作状态码', list[1].code === 503, `code=${list[1].code}`);
|
||||
check('离线目标详情带原因', /503 Service Unavailable/.test(list[1].detail), list[1].detail);
|
||||
check('暂停目标归为 pending 而非离线', list[2].status === 'pending', list[2].status);
|
||||
check('暂停目标提示已暂停', /暂停/.test(list[2].detail), list[2].detail);
|
||||
check('90 天可用率按 ratios 顺序解析', list[0].uptimeRatios[90] === 99.99, `${list[0].uptimeRatios[1]}/${list[0].uptimeRatios[7]}/${list[0].uptimeRatios[30]}/${list[0].uptimeRatios[90]}`);
|
||||
check('累计离线时长解析正确', list[1].downSeconds[90] === 2400, `${list[1].downSeconds[90]}s`);
|
||||
check('端口目标地址带端口号', list[1].url === 'b.example.com:8443', list[1].url);
|
||||
check('历史心率按时间升序（供心率图直接绘制）', list[0].history[0].t < list[0].history[1].t, '');
|
||||
check('类型标注为来源协议', list[1].sourceLabel === 'PORT', list[1].sourceLabel);
|
||||
check('目标 id 加 ur- 前缀（避免与自建 id 冲突）', list.every((m) => m.id.startsWith('ur-')), list.map((m) => m.id).join(','));
|
||||
|
||||
urMode = 'fail';
|
||||
let threw = null;
|
||||
try { await fetchUptimeRobotMonitors({ apiKey: 'bad' }); } catch (e) { threw = e; }
|
||||
check('UR 返回 stat=fail 时抛出可读错误', Boolean(threw) && /UptimeRobot/.test(threw.message), threw?.message);
|
||||
urMode = 'ok';
|
||||
|
||||
/* ---------- [B] 探测范围与展示口径解耦 ---------- */
|
||||
group('[B] 探测范围（probeScope）与展示口径（dataFilter）解耦');
|
||||
const urSettings = (extra = {}) => ({ dataFilter: 'uptimerobot', uptimeRobot: { enabled: true, apiKey: 'ur-k' }, ...extra });
|
||||
|
||||
// 记录探测行为
|
||||
globalThis.fetch = async (input, init) => {
|
||||
const u = String(input);
|
||||
if (u.startsWith(`http://localhost:${UR_PORT}`)) return origFetch(input, init);
|
||||
probed.push(u);
|
||||
return origFetch(input, init);
|
||||
};
|
||||
|
||||
probed = [];
|
||||
let env = makeEnv(urSettings(), LOCAL_TARGETS);
|
||||
let snap = await worker.__test.runChecks(env);
|
||||
const urIds = (s) => Object.keys(s.monitors).filter((k) => k.startsWith('ur-'));
|
||||
check('未设 probeScope 时跟随 dataFilter=uptimerobot（不探测本地目标）', probed.length === 0, `探测了 ${probed.length} 个本地目标`);
|
||||
check('UR 目标进入快照', urIds(snap).length === 3, `${urIds(snap).length} 个`);
|
||||
check('快照带 sources.uptimerobot 同步状态', snap.sources.uptimerobot.ok === true && snap.sources.uptimerobot.count === 3, `count=${snap.sources.uptimerobot.count}`);
|
||||
check('快照带 probeScope（面板据此解释口径）', snap.probeScope === 'uptimerobot', snap.probeScope);
|
||||
check('统计总数 = 实际参与的目标数（scope=uptimerobot 时只有 3 个 UR）', snap.stats.total === 3, `total=${snap.stats.total}`);
|
||||
check('UR 侧口径：在线 1 / 离线 1 / 待检测 1', snap.stats.up === 1 && snap.stats.down === 1 && snap.stats.pending === 1, `up=${snap.stats.up} down=${snap.stats.down} pending=${snap.stats.pending}`);
|
||||
const urState = snap.monitors['ur-700001'];
|
||||
check('UR 目标带 meta（面板靠它区分自建/外部）', urState.meta?.source === 'uptimerobot' && urState.meta.name === 'UR-主站', JSON.stringify(urState.meta).slice(0, 70));
|
||||
check('UR 目标带 uptimeRatios（面板算官方可用率用）', urState.uptimeRatios?.[90] === 99.99, `${urState.uptimeRatios?.[90]}`);
|
||||
check('UR 目标有 daily 分桶（本探针自行累积）', urState.daily && Object.keys(urState.daily).length > 0, Object.keys(urState.daily)[0]);
|
||||
|
||||
probed = [];
|
||||
snap = await worker.__test.runChecks(makeEnv(urSettings({ probeScope: 'all' }), LOCAL_TARGETS));
|
||||
check('显式 probeScope=all 时探测本地目标', probed.length === 2, `探测了 ${probed.length} 个`);
|
||||
check('probeScope=all 时 UR 目标同样在快照中', urIds(snap).length === 3, '');
|
||||
|
||||
probed = [];
|
||||
snap = await worker.__test.runChecks(makeEnv(urSettings({ probeScope: 'config' }), LOCAL_TARGETS));
|
||||
check('probeScope=config 时不拉 UR 也不展示 UR 目标', urIds(snap).length === 0 && probed.length === 2, `UR=${urIds(snap).length} 本地探测=${probed.length}`);
|
||||
|
||||
probed = [];
|
||||
snap = await worker.__test.runChecks(makeEnv(urSettings({ uptimeRobot: { enabled: false, apiKey: '' } }), LOCAL_TARGETS));
|
||||
check('UR 未启用时不拉取', urIds(snap).length === 0 && probed.length === 0, `UR=${urIds(snap).length} 本地探测=${probed.length}`);
|
||||
|
||||
/* ---------- [C] UR 同步失败的降级行为 ---------- */
|
||||
group('[C] UR 同步失败时保留上次数据（绝不误判为离线）');
|
||||
const envC = makeEnv(urSettings(), LOCAL_TARGETS);
|
||||
await worker.__test.runChecks(envC); // 先成功一轮，把 UR 数据写进 KV
|
||||
urMode = 'fail';
|
||||
snap = await worker.__test.runChecks(envC);
|
||||
check('同步失败时标记 ok=false 并给出原因', snap.sources.uptimerobot.ok === false && /UptimeRobot/.test(snap.sources.uptimerobot.error), snap.sources.uptimerobot.error);
|
||||
check('同步失败时 UR 目标仍在快照里（用上次数据）', urIds(snap).length === 3, `${urIds(snap).length} 个`);
|
||||
check('同步失败时 UR 目标状态未被改成 offline', snap.monitors['ur-700002'].status === 'down', `仍是上次的 ${snap.monitors['ur-700002'].status}（真实状态）`);
|
||||
urMode = 'ok';
|
||||
|
||||
/* ---------- [D] 管理端路由 ---------- */
|
||||
group('[D] 管理端：Worker 侧无可写面');
|
||||
// 真实运行时会用 ctx.waitUntil 托管后台任务，测试里同步执行以便断言生效
|
||||
const pending = [];
|
||||
const call = (pathname) => worker.default.fetch(new Request(`https://x${pathname}`), makeEnv(urSettings(), LOCAL_TARGETS), { waitUntil(p) { pending.push(p); } });
|
||||
await Promise.all(pending.map((p) => p.catch(() => {})));
|
||||
|
||||
const adminPage = await call('/admin');
|
||||
const adminBody = await adminPage.json();
|
||||
check('/admin 返回 403（而非 404，提示去哪找管理端）', adminPage.status === 403, `HTTP ${adminPage.status}`);
|
||||
check('/admin 的提示指向本地 Node 探针', /docs\/DEPLOYMENT\.md|本地 Node/.test(adminBody.hint), adminBody.hint?.slice(0, 50));
|
||||
const adminApi = await call('/api/admin/overview');
|
||||
check('/api/admin/* 一律 403', adminApi.status === 403 && (await adminApi.json()).error === 'admin-not-here', `HTTP ${adminApi.status}`);
|
||||
const adminStatus = await call('/api/admin/status');
|
||||
check('未绑定的 2FA 状态接口在 Worker 上也不开放', adminStatus.status === 403, `HTTP ${adminStatus.status}`);
|
||||
|
||||
const panel = await call('/');
|
||||
check('面板本身不受影响', panel.status === 404 || panel.status === 200, `静态资源响应 HTTP ${panel.status}（夹具无 /index.html，属预期）`);
|
||||
const st = await call('/api/status');
|
||||
const stBody = await st.json();
|
||||
check('/api/status 正常提供（首次无数据时返回空 state 并后台补跑）', st.status === 200 && typeof stBody === 'object' && stBody.monitors !== undefined, `HTTP ${st.status}，monitors=${stBody.monitors ? Object.keys(stBody.monitors).length : '无'}`);
|
||||
check('首次访问触发后台探测（waitUntil 被调用）', pending.length > 0, `${pending.length} 个后台任务`);
|
||||
|
||||
// 配置接口无鉴权，绝不能回吐 API Key
|
||||
group('[E] 配置接口不得泄露密钥');
|
||||
const SECRET = 'urFAKE-0123456789abcdefSECRET';
|
||||
const envSecret = makeEnv({ uptimeRobot: { enabled: true, apiKey: SECRET } }, LOCAL_TARGETS);
|
||||
const mResp = await worker.default.fetch(new Request('https://x/api/monitors'), envSecret, { waitUntil() {} });
|
||||
const mText = await mResp.text();
|
||||
check('/api/monitors 不回吐 API Key', !mText.includes(SECRET), mText.includes(SECRET) ? '泄露了！' : '未泄露');
|
||||
const mJson = JSON.parse(mText);
|
||||
check('uptimeRobot.apiKey 被剥离', !('apiKey' in (mJson.settings?.uptimeRobot ?? {})), JSON.stringify(mJson.settings?.uptimeRobot));
|
||||
check('仍返回非敏感配置（面板要读）', typeof mJson.settings?.uptimeRobot?.enabled === 'boolean' && Array.isArray(mJson.monitors), `enabled=${mJson.settings?.uptimeRobot?.enabled}`);
|
||||
// 但 Worker 内部探测仍要能用 key 同步 UR —— 用同一份配置跑一轮确认不报错
|
||||
const snapSecret = await worker.__test.runChecks(envSecret);
|
||||
check('内部探测仍能读到 key 并同步 UR（剥离只作用于对外响应）', snapSecret.sources.uptimerobot.enabled === true, JSON.stringify(snapSecret.sources.uptimerobot).slice(0, 60));
|
||||
|
||||
globalThis.fetch = origFetch;
|
||||
urSrv.close();
|
||||
httpSrv.close();
|
||||
|
||||
const failed = results.filter((x) => !x.pass);
|
||||
console.log(`\n结果：${results.length - failed.length}/${results.length} 通过`);
|
||||
if (failed.length) {
|
||||
console.log('失败项：');
|
||||
for (const f of failed) console.log(` ✗ ${f.name}`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error('FAILED:', err.stack || err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
+6
-4
@@ -107,12 +107,14 @@ async function main() {
|
||||
const pageG = await browser.newPage({ viewport: { width: 1280, height: 900 } });
|
||||
await pageG.goto(`${BASE}/?source=api&view=table`, { waitUntil: 'domcontentloaded' });
|
||||
await pageG.waitForSelector('table.monitor-table tbody tr[data-status]', { timeout: 20000 });
|
||||
await pageG.waitForTimeout(1200);
|
||||
// 等首轮刷新结束（倒计时在刷新完成时才重置），否则读到的是加载中的旧值，偏差会被算进断言
|
||||
await pageG.waitForFunction(() => document.getElementById('refresh-btn').textContent === '刷新' && !document.getElementById('refresh-btn').disabled, null, { timeout: 45000 });
|
||||
const shownText = await pageG.evaluate(() => document.getElementById('countdown').textContent);
|
||||
const shownSec = Number((shownText.match(/(\d+)/) ?? [])[1]);
|
||||
// 期望值需在当前时刻重算：面板显示的是「服务端上次更新 + 一个周期 - 现在」
|
||||
const expectSec = Math.round((updatedMs + cadence * 1000 - Date.now()) / 1000);
|
||||
check('倒计时对齐服务端下次更新时刻', Math.abs(shownSec - expectSec) <= 4, `面板 ${shownText}（服务端还有约 ${expectSec}s，节奏 ${cadence}s）`);
|
||||
const shownSec = Number((shownText.match(/(\d+)/) ?? [])[1]);
|
||||
check('倒计时对齐服务端下次更新时刻', shownSec >= expectSec - 2 && shownSec <= expectSec + 4, `面板 ${shownText}（服务端还有约 ${expectSec}s，节奏 ${cadence}s）`);
|
||||
// 注：无头浏览器会冻结页面定时器（实测 performance.now() 会在采样间隔内跳跃十几秒），
|
||||
// 因此不断言「N 秒内递减」，只断言与公式一致、且不退化为整周期重计——这两条不依赖定时器
|
||||
check('倒计时不会退化为从整周期重新计时', shownSec <= Math.max(5, Math.min(cadence, Number(cfg.settings.refreshInterval) || cadence)), `显示 ${shownSec}s`);
|
||||
await pageG.close();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user