74 lines
8.9 KiB
HTML
74 lines
8.9 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);padding-bottom:18px}
|
|
header{min-height:58px;display:flex;align-items:center;padding:0 18px;background:#fff;border-bottom:1px solid var(--line)}h1,h2,h3,p{margin-top:0}h1{font-size:19px;margin-bottom:0}main{padding:16px}
|
|
.hard-stop{padding:14px;margin-bottom:14px;border:2px solid var(--danger);background:#fff0ee}.hard-stop strong,.hard-stop span{display:block}.hard-stop strong{font-size:17px;color:#7d2821}.hard-stop span{margin-top:4px}
|
|
.panel{padding:15px;margin-bottom:14px;background:#fff;border:1px solid var(--line);border-radius:6px}.panel h2{font-size:16px;margin-bottom:12px}.panel h3{font-size:14px;margin-bottom:8px}
|
|
label{font-size:13px;font-weight:700}select,button,textarea{font:inherit}select,textarea{width:100%;border:1px solid #89959e;border-radius:6px;background:#fff}select{min-height:44px;margin-top:6px;padding:8px}textarea{min-height:80px;padding:10px;resize:vertical}
|
|
.facts{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0}.facts dt{color:var(--muted)}.facts dd{margin:0;font-weight:750}.price{font-size:19px;color:var(--primary)}
|
|
.evidence{height:118px;display:grid;place-items:center;margin:12px 0;border:1px dashed #87939c;background:#e6eaec;color:#3c4851;font-weight:700;text-align:center}.checks{list-style:none;margin:0;padding:0}.checks li{padding:7px 0;border-top:1px solid #e4e8eb}.checks li:first-child{border-top:0}.ok{color:var(--primary);font-weight:800}.risk{color:var(--danger);font-weight:800}
|
|
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions button{min-height:50px;border-radius:6px;font-weight:800}.accept{border:0;background:var(--primary);color:#fff}.reject{border:1px solid var(--danger);background:#fff;color:var(--danger)}.none,.manual{border:1px solid #73808a;background:#fff;color:var(--ink)}button:disabled{opacity:.48}
|
|
.reason{margin-top:14px}.reason label{display:block;margin-bottom:6px}.completion{display:none;padding:16px;margin-bottom:14px;border-left:5px solid var(--primary);background:#e9f3ef}.completion.show{display:block}.completion strong{display:block;font-size:18px}.machine{font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted)}
|
|
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(--primary);color:#fff}
|
|
button:focus-visible,select:focus,textarea:focus{outline:3px solid color-mix(in srgb,var(--focus) 45%,transparent);outline-offset:2px}@media(max-width:360px){.actions{grid-template-columns:1fr}}@media(max-width:420px){.phone{border:0}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="prototype">PROTOTYPE - 仅供确认布局和交互，不是生产实现</div>
|
|
<div class="phone">
|
|
<header><h1>人工确认候选</h1></header>
|
|
<main>
|
|
<div class="hard-stop" role="alert"><strong>自动化已硬停止</strong><span>返回或关闭本页都不会恢复自动点击。请由采购人员作出结论。</span></div>
|
|
<div class="completion" id="completion" role="status"><strong>验证完成，未提交订单</strong><span id="completionText">人员结论已记录。</span><p class="machine">order_submitted=false</p></div>
|
|
<section class="panel">
|
|
<label for="scenario">原型状态</label>
|
|
<select id="scenario">
|
|
<option value="valid">候选符合硬约束</option>
|
|
<option value="over">候选超出预算</option>
|
|
<option value="none">没有找到候选</option>
|
|
<option value="unknown">关键属性未知</option>
|
|
</select>
|
|
</section>
|
|
<section class="panel" id="requirement" aria-labelledby="requirementTitle">
|
|
<h2 id="requirementTitle">管理员原始要求</h2>
|
|
<dl class="facts"><dt>商品</dt><dd>透明抽屉式收纳盒</dd><dt>SKU</dt><dd>白色 · 中号</dd><dt>数量</dt><dd>2 件</dd><dt>最高预算</dt><dd>¥ 48.00 / 件</dd></dl>
|
|
</section>
|
|
<section class="panel" id="candidate" aria-labelledby="candidateTitle">
|
|
<h2 id="candidateTitle">候选 1 / 3</h2>
|
|
<div class="evidence" role="img" aria-label="脱敏的候选商品截图占位">脱敏候选截图<br>证据占位</div>
|
|
<dl class="facts"><dt>候选标题</dt><dd>透明可叠放抽屉收纳盒</dd><dt>单价</dt><dd class="price" id="price">¥ 39.90</dd></dl>
|
|
<h3>匹配与风险</h3>
|
|
<ul class="checks" id="checks"><li><span class="ok">符合</span> 颜色：白色</li><li><span class="ok">符合</span> 规格：中号</li><li><span class="ok">符合</span> 单价未超过预算</li></ul>
|
|
</section>
|
|
<section class="panel">
|
|
<h2>人员结论</h2>
|
|
<div class="actions">
|
|
<button class="accept" id="accept" type="button" data-action="接受候选">接受候选</button>
|
|
<button class="reject" id="reject" type="button" data-action="拒绝候选">拒绝候选</button>
|
|
<button class="none" id="noneAction" type="button" data-action="确认无匹配">无匹配</button>
|
|
<button class="manual" type="button" data-action="转人工处理">转人工</button>
|
|
</div>
|
|
<div class="reason"><label for="reason">原因（拒绝、无匹配或转人工时填写）</label><textarea id="reason" placeholder="输入简短、非敏感的原因"></textarea></div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<dialog id="confirmDialog" aria-labelledby="dialogTitle">
|
|
<div class="dialog-body"><h2 id="dialogTitle">确认人员结论？</h2><p id="dialogText"></p><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 scenario=document.querySelector("#scenario"),candidate=document.querySelector("#candidate"),accept=document.querySelector("#accept"),reject=document.querySelector("#reject"),noneAction=document.querySelector("#noneAction"),price=document.querySelector("#price"),checks=document.querySelector("#checks"),dialog=document.querySelector("#confirmDialog"),cancel=document.querySelector("#cancel"),completion=document.querySelector("#completion");let pending="";
|
|
function render(){const v=scenario.value,missing=v==="none";candidate.hidden=missing;noneAction.disabled=!missing;accept.disabled=v!=="valid";reject.disabled=missing;if(v==="over"){price.textContent="¥ 56.00";checks.innerHTML='<li><span class="ok">符合</span> 颜色：白色</li><li><span class="ok">符合</span> 规格：中号</li><li><span class="risk">不符合</span> 单价超过最高预算，不能接受</li>'}else if(v==="unknown"){price.textContent="¥ 41.00";checks.innerHTML='<li><span class="ok">符合</span> 颜色：白色</li><li><span class="risk">未知</span> 规格无法确认，不能接受</li><li><span class="ok">符合</span> 单价未超过预算</li>'}else{price.textContent="¥ 39.90";checks.innerHTML='<li><span class="ok">符合</span> 颜色：白色</li><li><span class="ok">符合</span> 规格：中号</li><li><span class="ok">符合</span> 单价未超过预算</li>'}}
|
|
document.querySelectorAll("[data-action]").forEach(button=>button.addEventListener("click",()=>{pending=button.dataset.action;document.querySelector("#dialogText").textContent="选择："+pending;dialog.showModal();setTimeout(()=>cancel.focus(),0)}));
|
|
scenario.addEventListener("change",render);cancel.addEventListener("click",()=>dialog.close());dialog.addEventListener("cancel",e=>{e.preventDefault();dialog.close()});document.querySelector("#confirm").addEventListener("click",()=>{dialog.close();completion.classList.add("show");document.querySelector("#completionText").textContent="“"+pending+"”已记录，结果正在同步。";completion.scrollIntoView({behavior:"smooth",block:"start"})});render();
|
|
</script>
|
|
</body>
|
|
</html>
|