docs(design): 新增 UI demo 页面，供 UI 精修评审
- docs/design/ui-demo/：控件总览、表单、卡片、列表与表格，以及工作台、读标两个组合页 - 只用设计规范的变量和组件；新增组件样式放在 demo.css，清单见 index - index 列出 UI 精修待定问题 Q1–Q12 - design/README 与 AGENTS.md 进度同步 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
240
docs/design/ui-demo/cards.html
Normal file
240
docs/design/ui-demo/cards.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<!doctype html>
|
||||
<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">
|
||||
</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>
|
||||
</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 统计格 -->
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 03 额度卡 -->
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 04 任务进度卡 -->
|
||||
<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-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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05 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>
|
||||
<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>
|
||||
<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>
|
||||
<ul class="d-rules"><li>确认前：「AI 摘要」蓝铅笔标签 + 左侧虚线；确认后：标签换成绿色署名，虚线变墨色实线，正文本来就是墨色。</li><li>找不到的项写「未找到 · 已查找：…」，不猜测、不留空。胜率之类的数据不足时不展示（红线 5）。</li></ul>
|
||||
</section>
|
||||
|
||||
<!-- 06 关键日期卡 -->
|
||||
<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-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>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="demo.js"></script>
|
||||
<script>
|
||||
const { $, toast, dialog } = Demo;
|
||||
Demo.demoTop("cards.html");
|
||||
$("[data-cancel]").onclick = () => dialog({ title: "取消解析？", ok: "取消解析", cancel: "继续解析", body: "<p>已完成的阶段不会保留。取消后退回 1 次解析额度，可以稍后重新上传。</p>", onOk: () => toast("已取消解析 · 已退回 1 次解析额度") });
|
||||
$("[data-ai-ok]").onclick = () => toast("已确认项目要点", { undo: () => toast("已撤销", { ok: false }) });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user