tamakyi/shiroko-monitor
1
0
Fork 0
Code Issues Pull Requests Actions 233 Packages Projects Releases Wiki Activity

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

Browse Source 
用户反馈的两点：
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
2026-10-13 21:55:44 +08:00
parent 6f9a2d33ce
commit a7408e2bb5
26 changed files with 581 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/app.js
+9 -3
View File
@@ -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);
public/assets/favicon-shiroko.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

public/assets/shiroko-bike.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 46 KiB

public/assets/shiroko-figure.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 28 KiB

public/assets/shiroko-icon.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.6 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

public/assets/style.css
+17 -14
View File
@@ -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 {
public/assets/theme-shiroko.css
+44 -23
View File
@@ -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,