查询条件区 `.search-wrap` 视觉规范

请假模块 6 个列表页统一筛选条 · 全局面板 · 纯 CSS 实现（layout.css）

适用范围：我的请假 / 全部请假 / 抄送列表 / 审批列表 / 时长日志 / 统计分析

一、容器（面板）

原先是一条通栏灰带（#f7f7f7、无圆角、52px），与白色页面板对比生硬、边界模糊。改为白底卡片：靠细边框分层，靠极淡投影浮起。高度 56px 与 padding 10px 是为了让 32px 控件上下各留 10px 余量，同时消化 1px 边框与聚焦光圈，不顶破容器。

开始时间▦

至

结束时间▦

请假类型

搜索申请人 / 事由⌕

默认态：起止两个日期框等宽等距、同一基线，中间以弱化的「至」连接；右侧「重置 + 搜索」固定靠右

属性	取值	说明
background	`#fff`	与页面底板同色，靠边框与投影分层
border	`1px solid #e3eaf6`	比表格分隔线 `#ecedf3` 略深偏冷，保证纯白底上仍看得见
border-radius	`10px`	面板用 10，内部控件用 8，形成层次差
height	`56px`（含 `box-sizing:border-box`）	10 + 32 + 10 + 边框，与改造前 `52px` 竖向占位接近，不影响表格高度预算
box-shadow	`0 2px 8px rgba(23,35,61,.05)`	极淡，只做「浮起」暗示，不做视觉噪音
layout	`display:flex; align-items:center`	弃用 `.fl/.fr` 浮动：条件项增减（抄送页无日期、统计页无搜索框）都不会挤在一起

输入框、下拉、起止日期统一 32px 高 / 8px 圆角，边框比面板边框略深一档，让控件在面板内可辨。同一对起止日期之间只允许「宽度、高度、边框、圆角、字号、内边距」逐项相同。

默认态 · 占位文字 #99a2b5

border #e6ebf4

悬停态 · 边框加深提示可交互

border #c8d4ee

聚焦态 · 品牌色描边

border #577afb + 0 0 0 3px rgba(87,122,251,.12)

已输入内容⌕✕

悬停整框时放大镜转品牌蓝；清空键位于其左侧，两个图标不叠在同一槽位

控件	宽 / 高	关键样式
起止日期对 `.search-wrap_dates`	140 × 32（各）	`type="date" transfer`，两个独立输入框；容器为 `display:flex; gap:8px`，保证等宽、等高、同一基线；中间 `.search-wrap_tilde`（「至」）仅作语义连接
类型下拉 `.search-wrap_sel`	150 × 32	选中值与占位文字左右内边距 10px，行高 30px 视觉居中
关键词 `.search-wrap_kw`	240 × 32	`search` 输入框；右内边距 40px 给放大镜让位
重置 `.search-wrap_reset`	自动 × 32	幽灵按钮：白底 + 灰字，hover 才染品牌色，避免与查询按钮抢注意力
查询（统计页）	自动 × 32	沿用 `type="primary"` 品牌蓝实心，全页仅此一处主按钮

不引入第二套品牌色。所有取值复用 ApplyLeave 已有 token，保证跨页一致。

所有可交互控件带 :focus-visible 外描边（2px #577afb），键盘 Tab 可完整走通「日期 → 类型 → 重置 → 搜索」。
聚焦态用「描边 + 3px 柔光圈」双重提示，不依赖单一颜色差异。
控件高度 32px；表单页输入框沿用 32px，跨页命中区域一致。
占位文字统一 #99a2b5，与其上白底对比度约 2.9:1 —— 仅用于占位（WCAG 对占位文字不作 4.5:1 强制），实际输入值走 #1c2333（≈15:1）。
「重置」清空起止时间 + 关键词 + 状态页签并回到第 1 页，行为可预期。
起止两个日期框：宽度差 < 0.5px、高度差 < 0.5px、顶边与垂直中心线偏差 < 0.5px，且边框/圆角/字号/内边距逐项一致 —— 已纳入自动化断言。
两个日期框均为可编辑态，点击输入框本体即弹出月历（无需只点右侧图标），两框交互完全一致。

iView 的 search 输入框放大镜类名是 .ivu-input-search-icon（绝对定位），没有 .ivu-input-suffix 包裹层；按 suffix 写样式会全部失效。
日期面板的根类名是 .ivu-picker-panel-body-wrapper，不是 .ivu-picker-panel；且 transfer 会把所有 picker 的面板都挂到 body，统计可见面板前必须先按 offsetParent !== null 过滤。
:editable="false" 会让内部 input 变 readonly，点输入框本体会失效（只有日历图标可用）。因此起止日期框保持默认可编辑，保证「点框即弹出」的一致体验。
全部新规则以 .search-wrap 为前缀 → 作用域隔离；实测仅 6 个列表页使用该容器，其它页面零影响。
业务 dev 端口（如 8081）的 vite 对任何浏览器导航都返回 index.html（curl 用 Accept: */* 才能拿到真实文件），自定义预览页在浏览器里会直接启动真实 SPA 并被 CAS 跳去 SSO。故「渲染验收」在独立预览服务上做，「该端口代码是否已生效」用直接抓取模块源码确认。
:editable="false" 会让内部 input 变 readonly，点输入框本体会失效（只有日历图标可用）。因此起止日期框保持默认可编辑，保证「点框即弹出」的一致体验。
全部新规则以 .search-wrap 为前缀 → 作用域隔离；实测仅 6 个列表页使用该容器，其它页面零影响。