feat: P1 收尾 —— 事件面板区块与 90 天响应时间趋势

事件时间线(面板侧):
- 监控列表下方「最近事件」区块(最近 20 条:时间/类型/目标/详情),
  无事件自动隐藏;维护窗口内事件带「维护」标记;窄屏隐藏详情列

响应时间趋势(P1-2):
- 当日分桶在 {total,up} 外累计 latSum/latCount/latMax(仅在线样本)
- 快照输出 lat: { avg, max, days:[{key,avg}] }
- 卡片视图:可用率条下方新增「90 天日均延迟」细柱图(最近 30 天 + 均值)
- 表格视图:可用率列 tooltip 追加「90 天日均延迟 X ms(峰值 Y ms)」
- --demo 同步生成 90 天延迟样例(含起伏),静态部署也能看到效果

验证:verify-views 新增 [J] 段 5 条断言(趋势条/30 格/tooltip/事件空态/无溢出),
六套合计 159 项全通过(17+35+26+20+39+22)。

至此 P0(通知、证书)与 P1(事件时间线、维护窗口、响应时间趋势)全部落地。
This commit is contained in:
tamakyi
2026-10-14 00:32:59 +08:00
parent bdaa31f10c
commit 4bb5296525
14 changed files with 561 additions and 294 deletions
+11 -1
View File
@@ -50,6 +50,16 @@
<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>
</div>
<ul class="events-list" id="events-list"></ul>
<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>
@@ -57,7 +67,7 @@
<span id="notify-badge" class="footer-item" hidden>通知 –</span>
<span id="updated-at" class="footer-item">–</span>
<span id="countdown" class="footer-item">–</span>
<span class="footer-item version">shiroko-monitor v0.10.0</span>
<span class="footer-item version">shiroko-monitor v0.11.0</span>
</footer>
<script type="module" src="assets/app.js"></script>