Initial Multi SimAdmin dashboard
This commit is contained in:
chick
@@ -0,0 +1,141 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Multi SimAdmin Control</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="appShell">
|
||||
<aside class="rail" aria-label="主导航">
|
||||
<div class="brand-mark"><span>MS</span></div>
|
||||
<nav class="rail-nav">
|
||||
<button class="rail-btn active" data-view="dashboard" title="控制台">⌘</button>
|
||||
<button class="rail-btn" data-view="api" title="API 工作台">{}</button>
|
||||
<button class="rail-btn" data-view="rawpage" title="原页面">↗</button>
|
||||
</nav>
|
||||
<button id="densityBtn" class="rail-btn bottom" title="切换紧凑密度">↕</button>
|
||||
</aside>
|
||||
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar-head">
|
||||
<div>
|
||||
<p class="eyebrow">SIM FLEET</p>
|
||||
<h1>Multi SimAdmin</h1>
|
||||
</div>
|
||||
<button id="refreshBtn" class="icon-action" type="button" title="刷新全部">⟳</button>
|
||||
</header>
|
||||
<div class="fleet-stats" id="fleetStats"></div>
|
||||
<div class="search-wrap">
|
||||
<span>⌕</span>
|
||||
<input id="instanceSearch" type="search" placeholder="搜索设备、标签、地址…" autocomplete="off" />
|
||||
</div>
|
||||
<div class="filter-row" id="statusFilters">
|
||||
<button class="chip active" data-filter="all">全部</button>
|
||||
<button class="chip" data-filter="online">在线</button>
|
||||
<button class="chip" data-filter="auth">需登录</button>
|
||||
<button class="chip" data-filter="offline">离线</button>
|
||||
</div>
|
||||
<div id="instances" class="instance-list"></div>
|
||||
<footer class="sidebar-foot">
|
||||
<span>配置</span>
|
||||
<code id="configPath">config.json</code>
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
<main class="workspace">
|
||||
<header class="workspace-head">
|
||||
<div class="title-block">
|
||||
<p id="activeKicker" class="eyebrow">NO DEVICE SELECTED</p>
|
||||
<h2 id="activeName">选择一个 SimAdmin 实例</h2>
|
||||
<p id="activeMeta">统一查看设备、SIM、网络、短信、eSIM、OTA 与原始管理页面。</p>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<button id="loginBtn" type="button" class="ghost-btn" disabled>登录/刷新会话</button>
|
||||
<a id="openExternal" href="#" target="_blank" rel="noreferrer" class="ghost-btn disabled">原站打开</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="dashboardView" class="view active">
|
||||
<section id="heroPanel" class="hero-panel">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow accent">CONTROL SURFACE</p>
|
||||
<h3>统一运维所有 SimAdmin 节点</h3>
|
||||
<p>无密码实例直接读取；有密码实例由本地服务保存会话。所有敏感凭据只留在本地配置。</p>
|
||||
</div>
|
||||
<div id="signalPanel" class="signal-panel"></div>
|
||||
</section>
|
||||
|
||||
<section id="overview" class="metric-grid"></section>
|
||||
|
||||
<section class="section-block">
|
||||
<div class="section-title">
|
||||
<div>
|
||||
<p class="eyebrow">MODULES</p>
|
||||
<h3>集成功能模块</h3>
|
||||
</div>
|
||||
<div id="moduleTabs" class="module-tabs"></div>
|
||||
</div>
|
||||
<div id="featureGrid" class="feature-grid"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="apiView" class="view api-layout">
|
||||
<aside class="api-catalog">
|
||||
<div class="section-title small">
|
||||
<div>
|
||||
<p class="eyebrow">API MAP</p>
|
||||
<h3>接口目录</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="endpointList" class="endpoint-list"></div>
|
||||
</aside>
|
||||
<section class="api-console">
|
||||
<div class="console-toolbar">
|
||||
<select id="methodSelect">
|
||||
<option>GET</option>
|
||||
<option>POST</option>
|
||||
<option>DELETE</option>
|
||||
</select>
|
||||
<input id="endpointInput" value="/api/device" spellcheck="false" />
|
||||
<button id="runEndpoint" class="primary-btn" type="button">发送</button>
|
||||
</div>
|
||||
<textarea id="requestBody" class="request-body" placeholder='POST/DELETE 请求体 JSON，例如 {"enabled":true}'></textarea>
|
||||
<pre id="rawOutput" class="raw-output">选择设备后可调用统一代理接口。</pre>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="rawpageView" class="view rawpage-view">
|
||||
<div class="frame-toolbar">
|
||||
<span id="frameHint">原始 SimAdmin 页面会在下方显示；若目标站禁止 iframe，请使用“原站打开”。</span>
|
||||
</div>
|
||||
<section id="emptyState" class="empty-state">
|
||||
<h3>还没有选择设备</h3>
|
||||
<p>在左侧选择一个实例后，这里会加载原 SimAdmin 页面。</p>
|
||||
</section>
|
||||
<iframe id="frame" class="frame" title="SimAdmin instance" hidden></iframe>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<dialog id="loginDialog">
|
||||
<form method="dialog" id="loginForm" class="login-card">
|
||||
<p class="eyebrow accent">SESSION</p>
|
||||
<h3>登录 SimAdmin</h3>
|
||||
<p>输入该实例管理员密码；只发送到本地聚合服务，不写入浏览器存储。</p>
|
||||
<input id="passwordInput" type="password" placeholder="管理员密码" autocomplete="current-password" />
|
||||
<menu>
|
||||
<button value="cancel" class="ghost-btn">取消</button>
|
||||
<button id="submitLogin" value="default" class="primary-btn">登录</button>
|
||||
</menu>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<div id="toast" class="toast" hidden></div>
|
||||
<script src="/app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user