tamakyi
25b8b97970
1) 表格显示不全 table-layout:fixed 保证不横向滚动后，列内仍是 nowrap，实测长 URL 被截 388px、名称截 219px、可用率条截 35px（1440 宽共 14 个单元格）。 改为允许换行（地址 break-all）并重排列宽 —— 数据完整且仍零横向滚动。 2) 最近事件完全没样式 根因：上次追加 CSS 的命令是 `node --check app.js && cat >> style.css`， --check 报错导致 && 短路，CSS 从未写入（只有 HTML 裸奔）。 本次用编辑器写入；同时重做为时间线样式（竖线 + 类型着色圆点 + 左描边）、 名称列按内容自适应（消除大片空白）、默认折叠最近 8 条可展开全部。 3) dataFilter=uptimerobot 时仍在探测本地目标 新增 settings.probeScope（all|config|uptimerobot），不填则跟随 dataFilter； 显式设 all 可保留探测。启动日志打印当前口径与范围。 顺带修复两个连带问题： - UR 镜像目标此前不产生事件也不告警（evaluateRound 只遍历本地目标）， 配 uptimerobot 口径等于收不到任何提醒 —— 现在两类目标统一纳入 - 去抖计数被评估频率放大：evaluateRound 每秒执行，原实现每次评估都 failStreak+1，持续离线目标 1 秒即达阈值告警。改为按探测时间戳去重， 且无状态变化时不再反复落盘 测试：verify-views [J] 扩到 11 条（长内容不截断/仍不滚动/时间线布局/ 类型着色/折叠展开），verify-notify 新增 [D3] 4 条（范围跟随、不再探测本地、 显式 all 恢复、与展示口径解耦）+ 去抖计数断言。六套 170 项全通过。
77 lines
3.5 KiB
HTML
77 lines
3.5 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">
|
||
<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>
|
||
<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>
|
||
<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>
|
||
<span class="footer-item version">shiroko-monitor v0.11.1</span>
|
||
</footer>
|
||
|
||
<script type="module" src="assets/app.js"></script>
|
||
</body>
|
||
</html>
|