88 lines
9.4 KiB
HTML
88 lines
9.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>App 设备设置 - 低保真原型</title>
|
||
<style>
|
||
:root{color-scheme:light;--ink:#17212b;--muted:#5d6973;--line:#cbd3d9;--surface:#fff;--bg:#eef1f3;--primary:#176b52;--warn:#8b5a08;--danger:#a13a32;--focus:#c57414}
|
||
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:0;padding-top:38px}
|
||
.prototype{position:fixed;z-index:30;top:0;left:0;right:0;height:38px;display:grid;place-items:center;background:#2d343a;color:#fff;font-size:12px;font-weight:700}.phone{width:min(100%,420px);min-height:calc(100vh - 38px);margin:auto;background:#f7f8f9;border-inline:1px solid var(--line)}
|
||
header{height:58px;display:flex;align-items:center;gap:14px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line)}h1,h2,p{margin-top:0}h1{font-size:19px;margin-bottom:0}.back{min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink);text-decoration:none;border-radius:6px;font-size:22px}
|
||
main{padding:16px}.panel{margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:6px}.panel h2{font-size:15px;margin:0;padding:14px 15px;border-bottom:1px solid var(--line)}
|
||
.row{min-height:64px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 15px;border-top:1px solid #e4e8eb}.row:first-of-type{border-top:0}.row strong,.row span{display:block}.row span{font-size:13px;color:var(--muted);margin-top:3px}.state{font-size:13px!important;font-weight:800!important;color:var(--primary)!important}.state.warn{color:var(--warn)!important}.state.bad{color:var(--danger)!important}
|
||
button,a,select{font:inherit}.scenario{padding:14px 15px}.scenario label{display:block;font-weight:750;margin-bottom:7px}.scenario select{width:100%;min-height:46px;padding:0 10px;border:1px solid #75818a;border-radius:6px;background:#fff;color:var(--ink)}.action{min-width:88px;min-height:44px;border:1px solid #75818a;border-radius:6px;background:#fff;color:var(--ink);font-weight:750}.wide{width:100%;min-height:50px;border:1px solid #75818a;border-radius:6px;background:#fff;font-weight:800}.logout{color:var(--danger);border-color:var(--danger)}.logout:disabled{color:#7d878f;border-color:#aeb6bc;background:#e5e8ea}
|
||
.notice{padding:12px;margin-bottom:14px;border-left:4px solid var(--primary);background:#e9f3ef}.notice strong,.notice span{display:block}.notice span{color:var(--muted);margin-top:3px}.machine{font:12px ui-monospace,SFMono-Regular,Consolas,monospace!important}
|
||
dialog{width:min(calc(100% - 32px),380px);padding:0;border:1px solid var(--line);border-radius:6px}dialog::backdrop{background:#18212a88}.dialog-body{padding:20px}.dialog-body h2{font-size:19px}.dialog-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}.dialog-actions button{min-height:46px;padding:0 15px;border-radius:6px;font-weight:750}.cancel{border:1px solid #76838c;background:#fff}.confirm{border:0;background:var(--danger);color:#fff}
|
||
button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}@media(max-width:360px){.row{grid-template-columns:1fr}.action{width:100%}}@media(max-width:420px){.phone{border:0}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="prototype">PROTOTYPE - 仅供确认布局和交互，不是生产实现</div>
|
||
<div class="phone">
|
||
<header><a class="back" href="android-task-home.html" aria-label="返回任务主页">‹</a><h1>设备设置</h1></header>
|
||
<main>
|
||
<div class="notice" id="notice" role="status" aria-live="polite"><strong>设备可以执行采购任务</strong><span>以下状态仅为脱敏的测试环境示例。</span></div>
|
||
<section class="panel scenario">
|
||
<label for="scenario">原型状态</label>
|
||
<select id="scenario">
|
||
<option value="ready">全部就绪</option>
|
||
<option value="missing">无障碍权限缺失</option>
|
||
<option value="connection">服务连接失败</option>
|
||
<option value="disabled">设备已停用</option>
|
||
<option value="active">存在活跃任务</option>
|
||
</select>
|
||
</section>
|
||
<section class="panel" aria-labelledby="permissionTitle">
|
||
<h2 id="permissionTitle">权限与应用</h2>
|
||
<div class="row"><div><strong>无障碍服务</strong><span>用于识别稳定语义和执行允许动作</span></div><button class="action" id="accessibility" type="button" data-open="无障碍设置">已开启</button></div>
|
||
<div class="row"><div><strong>通知权限</strong><span>提供返回任务和停止的稳定入口</span></div><button class="action" type="button" data-open="通知设置">已允许</button></div>
|
||
<div class="row"><div><strong>拼多多</strong><span class="machine">com.xunmeng.pinduoduo · 测试记录</span></div><span class="state">已安装</span></div>
|
||
</section>
|
||
<section class="panel" aria-labelledby="connectionTitle">
|
||
<h2 id="connectionTitle">连接状态</h2>
|
||
<div class="row"><div><strong>后端服务</strong><span>测试环境 · 不显示内部地址</span></div><span class="state" id="backendState">已连接</span></div>
|
||
<div class="row"><div><strong>模型服务</strong><span>能力检查通过 · 不显示密钥</span></div><span class="state" id="modelState">可用</span></div>
|
||
<div class="row"><div><strong>最近心跳</strong><span>刚刚，仅上报版本和就绪能力</span></div><button class="action" id="test" type="button">重新检查</button></div>
|
||
</section>
|
||
<section class="panel" aria-labelledby="aboutTitle">
|
||
<h2 id="aboutTitle">版本与设备</h2>
|
||
<div class="row"><div><strong>App 版本</strong><span class="machine">0.1.0-prototype</span></div><span class="state">测试版</span></div>
|
||
<div class="row"><div><strong>设备身份</strong><span>测试设备 A · 已绑定演示账号</span></div><span class="state" id="deviceState">有效</span></div>
|
||
</section>
|
||
<button class="wide logout" id="logout" type="button">退出登录</button>
|
||
</main>
|
||
</div>
|
||
<dialog id="logoutDialog" aria-labelledby="logoutTitle">
|
||
<div class="dialog-body"><h2 id="logoutTitle">退出采购账号？</h2><p>当前没有运行任务。退出后将清除本机安全会话并返回登录页。</p></div>
|
||
<div class="dialog-actions"><button class="cancel" id="cancel" type="button">取消</button><button class="confirm" id="confirm" type="button">确认退出</button></div>
|
||
</dialog>
|
||
<script>
|
||
const notice=document.querySelector("#notice"),test=document.querySelector("#test"),dialog=document.querySelector("#logoutDialog"),cancel=document.querySelector("#cancel"),scenario=document.querySelector("#scenario"),accessibility=document.querySelector("#accessibility"),backendState=document.querySelector("#backendState"),modelState=document.querySelector("#modelState"),deviceState=document.querySelector("#deviceState"),logout=document.querySelector("#logout");
|
||
const states={
|
||
ready:{title:"设备可以执行采购任务",text:"以下状态仅为脱敏的测试环境示例。"},
|
||
missing:{title:"无障碍服务未开启",text:"打开对应系统设置并授权后，返回本页重新检查。"},
|
||
connection:{title:"服务连接失败",text:"后端或模型能力暂不可用，当前不能领取任务。"},
|
||
disabled:{title:"设备已停用",text:"不要反复重试，请联系管理员检查设备绑定。"},
|
||
active:{title:"存在活跃任务",text:"运行任务安全停止前不能退出登录。"}
|
||
};
|
||
function render(){
|
||
const value=scenario.value,state=states[value];
|
||
notice.innerHTML="<strong>"+state.title+"</strong><span>"+state.text+"</span>";
|
||
accessibility.textContent=value==="missing"?"打开设置":"已开启";
|
||
backendState.textContent=value==="connection"?"连接失败":"已连接";
|
||
backendState.className="state "+(value==="connection"?"bad":"");
|
||
modelState.textContent=value==="connection"?"不可用":"可用";
|
||
modelState.className="state "+(value==="connection"?"bad":"");
|
||
deviceState.textContent=value==="disabled"?"已停用":"有效";
|
||
deviceState.className="state "+(value==="disabled"?"bad":"");
|
||
logout.disabled=value==="active";
|
||
}
|
||
scenario.addEventListener("change",render);
|
||
document.querySelectorAll("[data-open]").forEach(button=>button.addEventListener("click",()=>{notice.innerHTML="<strong>已发出系统命令</strong><span>即将打开"+button.dataset.open+"，返回后会重新检查。</span>";notice.scrollIntoView({behavior:"smooth"})}));
|
||
test.addEventListener("click",()=>{test.disabled=true;test.textContent="检查中";notice.innerHTML="<strong>正在检查服务连接</strong><span>不会显示地址、密钥或设备令牌。</span>";setTimeout(()=>{test.disabled=false;test.textContent="重新检查";notice.innerHTML="<strong>连接检查完成</strong><span>后端和模型服务均可用。</span>"},650)});
|
||
logout.addEventListener("click",()=>{dialog.showModal();setTimeout(()=>cancel.focus(),0)});cancel.addEventListener("click",()=>dialog.close());dialog.addEventListener("cancel",e=>{e.preventDefault();dialog.close()});document.querySelector("#confirm").addEventListener("click",()=>{location.href="android-login.html"});render();
|
||
</script>
|
||
</body>
|
||
</html>
|