93499fa189
- 新增 Web 用户端（登录体系 + 统一 REST API 调用） - 后端增加用户认证、统一 ApiResponse、CORS 支持 - Android 设备端迁移至 MVVM + DataBinding + Retrofit 网络层 - 完善 README 架构说明与密码学原理文档 - 新增 .gitignore 与持久化数据表说明
86 lines
3.6 KiB
HTML
86 lines
3.6 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>Secure Device 用户端控制台</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1>Secure Device 用户端控制台</h1>
|
||
<div id="userInfo" class="user-info hidden">
|
||
<span id="userLabel"></span>
|
||
<button id="btnLogout" class="btn btn-sm">退出登录</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- ============ 登录 / 注册 ============ -->
|
||
<section id="authSection" class="panel">
|
||
<h2>用户登录 / 注册</h2>
|
||
<p class="hint">模拟真实场景：用户端（Web）先登录获取 Token，再操作设备；设备端（Android）无登录体系。</p>
|
||
<div class="form-row">
|
||
<input id="authUserId" placeholder="用户名，如 alice" autocomplete="username">
|
||
<input id="authPassword" type="password" placeholder="密码，注册时可自定义（默认 123456）" autocomplete="current-password">
|
||
<input id="authPhone" placeholder="手机号（仅注册用），如 13800138000">
|
||
<button id="btnLogin" class="btn btn-primary">登录</button>
|
||
<button id="btnRegister" class="btn">注册</button>
|
||
</div>
|
||
<div id="authResult" class="result"></div>
|
||
</section>
|
||
|
||
<!-- ============ 设备管理 ============ -->
|
||
<section id="deviceSection" class="panel hidden">
|
||
<h2>绑定设备</h2>
|
||
<div class="form-row">
|
||
<input id="bindSn" placeholder="设备 SN，如 SN-DEMO-001">
|
||
<button id="btnBind" class="btn btn-primary">绑定设备</button>
|
||
</div>
|
||
<div id="bindResult" class="result"></div>
|
||
|
||
<h2>我的设备</h2>
|
||
<button id="btnListDevices" class="btn">刷新设备列表</button>
|
||
<div id="devicesResult" class="result"></div>
|
||
</section>
|
||
|
||
<!-- ============ 短信 / 恢复授权 ============ -->
|
||
<section id="recoverSection" class="panel hidden">
|
||
<h2>恢复授权（出厂重置后重新取回照片）</h2>
|
||
<p class="hint">流程：设备端恢复出厂后生成 <b>新设备公钥</b> → 在此填入 SN + 新公钥 → 发送短信验证码 → 恢复授权。</p>
|
||
<div class="form-row">
|
||
<input id="recoverSn" placeholder="设备 SN，如 SN-DEMO-001">
|
||
<input id="recoverPhone" placeholder="绑定手机号，如 13800138000">
|
||
<button id="btnSendSms" class="btn">发送验证码</button>
|
||
</div>
|
||
<div class="form-row">
|
||
<input id="recoverNewPubKey" placeholder="新设备公钥 Base64（从设备端复制）">
|
||
<input id="recoverSmsCode" placeholder="短信验证码（demo 固定 000000）">
|
||
<button id="btnRecover" class="btn btn-primary">恢复授权</button>
|
||
</div>
|
||
<div id="recoverResult" class="result"></div>
|
||
</section>
|
||
|
||
<!-- ============ 照片 ============ -->
|
||
<section id="photoSection" class="panel hidden">
|
||
<h2>我的照片（密文存储，需登录后下载解密）</h2>
|
||
<button id="btnListPhotos" class="btn">刷新照片列表</button>
|
||
<div id="photosResult" class="result"></div>
|
||
<div class="form-row">
|
||
<input id="decryptPhotoId" placeholder="photoId，如 photo-001">
|
||
<button id="btnDecrypt" class="btn btn-primary">下载并解密</button>
|
||
</div>
|
||
<div id="decryptResult" class="result"></div>
|
||
</section>
|
||
|
||
<!-- ============ 原始响应展示 ============ -->
|
||
<section id="rawSection" class="panel">
|
||
<h2>最近一次 API 响应（统一格式 code/message/data）</h2>
|
||
<pre id="rawOutput" class="raw">尚未发起请求</pre>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|