feat: 添加 Web 管理台
This commit is contained in:
@@ -0,0 +1,177 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>SMS Gateway 管理台</title>
|
||||
<link rel="stylesheet" href="/assets/admin.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-nav">
|
||||
<div class="top-nav__inner">
|
||||
<a class="brand" href="/admin" aria-label="SMS Gateway 管理台">
|
||||
<span class="brand__mark" aria-hidden="true">✣</span>
|
||||
<span>SMS Gateway</span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="管理导航">
|
||||
<a href="#status">状态</a>
|
||||
<a href="#inbox">收件箱</a>
|
||||
<a href="#send">短信</a>
|
||||
<a href="#console">AT 控制台</a>
|
||||
<a href="#logs">日志</a>
|
||||
</nav>
|
||||
<button class="button button--secondary" id="refreshButton" type="button">刷新状态</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero-band" id="status">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-copy">
|
||||
<span class="badge badge--coral" id="readyBadge">连接检测中</span>
|
||||
<h1>短信网关管理台</h1>
|
||||
<p>集中查看 ML307A 模组状态、发送短信、执行 AT 命令，并检查运行日志。</p>
|
||||
</div>
|
||||
|
||||
<div class="product-panel" aria-label="运行摘要">
|
||||
<div class="panel-header">
|
||||
<span>runtime</span>
|
||||
<strong id="panelStatus">loading</strong>
|
||||
</div>
|
||||
<dl class="runtime-list">
|
||||
<div>
|
||||
<dt>模组</dt>
|
||||
<dd id="modelName">--</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>运营商</dt>
|
||||
<dd id="operator">--</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>信号</dt>
|
||||
<dd id="signalQuality">--</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>运行时长</dt>
|
||||
<dd id="uptime">--</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-band section-band--soft">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2>当前状态</h2>
|
||||
<p>这些数据来自模组实时 AT 查询，刷新时会串行读取，避免同时发送多条 AT 命令。</p>
|
||||
</div>
|
||||
<div class="status-grid">
|
||||
<article class="feature-card">
|
||||
<span class="eyebrow">connection</span>
|
||||
<h3 id="connectionState">--</h3>
|
||||
<p id="connectionHint">等待状态刷新。</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<span class="eyebrow">signal</span>
|
||||
<h3 id="signalValue">--</h3>
|
||||
<p id="signalHint">RSSI 与误码率将在刷新后显示。</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<span class="eyebrow">module</span>
|
||||
<h3 id="moduleModel">--</h3>
|
||||
<p id="moduleVersion">--</p>
|
||||
</article>
|
||||
<article class="feature-card">
|
||||
<span class="eyebrow">sim</span>
|
||||
<h3 id="iccid">--</h3>
|
||||
<p>ICCID 查询来自当前串口模组。</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-band">
|
||||
<div class="container" id="inbox">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<span class="badge badge--soft">inbox</span>
|
||||
<h2>收到的短信</h2>
|
||||
</div>
|
||||
<button class="button button--secondary" id="messagesButton" type="button">刷新短信</button>
|
||||
</div>
|
||||
<div class="inbox-panel">
|
||||
<div class="inbox-meta">
|
||||
<span id="messageCount">最近 0 条</span>
|
||||
<span>新短信会自动出现在这里</span>
|
||||
</div>
|
||||
<div class="message-list" id="messageList" aria-live="polite">
|
||||
<p class="empty-state empty-state--light">暂无收到的短信。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-band section-band--soft">
|
||||
<div class="container workbench-grid">
|
||||
<section class="form-card" id="send">
|
||||
<div class="section-heading section-heading--compact">
|
||||
<h2>发送短信</h2>
|
||||
<p>使用当前 PDU 模式发送短信，提交后等待模组返回发送结果。</p>
|
||||
</div>
|
||||
<form id="smsForm" class="stack-form">
|
||||
<label>
|
||||
<span>目标号码</span>
|
||||
<input class="text-input" type="tel" name="phone" autocomplete="tel" placeholder="13800138000" required>
|
||||
</label>
|
||||
<label>
|
||||
<span>短信内容</span>
|
||||
<textarea class="text-input text-area" name="message" rows="6" placeholder="输入要发送的短信内容" required></textarea>
|
||||
</label>
|
||||
<div class="form-actions">
|
||||
<button class="button button--primary" type="submit">发送短信</button>
|
||||
<p class="form-status" id="smsStatus" role="status"></p>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="console-card" id="console">
|
||||
<div class="panel-header">
|
||||
<span>AT console</span>
|
||||
<strong id="consoleState">idle</strong>
|
||||
</div>
|
||||
<form id="atForm" class="at-form">
|
||||
<input class="text-input text-input--dark" name="command" value="AT+CSQ" autocomplete="off" spellcheck="false" required>
|
||||
<button class="button button--secondary-on-dark" type="submit">执行</button>
|
||||
</form>
|
||||
<pre class="console-output" id="atOutput">等待命令...</pre>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-band section-band--dark" id="logs">
|
||||
<div class="container">
|
||||
<div class="dark-heading">
|
||||
<div>
|
||||
<span class="badge badge--dark">logs</span>
|
||||
<h2>运行日志</h2>
|
||||
</div>
|
||||
<button class="button button--secondary-on-dark" id="logsButton" type="button">刷新日志</button>
|
||||
</div>
|
||||
<div class="log-window" id="logWindow" aria-live="polite">
|
||||
<p class="empty-state">等待日志加载。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container footer__inner">
|
||||
<span class="brand brand--footer"><span class="brand__mark" aria-hidden="true">✣</span> SMS Gateway</span>
|
||||
<span>Basic Auth protected management surface</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="/assets/admin.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,723 @@
|
||||
:root {
|
||||
--primary: #cc785c;
|
||||
--primary-active: #a9583e;
|
||||
--primary-disabled: #e6dfd8;
|
||||
--ink: #141413;
|
||||
--body: #3d3d3a;
|
||||
--body-strong: #252523;
|
||||
--muted: #6c6a64;
|
||||
--muted-soft: #8e8b82;
|
||||
--hairline: #e6dfd8;
|
||||
--hairline-soft: #ebe6df;
|
||||
--canvas: #faf9f5;
|
||||
--surface-soft: #f5f0e8;
|
||||
--surface-card: #efe9de;
|
||||
--surface-dark: #181715;
|
||||
--surface-dark-elevated: #252320;
|
||||
--surface-dark-soft: #1f1e1b;
|
||||
--on-primary: #ffffff;
|
||||
--on-dark: #faf9f5;
|
||||
--on-dark-soft: #a09d96;
|
||||
--accent-teal: #5db8a6;
|
||||
--accent-amber: #e8a55a;
|
||||
--success: #5db872;
|
||||
--warning: #d4a017;
|
||||
--error: #c64545;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--canvas);
|
||||
color: var(--body);
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: min(1200px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
height: 64px;
|
||||
background: rgba(250, 249, 245, 0.94);
|
||||
border-bottom: 1px solid var(--hairline-soft);
|
||||
}
|
||||
|
||||
.top-nav__inner {
|
||||
width: min(1200px, calc(100% - 48px));
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--ink);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand__mark {
|
||||
color: var(--ink);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
margin-left: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.nav-links a:focus-visible,
|
||||
.button:focus-visible,
|
||||
.text-input:focus-visible {
|
||||
outline: 3px solid rgba(204, 120, 92, 0.18);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.top-nav .button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
|
||||
.button--primary:active {
|
||||
background: var(--primary-active);
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--hairline);
|
||||
}
|
||||
|
||||
.button--secondary-on-dark {
|
||||
background: var(--surface-dark-elevated);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
padding: 72px 0 96px;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
|
||||
align-items: stretch;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--ink);
|
||||
font-family: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 700px;
|
||||
margin-top: 18px;
|
||||
font-size: 64px;
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--ink);
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.hero-copy p {
|
||||
max-width: 620px;
|
||||
margin-top: 22px;
|
||||
color: var(--body-strong);
|
||||
font-size: 18px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
border-radius: 9999px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.badge--coral {
|
||||
background: var(--primary);
|
||||
color: var(--on-primary);
|
||||
}
|
||||
|
||||
.badge--dark {
|
||||
background: var(--surface-dark-elevated);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.badge--soft {
|
||||
background: var(--surface-card);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.product-panel,
|
||||
.console-card {
|
||||
border-radius: 12px;
|
||||
background: var(--surface-dark);
|
||||
color: var(--on-dark);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
color: var(--on-dark-soft);
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.panel-header strong {
|
||||
color: var(--accent-teal);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.runtime-list {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
margin: 32px 0 0;
|
||||
}
|
||||
|
||||
.runtime-list div {
|
||||
display: grid;
|
||||
grid-template-columns: 92px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid rgba(250, 249, 245, 0.1);
|
||||
}
|
||||
|
||||
.runtime-list dt {
|
||||
color: var(--on-dark-soft);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.runtime-list dd {
|
||||
margin: 0;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--on-dark);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.section-band {
|
||||
padding: 96px 0;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.section-band--soft {
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.section-band--dark {
|
||||
background: var(--surface-dark);
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-heading p {
|
||||
max-width: 560px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-heading--compact {
|
||||
display: block;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.section-heading--compact p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-card,
|
||||
.form-card {
|
||||
border-radius: 12px;
|
||||
background: var(--surface-card);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
min-height: 190px;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
margin-top: 14px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
color: var(--muted);
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.workbench-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.inbox-panel {
|
||||
border-radius: 12px;
|
||||
background: var(--surface-card);
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.inbox-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
padding-bottom: 16px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
max-height: 520px;
|
||||
overflow: auto;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 12px;
|
||||
background: var(--canvas);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.message-item__header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(140px, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-item__header strong {
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--ink);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-item__header time {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
border-radius: 9999px;
|
||||
background: var(--surface-card);
|
||||
color: var(--muted);
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message-item.is-forwarded .message-status {
|
||||
background: rgba(93, 184, 114, 0.16);
|
||||
color: #2f7c44;
|
||||
}
|
||||
|
||||
.message-item.is-admin .message-status {
|
||||
background: rgba(232, 165, 90, 0.2);
|
||||
color: #8a5b16;
|
||||
}
|
||||
|
||||
.message-item.is-ignored .message-status {
|
||||
background: rgba(198, 69, 69, 0.12);
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin-top: 12px;
|
||||
color: var(--body);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.stack-form {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.stack-form label {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: var(--body-strong);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
width: 100%;
|
||||
min-height: 40px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 8px;
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
padding: 10px 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.text-input:focus {
|
||||
border-color: var(--primary);
|
||||
outline: 3px solid rgba(204, 120, 92, 0.15);
|
||||
}
|
||||
|
||||
.text-area {
|
||||
min-height: 144px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-status {
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-status.is-error {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.form-status.is-success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.console-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto auto minmax(220px, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.at-form {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.text-input--dark {
|
||||
border-color: rgba(250, 249, 245, 0.12);
|
||||
background: var(--surface-dark-soft);
|
||||
color: var(--on-dark);
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.console-output,
|
||||
.log-window {
|
||||
overflow: auto;
|
||||
border-radius: 12px;
|
||||
background: var(--surface-dark-soft);
|
||||
color: var(--on-dark);
|
||||
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.console-output {
|
||||
min-height: 220px;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.dark-heading {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.dark-heading h2 {
|
||||
margin-top: 14px;
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.log-window {
|
||||
height: 420px;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
display: grid;
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
border-bottom: 1px solid rgba(250, 249, 245, 0.08);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.log-line:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.log-level {
|
||||
color: var(--on-dark-soft);
|
||||
}
|
||||
|
||||
.log-line.is-error .log-level {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.log-line.is-warn .log-level {
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.log-line.is-info .log-level {
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
|
||||
.log-message {
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--on-dark-soft);
|
||||
}
|
||||
|
||||
.empty-state--light {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: var(--surface-dark);
|
||||
color: var(--on-dark-soft);
|
||||
border-top: 1px solid rgba(250, 249, 245, 0.08);
|
||||
padding: 32px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.brand--footer {
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid,
|
||||
.workbench-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container,
|
||||
.top-nav__inner {
|
||||
width: min(100% - 32px, 1200px);
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.top-nav__inner {
|
||||
min-height: 64px;
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.top-nav .button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
padding: 48px 0 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.section-band {
|
||||
padding: 64px 0;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.dark-heading,
|
||||
.footer__inner {
|
||||
display: grid;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.product-panel,
|
||||
.console-card,
|
||||
.feature-card,
|
||||
.form-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.at-form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.message-item__header {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.message-item__header time,
|
||||
.message-status {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.log-window {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.log-line {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
const state = {
|
||||
busy: false
|
||||
};
|
||||
|
||||
const elements = {
|
||||
refreshButton: document.querySelector('#refreshButton'),
|
||||
logsButton: document.querySelector('#logsButton'),
|
||||
readyBadge: document.querySelector('#readyBadge'),
|
||||
panelStatus: document.querySelector('#panelStatus'),
|
||||
modelName: document.querySelector('#modelName'),
|
||||
operator: document.querySelector('#operator'),
|
||||
signalQuality: document.querySelector('#signalQuality'),
|
||||
uptime: document.querySelector('#uptime'),
|
||||
connectionState: document.querySelector('#connectionState'),
|
||||
connectionHint: document.querySelector('#connectionHint'),
|
||||
signalValue: document.querySelector('#signalValue'),
|
||||
signalHint: document.querySelector('#signalHint'),
|
||||
moduleModel: document.querySelector('#moduleModel'),
|
||||
moduleVersion: document.querySelector('#moduleVersion'),
|
||||
iccid: document.querySelector('#iccid'),
|
||||
smsForm: document.querySelector('#smsForm'),
|
||||
smsStatus: document.querySelector('#smsStatus'),
|
||||
messagesButton: document.querySelector('#messagesButton'),
|
||||
messageCount: document.querySelector('#messageCount'),
|
||||
messageList: document.querySelector('#messageList'),
|
||||
atForm: document.querySelector('#atForm'),
|
||||
atOutput: document.querySelector('#atOutput'),
|
||||
consoleState: document.querySelector('#consoleState'),
|
||||
logWindow: document.querySelector('#logWindow')
|
||||
};
|
||||
|
||||
function setText(node, value) {
|
||||
node.textContent = value || '--';
|
||||
}
|
||||
|
||||
function setStatusMessage(node, message, type = '') {
|
||||
node.textContent = message;
|
||||
node.classList.toggle('is-success', type === 'success');
|
||||
node.classList.toggle('is-error', type === 'error');
|
||||
}
|
||||
|
||||
async function requestJSON(url, options = {}) {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers || {})
|
||||
},
|
||||
...options
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || data.message || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
const total = Math.max(0, Math.floor(seconds || 0));
|
||||
const days = Math.floor(total / 86400);
|
||||
const hours = Math.floor((total % 86400) / 3600);
|
||||
const minutes = Math.floor((total % 3600) / 60);
|
||||
const secs = total % 60;
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天 ${hours}小时 ${minutes}分`;
|
||||
}
|
||||
if (hours > 0) {
|
||||
return `${hours}小时 ${minutes}分`;
|
||||
}
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分 ${secs}秒`;
|
||||
}
|
||||
return `${secs}秒`;
|
||||
}
|
||||
|
||||
function formatModel(model = {}) {
|
||||
return [model.manufacturer, model.model].filter(Boolean).join(' ') || '--';
|
||||
}
|
||||
|
||||
function renderStatus(status, info) {
|
||||
const data = status.data || {};
|
||||
const infoData = info.data || {};
|
||||
const model = data.model || infoData.model || {};
|
||||
const signal = data.signal || {};
|
||||
const ready = Boolean(data.ready);
|
||||
|
||||
setText(elements.readyBadge, ready ? '模组已就绪' : '模组未就绪');
|
||||
setText(elements.panelStatus, ready ? 'ready' : 'not ready');
|
||||
setText(elements.modelName, formatModel(model));
|
||||
setText(elements.operator, data.operator || '未知');
|
||||
setText(elements.signalQuality, signal.quality || '未知');
|
||||
setText(elements.uptime, formatUptime(data.uptime));
|
||||
|
||||
setText(elements.connectionState, ready ? '运行中' : '未就绪');
|
||||
setText(elements.connectionHint, ready ? '串口、SIM、驻网和短信配置均已通过启动检查。' : '请检查启动日志和模组初始化状态。');
|
||||
setText(elements.signalValue, signal.rssi === undefined ? '--' : `RSSI ${signal.rssi}`);
|
||||
setText(elements.signalHint, signal.ber === undefined ? 'RSSI 与误码率将在刷新后显示。' : `误码率 ${signal.ber}，质量 ${signal.quality || '未知'}。`);
|
||||
setText(elements.moduleModel, model.model || '--');
|
||||
setText(elements.moduleVersion, model.version || '--');
|
||||
setText(elements.iccid, infoData.iccid || '--');
|
||||
}
|
||||
|
||||
function parseLogLine(line) {
|
||||
const levelMatch = line.match(/\[(INFO|WARN|ERROR)\]/);
|
||||
const timeMatch = line.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
|
||||
return {
|
||||
time: timeMatch ? timeMatch[1].slice(11) : '',
|
||||
level: levelMatch ? levelMatch[1] : '',
|
||||
message: line.replace(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})\s*/, '')
|
||||
};
|
||||
}
|
||||
|
||||
function renderLogs(logs) {
|
||||
elements.logWindow.replaceChildren();
|
||||
|
||||
if (!logs.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'empty-state';
|
||||
empty.textContent = '暂无日志。';
|
||||
elements.logWindow.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
logs.forEach((line) => {
|
||||
const item = parseLogLine(line);
|
||||
const row = document.createElement('div');
|
||||
row.className = `log-line is-${item.level.toLowerCase()}`;
|
||||
|
||||
const level = document.createElement('span');
|
||||
level.className = 'log-level';
|
||||
level.textContent = item.level ? `${item.time} ${item.level}` : item.time;
|
||||
|
||||
const message = document.createElement('span');
|
||||
message.className = 'log-message';
|
||||
message.textContent = item.message;
|
||||
|
||||
row.append(level, message);
|
||||
fragment.append(row);
|
||||
});
|
||||
|
||||
elements.logWindow.append(fragment);
|
||||
elements.logWindow.scrollTop = elements.logWindow.scrollHeight;
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
if (!value) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return date.toLocaleString('zh-CN', {
|
||||
hour12: false,
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function renderMessages(messages) {
|
||||
elements.messageList.replaceChildren();
|
||||
setText(elements.messageCount, `最近 ${messages.length} 条`);
|
||||
|
||||
if (!messages.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'empty-state empty-state--light';
|
||||
empty.textContent = '暂无收到的短信。';
|
||||
elements.messageList.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
messages.forEach((message) => {
|
||||
const item = document.createElement('article');
|
||||
item.className = `message-item is-${message.status || 'received'}`;
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'message-item__header';
|
||||
|
||||
const sender = document.createElement('strong');
|
||||
sender.textContent = message.sender || '未知号码';
|
||||
|
||||
const status = document.createElement('span');
|
||||
status.className = 'message-status';
|
||||
status.textContent = message.statusText || '已接收';
|
||||
|
||||
const time = document.createElement('time');
|
||||
time.textContent = formatDateTime(message.timestamp || message.receivedAt);
|
||||
|
||||
const text = document.createElement('p');
|
||||
text.className = 'message-text';
|
||||
text.textContent = message.text || '';
|
||||
|
||||
header.append(sender, status, time);
|
||||
item.append(header, text);
|
||||
fragment.append(item);
|
||||
});
|
||||
|
||||
elements.messageList.append(fragment);
|
||||
}
|
||||
|
||||
async function refreshLogs() {
|
||||
const logs = await requestJSON('/api/logs');
|
||||
renderLogs(logs.data || []);
|
||||
}
|
||||
|
||||
async function refreshMessages() {
|
||||
const messages = await requestJSON('/api/sms/received?limit=50');
|
||||
renderMessages(messages.data || []);
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
if (state.busy) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.busy = true;
|
||||
elements.refreshButton.disabled = true;
|
||||
elements.refreshButton.textContent = '刷新中';
|
||||
|
||||
try {
|
||||
const status = await requestJSON('/api/status');
|
||||
const info = await requestJSON('/api/modem/info');
|
||||
renderStatus(status, info);
|
||||
await refreshMessages();
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
setText(elements.readyBadge, '刷新失败');
|
||||
setText(elements.panelStatus, 'error');
|
||||
setText(elements.connectionState, '查询失败');
|
||||
setText(elements.connectionHint, err.message);
|
||||
} finally {
|
||||
elements.refreshButton.disabled = false;
|
||||
elements.refreshButton.textContent = '刷新状态';
|
||||
state.busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendSMS(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const submit = elements.smsForm.querySelector('button[type="submit"]');
|
||||
const formData = new FormData(elements.smsForm);
|
||||
const phone = String(formData.get('phone') || '').trim();
|
||||
const message = String(formData.get('message') || '').trim();
|
||||
|
||||
if (!phone || !message) {
|
||||
setStatusMessage(elements.smsStatus, '号码和内容都不能为空。', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
setStatusMessage(elements.smsStatus, '发送中...');
|
||||
|
||||
try {
|
||||
const result = await requestJSON('/api/sms/send', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ phone, message })
|
||||
});
|
||||
setStatusMessage(elements.smsStatus, result.message || '短信发送成功。', result.success ? 'success' : 'error');
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
setStatusMessage(elements.smsStatus, err.message, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function runATCommand(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const submit = elements.atForm.querySelector('button[type="submit"]');
|
||||
const command = String(new FormData(elements.atForm).get('command') || '').trim();
|
||||
|
||||
if (!command) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
setText(elements.consoleState, 'running');
|
||||
elements.atOutput.textContent = `> ${command}\n等待响应...`;
|
||||
|
||||
try {
|
||||
const result = await requestJSON('/api/modem/at', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ command })
|
||||
});
|
||||
elements.atOutput.textContent = `> ${command}\n${result.data.response || ''}`.trim();
|
||||
setText(elements.consoleState, 'done');
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
elements.atOutput.textContent = `> ${command}\nERROR: ${err.message}`;
|
||||
setText(elements.consoleState, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
elements.refreshButton.addEventListener('click', refreshAll);
|
||||
elements.logsButton.addEventListener('click', refreshLogs);
|
||||
elements.messagesButton.addEventListener('click', refreshMessages);
|
||||
elements.smsForm.addEventListener('submit', sendSMS);
|
||||
elements.atForm.addEventListener('submit', runATCommand);
|
||||
|
||||
refreshAll();
|
||||
setInterval(() => {
|
||||
refreshMessages().catch(() => {});
|
||||
}, 5000);
|
||||
Reference in New Issue
Block a user