150 lines
5.4 KiB
HTML
150 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>DbusSmsForward Web</title>
|
|
<link rel="stylesheet" href="/app.css" />
|
|
</head>
|
|
<body>
|
|
<main class="layout">
|
|
<section class="hero card">
|
|
<div>
|
|
<p class="eyebrow">DbusSmsForward · Debian-first</p>
|
|
<h1>短信转发控制台</h1>
|
|
<p class="muted">
|
|
一个可直接交付的成品界面：运行总览、最近事件、配置中心、短信测试台，全部放到同一个 Web 面板里。
|
|
</p>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<button id="refresh-dashboard" type="button">刷新总览</button>
|
|
<button id="refresh-status" type="button">刷新状态</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="metrics-grid">
|
|
<article class="metric-card card">
|
|
<span class="metric-label">累计事件</span>
|
|
<strong id="metric-event-count" class="metric-value">-</strong>
|
|
</article>
|
|
<article class="metric-card card">
|
|
<span class="metric-label">手工发送成功</span>
|
|
<strong id="metric-manual-send-count" class="metric-value">-</strong>
|
|
</article>
|
|
<article class="metric-card card">
|
|
<span class="metric-label">失败次数</span>
|
|
<strong id="metric-failure-count" class="metric-value danger">-</strong>
|
|
</article>
|
|
<article class="metric-card card">
|
|
<span class="metric-label">最近手机号</span>
|
|
<strong id="metric-last-phone" class="metric-value small">-</strong>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="card split-card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>运行总览</h2>
|
|
<p class="muted">聚合运行状态、配置来源、通知通道与轮询源信息。</p>
|
|
</div>
|
|
</div>
|
|
<div id="dashboard-summary" class="summary-grid"></div>
|
|
</section>
|
|
|
|
<section class="card split-card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>最近事件</h2>
|
|
<p class="muted">展示最近短信转发记录，便于直接看成功/失败、发送方式与错误分类。</p>
|
|
</div>
|
|
<button id="refresh-events" type="button">刷新事件</button>
|
|
</div>
|
|
<div class="event-toolbar">
|
|
<label>
|
|
事件搜索
|
|
<input id="event-search" type="search" placeholder="搜手机号、状态、方式、错误分类、明细" />
|
|
</label>
|
|
<label>
|
|
结果筛选
|
|
<select id="event-result-filter">
|
|
<option value="all">全部事件</option>
|
|
<option value="failed">只看失败</option>
|
|
<option value="success">只看成功</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="events-empty" class="empty-state">还没有事件，先去下面的短信测试台发一条试试。</div>
|
|
<div id="events-list" class="events-list"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>系统状态</h2>
|
|
<p class="muted">原始接口状态，适合排错时直接查看 JSON。</p>
|
|
</div>
|
|
</div>
|
|
<pre id="status-view">加载中...</pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>配置中心</h2>
|
|
<p class="muted">直接在线改配置并落盘，适合 Debian/OpenWRT 迁移后的单机维护。</p>
|
|
</div>
|
|
<div class="actions">
|
|
<button id="reload-settings" type="button">重载配置</button>
|
|
<button id="save-settings" type="button">保存配置</button>
|
|
</div>
|
|
</div>
|
|
<textarea id="settings-editor" rows="20"></textarea>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>短信测试台</h2>
|
|
<p class="muted">用于手工发送测试短信，验证通知链路与事件留痕。</p>
|
|
</div>
|
|
</div>
|
|
<form id="sms-form" class="form-grid">
|
|
<label>
|
|
手机号
|
|
<input id="sms-phone" name="phone_number" placeholder="10086" required />
|
|
</label>
|
|
<label>
|
|
短信内容
|
|
<textarea id="sms-content" name="content" rows="5" placeholder="测试短信" required></textarea>
|
|
</label>
|
|
<label>
|
|
发送方式
|
|
<select id="sms-delivery-mode" name="delivery_mode">
|
|
<option value="dispatch">通知转发</option>
|
|
<option value="real_sms">真实短信</option>
|
|
</select>
|
|
</label>
|
|
<div id="mode-hint" class="mode-hint">
|
|
当前为通知转发：会按已启用通道分发，并写入事件留痕。
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit">发送测试短信</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="panel-header">
|
|
<div>
|
|
<h2>操作结果</h2>
|
|
<p class="muted">显示最近一次保存配置、刷新或手工发送的回执。</p>
|
|
</div>
|
|
</div>
|
|
<pre id="result-view">等待操作...</pre>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|