feat(admin): add routed task evidence details
This commit is contained in:
QiuSW
@@ -0,0 +1,211 @@
|
||||
"use strict";
|
||||
|
||||
const test = require("node:test");
|
||||
const assert = require("node:assert/strict");
|
||||
const fs = require("node:fs");
|
||||
const path = require("node:path");
|
||||
const vm = require("node:vm");
|
||||
|
||||
const source = fs.readFileSync(path.join(__dirname, "tasks.js"), "utf8");
|
||||
|
||||
test("visible button opens the same routed detail and close restores list state", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.requests.length, 1);
|
||||
assert.equal(harness.requests[0].url, "/tasks/a3c9f507-7473-4fa6-8d71-8786c34c6301");
|
||||
assert.equal(harness.requests[0].options.headers["X-CMBuyer-View"], "drawer");
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.closeButton.focused, true);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
assert.equal(harness.history.pushes[0].url, harness.requests[0].url);
|
||||
assert.equal(harness.history.pushes[0].state.focusTarget, "button");
|
||||
|
||||
harness.closeButton.listeners.click();
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focused, true);
|
||||
assert.equal(harness.row.focused, false);
|
||||
assert.equal(harness.scrolls.length, 1);
|
||||
assert.equal(harness.scrolls[0].top, 275);
|
||||
assert.equal(harness.scrolls[0].behavior, "auto");
|
||||
});
|
||||
|
||||
test("button focus target survives back, forward, and back again", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
const drawerState = harness.history.pushes[0].state;
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.button.focusCalls, 1);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
|
||||
harness.popstate({state: drawerState});
|
||||
await harness.flush();
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focusCalls, 2);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
});
|
||||
|
||||
test("failed forward retry reuses history and closes back to button in one step", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
const drawerState = harness.history.pushes[0].state;
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
|
||||
harness.failNextRequest();
|
||||
harness.popstate({state: drawerState});
|
||||
await harness.flush();
|
||||
const retry = harness.body.children[1].children[0];
|
||||
retry.listeners.click();
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
assert.equal(harness.drawer.open, true);
|
||||
harness.closeButton.listeners.click();
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
assert.equal(harness.button.focusCalls, 2);
|
||||
assert.equal(harness.row.focusCalls, 0);
|
||||
});
|
||||
|
||||
test("double click and Enter open rows but nested controls never do", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
const ignored = {closest: () => ({})};
|
||||
const rowTarget = {closest: () => null};
|
||||
|
||||
harness.row.listeners.dblclick({target: ignored});
|
||||
harness.row.listeners.dblclick({target: rowTarget});
|
||||
await harness.flush();
|
||||
assert.equal(harness.requests.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
let prevented = false;
|
||||
harness.row.listeners.keydown({key: "Enter", target: harness.row, preventDefault: () => { prevented = true; }});
|
||||
await harness.flush();
|
||||
assert.equal(prevented, true);
|
||||
assert.equal(harness.requests.length, 2);
|
||||
|
||||
harness.row.listeners.keydown({key: "Enter", target: ignored, preventDefault: () => assert.fail("nested control Enter was intercepted")});
|
||||
assert.equal(harness.requests.length, 2);
|
||||
});
|
||||
|
||||
test("browser back and forward close and reopen without duplicating history", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.row.listeners.keydown({key: "Enter", target: harness.row, preventDefault() {}});
|
||||
await harness.flush();
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
|
||||
harness.popstate({state: {cmbuyerList: true}});
|
||||
assert.equal(harness.drawer.open, false);
|
||||
harness.popstate({state: {cmbuyerDrawer: true, detailURL: harness.row.dataset.detailUrl}});
|
||||
await harness.flush();
|
||||
|
||||
assert.equal(harness.drawer.open, true);
|
||||
assert.equal(harness.requests.length, 2);
|
||||
assert.equal(harness.history.pushes.length, 1);
|
||||
});
|
||||
|
||||
test("Escape follows browser history and does not mutate list URL", async () => {
|
||||
const harness = createDrawerHarness();
|
||||
harness.button.listeners.click();
|
||||
await harness.flush();
|
||||
let prevented = false;
|
||||
|
||||
harness.drawer.listeners.cancel({preventDefault: () => { prevented = true; }});
|
||||
|
||||
assert.equal(prevented, true);
|
||||
assert.equal(harness.history.backCalls, 1);
|
||||
assert.equal(harness.history.replaces[0].url, "/tasks?status=DRAFT");
|
||||
});
|
||||
|
||||
function createDrawerHarness() {
|
||||
class FakeElement {
|
||||
constructor() {
|
||||
this.listeners = {};
|
||||
this.dataset = {};
|
||||
this.open = false;
|
||||
this.focused = false;
|
||||
this.focusCalls = 0;
|
||||
this.children = [];
|
||||
this._innerHTML = "";
|
||||
}
|
||||
addEventListener(type, listener) { this.listeners[type] = listener; }
|
||||
focus() { this.focused = true; this.focusCalls++; }
|
||||
showModal() { this.open = true; }
|
||||
close() { this.open = false; }
|
||||
replaceChildren(...children) { this.children = children; this._innerHTML = ""; }
|
||||
append(...children) { this.children.push(...children); }
|
||||
setAttribute() {}
|
||||
closest() { return null; }
|
||||
set innerHTML(value) { this._innerHTML = value; }
|
||||
get innerHTML() { return this._innerHTML; }
|
||||
}
|
||||
|
||||
const body = new FakeElement();
|
||||
const closeButton = new FakeElement();
|
||||
const button = new FakeElement();
|
||||
const row = new FakeElement();
|
||||
row.dataset.detailUrl = "/tasks/a3c9f507-7473-4fa6-8d71-8786c34c6301";
|
||||
row.querySelector = (selector) => selector === "[data-open-detail]" ? button : null;
|
||||
const drawer = new FakeElement();
|
||||
drawer.querySelector = (selector) => ({"[data-detail-body]": body, "[data-close-detail]": closeButton})[selector] || null;
|
||||
|
||||
const requests = [];
|
||||
const popstateListeners = [];
|
||||
const scrolls = [];
|
||||
let failNext = false;
|
||||
const history = {
|
||||
state: null,
|
||||
pushes: [],
|
||||
replaces: [],
|
||||
backCalls: 0,
|
||||
pushState(state, _title, url) { this.state = state; this.pushes.push({state, url}); },
|
||||
replaceState(state, _title, url) { this.state = state; this.replaces.push({state, url}); },
|
||||
back() { this.backCalls++; },
|
||||
};
|
||||
const document = {
|
||||
querySelector: (selector) => selector === "[data-start-purchases]" ? null : selector === "[data-detail-drawer]" ? drawer : null,
|
||||
querySelectorAll: (selector) => selector === "[data-task-row]" ? [row] : [],
|
||||
createElement: () => new FakeElement(),
|
||||
contains: (element) => element === row || element === button,
|
||||
};
|
||||
const window = {
|
||||
location: {pathname: "/tasks", search: "?status=DRAFT"},
|
||||
history,
|
||||
scrollY: 275,
|
||||
scrollTo: (value) => scrolls.push(value),
|
||||
addEventListener(type, listener) { if (type === "popstate") popstateListeners.push(listener); },
|
||||
};
|
||||
const context = {
|
||||
AbortController,
|
||||
document,
|
||||
window,
|
||||
fetch: async (url, options) => {
|
||||
requests.push({url, options});
|
||||
if (failNext) {
|
||||
failNext = false;
|
||||
return {ok: false, headers: {get: () => "text/html"}, text: async () => ""};
|
||||
}
|
||||
return {ok: true, headers: {get: () => "text/html; charset=utf-8"}, text: async () => '<article data-task-detail-content>详情</article>'};
|
||||
},
|
||||
};
|
||||
vm.runInNewContext(source, context, {filename: "tasks.js"});
|
||||
|
||||
return {
|
||||
body, button, closeButton, drawer, history, requests, row, scrolls,
|
||||
failNextRequest: () => { failNext = true; },
|
||||
popstate: (event) => { history.state = event.state; popstateListeners.forEach((listener) => listener(event)); },
|
||||
flush: () => new Promise((resolve) => setImmediate(resolve)),
|
||||
};
|
||||
}
|
||||
@@ -58,3 +58,110 @@
|
||||
});
|
||||
refresh();
|
||||
})();
|
||||
|
||||
(() => {
|
||||
"use strict";
|
||||
const drawer = document.querySelector("[data-detail-drawer]");
|
||||
if (!drawer) return;
|
||||
const body = drawer.querySelector("[data-detail-body]");
|
||||
const closeButton = drawer.querySelector("[data-close-detail]");
|
||||
const rows = [...document.querySelectorAll("[data-task-row]")];
|
||||
const initialURL = window.location.pathname + window.location.search;
|
||||
let focusTrigger = null;
|
||||
let scrollPosition = window.scrollY;
|
||||
let activeRequest = null;
|
||||
|
||||
const isInteractive = (target) => Boolean(target && typeof target.closest === "function" && target.closest("a,button,input,select,textarea,label,[contenteditable=true]"));
|
||||
const showDrawer = () => {
|
||||
if (!drawer.open) drawer.showModal();
|
||||
};
|
||||
const restoreList = () => {
|
||||
if (activeRequest) {
|
||||
activeRequest.abort();
|
||||
activeRequest = null;
|
||||
}
|
||||
if (drawer.open) drawer.close();
|
||||
window.scrollTo({top: scrollPosition, behavior: "auto"});
|
||||
if (focusTrigger && document.contains(focusTrigger)) focusTrigger.focus({preventScroll: true});
|
||||
};
|
||||
const showError = (url, row, requestedFocus, pushHistory) => {
|
||||
body.replaceChildren();
|
||||
const message = document.createElement("p");
|
||||
message.className = "drawer-feedback";
|
||||
message.setAttribute("role", "alert");
|
||||
message.textContent = "任务详情加载失败。请重试，或在完整页打开。";
|
||||
const actions = document.createElement("p");
|
||||
const retry = document.createElement("button");
|
||||
retry.className = "button primary";
|
||||
retry.type = "button";
|
||||
retry.textContent = "重试";
|
||||
retry.addEventListener("click", () => loadDetail(url, row, requestedFocus, pushHistory));
|
||||
const fallback = document.createElement("a");
|
||||
fallback.className = "button";
|
||||
fallback.href = url;
|
||||
fallback.textContent = "在完整页打开";
|
||||
actions.className = "actions";
|
||||
actions.append(retry, fallback);
|
||||
body.append(message, actions);
|
||||
};
|
||||
const loadDetail = async (url, row, requestedFocus, pushHistory) => {
|
||||
if (activeRequest) activeRequest.abort();
|
||||
const requestController = new AbortController();
|
||||
activeRequest = requestController;
|
||||
focusTrigger = requestedFocus || focusTrigger;
|
||||
if (pushHistory) scrollPosition = window.scrollY;
|
||||
body.innerHTML = '<p class="drawer-feedback" role="status">正在加载任务详情…</p>';
|
||||
showDrawer();
|
||||
try {
|
||||
const response = await fetch(url, {headers: {"X-CMBuyer-View": "drawer", "Accept": "text/html"}, credentials: "same-origin", signal: requestController.signal});
|
||||
if (!response.ok || !String(response.headers.get("Content-Type") || "").toLowerCase().startsWith("text/html")) throw new Error("detail request rejected");
|
||||
const fragment = await response.text();
|
||||
if (!fragment.includes("data-task-detail-content")) throw new Error("detail fragment missing");
|
||||
body.innerHTML = fragment;
|
||||
if (pushHistory) window.history.pushState({cmbuyerDrawer: true, detailURL: url, focusTarget: requestedFocus === row ? "row" : "button"}, "", url);
|
||||
closeButton.focus();
|
||||
} catch (error) {
|
||||
if (error.name !== "AbortError") showError(url, row, requestedFocus, pushHistory);
|
||||
} finally {
|
||||
if (activeRequest === requestController) activeRequest = null;
|
||||
}
|
||||
};
|
||||
const requestClose = () => {
|
||||
if (window.history.state && window.history.state.cmbuyerDrawer) window.history.back();
|
||||
else restoreList();
|
||||
};
|
||||
|
||||
window.history.replaceState({cmbuyerList: true, listURL: initialURL}, "", initialURL);
|
||||
rows.forEach((row) => {
|
||||
const url = row.dataset.detailUrl;
|
||||
row.addEventListener("dblclick", (event) => {
|
||||
if (!isInteractive(event.target)) loadDetail(url, row, row, true);
|
||||
});
|
||||
row.addEventListener("keydown", (event) => {
|
||||
if (event.key === "Enter" && event.target === row) {
|
||||
event.preventDefault();
|
||||
loadDetail(url, row, row, true);
|
||||
}
|
||||
});
|
||||
const button = row.querySelector("[data-open-detail]");
|
||||
if (button) button.addEventListener("click", () => loadDetail(url, row, button, true));
|
||||
});
|
||||
closeButton.addEventListener("click", requestClose);
|
||||
drawer.addEventListener("cancel", (event) => {
|
||||
event.preventDefault();
|
||||
requestClose();
|
||||
});
|
||||
window.addEventListener("popstate", (event) => {
|
||||
if (event.state && event.state.cmbuyerDrawer) {
|
||||
const row = rows.find((candidate) => candidate.dataset.detailUrl === event.state.detailURL);
|
||||
if (!row) {
|
||||
restoreList();
|
||||
return;
|
||||
}
|
||||
const requestedFocus = event.state.focusTarget === "button" ? row.querySelector("[data-open-detail]") || row : row;
|
||||
loadDetail(event.state.detailURL, row, requestedFocus, false);
|
||||
return;
|
||||
}
|
||||
restoreList();
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
{{define "task-detail-page.html"}}
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{.Detail.Task.Title}} · 任务详情 · 采购服务</title>
|
||||
<style>
|
||||
:root{--bg:#f4f7fb;--surface:#fff;--text:#172033;--muted:#526079;--border:#cfd8e6;--primary:#155eef;--danger:#b42318;--success:#067647;--focus:#ffbf47;font-family:"Segoe UI","Microsoft YaHei UI",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font-size:16px;line-height:1.55}a{color:#124cc5;text-underline-offset:3px}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.skip{position:fixed;z-index:100;top:8px;left:8px;padding:10px;color:#fff;background:#172033;transform:translateY(-160%)}.skip:focus{transform:translateY(0)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px clamp(16px,4vw,40px);border-bottom:1px solid var(--border);background:var(--surface)}.brand{color:var(--text);font-weight:700;text-decoration:none}.brand b{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:8px;border-radius:8px;background:var(--primary);color:#fff;font-size:.82rem}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid var(--border);border-radius:8px;color:var(--text);background:#fff;font-weight:700;text-decoration:none}.detail-page{width:min(100% - 32px,1120px);margin:28px auto 48px}.detail-shell{display:grid;gap:16px}.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.detail-head h1{margin:0;font-size:clamp(1.45rem,3vw,2rem)}.detail-head p{margin:4px 0;color:var(--muted)}.status{display:inline-block;padding:4px 10px;border-radius:999px;background:#eaf1ff;color:#173d8f;font-size:.88rem;font-weight:700;white-space:nowrap}.safety{margin:0;padding:13px 15px;border:1px solid #a9c3f7;border-left:5px solid var(--primary);border-radius:10px;background:#edf3ff}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:16px}.detail-card{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.detail-card>header,.detail-card>.detail-body{padding:16px 18px}.detail-card>header{border-bottom:1px solid var(--border)}.detail-card h2,.detail-card h3{margin:0}.detail-card header p,.empty-note{margin:4px 0 0;color:var(--muted)}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}.facts div{min-width:0;padding:11px;border:1px solid var(--border);border-radius:8px;background:#f8fafc}.facts dt{font-size:.82rem;color:var(--muted);font-weight:700}.facts dd{margin:3px 0 0;overflow-wrap:anywhere;font-weight:650}.audit-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.audit-list li{padding:12px;border:1px solid var(--border);border-radius:8px}.audit-list p{margin:4px 0}.mono{font-family:Consolas,"SFMono-Regular",monospace;overflow-wrap:anywhere}.evidence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.evidence{margin:0}.evidence img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#eef2f7}.evidence figcaption{margin-top:7px;color:var(--muted);font-size:.85rem}.section-stack{display:grid;gap:16px}.privacy-note{margin:12px 0 0;color:var(--muted);font-size:.88rem}@media(max-width:760px){.detail-grid{grid-template-columns:1fr}.detail-head{display:grid}.facts{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a class="skip" href="#main">跳到主要内容</a>
|
||||
<header class="topbar"><a class="brand" href="/tasks"><b aria-hidden="true">采</b>采购服务</a><a class="button" href="/tasks">返回任务列表</a></header>
|
||||
<main class="detail-page" id="main">{{template "task-detail-content" .}}</main>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
{{define "task-detail-content"}}
|
||||
<article class="detail-shell" data-task-detail-content data-task-id="{{.Detail.Task.ID}}">
|
||||
<header class="detail-head"><div><h1>{{.Detail.Task.Title}}</h1><p>任务 <span class="mono">{{.Detail.Task.ID}}</span> · 版本 {{.Detail.Task.Version}}</p></div><span class="status">{{statusLabel .Detail.Task.Status}}</span></header>
|
||||
<p class="safety"><strong>{{taskSafetyTitle .Detail.Task.Status}}</strong> {{taskSafetyText .Detail.Task.Status}}</p>
|
||||
<div class="detail-grid">
|
||||
<div class="section-stack">
|
||||
<section class="detail-card" aria-labelledby="task-facts-title"><header><h2 id="task-facts-title">任务要求</h2><p>管理员锁定的采购边界；详情页不会触发设备动作。</p></header><div class="detail-body"><dl class="facts"><div><dt>商品</dt><dd><a href="{{canonicalURL .Detail.Task.GoodsID}}" target="_blank" rel="noopener noreferrer">goods_id {{.Detail.Task.GoodsID}}</a></dd></div><div><dt>目标规格</dt><dd>{{.Detail.Task.SKUColor}} / {{.Detail.Task.SKUSize}}</dd></div><div><dt>数量</dt><dd>{{.Detail.Task.Quantity}} 件</dd></div><div><dt>最高总价</dt><dd>¥{{.Detail.Task.MaxTotalPrice}}</dd></div><div><dt>创建时间（上海）</dt><dd><time datetime="{{shanghaiDateTime .Detail.Task.CreatedAt}}">{{shanghaiTime .Detail.Task.CreatedAt}}</time></dd></div><div><dt>更新时间（上海）</dt><dd><time datetime="{{shanghaiDateTime .Detail.Task.UpdatedAt}}">{{shanghaiTime .Detail.Task.UpdatedAt}}</time></dd></div></dl></div></section>
|
||||
|
||||
<section class="detail-card" aria-labelledby="execution-title"><header><h2 id="execution-title">设备执行事实</h2><p>只展示数据库中已存在的 attempt；T-204 不创建执行记录。</p></header><div class="detail-body">{{if .Detail.Attempts}}<ol class="audit-list">{{range .Detail.Attempts}}<li><h3>Attempt <span class="mono">{{.ID}}</span></h3><p>状态：{{attemptStatusLabel .Status}} · 领取代次 {{.ClaimGeneration}}</p><p>开始：<time datetime="{{shanghaiDateTime .StartedAt}}">{{shanghaiTime .StartedAt}}</time>{{with .FinishedAt}} · 结束：<time datetime="{{shanghaiDateTime .}}">{{shanghaiTime .}}</time>{{end}}</p>{{with .FailureCode}}<p>失败码：<span class="mono">{{.}}</span></p>{{end}}{{if or .Gate1UnitPrice .Gate2UnitPrice .QuantityRead .ConfirmAmount}}<p>已有读数：{{with .Gate1UnitPrice}}闸门一 ¥{{.}}；{{end}}{{with .Gate2UnitPrice}}闸门二 ¥{{.}}；{{end}}{{with .QuantityRead}}数量 {{.}}；{{end}}{{with .ConfirmAmount}}确认页 ¥{{.}}{{end}}</p>{{else}}<p class="empty-note">暂无规格、价格或数量读数。</p>{{end}}</li>{{end}}</ol>{{else}}<p class="empty-note">暂无设备执行记录。</p>{{end}}</div></section>
|
||||
|
||||
<section class="detail-card" aria-labelledby="evidence-title"><header><h2 id="evidence-title">内部截图</h2><p>INTERNAL_RAW 仅供已登录管理员审计，不代表价格闸门通过或人工批准。</p></header><div class="detail-body">{{if .Detail.Evidence}}<div class="evidence-grid">{{range .Detail.Evidence}}<figure class="evidence"><img src="/evidence/{{.ID}}" width="{{.Width}}" height="{{.Height}}" loading="lazy" alt="规格面板内部审计截图，采集于 {{shanghaiTime .CapturedAt}}"><figcaption>{{evidenceKindLabel .Kind}}（<span class="mono">{{.Kind}}</span>）· {{formatBytes .ByteSize}} · <time datetime="{{shanghaiDateTime .CapturedAt}}">{{shanghaiTime .CapturedAt}}</time><br>Attempt <span class="mono">{{.AttemptID}}</span></figcaption></figure>{{end}}</div>{{else}}<p class="empty-note">暂无内部截图。只有已认证设备显式上传的 PNG 会出现在这里。</p>{{end}}<p class="privacy-note">截图可能包含页面已显示的地址或手机号；系统不提取、索引或写入日志。完整 XML、外部支付页和支付凭据不会上传。</p></div></section>
|
||||
|
||||
<section class="detail-card" aria-labelledby="submission-title"><header><h2 id="submission-title">提交围栏与结果</h2><p>只读审计；本页没有重试、再次提交或付款动作。</p></header><div class="detail-body">{{if .Detail.Submissions}}<ol class="audit-list">{{range .Detail.Submissions}}<li><h3>Submission <span class="mono">{{.ID}}</span></h3><p>状态：{{submissionStatusLabel .Status}}</p><p>闸门一 ¥{{.Gate1UnitPrice}}；闸门二 ¥{{.Gate2UnitPrice}}；数量 {{.QuantityRead}}；确认页 ¥{{.ConfirmAmount}}</p><p>建立：<time datetime="{{shanghaiDateTime .CreatedAt}}">{{shanghaiTime .CreatedAt}}</time>{{with .ResolvedAt}} · 调和：<time datetime="{{shanghaiDateTime .}}">{{shanghaiTime .}}</time>{{end}}</p></li>{{end}}</ol>{{else}}<p class="empty-note">尚未建立提交围栏；详情页不会创建或释放围栏。</p>{{end}}</div></section>
|
||||
</div>
|
||||
|
||||
<aside class="section-stack" aria-label="任务状态摘要"><section class="detail-card"><header><h2>开始采购授权</h2><p>锁定任务字段和最高总价，不授权付款。</p></header><div class="detail-body">{{if .Detail.Authorizations}}<ol class="audit-list">{{range .Detail.Authorizations}}<li><h3>{{authorizationStatusLabel .Status}}</h3><p class="mono">{{.ID}}</p><p>任务版本 {{.TaskVersion}} · 上限 ¥{{.TotalPriceCap}}</p><p>授权人：{{.CreatedBy}}</p><p><time datetime="{{shanghaiDateTime .CreatedAt}}">{{shanghaiTime .CreatedAt}}</time> 至 <time datetime="{{shanghaiDateTime .ExpiresAt}}">{{shanghaiTime .ExpiresAt}}</time></p></li>{{end}}</ol>{{else}}<p class="empty-note">尚未开始采购，没有授权记录。</p>{{end}}</div></section><section class="detail-card"><header><h2>固定边界</h2></header><div class="detail-body"><ul><li>系统只创建待付款订单，不自动付款。</li><li>截图仅供审计，不替代实时三道价格闸门。</li><li>围栏后只能调和同一提交，禁止再次点击。</li></ul></div></section></aside>
|
||||
</div>
|
||||
</article>
|
||||
{{end}}
|
||||
File diff suppressed because one or more lines are too long
@@ -3,10 +3,12 @@ package webui
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"fmt"
|
||||
"html/template"
|
||||
"io"
|
||||
"time"
|
||||
|
||||
"cmbuyer/admin/internal/taskdetail"
|
||||
"cmbuyer/admin/internal/tasks"
|
||||
)
|
||||
|
||||
@@ -19,10 +21,18 @@ var tasksScript []byte
|
||||
var shanghaiLocation = time.FixedZone("Asia/Shanghai", 8*60*60)
|
||||
|
||||
var templates = template.Must(template.New("webui").Funcs(template.FuncMap{
|
||||
"list": func(values ...any) []any { return values },
|
||||
"statusLabel": statusLabel,
|
||||
"shanghaiDateTime": func(value time.Time) string { return value.In(shanghaiLocation).Format(time.RFC3339) },
|
||||
"shanghaiTime": func(value time.Time) string { return value.In(shanghaiLocation).Format("2006-01-02 15:04") },
|
||||
"list": func(values ...any) []any { return values },
|
||||
"statusLabel": statusLabel,
|
||||
"shanghaiDateTime": func(value time.Time) string { return value.In(shanghaiLocation).Format(time.RFC3339) },
|
||||
"shanghaiTime": func(value time.Time) string { return value.In(shanghaiLocation).Format("2006-01-02 15:04") },
|
||||
"canonicalURL": tasks.CanonicalURL,
|
||||
"formatBytes": formatBytes,
|
||||
"taskSafetyTitle": taskSafetyTitle,
|
||||
"taskSafetyText": taskSafetyText,
|
||||
"authorizationStatusLabel": authorizationStatusLabel,
|
||||
"attemptStatusLabel": attemptStatusLabel,
|
||||
"submissionStatusLabel": submissionStatusLabel,
|
||||
"evidenceKindLabel": evidenceKindLabel,
|
||||
}).ParseFS(templateFiles, "templates/*.html"))
|
||||
|
||||
// LoginData 是登录页面所需的非敏感展示数据。
|
||||
@@ -49,6 +59,8 @@ type TasksData struct {
|
||||
Success bool
|
||||
}
|
||||
|
||||
type TaskDetailData struct{ Detail taskdetail.Detail }
|
||||
|
||||
// RenderLogin 写入登录页。
|
||||
func RenderLogin(writer io.Writer, data LoginData) error {
|
||||
return templates.ExecuteTemplate(writer, "login.html", data)
|
||||
@@ -59,6 +71,14 @@ func RenderTasks(writer io.Writer, data TasksData) error {
|
||||
return templates.ExecuteTemplate(writer, "tasks.html", data)
|
||||
}
|
||||
|
||||
func RenderTaskDetailPage(writer io.Writer, data TaskDetailData) error {
|
||||
return templates.ExecuteTemplate(writer, "task-detail-page.html", data)
|
||||
}
|
||||
|
||||
func RenderTaskDetailFragment(writer io.Writer, data TaskDetailData) error {
|
||||
return templates.ExecuteTemplate(writer, "task-detail-content", data)
|
||||
}
|
||||
|
||||
func TasksScript() []byte { return tasksScript }
|
||||
|
||||
func statusLabel(status string) string {
|
||||
@@ -79,3 +99,64 @@ func statusLabel(status string) string {
|
||||
}
|
||||
return "未知状态"
|
||||
}
|
||||
|
||||
func taskSafetyTitle(status string) string {
|
||||
if status == "WAITING_PAYMENT" {
|
||||
return "订单已创建，系统尚未付款。"
|
||||
}
|
||||
if status == "RECONCILIATION_REQUIRED" {
|
||||
return "订单可能已创建，只能调和同一提交。"
|
||||
}
|
||||
return "系统只创建待付款订单，不会自动付款。"
|
||||
}
|
||||
|
||||
func taskSafetyText(status string) string {
|
||||
if status == "DRAFT" {
|
||||
return "创建任务不构成授权；请回到列表勾选后开始采购。"
|
||||
}
|
||||
if status == "RECONCILIATION_REQUIRED" {
|
||||
return "围栏保持占用，禁止重新授权、再次提交或释放。"
|
||||
}
|
||||
return "截图只供内部审计，不替代实时价格闸门，也不会触发设备动作。"
|
||||
}
|
||||
|
||||
func authorizationStatusLabel(status string) string {
|
||||
labels := map[string]string{"ACTIVE": "授权有效", "CLAIMED": "已被领取", "FENCED": "提交围栏已建立", "CONSUMED": "授权已消费", "EXPIRED": "授权已过期", "ABANDONED": "授权已关闭"}
|
||||
if value, ok := labels[status]; ok {
|
||||
return value
|
||||
}
|
||||
return "未知授权状态"
|
||||
}
|
||||
|
||||
func attemptStatusLabel(status string) string {
|
||||
labels := map[string]string{"CLAIMED": "已领取", "ORDERING": "执行中", "FAILED": "围栏前失败", "FENCED": "已建立围栏", "ABANDONED": "已安全停止"}
|
||||
if value, ok := labels[status]; ok {
|
||||
return value
|
||||
}
|
||||
return "未知执行状态"
|
||||
}
|
||||
|
||||
func submissionStatusLabel(status string) string {
|
||||
labels := map[string]string{"FENCED": "围栏已建立", "SUBMITTED": "已创建待付款订单", "RECONCILIATION_REQUIRED": "结果待调和", "MANUAL_RESOLVED": "已人工调和"}
|
||||
if value, ok := labels[status]; ok {
|
||||
return value
|
||||
}
|
||||
return "未知提交状态"
|
||||
}
|
||||
|
||||
func evidenceKindLabel(kind string) string {
|
||||
if kind == "SKU_PANEL_GATE_1" {
|
||||
return "规格面板 · 闸门一"
|
||||
}
|
||||
return "内部截图"
|
||||
}
|
||||
|
||||
func formatBytes(value int64) string {
|
||||
if value >= 1<<20 {
|
||||
return fmt.Sprintf("%.1f MiB", float64(value)/(1<<20))
|
||||
}
|
||||
if value >= 1<<10 {
|
||||
return fmt.Sprintf("%.1f KiB", float64(value)/(1<<10))
|
||||
}
|
||||
return fmt.Sprintf("%d B", value)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user