Hermes/multi-simadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refocus UI on device card details

Browse Source
This commit is contained in:
chick
2026-07-08 00:17:22 +08:00
parent 0e746f961c
commit 4f80e951d4
4 changed files with 224 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+88 -86
View File
@@ -17,86 +17,95 @@
<span class="leaf leaf-b">●</span>
</div>
<div id="appShell" class="island-shell">
<aside class="nook-sidebar" aria-label="设备岛屿列表">
<header class="island-card sidebar-card pattern-default">
<div class="ribbon compact-ribbon" aria-label="Multi SimAdmin">
<span class="ribbon-back ribbon-back-left"></span>
<span class="ribbon-back ribbon-back-right"></span>
<span class="ribbon-fold ribbon-fold-left"></span>
<span class="ribbon-fold ribbon-fold-right"></span>
<span class="ribbon-front"></span>
<span class="ribbon-text">SimAdmin 岛屿</span>
</div>
<p class="sidebar-subtitle">像 NookPhone 一样管理每个 CPE 小岛</p>
<div class="sidebar-actions">
<button id="homeBtn" class="animal-btn default-btn" type="button">返回首页</button>
<button id="refreshBtn" class="animal-btn primary-btn" type="button">刷新状态</button>
</div>
<button id="addInstanceBtn" class="animal-btn primary-btn block-btn" type="button">＋ 添加设备地址</button>
</header>
<div id="appShell" class="sim-shell">
<header class="sim-topbar island-card pattern-app-teal">
<div>
<p class="eyebrow">MULTI SIMADMIN</p>
<h1>SimAdmin 设备卡片墙</h1>
<p class="topbar-copy">首页直接展示每个 SimAdmin 设备卡片；点击卡片进入设备详情页，再进行状态查看和功能交互。</p>
</div>
<div class="hero-actions">
<button id="homeBtn" class="animal-btn default-btn" type="button">设备首页</button>
<button id="refreshBtn" class="animal-btn primary-btn" type="button">刷新状态</button>
<button id="addInstanceBtn" class="animal-btn primary-btn" type="button">＋ 添加设备</button>
<button id="densityBtn" class="animal-btn default-btn" type="button">切换密度</button>
</div>
</header>
<section class="wallet-row" id="fleetStats"></section>
<label class="search-pill" aria-label="搜索设备">
<span>⌕</span>
<input id="instanceSearch" type="search" placeholder="搜索设备、标签、地址…" autocomplete="off" />
</label>
<nav class="island-tabs" id="statusFilters" aria-label="状态筛选">
<button class="tab-leaf active" data-filter="all">全部</button>
<button class="tab-leaf" data-filter="online">在线</button>
<button class="tab-leaf" data-filter="auth">需登录</button>
<button class="tab-leaf" data-filter="offline">离线</button>
</nav>
<div id="instances" class="island-list"></div>
<footer class="config-note">
<span>本地配置</span>
<code id="configPath">config.json</code>
</footer>
</aside>
<main class="nook-workspace">
<header class="workspace-hero island-card pattern-app-teal">
<div>
<p id="activeKicker" class="eyebrow">NO ISLAND SELECTED</p>
<h1 id="activeName">选择一个 SimAdmin 小岛</h1>
<p id="activeMeta">集中展示设备信息、联网状态、SIM、信号、温度、流量、系统资源、短信与版本。</p>
</div>
<div class="hero-actions">
<button id="loginBtn" type="button" class="animal-btn default-btn" disabled>登录/刷新会话</button>
<a id="openExternal" href="#" target="_blank" rel="noreferrer" class="animal-btn default-btn disabled">原站打开</a>
</div>
</header>
<nav class="phone-dock" aria-label="主视图">
<button class="phone-app active app-teal" data-view="dashboard"><span>📡</span><b>设备监控</b></button>
<button class="phone-app app-blue" data-view="rawpage"><span>↗</span><b>原页</b></button>
<button class="phone-app app-yellow" data-view="api"><span>{}</span><b>调试接口</b></button>
<button id="densityBtn" class="phone-app app-green" type="button"><span>↕</span><b>密度</b></button>
</nav>
<section id="dashboardView" class="view active dashboard-view device-dashboard" aria-label="设备监控大屏">
<section class="signal-board island-card pattern-app-yellow monitor-summary-card">
<div class="section-ribbon color-app-yellow">实时状态</div>
<div id="signalPanel" class="signal-grid"></div>
</section>
<section id="overview" class="nook-metrics monitor-kpis" aria-label="关键状态指标"></section>
<section class="module-board island-card pattern-default device-detail-board">
<div class="board-head">
<div class="section-ribbon color-app-green">设备详情</div>
<p class="board-caption">按设备、SIM、蜂窝网络、系统资源、温度、流量和短信分类展示真实状态。</p>
<main class="sim-main">
<section id="homeView" class="view active home-view" aria-label="SimAdmin 卡片首页">
<section class="home-toolbar island-card pattern-default">
<div>
<div class="section-ribbon color-app-green">设备卡片墙</div>
<p class="board-caption">每张卡片对应一个 SimAdmin；卡片上直接显示在线状态、SIM、信号、温度、流量和短信摘要。</p>
</div>
<div class="home-tools">
<section class="wallet-row" id="fleetStats"></section>
<label class="search-pill" aria-label="搜索设备">
<span>⌕</span>
<input id="instanceSearch" type="search" placeholder="搜索设备、标签、地址、ICCID…" autocomplete="off" />
</label>
<nav class="island-tabs" id="statusFilters" aria-label="状态筛选">
<button class="tab-leaf active" data-filter="all">全部</button>
<button class="tab-leaf" data-filter="online">在线</button>
<button class="tab-leaf" data-filter="auth">需登录</button>
<button class="tab-leaf" data-filter="offline">离线</button>
</nav>
</div>
<div id="featureGrid" class="device-detail-grid"></div>
</section>
<section id="homeDeviceGrid" class="home-device-grid" aria-label="设备卡片列表"></section>
</section>
<section id="detailView" class="view detail-view" aria-label="设备详情页">
<header class="workspace-hero island-card pattern-app-teal detail-hero">
<div>
<p id="activeKicker" class="eyebrow">DEVICE DETAIL</p>
<h1 id="activeName">选择一个 SimAdmin 设备</h1>
<p id="activeMeta">从首页设备卡片进入详情页后，可查看完整状态并使用功能入口。</p>
</div>
<div class="hero-actions">
<button id="backToFleetBtn" type="button" class="animal-btn default-btn">← 返回卡片墙</button>
<button id="loginBtn" type="button" class="animal-btn default-btn" disabled>登录/刷新会话</button>
<a id="openExternal" href="#" target="_blank" rel="noreferrer" class="animal-btn default-btn disabled">原站打开</a>
</div>
</header>
<section class="detail-layout">
<section class="signal-board island-card pattern-app-yellow monitor-summary-card">
<div class="section-ribbon color-app-yellow">实时状态</div>
<div id="signalPanel" class="signal-grid"></div>
</section>
<section id="overview" class="nook-metrics monitor-kpis" aria-label="关键状态指标"></section>
<section class="module-board island-card pattern-default device-detail-board">
<div class="board-head">
<div class="section-ribbon color-app-green">设备详情</div>
<p class="board-caption">设备、SIM、蜂窝网络、系统资源、温度、流量、短信与版本。</p>
</div>
<div id="detailDeviceGrid" class="device-detail-grid"></div>
</section>
<section class="island-card pattern-purple detail-actions-card">
<div class="section-ribbon color-purple">功能交互</div>
<div id="detailActions" class="detail-actions"></div>
</section>
</section>
</section>
<section id="rawpageView" class="view rawpage-view">
<div class="frame-toolbar island-card pattern-app-blue">
<button type="button" class="animal-btn default-btn" data-view="detail">← 返回详情</button>
<span id="frameHint">原始 SimAdmin 页面会在下方显示；若目标站禁止 iframe，请使用“原站打开”。</span>
</div>
<section id="emptyState" class="empty-state island-card pattern-default">
<div class="section-ribbon color-app-pink">等待选择</div>
<h3>还没有选择设备</h3>
<p>先在首页点击一个设备卡片，再进入原始页面。</p>
</section>
<iframe id="frame" class="frame" title="SimAdmin instance" hidden></iframe>
</section>
<section id="apiView" class="view api-layout">
<aside class="api-catalog island-card pattern-purple">
<div class="section-ribbon color-purple">API 地图</div>
<div class="section-ribbon color-purple">调试接口</div>
<div id="endpointList" class="endpoint-list"></div>
</aside>
<section class="api-console island-card pattern-default">
@@ -110,22 +119,15 @@
<button id="runEndpoint" class="animal-btn 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>
<pre id="rawOutput" class="raw-output">从设备详情页进入后，可对当前设备调用代理接口。</pre>
</section>
</section>
<section id="rawpageView" class="view rawpage-view">
<div class="frame-toolbar island-card pattern-app-blue">
<span id="frameHint">原始 SimAdmin 页面会在下方显示；若目标站禁止 iframe，请使用“原站打开”。</span>
</div>
<section id="emptyState" class="empty-state island-card pattern-default">
<div class="section-ribbon color-app-pink">等待登岛</div>
<h3>还没有选择设备</h3>
<p>在左侧选择一个小岛后，这里会加载原 SimAdmin 页面。</p>
</section>
<iframe id="frame" class="frame" title="SimAdmin instance" hidden></iframe>
</section>
</main>
<footer class="config-note sim-config-note">
<span>本地配置</span>
<code id="configPath">config.json</code>
</footer>
</div>
<dialog id="loginDialog">