535 lines
38 KiB
HTML
535 lines
38 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN" data-theme="system">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="data:,">
|
|
<title>cmbuyer 桌面端原型 · 采购执行</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light dark;
|
|
--surface-base: #f3f3f3;
|
|
--surface-layer: rgba(255, 255, 255, .86);
|
|
--surface-raised: #ffffff;
|
|
--surface-muted: #f8f8f8;
|
|
--text-primary: #1b1b1b;
|
|
--text-secondary: #5d5d5d;
|
|
--text-disabled: #8a8a8a;
|
|
--accent: #005fb8;
|
|
--accent-hover: #00549f;
|
|
--accent-pressed: #004578;
|
|
--accent-soft: #e7f3ff;
|
|
--success: #0f6b38;
|
|
--success-soft: #e7f5ec;
|
|
--caution: #8a5600;
|
|
--caution-soft: #fff4ce;
|
|
--critical: #b10e1e;
|
|
--critical-soft: #fde7e9;
|
|
--info: #005fb8;
|
|
--info-soft: #e7f3ff;
|
|
--stroke: #d0d0d0;
|
|
--divider: #e5e5e5;
|
|
--focus: #000000;
|
|
--shadow: 0 8px 24px rgba(0, 0, 0, .08);
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--radius-control: 4px;
|
|
--radius-card: 8px;
|
|
--motion-fast: 120ms;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--surface-base: #202020;
|
|
--surface-layer: rgba(44, 44, 44, .94);
|
|
--surface-raised: #2b2b2b;
|
|
--surface-muted: #262626;
|
|
--text-primary: #f5f5f5;
|
|
--text-secondary: #c7c7c7;
|
|
--text-disabled: #8f8f8f;
|
|
--accent: #60aef2;
|
|
--accent-hover: #79bcf5;
|
|
--accent-pressed: #4798de;
|
|
--accent-soft: #12324b;
|
|
--success: #6ccb8e;
|
|
--success-soft: #173d27;
|
|
--caution: #f3c45b;
|
|
--caution-soft: #493711;
|
|
--critical: #ff99a4;
|
|
--critical-soft: #4e1d22;
|
|
--info: #75b9f3;
|
|
--info-soft: #12324b;
|
|
--stroke: #5c5c5c;
|
|
--divider: #3c3c3c;
|
|
--focus: #ffffff;
|
|
--shadow: 0 8px 24px rgba(0, 0, 0, .32);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html[data-theme="system"] {
|
|
--surface-base: #202020;
|
|
--surface-layer: rgba(44, 44, 44, .94);
|
|
--surface-raised: #2b2b2b;
|
|
--surface-muted: #262626;
|
|
--text-primary: #f5f5f5;
|
|
--text-secondary: #c7c7c7;
|
|
--text-disabled: #8f8f8f;
|
|
--accent: #60aef2;
|
|
--accent-hover: #79bcf5;
|
|
--accent-pressed: #4798de;
|
|
--accent-soft: #12324b;
|
|
--success: #6ccb8e;
|
|
--success-soft: #173d27;
|
|
--caution: #f3c45b;
|
|
--caution-soft: #493711;
|
|
--critical: #ff99a4;
|
|
--critical-soft: #4e1d22;
|
|
--info: #75b9f3;
|
|
--info-soft: #12324b;
|
|
--stroke: #5c5c5c;
|
|
--divider: #3c3c3c;
|
|
--focus: #ffffff;
|
|
--shadow: 0 8px 24px rgba(0, 0, 0, .32);
|
|
}
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100vh;
|
|
color: var(--text-primary);
|
|
background: var(--surface-base);
|
|
font: 14px/1.45 "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif;
|
|
}
|
|
button, select, input { font: inherit; }
|
|
a { color: inherit; }
|
|
button, select, a { -webkit-tap-highlight-color: transparent; }
|
|
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
|
|
button:focus-visible, select:focus-visible, a:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }
|
|
button, .button-link {
|
|
min-height: 32px;
|
|
border: 1px solid var(--stroke);
|
|
border-radius: var(--radius-control);
|
|
padding: 5px 14px;
|
|
color: var(--text-primary);
|
|
background: var(--surface-raised);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
button:hover:not(:disabled), .button-link:hover { background: var(--surface-muted); }
|
|
button:active:not(:disabled), .button-link:active { transform: translateY(1px); }
|
|
button:disabled { color: var(--text-disabled); background: var(--surface-muted); cursor: not-allowed; }
|
|
.primary { color: white; border-color: transparent; background: var(--accent); }
|
|
.primary:hover:not(:disabled) { background: var(--accent-hover); }
|
|
.primary:active:not(:disabled) { background: var(--accent-pressed); }
|
|
.danger { color: var(--critical); border-color: var(--critical); background: transparent; }
|
|
.prototype-banner {
|
|
padding: 6px 16px;
|
|
color: #1b1b1b;
|
|
background: #f7cf46;
|
|
border-bottom: 1px solid #b08b00;
|
|
font-weight: 650;
|
|
text-align: center;
|
|
}
|
|
.app-bar {
|
|
min-height: 52px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid var(--divider);
|
|
background: var(--surface-layer);
|
|
}
|
|
.brand { font-size: 16px; font-weight: 650; white-space: nowrap; }
|
|
.brand small { display: block; color: var(--text-secondary); font-size: 11px; font-weight: 400; }
|
|
.tabs { display: flex; align-self: stretch; align-items: stretch; gap: 2px; }
|
|
.tabs a {
|
|
min-height: 40px;
|
|
padding: 9px 16px 7px;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 3px solid transparent;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
.tabs a[aria-current="page"] { color: var(--text-primary); border-bottom-color: var(--accent); }
|
|
.app-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
|
|
.app-actions label { color: var(--text-secondary); font-size: 12px; }
|
|
.app-actions select { min-height: 32px; border: 1px solid var(--stroke); border-radius: 4px; background: var(--surface-raised); color: var(--text-primary); padding: 4px 28px 4px 8px; }
|
|
main { max-width: 1480px; margin: 0 auto; padding: 16px; }
|
|
.prototype-tools {
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 1fr) auto;
|
|
gap: 12px;
|
|
align-items: end;
|
|
margin-bottom: 12px;
|
|
padding: 12px;
|
|
border: 1px dashed var(--stroke);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-layer);
|
|
}
|
|
.prototype-tools label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 12px; }
|
|
.prototype-tools select { min-height: 34px; width: 100%; border: 1px solid var(--stroke); border-radius: 4px; color: var(--text-primary); background: var(--surface-raised); padding: 5px 8px; }
|
|
.tool-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.status-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
border: 1px solid var(--stroke);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-raised);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.health { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; padding: 12px 16px; border-right: 1px solid var(--divider); }
|
|
.health:last-child { border-right: 0; }
|
|
.health-mark { width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-top: 5px; }
|
|
.health strong { font-weight: 650; }
|
|
.health span:last-child { grid-column: 2; color: var(--text-secondary); font-size: 12px; }
|
|
.tone-success { color: var(--success); }
|
|
.tone-info { color: var(--info); }
|
|
.tone-caution { color: var(--caution); }
|
|
.tone-critical { color: var(--critical); }
|
|
.banner {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 10px;
|
|
margin-top: 12px;
|
|
padding: 12px 14px;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--radius-card);
|
|
background: var(--info-soft);
|
|
color: var(--info);
|
|
}
|
|
.banner[data-tone="success"] { background: var(--success-soft); color: var(--success); }
|
|
.banner[data-tone="caution"] { background: var(--caution-soft); color: var(--caution); }
|
|
.banner[data-tone="critical"] { background: var(--critical-soft); color: var(--critical); }
|
|
.banner-symbol { font-weight: 800; }
|
|
.banner strong { display: block; margin-bottom: 2px; }
|
|
.banner p { margin: 0; color: var(--text-primary); }
|
|
.workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 12px; margin-top: 12px; }
|
|
.stack { display: grid; gap: 12px; align-content: start; }
|
|
.card { border: 1px solid var(--stroke); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: 0 2px 8px rgba(0,0,0,.04); overflow: hidden; }
|
|
.card-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--divider); }
|
|
.card-header h1, .card-header h2 { margin: 0; font-size: 17px; line-height: 1.35; }
|
|
.card-header p { margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
|
|
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
|
|
.badge[data-tone="info"] { color: var(--info); background: var(--info-soft); }
|
|
.badge[data-tone="success"] { color: var(--success); background: var(--success-soft); }
|
|
.badge[data-tone="caution"] { color: var(--caution); background: var(--caution-soft); }
|
|
.badge[data-tone="critical"] { color: var(--critical); background: var(--critical-soft); }
|
|
.card-body { padding: 14px 16px 16px; }
|
|
.task-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
|
|
.task-grid div { min-width: 0; }
|
|
.task-grid dt { color: var(--text-secondary); font-size: 12px; }
|
|
.task-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
|
.task-grid .span-2 { grid-column: 1 / -1; }
|
|
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
|
|
.steps li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: start; color: var(--text-secondary); }
|
|
.step-mark { width: 18px; height: 18px; border: 1px solid var(--stroke); border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
|
|
.steps li.done { color: var(--success); }
|
|
.steps li.active { color: var(--text-primary); font-weight: 650; }
|
|
.steps li.active .step-mark { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent-soft); }
|
|
.steps small { color: var(--text-secondary); font-weight: 400; }
|
|
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
|
.metric { padding: 10px; border: 1px solid var(--divider); border-radius: 6px; background: var(--surface-muted); }
|
|
.metric span { display: block; color: var(--text-secondary); font-size: 11px; }
|
|
.metric strong { display: block; margin-top: 2px; font-size: 16px; font-variant-numeric: tabular-nums; }
|
|
.log-list { list-style: none; padding: 0; margin: 0; max-height: 290px; overflow: auto; }
|
|
.log-list li { display: grid; grid-template-columns: 64px 78px 1fr; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--divider); }
|
|
.log-list li:last-child { border-bottom: 0; }
|
|
.log-list time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
|
|
.log-level { font-size: 12px; font-weight: 650; }
|
|
.poll-bar { margin-top: 12px; padding: 12px 16px; display: grid; grid-template-columns: minmax(160px, auto) 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--stroke); border-radius: var(--radius-card); background: var(--surface-raised); box-shadow: var(--shadow); }
|
|
.poll-summary { display: flex; gap: 20px; flex-wrap: wrap; }
|
|
.poll-summary span { color: var(--text-secondary); font-size: 12px; }
|
|
.poll-summary strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
|
|
.disabled-reason { color: var(--text-secondary); font-size: 12px; max-width: 320px; }
|
|
dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--stroke); border-radius: 8px; padding: 0; color: var(--text-primary); background: var(--surface-raised); box-shadow: 0 24px 80px rgba(0,0,0,.3); }
|
|
dialog::backdrop { background: rgba(0,0,0,.42); }
|
|
.dialog-body { padding: 20px; }
|
|
.dialog-body h2 { margin: 0 0 8px; font-size: 18px; }
|
|
.dialog-body p { margin: 0 0 10px; }
|
|
.dialog-body code { overflow-wrap: anywhere; }
|
|
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--divider); }
|
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
|
|
|
|
@media (max-width: 1007px) {
|
|
.workspace { grid-template-columns: 1fr; }
|
|
.log-list { max-height: 220px; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.app-bar { align-items: stretch; flex-wrap: wrap; gap: 4px 12px; }
|
|
.tabs { order: 3; width: 100%; }
|
|
.tabs a { flex: 1; justify-content: center; padding-inline: 8px; }
|
|
.app-actions label { position: absolute; clip: rect(0,0,0,0); }
|
|
main { padding: 8px; }
|
|
.prototype-tools { grid-template-columns: 1fr; }
|
|
.status-strip { grid-template-columns: 1fr; }
|
|
.health { border-right: 0; border-bottom: 1px solid var(--divider); }
|
|
.health:last-child { border-bottom: 0; }
|
|
.task-grid { grid-template-columns: 1fr; }
|
|
.task-grid .span-2 { grid-column: auto; }
|
|
.metric-row { grid-template-columns: 1fr; }
|
|
.log-list li { grid-template-columns: 58px 1fr; }
|
|
.log-list li span:last-child { grid-column: 1 / -1; }
|
|
.poll-bar { grid-template-columns: 1fr; gap: 8px; }
|
|
.poll-bar button { width: 100%; min-height: 40px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.prototype-banner, .banner, .badge, .primary, .health-mark { forced-color-adjust: auto; }
|
|
.card, .status-strip, .poll-bar, .prototype-tools { box-shadow: none; }
|
|
.health-mark { border: 1px solid ButtonText; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="prototype-banner" role="note">PROTOTYPE - 仅供枚举交互，非实现依据；全部是假数据，不连接 ADB、web 服务或拼多多</div>
|
|
<header class="app-bar">
|
|
<div class="brand">cmbuyer 执行器<small>Windows / PySide6 前置原型</small></div>
|
|
<nav class="tabs" aria-label="主要页面">
|
|
<a href="desk-execution.html" aria-current="page">采购执行</a>
|
|
<a href="desk-device-settings.html">设备与参数</a>
|
|
</nav>
|
|
<div class="app-actions">
|
|
<label for="theme">主题</label>
|
|
<select id="theme" aria-label="原型主题">
|
|
<option value="system">跟随系统</option>
|
|
<option value="light">浅色</option>
|
|
<option value="dark">深色</option>
|
|
</select>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="prototype-tools" aria-labelledby="prototype-tools-title">
|
|
<label id="prototype-tools-title" for="scenario">原型状态切换器（仅改变本页假数据）
|
|
<select id="scenario">
|
|
<option value="not_ready">未就绪 · web 不可达</option>
|
|
<option value="version_mismatch">未就绪 · 拼多多版本失配</option>
|
|
<option value="idle" selected>已就绪 · 尚未轮询</option>
|
|
<option value="polling">轮询中 · 暂无任务</option>
|
|
<option value="trial">执行中 · 第一趟试选</option>
|
|
<option value="trial_done">第一趟完成 · 已释放手机</option>
|
|
<option value="dry_run">执行中 · 下单只读演练</option>
|
|
<option value="dry_run_ready">演练完成 · 等待真实第二趟</option>
|
|
<option value="order_prefence">真实第二趟 · 围栏前校验</option>
|
|
<option value="fencing">真实第二趟 · 申请围栏中</option>
|
|
<option value="fence_failed">围栏失败或响应不明 · 不点击</option>
|
|
<option value="fenced">围栏后 · 核对同一提交</option>
|
|
<option value="waiting_payment">明确已创建 · 等人付款</option>
|
|
<option value="uncertain">点击结果不明 · 可能已创建</option>
|
|
<option value="security">安全校验 · 已停止</option>
|
|
<option value="payment_handoff">外部支付交接 · 已停止</option>
|
|
<option value="manual">围栏前异常 · 待人工</option>
|
|
<option value="failed_stop">连续失败 · 轮询已停止</option>
|
|
</select>
|
|
</label>
|
|
<div class="tool-buttons">
|
|
<button type="button" id="reset">复位假数据</button>
|
|
<button type="button" id="close-demo">演示关闭窗口</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="status-strip" aria-label="就绪状态">
|
|
<div class="health" id="web-health">
|
|
<span class="health-mark" aria-hidden="true"></span><strong>web 服务</strong><span>已连接 · 假环境</span>
|
|
</div>
|
|
<div class="health" id="device-health">
|
|
<span class="health-mark" aria-hidden="true"></span><strong>Android 设备</strong><span>FAKE-DEVICE-01 · 已解锁（模拟）</span>
|
|
</div>
|
|
<div class="health" id="version-health">
|
|
<span class="health-mark" aria-hidden="true"></span><strong>拼多多版本</strong><span>实际 / 已取证：均待 T-103 真机取证</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="banner" id="state-banner" data-tone="success" aria-live="polite" aria-atomic="true">
|
|
<span class="banner-symbol" aria-hidden="true">i</span>
|
|
<div><strong id="banner-title">设备已就绪</strong><p id="banner-text">可以开始定时轮询。当前页面不会连接真实设备。</p></div>
|
|
</section>
|
|
|
|
<div class="workspace">
|
|
<div class="stack">
|
|
<section class="card" aria-labelledby="task-title">
|
|
<div class="card-header">
|
|
<div><h1 id="task-title">当前任务</h1><p id="task-subtitle">尚未领取任务</p></div>
|
|
<span class="badge" id="leg-badge" data-tone="success">空闲</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl class="task-grid">
|
|
<div><dt>任务编号</dt><dd id="task-id">—</dd></div>
|
|
<div><dt>剩余租约</dt><dd id="lease">—</dd></div>
|
|
<div class="span-2"><dt>商品</dt><dd id="product">暂无商品；轮询会在安全就绪后领取一条任务</dd></div>
|
|
<div><dt>颜色分类</dt><dd id="color">—</dd></div>
|
|
<div><dt>尺码 / 数量</dt><dd id="size-qty">—</dd></div>
|
|
<div><dt>授权单价</dt><dd id="auth-price">—</dd></div>
|
|
<div><dt>金额上限</dt><dd id="price-cap">—</dd></div>
|
|
<div class="span-2"><dt>提交围栏</dt><dd id="submission">未建立</dd></div>
|
|
</dl>
|
|
<ol class="steps" id="steps" aria-label="执行步骤"></ol>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card" aria-labelledby="run-title">
|
|
<div class="card-header"><div><h2 id="run-title">会话概览</h2><p>只显示当前前台会话，不代表后台进程</p></div></div>
|
|
<div class="card-body metric-row">
|
|
<div class="metric"><span>下次轮询</span><strong id="countdown">—</strong></div>
|
|
<div class="metric"><span>连续失败</span><strong id="failure-count">0 / 3</strong></div>
|
|
<div class="metric"><span>本次完成</span><strong id="completed-count">0</strong></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="card" aria-labelledby="log-title">
|
|
<div class="card-header"><div><h2 id="log-title">事件日志</h2><p>假日志；不含凭据、地址、手机号或页面全文</p></div><button type="button" id="export-log">导出假诊断摘要</button></div>
|
|
<ul class="log-list" id="logs" aria-live="polite" aria-relevant="additions"></ul>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="poll-bar" aria-label="轮询控制">
|
|
<button type="button" class="primary" id="primary-action">开始轮询</button>
|
|
<div class="poll-summary"><span>会话：<strong id="session-state">未启动</strong></span><span>当前步骤：<strong id="current-step">等待开始</strong></span></div>
|
|
<div class="disabled-reason" id="action-reason">web、设备和已取证 App 版本均就绪后才能开始。</div>
|
|
</section>
|
|
</main>
|
|
|
|
<dialog id="info-dialog" aria-labelledby="dialog-title">
|
|
<div class="dialog-body">
|
|
<h2 id="dialog-title">安全说明</h2>
|
|
<p id="dialog-text"></p>
|
|
<p><strong>原型边界：</strong>本对话框不会调用 API、ADB 或任何平台动作。</p>
|
|
</div>
|
|
<div class="dialog-actions"><button type="button" class="primary" id="dialog-close">知道了</button></div>
|
|
</dialog>
|
|
<div id="announcer" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
|
|
|
|
<script>
|
|
(() => {
|
|
'use strict';
|
|
const $ = (id) => document.getElementById(id);
|
|
const task = {
|
|
id: 'CB-20260803-0042',
|
|
product: '纯棉圆领短袖 T 恤（原型假数据）',
|
|
color: '白色', sizeQty: 'XL / 2 件', authPrice: 'CNY 32.50', cap: 'CNY 80.00'
|
|
};
|
|
const baseSteps = {
|
|
idle: [],
|
|
trial: ['打开商品（待真机判据）', '精确匹配颜色分类与尺码', '从规格面板读取单价', '截图并退出商品页'],
|
|
dry: ['重新打开商品（待真机判据）', '精确选择与数量复核', '读取订单确认页非敏感摘要', '验证提交控件唯一后退出'],
|
|
order: ['重新选择同一规格', '闸门二：单价必须等于授权价', '数量复核与闸门三', '申请服务端提交围栏', '围栏许可后内部仅点击一次', '调和同一提交结果']
|
|
};
|
|
const scenarios = {
|
|
not_ready: { tone:'critical', title:'web 服务不可达', text:'未开始轮询。检查本地网络和服务地址；已完成的本地证据会保留待补传。', web:'bad', device:'ok', version:'ok', leg:'未就绪', legTone:'critical', action:'开始轮询', enabled:false, reason:'web 服务未就绪，不能领取任务。', session:'未启动', step:'连接检查', kind:'idle', active:-1, countdown:'—', fail:'1 / 3' },
|
|
version_mismatch: { tone:'critical', title:'拼多多版本与证据不一致', text:'已 fail closed：停止领取真机任务。下一步是由人重新取证并记录 App 版本，不能沿用旧判据。', web:'ok', device:'ok', version:'bad', leg:'版本失配', legTone:'critical', action:'开始轮询', enabled:false, reason:'App 版本失配；必须先完成本项目真机取证。', session:'已停止', step:'等待重新取证', kind:'idle', active:-1, countdown:'—', fail:'0 / 3' },
|
|
idle: { tone:'success', title:'设备已就绪（模拟）', text:'三项就绪条件在本场景中均为模拟通过，可以演示定时轮询；不会连接真实设备。', web:'ok', device:'ok', version:'ok', leg:'空闲', legTone:'success', action:'开始轮询', enabled:true, reason:'点击只切换原型状态，不发起网络请求。', session:'未启动', step:'等待开始', kind:'idle', active:-1, countdown:'—', fail:'0 / 3' },
|
|
polling: { tone:'info', title:'正在轮询，暂无待领任务', text:'无任务是正常空状态，不计入失败；将按配置间隔继续检查。', web:'ok', device:'ok', version:'ok', leg:'轮询中', legTone:'info', action:'停止轮询', enabled:true, reason:'停止后不再领取新任务。', session:'运行中', step:'等待下一轮', kind:'idle', active:-1, countdown:'00:12', fail:'0 / 3', count:2 },
|
|
trial: { tone:'info', title:'第一趟试选正在执行', text:'只勾选规格、读价和截图；不会进入订单确认流程，完成后必须退出商品页释放手机。', web:'ok', device:'ok', version:'ok', leg:'TRIAL · 第一趟试选', legTone:'info', action:'真机步骤执行中', enabled:false, reason:'真机步骤期间禁用硬取消和关闭，避免留下无法判定的中间态。', session:'运行中', step:'读取规格面板单价', kind:'trial', active:2, countdown:'暂停', fail:'0 / 3', lease:'04:18' },
|
|
trial_done: { tone:'success', title:'试选已回传，手机已释放', text:'规格与价格证据已保存（模拟）；任务等待管理员确认，本设备继续下一轮。', web:'ok', device:'ok', version:'ok', leg:'TRIAL · 已完成', legTone:'success', action:'停止轮询', enabled:true, reason:'手机已退出商品页，可以安全停止轮询。', session:'运行中', step:'等待下一轮', kind:'trial', active:4, countdown:'00:09', fail:'0 / 3', count:3 },
|
|
dry_run: { tone:'info', title:'DRY-RUN · 只读演练', text:'只到订单确认页读取非敏感摘要并验证控件唯一；不会提交订单，也不会消费授权。', web:'ok', device:'ok', version:'ok', leg:'DRY-RUN · 不会提交', legTone:'info', action:'只读演练进行中', enabled:false, reason:'演练中不提供提交动作；真机步骤期间受控关闭。', session:'运行中', step:'读取订单确认页', kind:'dry', active:2, countdown:'暂停', fail:'0 / 3', lease:'03:42' },
|
|
dry_run_ready: { tone:'success', title:'只读演练已完成', text:'演练证据已回传（模拟）并退出确认页。旧演练不能替代真实第二趟的当前页面事实。', web:'ok', device:'ok', version:'ok', leg:'DRY-RUN · READY', legTone:'success', action:'停止轮询', enabled:true, reason:'等待服务端安排真实第二趟；不会由用户直接触发提交。', session:'运行中', step:'等待真实第二趟', kind:'dry', active:4, countdown:'00:16', fail:'0 / 3', count:4 },
|
|
order_prefence: { tone:'caution', title:'真实第二趟 · 围栏前校验', text:'正在重新验证授权、闸门二、数量、闸门三和控件唯一。此时尚无点击许可。', web:'ok', device:'ok', version:'ok', leg:'ORDER · 围栏前', legTone:'caution', action:'安全校验进行中', enabled:false, reason:'没有服务端围栏许可，绝不能点击提交订单。', session:'运行中', step:'闸门三：核对实付款', kind:'order', active:2, countdown:'暂停', fail:'0 / 3', lease:'02:58' },
|
|
fencing: { tone:'caution', title:'正在申请服务端提交围栏', text:'等待明确的 click_permitted。超时、冲突、网络失败或响应不明都不会点击。', web:'ok', device:'ok', version:'ok', leg:'ORDER · 申请围栏', legTone:'caution', action:'等待围栏响应', enabled:false, reason:'申请中禁止取消、关闭或重复申请。', session:'运行中', step:'申请唯一提交围栏', kind:'order', active:3, countdown:'暂停', fail:'0 / 3', lease:'02:31' },
|
|
fence_failed: { tone:'critical', title:'未获得点击许可', text:'围栏申请失败或响应不明：没有点击提交订单。请按幂等键核查服务端记录，不能直接重试。', web:'bad', device:'ok', version:'ok', leg:'ORDER · 未获许可', legTone:'critical', action:'打开围栏核查说明', enabled:true, safeAction:'review', reason:'只核查围栏状态，不会触发提交。', session:'已停止', step:'核查幂等键', kind:'order', active:3, countdown:'—', fail:'1 / 3', submission:'围栏状态未知 · 幂等键 DEMO-FENCE-042' },
|
|
fenced: { tone:'caution', title:'围栏已建立，只核对同一提交', text:'submission_id 已固定。内部流程至多点击一次；用户界面不提供提交、重领、放弃或重试入口。', web:'ok', device:'ok', version:'ok', leg:'ORDER · 已围栏', legTone:'caution', action:'打开同一提交核查说明', enabled:true, safeAction:'review', reason:'只能查看与调和同一提交记录。', session:'受控执行', step:'调和订单结果', kind:'order', active:5, countdown:'暂停', fail:'0 / 3', lease:'01:49', submission:'SUB-DEMO-0042 · FENCED' },
|
|
waiting_payment: { tone:'success', title:'已明确创建待付款订单', text:'自动化已停止。系统不会付款；请人在拼多多核对后自行付款，再到 web 端标记。', web:'ok', device:'ok', version:'ok', leg:'WAITING_PAYMENT', legTone:'success', action:'查看待付款说明', enabled:true, safeAction:'paymentInfo', reason:'仅显示人工收口说明，不执行支付。', session:'已停止', step:'等待人工付款', kind:'order', active:6, countdown:'—', fail:'0 / 3', count:5, submission:'SUB-DEMO-0042 · SUBMITTED' },
|
|
uncertain: { tone:'critical', title:'订单可能已创建，结果不明确', text:'保持金额预留和永久围栏，只核查 SUB-DEMO-0042；禁止重新领取、放弃授权或再次点击。', web:'ok', device:'ok', version:'ok', leg:'RECONCILIATION_REQUIRED', legTone:'critical', action:'打开人工核查说明', enabled:true, safeAction:'review', reason:'核查不会发起新的下单。可另行导出假证据摘要。', session:'已停止', step:'人工核查同一提交', kind:'order', active:5, countdown:'—', fail:'0 / 3', submission:'SUB-DEMO-0042 · 结果不明确' },
|
|
security: { tone:'critical', title:'检测到安全校验，已停止', text:'保留现场并转人工；不尝试绕过验证码、风控、人脸或短信校验。若已围栏，只调和同一提交。', web:'ok', device:'ok', version:'ok', leg:'待人工 · 安全校验', legTone:'critical', action:'打开人工核查说明', enabled:true, safeAction:'review', reason:'只显示核查说明，不提供绕过或继续入口。', session:'已停止', step:'等待人工处理', kind:'order', active:5, countdown:'—', fail:'1 / 3', submission:'SUB-DEMO-0042 · RECONCILIATION_REQUIRED' },
|
|
payment_handoff: { tone:'critical', title:'进入外部支付交接，已停止', text:'订单可能已创建、支付未完成。不会读取或输入支付凭据，也没有“继续付款”按钮。', web:'ok', device:'ok', version:'ok', leg:'待人工 · 外部支付', legTone:'critical', action:'打开人工核查说明', enabled:true, safeAction:'paymentInfo', reason:'只显示人工核查与付款边界。', session:'已停止', step:'人工核查同一提交', kind:'order', active:5, countdown:'—', fail:'0 / 3', submission:'SUB-DEMO-0042 · HANDED_OFF' },
|
|
manual: { tone:'caution', title:'任务已转人工：授权价与现价不一致', text:'授权 CNY 32.50，规格面板现价 CNY 35.00。没有下单，也不会自动放弃；请联系管理员处理。', web:'ok', device:'ok', version:'ok', leg:'NEEDS_MANUAL', legTone:'caution', action:'导出假诊断摘要', enabled:true, safeAction:'export', reason:'导出仅生成本地假文本，不包含页面全文或敏感信息。', session:'继续轮询其他任务', step:'当前任务已移交', kind:'order', active:1, countdown:'00:11', fail:'0 / 3', submission:'未建立' },
|
|
failed_stop: { tone:'critical', title:'连续失败达到阈值，轮询已停止', text:'最近三次均为服务连接失败。检查设置和网络；修复后重新开始普通轮询，不会重试任何提交点击。', web:'bad', device:'ok', version:'ok', leg:'自动停止', legTone:'critical', action:'前往设备与参数', enabled:true, safeAction:'settings', reason:'先修复连接；不会自动恢复轮询。', session:'已停止', step:'等待修复', kind:'idle', active:-1, countdown:'—', fail:'3 / 3', count:4 }
|
|
};
|
|
|
|
function setHealth(id, state, detail) {
|
|
const el = $(id);
|
|
el.className = `health tone-${state === 'ok' ? 'success' : state === 'bad' ? 'critical' : 'caution'}`;
|
|
if (detail) el.querySelector('span:last-child').textContent = detail;
|
|
}
|
|
function renderSteps(kind, active) {
|
|
const items = baseSteps[kind] || [];
|
|
$('steps').replaceChildren(...items.map((label, index) => {
|
|
const li = document.createElement('li');
|
|
if (active >= items.length || index < active) li.className = 'done';
|
|
else if (index === active) li.className = 'active';
|
|
const mark = document.createElement('span'); mark.className = 'step-mark'; mark.textContent = index < active || active >= items.length ? '✓' : String(index + 1);
|
|
const text = document.createElement('span'); text.textContent = label;
|
|
const state = document.createElement('small'); state.textContent = index < active || active >= items.length ? '已完成' : index === active ? '当前' : '等待';
|
|
li.append(mark, text, state); return li;
|
|
}));
|
|
}
|
|
function appendLog(level, message) {
|
|
const li = document.createElement('li');
|
|
const now = new Date();
|
|
const time = document.createElement('time'); time.textContent = now.toLocaleTimeString('zh-CN', {hour12:false});
|
|
const badge = document.createElement('span'); badge.className = `log-level tone-${level === '停止' ? 'critical' : level === '注意' ? 'caution' : level === '完成' ? 'success' : 'info'}`; badge.textContent = level;
|
|
const text = document.createElement('span'); text.textContent = message;
|
|
li.append(time, badge, text); $('logs').prepend(li);
|
|
while ($('logs').children.length > 8) $('logs').lastElementChild.remove();
|
|
}
|
|
function render(key, announce = true) {
|
|
const s = scenarios[key];
|
|
$('state-banner').dataset.tone = s.tone;
|
|
$('banner-title').textContent = s.title; $('banner-text').textContent = s.text;
|
|
setHealth('web-health', s.web, s.web === 'bad' ? '不可达（模拟）· 已停止领取' : '已连接 · 假环境');
|
|
setHealth('device-health', s.device, 'FAKE-DEVICE-01 · 已解锁（模拟）');
|
|
setHealth('version-health', s.version, s.version === 'bad' ? '模拟失配 · 必须重新取证' : '模拟匹配 · 真实版本值待 T-103 取证');
|
|
$('leg-badge').textContent = s.leg; $('leg-badge').dataset.tone = s.legTone;
|
|
const hasTask = !['not_ready','version_mismatch','idle','polling','failed_stop'].includes(key);
|
|
$('task-subtitle').textContent = hasTask ? '本页所有任务字段均为假数据' : '尚未领取任务';
|
|
$('task-id').textContent = hasTask ? task.id : '—'; $('lease').textContent = s.lease || '—';
|
|
$('product').textContent = hasTask ? task.product : '暂无商品；轮询会在安全就绪后领取一条任务';
|
|
$('color').textContent = hasTask ? task.color : '—'; $('size-qty').textContent = hasTask ? task.sizeQty : '—';
|
|
$('auth-price').textContent = hasTask && s.kind !== 'trial' ? task.authPrice : '—'; $('price-cap').textContent = hasTask ? task.cap : '—';
|
|
$('submission').textContent = s.submission || '未建立';
|
|
renderSteps(s.kind, s.active);
|
|
$('countdown').textContent = s.countdown; $('failure-count').textContent = s.fail; $('completed-count').textContent = String(s.count || 0);
|
|
$('session-state').textContent = s.session; $('current-step').textContent = s.step;
|
|
$('primary-action').textContent = s.action; $('primary-action').disabled = !s.enabled; $('primary-action').dataset.safeAction = s.safeAction || '';
|
|
$('action-reason').textContent = s.reason;
|
|
if (announce) { $('announcer').textContent = `${s.title}。${s.text}`; appendLog(s.tone === 'critical' ? '停止' : s.tone === 'caution' ? '注意' : s.tone === 'success' ? '完成' : '状态', `切换原型状态：${s.title}`); }
|
|
}
|
|
function showDialog(title, text) {
|
|
$('dialog-title').textContent = title; $('dialog-text').textContent = text; $('info-dialog').showModal();
|
|
}
|
|
function exportDemo() {
|
|
const blob = new Blob(['cmbuyer 原型假诊断摘要\n无真实任务、无凭据、无页面全文。\n'], {type:'text/plain;charset=utf-8'});
|
|
const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'cmbuyer-prototype-diagnostic.txt'; a.click(); URL.revokeObjectURL(url);
|
|
appendLog('完成', '已生成本地假诊断摘要；没有外部网络请求。');
|
|
}
|
|
|
|
$('scenario').addEventListener('change', (e) => render(e.target.value));
|
|
$('theme').addEventListener('change', (e) => { document.documentElement.dataset.theme = e.target.value; $('announcer').textContent = `主题已切换为${e.target.options[e.target.selectedIndex].text}`; });
|
|
$('reset').addEventListener('click', () => { $('scenario').value = 'idle'; $('logs').replaceChildren(); render('idle'); appendLog('状态', '假数据已复位。'); });
|
|
$('primary-action').addEventListener('click', () => {
|
|
const action = $('primary-action').dataset.safeAction;
|
|
if (!action) {
|
|
const next = $('scenario').value === 'idle' ? 'polling' : 'idle'; $('scenario').value = next; render(next); return;
|
|
}
|
|
if (action === 'settings') { location.href = 'desk-device-settings.html'; return; }
|
|
if (action === 'export') { exportDemo(); return; }
|
|
if (action === 'paymentInfo') { showDialog('人工付款边界', '自动化已经停止。本系统不会点击支付、免密支付、先用后付或任何扣款控件；订单状态需要人核查。'); return; }
|
|
showDialog('只核查同一提交记录', '围栏后只能围绕 SUB-DEMO-0042 调和。这里没有重新领取、放弃授权、重新申请围栏或再次提交的动作。');
|
|
});
|
|
$('export-log').addEventListener('click', exportDemo);
|
|
$('close-demo').addEventListener('click', () => {
|
|
const unsafe = ['trial','dry_run','order_prefence','fencing','fenced'].includes($('scenario').value);
|
|
showDialog(unsafe ? '当前不能直接关闭' : '关闭窗口协议', unsafe ? '真机或围栏流程处于受控阶段。原生实现需先完成安全停靠或保持同一 submission 调和，不能让关闭看起来等于“可以重来”。' : '原生实现关闭窗口后立即停止普通轮询，不留后台进程。此 HTML 只演示规则，不会关闭浏览器。');
|
|
});
|
|
$('dialog-close').addEventListener('click', () => $('info-dialog').close());
|
|
$('info-dialog').addEventListener('click', (e) => { if (e.target === $('info-dialog')) $('info-dialog').close(); });
|
|
render('idle', false); appendLog('状态', '原型已加载；未连接任何服务或设备。');
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|