tamakyi
752fad412b
① 每行绝对等高 - 行高与内容长度彻底解耦：新增 --row-h: 72px 作为唯一基准 - 名称列改为「文本区限两行 + 徽标区固定单行」两段式；文本区用 .clamp2 - 关键点：必须用 height 而非 max-height —— 后者会让短内容缩成一行、 长内容撑到两行，反而产生 66px/71px 两种行高（实测踩过） - 分组标题行用 :not(.group-row) 排除在数据行规则之外 - 事件表与监控表格共用同一个 --row-h，两张表视觉上也严格对齐 - 完整值仍可通过悬停 title 查看（已加断言强制所有截断单元格带 title） - 卡片视图同样等高（13 视口 × 250px 全一致） ② 管理 WebUI + 2FA - 新增 /admin 与 /api/admin/*；未绑定 2FA 时除绑定流程外一律 403 - 零依赖实现 TOTP（RFC 6238），用 RFC 4226/6238 官方测试向量验证（16 个向量） - 内置 QR 码生成器（byte 模式 / ECC L / 版本 1-10，GF(256) RS 纠错 + 掩码评分）， 用独立解码器实测：版本 1 与版本 6 均能读出逐字节一致的内容 - 绑定流程：口令 → 生成密钥（扫码/手输/otpauth 链接）→ 验证 6 位码 → 10 枚恢复码； 完成后凭本次验证码直接换取会话 - 安全：会话 id 32 字节随机数且服务端只存哈希；HttpOnly+SameSite=Strict； 30 分钟空闲/2 小时最长；同时间步的码防重放；恢复码一次性； 登录失败按 IP 指数退避锁定；不解析 X-Forwarded-For - 管理功能：运行状态、探测范围、展示口径、维护窗口增删、立即重探、通知自检、 目标只读列表、最近事件 - 所有写操作只落 local.monitors.json（私有不入库），绝不改 public/monitors.json 过程中修掉三个真 bug： 1. 会话 cookie 的 Path=/admin 覆盖不到 /api/admin/*，登录 200 但后续全部 401 2. 恢复码登录被 verifyTotp 的 invalid-format 提前挡掉（恢复码非 6 位数字） 3. 超大请求体用 req.destroy() 硬断连接，客户端只看到 fetch failed 拿不到状态码 测试：新增 scripts/verify-admin.cjs（102 项），全项目共 7 套 274 项全部通过
84 lines
3.7 KiB
HTML
84 lines
3.7 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>
|
||
<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>
|
||
<span class="footer-item version">shiroko-monitor v0.12.0</span>
|
||
</footer>
|
||
|
||
<script type="module" src="assets/app.js"></script>
|
||
</body>
|
||
</html>
|