feat(theme): 全局装饰遮罩 + 尺寸统一；全局审阅修复对比度/暗色/平板布局

用户反馈的两点： 1. 遮罩看不出效果 → 人物与单车统一全局半透明 settings.decoOpacity（默认 .78）（此前 0.92/0.80 不一致且几乎无感），各自保留边缘渐隐 2. 切视图时人物比例变化 → 删掉卡片视图专用的 300px 高度，两种视图尺寸一致 3. 保留原始素材 → 原图归档 assets-src/，处理流程固化为 scripts/prepare-artwork.py 全局审阅发现并修复： - 无障碍对比度：两套主题的状态色当文字用时远低于 AA（最低 2.56:1）→ 双色体系（填充色 ≥3:1 保持鲜亮 / 文字色 ≥4.5:1 同色系加深），暗色模式同步 - 暗色模式主题失效：顶栏/卡片/表头/分组行是硬编码白色 → 改为随模式切换的变量 - 平板竖屏 768px 表格需内部横滚 242px → 自动切卡片阈值 700 → 1024 - Cloudflare Worker 快照补齐 dataUpdatedAt/updateIntervalSec/dataFilter - 清理失效 CSS（.logo .halo）测试脚本修掉两个自身 bug（均为误报）：color(srgb/…) 与半透明底的解析、渐变背景被误判为透明。verify-views 新增对比度断言 8 条，四套合计 89 项全通过。
2026-10-13 21:55:44 +08:00
parent 6f9a2d33ce
commit a7408e2bb5
26 changed files with 581 additions and 324 deletions
@@ -81,7 +81,9 @@ 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/ 原图生成透明素材（边界 + 封闭区域两步抠图）
+├── assets-src/                   # 插画原始素材（AI 生成的白底原图，供重新处理）
 ├── local.monitors.json           # 私有配置（不入库）：真实地址、API Key
 ├── edge/cloudflare/              # Cloudflare Workers 边缘探针
 │   ├── worker.js                 # cron 探针 + KV 存储 + /api/* + 静态伺服
@@ -106,7 +108,8 @@ shiroko-monitor/
    "description": "轻量级服务监控面板",
    "view": "table",                // 默认视图：table | cards
    "theme": "shiroko",             // shiroko（砂狼白子）| default
-    "artwork": "",                  // 可选：立绘图片路径（相对 public/），如 assets/character.png
+    "artwork": "",                  // 立绘图片路径（相对 public/），留空则不显示
+    "decoOpacity": 0.78,            // 人物/单车装饰的全局透明度（0~1，一个值同时作用于两者）
    "dataFilter": "both",           // both | config | uptimerobot（详见「面板形态与数据源」）
    "refreshInterval": 30,          // 面板检查数据的最大间隔（秒，最小 5）；实际对齐服务端更新节奏
    "dataSource": "auto",           // auto | api | static | browser
@@ -262,7 +265,7 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自

 指定方式（优先级从高到低）：URL 参数 `?view=table|cards` → 浏览器上次选择（localStorage）→ `settings.view` → 表格。

-**移动端**：窄屏（≤700px）在用户没有显式选择过视图时**自动使用卡片**（表格在手机上必须横向拖动，体验差），并在横竖屏切换时重算；顶栏在 ≤820px 改为「标题 / 统计 / 控件」三行，立绘与固定装饰自动撤掉。
+**移动端与窄窗口**：视口窄于 **1024px**（表格含心率图与可用率条，实测最小舒适宽度约 1010px）且用户没有显式选择过视图时，**自动使用卡片**；横竖屏切换时重算，显式选择（`?view=` 或点过切换器）始终优先。顶栏在 ≤820px 改为「标题 / 统计 / 控件」三行，立绘与固定装饰自动撤掉。

 ### 数据源过滤

@@ -304,13 +307,13 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
 | 位置 | 元素 | 取自设定 |
 | --- | --- | --- |
 | 左上 logo / 浏览器图标 | **简约风半身头像**（光环 + 狼耳 + 围巾）+ 青色光环环（呼吸式外扩动画） | 生成插画的半身裁切 |
-| 右下角 | **简约风全身立绘**（透明底，约 44vh，窄身设计：实测 1280 / 1440 / 1920 下都不遮挡表格，页面也无横向滚动）；半透明 + 上下渐隐，融入背景 | 生成插画 |
+| 右下角 | **简约风全身立绘**（透明底，窄身设计：实测 1280 / 1440 / 1920 下都不遮挡表格，页面也无横向滚动）；全局半透明（`settings.decoOpacity`，默认 0.78）+ 上下渐隐，融入背景 | 生成插画 |
 | 顶栏底边 | **天蓝色围巾飘带**：波浪形状 + 5 处褶皱纹路（自绘） | 天蓝色围巾是星野送给她的信物 |
 | 页脚下方 | **光环水印**（自绘：倾斜椭圆环 + 四方位带圆头的短杆） | 白子的光环是倾斜的椭圆环，四个方位各有一条带圆头的短杆，整体形似全息瞄准镜准星 |
 | 状态点 | **迷你光环**（外圈 + 中心点，在线时缓慢脉冲外扩） | 光环是基沃托斯学生的标志 |
 | 分组标题 | **青色倒十字发饰**（旋转 45°，自绘） | 她左侧刘海上别的青色十字发夹 |
 | 刷新按钮加载态 | **公路车轮**（轮圈 + 辐条 + 花鼓）旋转 | 她最爱的公路车（Bianchi ARIA 原型） |
-| 左下角 | 公路车插画（简约扁平风，与人物同一套视觉语言；半透明 + 两端渐隐） | 她最爱的公路车（Bianchi ARIA 原型） |
+| 左下角 | 公路车插画（简约扁平风，与人物同一套视觉语言；与人物共用同一个全局透明度 `decoOpacity` + 两端渐隐） | 她最爱的公路车（Bianchi ARIA 原型） |
 | 配色 | 天蓝 / 青 + 藏蓝 + 灰白；「正常」色改为青绿（`#12b0a2`） | 阿拜多斯藏蓝校服 + 天蓝围巾 + 灰白发色 |

 左下公路车、页脚光环、右下立绘构成页脚下方的一条装饰带，三者互不遮挡。
@@ -441,6 +444,27 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
 - [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」，tooltip 内含服务端更新节奏与快照生成时间
 - [x] `scripts/verify.cjs` 适配纯外部数据源部署（自动跳过不适用的探测类断言），并新增「倒计时对齐服务端」断言

+### 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] **修复抠图漏区**：此前只用「边界洪泛」抠底，光环**环内**、单车**车架三角区与轮圈内扇形**这些被围起来的封闭白色区域没被处理，会留成白块。改为再补一次「封闭白色区域」按面积清理（人物/单车/图标三张图都处理了；脸部、袜子等服装白已确认保留）
@@ -509,9 +533,11 @@ UPTIMEROBOT_API_KEY=ur... node scripts/verify-uptimerobot.cjs           # UR 映
 | --- | --- |
 | ![shiroko](docs/screenshot-desktop.png) | ![default](docs/screenshot-theme-default.png) |

-| 卡片视图（白子主题） | 移动端 |
+| 深色模式（白子主题） | 卡片视图（白子主题） |
 | --- | --- |
-| ![cards](docs/screenshot-view-cards.png) | ![mobile](docs/screenshot-mobile.png) |
+| ![dark](docs/screenshot-dark.png) | ![cards](docs/screenshot-view-cards.png) |
+
+移动端（390×844，自动切卡片 + 顶栏三行）：`docs/screenshot-mobile.png`

 UptimeRobot 数据源（`?filter=uptimerobot`，截图中含真实监控名与域名，公开发布前可自行删除）：`docs/screenshot-uptimerobot.png`；演示数据 90 天满档：`docs/screenshot-demo.png`

@@ -11,7 +11,7 @@

 import { connect } from 'cloudflare:sockets';

-const VERSION = '0.8.3';
+const VERSION = '0.9.0';
 const HISTORY_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const USER_AGENT = 'shiroko-monitor/0.3 (lightweight uptime panel)';
@@ -202,10 +202,25 @@ async function runChecks(env) {
    }
  }

+  // 与本地探针保持同一份快照口径：dataUpdatedAt / updateIntervalSec / dataFilter
+  // 面板据此把倒计时对齐服务端节奏，并按同一过滤口径展示
+  const filter = ['both', 'config', 'uptimerobot'].includes(config.settings?.dataFilter) ? config.settings.dataFilter : 'both';
+  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,
    stats: {
      total: (config.monitors ?? []).length,
      up,
@@ -214,6 +229,7 @@ async function runChecks(env) {
      avgLatency: latencyCount ? Math.round(latencySum / latencyCount) : null,
      avgUptime90: uptimeTotal ? Math.round((uptimeUp / uptimeTotal) * 1000) / 10 : null,
    },
+    sources: {},
    monitors,
  };
  await env.MONITOR_KV.put('state', JSON.stringify(next));
@@ -35,7 +35,7 @@ const CONCURRENCY = 8;
 const WRITE_DEBOUNCE_MS = 300;
 const DEFAULT_INTERVAL_SEC = 60;
 const PORT = Number(process.env.PORT || 8787);
-const VERSION = '0.8.3';
+const VERSION = '0.9.0';
 const UR_DEFAULT_POLL_SEC = 300;
 const UR_MIN_REFRESH_GAP_MS = 60000;

@@ -1,4 +1,4 @@
-const VERSION = '0.8.3';
+const VERSION = '0.9.0';
 const HB_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const BROWSER_CONCURRENCY = 6;
@@ -507,9 +507,12 @@ function renderViewSwitch() {
  }
 }

-// 窄屏（手机）判定：表格在最窄的屏幕上必须横向拖动，不如默认给卡片视图
+// 表格在窄屏必须横向滚动。实测表格最小舒适宽度约 1010px（列含心率图与可用率条），
+// 因此视口窄于 1024px 时默认落到卡片；用户显式选择过视图则以选择为准。
+const TABLE_MIN_WIDTH = 1024;
+
 function isNarrowScreen() {
-  return window.matchMedia('(max-width: 700px)').matches;
+  return window.innerWidth < TABLE_MIN_WIDTH;
 }

 function resolveView() {
@@ -792,6 +795,9 @@ 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);
@@ -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;
@@ -28,10 +31,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;
@@ -101,15 +107,15 @@ 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;
@@ -150,9 +156,6 @@ body {
 .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); }

-/* 光环仅在白子主题下显示 */
-.logo .halo { display: none; }
-
 /* ---------- 视图切换 ---------- */
 .view-switch { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
 .view-btn {
@@ -286,7 +289,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;
@@ -322,8 +325,8 @@ 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; }
+.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) {
@@ -374,9 +377,9 @@ body[data-view="table"] .grid { display: block; }

 .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); }
+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: nowrap; }
 .t-name .type-badge { margin-left: 8px; }
 .t-target {
@@ -14,22 +14,33 @@ body[data-theme="shiroko"] {
  --surface: #ffffff;
  --border: #d3e6f5;
  --text: #17253d;
-  --text-2: #5d7b9a;
-  --up: #12b0a2;
+  --text-2: #55708c;
+  --up: #0da093;
+  --up-text: #0e7c72;
  --up-bg: #e4faf6;
  --down: #e0524e;
+  --down-text: #c0362f;
  --down-bg: #fdecec;
-  --pending: #d99413;
+  --pending: #c07d0d;
+  --pending-text: #8a5a00;
  --pending-bg: #fff7e6;
-  --accent: #1e9fd4;
-  --uptime-ok: #12b0a2;
-  --uptime-warn: #e5a52c;
+  --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) {
@@ -40,15 +51,25 @@ body[data-theme="shiroko"] {
    --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;
  }
 }

@@ -89,8 +110,8 @@ body[data-theme="shiroko"]::before {
  height: 93px;
  pointer-events: none;
  z-index: 0;
-  /* 半透明 + 两端渐隐，弱化「一块贴图」的突兀感 */
-  opacity: 0.8;
+  /* 全局半透明 + 两端渐隐，弱化「一块贴图」的突兀感 */
+  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%);
@@ -99,7 +120,7 @@ body[data-theme="shiroko"]::before {

 /* ---------- 顶栏：天蓝到白 + 底部围巾飘带 ---------- */
 body[data-theme="shiroko"] .topbar {
-  background: linear-gradient(180deg, #ffffff 0%, #f6fcff 100%);
+  background: linear-gradient(180deg, var(--sh-panel-1) 0%, var(--sh-panel-2) 100%);
  border-bottom: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
@@ -130,7 +151,7 @@ body[data-theme="shiroko"] .logo {
  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-navy);
+  color: var(--sh-title);
  letter-spacing: 0.04em;
 }

@@ -178,7 +199,7 @@ body[data-theme="shiroko"] .card[data-status="up"] .dot { animation: halo-pulse
 /* ---------- 卡片 / 表格 / 交互 ---------- */
 body[data-theme="shiroko"] .card {
  border-left-width: 3px;
-  background: linear-gradient(180deg, #ffffff, #fbfdff);
+  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 {
@@ -187,15 +208,15 @@ body[data-theme="shiroko"] .view-btn.active {
 }
 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, #f7fcff, #eef7fd);
-  color: var(--sh-navy);
+  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, #eaf6fd, #f7fcff);
+  background: linear-gradient(90deg, var(--sh-group), var(--sh-th-1));
  border-left: 3px solid var(--sh-sky-deep);
-  color: var(--sh-navy);
+  color: var(--sh-title);
 }
 body[data-theme="shiroko"] .table-wrap { box-shadow: var(--shadow); }
 body[data-theme="shiroko"] .uptime-cell.lv-none {
@@ -208,20 +229,21 @@ body[data-theme="shiroko"] #refresh-btn .wheel { animation: wheel-spin 0.9s line
@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(44vh, 380px);
+  height: min(40vh, 340px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
-  /* 半透明 + 上下渐隐遮罩：让它像背景插画而不是贴上去的贴纸 */
-  opacity: 0.92;
-  filter: drop-shadow(0 6px 18px rgb(23 60 100 / 12%));
-  mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
-  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 90%, rgb(0 0 0 / 40%) 100%);
+  /* 全局半透明（整张图统一淡化）+ 上下渐隐，读起来是背景插画而不是贴上去的贴纸 */
+  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) {
@@ -233,8 +255,7 @@ body[data-theme="shiroko"] .artwork {
@media (max-height: 520px) {
  body[data-theme="shiroko"] .artwork { display: none; }
 }
-/* 卡片视图行数多、卡片更靠右下，立绘再收一档，尽量让它落在卡片之外的角落 */
-body[data-theme="shiroko"][data-view="cards"] .artwork { height: min(34vh, 300px); }
+/* 注：立绘尺寸在卡片/表格两种视图下必须保持一致，不再按视图改高度 */

 /* 内容层置于装饰之上 */
 body[data-theme="shiroko"] .grid,
@@ -56,7 +56,7 @@
    <span id="ur-chip" class="footer-item warn-chip" hidden>UptimeRobot 同步异常</span>
    <span id="updated-at" class="footer-item">–</span>
    <span id="countdown" class="footer-item">–</span>
-    <span class="footer-item version">shiroko-monitor v0.8.3</span>
+    <span class="footer-item version">shiroko-monitor v0.9.0</span>
  </footer>

  <script type="module" src="assets/app.js"></script>
@@ -5,6 +5,7 @@
    "view": "table",
    "theme": "shiroko",
    "artwork": "assets/shiroko-figure.webp",
+    "decoOpacity": 0.78,
    "dataFilter": "uptimerobot",
    "refreshInterval": 300,
    "dataSource": "auto",
@@ -1,8 +1,8 @@
 {
  "prober": "shiroko-monitor-node/0.7.0",
  "demo": false,
-  "generatedAt": "2026-10-13T13:06:27.328Z",
-  "dataUpdatedAt": "2026-10-13T13:05:50.691Z",
+  "generatedAt": "2026-10-13T13:55:30.243Z",
+  "dataUpdatedAt": "2026-10-13T13:54:57.645Z",
  "updateIntervalSec": 300,
  "dataFilter": "uptimerobot",
  "stats": {
@@ -10,11 +10,11 @@
    "up": 5,
    "down": 1,
    "pending": 0,
-    "avgLatency": 991,
+    "avgLatency": 1110,
    "avgUptime90": 83.3,
    "memory": {
-      "rssMB": 77.5,
-      "heapUsedMB": 10.7,
+      "rssMB": 78.9,
+      "heapUsedMB": 10.2,
      "heapTotalMB": 16
    }
  },
@@ -23,200 +23,200 @@
      "enabled": true,
      "ok": true,
      "error": null,
-      "lastSyncAt": "2026-10-13T13:03:02.502Z",
+      "lastSyncAt": "2026-10-13T13:52:32.984Z",
      "count": 6,
      "syncing": false,
-      "lastSyncMs": 1791896580947
+      "lastSyncMs": 1791899551553
    }
  },
  "monitors": {
    "ur-792059439": {
      "status": "up",
-      "latency": 277,
+      "latency": 247,
      "code": null,
      "detail": "UptimeRobot：运行正常",
-      "lastCheck": "2026-10-13T12:58:00.000Z",
+      "lastCheck": "2026-10-13T13:48:00.000Z",
      "history": [
        {
-          "t": "2026-10-12T13:50:00.000Z",
+          "t": "2026-10-12T15:00:00.000Z",
          "ok": true,
-          "ms": 732
+          "ms": 312
        },
        {
-          "t": "2026-10-12T14:30:00.000Z",
+          "t": "2026-10-12T15:40:00.000Z",
          "ok": true,
-          "ms": 663
+          "ms": 336
        },
        {
-          "t": "2026-10-12T15:10:00.000Z",
+          "t": "2026-10-12T16:20:00.000Z",
          "ok": true,
-          "ms": 433
+          "ms": 275
        },
        {
-          "t": "2026-10-12T15:50:00.000Z",
+          "t": "2026-10-12T17:00:00.000Z",
          "ok": true,
-          "ms": 355
+          "ms": 255
        },
        {
-          "t": "2026-10-12T16:30:00.000Z",
+          "t": "2026-10-12T17:40:00.000Z",
          "ok": true,
-          "ms": 293
+          "ms": 304
        },
        {
-          "t": "2026-10-12T17:10:00.000Z",
+          "t": "2026-10-12T18:20:00.000Z",
          "ok": true,
-          "ms": 220
+          "ms": 323
        },
        {
-          "t": "2026-10-12T17:55:00.000Z",
+          "t": "2026-10-12T19:00:00.000Z",
          "ok": true,
-          "ms": 321
+          "ms": 328
        },
        {
-          "t": "2026-10-12T18:35:00.000Z",
+          "t": "2026-10-12T19:40:00.000Z",
          "ok": true,
-          "ms": 295
+          "ms": 304
        },
        {
-          "t": "2026-10-12T19:15:00.000Z",
+          "t": "2026-10-12T20:20:00.000Z",
+          "ok": true,
+          "ms": 265
+        },
+        {
+          "t": "2026-10-12T21:00:00.000Z",
+          "ok": true,
+          "ms": 294
+        },
+        {
+          "t": "2026-10-12T21:40:00.000Z",
+          "ok": true,
+          "ms": 379
+        },
+        {
+          "t": "2026-10-12T22:20:00.000Z",
+          "ok": true,
+          "ms": 176
+        },
+        {
+          "t": "2026-10-12T23:05:00.000Z",
+          "ok": true,
+          "ms": 286
+        },
+        {
+          "t": "2026-10-12T23:45:00.000Z",
+          "ok": true,
+          "ms": 219
+        },
+        {
+          "t": "2026-10-13T00:25:00.000Z",
+          "ok": true,
+          "ms": 207
+        },
+        {
+          "t": "2026-10-13T01:05:00.000Z",
+          "ok": true,
+          "ms": 162
+        },
+        {
+          "t": "2026-10-13T01:45:00.000Z",
+          "ok": true,
+          "ms": 160
+        },
+        {
+          "t": "2026-10-13T02:25:00.000Z",
+          "ok": true,
+          "ms": 199
+        },
+        {
+          "t": "2026-10-13T03:05:00.000Z",
+          "ok": true,
+          "ms": 188
+        },
+        {
+          "t": "2026-10-13T03:45:00.000Z",
+          "ok": true,
+          "ms": 130
+        },
+        {
+          "t": "2026-10-13T04:25:00.000Z",
+          "ok": true,
+          "ms": 494
+        },
+        {
+          "t": "2026-10-13T05:05:00.000Z",
          "ok": true,
          "ms": 310
        },
        {
-          "t": "2026-10-12T19:55:00.000Z",
+          "t": "2026-10-13T05:45:00.000Z",
          "ok": true,
-          "ms": 256
+          "ms": 354
        },
        {
-          "t": "2026-10-12T20:35:00.000Z",
+          "t": "2026-10-13T06:25:00.000Z",
          "ok": true,
-          "ms": 185
+          "ms": 275
        },
        {
-          "t": "2026-10-12T21:15:00.000Z",
+          "t": "2026-10-13T07:05:00.000Z",
          "ok": true,
-          "ms": 293
+          "ms": 231
        },
        {
-          "t": "2026-10-12T21:55:00.000Z",
+          "t": "2026-10-13T07:45:00.000Z",
          "ok": true,
-          "ms": 270
+          "ms": 237
        },
        {
-          "t": "2026-10-12T22:35:00.000Z",
+          "t": "2026-10-13T08:25:00.000Z",
          "ok": true,
-          "ms": 181
+          "ms": 467
        },
        {
-          "t": "2026-10-12T23:15:00.000Z",
+          "t": "2026-10-13T09:05:00.000Z",
          "ok": true,
-          "ms": 225
+          "ms": 409
        },
        {
-          "t": "2026-10-12T23:55:00.000Z",
+          "t": "2026-10-13T09:45:00.000Z",
          "ok": true,
-          "ms": 387
+          "ms": 424
        },
        {
-          "t": "2026-10-13T00:35:00.000Z",
+          "t": "2026-10-13T10:25:00.000Z",
          "ok": true,
-          "ms": 288
+          "ms": 171
        },
        {
-          "t": "2026-10-13T01:15:00.000Z",
+          "t": "2026-10-13T11:05:00.000Z",
          "ok": true,
-          "ms": 167
+          "ms": 377
        },
        {
-          "t": "2026-10-13T01:55:00.000Z",
+          "t": "2026-10-13T11:45:00.000Z",
          "ok": true,
-          "ms": 157
+          "ms": 304
        },
        {
-          "t": "2026-10-13T02:35:00.000Z",
+          "t": "2026-10-13T12:25:00.000Z",
          "ok": true,
-          "ms": 228
+          "ms": 426
        },
        {
-          "t": "2026-10-13T03:15:00.000Z",
+          "t": "2026-10-13T13:08:00.000Z",
          "ok": true,
-          "ms": 225
+          "ms": 250
        },
        {
-          "t": "2026-10-13T03:55:00.000Z",
+          "t": "2026-10-13T13:48:00.000Z",
          "ok": true,
-          "ms": 99
-        },
-        {
-          "t": "2026-10-13T04:40:00.000Z",
-          "ok": true,
-          "ms": 471
-        },
-        {
-          "t": "2026-10-13T05:20:00.000Z",
-          "ok": true,
-          "ms": 305
-        },
-        {
-          "t": "2026-10-13T06:00:00.000Z",
-          "ok": true,
-          "ms": 314
-        },
-        {
-          "t": "2026-10-13T06:40:00.000Z",
-          "ok": true,
-          "ms": 245
-        },
-        {
-          "t": "2026-10-13T07:20:00.000Z",
-          "ok": true,
-          "ms": 295
-        },
-        {
-          "t": "2026-10-13T08:00:00.000Z",
-          "ok": true,
-          "ms": 262
-        },
-        {
-          "t": "2026-10-13T08:40:00.000Z",
-          "ok": true,
-          "ms": 440
-        },
-        {
-          "t": "2026-10-13T09:20:00.000Z",
-          "ok": true,
-          "ms": 302
-        },
-        {
-          "t": "2026-10-13T10:00:00.000Z",
-          "ok": true,
-          "ms": 437
-        },
-        {
-          "t": "2026-10-13T10:40:00.000Z",
-          "ok": true,
-          "ms": 246
-        },
-        {
-          "t": "2026-10-13T11:20:00.000Z",
-          "ok": true,
-          "ms": 395
-        },
-        {
-          "t": "2026-10-13T12:22:00.000Z",
-          "ok": true,
-          "ms": 302
-        },
-        {
-          "t": "2026-10-13T12:58:00.000Z",
-          "ok": true,
-          "ms": 277
+          "ms": 247
        }
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
-          "up": 23
+          "total": 35,
+          "up": 35
        }
      },
      "meta": {
@@ -243,16 +243,11 @@
    },
    "ur-795497022": {
      "status": "up",
-      "latency": 749,
+      "latency": 1131,
      "code": null,
      "detail": "UptimeRobot：运行正常",
-      "lastCheck": "2026-10-13T13:02:00.000Z",
+      "lastCheck": "2026-10-13T13:50:00.000Z",
      "history": [
-        {
-          "t": "2026-10-12T13:55:00.000Z",
-          "ok": true,
-          "ms": 1017
-        },
        {
          "t": "2026-10-12T14:35:00.000Z",
          "ok": true,
@@ -414,20 +409,25 @@
          "ms": 740
        },
        {
-          "t": "2026-10-13T12:25:00.000Z",
+          "t": "2026-10-13T12:40:00.000Z",
          "ok": true,
-          "ms": 819
+          "ms": 771
        },
        {
-          "t": "2026-10-13T13:02:00.000Z",
+          "t": "2026-10-13T13:13:00.000Z",
          "ok": true,
-          "ms": 749
+          "ms": 772
+        },
+        {
+          "t": "2026-10-13T13:50:00.000Z",
+          "ok": true,
+          "ms": 1131
        }
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
-          "up": 23
+          "total": 35,
+          "up": 35
        }
      },
      "meta": {
@@ -454,191 +454,191 @@
    },
    "ur-795556828": {
      "status": "up",
-      "latency": 414,
+      "latency": 224,
      "code": null,
      "detail": "UptimeRobot：运行正常",
-      "lastCheck": "2026-10-13T12:58:00.000Z",
+      "lastCheck": "2026-10-13T13:49:00.000Z",
      "history": [
        {
-          "t": "2026-10-12T13:50:00.000Z",
+          "t": "2026-10-12T14:55:00.000Z",
          "ok": true,
-          "ms": 276
+          "ms": 225
        },
        {
-          "t": "2026-10-12T14:30:00.000Z",
+          "t": "2026-10-12T15:35:00.000Z",
          "ok": true,
-          "ms": 288
+          "ms": 275
        },
        {
-          "t": "2026-10-12T15:10:00.000Z",
+          "t": "2026-10-12T16:15:00.000Z",
          "ok": true,
-          "ms": 240
+          "ms": 450
        },
        {
-          "t": "2026-10-12T15:50:00.000Z",
+          "t": "2026-10-12T16:55:00.000Z",
          "ok": true,
-          "ms": 348
+          "ms": 281
        },
        {
-          "t": "2026-10-12T16:30:00.000Z",
+          "t": "2026-10-12T17:40:00.000Z",
          "ok": true,
-          "ms": 378
+          "ms": 320
        },
        {
-          "t": "2026-10-12T17:10:00.000Z",
+          "t": "2026-10-12T18:20:00.000Z",
          "ok": true,
-          "ms": 295
+          "ms": 287
        },
        {
-          "t": "2026-10-12T17:50:00.000Z",
+          "t": "2026-10-12T19:00:00.000Z",
          "ok": true,
-          "ms": 317
+          "ms": 283
        },
        {
-          "t": "2026-10-12T18:30:00.000Z",
+          "t": "2026-10-12T19:40:00.000Z",
          "ok": true,
-          "ms": 319
+          "ms": 464
        },
        {
-          "t": "2026-10-12T19:10:00.000Z",
+          "t": "2026-10-12T20:20:00.000Z",
          "ok": true,
-          "ms": 252
+          "ms": 187
        },
        {
-          "t": "2026-10-12T19:50:00.000Z",
+          "t": "2026-10-12T21:00:00.000Z",
          "ok": true,
-          "ms": 551
+          "ms": 233
        },
        {
-          "t": "2026-10-12T20:30:00.000Z",
-          "ok": true,
-          "ms": 235
-        },
-        {
-          "t": "2026-10-12T21:10:00.000Z",
-          "ok": true,
-          "ms": 294
-        },
-        {
-          "t": "2026-10-12T21:50:00.000Z",
-          "ok": true,
-          "ms": 186
-        },
-        {
-          "t": "2026-10-12T22:30:00.000Z",
-          "ok": true,
-          "ms": 183
-        },
-        {
-          "t": "2026-10-12T23:10:00.000Z",
-          "ok": true,
-          "ms": 244
-        },
-        {
-          "t": "2026-10-12T23:50:00.000Z",
-          "ok": true,
-          "ms": 206
-        },
-        {
-          "t": "2026-10-13T00:30:00.000Z",
-          "ok": true,
-          "ms": 197
-        },
-        {
-          "t": "2026-10-13T01:10:00.000Z",
-          "ok": true,
-          "ms": 155
-        },
-        {
-          "t": "2026-10-13T01:50:00.000Z",
-          "ok": true,
-          "ms": 119
-        },
-        {
-          "t": "2026-10-13T02:30:00.000Z",
+          "t": "2026-10-12T21:40:00.000Z",
          "ok": true,
          "ms": 213
        },
        {
-          "t": "2026-10-13T03:10:00.000Z",
+          "t": "2026-10-12T22:20:00.000Z",
          "ok": true,
-          "ms": 151
+          "ms": 235
        },
        {
-          "t": "2026-10-13T03:50:00.000Z",
+          "t": "2026-10-12T23:05:00.000Z",
          "ok": true,
-          "ms": 231
+          "ms": 241
        },
        {
-          "t": "2026-10-13T04:35:00.000Z",
+          "t": "2026-10-12T23:45:00.000Z",
          "ok": true,
-          "ms": 194
+          "ms": 230
        },
        {
-          "t": "2026-10-13T05:15:00.000Z",
+          "t": "2026-10-13T00:25:00.000Z",
          "ok": true,
-          "ms": 211
+          "ms": 244
        },
        {
-          "t": "2026-10-13T05:55:00.000Z",
+          "t": "2026-10-13T01:05:00.000Z",
          "ok": true,
-          "ms": 167
+          "ms": 133
        },
        {
-          "t": "2026-10-13T06:35:00.000Z",
+          "t": "2026-10-13T01:45:00.000Z",
          "ok": true,
-          "ms": 240
+          "ms": 127
        },
        {
-          "t": "2026-10-13T07:15:00.000Z",
+          "t": "2026-10-13T02:25:00.000Z",
          "ok": true,
-          "ms": 254
+          "ms": 182
        },
        {
-          "t": "2026-10-13T07:55:00.000Z",
+          "t": "2026-10-13T03:05:00.000Z",
          "ok": true,
-          "ms": 503
+          "ms": 413
        },
        {
-          "t": "2026-10-13T08:35:00.000Z",
+          "t": "2026-10-13T03:45:00.000Z",
          "ok": true,
-          "ms": 224
+          "ms": 229
        },
        {
-          "t": "2026-10-13T09:15:00.000Z",
+          "t": "2026-10-13T04:25:00.000Z",
+          "ok": true,
+          "ms": 255
+        },
+        {
+          "t": "2026-10-13T05:05:00.000Z",
+          "ok": true,
+          "ms": 150
+        },
+        {
+          "t": "2026-10-13T05:45:00.000Z",
+          "ok": true,
+          "ms": 201
+        },
+        {
+          "t": "2026-10-13T06:25:00.000Z",
+          "ok": true,
+          "ms": 232
+        },
+        {
+          "t": "2026-10-13T07:05:00.000Z",
          "ok": true,
          "ms": 247
        },
        {
-          "t": "2026-10-13T10:00:00.000Z",
+          "t": "2026-10-13T07:45:00.000Z",
          "ok": true,
-          "ms": 455
+          "ms": 559
        },
        {
-          "t": "2026-10-13T10:40:00.000Z",
+          "t": "2026-10-13T08:25:00.000Z",
          "ok": true,
-          "ms": 384
+          "ms": 219
        },
        {
-          "t": "2026-10-13T11:20:00.000Z",
+          "t": "2026-10-13T09:05:00.000Z",
          "ok": true,
-          "ms": 334
+          "ms": 230
        },
        {
-          "t": "2026-10-13T12:22:00.000Z",
+          "t": "2026-10-13T09:45:00.000Z",
          "ok": true,
-          "ms": 393
+          "ms": 432
        },
        {
-          "t": "2026-10-13T12:58:00.000Z",
+          "t": "2026-10-13T10:25:00.000Z",
          "ok": true,
-          "ms": 414
+          "ms": 341
+        },
+        {
+          "t": "2026-10-13T11:05:00.000Z",
+          "ok": true,
+          "ms": 233
+        },
+        {
+          "t": "2026-10-13T11:45:00.000Z",
+          "ok": true,
+          "ms": 396
+        },
+        {
+          "t": "2026-10-13T12:25:00.000Z",
+          "ok": true,
+          "ms": 308
+        },
+        {
+          "t": "2026-10-13T13:13:00.000Z",
+          "ok": true,
+          "ms": 347
+        },
+        {
+          "t": "2026-10-13T13:49:00.000Z",
+          "ok": true,
+          "ms": 224
        }
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
-          "up": 23
+          "total": 35,
+          "up": 35
        }
      },
      "meta": {
@@ -665,16 +665,11 @@
    },
    "ur-792059414": {
      "status": "up",
-      "latency": 3103,
+      "latency": 3462,
      "code": null,
      "detail": "UptimeRobot：运行正常",
-      "lastCheck": "2026-10-13T12:59:00.000Z",
+      "lastCheck": "2026-10-13T13:50:00.000Z",
      "history": [
-        {
-          "t": "2026-10-12T14:10:00.000Z",
-          "ok": true,
-          "ms": 2478
-        },
        {
          "t": "2026-10-12T14:55:00.000Z",
          "ok": true,
@@ -801,40 +796,50 @@
          "ms": 1861
        },
        {
-          "t": "2026-10-13T09:10:00.000Z",
+          "t": "2026-10-13T09:05:00.000Z",
          "ok": true,
-          "ms": 1991
+          "ms": 2001
        },
        {
-          "t": "2026-10-13T09:55:00.000Z",
+          "t": "2026-10-13T09:45:00.000Z",
          "ok": true,
-          "ms": 1597
+          "ms": 1652
        },
        {
-          "t": "2026-10-13T10:40:00.000Z",
+          "t": "2026-10-13T10:25:00.000Z",
          "ok": true,
-          "ms": 2816
+          "ms": 2264
        },
        {
-          "t": "2026-10-13T11:20:00.000Z",
+          "t": "2026-10-13T11:05:00.000Z",
          "ok": true,
-          "ms": 1960
+          "ms": 2105
        },
        {
-          "t": "2026-10-13T12:19:00.000Z",
+          "t": "2026-10-13T11:45:00.000Z",
          "ok": true,
-          "ms": 2258
+          "ms": 1562
        },
        {
-          "t": "2026-10-13T12:59:00.000Z",
+          "t": "2026-10-13T12:25:00.000Z",
          "ok": true,
-          "ms": 3103
+          "ms": 2773
+        },
+        {
+          "t": "2026-10-13T13:10:00.000Z",
+          "ok": true,
+          "ms": 2536
+        },
+        {
+          "t": "2026-10-13T13:50:00.000Z",
+          "ok": true,
+          "ms": 3462
        }
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
-          "up": 23
+          "total": 35,
+          "up": 35
        }
      },
      "meta": {
@@ -861,21 +866,11 @@
    },
    "ur-798788113": {
      "status": "up",
-      "latency": 410,
+      "latency": 488,
      "code": null,
      "detail": "UptimeRobot：运行正常",
-      "lastCheck": "2026-10-13T12:59:00.000Z",
+      "lastCheck": "2026-10-13T13:50:00.000Z",
      "history": [
-        {
-          "t": "2026-10-12T13:45:00.000Z",
-          "ok": true,
-          "ms": 361
-        },
-        {
-          "t": "2026-10-12T14:25:00.000Z",
-          "ok": true,
-          "ms": 346
-        },
        {
          "t": "2026-10-12T15:05:00.000Z",
          "ok": true,
@@ -1032,25 +1027,30 @@
          "ms": 381
        },
        {
-          "t": "2026-10-13T11:43:00.000Z",
+          "t": "2026-10-13T11:45:00.000Z",
          "ok": true,
-          "ms": 1257
+          "ms": 1028
        },
        {
-          "t": "2026-10-13T12:23:00.000Z",
+          "t": "2026-10-13T12:25:00.000Z",
          "ok": true,
-          "ms": 471
+          "ms": 601
        },
        {
-          "t": "2026-10-13T12:59:00.000Z",
+          "t": "2026-10-13T13:14:00.000Z",
          "ok": true,
-          "ms": 410
+          "ms": 428
+        },
+        {
+          "t": "2026-10-13T13:50:00.000Z",
+          "ok": true,
+          "ms": 488
        }
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
-          "up": 23
+          "total": 35,
+          "up": 35
        }
      },
      "meta": {
@@ -1090,7 +1090,7 @@
      ],
      "daily": {
        "2026-10-13": {
-          "total": 23,
+          "total": 35,
          "up": 0
        }
      },
@@ -0,0 +1,115 @@
+#!/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)
+    icon.resize((64, 64), Image.LANCZOS).save(DST / "favicon-shiroko.png", "PNG", optimize=True)
+    print(f"favicon-shiroko.png: 64x64，体积 {(DST / 'favicon-shiroko.png').stat().st_size / 1024:.1f}KB")
+    # 单车：200 高，通体无服装白，全部清理
+    cut_out(SRC / "bike-original.png", DST / "shiroko-bike.webp", 200, min_area=20)
+    print("完成。视觉上请确认：光环环内、车架三角、轮圈内扇形均为透明，且角色的脸/袜子/衣服完好。")
+
+
+if __name__ == "__main__":
+    main()
@@ -71,7 +71,13 @@ async function main() {
      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 }) => opaque(getComputedStyle(el).backgroundColor) || opaque(getComputedStyle(el.closest('.table-wrap, .grid') ?? el).backgroundColor));
+        .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}`);
@@ -175,6 +181,69 @@ async function main() {
  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`);
+  }
+
  // 429 是刷新限流保护在起作用（快速连续导航各触发一次强制探测），面板已优雅降级为只读数据；
  // 这里只把 429 以外的错误视为失败
  const hardErrors = errors.filter((e) => !/429/.test(e));