commit
build / build-push (push) Successful in 50s

This commit is contained in:
wanghu
2026-10-10 15:42:52 +08:00
parent c738fd9339
commit 25147ec74e
181 changed files with 13549 additions and 0 deletions
+189
View File
@@ -0,0 +1,189 @@
<!DOCTYPE html>
<html lang="zh-CN" data-page-node-id="refVnJgepgGX7ooSSw1oNl">
<head data-page-node-id="CVAXxq86IWt6duxnFeTLA0">
<meta charset="UTF-8" data-page-node-id="79IZgCK1mSNOJYhwo4Fqxs">
<meta name="viewport" content="width=device-width, initial-scale=1" data-page-node-id="xfrrrb0wcshQP1YGHHoPEF">
<title>查询条件区(.search-wrap)视觉规范</title>
<style>
:root{
--brand:#577afb; --brand-hover:#3f63e8; --brand-bg:#eef3ff; --brand-ring:rgba(87,122,251,.12);
--text-main:#1c2333; --text-sub:#5b6478; --text-hint:#99a2b5;
--border:#e6ebf4; --border-hover:#c8d4ee; --panel-border:#e3eaf6; --divider:#ecedf3;
--page:#f5f7fa; --radius:8px; --radius-panel:10px;
}
*{box-sizing:border-box}
body{margin:0;padding:32px 28px 72px;background:var(--page);color:var(--text-main);
font:14px/1.65 "Microsoft YaHei","PingFang SC",-apple-system,Arial,sans-serif}
.wrap{max-width:1000px;margin:0 auto}
h1{font-size:22px;font-weight:600;margin:0 0 6px}
h2{font-size:16px;font-weight:600;margin:36px 0 14px;padding-left:11px;position:relative}
h2::before{content:"";position:absolute;left:0;top:4px;width:3px;height:16px;border-radius:2px;background:var(--brand)}
h3{font-size:14px;font-weight:600;margin:22px 0 10px;color:var(--text-sub)}
p.lede{margin:0 0 4px;color:var(--text-sub)}
p.note{color:var(--text-sub);font-size:13px;margin:8px 0}
code{font-family:Consolas,"Courier New",monospace;font-size:12.5px;background:#eef1f7;
color:#31405c;padding:1px 5px;border-radius:4px}
.card{background:#fff;border:1px solid var(--panel-border);border-radius:12px;padding:20px 22px;
box-shadow:0 2px 8px rgba(23,35,61,.05)}
.stage{background:#fff;border:1px solid var(--divider);border-radius:12px;padding:20px;margin-top:12px}
/* ---------- 真实组件复刻 ---------- */
.sw{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--panel-border);
border-radius:var(--radius-panel);height:56px;padding:10px 16px;box-shadow:0 2px 8px rgba(23,35,61,.05)}
.sw.form-only{gap:12px}
.sw .grp{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ctl{height:32px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;
display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--text-hint);
transition:border-color .18s,box-shadow .18s;white-space:nowrap}
.ctl.sel{width:150px;justify-content:space-between;padding-right:8px}
.dates{display:flex;align-items:center;gap:8px;flex:none}
.ctl.dt{width:140px;justify-content:space-between;padding-right:6px}
.tilde{color:var(--text-hint);font-size:13px;line-height:1;flex:none;user-select:none}
.ctl.kw{width:240px;padding-right:0;overflow:hidden}
.ctl.kw .ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctl.kw .mag{width:34px;text-align:center;color:var(--text-hint);font-size:16px;transition:color .18s;flex:none}
.ctl.hover{border-color:var(--border-hover)}
.ctl.focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring);color:var(--text-main)}
.ctl .val{color:var(--text-main)}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid #b9c1d1;margin-left:8px;flex:none}
.btn{height:32px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;
color:var(--text-sub);font-size:13px;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:all .18s}
.btn.hover{border-color:#bccbf5;background:var(--brand-bg);color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.reset{margin-left:auto}
.tip{font-size:13px;color:var(--text-hint);white-space:nowrap}
.cal{color:var(--text-hint);font-size:14px}
.hintline{margin:8px 0 0;font-size:12.5px;color:var(--text-hint)}
table{border-collapse:collapse;width:100%;margin-top:12px;font-size:13px;background:#fff;
border:1px solid var(--panel-border);border-radius:10px;overflow:hidden}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--divider);vertical-align:top}
th{background:#f7f9fc;font-weight:600;color:var(--text-sub);font-size:12.5px}
tr:last-child td{border-bottom:none}
td.k{white-space:nowrap}
.swatch{display:inline-block;width:22px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.08);
vertical-align:-2px;margin-right:6px}
ul{margin:8px 0;padding-left:20px;color:var(--text-sub);font-size:13px}
ul li{margin:5px 0}
.ok::before{content:"✓ ";color:#18a058;font-weight:700}
.no::before{content:"✕ ";color:#e5484d;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
</style>
</head>
<body data-page-node-id="DbU6KA9kcHZ5A6UxgKvMfI">
<div class="wrap" data-page-node-id="rW64T9TP4LiTFfDjrquu1W">
<h1 data-page-node-id="XBvI0zZupskdTOnaDMGbrU">查询条件区 <code data-page-node-id="GPkR2fhCaNFbYKyyBT3IgV">.search-wrap</code> 视觉规范</h1>
<p class="lede" data-page-node-id="hONYABIgTfq5bSVWxG6tEc">请假模块 6 个列表页统一筛选条 · 全局面板 · 纯 CSS 实现(<code data-page-node-id="cDJHHzzpxTv1CxLDRNBMH9">layout.css</code>)</p>
<p class="note" data-page-node-id="ZMLNaHf0zr4syQVPove17Z">适用范围:我的请假 / 全部请假 / 抄送列表 / 审批列表 / 时长日志 / 统计分析</p>
<h2 data-page-node-id="IPlypUJTJtHiuL0BSfBMwf">一、容器(面板)</h2>
<p class="note" data-page-node-id="1EbMzEPnq7o6Fk67TWD9Lo">原先是一条通栏灰带(<code data-page-node-id="Yn76yVNJxLYwTVHI3LfS9C">#f7f7f7</code>、无圆角、<code data-page-node-id="bkxIcOD4CaGvpjQZQdHLLE">52px</code>),与白色页面板对比生硬、边界模糊。改为<b data-page-node-id="DIfqVVtuXcLQSYD69QsEU2">白底卡片</b>:靠细边框分层,靠极淡投影浮起。高度 <code data-page-node-id="4AXM8wEzUIBHl6aE1D21OV">56px</code> 与 <code data-page-node-id="vnbcG1k0YR5p6oy2TbV2PC">padding 10px</code> 是为了让 32px 控件上下各留 10px 余量,同时消化 1px 边框与聚焦光圈,不顶破容器。</p>
<div class="stage" data-page-node-id="uPGFVFQyeBY4mjVX8ag1eJ">
<div class="sw" data-page-node-id="7uhW2SibiLEn5DmZnGXosA">
<div class="grp" data-page-node-id="vzF3ugJNZRHwrP8phMkFrZ">
<div class="dates" data-page-node-id="datesPair1">
<div class="ctl dt" data-page-node-id="dtStart"><span class="ph" data-page-node-id="dtStartPh">开始时间</span><span class="cal" data-page-node-id="dtStartCal">▦</span></div>
<span class="tilde" data-page-node-id="dtTilde">至</span>
<div class="ctl dt" data-page-node-id="dtEnd"><span class="ph" data-page-node-id="dtEndPh">结束时间</span><span class="cal" data-page-node-id="dtEndCal">▦</span></div>
</div>
<div class="ctl sel" data-page-node-id="lQtAxbP9AOugipVbdv3vNF"><span data-page-node-id="fKHg0mqzTN0DK9TayNC2pB">请假类型</span><i class="caret" data-page-node-id="9h7WgGW5aqLb8IbBh99NEH"></i></div>
</div>
<button class="btn" data-page-node-id="cUwL5UCpHwSPcKwN8urCGf">↻ 重置</button>
<div class="ctl kw" data-page-node-id="UGXtduSh70kS1eWwRMcsr9"><span class="ph" data-page-node-id="9rIBncREbH2Qd7l4uqKeSZ">搜索申请人 / 事由</span><span class="mag" data-page-node-id="Iy8Cbt71L0a0P8IM8MQhX9">⌕</span></div>
</div>
<p class="hintline" data-page-node-id="uxMlxiBdRxgqtLqHoCtGjn">默认态:起止两个日期框等宽等距、同一基线,中间以弱化的「至」连接;右侧「重置 + 搜索」固定靠右</p>
</div>
<table data-page-node-id="tG3RfjQHTjxdVkIDxtLxOU">
<thead data-page-node-id="fpuTHBgahdVVQX7ZBGzfB5"><tr data-page-node-id="ascah5lsrAHODWkDiOWFqA"><th data-page-node-id="DlcWpzxi06FzRSzOVzFn3f">属性</th><th data-page-node-id="hdYdehWo113jtXi72Y9Fju">取值</th><th data-page-node-id="HGKv0IYBDZcop9a861xxum">说明</th></tr></thead>
<tbody data-page-node-id="h2KaDn1y1VIBiC7UGCo1J2">
<tr data-page-node-id="QoeUBBda9u7X0u5GOZ0EmA"><td class="k" data-page-node-id="wEKMQDoufZI6TdbKKOjiO8">background</td><td class="k" data-page-node-id="KUbufawueFV0Gw3WLXROMg"><span class="swatch" style="background:#fff" data-page-node-id="iSFbVJroPdgy8qEjzCPtWd"></span><code data-page-node-id="s3I3p54StlNATFY7sZ0zco">#fff</code></td><td data-page-node-id="CCAY5U4t1xu63XivNSvSdZ">与页面底板同色,靠边框与投影分层</td></tr>
<tr data-page-node-id="7IJlrVTuA4RF87nb8LEFNz"><td class="k" data-page-node-id="b51sfORV9f0LSEI7x9l5WF">border</td><td class="k" data-page-node-id="FyoC9KkCq9QDrZ2Iql7t3s"><span class="swatch" style="background:#e3eaf6" data-page-node-id="aTaWC50R3fj6YUWGueV5gQ"></span><code data-page-node-id="gny0RckX6yXzlKPaWOfUwA">1px solid #e3eaf6</code></td><td data-page-node-id="fWTRVSSV8pe1Cverwgoan1">比表格分隔线 <code data-page-node-id="NAzRLSTz96anmLZnRcIipH">#ecedf3</code> 略深偏冷,保证纯白底上仍看得见</td></tr>
<tr data-page-node-id="GREKnCOi6eUEBOyHFCyud8"><td class="k" data-page-node-id="htDrVwze4Hc6D7z8a4hto6">border-radius</td><td class="k" data-page-node-id="iSBFyfD7Q9JG4FrYdnIU2k"><code data-page-node-id="Fp9T3x2su9EVAaYeCdYyaq">10px</code></td><td data-page-node-id="ja0OWDCMjH5crX0vH6vtVv">面板用 10,内部控件用 8,形成层次差</td></tr>
<tr data-page-node-id="qP0jFXthyXTMeXCSl9Y2Bk"><td class="k" data-page-node-id="Oag8DX4Ri8hcesumZOD0zv">height</td><td class="k" data-page-node-id="w9Gq4DbHD2bTHg4JZnTTcR"><code data-page-node-id="1hI0axPpv0cHo2800tsxSW">56px</code>(含 <code data-page-node-id="VUMFCbZDSYyq8Isi5VxQpm">box-sizing:border-box</code>)</td><td data-page-node-id="C167BYbQGLDmzOLTyMRZ4n">10 + 32 + 10 + 边框,与改造前 <code data-page-node-id="qRsVpTyCB4uIBliM0QUrmW">52px</code> 竖向占位接近,不影响表格高度预算</td></tr>
<tr data-page-node-id="OmFqTMtu2J2HBS2JPVY7YB"><td class="k" data-page-node-id="pzRWQ8CJqXXfoFPG7wmMDH">box-shadow</td><td class="k" data-page-node-id="WLhJMrOWOwm3ut20oySaiF"><code data-page-node-id="62N46BysqNdTCHByrCdL5W">0 2px 8px rgba(23,35,61,.05)</code></td><td data-page-node-id="dENDS9SjxxB9BiggU3SmEJ">极淡,只做「浮起」暗示,不做视觉噪音</td></tr>
<tr data-page-node-id="QRbdfJ4rBDglARB8zfsJlX"><td class="k" data-page-node-id="2Rh3v7SM3oIGPrdeuCkmIF">layout</td><td class="k" data-page-node-id="sr0aAhzjNQXPitBcHeYFQ5"><code data-page-node-id="sIy1r0ScmNYUEnMKNQi4jN">display:flex; align-items:center</code></td><td data-page-node-id="kCVWFEsoXraH9EtVVUoK23">弃用 <code data-page-node-id="ni7xh9bVcC3AePrK23YUsZ">.fl/.fr</code> 浮动:条件项增减(抄送页无日期、统计页无搜索框)都不会挤在一起</td></tr>
</tbody>
</table>
<h2 data-page-node-id="tN7BpuYOc4k9gKCWYUyXCd">二、控件</h2>
<p class="note" data-page-node-id="VgPvVEPO3zcbTiwZaDFIOx">输入框、下拉、起止日期统一 <b data-page-node-id="CTfmtDSgg7hku0s0AjBvv3">32px 高 / 8px 圆角</b>,边框比面板边框略深一档,让控件在面板内可辨。同一对起止日期之间只允许「宽度、高度、边框、圆角、字号、内边距」逐项相同。</p>
<div class="stage" data-page-node-id="vqsuvAaSEDm70q4kp9gb2D">
<h3 data-page-node-id="we8dUQQAaK2RsCoU7Cim2X">交互状态</h3>
<div class="grid2" data-page-node-id="BHfPWJtg7YAT8ZyHcVCwsx">
<div data-page-node-id="kY3AnQtm20foUDMPBziuZX">
<div class="ctl" data-page-node-id="xDIqRQlyUqx16F0piMqjVY">默认态 · 占位文字 #99a2b5</div>
<p class="hintline" data-page-node-id="t0iRCmRAhXWOsQFGWOqJ35">border <code data-page-node-id="gwII8Ms08EVkb7CD4zEzbz">#e6ebf4</code></p>
</div>
<div data-page-node-id="gm7VJ6nfqat1awqIuFzoJ4">
<div class="ctl hover" data-page-node-id="BpSsuitTxy2TK69AzUIRLS">悬停态 · 边框加深提示可交互</div>
<p class="hintline" data-page-node-id="7FXiJo28SywvPbg1kbDUT8">border <code data-page-node-id="obJ4kh5DULF2IardAXJFwV">#c8d4ee</code></p>
</div>
<div data-page-node-id="oPPYXCPMVQRXqzXd5ZADMV">
<div class="ctl focus" data-page-node-id="LkBYO3E7n9Z41ERoLV0ABv"><span class="val" data-page-node-id="t7JlI9R1GzXdJTnP1tAJfk">聚焦态 · 品牌色描边</span></div>
<p class="hintline" data-page-node-id="bNAKsF3axHXEvYT1ucOSSy">border <code data-page-node-id="0v8vhsPHswGqS1QEE54qtf">#577afb</code> + <code data-page-node-id="tpDrSi5v4wAs2831bXuuNj">0 0 0 3px rgba(87,122,251,.12)</code></p>
</div>
<div data-page-node-id="d4tU7pcrUA5WmICoPIG9xB">
<div class="ctl kw" data-page-node-id="RoWvDBPMdj7oGoEiy0Rpg4"><span class="val" data-page-node-id="shQC4K4lKzdJUBaYMuyNE9">已输入内容</span><span class="mag" style="color:var(--brand)" data-page-node-id="VCHBO1FZhxRma8pj0P44iG">⌕</span><span style="width:22px;text-align:center;color:#b9c1d1" data-page-node-id="Bc6B6IEbM0qHcFNNeRLCI4">✕</span></div>
<p class="hintline" data-page-node-id="US54C6xCYvIKDykPdispN1">悬停整框时放大镜转品牌蓝;清空键位于其左侧,两个图标不叠在同一槽位</p>
</div>
</div>
</div>
<table data-page-node-id="fdYpbbuKVh1HSHLWCJMPr1">
<thead data-page-node-id="iX0QXUEgc713psvXTByFtq"><tr data-page-node-id="DcybrruoNoIrdIcLVfhxwr"><th data-page-node-id="4ojzKLjg0qDtFitCBTp5UA">控件</th><th data-page-node-id="NXsaQxFChbhCpOCvxZr8P2">宽 / 高</th><th data-page-node-id="1pEdK1Nh92gepb6Lg9JsGc">关键样式</th></tr></thead>
<tbody data-page-node-id="xtDxu6E8ONtrdSogSeFQjo">
<tr data-page-node-id="ckuGGk80I979kHjubl5vus"><td class="k" data-page-node-id="zXN5Co1t865AF9XbULrljr">起止日期对 <code data-page-node-id="jurMf0m45zZBAE81EIafRB">.search-wrap_dates</code></td><td class="k" data-page-node-id="aeFd8JgEeYlRkIVjVrzpm7">140 × 32(各)</td><td data-page-node-id="a1niDhil4ZLNI8ruDbxSfD"><code data-page-node-id="CS4A681EeynXQQwcTxvZQO">type="date" transfer</code>,两个独立输入框;容器为 <code data-page-node-id="dts1">display:flex; gap:8px</code>,保证等宽、等高、同一基线;中间 <code data-page-node-id="dts2">.search-wrap_tilde</code>(「至」)仅作语义连接</td></tr>
<tr data-page-node-id="dzzVQtgO9rYRNiunYSOIKK"><td class="k" data-page-node-id="jX4yLwQ81B699vGsQWBNnw">类型下拉 <code data-page-node-id="D4lFDrXSZRw21JGjTctHNP">.search-wrap_sel</code></td><td class="k" data-page-node-id="lkDd5DOzy1XRE5W8dHom1j">150 × 32</td><td data-page-node-id="g4wFN52eDCnodEMeKlpjdh">选中值与占位文字左右内边距 10px,行高 30px 视觉居中</td></tr>
<tr data-page-node-id="GRiNJGWHQYEFtkPte4ZwsX"><td class="k" data-page-node-id="v7jagjj1HIBM5oEdJQt1tV">关键词 <code data-page-node-id="oQmswz3zQvSq4ChR6jZYH0">.search-wrap_kw</code></td><td class="k" data-page-node-id="43LP4mEOBzrduWOonFW9N3">240 × 32</td><td data-page-node-id="Wr0beTVBEo4KwR9WMkMwtB"><code data-page-node-id="vjZ7l6MNXxOziZarU8ZTAW">search</code> 输入框;右内边距 40px 给放大镜让位</td></tr>
<tr data-page-node-id="SESuTlrknBIdUIONWrZ3DZ"><td class="k" data-page-node-id="YIkZYaVc3LA23nTIaxHImK">重置 <code data-page-node-id="GCjPasKYyawgDKOHnpPhE0">.search-wrap_reset</code></td><td class="k" data-page-node-id="FsgMCqu15fX04EIPShBCSG">自动 × 32</td><td data-page-node-id="VQe5JJ3AgmFJUA9Eflv3uI">幽灵按钮:白底 + 灰字,hover 才染品牌色,避免与查询按钮抢注意力</td></tr>
<tr data-page-node-id="i8u7uGTax2ULeF6LApAVYn"><td class="k" data-page-node-id="ADzFaW4ZOMcxHayHVE7DFB">查询(统计页)</td><td class="k" data-page-node-id="XOIQoUHhFHnGkfisxEE43P">自动 × 32</td><td data-page-node-id="nEXjPdOMT3JmYCCCdfUICc">沿用 <code data-page-node-id="9CgJHDFmFpezJCb4bBT6vU">type="primary"</code> 品牌蓝实心,全页仅此一处主按钮</td></tr>
</tbody>
</table>
<h2 data-page-node-id="PZSeLthAli8jssX38NAkjs">三、色板(与「我要请假」页同源)</h2>
<p class="note" data-page-node-id="GlOD7qtfB0GikmTLGJrryW">不引入第二套品牌色。所有取值复用 ApplyLeave 已有 token,保证跨页一致。</p>
<table data-page-node-id="Omhc5xvDwCdeeHzD6tVH2E">
<thead data-page-node-id="jYpqQDFNYzK1ZXHt8OXpG2"><tr data-page-node-id="SABlBVHK15IiJnvsp9FE5H"><th data-page-node-id="BsMHcO7vs5TyGdXZ7xHU55">用途</th><th data-page-node-id="yzUej8Ww4KLDKzn3RWmnKf">色值</th><th data-page-node-id="esUpjczOtzl3HEswAt27dD">Token</th></tr></thead>
<tbody data-page-node-id="BZpsl85mrd5HhjAhXBHCjm">
<tr data-page-node-id="jFplq0ZreBVbnWnFdWpvzf"><td class="k" data-page-node-id="xgPjcs6bYWfhx6v2WjkjUG">品牌主色</td><td class="k" data-page-node-id="LvdOiq7YOE5hBd5eK9Hnzq"><span class="swatch" style="background:#577afb" data-page-node-id="LywILAEbYRdhMwICQrTpsX"></span><code data-page-node-id="kpzFkB1qPzHercu3VEWuAk">#577afb</code></td><td class="k" data-page-node-id="KIPRGBT7YBgFkzONgDXQgk">$primary</td></tr>
<tr data-page-node-id="uZlgMOcPZLYXR8NvBtwDlW"><td class="k" data-page-node-id="ZbBeBCoS7hyopCRi04iVJQ">浅主色底</td><td class="k" data-page-node-id="WJ9nV2PeAoOTfcyxjhqEPt"><span class="swatch" style="background:#eef3ff" data-page-node-id="8tXIvaOZZZ6sjQ2316Zl47"></span><code data-page-node-id="TvGOsZ5PqXHXvuaQ3EigUQ">#eef3ff</code></td><td class="k" data-page-node-id="sFK3vjbPxLpv5YGwm09sDx">$primary-bg</td></tr>
<tr data-page-node-id="LagiXmsxYXua7IYHQhKdhF"><td class="k" data-page-node-id="alRRC7PePsJVUporRHh0bD">主文字</td><td class="k" data-page-node-id="XhGbNVau1JGxZYv6L54Fdm"><span class="swatch" style="background:#1c2333" data-page-node-id="KmlBLptF06Z6hOgkUgWPMe"></span><code data-page-node-id="Kzu8PjhN8lnpjB1mymxMDB">#1c2333</code></td><td class="k" data-page-node-id="BeyOno2BPhOwluzGRjCZQJ">$text-main</td></tr>
<tr data-page-node-id="iLyAGeZgMUirhZxUZcikNA"><td class="k" data-page-node-id="o6ff0IWdvIigtnKTqjdVIN">次文字</td><td class="k" data-page-node-id="FeXK1nHGTnCkTAl2kteTe3"><span class="swatch" style="background:#5b6478" data-page-node-id="2gtM0rIGhtBhfBqpoKJKm7"></span><code data-page-node-id="xUmfBbsDANtMQctONHON3Y">#5b6478</code></td><td class="k" data-page-node-id="FeDI9cpFZaQYkUUqTLLomf">$text-sub</td></tr>
<tr data-page-node-id="XaN85L6cGGg7zVkwaO4B2o"><td class="k" data-page-node-id="0sZyt0rgBvsZXG19nKP17T">提示 / 占位</td><td class="k" data-page-node-id="PBcV0Bi2hySCqD1y4mHzhi"><span class="swatch" style="background:#99a2b5" data-page-node-id="HBz1olJw1h53kuE9d7HKnM"></span><code data-page-node-id="kyuPJAtngFX8ZDupmIrcD7">#99a2b5</code></td><td class="k" data-page-node-id="UnXH0vZRNU4iZnlHyrGKH8">$text-hint</td></tr>
<tr data-page-node-id="18te0UZwqUBEH7eXzTx3xv"><td class="k" data-page-node-id="uF086wMjQTZCNFWQIhoJDf">控件边框</td><td class="k" data-page-node-id="fKR3N6FI1kQoOoFiPzL7HY"><span class="swatch" style="background:#e6ebf4" data-page-node-id="jGtNVoNvPjsUM9nNpNOhFR"></span><code data-page-node-id="894kOUWEF92GRE9DVyKmNn">#e6ebf4</code></td><td class="k" data-page-node-id="Hs2ErCvJcsL8vbPQZ2TjPo">$border</td></tr>
<tr data-page-node-id="ayQAFnpkLws9R0BTN7GB0D"><td class="k" data-page-node-id="Of2ra8ljr5dXMaHz5rurM3">面板边框</td><td class="k" data-page-node-id="pzwXEGGT2gJ4tkdl7FF6Hp"><span class="swatch" style="background:#e3eaf6" data-page-node-id="KdhHhXEIYK0ZShgBkd1C7R"></span><code data-page-node-id="NLB2kuodccqIjGgEnYYNhe">#e3eaf6</code></td><td class="k" data-page-node-id="n4rHgUEXYxIsKuL7bKo7I9">—</td></tr>
</tbody>
</table>
<h2 data-page-node-id="KvlGBmLwf3q6MKa3IxTiEY">四、无障碍与可用性</h2>
<ul data-page-node-id="JFMuZFMsHXI1WtNHzPlPTf">
<li class="ok" data-page-node-id="lBDmUg2zds2YtDCnuYvaOp">所有可交互控件带 <code data-page-node-id="5mPwrHQ3DBqwkwjFs3S7bh">:focus-visible</code> 外描边(<code data-page-node-id="fAFrcsfRsClGzSggj7XHKQ">2px #577afb</code>),键盘 Tab 可完整走通「日期 → 类型 → 重置 → 搜索」。</li>
<li class="ok" data-page-node-id="IA8EGii0NGaioFWIN7DaTZ">聚焦态用「描边 + 3px 柔光圈」双重提示,不依赖单一颜色差异。</li>
<li class="ok" data-page-node-id="ooZ4ilRHSDV3DhqtBdFa7u">控件高度 32px;表单页输入框沿用 32px,跨页命中区域一致。</li>
<li class="ok" data-page-node-id="vSLBkXGIukoX5jGz2FC3i9">占位文字统一 <code data-page-node-id="5Q53VBBac6wWZAHtB9nEQg">#99a2b5</code>,与其上白底对比度约 2.9:1 —— 仅用于占位(WCAG 对占位文字不作 4.5:1 强制),实际输入值走 <code data-page-node-id="zF0Z2UdHvPOgCMWttFVcyU">#1c2333</code>(≈15:1)。</li>
<li class="ok" data-page-node-id="JF61H7vs5WXIIaAFfALeiF">「重置」清空起止时间 + 关键词 + 状态页签并回到第 1 页,行为可预期。</li>
<li class="ok" data-page-node-id="dtsAcc1">起止两个日期框:宽度差 &lt; 0.5px、高度差 &lt; 0.5px、顶边与垂直中心线偏差 &lt; 0.5px,且边框/圆角/字号/内边距逐项一致 —— 已纳入自动化断言。</li>
<li class="ok" data-page-node-id="dtsAcc2">两个日期框均为可编辑态,点击输入框本体即弹出月历(无需只点右侧图标),两框交互完全一致。</li>
</ul>
<h2 data-page-node-id="3HJ08rehnOnSEbse9GKrUn">五、实现要点(易错处)</h2>
<ul data-page-node-id="4PuBZIUS3mLGEmE2ANvjSK">
<li class="no" data-page-node-id="Gx72dYzZGUw9HBWWEKLh7u">iView 的 <code data-page-node-id="azAUwrONE05RIp1Qvwn9qG">search</code> 输入框放大镜类名是 <code data-page-node-id="JGBezSukH1uowmPKnIEOqa">.ivu-input-search-icon</code>(绝对定位),<b data-page-node-id="2UAo766Cul5Mwslo9QMEHP">没有</b> <code data-page-node-id="l7iVcajhxV6dJuM1cAHkjN">.ivu-input-suffix</code> 包裹层;按 suffix 写样式会全部失效。</li>
<li class="no" data-page-node-id="oSaQCdSI1q2xfqFwZ5FLWV">日期面板的根类名是 <code data-page-node-id="HLufqTlSLAPXWTol7qaDik">.ivu-picker-panel-body-wrapper</code>,不是 <code data-page-node-id="I9EGDshkHcX3svaXdAbksO">.ivu-picker-panel</code>;且 <code data-page-node-id="dtTrans">transfer</code> 会把所有 picker 的面板都挂到 body,统计可见面板前必须先按 <code data-page-node-id="dtOffPar">offsetParent !== null</code> 过滤。</li>
<li class="no" data-page-node-id="9pZxdEQrVEz39xi1B4XwT7"><code data-page-node-id="Prz1tPH0UovAfl1AUmllKB">:editable="false"</code> 会让内部 input 变 readonly,<b data-page-node-id="RbnqMod3IXv6WHZEFKYNFF">点输入框本体会失效</b>(只有日历图标可用)。因此起止日期框保持默认可编辑,保证「点框即弹出」的一致体验。</li>
<li class="ok" data-page-node-id="DkPAGzfOgk64BZJY0gwzfX">全部新规则以 <code data-page-node-id="w4qcyGyTSfTJYDQIMcb3xH">.search-wrap</code> 为前缀 → 作用域隔离;实测仅 6 个列表页使用该容器,其它页面零影响。</li>
<li class="no" data-page-node-id="dtSrvNote">业务 dev 端口(如 8081)的 vite 对<b data-page-node-id="dtSrvNote2">任何浏览器导航</b>都返回 <code data-page-node-id="dtSrvNote3">index.html</code>(curl 用 <code data-page-node-id="dtSrvNote4">Accept: */*</code> 才能拿到真实文件),自定义预览页在浏览器里会直接启动真实 SPA 并被 CAS 跳去 SSO。故「渲染验收」在独立预览服务上做,「该端口代码是否已生效」用直接抓取模块源码确认。</li>
<li class="no" data-page-node-id="9pZxdEQrVEz39xi1B4XwT7"><code data-page-node-id="Prz1tPH0UovAfl1AUmllKB">:editable="false"</code> 会让内部 input 变 readonly,<b data-page-node-id="RbnqMod3IXv6WHZEFKYNFF">点输入框本体会失效</b>(只有日历图标可用)。因此起止日期框保持默认可编辑,保证「点框即弹出」的一致体验。</li>
<li class="ok" data-page-node-id="DkPAGzfOgk64BZJY0gwzfX">全部新规则以 <code data-page-node-id="w4qcyGyTSfTJYDQIMcb3xH">.search-wrap</code> 为前缀 → 作用域隔离;实测仅 6 个列表页使用该容器,其它页面零影响。</li>
</ul>
</div>
</body>
</html>