tamakyi
bf27f7b385
① 最近事件随筛选过滤 此前事件只受后端 dataFilter 约束，与面板上方的分组页签无关 —— 切页签后 监控列表变了，事件列表却纹丝不动。 两个真实缺陷（都是实测发现，不是推断）： 1. setFilter() 只调 renderTabs() + renderView()，**没调 renderEvents()** 2. 过滤依据用 allMonitors()，它只受 dataFilter 约束、不受分组影响 → 改为 visibleGroups().flatMap(...) 3. 无匹配事件时提前 return，没清空 list.innerHTML → 旧行仍留在 DOM 里， 换个分组再切回来会看到过期内容 实测：「全部」8 条 → 「UptimeRobot」1 条（正是「狼的评论系统 / UptimeRobot：403 Forbidden」）→「基础设施」0 条且区块自动隐藏。 过滤用「当前可见目标 id 集合」反查，而不是事件自身的 group 字段 —— 外部数据源（UptimeRobot）的事件在快照里没有 group 字段，按名字反查才准。 ② favicon 提供 WebP（保留原图与 PNG） 先核实了实际情况：assets-src 下三个原图（bike 1.8MB / figure 366KB / icon 277KB）此前已转成 WebP，public/assets 里唯一的 PNG 是 favicon-shiroko.png。 因此本次只处理 favicon：新增 64×64 WebP（2.7KB，比 PNG 的 5.6KB 省一半）。 **PNG 不删** —— favicon 是浏览器最早的请求，WebP 覆盖虽广但旧浏览器会直接 不显示图标，留 PNG 作回退代价只有几 KB，换来「任何浏览器都有图标」更稳妥。 原图 assets-src/ 完全未动，prepare-artwork.py 可随时重新生成。 页面用两个 <link rel="icon" type=...> 让浏览器按格式自动挑选 （认识 WebP 就取 WebP，否则回落 PNG / SVG）。 ③ 顺带修一个既存缺陷 探针的 MIME 表**缺 .webp**，导致三张 webp 素材一直被当作 application/octet-stream 伺服（能显示但类型不对）。已补。 测试：verify-views 49→52 项（事件随页签过滤、切回全部恢复、无事件时清空 DOM）。 verify.cjs 实为 24 项（此前 README 记的 17 是旧数据）。全项目 8 套 346 项通过。
85 lines
3.8 KiB
HTML
85 lines
3.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<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" data-favicon="1">
|
||
<link rel="stylesheet" href="assets/style.css">
|
||
<link rel="stylesheet" href="assets/theme-shiroko.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<span class="logo" aria-hidden="true"></span>
|
||
<div class="brand-text">
|
||
<h1 id="site-title">Shiroko Monitor</h1>
|
||
<p id="site-desc">轻量级服务监控面板</p>
|
||
</div>
|
||
</div>
|
||
<div class="summary">
|
||
<span id="overall-pill" class="pill pending">检测中…</span>
|
||
<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>
|
||
|
||
<nav class="group-tabs" id="group-tabs" aria-label="分组筛选"></nav>
|
||
|
||
<main class="grid" id="monitor-grid">
|
||
<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>
|
||
<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>
|
||
</body>
|
||
</html>
|