/* 完整设计稿新增的页面与弹层：首页、页内标签页（风险监控）、清算、TRS 交易下单页与下单弹窗、票据详情抽屉、
* 确认框、修改密码弹窗、个人中心、404/401、登录页、组件总览、反馈类总览。登记到 UI.pageRenderers / overlayRenderers / canvasRenderers。
*/
(function () {
"use strict";
const U = window.UI;
const { D, D2: P, T, esc, ic, CHECK, EMPTY, tag, ENDS, kv, tableHTML, btn, item, dgWrap, dgCard, sfDialog, stepper, closeX, btnCancel, drCard } = U;
/* ================= 首页（工作台） ================= */
U.pageRenderers.__home = function (st) {
const e = ENDS[st.end];
const H = P.home[st.end];
const total = H.status.reduce((n, s) => n + s[1], 0);
const hot = H.status.filter((s) => s[2]).reduce((n, s) => n + s[1], 0);
const tiles = H.status.map(([n, c, h]) => `${n}${c}
`).join("");
const statusCard = `上午好，admin今日${H.noun}共 ${total} 笔，其中 ${hot} 笔需要处理（高亮的状态）查看全部${ic("right")}
${tiles}
${ic(icn)}${esc(l)}${esc(g)}
`).join("");
const scCard = ``;
const rows = e.rows.filter(H.pick).slice(0, 6);
const cols = H.manualCols.map((c) => [c[0], c[1], c[4] === "r" ? "r" : ""]).concat([["操作", 72]]);
const cell = (r, i) => {
const def = H.manualCols[i];
if (!def) return `详情`;
const key = def[2];
const v = key === "stock" && st.end === "trs" ? `${r.code} ${r.sname}` : r[key];
const kind = def[3] || "";
if (kind.startsWith("tag:")) return v ? tag(kind.slice(4), v) : "--";
return v;
};
const tblCard = `${H.manualTitle}${H.manualSub}；按下单时间倒序，最多 6 条查看全部${ic("right")}
${tableHTML(cols, rows, { cell, keep: "hm-tbl", empty: "没有需要处理的" + H.noun })}
${statusCard}${scCard}${tblCard}
`;
};
/* ================= 页内标签页 ================= */
// 页面级（ptabs）或卡片内（tabs）的页签条；选中项记在 st.tab[g]
const ptabs = (st, g, tabs, cls = "ptabs") => {
const cur = st.tab[g] || tabs[0][0];
return `${tabs.map(([k, l]) => `${l}`).join("")}
`;
};
const searchCard = (fields, actions, withLabel) => {
const lw = withLabel ? Math.max(...fields.map((f) => f.label.length)) * 14 : 0;
const rem = 3 - (fields.length % 3);
const acts = `${actions.map(([t, type, icn]) => `${ic(icn)}${t}`).join("")}
`;
return `${fields.map((f) => `
${withLabel ? `` : ""}${U.ctlHTML(f)}
`).join("")}${acts}
${tableHTML(R.cols, R.rows, { cell, keep: "risk-tbl" })}${U.pagerHTML(R.rows.length)}
`;
} else if (cur === "status-log") {
const cell = (r, i) => (i === 4 || i === 5 ? [r[i], "note_risk_status"] : r[i]);
body = `${searchCard(R.search.slice(2, 8), R.actions.slice(0, 2), false)}${tableHTML(R.statusLogCols, R.statusLog, { cell, keep: "risk-log" })}${U.pagerHTML(R.statusLog.length)}
`;
} else {
const cell = (r, i) => (i === 4 ? [r[i], "send_status"] : r[i]);
body = `${searchCard(R.search.slice(2, 5), R.actions.slice(0, 2), false)}${tableHTML(R.notifyCols, R.notify, { cell, keep: "risk-ntf" })}${U.pagerHTML(R.notify.length)}
`;
}
return `${ptabs(st, "risk", R.tabs)}${body}
`;
};
// 销售端同名菜单复用
U.pageRenderers["风控管理/共赢票据风险监控"].sales = true;
// 清算管理：页签在卡片标题栏里
U.pageRenderers["清算管理/共赢票据清算"] = function (st) {
const C = P.clearing;
const cur = st.tab.clr || "clearing";
const running = C.batchStatus === "执行中";
const tools = cur === "clearing"
? `${btn(ic("refresh") + "刷新")}${btn("一键清算", running ? "pri is-dis" : "pri")}${btn("重新清算", "", "ovopen", 'data-o="confirm" data-kind="redo"')}`
: `${btn(ic("refresh") + "刷新")}${running ? btn(ic("stop") + "停止当前任务", "dng", "ovopen", 'data-o="confirm" data-kind="stop"') : ""}`;
const info = `市场${C.market}本次清算交易日${C.tradeDate}批次${C.batchNo}状态${tag("clearing_batch", C.batchStatus)}${running ? `执行中不能再次发起；页面每 5 秒自动刷新` : ""}
`;
let body;
if (cur === "clearing") {
const cell = (r, i) => (i === 2 ? [r[i], "clearing_step"] : r[i]);
const rowCls = (r) => (r[2] === "执行中" ? "is-sel" : "");
body = `${info}${C.blockedReason ? `${ic("info")}${esc(C.blockedReason)}
` : ""}${tableHTML(C.stepCols, C.steps, { cell, rowCls, keep: "clr-steps", cls: "bd" })}${C.errorDetail ? `${ic("error")}${esc(C.errorDetail)}
` : ""}`;
} else {
const cell = (r, i) => (i === 3 ? [r[i], "clearing_step"] : r[i]);
const hcell = (r, i) => (i === 3 ? [r[i], "clearing_batch"] : r[i]);
body = `${info}${tableHTML(C.logCols, C.logs, { cell, keep: "clr-logs", cls: "bd" })}${C.historyTitle}${C.history.length} 条
${tableHTML(C.historyCols, C.history, { cell: hcell, keep: "clr-his", cls: "bd" })}`;
}
return `${ptabs(st, "clr", C.tabs, "tabs")}${tools}
${body}
${H.account} · ${H.user}${ic("down")}
${btn(ic("refresh") + "刷新")}${btn("买入", "pri", "ovopen", 'data-o="trs" data-dir="买入"')}${btn("卖出", "", "ovopen", 'data-o="trs" data-dir="卖出"')}
${kv(H.accountCols.map((c, i) => [c, H.accountRows[0][i], "num"]), "bd3", 3)}
${acct}
${ptabs(st, "trs", tabs, "tabs")}${btn(ic("refresh") + "刷新", "txt")}
${tbl}
${opts.map((o) => `${o}`).join("")}
`;
const chips = `${G.quick.map(([l, v]) => `${l}${v}`).join("")}
`;
const QTY = buy ? { "1/4": "25,200", "1/3": "33,600", "1/2": "50,400", "全部可买": "100,900" } : { "1/4": "3,000", "1/3": "4,000", "1/2": "6,000", "全部可卖": "12,000" };
const qtyChips = `${Object.entries(QTY).map(([l, v]) => `${l}`).join("")}
`;
const amount = parseFloat(ov.price) * parseFloat(ov.qty.replace(/,/g, ""));
const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const tiles = buy ? G.strip : [G.strip[0], ["可卖股数", H.posRows[0][4], "股"]];
const rows = [
{ label: "交易渠道", req: true, body: seg("channel", G.channels) },
{ label: "股票代码", req: true, body: `${G.stock.code}${G.stock.name}${G.stock.mkt}${ic("down")}
` },
{ label: "委托价格", req: true, body: stepper(ov.price, G.priceCcy), extra: chips },
{ label: "委托数量", req: true, body: stepper(ov.qty, "股"), extra: qtyChips + `${buy ? G.qtyHelp : "卖出不超过可卖股数"}
` },
];
const results = [[`${ov.dir}金额(交易币种)`, fmt(amount), "CNY"], [`${ov.dir}金额(结算币种)`, fmt(amount * 1.0944), "HKD"]];
const Q = G.quote;
const prev = parseFloat(Q.prev);
const maxVol = Math.max(...[...Q.asks, ...Q.bids].map((r) => r[2]));
const lvl = (rowsQ, cls) => rowsQ.map(([l, pr, v]) => `${l}${pr}${v}
`).join("");
const aside = ``;
const okBtn = `确认${ov.dir} ${ov.qty} 股`;
return sfDialog({ w: 880, lw: 72, cls: "dg-trs", keep: "trs-dg", title: ov.dir, sub: `${G.account} · ${G.user}`, tiles, rows, results, aside,
ft: `${ic("info")}${G.footHint}${btnCancel}${okBtn}` });
};
/* ================= 票据详情抽屉（页签 + 描述表） ================= */
U.overlayRenderers.note = function (ov) {
const N = P.noteDetail;
const tags = `${N.tags.map(([v, dk]) => tag(dk, v)).join("")}`;
const rf = `${ic("refresh", "rf")}刷新数据`;
const x = `${ic("x")}`;
const hb = N.buttons.map(([t, ty]) => btn(t, ty, "ovtoast", 'data-msg="示例：各操作弹窗按弹窗 J 的卡片分区实现"')).join("");
const tabs = `${N.tabs.map(([k, l]) => `${l}`).join("")}
`;
const subHd = (t, extra = "") => `${t}${extra}
`;
let body;
if (ov.tab === "main") {
const sub = N.subA;
const H = N.hedge;
const posCell = (r, i) => (i === 0 ? (r[0] === "合计" ? `合计` : [r[0], "hedge_system"]) : r[i]);
const trCell = (r, i) => (i === 0 ? [r[i], "hedge_system"] : i === 6 ? `${r[i][0]}` : i === 7 ? [r[i], "direction"] : r[i]);
const dlyCols = [["操作", 100]].concat(H.tradeCols);
const dlyCell = (r, i) => {
if (i === 0) return r[0].length ? `${r[0].map(([t, ty]) => `${t}`).join("")}` : "--";
return trCell(r.slice(1), i - 1);
};
const dailyBtns = H.dailyButtons.map(([t, ty]) => btn(t === "刷新" ? ic("refresh") + t : t, ty === "txt" ? "txt" : "sm", t === "补录" ? "ovopen" : "ovtoast", t === "补录" ? 'data-o="fill"' : 'data-msg="示例：日常买卖的下单弹窗按「TRS 下单弹窗」的专用布局实现"')).join("");
body = drCard(N.master.title, "", kv(N.master.fields, "bd3", 3)) +
drCard(sub.title, "", kv(sub.fields, "bd3", 3) + subHd(sub.init.title) + kv(sub.init.fields, "bd2", 2) + subHd(sub.current.title) + kv(sub.current.fields, "bd2", 2)) +
drCard(H.title, `${H.ratioLabel}${H.ratio}`,
subHd(H.posTitle) + tableHTML(H.posCols, H.posRows, { cell: posCell, keep: "nt-pos" }) +
subHd(H.tradeTitle) + tableHTML(H.tradeCols, H.tradeRows, { cell: trCell, keep: "nt-tr" }) +
subHd(H.dailyTitle, dailyBtns) + tableHTML(dlyCols, H.dailyRows, { cell: dlyCell, keep: "nt-dly" }));
} else {
body = N.changes.sections.map((s) => drCard(s.title, `${s.rows.length} 条`, tableHTML(s.cols, s.rows, { empty: s.empty, emptyH: 120, keep: "nt-" + s.title }))).join("");
}
return `${N.noteNo}${tags}
${N.facts.map(([l, v]) => `${l}${v}`).join("")}
${tabs}
${body}
${ic(icn)}${esc(c.title)}
${esc(c.msg)}
${c.kv.length ? `
${c.kv.map(([l, v]) => `- ${l}
- ${esc(v)}
`).join("")}
` : ""}
${c.cancel || "取消"}${c.ok}
6~20 位，至少两类字符
` : "" }));
return sfDialog({ w: 480, lw: 72, title: "修改密码", sub: `${P.profile.username} · ${P.profile.role}`, rows, ft: `${ic("info")}修改后需要重新登录${btnCancel}确定` });
};
/* ================= 个人中心 ================= */
U.pageRenderers["个人中心"] = function () {
const p = P.profile;
const left = `A${ic("camera")}
${p.nickname}${ic("edit")}
${p.role}
账号信息
- 用户名
- ${p.username}${ic("male", "gender")}
- 手机号码
- ${bind(p.mobile, "手机")}
- 邮箱
- ${bind(p.email, "邮箱")}
- 部门
- ${p.dept}示例
- 创建时间
- ${p.createTime}
安全设置
${p.security.map(([t, d, a], i) => `
`).join("")}
${art}
${is404 ? "页面不存在" : "没有访问权限"}${is404 ? "请确认输入的网址是否正确，或从左侧菜单重新进入。" : "当前账号没有「共赢票据清算」的访问权限，请联系系统管理员开通后再试。"}
${btn("返回首页", "pri", "leaf", 'data-k="首页"')}${btn("返回上一页", "", "leaf", `data-k="${home}"`)}
本系统业务模块${groups.length}
${groups.map((n) => `${esc(n)}`).join("")}
三端系统点击前往对应系统的登录页
${Object.entries(ENDS).map(([x, ex]) => `
${ex.logo}${esc(ex.sys)}${L.nodes[x][1]}${x === end ? "当前系统" : `前往登录${ic("right")}`}
`).join("")}
${esc(e.sys)}${L.version}
${mods}${ents}
${inner}
`;
const pw = sp.showPw ? "123456" : "••••••";
let form;
if (v === "login") {
form = `登录
${field(c.username, `admin
`)}
${field(c.password, `${pw}${ic(sp.showPw ? "eye" : "eyeoff")}
`)}
${field(c.captcha, `${c.captcha}
${capSVG((sp.cap || 0) + 3)}
${CHECK}${c.remember}${c.forget}
${c.login}`;
} else {
form = `${c.reset}
输入账号绑定的邮箱，重置链接会发到这个邮箱。
${field(c.email, `${c.enterEmail}
`)}
${c.sendReset}
${c.think}${c.back}
`;
}
return `${LG_DECO}
${ic(T.dark ? "sun" : "moon")}${ic("globe")}
${left}
${e.logo}${esc(e.sys)}
${form}
${label}${none ? "无" : esc(val)}
`; };
const group = (items) => `${items.map(([l, key]) => sw(l, key)).join("")}
`;
const colors = `颜色主色 ${Tk["c-primary"]} 只做填充，文字链接 ${Tk["c-link"]}；买入红、卖出绿语义不变
${T.palette.map(([, items]) => group(items)).join("")}
文字中文系统字体，英文和数字 Inter
${ty("20 / 28 · 编号标题", `ORD001202609250031`)}
${ty("16 / 24 · 弹窗标题", `撤销订单`)}
${ty("15 / 22 · 区块标题", `订单信息`)}
${ty("14 / 22 · 正文", `订单已进入对冲流程，预计交收日 2026-09-29。`)}
${ty("14 / 22 · 次要", `投资者名称、机构名称等次要信息`)}
${ty("12 / 18 · 辅助", `表头、键名、输入框下方的提示`)}
${ty("数字", `3,000,000.00 1,688.00 0.0003 2026-09-25 09:31:07`)}
按钮${T.notes.buttons}
常规${ic("search")}查找${ic("refresh")}重置${ic("download")}数据导出撤单禁用
悬停${ic("plus")}新增${ic("refresh")}重置${ic("refresh")}查找中
表格内详情编辑撤单确认补录
方向确认买入 1,000 股确认卖出 500 股取消
输入控件默认 32px；登录页 40px
${f("默认", `
主订单编号
`)}
${f("已填写", `
ORD001202609250031
`)}
${f("聚焦", `
贵州茅台
`)}
${f("下拉选择", `
待处理${ic("down")}
`, `
全部
待处理${ic("check")}
执行中
已完成
`)}
${f("日期区间", `
${ic("calendar")}2026-09-25~2026-09-25
`, `
带单位
1,000股
多选
待生效存续期${ic("down")}
`)}
${f("校验失败", `
请输入委托数量
`, `
${ic("error")}委托数量必须是 100 的整数倍
禁用
CNY
两段切换
自定义TRS
`)}
${f("勾选与开关", `
${CHECK}已勾选${CHECK}未勾选部分
限价市价开启关闭
`)}
状态与字典${T.notes.status}
订单状态${tags("note_order_status")}
委托状态${tags("trs_order_status", ["已报", "部成", "已成", "已撤", "废单", "过期"])}
票据${tags("note_status")}${tags("note_risk_status")}
方向${tags("direction")}文字形式：买入卖出盈亏：+58,002.47-31,886.40
操作类型${tags("op_type")}${tags("process_mode")}${tags("hedge_progress")}
描述表${T.notes.kv}
- 主订单编号
- ORD001202609250031
- 订单状态
- ${tag("note_order_status", "待处理")}
- 订单方向
- ${tag("direction", "买入")}
- 投资者
- 张明远 · INV001100151
- 证券
- 600519 贵州茅台
- 名义本金
- 3,000,000.00 CNY
- 下单时间
- 2026-09-25 09:31:07
- 备注
- --
数字卡片（汇总）
全部12待处理1执行中3已完成5
${ic("refresh")}刷新 | 主订单编号 | 订单方向 | 订单状态 | 投资者名称 | 证券代码/名称 | 订单名义本金(交易币种) | 下单时间 | 操作 |
|---|
${rows.map((r, i) => `| ${CHECK} | ${r.no} | ${tag("direction", r.direction)} | ${tag("note_order_status", r.status)} | ${r.invName} | ${r.stock} | ${r.notional === "--" ? '--' : r.notional} | ${r.orderTime} | 详情撤单 |
`).join("")}
${U.pagerHTML(12)}
第 2 行为选中态，第 4 行为悬停态；卡片内页签见「清算管理」。
提示与反馈完整排布见「反馈类总览」
${ic("info")}自开始日期（含）起同步交易日，重复同步不会产生重复数据。
${ic("error")}撤单结果未知：上轮撤单未取得明确结果，可人工再次撤单。
${ic("success", "ok")}保存成功${ic("error", "no")}导出失败，请稍后重试点击复制编号
弹窗与弹层${T.notes.dialog}
撤销订单${ic("x")}
${ic("warn")}撤销后订单进入「撤单中」，不能恢复。
- 主订单编号
- ORD001202609250031
- 证券
- 600519 贵州茅台
取消确认撤销
组件总览 · ${T.title}
主色 ${Tk["c-primary"]}｜正文 14px · 控件 32px · 表格行高 40px · 圆角 ${Tk["r-ctl"]}／${Tk["r-card"]}｜尺寸和圆角四套皮肤相同，换肤只改颜色与质感
${colors}${type}${buttons}${forms}${status}${table}${kvs}${feedback}${dialog}
`;
};
/* ================= 反馈类总览 ================= */
U.canvasRenderers.feedback = function () {
const F = P.feedback;
const card = (title, sub, body, cls = "") => `${title}${sub ? `${sub}` : ""}
${body}
${F.messages.map(([t, m, close]) => `
${icOf(t)}${esc(m)}${close ? `${ic("x")}` : ""}
`).join("")}
顶部居中，距顶 72px；多条时向下堆叠；默认 3 秒消失，带关闭按钮的停留 8 秒。
`;
const ntf = `${ic("success", "ok")}${F.notification.title}${F.notification.time}${ic("x")}
${F.notification.body}
${F.notification.link}${ic("right")}右上角，距顶 16px、距右 16px；用于后台任务完成这类不打断操作的消息。
`;
const alerts = `${F.alerts.map(([t, m]) => `
${icOf(t)}${esc(m)}
`).join("")}
${icOf("warning")}
${F.alertTitled[1]}${F.alertTitled[2]}
${ic("x")}${cfm}
在页面里的样子见「确认框」；危险操作红色实心按钮并写明动作。
`;
const empties = `${F.empties.map(([n, t, d, a]) => `
${n}
${EMPTY}${esc(t)}${d ? `${esc(d)}` : ""}${a ? `${esc(a)}` : ""}
`).join("")}
| 主订单编号 | 订单方向 | 订单状态 | 投资者名称 | 订单名义本金 |
|---|
${rows.map((r) => `| ${r.no} | ${tag("direction", r.direction)} | ${tag("note_order_status", r.status)} | ${r.invName} | ${r.notional} |
`).join("")}
加载中
${F.results.map(([t, ttl, d, bs]) => `
${icOf(t)}${ttl}${d}
${bs.map(([b, ty]) => `${b}`).join("")}
`).join("")}
wanqing.li@
${ic("error")}邮箱格式不正确
请输入HKD
${ic("error")}请输入发生金额（HKD）
错误在失焦时校验、提交时全部校验；长表单的弹窗底部汇总「还有几项必填未填、几项有误」，第一处错误滚动到可见。
`;
return `反馈类总览
全局提示、通知、提示条、确认框、空状态、加载态、结果提示、表单校验
${card("全局提示", "ElMessage", msgs, "s6")}${card("通知", "ElNotification", ntf, "s6")}${card("提示条", "el-alert：按状态取色；可带标题、可关闭", alerts, "s6")}${card("确认框", "ElMessageBox.confirm", confirm, "s6")}${card("空状态", "el-empty：说明原因，必要时给一个动作", empties)}${card("加载态", "v-loading、按钮 loading、骨架", loadTbl, "s6")}${card("结果提示", "el-result：整块居中", results, "s6")}${card("表单校验", "输入框变红 + 下方原因", validate)}
`;
};
})();