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 项全通过。
This commit is contained in:
tamakyi
@@ -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 映
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
| 卡片视图（白子主题） | 移动端 |
|
||||
| 深色模式（白子主题） | 卡片视图（白子主题） |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
移动端（390×844，自动切卡片 + 顶栏三行）：`docs/screenshot-mobile.png`
|
||||
|
||||
UptimeRobot 数据源（`?filter=uptimerobot`，截图中含真实监控名与域名，公开发布前可自行删除）：`docs/screenshot-uptimerobot.png`；演示数据 90 天满档：`docs/screenshot-demo.png`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user