docs(design): 新增产品界面设计规范 v0.1、设计变量与组件预览
- design-system.md:原则、颜色与对比度实测、字体字阶、布局、17 个组件、交互模式、文案规范、无障碍与红线自查 - system/tokens.css:设计变量;system/components.html:用样本条款演示的组件预览 - 问题级别用实心 / 描边 / 无框区分(色弱模拟验证),红色只给致命问题 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
473
docs/design/system/components.html
Normal file
473
docs/design/system/components.html
Normal file
@@ -0,0 +1,473 @@
|
||||
<!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="stylesheet" href="tokens.css">
|
||||
<style>
|
||||
/* 本地预览用:字体从 logo/.work/fonts 加载(不进 git);正式前端改用 @fontsource 自托管 */
|
||||
@font-face{font-family:"Noto Serif SC";src:url("../logo/.work/fonts/NotoSerifSC%5Bwght%5D.ttf") format("truetype");font-weight:200 900}
|
||||
@font-face{font-family:"Barlow Semi Condensed";src:url("../logo/.work/fonts/BarlowSemiCondensed-Medium.ttf") format("truetype");font-weight:500}
|
||||
@font-face{font-family:"Barlow Semi Condensed";src:url("../logo/.work/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");font-weight:600}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased}
|
||||
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
|
||||
.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)}
|
||||
.note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin:var(--sp-3) 0 0}
|
||||
.card{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-5) var(--sp-6)}
|
||||
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
|
||||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
|
||||
.fig{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:600}
|
||||
|
||||
/* ---- 色板 ---- */
|
||||
.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%}
|
||||
|
||||
/* ---- 级别标签 ---- */
|
||||
.sev{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-sm);font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);white-space:nowrap}
|
||||
.sev .fig{margin-left:4px;font-size:13px}
|
||||
.sev.fatal{background:var(--sev-fatal);color:var(--text-on-dark)}
|
||||
.sev.major{border:var(--line-sev) solid var(--sev-major);color:var(--sev-major-text)}
|
||||
.sev.hint{background:var(--sev-hint-soft);color:var(--sev-hint)}
|
||||
.tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap}
|
||||
.tag.status{border-color:var(--border-control);color:var(--text-primary)}
|
||||
.tag.ai{border-color:var(--ai);color:var(--ai)}
|
||||
.flag{font-size:var(--fs-caption);color:var(--text-secondary)}
|
||||
|
||||
/* ---- 按钮 ---- */
|
||||
.btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:var(--fs-body)/1 var(--font-sans);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
|
||||
.btn:hover{background:var(--bg-hover)}
|
||||
.btn.primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--text-on-dark)}
|
||||
.btn.primary:hover{background:#34404D}
|
||||
.btn.text{border-color:transparent;background:none}
|
||||
.btn.text:hover{background:var(--bg-hover)}
|
||||
.btn.sm{height:var(--control-h-sm);padding:0 8px}
|
||||
.btn.lg{height:var(--control-h-lg);padding:0 16px}
|
||||
.btn[disabled]{color:var(--text-disabled);background:var(--bg-sunken);border-color:var(--bg-sunken);cursor:not-allowed}
|
||||
.cost{font-size:var(--fs-caption);color:var(--text-secondary)}
|
||||
.cost .fig{font-weight:500;font-size:13px}
|
||||
a.plain{color:var(--text-primary);text-underline-offset:3px}
|
||||
|
||||
/* ---- 问题行 + 页边批注 ---- */
|
||||
.results{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
|
||||
.results-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-subtle)}
|
||||
.results-head h3{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0}
|
||||
.results-head .proj{color:var(--text-secondary)}
|
||||
.results-head .counts{margin-left:auto;display:flex;gap:var(--sp-2)}
|
||||
.finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--margin-note-w);gap:var(--sp-8);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)}
|
||||
.finding:first-of-type{border-top:0}
|
||||
.finding.is-fatal::before{content:"";position:absolute;left:0;top:var(--sp-5);bottom:var(--sp-5);width:3px;background:var(--sev-fatal)}
|
||||
.f-head{display:flex;align-items:center;gap:var(--sp-2)}
|
||||
.f-title{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
|
||||
.f-head .flag{margin-left:var(--sp-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 5px;line-height:18px}
|
||||
.f-text{margin:var(--sp-2) 0 0;color:var(--text-primary)}
|
||||
.f-text + .f-text{margin-top:0}
|
||||
.f-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)}
|
||||
.f-actions .feedback{margin-left:auto;font-size:var(--fs-caption)}
|
||||
.sign{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--confirmed);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap}
|
||||
.sign b{font-weight:var(--fw-bold)}
|
||||
.sign .fig{font-weight:500}
|
||||
.sign .undo{color:var(--text-secondary);font-size:var(--fs-caption);margin-left:var(--sp-2)}
|
||||
.cite{position:relative;border-left:2px solid var(--ai);padding:2px 0 2px var(--sp-3)}
|
||||
.cite + .cite{margin-top:var(--sp-3)}
|
||||
.finding .cite:first-child::before{content:"";position:absolute;left:calc(-1 * var(--sp-8) - 2px);top:11px;width:calc(var(--sp-8) - 4px);border-top:1.5px dashed var(--ai)}
|
||||
.cite-src{display:block;color:var(--ai);font-size:var(--fs-caption);line-height:var(--lh-caption);text-decoration:none}
|
||||
.cite-src:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px}
|
||||
.cite-src .fig{font-size:13px;font-weight:600}
|
||||
.cite q{display:block;quotes:none;margin-top:2px;line-height:var(--lh-read);color:var(--text-primary)}
|
||||
.cite q mark{background:var(--ai-soft);color:inherit;padding:0 1px}
|
||||
.cite.missing{border-left-style:dashed}
|
||||
.cite.missing p{margin:2px 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)}
|
||||
.ocr{font:600 11px/1 var(--font-figures);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:1px 3px;border-radius:2px;margin-left:4px;vertical-align:1px}
|
||||
.folded{padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-body)}
|
||||
|
||||
/* ---- 清单与待确认 ---- */
|
||||
.pending{border:1.5px dashed var(--ai);border-radius:var(--radius-sm);background:var(--bg-surface);padding:var(--sp-4) var(--sp-5)}
|
||||
.pending h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);color:var(--ai)}
|
||||
.pending > p{margin:var(--sp-1) 0 var(--sp-3);color:var(--text-secondary)}
|
||||
.item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);align-items:start}
|
||||
.item:first-of-type{border-top:0}
|
||||
.imp{font-size:var(--fs-title);line-height:var(--lh-body);text-align:center}
|
||||
.item .t{font-weight:var(--fw-bold)}
|
||||
.item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
|
||||
.item .side{text-align:right;font-size:var(--fs-caption);line-height:var(--lh-caption)}
|
||||
.src-ai{color:var(--ai)}
|
||||
.old{text-decoration:line-through;color:var(--text-secondary)}
|
||||
.list-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)}
|
||||
.list-head h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)}
|
||||
|
||||
/* ---- 参数对照表 ---- */
|
||||
table.data{width:100%;border-collapse:collapse;background:var(--bg-surface);border:1px solid var(--border-subtle)}
|
||||
table.data th{background:var(--bg-sunken);text-align:left;font-weight:var(--fw-bold);font-size:var(--fs-caption);color:var(--text-secondary);padding:var(--sp-2) var(--sp-3);border-bottom:2px solid var(--border-strong);white-space:nowrap}
|
||||
table.data td:first-child{white-space:nowrap}
|
||||
table.data td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);vertical-align:top;height:40px}
|
||||
table.data tr:last-child td{border-bottom:0}
|
||||
table.data .num{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;white-space:nowrap}
|
||||
table.data .r{text-align:right}
|
||||
table.data a{color:var(--ai);text-decoration:none;font-size:var(--fs-caption);white-space:nowrap}
|
||||
table.data a .fig{font-size:13px}
|
||||
.verdict{font-weight:var(--fw-bold);white-space:nowrap}
|
||||
.verdict.fatal{color:var(--sev-fatal)}
|
||||
.verdict.major{color:var(--sev-major-text)}
|
||||
.verdict.manual{color:var(--text-secondary);font-weight:var(--fw-regular)}
|
||||
|
||||
/* ---- 原文查看器 ---- */
|
||||
.viewer{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column}
|
||||
.viewer-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:var(--fs-caption)}
|
||||
.viewer-bar b{font-size:var(--fs-body)}
|
||||
.viewer-bar .pager{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center}
|
||||
.sheet{margin:var(--sp-4) auto;width:86%;background:#fff;box-shadow:0 1px 2px rgba(29,39,51,.12);padding:28px 32px;font:13px/1.9 "Songti SC","SimSun",var(--font-serif);color:#222}
|
||||
.sheet p{margin:0 0 6px}
|
||||
.sheet .hl{background:var(--ai-soft);outline:1px solid var(--ai);outline-offset:1px}
|
||||
.sheet .hl.on{outline-width:2px}
|
||||
.sheet .faint{color:#888}
|
||||
|
||||
/* ---- 工作台 ---- */
|
||||
.proj-name{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)}
|
||||
.proj-sub{font-size:var(--fs-caption);color:var(--text-secondary)}
|
||||
.due-soon{color:var(--warn-text)}
|
||||
.due-today{color:var(--warn-text);font-weight:var(--fw-bold)}
|
||||
.due-past{color:var(--text-secondary)}
|
||||
.ready{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
|
||||
|
||||
/* ---- 额度 ---- */
|
||||
.quota .big{font:600 var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums}
|
||||
.quota .unit{color:var(--text-secondary);margin-left:4px}
|
||||
.bar{height:6px;background:var(--bg-sunken);border-radius:1px;overflow:hidden;margin:var(--sp-2) 0}
|
||||
.bar i{display:block;height:100%;background:var(--c-ink)}
|
||||
.bar.warn i{background:var(--warn)}
|
||||
.flow td.plus{color:var(--confirmed)}
|
||||
|
||||
/* ---- 提醒 ---- */
|
||||
.alert{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--c-ink);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
|
||||
.alert + .alert{margin-top:var(--sp-3)}
|
||||
.alert.warn{border-left-color:var(--warn);background:var(--warn-soft)}
|
||||
.alert.warn b{color:var(--warn-text)}
|
||||
.alert.done{border-left-color:var(--confirmed)}
|
||||
.alert p{margin:0}
|
||||
.ico{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--font-sans);margin-top:2px}
|
||||
.ico.i{border:1.5px solid var(--c-ink)}
|
||||
.ico.w{border:1.5px solid var(--warn);color:var(--warn-text)}
|
||||
.ico.ok{background:var(--confirmed);color:#fff}
|
||||
|
||||
/* ---- 表单 ---- */
|
||||
.field{display:flex;flex-direction:column;gap:6px;max-width:360px}
|
||||
.field + .field{margin-top:var(--sp-4)}
|
||||
.field label{font-weight:var(--fw-bold)}
|
||||
.field label small{font-weight:var(--fw-regular);color:var(--text-secondary)}
|
||||
.input{height:var(--control-h);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:0 10px;font:var(--fs-body) var(--font-sans);color:var(--text-primary);background:var(--bg-surface)}
|
||||
.input::placeholder{color:var(--text-secondary)}
|
||||
.field.err .input{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)}
|
||||
.field .msg{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)}
|
||||
.field.err .msg{color:var(--warn-text);display:flex;gap:6px;align-items:center}
|
||||
.field.err .msg .ico{width:14px;height:14px;font-size:10px;margin:0}
|
||||
.chips{display:flex;gap:6px;flex-wrap:wrap}
|
||||
.chips .btn{height:24px;padding:0 8px;font-size:var(--fs-caption)}
|
||||
|
||||
/* ---- 进度 ---- */
|
||||
.steps{list-style:none;margin:0;padding:0}
|
||||
.steps li{display:flex;gap:var(--sp-3);align-items:center;padding:6px 0}
|
||||
.steps .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control);flex:none;display:grid;place-items:center;font-size:11px}
|
||||
.steps .done .dot{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
|
||||
.steps .now .dot{border-color:var(--c-ink);border-width:2px}
|
||||
.steps .now{font-weight:var(--fw-bold)}
|
||||
.steps .todo{color:var(--text-secondary)}
|
||||
|
||||
/* ---- 报告页眉 ---- */
|
||||
.report{background:#fff;border:1px solid var(--border-subtle);max-width:620px;padding:28px 36px;font-size:13px;line-height:1.6}
|
||||
.report-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-ink);padding-bottom:10px}
|
||||
.report-head img{height:26px}
|
||||
.report-head span{font-size:11px;color:var(--text-secondary)}
|
||||
.report h3{font:600 22px/1.4 var(--font-serif);margin:22px 0 4px}
|
||||
.report dl{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:14px 0}
|
||||
.report dt{color:var(--text-secondary)}
|
||||
.report dd{margin:0}
|
||||
.scope{border:1px solid var(--border-subtle);padding:10px 14px;margin-top:10px}
|
||||
.scope b{display:block;margin-bottom:2px}
|
||||
.report-foot{margin-top:18px;padding-top:8px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}
|
||||
|
||||
@media (max-width:1100px){
|
||||
.finding{grid-template-columns:1fr;gap:var(--sp-3)}
|
||||
.finding .cite:first-child::before{display:none}
|
||||
.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>
|
||||
Reference in New Issue
Block a user