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>
This commit is contained in:
@@ -1,4 +1,9 @@
|
||||
<!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">
|
||||
@@ -9,223 +14,295 @@
|
||||
<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 分隔线 + 2px 圆角,不加阴影(层次靠分隔线和底色)。卡片里的按钮一律用次按钮或文字按钮,把主按钮留给页面级操作。</p>
|
||||
<nav class="d-toc" aria-label="本页目录"><a href="#s-proj">01 项目卡</a><a href="#s-stat">02 统计格</a><a href="#s-quota">03 额度卡</a><a href="#s-task">04 任务进度卡</a><a href="#s-ai">05 AI 摘要卡</a><a href="#s-date">06 关键日期卡</a></nav>
|
||||
<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-proj">
|
||||
<div class="d-sec-h"><span class="no">01</span><h2>项目卡</h2><span class="ref">规范 §7.9 · 卡片视图(表格视图见 ④)</span></div>
|
||||
<div class="d-grid c3 eq">
|
||||
<article class="card pcard is-fatal">
|
||||
<div class="pc-top"><div><div class="proj-name">某市政务服务中心智慧大厅建设项目</div><div class="proj-sub">某市政务服务管理办公室 · 政府采购 · 公开招标</div></div><span class="tag status">已检查</span></div>
|
||||
<div class="facts">
|
||||
<div><small>投标截止</small><span class="fig m">11月20日 09:30</span><br><span class="cap">剩 <span class="fig m">17</span> 天</span></div>
|
||||
<div><small>所投包</small>采购包 1</div>
|
||||
<div><small>就绪</small>未就绪</div>
|
||||
</div>
|
||||
<div class="d-row" style="gap:var(--sp-2)"><span class="sev fatal">致命<span class="fig">3</span></span><span class="sev major">重要<span class="fig">3</span></span><span class="sev hint">提示<span class="fig">2</span></span><span class="cap muted" style="margin-left:auto">第 2 次检查 · 11月2日</span></div>
|
||||
<div class="card-foot"><button class="btn sm">处理检查结果</button><span class="r"><button class="icon-btn sm" aria-label="更多操作" data-tip="更多操作"><i data-ic="more"></i></button></span></div>
|
||||
</article>
|
||||
<article class="card pcard">
|
||||
<div class="pc-top"><div><div class="proj-name">某区智慧社区平台运维服务</div><div class="proj-sub">某区民政局 · 政府采购 · 竞争性磋商</div></div><span class="tag status">已检查</span></div>
|
||||
<div class="facts">
|
||||
<div><small>响应截止</small><span class="due-soon">剩 2 天 5 小时</span></div>
|
||||
<div><small>所投包</small>全部</div>
|
||||
<div><small>就绪</small><span class="tag status" data-tip="只表示致命问题都已处理,不代表响应文件没有问题。">就绪</span></div>
|
||||
</div>
|
||||
<div class="d-row" style="gap:var(--sp-2)"><span class="cap muted">致命 —</span><span class="sev major">重要<span class="fig">1</span></span><span class="cap muted" style="margin-left:auto">第 3 次检查 · 11月3日</span></div>
|
||||
<div class="card-foot"><button class="btn sm">导出报告</button><span class="r"><button class="icon-btn sm" aria-label="更多操作" data-tip="更多操作"><i data-ic="more"></i></button></span></div>
|
||||
</article>
|
||||
<article class="card pcard">
|
||||
<div class="pc-top"><div><div class="proj-name">某县数据中心机房改造项目</div><div class="proj-sub">某县大数据管理局 · 招标投标</div></div><span class="tag status">编制中</span></div>
|
||||
<div class="facts">
|
||||
<div><small>投标截止</small><span class="due-today">今天 17:00 截止</span></div>
|
||||
<div><small>所投标段</small>标段 1</div>
|
||||
<div><small>清单</small>草稿 v1</div>
|
||||
</div>
|
||||
<div class="flowline sm"><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 class="card-foot"><button class="btn sm">确认清单</button><span class="cap muted">待确认 2 条</span><span class="r"><button class="icon-btn sm" aria-label="更多操作" data-tip="更多操作"><i data-ic="more"></i></button></span></div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="d-grid c3 eq" style="margin-top:var(--sp-6)">
|
||||
<article class="card pcard">
|
||||
<div class="pc-top"><div><div class="proj-name">某区智慧校园一期</div><div class="proj-sub">某区教育局 · 政府采购 · 公开招标</div></div><span class="tag status">已递交</span></div>
|
||||
<div class="facts">
|
||||
<div><small>投标截止</small><span class="due-past">已截止</span></div>
|
||||
<div><small>所投包</small>全部</div>
|
||||
<div><small>递交</small><span class="fig m">10月28日</span></div>
|
||||
</div>
|
||||
<div class="sign sm" style="margin:0"><span>✓</span><b>王敏</b><span class="fig">10月28日 09:12</span>标记已递交</div>
|
||||
<div class="card-foot"><button class="btn sm text">查看报告</button><span class="r"><button class="btn sm text">归档</button></span></div>
|
||||
</article>
|
||||
<article class="card pcard" aria-busy="true" aria-label="正在加载项目">
|
||||
<div class="pc-top"><div><span class="skel t" style="width:70%"></span><span class="skel w60"></span></div></div>
|
||||
<div class="facts"><div><span class="skel w60"></span><span class="skel"></span></div><div><span class="skel w60"></span><span class="skel"></span></div><div><span class="skel w60"></span><span class="skel"></span></div></div>
|
||||
<span class="skel w30"></span>
|
||||
<p class="d-cap" style="margin:0">↑ 加载中(骨架屏)</p>
|
||||
</article>
|
||||
<button class="d-box flat" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);min-height:220px;cursor:pointer;font:inherit;color:var(--text-primary)">
|
||||
<i data-ic="plus" class="lg"></i><b>新建项目</b><span class="cap muted">上传招标文件,标博士逐条提取要求</span>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="d-rules"><li>致命项目卡左侧加 3px 致命红竖线(与问题行一致),方便在卡片墙里扫读;状态用中性描边标签,不用彩色。</li><li>术语跟着体系走:磋商项目写「响应截止」「响应文件」,招标投标体系写「标段」(§9.1)。</li></ul>
|
||||
</section>
|
||||
|
||||
<!-- 02 统计格 -->
|
||||
<!-- 01 统计卡 -->
|
||||
<section class="d-sec" id="s-stat">
|
||||
<div class="d-sec-h"><span class="no">02</span><h2>统计格</h2><span class="ref">规范 §4.2 Figure 30/36</span></div>
|
||||
<div class="stats">
|
||||
<div class="stat"><small>进行中的项目</small><span class="big">4</span><p>已递交 1 · 已归档 1</p></div>
|
||||
<div class="stat"><small>7 天内截止</small><span class="big">2</span><p class="due-today">最近:今天 17:00</p></div>
|
||||
<div class="stat"><small>待处理的致命问题</small><span class="big">3</span><p>在 1 个项目里</p></div>
|
||||
<div class="stat"><small>本期解析剩余</small><span class="big">37</span><span class="unit">次</span><p>检查剩 12 次 · <a class="plain" href="#">查看明细</a></p></div>
|
||||
</div>
|
||||
<ul class="d-rules"><li>统计数字一律墨色,即使是「致命问题 3」也不染红:红色留给标签,避免一屏红色太多。</li></ul>
|
||||
<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>
|
||||
|
||||
<!-- 03 额度卡 -->
|
||||
<!-- 02 额度卡 -->
|
||||
<section class="d-sec" id="s-quota">
|
||||
<div class="d-sec-h"><span class="no">03</span><h2>额度卡</h2><span class="ref">规范 §7.10 · §8.3 · 红线 9</span></div>
|
||||
<div class="d-grid c3">
|
||||
<div class="card quota">
|
||||
<div class="card-h"><h3>本期额度</h3><span class="more cap muted">专业版 · 至 2027-10-31</span></div>
|
||||
<div class="q2">
|
||||
<div><small>解析剩余</small><span class="big">37</span><span class="unit">/ 50</span><div class="bar"><i style="width:26%"></i></div><p>已用 13 次</p></div>
|
||||
<div><small>检查剩余</small><span class="big">12</span><span class="unit">/ 20</span><div class="bar"><i style="width:40%"></i></div><p>已用 8 次</p></div>
|
||||
<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-foot"><a class="plain cap" href="#">扣点规则</a><span class="r"><a class="plain cap" href="#">查看流水</a></span></div>
|
||||
</div>
|
||||
<div class="card quota">
|
||||
<div class="card-h"><h3>检查额度</h3><span class="more cap muted">已用 80%</span></div>
|
||||
<small>检查剩余</small><span class="big">4</span><span class="unit">/ 20 次</span>
|
||||
<div class="bar warn"><i style="width:80%"></i></div>
|
||||
<p class="warn">已用 80%。同一项目 24 小时内复查不扣额度。</p>
|
||||
<div class="card-foot"><span class="cap muted">提醒每期只出现一次</span><span class="r"><a class="plain cap" href="#">查看流水</a></span></div>
|
||||
</div>
|
||||
<div class="card quota">
|
||||
<div class="card-h"><h3>检查额度</h3><span class="more cap muted">已用完</span></div>
|
||||
<small>检查剩余</small><span class="big">0</span><span class="unit">/ 20 次</span>
|
||||
<div class="bar warn"><i style="width:100%"></i></div>
|
||||
<p class="warn">本期检查额度已用完,续费或下期发放后可继续。</p>
|
||||
<div class="card-foot"><button class="btn sm">联系客服加额度</button><span class="r"><a class="plain cap" href="#">查看流水</a></span></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>
|
||||
<div class="d-row" style="margin-top:var(--sp-4)"><span class="d-cap">顶栏常驻</span><a class="quota-chip" href="#">解析<span class="fig">37</span>检查<span class="fig">12</span></a><a class="quota-chip warn" href="#">解析<span class="fig">37</span>检查<span class="fig">4</span></a><span class="d-cap">检查用到 80% 时,顶栏描边变赭色</span></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>
|
||||
|
||||
<!-- 04 任务进度卡 -->
|
||||
<!-- 03 任务进度卡 -->
|
||||
<section class="d-sec" id="s-task">
|
||||
<div class="d-sec-h"><span class="no">04</span><h2>任务进度卡</h2><span class="ref">规范 §7.11</span></div>
|
||||
<div class="d-sec-h"><span class="no">03</span><h2>任务进度卡</h2><span class="ref">规范 §7.11</span></div>
|
||||
<div class="d-grid c3">
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>正在解析招标文件</h3><span class="more cap muted">已用时 1 分 40 秒</span></div>
|
||||
<p class="cap muted" style="margin:0 0 var(--sp-2)">ZC-2026-0418 采购文件.pdf · 186 页</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><span class="fig">62%</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"><i style="width:62%"></i></div><span class="fig">62%</span></div>
|
||||
<p class="note">可以离开本页,完成后会发站内通知。</p>
|
||||
<div class="card-foot"><button class="btn sm" data-cancel>取消解析</button><span class="cap muted">取消后退回 1 次解析额度</span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>解析失败</h3><span class="more cap muted">11月2日 14:31</span></div>
|
||||
<p class="cap muted" style="margin:0 0 var(--sp-2)">关于 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="alert warn" style="margin-top:var(--sp-3)"><span class="ico w">!</span><div><p><b>文件已加密,无法读取文字。</b>已退回 1 次解析额度。</p><span class="sub">请上传未加密的版本,或在 PDF 阅读器里另存一份。</span></div></div>
|
||||
<div class="card-foot"><button class="btn sm"><i data-ic="upload"></i>重新上传</button><span class="r"><span class="errno">E-20261102-3M8A</span></span></div>
|
||||
</div>
|
||||
<div class="d-stack">
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>解析完成</h3><span class="more cap muted">用时 3 分 12 秒</span></div>
|
||||
<dl class="kv">
|
||||
<dt>提取要求</dt><dd><span class="fig m">26</span> 条 · 其中 ★ <span class="fig m">4</span> 条</dd>
|
||||
<dt>待确认</dt><dd><span class="src-ai"><span class="fig m">2</span> 条没有可靠出处</span></dd>
|
||||
<dt>分包</dt><dd>2 个采购包</dd>
|
||||
</dl>
|
||||
<div class="card-foot"><button class="btn sm">去读标</button><span class="r cap muted">已扣 1 次解析</span></div>
|
||||
<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 tight">
|
||||
<div class="card-h" style="margin:0"><i data-ic="clock" class="muted"></i><h3 style="font-size:var(--fs-body)">检查排队中</h3><span class="more cap muted">前面还有 <span class="fig m">2</span> 个任务 · 约 4 分钟</span></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>
|
||||
|
||||
<!-- 05 AI 摘要卡 -->
|
||||
<!-- 04 AI 摘要卡 -->
|
||||
<section class="d-sec" id="s-ai">
|
||||
<div class="d-sec-h"><span class="no">05</span><h2>AI 摘要卡</h2><span class="ref">规范 §7.16 · §8.1 · 红线 1、2</span></div>
|
||||
<div class="d-grid c2">
|
||||
<div class="card">
|
||||
<div class="card-h"><span class="tag ai">AI 摘要</span><h3>项目要点</h3><span class="more cap muted">未确认 · 每一条都可以点出处核对</span></div>
|
||||
<div class="ai-block">
|
||||
<dl class="kv">
|
||||
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
|
||||
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig m">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#">第 <span class="fig">2</span> 页</a></dd>
|
||||
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#">第 <span class="fig">31</span> 页</a></dd>
|
||||
<dt>联合体</dt><dd>不接受<a class="cite-src inline" href="#">第 <span class="fig">2</span> 页</a></dd>
|
||||
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#">第 <span class="fig">21</span> 页</a></dd>
|
||||
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
|
||||
</dl>
|
||||
<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-foot"><button class="btn sm" data-ai-ok>确认无误</button><button class="btn sm text">修改</button><span class="r"><a class="plain cap" href="#">判断有误?</a></span></div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>项目要点</h3><span class="more"><span class="sign sm" style="margin:0"><span>✓</span><b>王敏</b><span class="fig">11月2日 14:20</span>确认无误</span></span></div>
|
||||
<div class="ai-block done">
|
||||
<dl class="kv">
|
||||
<dt>法律体系</dt><dd>政府采购 · 公开招标(按「投标无效」口径检查)</dd>
|
||||
<dt>预算 / 限价</dt><dd>采购包 1:<span class="fig m">286.00</span> 万元(最高限价同预算)<a class="cite-src inline" href="#">第 <span class="fig">2</span> 页</a></dd>
|
||||
<dt>评标方法</dt><dd>综合评分法:价格 10、技术 40、实施方案 20、售后 10、认证 6、业绩 8<a class="cite-src inline" href="#">第 <span class="fig">31</span> 页</a></dd>
|
||||
<dt>联合体</dt><dd>不接受 <span class="flag">已修改 · <a class="plain" href="#">查看记录</a></span><a class="cite-src inline" href="#">第 <span class="fig">2</span> 页</a></dd>
|
||||
<dt>保证金</dt><dd>不收取<a class="cite-src inline" href="#">第 <span class="fig">21</span> 页</a></dd>
|
||||
<dt>样品</dt><dd class="muted">未找到要求 · 已查找:第二章、第三章、第六章</dd>
|
||||
</dl>
|
||||
<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-foot"><button class="btn sm text"><i data-ic="history"></i>处理记录</button><span class="r"><button class="btn sm text">撤销确认</button></span></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 摘要」蓝铅笔标签 + 左侧虚线;确认后:标签换成绿色署名,虚线变墨色实线,正文本来就是墨色。</li><li>找不到的项写「未找到 · 已查找:…」,不猜测、不留空。胜率之类的数据不足时不展示(红线 5)。</li></ul>
|
||||
<ul class="d-rules"><li>正文始终墨色。确认前:标题旁「AI 摘要」标签 + 左侧 2px 蓝铅笔虚线;确认后:两者去掉,正文下方出署名行(绿 ✓ + 姓名 + 时间 + 动作),正文位置不动(Q2)。左卡可点「确认无误」试一下。</li><li>出处蓝色,可点开原文核对;找不到的写「未找到 · 已查找:…」,不猜测、不留空(红线 2、5)。</li></ul>
|
||||
</section>
|
||||
|
||||
<!-- 06 关键日期卡 -->
|
||||
<!-- 05 关键日期卡 -->
|
||||
<section class="d-sec" id="s-date">
|
||||
<div class="d-sec-h"><span class="no">06</span><h2>关键日期卡</h2><span class="ref">规范 §7.9 倒计时 · §9.3</span></div>
|
||||
<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">
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>关键日期</h3><span class="more cap muted">以补遗 1 更正后的时间为准</span></div>
|
||||
<ul class="dates">
|
||||
<li class="past"><span class="fig">10-28</span><span>采购文件公告发布</span><span></span></li>
|
||||
<li><span class="fig">11-09</span><span>询问、质疑截止<span class="left">公告期满后 7 个工作日 · 剩 6 天</span></span><a class="cite-src" href="#">第 <span class="fig">6</span> 页</a></li>
|
||||
<li class="key"><span class="fig">11-20 09:30</span><span><b>投标截止 / 开标</b><span class="left">剩 17 天 · <span class="flag">已被补遗 1 更新,原为 <s>11-18 09:30</s></span></span></span><a class="cite-src" href="#">补遗 1 · 第 <span class="fig">1</span> 页</a></li>
|
||||
<li><span class="fig">2027-02-18</span><span>投标有效期至<span class="left">截止日起 90 天</span></span><a class="cite-src" href="#">第 <span class="fig">21</span> 页</a></li>
|
||||
</ul>
|
||||
<p class="note">MVP 只在站内显示倒计时,不发截止提醒。</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-h"><h3>7 天内截止</h3><span class="more"><a class="plain cap" href="#">全部项目</a></span></div>
|
||||
<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-05 14:30</span><span><b>某区智慧社区平台运维服务</b><span class="left due-soon">剩 2 天 5 小时 · 就绪</span></span><span class="cap muted">全部</span></li>
|
||||
</ul>
|
||||
<ul class="d-rules"><li>> 72 小时:墨色「11月20日 09:30 · 剩 17 天」;≤ 72 小时:赭色小字;≤ 24 小时:赭色加粗;已过:辅助灰「已截止」。</li><li>截止临近不用红色、不闪烁。</li></ul>
|
||||
</div>
|
||||
<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>),跨年带年份。倒计时:> 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>
|
||||
|
||||
@@ -233,8 +310,33 @@
|
||||
<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-ai-ok]").onclick = () => toast("已确认项目要点", { undo: () => toast("已撤销", { ok: false }) });
|
||||
$("[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>
|
||||
|
||||
Reference in New Issue
Block a user