Files
bid-doctor/docs/design/system/components.html
YANG JIANKUAN 700514746f refactor(design): 组件样式抽成共用的 components.css
- 预览页的组件样式移到 system/components.css,本地字体加载移到 system/fonts-local.css,供预览页和原型共用
- 出处引用限 4 行、选中态加粗;链接按钮去下划线;hidden 属性优先于组件样式
- 规范补充:「已忽略」署名用辅助灰和「–」,不用确认绿

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-02 22:02:34 +08:00

297 lines
23 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>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标博士 组件预览</title>
<link rel="icon" href="../logo/favicon.svg">
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="fonts-local.css">
<link rel="stylesheet" href="components.css">
<style>
/* 只属于预览页的排版 */
.page{max-width:1240px;margin:0 auto;padding:var(--sp-12) var(--sp-6) var(--sp-16)}
h1{font:var(--fw-bold) 32px/40px var(--font-serif);margin:0 0 var(--sp-2)}
.lede{color:var(--text-secondary);margin:0;max-width:52em}
section{margin-top:var(--sp-12)}
.sec-h{display:flex;align-items:baseline;gap:var(--sp-3);border-bottom:2px solid var(--border-strong);padding-bottom:var(--sp-2);margin-bottom:var(--sp-5)}
.sec-h h2{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
.sec-h .no{font:600 var(--fs-title)/1 var(--font-figures);color:var(--text-secondary)}
.sec-h .ref{margin-left:auto;font-size:var(--fs-caption);color:var(--text-secondary)}
/* ---- 色板 ---- */
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.sw{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden;font-size:var(--fs-caption);line-height:var(--lh-caption)}
.sw i{display:block;height:56px;border-bottom:1px solid var(--border-subtle)}
.sw div{padding:var(--sp-2) var(--sp-3)}
.sw b{display:block;font-size:var(--fs-body)}
.sw .fig{font-weight:500;color:var(--text-secondary)}
/* ---- 字阶 ---- */
.type td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--border-subtle);vertical-align:baseline}
.type td:first-child{width:120px;color:var(--text-secondary);font-size:var(--fs-caption)}
.type table{border-collapse:collapse;width:100%}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
</style>
</head>
<body>
<main class="page">
<h1>标博士 · 组件预览</h1>
<p class="lede">配合 <code>design-system.md</code> v0.1 阅读。条款原文取自苏采云样本 S02、S10;为了演示,S10 的分包限价和 S02 的设备参数放在了同一个示意项目里。页码、投标响应值、人名都是示意数据。</p>
<!-- 01 颜色 -->
<section>
<div class="sec-h"><span class="no">01</span><h2>颜色</h2><span class="ref">规范 §3</span></div>
<div class="swatches">
<div class="sw"><i style="background:var(--c-paper)"></i><div><b>校样纸</b><span class="fig">#F5F6F3</span><br>页面底色</div></div>
<div class="sw"><i style="background:var(--c-ink)"></i><div><b>墨</b><span class="fig">#1D2733</span><br>正文、人工确认</div></div>
<div class="sw"><i style="background:var(--c-sub)"></i><div><b>辅助灰</b><span class="fig">#5C6670</span><br>次要文字、提示级</div></div>
<div class="sw"><i style="background:var(--c-pencil)"></i><div><b>蓝铅笔</b><span class="fig">#2F5BD3</span><br>AI 标注、出处</div></div>
<div class="sw"><i style="background:var(--c-fatal)"></i><div><b>致命红</b><span class="fig">#C4122F</span><br>只用于致命问题</div></div>
<div class="sw"><i style="background:var(--c-ochre)"></i><div><b>赭</b><span class="fig">#A66300 / #8A5200</span><br>重要级、提醒、错误</div></div>
<div class="sw"><i style="background:var(--c-green)"></i><div><b>定稿绿</b><span class="fig">#2E6B4F</span><br>确认署名</div></div>
<div class="sw"><i style="background:var(--c-muted)"></i><div><b>禁用灰</b><span class="fig">#7A838C</span><br>禁用、控件边框</div></div>
</div>
<p class="note">印章红 #D9291C、藏青 #1C2554 只属于 logo,不出现在界面变量里。</p>
</section>
<!-- 02 字体 -->
<section class="type">
<div class="sec-h"><span class="no">02</span><h2>字体与字阶</h2><span class="ref">规范 §4</span></div>
<table>
<tr><td>H1 · 24/32 宋体</td><td style="font:600 24px/32px var(--font-serif)">智慧规划资源 2025 标段三</td></tr>
<tr><td>H2 · 20/28 宋体</td><td style="font:600 20px/28px var(--font-serif)">采购包 2 的检查结果</td></tr>
<tr><td>Title · 16/24</td><td style="font:600 16px/24px var(--font-sans)">报价超过采购包 2 的最高限价</td></tr>
<tr><td>Body · 14/22</td><td>开标一览表报价 133.60 万元,最高限价 132.00 万元,超出 1.60 万元。</td></tr>
<tr><td>Read · 14/24</td><td style="line-height:24px">★ 支持硬件BFD,最小报文发送间隔≤50ms,提供相关证明材料(包含但不限于产品官网公开参数截图证明等)。</td></tr>
<tr><td>Caption · 12/20</td><td style="font-size:12px;line-height:20px;color:var(--text-secondary)">王敏 11月2日 14:20 · 第 3 次检查</td></tr>
<tr><td>Figure · 30/36</td><td><span class="fig" style="font-size:30px;line-height:36px">132.00</span> <span class="fig" style="font-size:30px">第 41 页</span> <span class="fig" style="font-size:30px">≥ 512G</span></td></tr>
</table>
</section>
<!-- 03 标签与按钮 -->
<section>
<div class="sec-h"><span class="no">03</span><h2>级别标签与按钮</h2><span class="ref">规范 §7.1 · §7.2</span></div>
<div class="grid2">
<div class="card">
<div class="row"><span class="sev fatal">致命</span><span class="sev major">重要</span><span class="sev hint">提示</span></div>
<div class="row" style="margin-top:var(--sp-3)"><span class="sev fatal">致命<span class="fig">2</span></span><span class="sev major">重要<span class="fig">5</span></span><span class="sev hint">提示<span class="fig">11</span></span></div>
<div class="row" style="margin-top:var(--sp-3)"><span class="tag status">编制中</span><span class="tag status">已检查</span><span class="tag ai">AI 摘要</span><span class="tag">资格条件</span><span class="tag">无效条款</span></div>
<p class="note">级别靠「实心 / 描边 / 无框」区分,色弱和黑白打印也分得清。</p>
</div>
<div class="card">
<div class="row"><button class="btn primary">发起检查</button><span class="cost">扣 1 次检查 · 剩 <span class="fig">12</span> 次</span></div>
<div class="row" style="margin-top:var(--sp-3)"><button class="btn">导出报告</button><button class="btn text">查看处理记录</button><button class="btn" disabled>正在导出…</button></div>
<div class="row" style="margin-top:var(--sp-3)"><button class="btn sm">确认无误</button><button class="btn lg primary">上传招标文件</button><a class="plain" href="#">普通链接用墨色下划线</a></div>
<p class="note">没有红色危险按钮;删除靠确认对话框,不靠颜色。</p>
</div>
</div>
</section>
<!-- 04 问题列表 -->
<section>
<div class="sec-h"><span class="no">04</span><h2>问题行与出处批注</h2><span class="ref">规范 §7.3 · §7.4</span></div>
<div class="results">
<div class="results-head">
<h3>采购包 2 的检查结果</h3><span class="proj">智慧规划资源 2025 标段三 · 第 3 次检查</span>
<div class="counts"><span class="sev fatal">致命<span class="fig">2</span></span><span class="sev major">重要<span class="fig">1</span></span><span class="sev hint">提示<span class="fig">4</span></span></div>
</div>
<article class="finding is-fatal">
<div>
<div class="f-head"><span class="sev fatal">致命</span><span class="f-title">报价超过采购包 2 的最高限价</span><span class="flag">新增</span></div>
<p class="f-text">开标一览表报价 133.60 万元,最高限价 132.00 万元,超出 1.60 万元。</p>
<p class="f-text">这一项会导致投标无效。请核对开标一览表的报价。</p>
<div class="f-actions"><button class="btn">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button><a class="plain feedback" href="#">判断有误?</a></div>
</div>
<aside>
<div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 2 页</span></a><q><mark>最高限价:184万元(采购包1:14万元,采购包2:132万元,采购包3:38万元)</mark></q></div>
<div class="cite"><a class="cite-src" href="#">报价册 · 开标一览表 · <span class="fig">第 1 页</span></a><q><mark>投标总价(小写):1336000.00 元</mark></q></div>
</aside>
</article>
<article class="finding is-fatal">
<div>
<div class="f-head"><span class="sev fatal">致命</span><span class="f-title">★ 条款疑似不满足:服务器内存</span><span class="flag">沿用</span></div>
<p class="f-text">技术偏离表第 12 行响应「内存 256G」,要求「≥512G」。</p>
<div class="sign"><span>✓</span><b>王敏</b><span class="fig">11月2日 14:20</span><span>已修改</span><a class="plain undo" href="#">撤销</a></div>
</div>
<aside>
<div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 41 页</span></a><q>★ 2U机架式服务器,CPU:配置≥2颗海光架构32C 2.7GHz,<mark>内存: ≥512G DDR4</mark>,系统盘: 2块≥480G SSD…</q></div>
</aside>
</article>
<article class="finding">
<div>
<div class="f-head"><span class="sev major">重要</span><span class="f-title">缺少 ★ 参数的证明材料:硬件 BFD</span></div>
<p class="f-text">已响应「支持硬件 BFD」,但没有找到官网参数截图等证明材料。请在技术册补充证明材料。</p>
<div class="f-actions"><button class="btn">确认无误</button><button class="btn">已修改</button><button class="btn">忽略并注明原因</button><a class="plain feedback" href="#">判断有误?</a></div>
</div>
<aside>
<div class="cite"><a class="cite-src" href="#">招标文件 · <span class="fig">第 44 页</span></a><q>★ 支持硬件BFD,最小报文发送间隔≤50ms,<mark>提供相关证明材料(包含但不限于产品官网公开参数截图证明等)</mark>。</q></div>
<div class="cite missing"><span class="cite-src">投标文件 · 未找到证明材料</span><p>已查找:技术册(全部章节)、资格证明册</p></div>
</aside>
</article>
<article class="finding">
<div>
<div class="f-head"><span class="sev hint">提示</span><span class="f-title">投标函落款日期晚于投标截止日</span></div>
<p class="f-text">投标函落款「2026年11月25日」,投标截止时间是 2026年11月20日 09:30。</p>
<div class="f-actions"><button class="btn sm">确认无误</button><button class="btn sm">已修改</button><button class="btn sm">忽略并注明原因</button><a class="plain feedback" href="#">判断有误?</a></div>
</div>
<aside>
<div class="cite"><a class="cite-src" href="#">商务册 · 投标函 · <span class="fig">第 3 页</span><span class="ocr">OCR</span></a><q><mark>2026年11月25日</mark></q></div>
</aside>
</article>
<div class="folded">已处理(<span class="fig">9</span>)· 本次已解决(<span class="fig">3</span>)</div>
</div>
</section>
<!-- 05 清单 -->
<section>
<div class="sec-h"><span class="no">05</span><h2>清单项与待确认区</h2><span class="ref">规范 §7.5 · §7.6</span></div>
<div class="grid2">
<div class="pending">
<h4>待确认(<span class="fig">2</span>)</h4>
<p>这些结果没有找到可靠出处,或系统把握不大。确认之前,不参与检查。</p>
<div class="item">
<span class="imp"></span>
<div><div class="t">投标保证金:不收取</div><div class="meta"><span class="src-ai" style="font-size:12px">AI 提取 · 未找到出处</span></div>
<div class="f-actions"><button class="btn sm">补上出处后采纳</button><button class="btn sm">修改后采纳</button><button class="btn sm text">丢弃</button></div></div>
<span></span>
</div>
<div class="item">
<span class="imp">★</span>
<div><div class="t">核心产品需提供原厂授权</div><div class="meta"><span class="src-ai" style="font-size:12px">AI 提取 · 把握不大</span><a class="cite-src" href="#" style="display:inline">第 <span class="fig">38</span> 页</a></div>
<div class="f-actions"><button class="btn sm">采纳</button><button class="btn sm">修改后采纳</button><button class="btn sm text">丢弃</button></div></div>
<span></span>
</div>
</div>
<div class="card">
<div class="list-head"><h4>无效条款(<span class="fig">14</span>)</h4><span class="tag status">草稿</span></div>
<div class="item">
<span class="imp">★</span>
<div><div class="t">设备采用国产自主可控 CPU 芯片,提供国产化适配承诺函</div><div class="meta"><span class="tag">无效条款</span><span class="tag">技术参数</span><span class="tag">采购包 2</span></div></div>
<div class="side"><span class="src-ai">AI 提取</span><br><a class="cite-src" href="#">第 <span class="fig">43</span> 页</a></div>
</div>
<div class="item">
<span class="imp"></span>
<div><div class="t">提交投标文件截止时间:<span class="old">2026年11月20日 09:30</span> 2026年11月27日 09:30</div><div class="meta"><span class="tag">关键日期</span><span class="flag">已被补遗 1 更新 · 待确认</span></div></div>
<div class="side">补遗 1<br><a class="cite-src" href="#">第 <span class="fig">1</span> 页</a></div>
</div>
<div class="item">
<span class="imp"></span>
<div><div class="t">联合体各方须签订《联合体协议》并明确牵头单位</div><div class="meta"><span class="tag">资格条件</span><span class="flag">已修改 · <a class="plain" href="#">查看记录</a></span></div></div>
<div class="side">人工添加</div>
</div>
</div>
</div>
</section>
<!-- 06 参数表 + 原文 -->
<section>
<div class="sec-h"><span class="no">06</span><h2>参数对照表与原文查看器</h2><span class="ref">规范 §7.7 · §7.8</span></div>
<div class="grid2" style="grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)">
<div>
<table class="data">
<thead><tr><th>参数项</th><th>要求</th><th>投标响应</th><th>判断</th><th>出处</th></tr></thead>
<tbody>
<tr><td>★ 内存</td><td class="num">≥ 512G DDR4</td><td class="num">256G DDR4</td><td><span class="verdict fatal">疑似不满足</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">12</span></a></td></tr>
<tr><td>★ CPU</td><td class="num">≥ 2 颗 32C 2.7GHz</td><td class="num">2 颗 32C 2.7GHz</td><td><span class="verdict">满足</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">12</span></a></td></tr>
<tr><td>▲ 存储盘</td><td class="num">≥ 4 块 3.84T SSD</td><td class="num">—</td><td><span class="verdict major">未找到响应</span></td><td><a href="#">第 <span class="fig">41</span> 页</a></td></tr>
<tr><td>万兆光口</td><td class="num">≥ 4 个 10GbE</td><td class="num">4 个 10GbE(不含光模块)</td><td><span class="verdict manual">需人工判断</span></td><td><a href="#">第 <span class="fig">41</span> 页 ↔ 技术册 <span class="fig">13</span></a></td></tr>
</tbody>
</table>
<p class="note">判断只用四个词:满足 / 疑似不满足 / 未找到响应 / 需人工判断。「满足」用墨色,不用绿色。</p>
</div>
<div class="viewer">
<div class="viewer-bar"><b>招标文件</b><span>JSZC-320300-XZCG-G2026-0053</span><div class="pager"><button class="btn sm">上一处</button><span class="fig">第 41 / 186 页</span><button class="btn sm">下一处</button></div></div>
<div class="sheet">
<p class="faint">采购包 2:服务器设备</p>
<p class="hl on">★ 2U机架式服务器,CPU:配置≥2颗海光架构32C 2.7GHz,内存: ≥512G DDR4,系统盘: 2块≥480G SSD,存储盘: ≥2块8T SATA、≥4块3.84T SSD……</p>
<p class="faint">阵列卡:1块8204 2G,网络:配置≥4个1GbE 接口,≥4个10GbE 光接口(含光模块)……</p>
<p>备注:加★为核心技术参数;加▲为重要技术参数;其他为通用技术参数。</p>
</div>
</div>
</div>
</section>
<!-- 07 工作台 -->
<section>
<div class="sec-h"><span class="no">07</span><h2>项目工作台</h2><span class="ref">规范 §7.9</span></div>
<table class="data">
<thead><tr><th>项目</th><th>所投包</th><th>截止</th><th>状态</th><th>就绪</th><th class="r">致命</th></tr></thead>
<tbody>
<tr><td><div class="proj-name">智慧规划资源 2025 标段三</div><div class="proj-sub">南京市规划和自然资源局</div></td><td>采购包 2</td><td class="due-today">今天 17:00 截止</td><td><span class="tag status">已检查</span></td><td>未就绪</td><td class="r"><span class="sev fatal">致命<span class="fig">2</span></span></td></tr>
<tr><td><div class="proj-name">2026 年信息化设备采购项目</div><div class="proj-sub">国家税务总局徐州市税务局</div></td><td>全部</td><td class="due-soon">剩 2 天 5 小时</td><td><span class="tag status">已检查</span></td><td><span class="tag status" title="只表示致命问题都已处理,不代表投标文件没有问题">就绪</span></td><td class="r num">—</td></tr>
<tr><td><div class="proj-name">数据中心运维服务项目</div><div class="proj-sub">某市大数据管理局</div></td><td>标段 1</td><td><span class="fig">11月20日 09:30</span> · 剩 <span class="fig">17</span> 天</td><td><span class="tag status">编制中</span></td><td>—</td><td class="r num">—</td></tr>
<tr><td><div class="proj-name">智慧校园一期</div><div class="proj-sub">某区教育局</div></td><td>全部</td><td class="due-past">已截止</td><td><span class="tag status">已递交</span></td><td>—</td><td class="r num">—</td></tr>
</tbody>
</table>
<p class="note">截止临近用赭色,不用红;「就绪」悬停说明:只表示致命问题都已处理,不代表投标文件没有问题。</p>
</section>
<!-- 08 额度、提醒、表单、进度 -->
<section>
<div class="sec-h"><span class="no">08</span><h2>额度、提醒、表单、进度</h2><span class="ref">规范 §7.10–7.13</span></div>
<div class="grid2">
<div>
<div class="card quota">
<div class="row" style="gap:var(--sp-8)">
<div><div class="proj-sub">解析剩余</div><span class="big">37</span><span class="unit">/ 50 次</span><div class="bar"><i style="width:26%"></i></div></div>
<div><div class="proj-sub">检查剩余</div><span class="big">4</span><span class="unit">/ 20 次</span><div class="bar warn"><i style="width:80%"></i></div></div>
</div>
<table class="data flow" style="margin-top:var(--sp-4)">
<thead><tr><th>时间</th><th>类型</th><th class="r">数量</th><th>关联</th></tr></thead>
<tbody>
<tr><td class="num">11-02 14:31</td><td>退回</td><td class="num r plus">+1</td><td>解析失败:文件已加密</td></tr>
<tr><td class="num">11-02 14:28</td><td>预扣</td><td class="num r">−1</td><td>解析 · 补遗 1</td></tr>
<tr><td class="num">11-02 10:05</td><td>结算</td><td class="num r">−1</td><td>检查 · 智慧规划资源 2025 标段三</td></tr>
</tbody>
</table>
</div>
<div class="card" style="margin-top:var(--sp-4)">
<div class="field"><label>手机号 <small>(必填)</small></label><input class="input" value="1381452198"><span class="msg"><span class="ico w">!</span>手机号应为 11 位数字</span></div>
<div class="field"><label>忽略原因 <small>(必填,至少 5 个字)</small></label><input class="input" placeholder="说明为什么不处理这一项"><div class="chips"><button class="btn">招标文件允许</button><button class="btn">已在其他分册响应</button><button class="btn">与本项目无关</button></div></div>
</div>
</div>
<div>
<div class="alert"><span class="ico i">i</span><p>清单未确认,检查结果以当前清单为准。</p></div>
<div class="alert warn"><span class="ico w">!</span><p><b>本期检查额度已用 80%。</b>剩 4 次,11月30日 发放下期额度。</p></div>
<div class="alert warn"><span class="ico w">!</span><p><b>解析失败:文件已加密。</b>已退回 1 次解析额度。请上传未加密的文件。</p></div>
<div class="alert done"><span class="ico ok">✓</span><p>报告已导出。</p></div>
<div class="card" style="margin-top:var(--sp-4)">
<ol class="steps">
<li class="done"><span class="dot">✓</span>识别文件格式</li>
<li class="done"><span class="dot">✓</span>提取文字</li>
<li class="now"><span class="dot"></span>识别分包(3 个采购包)</li>
<li class="todo"><span class="dot"></span>提取清单</li>
<li class="todo"><span class="dot"></span>核对出处</li>
</ol>
<p class="note">可以离开本页,完成后会发站内通知。</p>
</div>
</div>
</div>
</section>
<!-- 09 报告 -->
<section>
<div class="sec-h"><span class="no">09</span><h2>检查报告首页</h2><span class="ref">规范 §7.17</span></div>
<div class="report">
<div class="report-head"><img src="../logo/svg/logo-horizontal.svg" alt="标博士"><span>投标文件辅助检查报告</span></div>
<h3>智慧规划资源 2025 标段三 · 采购包 2</h3>
<dl>
<dt>项目编号</dt><dd>JSZC-320100-JZCG-G2026-0369</dd>
<dt>投标文件</dt><dd>商务册 v3、技术册 v3、报价册 v2、资格证明册 v1</dd>
<dt>检查时间</dt><dd>2026-11-02 14:20 · 规则版本 2026.11</dd>
<dt>处理情况</dt><dd><span class="sev fatal">致命<span class="fig">2</span></span> <span class="sev major">重要<span class="fig">1</span></span> <span class="sev hint">提示<span class="fig">4</span></span> 其中待处理 1 项</dd>
</dl>
<div class="scope"><b>检查覆盖范围</b>查了:清单 86 条的响应完整性、形式要件(格式文件、签章位置有无、落款日期)、资质匹配、报价形式。<br>没查:份数、装订密封、CA 加密(见附录「需人工核对」);签章真伪;报价是否合理。</div>
<div class="report-foot"><span>本报告为辅助检查结果,不构成对投标结果的保证</span><span class="fig">1 / 12</span></div>
</div>
<p class="note">logo 只在页眉,不靠近任何结论或汇总数字。</p>
</section>
</main>
</body>
</html>