Files
bid-doctor/docs/design/ui-demo/cards.html
YANG JIANKUAN 7f9592ad16 docs(design): 按 v0.2 重刷全部 UI demo,确认 Q1–Q13 与 U 键规则
- ui-demo:控件、表单、卡片、列表、工作台、读标六页按 v0.2 重刷;侧栏与顶栏框架、项目行、署名行、可键入日期输入、对照布局等收回 demo.css / demo.js 共用
- system:tokens 补悬停 / 按下 / 遮罩色、数字字阶与原文排版变量;components.css 按 v0.2 改写并清除裸色值
- design-system.md:写入 Q1–Q13 答案,新增开关、分页、下拉、日期选择等组件规则,类别标签、待确认区、选中态、对照布局按 v0.2 修订
- Q13:额度流水记录 0 点的「免扣」行,FR-M6-03 与领域模型同步;U 键改为撤销当前条
- decisions.md 记录 Q1–Q12、Q13 与 U 键;AGENTS.md 同步进度

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 16:07:15 +08:00

343 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--
陈列页 · ③ 卡片(v0.2)
卡片规格以定稿样张 explore/workbench-d5.html 为准:一律用分区卡片 .card.flush + .card-h / .card-b / .card-f。
本页 <style> 只放陈列用的布局和本页特有的小件(任务失败说明、项目信息卡)。
-->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>卡片 · 标博士 UI demo</title>
<link rel="icon" href="../logo/favicon.svg">
<link rel="stylesheet" href="../system/tokens.css">
<link rel="stylesheet" href="../system/fonts-local.css">
<link rel="stylesheet" href="../system/components.css">
<link rel="stylesheet" href="demo.css">
<style>
/* 陈列:统计格两种用法上下排 */
.d-sec .stats + .d-label{margin-top:var(--sp-6)}
/* 卡片头右侧的辅助信息 */
.card-h .aside{margin-left:auto;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);white-space:nowrap}
.card-f .r{margin-left:auto;display:flex;gap:var(--sp-4);align-items:center}
.d-grid.eq > .card{display:flex;flex-direction:column}
.d-grid.eq > .card > .card-f{margin-top:auto}
/* 额度卡:单项额度(80% / 用完) */
.quota .one .big.warn{font-weight:var(--fw-bold)}
.quota .one .bar{margin:var(--sp-2) 0}
.quota p.warn{display:flex;gap:var(--sp-1);align-items:flex-start}
.quota p.warn .ic{flex:none;margin-top:2px;width:14px;height:14px}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:flex-start}
.chips > div{display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start}
.chips .quota-chip{background:var(--bg-surface);border:var(--line) solid var(--border-subtle)}
.chips .tip-hold{padding-bottom:64px}
/* 任务进度卡 */
.file{display:flex;gap:var(--sp-2);align-items:center;margin:0 0 var(--sp-2);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.file .ic{width:14px;height:14px}
.fail-why{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:var(--line) solid var(--border-subtle)}
.fail-why > .ic{flex:none;margin-top:3px;color:var(--warn)}
.fail-why b{color:var(--warn-text);font-weight:var(--fw-bold)}
.fail-why p{margin:0}
.fail-why .sub{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
.queued{display:flex;gap:var(--sp-2);align-items:center}
.queued .ic{color:var(--text-secondary)}
.queued b{font-weight:var(--fw-bold)}
.queued .aside{margin-left:auto}
/* AI 摘要卡:署名行(共用 .sign.sm)放在 .ai-block 里,和正文左边对齐 */
.ai-card .kv{grid-template-columns:88px minmax(0,1fr)}
.ai-card .kv dd > .fig{font-weight:var(--fw-medium)}
/* 关键日期卡:日期按「11月20日 09:30」写,列放宽 */
.dates li{grid-template-columns:128px minmax(0,1fr) auto}
.dates li > span:nth-child(2) > b{font-weight:var(--fw-bold)}
.dates .left .fig{font-weight:var(--fw-medium)}
/* 项目信息卡(只在项目概览页用) */
.pinfo .kv{grid-template-columns:88px minmax(0,1fr)}
.pinfo .kv dd > .fig{font-weight:var(--fw-medium)}
.pinfo .state{display:flex;gap:var(--sp-2);align-items:center}
.pinfo .flowline{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--line) solid var(--border-subtle)}
.pinfo .skel + .skel{margin-top:var(--sp-3)}
</style>
</head>
<body class="demo">
<header data-demo-top></header>
<main class="d-page">
<div class="d-head">
<h1>③ 卡片</h1>
<p>只有一种容器:白卡片,1px 发丝线,圆角 12,无阴影,卡片里不再套面板。工作台只用列表,不做项目卡片视图(Q11)。</p>
<nav class="d-toc" aria-label="本页目录"><a href="#s-stat">01 统计卡</a><a href="#s-quota">02 额度卡</a><a href="#s-task">03 任务进度卡</a><a href="#s-ai">04 AI 摘要卡</a><a href="#s-date">05 关键日期卡</a><a href="#s-info">06 项目信息卡</a></nav>
</div>
<!-- 01 统计卡 -->
<section class="d-sec" id="s-stat">
<div class="d-sec-h"><span class="no">01</span><h2>统计卡</h2><span class="ref">规范 §4.2 · §9.5</span></div>
<span class="d-label">可点筛选(工作台):按下后标题加粗、底边出墨色线</span>
<section class="stats" aria-label="项目统计,点击可筛选" data-stats>
<button class="stat" aria-pressed="true"><small>进行中的项目</small><span class="big">4</span><i data-ic="filter"></i></button>
<button class="stat" aria-pressed="false"><small>7 天内截止</small><span class="big due">2</span><i data-ic="filter"></i></button>
<button class="stat" aria-pressed="false"><small>待处理的致命问题</small><span class="big fatal">3</span><i data-ic="filter"></i></button>
<button class="stat" aria-pressed="false"><small>待确认的清单条目</small><span class="big">4</span><i data-ic="filter"></i></button>
</section>
<span class="d-label">只读(额度页):数字后可带单位</span>
<section class="stats c3" aria-label="本期用量">
<div class="stat"><small>本期解析</small><span><span class="big">13</span><span class="unit">/ 50 次</span></span></div>
<div class="stat"><small>本期检查</small><span><span class="big">8</span><span class="unit">/ 20 次</span></span></div>
<div class="stat"><small>本期退回</small><span><span class="big">2</span><span class="unit">次</span></span></div>
</section>
<ul class="d-rules"><li>只写标题和数字,不加说明小字(§9.5)。数字 Barlow 28(<code>--fs-figure</code>),单位辅助灰。</li><li>致命数用致命红、7 天内截止用赭色,其余墨色。</li></ul>
</section>
<!-- 02 额度卡 -->
<section class="d-sec" id="s-quota">
<div class="d-sec-h"><span class="no">02</span><h2>额度卡</h2><span class="ref">规范 §7.10 · §8.3 · 红线 9</span></div>
<div class="d-grid c3 eq">
<section class="card flush quota" aria-labelledby="q1">
<div class="card-h"><h3 id="q1">本期额度</h3><span class="aside">至 <span class="fig xs m">2027-10-31</span></span></div>
<div class="card-b">
<div class="q2">
<div><small>解析剩余</small><span class="big">37</span><span class="unit">/ 50</span><div class="bar" aria-hidden="true"><i style="width:26%"></i></div></div>
<div><small>检查剩余</small><span class="big">12</span><span class="unit">/ 20</span><div class="bar" aria-hidden="true"><i style="width:40%"></i></div></div>
</div>
</div>
<div class="card-f cap"><a class="lnk" href="#" data-demo>扣点规则</a><a class="lnk" href="#" data-demo>查看流水</a></div>
</section>
<section class="card flush quota" aria-labelledby="q2">
<div class="card-h"><h3 id="q2">检查额度</h3><span class="aside">已用 80%</span></div>
<div class="card-b one">
<small>检查剩余</small><span class="big warn">4</span><span class="unit">/ 20</span>
<div class="bar warn" aria-hidden="true"><i style="width:80%"></i></div>
<p class="warn"><i data-ic="alert-circle"></i>同一项目 24 小时内复查不扣额度。</p>
</div>
<div class="card-f cap"><a class="lnk" href="#" data-demo>扣点规则</a><a class="lnk" href="#" data-demo>查看流水</a></div>
</section>
<section class="card flush quota" aria-labelledby="q3">
<div class="card-h"><h3 id="q3">检查额度</h3><span class="aside">已用完</span></div>
<div class="card-b one">
<small>检查剩余</small><span class="big warn">0</span><span class="unit">/ 20</span>
<div class="bar warn" aria-hidden="true"><i style="width:100%"></i></div>
<p class="warn"><i data-ic="alert-circle"></i>本期检查额度已用完,可在额度页提交续费申请,或等下期发放。</p>
</div>
<div class="card-f cap"><button class="btn sm" data-renew>提交续费申请</button><span class="r"><a class="lnk" href="#" data-demo>查看流水</a></span></div>
</section>
</div>
<span class="d-label" style="margin-top:var(--sp-6)">顶栏额度(白底只为陈列;真实顶栏见 <a class="lnk" href="page-workbench.html?quota=warn">工作台 · 80%</a> / <a class="lnk" href="page-workbench.html?quota=out">用完</a>)</span>
<div class="chips">
<div><span class="d-cap">正常</span><a class="quota-chip" href="#" data-demo><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q">检查<span class="fig">12</span></span></a></div>
<div><span class="d-cap">检查用到 80%</span><a class="quota-chip" href="#" data-demo><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q warn">检查<span class="fig">4</span></span></a></div>
<div class="tip-hold"><span class="d-cap">检查用完(悬停说明续费)</span><a class="quota-chip tip-below tip-start tip-on" href="#" data-demo data-tip="本期剩余额度:解析 37 / 50 次,检查 0 / 20 次。本期检查额度已用完,可在额度页提交续费申请,或等下期发放" aria-label="本期剩余额度:解析 37 / 50 次,检查 0 / 20 次。本期检查额度已用完,可在额度页提交续费申请,或等下期发放"><span class="q">解析<span class="fig">37</span></span><span class="sep"></span><span class="q warn">检查<span class="fig">0</span></span></a></div>
</div>
<ul class="d-rules"><li>已用部分墨色;用到 80% 起额度条、剩余数和顶栏数字变赭色(加粗),并出现一行提醒;用完时说明续费方式:在额度页提交续费申请(专业版:在线申请 → 对公转账 → 运营开通,决策 G8)。全程不用红(Q9)。</li></ul>
</section>
<!-- 03 任务进度卡 -->
<section class="d-sec" id="s-task">
<div class="d-sec-h"><span class="no">03</span><h2>任务进度卡</h2><span class="ref">规范 §7.11</span></div>
<div class="d-grid c3">
<section class="card flush" aria-labelledby="t1">
<div class="card-h"><h3 id="t1">正在解析招标文件</h3><span class="aside">已用时 1 分 40 秒</span></div>
<div class="card-b">
<p class="file"><i data-ic="file"></i>ZC-2026-0418 采购文件.pdf · <span class="fig xs">186</span> 页</p>
<ol class="steps">
<li class="done"><span class="dot">✓</span><span>识别文件格式</span></li>
<li class="done"><span class="dot">✓</span><span>提取文字</span><span class="fig">186 页</span></li>
<li class="done"><span class="dot">✓</span><span>识别分包</span><span class="fig">2 个包</span></li>
<li class="now"><span class="dot"></span><span>提取清单</span></li>
<li class="todo"><span class="dot"></span><span>核对出处</span></li>
</ol>
<div class="progress" style="margin-top:var(--sp-2)"><div class="bar" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" aria-label="解析进度"><i style="width:62%"></i></div><span class="fig">62%</span></div>
<p class="note">可以离开本页,完成后会发站内通知。</p>
</div>
<div class="card-f"><button class="btn sm" data-cancel>取消解析</button><span class="cost">取消后退回 1 次解析</span></div>
</section>
<section class="card flush" aria-labelledby="t2">
<div class="card-h"><h3 id="t2">解析失败</h3><span class="aside">11月2日 <span class="fig xs">14:31</span></span></div>
<div class="card-b">
<p class="file"><i data-ic="file"></i>关于 ZC-2026-0418 的更正公告.pdf</p>
<ol class="steps">
<li class="done"><span class="dot">✓</span><span>识别文件格式</span></li>
<li class="fail"><span class="dot">!</span><span>提取文字</span></li>
<li class="todo"><span class="dot"></span><span>识别分包</span></li>
<li class="todo"><span class="dot"></span><span>提取清单</span></li>
</ol>
<div class="fail-why" role="note"><i data-ic="alert-circle"></i><p><b>文件已加密,无法读取文字。</b>已退回 1 次解析额度。<span class="sub">请上传未加密的版本。</span></p></div>
</div>
<div class="card-f"><button class="btn sm"><i data-ic="upload"></i>重新上传</button><span class="r"><span class="errno">E-20261102-3M8A</span></span></div>
</section>
<div class="stack">
<section class="card flush" aria-labelledby="t3">
<div class="card-h"><h3 id="t3">解析完成</h3><span class="aside">用时 3 分 12 秒</span></div>
<div class="card-b">
<dl class="kv">
<dt>提取要求</dt><dd><span class="fig">26</span> 条 · 其中 ★ <span class="fig">4</span> 条</dd>
<dt>待确认</dt><dd><span class="fig">2</span> 条(没有可靠出处)</dd>
<dt>分包</dt><dd><span class="fig">2</span> 个采购包</dd>
</dl>
</div>
<div class="card-f"><a class="btn sm" href="page-reading.html">去读标</a><span class="r cost">已扣 1 次解析</span></div>
</section>
<section class="card flush" aria-label="检查排队中">
<div class="card-h queued"><i data-ic="clock"></i><b>检查排队中</b><span class="aside">前面 <span class="fig xs">2</span> 个任务 · 约 4 分钟</span></div>
</section>
</div>
</div>
<ul class="d-rules"><li>阶段:✓ 完成(墨色实心)、当前(加粗)、未开始(辅助灰);失败用赭色「!」并说明原因和退回额度,不用红。</li></ul>
</section>
<!-- 04 AI 摘要卡 -->
<section class="d-sec" id="s-ai">
<div class="d-sec-h"><span class="no">04</span><h2>AI 摘要卡</h2><span class="ref">规范 §7.16 · §8.1 · 红线 1、2</span></div>
<div class="d-grid c2 eq">
<section class="card flush ai-card" aria-labelledby="a1" data-ai-card>
<div class="card-h"><h3 id="a1">项目要点</h3><span class="tag ai" data-ai-tag>AI 摘要</span></div>
<div class="card-b">
<div class="ai-block" data-ai-block>
<dl class="kv">
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#" data-demo>第 <span class="fig">31</span> 页</a></dd>
<dt>联合体</dt><dd>不接受<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#" data-demo>第 <span class="fig">21</span> 页</a></dd>
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
</dl>
<div data-ai-sign></div>
</div>
</div>
<div class="card-f" data-ai-foot><button class="btn sm" data-ai-ok>确认无误</button><button class="btn sm text">修改</button><span class="r cap"><a class="lnk" href="#" data-demo>判断有误?</a></span></div>
</section>
<section class="card flush ai-card" aria-labelledby="a2">
<div class="card-h"><h3 id="a2">项目要点</h3></div>
<div class="card-b">
<div class="ai-block done">
<dl class="kv">
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#" data-demo>第 <span class="fig">31</span> 页</a></dd>
<dt>联合体</dt><dd>不接受 <span class="flag box">已修改</span><a class="cite-src inline" href="#" data-demo>第 <span class="fig">2</span> 页</a></dd>
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#" data-demo>第 <span class="fig">21</span> 页</a></dd>
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
</dl>
<div class="sign sm"><span class="ok" aria-hidden="true">✓</span><b>王敏</b><span class="fig">11月2日 14:20</span><span>确认无误</span></div>
</div>
</div>
<div class="card-f"><button class="btn sm text"><i data-ic="history"></i>处理记录</button><span class="r"><button class="btn sm text">撤销确认</button></span></div>
</section>
</div>
<ul class="d-rules"><li>正文始终墨色。确认前:标题旁「AI 摘要」标签 + 左侧 2px 蓝铅笔虚线;确认后:两者去掉,正文下方出署名行(绿 ✓ + 姓名 + 时间 + 动作),正文位置不动(Q2)。左卡可点「确认无误」试一下。</li><li>出处蓝色,可点开原文核对;找不到的写「未找到 · 已查找:…」,不猜测、不留空(红线 2、5)。</li></ul>
</section>
<!-- 05 关键日期卡 -->
<section class="d-sec" id="s-date">
<div class="d-sec-h"><span class="no">05</span><h2>关键日期卡</h2><span class="ref">规范 §7.9 倒计时 · §9.3</span></div>
<div class="d-grid c2">
<section class="card flush" aria-labelledby="d1">
<div class="card-h"><h3 id="d1">关键日期</h3><span class="aside">已按补遗 1 更新</span></div>
<div class="card-b">
<ul class="dates">
<li class="past"><span class="fig">10月28日</span><span>采购文件公告发布</span><span></span></li>
<li><span class="fig">11月9日</span><span>询问、质疑截止<span class="left">剩 <span class="fig">6</span> 天</span></span><a class="cite-src" href="#" data-demo>第 <span class="fig">6</span> 页</a></li>
<li class="key"><span class="fig">11月20日 09:30</span><span><b>投标截止 / 开标</b><span class="left">剩 <span class="fig">17</span> 天 · 补遗 1 更新,原为 11月18日 09:30</span></span><a class="cite-src" href="#" data-demo>补遗 1 · 第 <span class="fig">1</span> 页</a></li>
<li><span class="fig">2027年2月18日</span><span>投标有效期至<span class="left">截止日起 <span class="fig">90</span> 天</span></span><a class="cite-src" href="#" data-demo>第 <span class="fig">21</span> 页</a></li>
</ul>
</div>
</section>
<section class="card flush" aria-labelledby="d2">
<div class="card-h"><h3 id="d2">7 天内截止</h3><a class="lnk cap" style="margin-left:auto" href="page-workbench.html">全部项目</a></div>
<div class="card-b">
<ul class="dates">
<li><span class="fig">今天 17:00</span><span><b>某县数据中心机房改造项目</b><span class="left due-today">剩 6 小时 · 编制中</span></span><span class="cap muted">标段 1</span></li>
<li><span class="fig">11月5日 16:00</span><span><b>某区智慧社区平台运维服务</b><span class="left due-soon">剩 2 天 5 小时 · 已检查</span></span><span class="cap muted">全部</span></li>
</ul>
</div>
</section>
</div>
<ul class="d-rules"><li>日期 Barlow 15(<code>--fs-figure-sm</code>),跨年带年份。倒计时:&gt; 72 小时墨色;≤ 72 小时赭色小字;≤ 24 小时赭色加粗;已过辅助灰。不用红、不闪烁。</li></ul>
</section>
<!-- 06 项目信息卡 -->
<section class="d-sec" id="s-info">
<div class="d-sec-h"><span class="no">06</span><h2>项目信息卡</h2><span class="ref">规范 §7.9 · §9.1</span></div>
<div class="d-grid c3 eq">
<section class="card flush pinfo" aria-labelledby="p1">
<div class="card-h"><h3 id="p1">项目信息</h3><button class="btn sm text" style="margin-left:auto"><i data-ic="pencil"></i>编辑</button></div>
<div class="card-b">
<dl class="kv">
<dt>采购人</dt><dd>某市政务服务管理办公室</dd>
<dt>项目编号</dt><dd><span class="fig">ZC-2026-0418</span></dd>
<dt>体系</dt><dd>政府采购 · 公开招标</dd>
<dt>所投包</dt><dd>采购包 1</dd>
<dt>投标截止</dt><dd>11月20日 <span class="fig">09:30</span> · 剩 <span class="fig">17</span> 天</dd>
<dt>状态</dt><dd class="state"><span class="tag">已检查</span>未就绪</dd>
</dl>
<div class="flowline sm" aria-label="项目状态:已检查"><span class="st done"><i></i>跟进中</span><span class="ln"></span><span class="st done"><i></i>编制中</span><span class="ln"></span><span class="st now"><i></i>已检查</span><span class="ln"></span><span class="st"><i></i>已递交</span></div>
</div>
</section>
<section class="card flush pinfo" aria-labelledby="p2">
<div class="card-h"><h3 id="p2">项目信息</h3><button class="btn sm text" style="margin-left:auto"><i data-ic="pencil"></i>编辑</button></div>
<div class="card-b">
<dl class="kv">
<dt>招标人</dt><dd>某县大数据管理局</dd>
<dt>项目编号</dt><dd><span class="fig">JS-2026-1107</span></dd>
<dt>体系</dt><dd>招标投标 · 公开招标</dd>
<dt>所投标段</dt><dd>标段 1</dd>
<dt>投标截止</dt><dd class="due-today">今天 17:00 截止</dd>
<dt>状态</dt><dd class="state"><span class="tag">编制中</span></dd>
</dl>
<div class="flowline sm" aria-label="项目状态:编制中"><span class="st done"><i></i>跟进中</span><span class="ln"></span><span class="st now"><i></i>编制中</span><span class="ln"></span><span class="st"><i></i>已检查</span><span class="ln"></span><span class="st"><i></i>已递交</span></div>
</div>
</section>
<section class="card flush pinfo" aria-busy="true" aria-labelledby="p3">
<div class="card-h"><h3 id="p3">项目信息</h3></div>
<div class="card-b">
<span class="skel w60"></span><span class="skel w80"></span><span class="skel w60"></span><span class="skel w30"></span><span class="skel w80"></span>
<p class="d-cap" style="margin:var(--sp-4) 0 0">加载中:骨架屏静止,不做明暗起伏(Q8)</p>
</div>
</section>
</div>
<ul class="d-rules"><li>只在项目概览页右栏用;工作台不做项目卡片,只用列表(见 <a class="lnk" href="page-workbench.html">⑤ 工作台</a>)。</li><li>术语跟着体系走:政府采购写「采购人」「采购包」,招标投标写「招标人」「标段」(§9.1)。</li></ul>
</section>
</main>
<script src="demo.js"></script>
<script>
const { $, toast, dialog } = Demo;
Demo.demoTop("cards.html");
const DEMO = "(演示)这里只做了样式";
document.addEventListener("click", (e) => { if (e.target.closest("[data-demo]")) { e.preventDefault(); toast(DEMO, { ok: false }); } });
/* 统计格:单选,再点一次回到「进行中」 */
$("[data-stats]").addEventListener("click", (e) => {
const b = e.target.closest(".stat"); if (!b) return;
const all = [...$("[data-stats]").children], on = b.getAttribute("aria-pressed") === "true" && b !== all[0];
all.forEach((x) => x.setAttribute("aria-pressed", on ? x === all[0] : x === b));
});
$("[data-cancel]").onclick = () => dialog({ title: "取消解析?", ok: "取消解析", cancel: "继续解析", body: "<p>已完成的阶段不会保留。取消后退回 1 次解析额度,可以稍后重新上传。</p>", onOk: () => toast("已取消解析 · 已退回 1 次解析额度") });
$("[data-renew]").onclick = () => toast("(演示)打开额度页的续费申请:在线申请 → 对公转账 → 运营开通", { ok: false });
/* AI 摘要卡:确认前 ⇄ 确认后(Q2) */
const card = $("[data-ai-card]"), foot = $("[data-ai-foot]").innerHTML;
function setDone(done) {
$("[data-ai-block]", card).classList.toggle("done", done);
$("[data-ai-tag]", card).hidden = done;
$("[data-ai-sign]", card).innerHTML = done ? '<div class="sign sm"><span class="ok" aria-hidden="true">✓</span><b>王敏</b><span class="fig">11月3日 15:02</span><span>确认无误</span></div>' : "";
$("[data-ai-foot]", card).innerHTML = done
? `<button class="btn sm text">${Demo.icon("history")}处理记录</button><span class="r"><button class="btn sm text" data-ai-undo>撤销确认</button></span>`
: foot;
}
card.addEventListener("click", (e) => {
if (e.target.closest("[data-ai-ok]")) { setDone(true); toast("已确认项目要点", { undo: () => setDone(false) }); $("[data-ai-undo]", card).focus(); }
else if (e.target.closest("[data-ai-undo]")) { setDone(false); toast("已撤销确认", { ok: false }); $("[data-ai-ok]", card).focus(); }
});
</script>
</body>
</html>