Files
work-leave-service/docs/search-wrap-design-spec.html
wanghu 25147ec74e
build / build-push (push) Successful in 50s
commit
2026-10-10 15:42:52 +08:00

190 lines
24 KiB
HTML
Raw Permalink 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" 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>