feat(ui): 最近事件随分组页签联动过滤 + favicon 提供 WebP

① 最近事件随筛选过滤此前事件只受后端 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 项通过。
2026-10-14 17:35:01 +08:00
parent 20b499c350
commit bf27f7b385
11 changed files with 1918 additions and 664 deletions
@@ -104,8 +104,17 @@ def main():
    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")
+
+    # favicon 两种格式都产出：PNG 64 与 WebP 64。
+    # PNG 不删——favicon 是浏览器最早的请求，WebP 覆盖虽广但旧浏览器会直接不显示图标，
+    # 留 PNG 作回退代价只有几 KB，换来「任何浏览器都有图标」更稳妥。
+    icon64 = icon.resize((64, 64), Image.LANCZOS)
+    icon64.save(DST / "favicon-shiroko.png", "PNG", optimize=True)
+    icon64.save(DST / "favicon-shiroko.webp", "WEBP", quality=90, method=6)
+    png_kb = (DST / "favicon-shiroko.png").stat().st_size / 1024
+    webp_kb = (DST / "favicon-shiroko.webp").stat().st_size / 1024
+    print(f"favicon-shiroko: 64x64，PNG {png_kb:.1f}KB / WebP {webp_kb:.1f}KB")
+
    # 单车：200 高，通体无服装白，全部清理
    cut_out(SRC / "bike-original.png", DST / "shiroko-bike.webp", 200, min_area=20)
    print("完成。视觉上请确认：光环环内、车架三角、轮圈内扇形均为透明，且角色的脸/袜子/衣服完好。")
@@ -437,6 +437,37 @@ async function main() {
    const refreshBtnShown = await dp.evaluate(() => !document.getElementById('refresh-btn').hidden);
    check('同源模式下保留刷新按钮', refreshBtnShown === true, `可见=${refreshBtnShown}`);
    check('事件默认折叠为 8 条并可展开', evr.shown === 8 && evr.moreHidden === false && /展开全部 12 条/.test(evr.moreText), `显示 ${evr.shown} 条，按钮「${evr.moreText}」，计数「${evr.count}」`);
+
+    // ---- 事件随分组页签联动 ----
+    // 此前 setFilter 只重渲染视图不重渲染事件，且过滤依据用的是 allMonitors()
+    // （只受 dataFilter 约束、不受分组影响），导致切页签后事件纹丝不动。
+    const evTabs = await dp.evaluate(() => [...document.querySelectorAll('#group-tabs .tab')].map((t) => t.textContent.trim()));
+    // 找一个「事件里没有目标」的分组：演示数据的 12 条事件全部挂在 ids[0] 上，
+    // 因此要排除 ids[0] 所属的那个分组
+    const ids0Group = cfgJson.monitors.find((m) => m.id === ids[0])?.group || '未分组';
+    const quietTab = evTabs.find((t) => !t.startsWith('全部') && !t.startsWith(ids0Group));
+    check('存在可用于验证的分组页签', Boolean(quietTab), `事件目标属于「${ids0Group}」，可用安静分组：${quietTab ?? '无'}`);
+    if (quietTab) {
+      await dp.click(`#group-tabs .tab:text-is("${quietTab}")`);
+      await dp.waitForTimeout(500);
+      const evAfter = await dp.evaluate(() => {
+        const visIds = [...document.querySelectorAll('table.monitor-table tbody tr[data-status]')].map((tr) => tr.dataset.id);
+        const rows = [...document.querySelectorAll('.events-table tbody tr')];
+        return {
+          visibleTargets: visIds,
+          events: rows.length,
+          // 事件行里的目标名必须都属于当前页签可见的目标
+          names: rows.map((tr) => tr.querySelector('.ev-name')?.textContent?.trim()),
+          hidden: document.getElementById('events').hidden,
+        };
+      });
+      check('切分组页签后事件同步过滤（不再显示其它分组的事件）', evAfter.events === 0 && evAfter.hidden === true,
+        `「${quietTab}」页签下事件 ${evAfter.events} 条、区块隐藏=${evAfter.hidden}`);
+    }
+    await dp.click('#group-tabs .tab:text-matches("^全部")');
+    await dp.waitForTimeout(400);
+    const evBack = await dp.evaluate(() => document.querySelectorAll('.events-table tbody tr').length);
+    check('切回「全部」恢复完整事件', evBack === 8, `${evBack} 条`);
    await dp.click('#events-more');
    await dp.waitForTimeout(300);
    const evExpanded = await dp.evaluate(() => ({ shown: document.querySelectorAll('.events-table tbody tr').length, text: document.getElementById('events-more').textContent }));