@agile-team/wl-skills-ui 1.9.4 → 1.9.5

package/CHANGELOG.md

@@ -4,6 +4,19 @@ All notable changes to **@agile-team/wl-skills-ui** will be documented in this f
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [1.9.5] - 2026-07-23
+
+### Fixed
+
+- 兼容 Element Plus 2.2 的数字输入框 DOM，修复输入后边框消失、焦点双边框、上下控制器压盖内容等问题。
+- 重构 `jh-drag-row` 横向拖拽手柄为稳定的三点胶囊样式，并恢复上下分栏边界的精细层次。
+- 修正 AG Grid 空数据覆盖层的定位上下文，使“没有可显示的行”在实际可视表格区域内水平、垂直居中。
+- 完善 BaseToolbar 多按钮语义色、禁用态、图标间距以及 BaseQuery 展开/收起按钮视觉。
+
+### Changed
+
+- 列表页规范统一为“查询区 → 工具栏 → 列表标题 → 表格 → 分页器”，工具栏独占一行并左对齐。
+
 ## [1.9.4] - 2026-07-22
 
 ### Fixed

package/README.md

@@ -200,7 +200,7 @@ yarn add @agile-team/wl-skills-ui
 |---|---|---|
 | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版；EP 2.3.0 起引入 `.el-input__wrapper`，与 jh-ui 3.x 不兼容 |
 | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹 + `.has-colon` 冒号注入（wl-skills-ui 已统一屏蔽表单冒号） |
-| `@agile-team/wl-skills-ui` | `^1.9.4` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
+| `@agile-team/wl-skills-ui` | `^1.9.5` | 已对齐上述组合的 DOM 假设、客户主题锁、圆角契约与定制页样式边界 |
 
 三种识别方式，任选其一：
 
@@ -214,7 +214,7 @@ yarn add @agile-team/wl-skills-ui
 
 ## 版本亮点
 
-当前 v1.9.4：
+当前 v1.9.5：
 
 - **Vite 4 运行时兼容**：浏览器 ESM 产物不再暴露可被开发转换误替换的 Node 环境变量成员链，预构建与直接加载均保持合法语法。
 - **登录页精准退出**：内置识别 `.lp-root` 与 `.session-login`，其内部表单、按钮、焦点和校验态保留登录页自身设计；业务页面仍由包高权重统一管控。

package/docs/compat-matrix.md

@@ -11,7 +11,7 @@
 | `element-plus` | **`2.2.6-prod.3`** | 集团 jh- 定制版，搭配 `@jhlc/jh-ui` 使用，DOM 仍为 `.el-input > .el-input__inner` 直挂结构（**EP 2.3.0 起才引入 `.el-input__wrapper`**） |
 | `@jhlc/jh-ui` | **`3.1.0`** | SCSS 皮肤包，`.com-text` label 包裹、`.has-colon ::after` 冒号注入、`.el-form-item--default { margin-bottom: 24px }` 等强约束 |
 | `@jhlc/common-core` | `3.1.0` 或 `3.1.0-prod.x` | 基础 util/types，`@jhlc/jh-ui` 间接依赖 |
-| `@agile-team/wl-skills-ui` | `^1.9.4` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、定制页样式边界与 Vite 4 开发转换 |
+| `@agile-team/wl-skills-ui` | `^1.9.5` | 已对齐 jh-ui 3.1.0 + EP 2.2.6-prod.3 的 DOM 假设、客户主题锁、6px 基础圆角、定制页样式边界与 Vite 4 开发转换 |
 
 ## 项目集群当前实测
 
@@ -35,7 +35,7 @@
 
 ## 适配建议
 
-- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.4 三方对齐。
+- 集团内项目：**统一锚定 `element-plus@2.2.6-prod.3` + `@jhlc/jh-ui@3.1.0`**，与 wl-skills-ui v1.9.5 三方对齐。
 - 升级 `element-plus` 到 2.3+ 前，必须同步升级 `@jhlc/jh-ui` 到对应支持版本，否则 `.com-text` / `.el-input__inner` DOM 与 EP `__wrapper` 体系不兼容。
 - 新项目接入：见 README 「快速接入」章节，默认会按本表声明 peerDependency 范围。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agile-team/wl-skills-ui",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "企业级 UI 风格对齐框架 — Vue + Element Plus 项目通用化妆/原生双模式（tokens / element / vendors / layouts / runtime / scanner / fixer / skills）",
   "type": "module",
   "main": "./es/index.js",

package/skills/element/el-form/SKILL.md

@@ -59,6 +59,15 @@ el-date-picker 默认宽度不会自动撑满 el-form-item，必须显式设置
 
 ---
 
+## 表单列数与输入宽度 【中危】
+
+- 全宽业务表单默认 4 列，严禁使用 5～8 列把输入框压缩到无法阅读或填写。
+- 单个控件可输入区不足 160px 时降为 3 列；长标签、带单位字段按同样标准判断。
+- 字段较多时使用分区、Tab 或展开/收起，首屏建议展示 4～6 行。
+- 不依赖步进操作的数字输入传入 `controls=false`，不得用 CSS 强行覆盖出第二层焦点边框。
+
+---
+
 ## 完整标准表单示例
 
 ```html

package/skills/layouts/list-page/SKILL.md

@@ -9,13 +9,14 @@ applyTo: "**/*.vue"
 
 ## 适用场景
 
-页面结构为：**搜索栏 → 工具栏（增删按钮） → 数据表格 → 分页器** 的经典 CRUD 列表页。
+页面结构为：**搜索栏 → 工具栏（增删按钮） → 列表标题 → 数据表格 → 分页器** 的经典 CRUD 列表页。
 
 ---
 
 ## Detect — 识别列表页
 
 ### 方式一：结构特征识别
+
 ```
 检测条件（满足任意 2 项即判定为列表页）：
 ✓ 根节点或第一子节点含 class="list-page" / "page-wrapper" / "table-page"
@@ -26,6 +27,7 @@ applyTo: "**/*.vue"
 ```
 
 ### 方式二：命令触发
+
 ```
 用 wl-ui 的 layouts/list-page skill 检查这个文件
 → AI 加载本 SKILL.md，对当前文件做 Detect → Diagnose → Repair
@@ -37,13 +39,15 @@ applyTo: "**/*.vue"
 
 ### 结构层问题
 
-| 问题 | 规则 | 说明 |
-|---|---|---|
-| 根节点缺少 `.list-page` | L-001 | 应为 `<div class="list-page">` |
-| 搜索区未用 `.list-page__query` | L-002 | 内部结构应遵循 BEM |
-| 工具栏未用 `.list-page__toolbar` | L-003 | 按钮组应在 `.list-page__toolbar` 内 |
-| 表格区未用 `.list-page__table` | L-004 | 表格容器应有独立 class |
-| 分页区未用 `.list-page__pagination` | L-005 | 分页器位置需在 **内容区**，不得在 dialog footer |
+| 问题                                | 规则  | 说明                                             |
+| ----------------------------------- | ----- | ------------------------------------------------ |
+| 根节点缺少 `.list-page`             | L-001 | 应为 `<div class="list-page">`                   |
+| 搜索区未用 `.list-page__query`      | L-002 | 内部结构应遵循 BEM                               |
+| 工具栏未用 `.list-page__toolbar`    | L-003 | 按钮组应在 `.list-page__toolbar` 内              |
+| 工具栏与标题同排或位于标题下方      | L-006 | 工具栏应在标题上、表格上独占一行并左对齐         |
+| 分页列表标题重复显示“共 N 条”       | L-007 | 分页器已有总数，仅非分页短列表可在标题旁显示条数 |
+| 表格区未用 `.list-page__table`      | L-004 | 表格容器应有独立 class                           |
+| 分页区未用 `.list-page__pagination` | L-005 | 分页器位置需在 **内容区**，不得在 dialog footer  |
 
 ### 内容层问题（复用 scanner 规则）
 
@@ -66,12 +70,20 @@ applyTo: "**/*.vue"
       <BaseQuery :params="searchParams" @search="reload" @reset="reset" />
     </div>
 
-    <!-- 工具栏 -->
+    <!-- 工具栏：标题上方、表格上方、左对齐，独占一行 -->
     <div class="list-page__toolbar">
-      <el-button type="primary" icon="Plus" @click="modal.add()">新增</el-button>
+      <el-button type="primary" icon="Plus" @click="modal.add()"
+        >新增</el-button
+      >
+      <el-button type="warning" plain icon="Edit" @click="modal.edit()"
+        >修改</el-button
+      >
       <el-button icon="Download" @click="handleExport">导出</el-button>
     </div>
 
+    <!-- 列表标题：位于按钮组下方，不与按钮同排 -->
+    <div class="list-page__title">[列表标题]</div>
+
     <!-- 表格 -->
     <div class="list-page__table">
       <BaseTable :hook="page" empty-text="暂无数据" :columns="columns" />
@@ -85,7 +97,7 @@ applyTo: "**/*.vue"
 </template>
 ```
 
-### SCSS 对应（由 styles/layouts/_list-page.scss 提供）
+### SCSS 对应（由 styles/layouts/\_list-page.scss 提供）
 
 ```scss
 // 业务侧无需手写，全局 @use 后自动生效
@@ -106,6 +118,6 @@ applyTo: "**/*.vue"
 
 ## 关联资源
 
-- 样式实现：[styles/layouts/_list-page.scss](../../../styles/layouts/_list-page.scss)
+- 样式实现：[styles/layouts/\_list-page.scss](../../../styles/layouts/_list-page.scss)
 - 代码模板：[templates/list-page/TPL-LIST.md](../../../templates/list-page/TPL-LIST.md)
 - 相关 skills：[vendors/base-table](../../vendors/base-table/SKILL.md) | [vendors/jh-components](../../vendors/jh-components/SKILL.md)

package/skills/vendors/jh-components/SKILL.md

@@ -13,16 +13,16 @@ applyTo: "**/*.vue"
 
 所有 `<jh-*>` 标签均归入本 Skill。下表是当前项目集群的代表性基线，不是完整清单。
 
-| 类型 | 子组件 | 标签 | 关键类名 | 治理方式 |
-|---|---|---|---|---|
-| SCSS 皮肤适配 | `@jhlc/jh-ui` | — | `.com-text` / `.text-line-2` / `.com-input` / `.com-picker` / `.com-reference-picker` / `.com-textarea` / `.com-input-tip` | `styles/vendors/_jh-ui.scss` |
-| 专项样式覆盖 | jh-tree | `<jh-tree>` | `.jh-tree` / `.base-tree` | `styles/vendors/_jh-tree.scss` |
-| 专项样式覆盖 | jh-pagination | `<jh-pagination>` | `.jh-pagination` | `styles/vendors/_jh-pagination.scss` |
-| 专项样式覆盖 | jh-drag-col | `<jh-drag-col>` | `.drag-col-container` / `.drag-left` / `.slider-col` | `styles/vendors/_jh-drag-col.scss` |
-| 专项样式覆盖 | jh-drag-row | `<jh-drag-row>` | `.drager_row` / `.drager_top` / `.drager_bottom` / `.slider_row` | `styles/vendors/_jh-drag-row.scss` |
-| 通用规则治理 | jh-table | `<jh-table>` | `.jh-table` | 继承 L0 tokens + L1 table 视觉原则 |
-| 通用规则治理 | jh-form | `<jh-form>` | `.jh-form` | 继承 L0 tokens + L1 form 视觉原则 |
-| 通用规则治理 | 其它 jh-* | `<jh-*>` | `.jh-*` / 组件内部 Element Plus 类 | 先按 jh 通用规则治理，复杂结构再升级专项样式 |
+| 类型          | 子组件        | 标签              | 关键类名                                                                                                                   | 治理方式                                     |
+| ------------- | ------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
+| SCSS 皮肤适配 | `@jhlc/jh-ui` | —                 | `.com-text` / `.text-line-2` / `.com-input` / `.com-picker` / `.com-reference-picker` / `.com-textarea` / `.com-input-tip` | `styles/vendors/_jh-ui.scss`                 |
+| 专项样式覆盖  | jh-tree       | `<jh-tree>`       | `.jh-tree` / `.base-tree`                                                                                                  | `styles/vendors/_jh-tree.scss`               |
+| 专项样式覆盖  | jh-pagination | `<jh-pagination>` | `.jh-pagination`                                                                                                           | `styles/vendors/_jh-pagination.scss`         |
+| 专项样式覆盖  | jh-drag-col   | `<jh-drag-col>`   | `.drag-col-container` / `.drag-left` / `.slider-col`                                                                       | `styles/vendors/_jh-drag-col.scss`           |
+| 专项样式覆盖  | jh-drag-row   | `<jh-drag-row>`   | `.drager_row` / `.drager_top` / `.drager_bottom` / `.slider_row`                                                           | `styles/vendors/_jh-drag-row.scss`           |
+| 通用规则治理  | jh-table      | `<jh-table>`      | `.jh-table`                                                                                                                | 继承 L0 tokens + L1 table 视觉原则           |
+| 通用规则治理  | jh-form       | `<jh-form>`       | `.jh-form`                                                                                                                 | 继承 L0 tokens + L1 form 视觉原则            |
+| 通用规则治理  | 其它 jh-\*    | `<jh-*>`          | `.jh-*` / 组件内部 Element Plus 类                                                                                         | 先按 jh 通用规则治理，复杂结构再升级专项样式 |
 
 ### `@jhlc/jh-ui` SCSS 皮肤包识别
 
@@ -47,7 +47,7 @@ applyTo: "**/*.vue"
 
 - ❌ 自行给 `.jh-tree` 写颜色覆盖（应用全局 `vendors/_jh-tree.scss`）
 - ❌ jh-drag-col 内自定义 padding 破坏拖拽条对齐
-- ❌ jh-drag-row 上下分栏缺 `.drager_row { height:100% }` 高度链（拖拽失效），或手柄未走统一 `.slider_row` 细线风格
+- ❌ jh-drag-row 上下分栏缺 `.drager_row { height:100% }` 高度链（拖拽失效），或页面自行重画 `.slider_row`；手柄必须统一使用 `_jh-drag-row.scss` 的细分隔线 + 三点胶囊
 - ❌ jh-pagination 未对齐到右侧（同 R011）
 - ❌ jh-form 内不用 `size="small"` 控件（同 R006）
 - ❌ 发现新的复杂 `<jh-*>` 组件后只在页面局部写补丁，而不沉淀到 L2 Project Vendors
@@ -55,10 +55,12 @@ applyTo: "**/*.vue"
 ## Repair
 
 ### A 类
+
 - 控件 size 缺失 → 补 `size="small"`
 - 表单内日期选择器无宽度 → `style="width:100%"`（R007）
 
 ### B 类
+
 - 直接全局覆盖 `.jh-*` → 改为引入 `wl-skills-ui/styles` 由 vendors 层处理
 - 新的复杂 `<jh-*>` 组件 → 先判断是否只是 Element Plus 薄封装；若不是，应新增 `styles/vendors/_jh-xxx.scss` 和对应 Skill/检测规则
 

package/standards/ui/02-button.md

@@ -2,7 +2,10 @@
 
 ## 工具栏按钮（列表页顶部）
 
+工具栏必须独占一行，放在列表标题上方、表格上方并左对齐；不得与标题/条数统计挤在同一行。标准顺序为“查询区 → 工具栏 → 列表标题 → 表格 → 分页器”。
+
 ### 顺序规则
+
 1. **新增/新增申请**类按钮永远排第一
 2. 其余按钮按照操作频次降序排列
 
@@ -10,29 +13,33 @@
 
 主按钮色值严格遵循客户 UI 规范，禁止使用 `#2254F4`、`#4368FF` 或 Element Plus 默认蓝替代：
 
-| 状态 | Token | 规范色值 |
-|---|---|---|
-| 常规 | `--el-color-primary` | `#002A8F` |
+| 状态          | Token                        | 规范色值  |
+| ------------- | ---------------------------- | --------- |
+| 常规          | `--el-color-primary`         | `#002A8F` |
 | hover / focus | `--el-color-primary-light-1` | `#1A3F9A` |
-| active / 点击 | `--el-color-primary-dark-1` | `#002681` |
-| disabled | `--el-color-primary-light-7` | `#B2BFDD` |
+| active / 点击 | `--el-color-primary-dark-1`  | `#002681` |
+| disabled      | `--el-color-primary-light-7` | `#B2BFDD` |
 
 平台动态主题不得改写品牌按钮体系。包内 L0 token 使用 `!important`，runtime 主题锁负责恢复后续写入 `document.body.style` 的旧主色及功能色；业务页面不要再用局部选择器与主题锁对冲。
 
-| 操作语义   | type        | plain  | 说明           |
-|----------|-------------|--------|----------------|
-| 新增/添加 | `primary`   | false  | 蓝色填充        |
-| 导入      | `primary`   | true   | 蓝色线框        |
-| 导出      | `success`   | true   | 绿色线框        |
-| 删除/作废 | `danger`    | false  | 红色填充（批量操作慎用）|
-| 审批/提交 | `primary`   | false  | 蓝色填充        |
-| 重置/取消 | `default`   | false  | 默认灰色        |
+| 操作语义       | type      | plain | 说明                     |
+| -------------- | --------- | ----- | ------------------------ |
+| 新增/添加      | `primary` | false | 蓝色填充                 |
+| 保存           | `success` | false | 绿色填充                 |
+| 下达/提交/确认 | `primary` | false | 当前流程的主动作         |
+| 修改/调整/变更 | `warning` | true  | 橙色轻色面               |
+| 导入/导出/查询 | `default` | true  | 中性线框                 |
+| 删除/作废      | `danger`  | false | 红色填充（批量操作慎用） |
+| 重置/取消      | `default` | true  | 默认灰色线框             |
+
+同一按钮组超过 4 个动作时，只允许当前主动作和破坏性动作使用实心按钮；其余语义按钮使用 `plain` 轻色面。每个按钮必须有与动作一致的图标，未知业务动作不得回退为“无图标的 primary”。
 
 ```vue
 <!-- ✅ 工具栏按钮组 -->
 <el-button type="primary" @click="handleCreate">新增</el-button>
-<el-button type="primary" plain @click="handleImport">导入</el-button>
-<el-button type="success" plain @click="handleExport">导出</el-button>
+<el-button type="warning" plain icon="Edit" @click="handleEdit">修改</el-button>
+<el-button type="success" icon="Save" @click="handleSave">保存</el-button>
+<el-button icon="Download" @click="handleExport">导出</el-button>
 ```
 
 ---
@@ -44,35 +51,35 @@
 ```typescript
 // ✅ 正确
 renderOps([
-  { type: 'edit', onClick: () => handleEdit(row) },
-  { type: 'del', onClick: () => handleVoid(row) },
-])
+  { type: "edit", onClick: () => handleEdit(row) },
+  { type: "del", onClick: () => handleVoid(row) },
+]);
 ```
 
 ### 视觉状态
 
-| 状态 | 标准表现 |
-|---|---|
-| 默认可用 | 柔和主题蓝，透明背景 |
-| hover | 查看/记录/提交变主题蓝，编辑/审核变绿，删除/作废变红 |
-| 禁用 | 浅灰且 hover 不变色，使用原生 `disabled` |
-| 选中行 | 保持默认主题蓝，不因选中自动变为语义色 |
+| 状态     | 标准表现                                             |
+| -------- | ---------------------------------------------------- |
+| 默认可用 | 柔和主题蓝，透明背景                                 |
+| hover    | 查看/记录/提交变主题蓝，编辑/审核变绿，删除/作废变红 |
+| 禁用     | 浅灰且 hover 不变色，使用原生 `disabled`             |
+| 选中行   | 保持默认主题蓝，不因选中自动变为语义色               |
 
 ### 按钮标签严格对应原型
 
-| 操作    | 正确标签 | 禁止替换为 |
-|--------|---------|----------|
-| 修改记录 | **修改** | ~~编辑~~ |
-| 软删除  | **作废** | ~~删除~~ |
-| 硬删除  | **删除** | ~~移除~~ |
+| 操作     | 正确标签 | 禁止替换为 |
+| -------- | -------- | ---------- |
+| 修改记录 | **修改** | ~~编辑~~   |
+| 软删除   | **作废** | ~~删除~~   |
+| 硬删除   | **删除** | ~~移除~~   |
 
 ### 条件显示
 
 ```typescript
 renderOps([
-  { type: 'del', show: () => canDelete, onClick: () => handleDelete(row) },
-  { type: 'edit', show: () => canEdit, onClick: () => handleEdit(row) },
-])
+  { type: "del", show: () => canDelete, onClick: () => handleDelete(row) },
+  { type: "edit", show: () => canEdit, onClick: () => handleEdit(row) },
+]);
 ```
 
 ---
@@ -90,6 +97,7 @@ renderOps([
 ```
 
 CSS 全局保证 footer 右对齐（已在 `dist/style-override.scss` 中定义）：
+
 ```scss
 .el-dialog__footer .dialog-footer {
   display: flex;

package/standards/ui/03-form.md

@@ -6,10 +6,7 @@
 
 ```vue
 <!-- ❌ 错误：100px 会截断9字标签 -->
-<el-form :model="form" label-width="100px">
-
-<!-- ✅ 正确 -->
-<el-form :model="form" label-width="150px">
+<el-form :model="form" label-width="100px"></el-form>
 ```
 
 ---
@@ -21,11 +18,7 @@
 ```vue
 <!-- ❌ 错误 -->
 <el-input v-model="form.name" />
-<el-select v-model="form.type">
-
-<!-- ✅ 正确 -->
-<el-input v-model="form.name" size="small" />
-<el-select v-model="form.type" size="small">
+<el-select v-model="form.type"></el-select>
 ```
 
 ---
@@ -76,12 +69,19 @@ textarea 不强制 26px 高度，只继承统一圆角、字体和状态样式
 
 ## 规则：表单 label 不强制冒号
 
-Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text:after` / `.text-line-2:after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
+Element Plus 原生控件、picker 类控件和 jh-\* 封装控件的 label 后不强制追加 `:`。`@jhlc/jh-ui` 的 `.has-colon .com-text:after` / `.text-line-2:after` 冒号注入由 wl-skills-ui 统一屏蔽，避免 input / select / picker 之间出现有的带冒号、有的不带冒号。
 
 ---
 
 ## 布局标准
 
+### 列数与可用宽度
+
+- 独立作业页/实绩页的主表单最多 4 列；不得为了“一行塞完”使用 5～8 列。
+- 单个控件的实际可输入宽度应不小于 160px；标签较长、单位较多或容器变窄时，应主动降为 3 列。
+- 字段很多时优先分区、Tab 或“展开更多”，不要压缩输入框。默认区域建议控制在 4～6 行。
+- 数字输入若业务不依赖步进操作，应设置 `controls=false`，避免步进按钮挤占内容宽度。
+
 ### 搜索区（列表页顶部）
 
 ```vue
@@ -105,12 +105,7 @@ Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后
 ### 弹窗表单（新增/修改）
 
 ```vue
-<el-form
-  ref="formRef"
-  :model="form"
-  :rules="rules"
-  label-width="150px"
->
+<el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
   <el-row :gutter="20">
     <el-col :span="12">
       <el-form-item label="名称" prop="name">
@@ -135,11 +130,11 @@ Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后
 
 ## 复杂表单判断
 
-| 条件 | 方案 |
-|-----|------|
-| 字段 ≤ 15，无子表 | 弹窗（`el-dialog`） |
+| 条件                    | 方案                      |
+| ----------------------- | ------------------------- |
+| 字段 ≤ 15，无子表       | 弹窗（`el-dialog`）       |
 | 字段 > 15，或含多个子表 | 独立路由页（`/xxx-form`） |
-| Tab > 3 个 | 独立路由页 |
+| Tab > 3 个              | 独立路由页                |
 
 ---
 
@@ -147,8 +142,8 @@ Element Plus 原生控件、picker 类控件和 jh-* 封装控件的 label 后
 
 ```typescript
 const rules = {
-  name:   [{ required: true, message: '请输入名称', trigger: 'blur' }],
-  type:   [{ required: true, message: '请选择类型', trigger: 'change' }],
-  date:   [{ required: true, message: '请选择日期', trigger: 'change' }],
-}
+  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+  type: [{ required: true, message: "请选择类型", trigger: "change" }],
+  date: [{ required: true, message: "请选择日期", trigger: "change" }],
+};
 ```

package/styles/element/_form.scss

@@ -47,6 +47,24 @@ html body {
     line-height: calc(var(--wk-form-control-height) - 2px) !important;
   }
 
+  // number 输入只由 `.el-input__wrapper` 绘制焦点环。浏览器原生 outline
+  // 或内部 input 的 box-shadow 会与 wrapper 叠成双边框，并压到步进按钮分隔线。
+  &.el-input-number,
+  &.el-input-number:focus,
+  &.el-input-number:focus-within,
+  &.el-input-number .el-input,
+  &.el-input-number .el-input__inner,
+  &.el-input-number .el-input__inner:focus,
+  &.el-input-number .el-input__inner:focus-visible {
+    outline: none !important;
+  }
+
+  &.el-input-number .el-input__inner,
+  &.el-input-number .el-input__inner:focus {
+    border: 0 !important;
+    box-shadow: none !important;
+  }
+
   &.el-textarea__inner {
     border-radius: var(--wk-form-control-radius) !important;
   }

package/styles/layouts/_list-page.scss

@@ -6,6 +6,7 @@
 //   <div class="list-page">
 //     <div class="list-page__search">  搜索区（el-form inline）
 //     <div class="list-page__toolbar"> 工具栏（新增/导入/导出按钮）
+//     <div class="list-page__title">   列表标题（位于按钮组下方）
 //     <div class="list-page__table">   表格区（BaseTable / el-table）
 //     <div class="list-page__pager">   分页区（el-pagination）
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

package/styles/vendors/_ag-grid.scss

@@ -8,17 +8,17 @@
 .ag-root-wrapper {
   --ag-background-color: #ffffff;
   --ag-odd-row-background-color: #ffffff;
-    --ag-header-background-color: #fafafa;
+  --ag-header-background-color: #fafafa;
   --ag-header-foreground-color: #374151;
   --ag-border-color: rgba(0, 0, 0, 0.06);
-    --ag-row-border-color: rgba(0, 0, 0, 0.06);
-    --ag-row-hover-color: rgba(var(--el-color-primary-rgb), 0.06);
-    --ag-selected-row-background-color: rgba(var(--el-color-primary-rgb), 0.10);
-    --ag-range-selection-border-color: rgba(var(--el-color-primary-rgb), 0.4);
+  --ag-row-border-color: rgba(0, 0, 0, 0.06);
+  --ag-row-hover-color: rgba(var(--el-color-primary-rgb), 0.06);
+  --ag-selected-row-background-color: rgba(var(--el-color-primary-rgb), 0.1);
+  --ag-range-selection-border-color: rgba(var(--el-color-primary-rgb), 0.4);
   --ag-font-size: 13px;
   --ag-font-family: inherit;
   --ag-row-height: 26px;
-    --ag-header-height: 36px;
+  --ag-header-height: 36px;
   --ag-cell-horizontal-padding: 8px;
   --ag-checkbox-checked-color: var(--el-color-primary);
   --ag-input-focus-border-color: var(--el-color-primary);
@@ -32,8 +32,8 @@
 // ── 表头 ──────────────────────────────────────────────────────────────────────
 .ag-header {
   background-color: #fafafa !important;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
-    min-height: 36px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+  min-height: 36px !important;
 }
 
 .ag-header-row {
@@ -51,8 +51,8 @@
   align-items: center !important;
 
   &::after {
-      background-color: rgba(0, 0, 0, 0.06) !important;
-    }
+    background-color: rgba(0, 0, 0, 0.06) !important;
+  }
 }
 
 .ag-header-cell-comp-wrapper {
@@ -91,7 +91,9 @@
   transition: background-color 0.15s ease;
 }
 
-.ag-row-even  { background-color: #ffffff; }
+.ag-row-even {
+  background-color: #ffffff;
+}
 .ag-row-odd {
   background-color: #ffffff;
 }
@@ -102,7 +104,7 @@
 }
 
 .ag-row.ag-row-selected {
-  background-color: rgba(var(--el-color-primary-rgb), 0.10) !important;
+  background-color: rgba(var(--el-color-primary-rgb), 0.1) !important;
 }
 
 // ── 单元格 ────────────────────────────────────────────────────────────────────
@@ -124,7 +126,9 @@
 }
 
 // 复选框单元格（header 与 body 使用相同规则，确保视觉对齐）
-.ag-cell.ag-checkbox-cell { padding: 0 !important; }
+.ag-cell.ag-checkbox-cell {
+  padding: 0 !important;
+}
 
 // 多选列表头：精准命中 ag-header-select-all，与 body checkbox 保持相同居中方式
 .ag-header-cell:has(.ag-header-select-all) {
@@ -145,20 +149,30 @@
 }
 
 // 固定列分割线
-.ag-pinned-right-cols-container { border-left: 1px solid var(--el-border-color-light); }
-.ag-pinned-left-cols-container  { border-right: 1px solid var(--el-border-color-light); }
+.ag-pinned-right-cols-container {
+  border-left: 1px solid var(--el-border-color-light);
+}
+.ag-pinned-left-cols-container {
+  border-right: 1px solid var(--el-border-color-light);
+}
 
 // ── 空数据占位 ────────────────────────────────────────────────────────────────
 .ag-overlay-no-rows-wrapper {
-  --wk-empty-hint: '未找到匹配数据，请调整筛选条件后重试';
+  --wk-empty-hint: "未找到匹配数据，请调整筛选条件后重试";
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 0 !important;
+  box-sizing: border-box;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  padding: 56px 0;
+  padding: 20px 0 !important;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: 100px;
     height: 84px;
@@ -173,7 +187,7 @@
     content: var(--wk-empty-hint);
     display: block;
     font-size: 12px;
-    color: var(--el-text-color-placeholder, #B0B7C3);
+    color: var(--el-text-color-placeholder, #b0b7c3);
     margin-top: 6px;
     letter-spacing: 0.01em;
   }
@@ -187,36 +201,94 @@
 }
 
 // ── 滚动条 ────────────────────────────────────────────────────────────────────
-.ag-body-viewport::-webkit-scrollbar        { width: 4px; }
-.ag-body-viewport::-webkit-scrollbar-thumb  { background-color: rgba(0, 0, 0, 0.15); border-radius: 2px; }
-.ag-body-viewport::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.3); }
-.ag-body-viewport::-webkit-scrollbar-track  { background: transparent; }
+.ag-body-viewport::-webkit-scrollbar {
+  width: 4px;
+}
+.ag-body-viewport::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+.ag-body-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.ag-body-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
 
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar       { height: 4px; }
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track { background: transparent; }
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 2px; }
-.ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb       { background-color: rgba(0, 0, 0, 0.2); }
-.ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.35); }
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
+  height: 4px;
+}
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 2px;
+}
+.ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.ag-body-horizontal-scroll-viewport:hover::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.35);
+}
 
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 // 表格加载动画 — 高质感定制 loading overlay
 // ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 @keyframes ag-spin-outer {
-  0%   { stroke-dashoffset: 230; }
-  50%  { stroke-dashoffset: 80; }
-  100% { stroke-dashoffset: 230; }
+  0% {
+    stroke-dashoffset: 230;
+  }
+  50% {
+    stroke-dashoffset: 80;
+  }
+  100% {
+    stroke-dashoffset: 230;
+  }
 }
 @keyframes ag-spin-inner {
-  0%   { stroke-dashoffset: 150; }
-  50%  { stroke-dashoffset: 40; }
-  100% { stroke-dashoffset: 150; }
+  0% {
+    stroke-dashoffset: 150;
+  }
+  50% {
+    stroke-dashoffset: 40;
+  }
+  100% {
+    stroke-dashoffset: 150;
+  }
+}
+@keyframes ag-rotate-cw {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ag-rotate-ccw {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes ag-pulse-dot {
+  0%,
+  100% {
+    r: 3.5;
+    opacity: 0.6;
+  }
+  50% {
+    r: 5;
+    opacity: 1;
+  }
 }
-@keyframes ag-rotate-cw  { to { transform: rotate(360deg); } }
-@keyframes ag-rotate-ccw { to { transform: rotate(-360deg); } }
-@keyframes ag-pulse-dot  { 0%, 100% { r: 3.5; opacity: 0.6; } 50% { r: 5; opacity: 1; } }
 @keyframes ag-dot-bounce {
-  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
-  40%           { transform: translateY(-5px); opacity: 1; }
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  40% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
 }
 
 .ag-overlay-loading-wrapper {
@@ -239,11 +311,12 @@
 // 用 ::before 注入 SVG 动画徽标
 .ag-overlay-loading-center {
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: 52px;
     height: 52px;
-    background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='22' stroke='%23F2F5FF' stroke-width='2.5'/%3E%3Ccircle cx='26' cy='26' r='22' stroke='%232254F4' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='138' stroke-dashoffset='230' style='transform-origin:center;animation:ag-spin-outer 1.4s ease-in-out infinite,ag-rotate-cw 1.8s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%23D3DDFD' stroke-width='2'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%237A98F8' stroke-width='2' stroke-linecap='round' stroke-dasharray='82' stroke-dashoffset='150' style='transform-origin:center;animation:ag-spin-inner 1.0s ease-in-out infinite,ag-rotate-ccw 1.2s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='3.5' fill='%232254F4' style='transform-origin:center;animation:ag-pulse-dot 1.6s ease-in-out infinite'/%3E%3C/svg%3E") center/contain no-repeat;
+    background: url("data:image/svg+xml,%3Csvg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='26' cy='26' r='22' stroke='%23F2F5FF' stroke-width='2.5'/%3E%3Ccircle cx='26' cy='26' r='22' stroke='%232254F4' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='138' stroke-dashoffset='230' style='transform-origin:center;animation:ag-spin-outer 1.4s ease-in-out infinite,ag-rotate-cw 1.8s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%23D3DDFD' stroke-width='2'/%3E%3Ccircle cx='26' cy='26' r='13' stroke='%237A98F8' stroke-width='2' stroke-linecap='round' stroke-dasharray='82' stroke-dashoffset='150' style='transform-origin:center;animation:ag-spin-inner 1.0s ease-in-out infinite,ag-rotate-ccw 1.2s linear infinite'/%3E%3Ccircle cx='26' cy='26' r='3.5' fill='%232254F4' style='transform-origin:center;animation:ag-pulse-dot 1.6s ease-in-out infinite'/%3E%3C/svg%3E")
+      center/contain no-repeat;
   }
 
   // 省略号文字（AG Grid 默认插入"Loading..."，此处做字体优化）
@@ -258,7 +331,7 @@
 // 注：AG Grid 加载文本由 overlayLoadingTemplate 控制，
 //     这里的动画是纯 CSS 加持，无需改 JS
 .ag-overlay-loading-center::after {
-  content: '';
+  content: "";
   display: flex;
   gap: 4px;
   align-items: center;
@@ -266,9 +339,21 @@
   height: 12px;
   // 三个点用 box-shadow 模拟
   width: 36px;
-  background: radial-gradient(circle at 6px 6px, var(--el-color-primary) 3.5px, transparent 3.5px),
-      radial-gradient(circle at 18px 6px, var(--el-color-primary) 3.5px, transparent 3.5px),
-      radial-gradient(circle at 30px 6px, var(--el-color-primary) 3.5px, transparent 3.5px);
+  background: radial-gradient(
+      circle at 6px 6px,
+      var(--el-color-primary) 3.5px,
+      transparent 3.5px
+    ),
+    radial-gradient(
+      circle at 18px 6px,
+      var(--el-color-primary) 3.5px,
+      transparent 3.5px
+    ),
+    radial-gradient(
+      circle at 30px 6px,
+      var(--el-color-primary) 3.5px,
+      transparent 3.5px
+    );
   animation: ag-dot-bounce 1.2s ease-in-out infinite;
   opacity: 0.7;
 }

package/styles/vendors/_base-query-toolbar.scss

@@ -33,21 +33,24 @@
     }
   }
 
-    // ── 搜索区字号统一 12px（紧凑密度，与 label / button 一致）────────────────
-    .el-form-item__label {
-      font-size: 12px !important;
-    }
+  // ── 搜索区字号统一 12px（紧凑密度，与 label / button 一致）────────────────
+  .el-form-item__label {
+    font-size: 12px !important;
+  }
   .el-input__inner {
     font-size: 12px;
     color: var(--el-text-color-primary);
-    &::placeholder { color: var(--el-text-color-placeholder); font-size: 12px; }
-  }
-
-    .el-select__placeholder,
-    .el-select__tags-text,
-    .el-select .el-select__selected-item {
+    &::placeholder {
+      color: var(--el-text-color-placeholder);
       font-size: 12px;
     }
+  }
+
+  .el-select__placeholder,
+  .el-select__tags-text,
+  .el-select .el-select__selected-item {
+    font-size: 12px;
+  }
   // ── 选择框 ────────────────────────────────────────────────────────────────
   .el-select .el-select__wrapper {
     border-radius: var(--el-border-radius-base) !important;
@@ -84,6 +87,19 @@
     justify-content: flex-end;
     gap: 8px;
     padding-bottom: 8px;
+
+    // BaseQuery 的第 3 个按钮固定为展开/收起；使用轻量胶囊与查询/重置拉开层级。
+    > .el-button:nth-child(3):last-child {
+      color: var(--el-color-primary) !important;
+      border-color: var(--el-color-primary-light-7) !important;
+      border-radius: 999px !important;
+      background-color: var(--el-color-primary-light-9) !important;
+
+      &:hover {
+        border-color: var(--el-color-primary-light-5) !important;
+        background-color: var(--el-color-primary-light-8) !important;
+      }
+    }
   }
 
   // 查询按钮（type=primary）→ 品牌蓝填充
@@ -96,16 +112,20 @@
     padding: 0 10px !important;
     font-size: 12px !important;
     background-color: var(--el-color-primary, #002a8f) !important;
-      border-color: var(--el-color-primary, #002a8f) !important;
+    border-color: var(--el-color-primary, #002a8f) !important;
     color: #ffffff !important;
-    transition: background-color 0.15s, box-shadow 0.15s;
+    transition:
+      background-color 0.15s,
+      box-shadow 0.15s;
 
     &:hover {
       background-color: var(--el-color-primary-light-1, #1a3f9a) !important;
-        border-color: var(--el-color-primary-light-1, #1a3f9a) !important;
+      border-color: var(--el-color-primary-light-1, #1a3f9a) !important;
       box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.18);
     }
-    &:active { opacity: 0.85; }
+    &:active {
+      opacity: 0.85;
+    }
   }
 
   // 重置按钮（type=default）→ 轻线框样式
@@ -118,7 +138,10 @@
     color: var(--el-text-color-regular) !important;
     border-color: var(--el-border-color) !important;
     background-color: #ffffff !important;
-    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
+    transition:
+      border-color 0.15s,
+      color 0.15s,
+      background-color 0.15s;
 
     &:hover {
       color: var(--el-color-primary) !important;
@@ -144,6 +167,7 @@
   .base-toolbar-content {
     display: flex !important;
     align-items: center !important;
+    justify-content: flex-start !important;
     flex-wrap: wrap !important;
     gap: 8px !important;
     margin: 0 !important;
@@ -174,7 +198,10 @@
     padding: 0 8px !important;
     margin: 0 !important; // 覆盖 jh-ui 的 margin-right:8px
     letter-spacing: 0.01em;
-    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    transition:
+      background-color 0.15s,
+      border-color 0.15s,
+      box-shadow 0.15s;
 
     // 图标 + 文字间距
     .el-icon + span,
@@ -196,6 +223,18 @@
       &:active {
         opacity: 0.85;
       }
+
+      &.is-plain {
+        color: var(--el-color-primary, #002a8f) !important;
+        border-color: var(--el-color-primary-light-5) !important;
+        background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+
+        &:hover {
+          color: #ffffff !important;
+          border-color: var(--el-color-primary, #002a8f) !important;
+          background-color: var(--el-color-primary, #002a8f) !important;
+        }
+      }
     }
 
     // ── 危险操作：填充红（删除/作废/驳回）───────────────────────────────
@@ -213,6 +252,18 @@
       &:active {
         opacity: 0.85;
       }
+
+      &.is-plain {
+        color: var(--el-color-danger, #bb2d3f) !important;
+        border-color: var(--el-color-danger-light-5, #df9ca5) !important;
+        background-color: var(--el-color-danger-light-9, #fdf2f3) !important;
+
+        &:hover {
+          color: #ffffff !important;
+          border-color: var(--el-color-danger, #bb2d3f) !important;
+          background-color: var(--el-color-danger, #bb2d3f) !important;
+        }
+      }
     }
 
     // ── 警告操作：填充橙（提醒/预警相关）───────────────────────────────
@@ -227,10 +278,24 @@
         border-color: var(--el-color-warning-light-3, #f1b85a) !important;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
       }
+
+      &.is-plain {
+        color: var(--el-color-warning, #ea9a13) !important;
+        border-color: var(--el-color-warning-light-5, #f4c97f) !important;
+        background-color: var(--el-color-warning-light-9, #fef8ed) !important;
+
+        &:hover {
+          color: #ffffff !important;
+          border-color: var(--el-color-warning, #ea9a13) !important;
+          background-color: var(--el-color-warning, #ea9a13) !important;
+        }
+      }
     }
 
     // ── 次级操作：线框灰→hover 品牌色（导入/导出/模板下载）──────────────
-    &.el-button--default:not(.el-button--primary):not(.el-button--danger):not(.el-button--warning) {
+    &.el-button--default:not(.el-button--primary):not(.el-button--danger):not(
+        .el-button--warning
+      ) {
       color: var(--el-text-color-regular) !important;
       border-color: var(--el-border-color) !important;
       background-color: #ffffff !important;
@@ -254,6 +319,18 @@
         border-color: var(--el-color-success-light-3, #6bcb95) !important;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
       }
+
+      &.is-plain {
+        color: var(--el-color-success, #2bb268) !important;
+        border-color: var(--el-color-success-light-5, #8dd8ae) !important;
+        background-color: var(--el-color-success-light-9, #effaf4) !important;
+
+        &:hover {
+          color: #ffffff !important;
+          border-color: var(--el-color-success, #2bb268) !important;
+          background-color: var(--el-color-success, #2bb268) !important;
+        }
+      }
     }
   }
 }
@@ -298,12 +375,12 @@
 
   .el-button:first-child {
     border-top-left-radius: var(--el-border-radius-base) !important;
-      border-bottom-left-radius: var(--el-border-radius-base) !important;
+    border-bottom-left-radius: var(--el-border-radius-base) !important;
   }
 
   .el-button:last-child {
     border-top-right-radius: var(--el-border-radius-base) !important;
-      border-bottom-right-radius: var(--el-border-radius-base) !important;
+    border-bottom-right-radius: var(--el-border-radius-base) !important;
     margin-left: -1px !important;
   }
 }

package/styles/vendors/_jh-drag-row.scss

@@ -1,78 +1,83 @@
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-// jh-drag-row 上下分栏拖拽手柄 — 与 _jh-drag-col 视觉同源
-//
-// 背景
-//   `jh-drag-row`（来自 @jhlc/common-core）是主从表/上下双表的首选布局组件
-//   （见 wl-skills-kit standards/14）。其拖拽手柄 `.slider_row` 默认使用 jh-ui
-//   内置蓝（#a7caec），与项目集群统一细线手柄风格不一致。
-//
-//   本文件把 `.slider_row` 对齐到与 `_jh-drag-col.scss` 同一套极简细线 +
-//   grip dots 设计语言，只是方向改为水平分割线（row-resize）。
-//
-// 源码 CSS 类名参考（common-core/src/components/drag-row/drag-row.vue）
-//   .drager_row（主容器）/ .drager_top（上区）/ .drager_bottom（下区）/ .slider_row（手柄）
-// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-// ── 上下拖拽分割条 — 极简细线 + grip dots（垂直方向）────────────────────────
+// jh-drag-row 上下分栏拖拽手柄
+// 统一为“细分隔线 + 三点胶囊”，既保留足够的拖拽热区，也避免视觉喧宾夺主。
 html .drager_row > .slider_row {
+  position: relative;
+  height: 20px !important;
+  min-height: 20px !important;
+  flex: 0 0 20px !important;
+  cursor: row-resize !important;
   background: linear-gradient(
     to bottom,
-    transparent 4px,
-    var(--el-border-color-light) 4px,
-    var(--el-border-color-light) 5px,
-    transparent 5px
+    transparent 9px,
+    var(--el-border-color-lighter) 9px,
+    var(--el-border-color-lighter) 10px,
+    transparent 10px
   ) !important;
-  transition: background 0.2s !important;
+  transition: background-color 0.18s ease !important;
 
-  &::before { display: none !important; }
+  &::before {
+    position: absolute !important;
+    z-index: 1;
+    top: 50% !important;
+    left: 50% !important;
+    display: block !important;
+    width: 92px !important;
+    min-width: 92px !important;
+    max-width: 92px !important;
+    height: 16px !important;
+    content: "" !important;
+    transform: translate(-50%, -50%) !important;
+    border: 1px solid var(--el-border-color) !important;
+    border-radius: 999px !important;
+    background: var(--el-bg-color) !important;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 5%) !important;
+    transition:
+      border-color 0.18s ease,
+      box-shadow 0.18s ease !important;
+  }
 
   &::after {
-    content: '' !important;
     position: absolute !important;
-    left: 50% !important;
-    right: auto !important;
+    z-index: 2;
     top: 50% !important;
-    transform: translate(-50%, -50%) !important;
+    left: 50% !important;
+    display: block !important;
     width: 4px !important;
+    min-width: 4px !important;
+    max-width: 4px !important;
     height: 4px !important;
-    min-height: unset !important;
-    max-height: unset !important;
+    min-height: 4px !important;
+    max-height: 4px !important;
+    content: "" !important;
+    transform: translate(-50%, -50%) !important;
     border-radius: 50% !important;
-    background-color: var(--el-border-color) !important;
-    box-shadow: -8px 0 0 var(--el-border-color), 8px 0 0 var(--el-border-color) !important;
-    transition: background-color 0.2s, box-shadow 0.2s !important;
-    opacity: 0.6;
+    background: var(--el-text-color-placeholder) !important;
+    box-shadow:
+      -12px 0 0 var(--el-text-color-placeholder),
+      12px 0 0 var(--el-text-color-placeholder) !important;
+    opacity: 0.72;
+    transition:
+      background-color 0.18s ease,
+      box-shadow 0.18s ease !important;
   }
 
-  &:hover {
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--el-color-primary-rgb), 0.06) 3px,
-      var(--el-color-primary) 3px,
-      var(--el-color-primary) 7px,
-      rgba(var(--el-color-primary-rgb), 0.06) 7px
-    ) !important;
+  &:hover,
+  &:active {
+    &::before {
+      border-color: var(--el-color-primary-light-5) !important;
+      box-shadow: 0 2px 6px rgb(15 23 42 / 10%) !important;
+    }
 
     &::after {
-      background-color: var(--el-color-primary) !important;
-      box-shadow: -8px 0 0 var(--el-color-primary), 8px 0 0 var(--el-color-primary) !important;
+      background: var(--el-color-primary) !important;
+      box-shadow:
+        -12px 0 0 var(--el-color-primary),
+        12px 0 0 var(--el-color-primary) !important;
       opacity: 1;
     }
   }
-
-  &:active {
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--el-color-primary-rgb), 0.1) 2.5px,
-      var(--el-color-primary) 2.5px,
-      var(--el-color-primary) 7.5px,
-      rgba(var(--el-color-primary-rgb), 0.1) 7.5px
-    ) !important;
-  }
 }
 
-// ── 容器高度链兜底：确保上下区域能正常撑满（kit standards/14 强制项）────────
-//    父容器/Tab 已由业务页负责设高度；此处仅确保 .drager_row 自身不塌缩。
 html .drager_row {
   min-height: 0;
 }

package/templates/list-page/TPL-LIST.md

@@ -56,6 +56,9 @@ src/views/[模块]/
       >
     </div>
 
+    <!-- 列表标题：位于按钮组下方，独占一行 -->
+    <div class="list-title">[列表标题]</div>
+
     <!-- 表格 -->
     <BaseTable :hook="page" empty-text="暂无数据" :columns="columnsDef()" />
 
@@ -137,3 +140,4 @@ async function handleDel(id: string) {
 2. `usePageHook` 需替换为项目实际的分页 Hook
 3. `enableStatus` 字段在 `installCommonPreset()` 后自动渲染为彩色 Tag，无需手写 defaultNode
 4. 工具栏按钮必须带 `icon`（R005 规则）
+5. 标准顺序固定为“查询区 → 工具栏 → 列表标题 → 表格 → 分页器”；工具栏不得放到标题右侧或标题下方