fix(theme): 修横向拖动 + 立绘遮光环，形象换成简约风插画

问题与修复：
1. 桌面端表格/列表需要横向拖动 —— 上一版为避让立绘给 .grid/.footer 加了
   240px 右内边距，而 .grid 是 max-width:1200px，内边距吃在 1200 内部，
   1200px 以上的屏幕也必然溢出。改为立绘收窄 + 置于内容之下（z-index 低于面板）
2. 立绘遮挡光环水印 —— 光环水印移到页脚下方空带，与左下公路车、右下立绘形成
   一条互不遮挡的装饰带
3. 形象换成简约风插画（AI 生成后抠底）：右下角全身立绘 + 同款半身像做 logo/favicon；
   官方立绘/头像（SchaleDB 素材）已从仓库移除

验证：
- 1280/1440/1920 三种宽度下页面与表格均 0 溢出
- verify-views 新增 4 条断言（两视图无横向溢出、立绘不影响阅读），15/15 通过
- 四套脚本合计 74 项全通过

README.md

@@ -25,7 +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=` 强制指定
 
 ## 快速开始（本地）
@@ -63,8 +63,8 @@ shiroko-monitor/
 │   └── assets/
 │       ├── style.css             # 基础样式（浅色 + 暗色自适应）
 │       ├── theme-shiroko.css     # 砂狼白子主题（仅在 body[data-theme=shiroko] 下生效）
-│       ├── shiroko-portrait.webp # 立绘（SchaleDB 素材，见「主题」章节的版权说明）
+│       ├── shiroko-figure.webp   # 简约风立绘（AI 生成后抠底，见「主题」章节）
-│       ├── shiroko-icon.webp     # 方形头像（同上）
+│       ├── shiroko-icon.webp     # 简约风半身头像（同上）
 │       ├── favicon-shiroko.png   # 白子主题图标（由头像生成）
 │       ├── deco-scarf.svg        # 自绘：天蓝围巾飘带
 │       ├── deco-bicycle.svg      # 自绘：公路车
@@ -295,37 +295,40 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
 
 ## 主题（砂狼白子）
 
-面板名称叫 shiroko-monitor，主题自然取了《蔚蓝档案》的**砂狼白子**：她的光环、围巾、狼耳与配色都被做进了界面。
+面板名称叫 shiroko-monitor，主题自然取了《蔚蓝档案》的**砂狼白子**：她的光环、围巾、狼耳与配色都被做进了界面。人物形象用的是**简约风插画**（扁平配色、无阴影，见下），不是官方立绘。
 
 ### 主题里的元素
 
 | 位置 | 元素 | 取自设定 |
 | --- | --- | --- |
-| 左上 logo / 浏览器图标 | **她的头像**（真实素材）+ 青色光环环（呼吸式外扩动画） | 头像为白子的官方方形头像素材 |
+| 左上 logo / 浏览器图标 | **简约风半身头像**（光环 + 狼耳 + 围巾）+ 青色光环环（呼吸式外扩动画） | 生成插画的半身裁切 |
-| 右下角 | **她的官方立绘**（透明底，约 56vh，顶部渐隐；宽屏下表格会自动让位，不遮挡数据） | 白子原版（阿拜多斯校服）立绘 |
+| 右下角 | **简约风全身立绘**（透明底，约 44vh，窄身设计：实测 1280 / 1440 / 1920 下都不遮挡表格，页面也无横向滚动） | 生成插画 |
 | 顶栏底边 | **天蓝色围巾飘带**：波浪形状 + 5 处褶皱纹路（自绘） | 天蓝色围巾是星野送给她的信物 |
-| 背景 | 天蓝渐变 + 斜向细排线 + 右下**光环水印**（自绘：倾斜椭圆环 + 四方位带圆头的短杆） | 白子的光环是倾斜的椭圆环，四个方位各有一条带圆头的短杆，整体形似全息瞄准镜准星 |
+| 页脚下方 | **光环水印**（自绘：倾斜椭圆环 + 四方位带圆头的短杆） | 白子的光环是倾斜的椭圆环，四个方位各有一条带圆头的短杆，整体形似全息瞄准镜准星 |
 | 状态点 | **迷你光环**（外圈 + 中心点，在线时缓慢脉冲外扩） | 光环是基沃托斯学生的标志 |
 | 分组标题 | **青色倒十字发饰**（旋转 45°，自绘） | 她左侧刘海上别的青色十字发夹 |
 | 刷新按钮加载态 | **公路车轮**（轮圈 + 辐条 + 花鼓）旋转 | 她最爱的公路车（Bianchi ARIA 原型） |
 | 左下角 | 公路车侧影（自绘） | 同上 |
 | 配色 | 天蓝 / 青 + 藏蓝 + 灰白；「正常」色改为青绿（`#12b0a2`） | 阿拜多斯藏蓝校服 + 天蓝围巾 + 灰白发色 |
 
-### 素材来源与版权
+左下公路车、页脚光环、右下立绘构成页脚下方的一条装饰带，三者互不遮挡。
+
+### 素材来源
 
 | 类别 | 内容 | 来源 |
 | --- | --- | --- |
-| **第三方素材**（真实立绘/头像） | `public/assets/shiroko-portrait.webp`（540×1024 原图缩至 460 宽）、`shiroko-icon.webp`（120×120）、`favicon-shiroko.png`（64×64） | [SchaleDB](https://schaledb.com)（社区数据库）：`images/student/portrait/10010.webp`、`images/student/icon/10010.webp`；学生 Id `10010` = 砂狼白子（校服原版） |
+| **插画（人物形象）** | `shiroko-figure.webp`（249×560）、`shiroko-icon.webp`（180×180）、`favicon-shiroko.png`（64×64） | **AI 生成**：按白子的设定要素（灰发狼耳 / 倾斜椭圆光环 / 天蓝围巾 / 藏蓝校服 / 简约扁平风）描述生成，再用 Pillow 抠掉白底转为透明。**不是**官方美术素材，可自由替换或商用自行判断 |
+| 自绘装饰（SVG/CSS） | 围巾飘带 `deco-scarf.svg`、公路车 `deco-bicycle.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) |
-| 自绘装饰（SVG/CSS） | 围巾飘带 `deco-scarf.svg`、公路车 `deco-bicycle.svg`、光环水印、迷你光环状态点、倒十字图标、车轮加载图标 | 本仓库原创，按上述公开设定还原 |
+| 曾用素材（已移除） | 最早一版用过官方立绘与头像，为改成简约形象已从仓库删除 | [SchaleDB](https://schaledb.com)：`images/student/portrait/10010.webp`、`images/student/icon/10010.webp`（Id `10010` = 砂狼白子），版权归 NEXON Games / Yostar；想换回官方图可再从该地址取 |
 
-> ⚠️ **版权提示**：立绘与头像素材版权归 **NEXON Games / Yostar（《蔚蓝档案》）** 所有，此处仅作个人自用面板的风格美化。如果要把本仓库或 GitHub Pages **公开发布**，建议删除 `public/assets/shiroko-portrait.webp`、`shiroko-icon.webp`、`favicon-shiroko.png` 并在配置里清空 `artwork`，或替换为你自己的图片（其余装饰均为自绘，可保留）。
+蔚蓝档案 / Blue Archive © NEXON Games · Yostar —— 角色与设定版权归原作者所有，本主题是个人自用面板的风格致敬。
 
 ### 切换与配置
 
 ```jsonc
 "theme": "shiroko",     // shiroko | default（默认主题）；也可用地址栏 ?theme=default 临时覆盖
-"artwork": "assets/shiroko-portrait.webp"   // 立绘图片路径（相对 public/），留空则不显示
+"artwork": "assets/shiroko-figure.webp"   // 立绘图片路径（相对 public/），留空则不显示
 ```
 
 优先级：`?theme=` → 浏览器上次选择（localStorage）→ `settings.theme`。顶栏右侧的光环图标按钮可一键切换。切回默认主题后，立绘、光环、斜纹、围巾飘带、公路车全部消失，回到最初的简洁样式。
@@ -436,6 +439,12 @@ UptimeRobot 的探测来自其多个节点，适合作为**异地视角**与自
 - [x] 页脚改为展示「数据更新于 … + 下次检查 Ns」，tooltip 内含服务端更新节奏与快照生成时间
 - [x] `scripts/verify.cjs` 适配纯外部数据源部署（自动跳过不适用的探测类断言），并新增「倒计时对齐服务端」断言
 
+### 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（光环环呼吸动画）+ 天蓝围巾飘带顶栏 + 倒十字发饰分组标识 + 公路车轮加载态 + 按官方造型还原的倾斜椭圆光环水印；配套青绿主色调

edge/cloudflare/worker.js

@@ -11,7 +11,7 @@
 
 import { connect } from 'cloudflare:sockets';
 
-const VERSION = '0.7.0';
+const VERSION = '0.8.0';
 const HISTORY_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const USER_AGENT = 'shiroko-monitor/0.3 (lightweight uptime panel)';

prober/node/index.js

@@ -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.7.0';
+const VERSION = '0.8.0';
 const UR_DEFAULT_POLL_SEC = 300;
 const UR_MIN_REFRESH_GAP_MS = 60000;
 

public/assets/app.js

@@ -1,4 +1,4 @@
-const VERSION = '0.7.0';
+const VERSION = '0.8.0';
 const HB_LIMIT = 48;
 const UPTIME_DAYS = 90;
 const BROWSER_CONCURRENCY = 6;

public/assets/theme-shiroko.css

@@ -62,17 +62,18 @@ body[data-theme="shiroko"] {
   background-attachment: fixed;
 }
 
-/* 右下角：按官方造型还原的光环水印（倾斜椭圆环 + 四方位圆头短杆） */
+/* 页脚下方空带：按官方造型还原的光环水印（倾斜椭圆环 + 四方位圆头短杆），
+   与左下角公路车、右下角立绘形成一条装饰带，互不遮挡 */
 body[data-theme="shiroko"]::after {
   content: "";
   position: fixed;
-  right: -70px;
+  left: 44%;
-  bottom: 40px;
+  bottom: 0;
-  width: 460px;
+  width: 330px;
-  height: 260px;
+  height: 180px;
   pointer-events: none;
   z-index: 0;
-  opacity: 0.55;
+  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>");
@@ -202,28 +203,23 @@ body[data-theme="shiroko"] .uptime-cell.lv-none {
 body[data-theme="shiroko"] #refresh-btn .wheel { animation: wheel-spin 0.9s linear infinite; }
 @keyframes wheel-spin { to { transform: rotate(360deg); } }
 
-/* ---------- 角色立绘（settings.artwork，默认指向内置立绘） ---------- */
+/* ---------- 简约风立绘（settings.artwork，默认指向内置形象） ---------- */
 body[data-theme="shiroko"] .artwork {
   position: fixed;
-  right: 8px;
+  right: 10px;
   bottom: 0;
   width: auto;
-  height: min(56vh, 520px);
+  height: min(44vh, 380px);
   z-index: 0;
   pointer-events: none;
   user-select: none;
-  filter: drop-shadow(0 8px 24px rgb(23 60 100 / 18%));
+  filter: drop-shadow(0 6px 18px rgb(23 60 100 / 15%));
-  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
-  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
 }
-@media (max-width: 900px) {
+@media (max-width: 1100px) {
   body[data-theme="shiroko"] .artwork { display: none; }
 }
-/* 宽屏时为立绘留出空间，避免遮住表格右侧的可用率列 */
+/* 卡片视图行数多、卡片更靠右下，立绘再收一档，尽量让它落在卡片之外的角落 */
-@media (min-width: 1100px) {
+body[data-theme="shiroko"][data-view="cards"] .artwork { height: min(34vh, 300px); }
-  body[data-theme="shiroko"] .grid,
-  body[data-theme="shiroko"] .footer { padding-right: 240px; }
-}
 
 /* 内容层置于装饰之上 */
 body[data-theme="shiroko"] .grid,

public/index.html

@@ -52,7 +52,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.7.0</span>
+    <span class="footer-item version">shiroko-monitor v0.8.0</span>
   </footer>
 
   <script type="module" src="assets/app.js"></script>

public/monitors.json

@@ -4,7 +4,7 @@
     "description": "轻量级服务监控面板",
     "view": "table",
     "theme": "shiroko",
-    "artwork": "assets/shiroko-portrait.webp",
+    "artwork": "assets/shiroko-figure.webp",
     "dataFilter": "uptimerobot",
     "refreshInterval": 300,
     "dataSource": "auto",

scripts/verify-views.cjs

@@ -48,8 +48,33 @@ 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 }) => opaque(getComputedStyle(el).backgroundColor) || opaque(getComputedStyle(el.closest('.table-wrap, .grid') ?? el).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 });
   }