@manohub/ui 0.10.5 → 1.0.1

package/dist/styles/components/page.css

@@ -1,473 +1,473 @@
-/**
- * Page 页面骨架契约（滚动归属写死，调用方无法违反）：
- * - .mh-page：height 100%，纵向 flex，自身不滚
- * - Header / Filter / Footer：flex-shrink 0，不滚
- * - Body mode="scroll"：自身 overflow-y auto（详情页长内容）
- * - Body mode="plain"：不滚（默认；滚动归区域内容区 / 内容件自持的定高容器）
- * - Split：自身不滚，栏内滚动由内容承担（双栏内用 Panel 的 Body 滚）
- *
- * 页面级行只有 Filter / Header / Body / Footer 四条：页头右侧的自由位（`extra`）
- * **不是页面级行**，它的容器 .mh-page__header-extra 就在 Header 内部。
- *
- * 统一 height:100% 语义（不用 100vh）：子应用被注入宿主容器，
- * 100vh 取 window 视口高度，宿主有顶栏即溢出。
- *
- * 与 panel.css 的分工：本文件是**页面级**（唯一），panel.css 是**区域级**（可多个）。
- */
-
-.mh-page {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.mh-page__header {
-  flex-shrink: 0;
-  /* 页头条规格依据 MH后台-0911 设计稿 node 0:3888：条高 56（14+28+13+1px 分隔线）、左右 20 */
-  padding: 14px var(--ui-space-5) 13px;
-  border-bottom: 1px solid var(--ui-base-300);
-}
-
-.mh-page__header-inner {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--ui-space-4);
-}
-
-.mh-page__header-text {
-  min-width: 0;
-  flex: 1;
-}
-
-.mh-page__header-title-row {
-  display: flex;
-  align-items: center;
-  /* 设计稿：图标 26 宽 + 10 间距 → 文字起点 36 */
-  gap: 10px;
-}
-
-.mh-page__header-icon {
-  display: inline-flex;
-  align-items: center;
-  color: var(--ui-primary);
-}
-
-.mh-page__header-icon svg {
-  /* 设计稿图标 26×26；消费方自传的 svg 节点也按此收口（<Icon> 自带 size 时与本条一致） */
-  width: 26px;
-  height: 26px;
-}
-
-/* 页头右侧自由位（Header 唯一可自定义位，对应 `extra` 属性 / 插槽）：搜索框 / 按钮 / 下拉等，水平排列；
-   间距与垂直对齐由标准样式锁死，内容（搜索框、按钮）由消费方提供。
-
-   `align-self: stretch` 是关键的一条：父级 .mh-page__header-inner 是 `align-items: flex-end`
-   （右侧位与文本块**底边对齐**的既有口径），flex-end **只定位、不拉伸** —— 少了这条，
-   本盒子的高度就等于内容高度（内容比标题行矮时会短一截），自己画背景 / 分隔线就会露出白边。
-   拉满后盒子高 = 内容行高（有副标题时同样跟着变高），内部仍按 `align-items: center` 垂直居中。
-   注意：这里只到「内容行」的上下边，页头条上下的 14 / 13px 留白是 .mh-page__header 的 padding，
-   在 inner 之外，子项不覆盖它（贴满整条要改版式，不是加一条能解决的）。 */
-.mh-page__header-extra {
-  flex-shrink: 0;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3);
-}
-
-.mh-page__header-title {
-  margin: 0;
-  font-size: var(--ui-font-title);
-  font-weight: var(--ui-weight-semibold);
-  line-height: 28px;
-  color: var(--ui-base-content);
-}
-
-/* 页头副标题（Header 的 subTitle）：标题下一行的次要说明，取 caption 档字号与次要色。
-   间距只用 margin-top 4：页头条的上下留白由 .mh-page__header 的 padding 提供，
-   这里只负责标题行与副标题行之间的距离 —— 有副标题时条目高度自然变高（56 → 80），
-   不再另调 padding（避免「有/无副标题」两套页头规格）。
-   文本块与右侧位的**底边对齐**仍是 .mh-page__header-inner 的既有口径（flex-end），
-   只不过右位自身被拉伸占满内容行（见 .mh-page__header-extra 的 align-self: stretch），
-   所以有副标题时它跟着变高、内容在盒内垂直居中，不在本项里改。 */
-.mh-page__header-subtitle {
-  margin-top: var(--ui-space-1);
-  font-size: var(--ui-font-caption);
-  line-height: var(--ui-line-caption);
-  color: var(--ui-base-content-muted);
-}
-
-/* 筛选区块（Header 上方的第一子块）：筛选条 / 查询方案。
-   无边框；padding-bottom 恒为 0 —— 与 Header 的间距由 Header 自身的 top padding
-   （14px）提供，避免两块 padding 叠加成双倍间距 */
-.mh-page__filter {
-  flex-shrink: 0;
-  padding: 14px var(--ui-space-5) 0;
-}
-
-.mh-page__body {
-  flex: 1;
-  min-height: 0;
-  /* 页面内距 20（与页头左边距对齐，同设计稿） */
-  padding: 0 var(--ui-space-5);
-}
-
-.mh-page__body--scroll {
-  overflow-y: auto;
-}
-
-.mh-page__body--plain {
-  overflow: hidden;
-}
-
-.mh-page__footer {
-  flex-shrink: 0;
-  padding: var(--ui-space-3) var(--ui-space-5);
-}
-
-.mh-page__footer-inner {
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* ===== Split 双栏 =====
-   中间 1px 竖直分隔线由 Split 统一提供（线色与页头下边线同源 --ui-base-300），
-   线右侧（主栏）留 --ui-space-4(16px) 内距与线拉开间距；**侧栏不额外加内距**（内容自带）。
-   业务侧不得再给栏的子元素加竖直边框。
-
-   滚动：**Split 自身不滚，栏内滚动由内容承担**（双栏内用 Panel，其 Body overflow:auto）。
-   两栏 overflow:hidden 是为了避免「外层先滚、内层滚不到」的双层滚动容器。
-
-   侧栏宽度语义（`sidebar.width`）：**内容宽**（content-box），
-   1px 边线与 16px 右内距加在框外 —— 消费方不必手算补偿值。 */
-.mh-page__split {
-  height: 100%;
-  display: flex;
-  gap: 0;
-  overflow: hidden;
-}
-
-.mh-page__split-sidebar {
-  flex-shrink: 0;
-  /* width 语义是内容宽 → 1px 边线加在内容框外 */
-  box-sizing: content-box;
-  border-right: 1px solid var(--ui-base-300);
-  overflow: hidden;
-  /* 线**左侧** 16px 内距：与主栏的 padding-left 对称，内容与分隔线各让 16px 拉开
-     （2026-09-20 口径；改它 = 改口径，锁定断言在 __tests__/page.spec.ts）。 */
-  padding-right: var(--ui-space-4);
-  /* 收起/展开的宽度过渡（拖拽期由 [data-dragging] 禁掉，保证跟手） */
-  transition: width 0.2s ease, padding-right 0.2s ease, border-right-width 0.2s ease;
-}
-
-.mh-page__split-main {
-  flex: 1;
-  min-width: 0;
-  /* 线右侧 16px 内距：把内容与分隔线拉开 */
-  padding-left: var(--ui-space-4);
-  overflow: hidden;
-}
-
-/* ===== Split 侧栏交互（拖拽调宽 / 收起展开 / 右侧栏镜像）=====
-   三条口径先写在这里（改它们 = 改口径）：
-   1. **手柄是 0 宽 flex 子项**：不参与空间分配 ⇒ 侧栏的 content-box 宽度语义、线两侧各 16px 内距、
-      两栏 overflow:hidden 全部原样成立（命中区靠 ::before 向两侧扩，不占布局）。
-   2. **高亮是「覆盖」不是「叠加」**：::after 精确压在侧栏那条 1px 边框上（left/right: -1px），
-      因此页面任何时候都只有一条线。
-   3. **每个规则只写一个选择器**（契约断言取「选择器首次出现」的规则体，并集会让断言取错规则），
-      且**基类必须排在修饰类之前**（ruleBody 是子串匹配：收起态规则的前缀里含基类选择器子串，
-      顺序颠倒会让既有断言读到收起态那条）。
-   另外这条也适用于注释：**注释里不要出现「选择器 + 花括号」字样** —— ruleBody 用 indexOf 找
-   选择器后的花括号，命中注释会让括号平衡算错（加这段注释时当场踩到「规则未闭合」）。 */
-
-/* --- 收起态展开把手：常驻 DOM，宽度 0 ↔ 16 过渡（用常驻而非条件渲染，展开瞬间不会边缘瞬跳）--- */
-.mh-page__split-rail {
-  flex: 0 0 auto;
-  width: 0;
-  overflow: hidden;
-  transition: width 0.2s ease;
-}
-
-.mh-page__split--left-collapsed .mh-page__split-rail {
-  width: 16px;
-}
-
-.mh-page__split-rail--right {
-  flex: 0 0 auto;
-  width: 0;
-  overflow: hidden;
-  transition: width 0.2s ease;
-}
-
-.mh-page__split--right-collapsed .mh-page__split-rail--right {
-  width: 16px;
-}
-
-/* 展开按钮：**占满整条把手**（全高全宽）—— 收起态里它是整块侧栏唯一看得见的东西，
-   所以它自己就是那条「带边框的竖条」，不是里面再嵌一个小按钮。
-   盒模型走 border-box：1px 描边要算在 16px 里，否则右侧那条边会被把手的 overflow:hidden 裁掉。
-   与收起按钮共用同一套描边 / 底 / 圆角（尺寸不同是有意的：收起按钮钉在分隔线上，只能是小药丸）。 */
-.mh-page__split-rail-btn {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-base-100);
-  color: var(--ui-base-content-muted);
-  cursor: pointer;
-  /* 自绘按钮必须关掉原生外观与原生焦点环：否则按下 / 聚焦时浏览器会画系统级描边
-     （真机反馈的「点击按钮出现黑色边框」就是它），焦点反馈只由下面的 :focus-visible 提供 */
-  appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
-}
-
-.mh-page__split-rail-btn:hover {
-  border-color: var(--ui-primary);
-  color: var(--ui-primary);
-  background: var(--ui-base-200);
-}
-
-/* 同收起按钮：上游 `button:focus` 的 5px 深色环特异性高于基础态，必须显式清掉 */
-.mh-page__split-rail-btn:focus {
-  outline: none;
-}
-
-.mh-page__split-rail-btn:focus-visible {
-  color: var(--ui-primary);
-  outline: 2px solid var(--ui-primary-weak);
-  outline-offset: -2px;
-}
-
-/* --- 宽度过渡期间**内容不跟着重排**（收起 / 展开都算）---
-   内容按 `--mh-page-split-frozen`（该侧展开时的宽度，组件在收起那一刻实测后下发）定宽排布，
-   多出来的部分由本盒子的 overflow:hidden 裁掉 —— 观感还是「滑出去 / 滑进来」，
-   但栏内的滚动容器（Panel.Body、表格包裹层这些 overflow:auto 的件）不会因为宽度被压缩而现出滚动条。
-   取不到值时退回 100%：那种情形是「没给 width 的自适应侧栏」，容器宽度本身不可插值（auto 不能动画），
-   收起/展开是瞬间跳变，也就无所谓过渡期间的重排。 */
-.mh-page__split-sidebar > * {
-  width: var(--mh-page-split-frozen, 100%);
-}
-
-/* --- 右侧栏：左侧栏的镜像（分隔线在侧栏左侧、内距镜像）--- */
-.mh-page__split-sidebar--right {
-  flex-shrink: 0;
-  box-sizing: content-box;
-  border-left: 1px solid var(--ui-base-300);
-  overflow: hidden;
-  padding-left: var(--ui-space-4);
-  transition: width 0.2s ease, padding-left 0.2s ease, border-left-width 0.2s ease;
-}
-
-/* 右侧栏的内容定宽之外再靠右锚定：镜像方向要让「揭开」从右边缘往左走（否则内容像从左栏那侧长出来） */
-.mh-page__split-sidebar--right > * {
-  width: var(--mh-page-split-frozen, 100%);
-  margin-left: auto;
-}
-
-/* --- 主栏在右侧栏存在时补右内距（左侧那条是基类，逐条镜像）---
-   挂类条件只看「右槽位是否存在」，与是否收起无关 ⇒ 收起时主栏留白不跳变。 */
-.mh-page__split--has-right .mh-page__split-main {
-  padding-right: var(--ui-space-4);
-}
-
-/* --- 收起态：宽 0 + 内距 0 + 边线宽 0（边线透明仍占 1px，故归零宽度）；内容延迟到过渡结束才隐藏 ---
-   收起后那一条只剩 16px 的展开把手，可辨认性由**把手上的按钮**（描边 + 底）承担，不由分隔线承担。 */
-.mh-page__split--left-collapsed .mh-page__split-sidebar {
-  padding-right: 0;
-  border-right-width: 0;
-  visibility: hidden;
-  transition: width 0.2s ease, padding-right 0.2s ease, border-right-width 0.2s ease, visibility 0s linear 0.2s;
-}
-
-.mh-page__split--right-collapsed .mh-page__split-sidebar--right {
-  padding-left: 0;
-  border-left-width: 0;
-  visibility: hidden;
-  transition: width 0.2s ease, padding-left 0.2s ease, border-left-width 0.2s ease, visibility 0s linear 0.2s;
-}
-
-/* --- 拖拽中禁过渡（逐帧过渡会让拖拽滞后）--- */
-.mh-page__split-sidebar[data-dragging] {
-  transition: none;
-}
-
-.mh-page__split-sidebar--right[data-dragging] {
-  transition: none;
-}
-
-/* --- 拖拽手柄：0 宽 flex 子项 --- */
-.mh-page__split-handle {
-  flex: 0 0 auto;
-  width: 0;
-  position: relative;
-  /* 手柄整体压在手柄两侧的栏之上：否则跨在分隔线上的收起按钮会被栏内内容盖住 */
-  z-index: 1;
-  cursor: col-resize;
-  /* 触屏拖拽的前提：不交出滚动/缩放手势 */
-  touch-action: none;
-}
-
-/* 命中带：以 1px 分隔线为中心、两侧各扩 4px（9px 可抓），仍在 Split 的 overflow 边界内 */
-.mh-page__split-handle::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -4px;
-  width: 9px;
-}
-
-/* 高亮：主色 1px，精确覆盖原灰线（不新增第二条线） */
-.mh-page__split-handle::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -1px;
-  width: 1px;
-  background: var(--ui-primary);
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.mh-page__split-handle:hover::after {
-  opacity: 1;
-}
-
-.mh-page__split-handle[data-dragging]::after {
-  opacity: 1;
-}
-
-.mh-page__split-handle--right {
-  flex: 0 0 auto;
-  width: 0;
-  position: relative;
-  z-index: 1;
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.mh-page__split-handle--right::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -4px;
-  width: 9px;
-}
-
-.mh-page__split-handle--right::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -1px;
-  width: 1px;
-  background: var(--ui-primary);
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.mh-page__split-handle--right:hover::after {
-  opacity: 1;
-}
-
-.mh-page__split-handle--right[data-dragging]::after {
-  opacity: 1;
-}
-
-/* --- 收起按钮：**扁高条**（宽 12 / 高 28，跨在分隔线上）；默认不可见也不拦事件。
-   两条位置关系都是踩过的坑：
-   ① 它比 9px 命中带宽，常驻可点会吞掉栏边内容的点击 ⇒ 默认 `opacity: 0` + `pointer-events: none`；
-   ② 高亮线是手柄的**伪元素**，而伪元素默认绘制在子元素（本按钮）**之上** ⇒ 必须给按钮 `z-index`
-      （同层叠上下文内只有定位元素的 z-index 参与比较，`auto` 视作 0），否则那条 1px 线会横穿按钮中央。 */
-.mh-page__split-handle-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--ui-base-300);
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-base-100);
-  color: var(--ui-base-content-muted);
-  cursor: pointer;
-  /* 同 rail-btn：自绘按钮必须关掉原生外观与原生焦点环，否则按下时会出现系统级描边（黑框） */
-  appearance: none;
-  -webkit-appearance: none;
-  outline: none;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
-}
-
-.mh-page__split-handle:hover .mh-page__split-handle-btn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.mh-page__split-handle--right:hover .mh-page__split-handle-btn {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* 显式清掉 `:focus` 态的轮廓：上游 farris 有 `button:focus { outline: -webkit-focus-ring-color auto 5px }`，
-   特异性 (0,1,1) 高于本按钮基础态的 (0,1,0) —— 只写基础态 `outline: none` 压不住它，
-   鼠标点击（`:focus-visible` 不匹配）就会露出那道 5px 深色环。本规则 (0,2,0) 压过上游；
-   焦点反馈只留给紧随其后的 `:focus-visible`（同特异性、顺序在后 ⇒ 它赢）。
-   注：自绘层零 farris，本包之外的样式链若给全局按钮上过焦点环，本规则同样兜住。 */
-.mh-page__split-handle-btn:focus {
-  outline: none;
-}
-
-.mh-page__split-handle-btn:focus-visible {
-  opacity: 1;
-  pointer-events: auto;
-  outline: 2px solid var(--ui-primary-weak);
-  outline-offset: 1px;
-}
-
-.mh-page__split-handle-btn:hover {
-  border-color: var(--ui-primary);
-  color: var(--ui-primary);
-}
-
-/* --- 拖拽期：整块保持拖动光标并禁选中文字 --- */
-.mh-page__split--resizing {
-  cursor: col-resize;
-  user-select: none;
-}
-
-/* --- 动效降级：系统要求减少动效时，收起/展开直接到位 --- */
-@media (prefers-reduced-motion: reduce) {
-  .mh-page__split-sidebar {
-    transition: none;
-  }
-
-  .mh-page__split-sidebar--right {
-    transition: none;
-  }
-
-  .mh-page__split-rail {
-    transition: none;
-  }
-
-  .mh-page__split-rail--right {
-    transition: none;
-  }
-}
+/**
+ * Page 页面骨架契约（滚动归属写死，调用方无法违反）：
+ * - .mh-page：height 100%，纵向 flex，自身不滚
+ * - Header / Filter / Footer：flex-shrink 0，不滚
+ * - Body mode="scroll"：自身 overflow-y auto（详情页长内容）
+ * - Body mode="plain"：不滚（默认；滚动归区域内容区 / 内容件自持的定高容器）
+ * - Split：自身不滚，栏内滚动由内容承担（双栏内用 Panel 的 Body 滚）
+ *
+ * 页面级行只有 Filter / Header / Body / Footer 四条：页头右侧的自由位（`extra`）
+ * **不是页面级行**，它的容器 .mh-page__header-extra 就在 Header 内部。
+ *
+ * 统一 height:100% 语义（不用 100vh）：子应用被注入宿主容器，
+ * 100vh 取 window 视口高度，宿主有顶栏即溢出。
+ *
+ * 与 panel.css 的分工：本文件是**页面级**（唯一），panel.css 是**区域级**（可多个）。
+ */
+
+.mh-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mh-page__header {
+  flex-shrink: 0;
+  /* 页头条规格依据 MH后台-0911 设计稿 node 0:3888：条高 56（14+28+13+1px 分隔线）、左右 20 */
+  padding: 14px var(--ui-space-5) 13px;
+  border-bottom: 1px solid var(--ui-base-300);
+}
+
+.mh-page__header-inner {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ui-space-4);
+}
+
+.mh-page__header-text {
+  min-width: 0;
+  flex: 1;
+}
+
+.mh-page__header-title-row {
+  display: flex;
+  align-items: center;
+  /* 设计稿：图标 26 宽 + 10 间距 → 文字起点 36 */
+  gap: 10px;
+}
+
+.mh-page__header-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ui-primary);
+}
+
+.mh-page__header-icon svg {
+  /* 设计稿图标 26×26；消费方自传的 svg 节点也按此收口（<Icon> 自带 size 时与本条一致） */
+  width: 26px;
+  height: 26px;
+}
+
+/* 页头右侧自由位（Header 唯一可自定义位，对应 `extra` 属性 / 插槽）：搜索框 / 按钮 / 下拉等，水平排列；
+   间距与垂直对齐由标准样式锁死，内容（搜索框、按钮）由消费方提供。
+
+   `align-self: stretch` 是关键的一条：父级 .mh-page__header-inner 是 `align-items: flex-end`
+   （右侧位与文本块**底边对齐**的既有口径），flex-end **只定位、不拉伸** —— 少了这条，
+   本盒子的高度就等于内容高度（内容比标题行矮时会短一截），自己画背景 / 分隔线就会露出白边。
+   拉满后盒子高 = 内容行高（有副标题时同样跟着变高），内部仍按 `align-items: center` 垂直居中。
+   注意：这里只到「内容行」的上下边，页头条上下的 14 / 13px 留白是 .mh-page__header 的 padding，
+   在 inner 之外，子项不覆盖它（贴满整条要改版式，不是加一条能解决的）。 */
+.mh-page__header-extra {
+  flex-shrink: 0;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+}
+
+.mh-page__header-title {
+  margin: 0;
+  font-size: var(--ui-font-title);
+  font-weight: var(--ui-weight-semibold);
+  line-height: 28px;
+  color: var(--ui-base-content);
+}
+
+/* 页头副标题（Header 的 subTitle）：标题下一行的次要说明，取 caption 档字号与次要色。
+   间距只用 margin-top 4：页头条的上下留白由 .mh-page__header 的 padding 提供，
+   这里只负责标题行与副标题行之间的距离 —— 有副标题时条目高度自然变高（56 → 80），
+   不再另调 padding（避免「有/无副标题」两套页头规格）。
+   文本块与右侧位的**底边对齐**仍是 .mh-page__header-inner 的既有口径（flex-end），
+   只不过右位自身被拉伸占满内容行（见 .mh-page__header-extra 的 align-self: stretch），
+   所以有副标题时它跟着变高、内容在盒内垂直居中，不在本项里改。 */
+.mh-page__header-subtitle {
+  margin-top: var(--ui-space-1);
+  font-size: var(--ui-font-caption);
+  line-height: var(--ui-line-caption);
+  color: var(--ui-base-content-muted);
+}
+
+/* 筛选区块（Header 上方的第一子块）：筛选条 / 查询方案。
+   无边框；padding-bottom 恒为 0 —— 与 Header 的间距由 Header 自身的 top padding
+   （14px）提供，避免两块 padding 叠加成双倍间距 */
+.mh-page__filter {
+  flex-shrink: 0;
+  padding: 14px var(--ui-space-5) 0;
+}
+
+.mh-page__body {
+  flex: 1;
+  min-height: 0;
+  /* 页面内距 20（与页头左边距对齐，同设计稿） */
+  padding: 0 var(--ui-space-5);
+}
+
+.mh-page__body--scroll {
+  overflow-y: auto;
+}
+
+.mh-page__body--plain {
+  overflow: hidden;
+}
+
+.mh-page__footer {
+  flex-shrink: 0;
+  padding: var(--ui-space-3) var(--ui-space-5);
+}
+
+.mh-page__footer-inner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ===== Split 双栏 =====
+   中间 1px 竖直分隔线由 Split 统一提供（线色与页头下边线同源 --ui-base-300），
+   线右侧（主栏）留 --ui-space-4(16px) 内距与线拉开间距；**侧栏不额外加内距**（内容自带）。
+   业务侧不得再给栏的子元素加竖直边框。
+
+   滚动：**Split 自身不滚，栏内滚动由内容承担**（双栏内用 Panel，其 Body overflow:auto）。
+   两栏 overflow:hidden 是为了避免「外层先滚、内层滚不到」的双层滚动容器。
+
+   侧栏宽度语义（`sidebar.width`）：**内容宽**（content-box），
+   1px 边线与 16px 右内距加在框外 —— 消费方不必手算补偿值。 */
+.mh-page__split {
+  height: 100%;
+  display: flex;
+  gap: 0;
+  overflow: hidden;
+}
+
+.mh-page__split-sidebar {
+  flex-shrink: 0;
+  /* width 语义是内容宽 → 1px 边线加在内容框外 */
+  box-sizing: content-box;
+  border-right: 1px solid var(--ui-base-300);
+  overflow: hidden;
+  /* 线**左侧** 16px 内距：与主栏的 padding-left 对称，内容与分隔线各让 16px 拉开
+     （2026-09-20 口径；改它 = 改口径，锁定断言在 __tests__/page.spec.ts）。 */
+  padding-right: var(--ui-space-4);
+  /* 收起/展开的宽度过渡（拖拽期由 [data-dragging] 禁掉，保证跟手） */
+  transition: width 0.2s ease, padding-right 0.2s ease, border-right-width 0.2s ease;
+}
+
+.mh-page__split-main {
+  flex: 1;
+  min-width: 0;
+  /* 线右侧 16px 内距：把内容与分隔线拉开 */
+  padding-left: var(--ui-space-4);
+  overflow: hidden;
+}
+
+/* ===== Split 侧栏交互（拖拽调宽 / 收起展开 / 右侧栏镜像）=====
+   三条口径先写在这里（改它们 = 改口径）：
+   1. **手柄是 0 宽 flex 子项**：不参与空间分配 ⇒ 侧栏的 content-box 宽度语义、线两侧各 16px 内距、
+      两栏 overflow:hidden 全部原样成立（命中区靠 ::before 向两侧扩，不占布局）。
+   2. **高亮是「覆盖」不是「叠加」**：::after 精确压在侧栏那条 1px 边框上（left/right: -1px），
+      因此页面任何时候都只有一条线。
+   3. **每个规则只写一个选择器**（契约断言取「选择器首次出现」的规则体，并集会让断言取错规则），
+      且**基类必须排在修饰类之前**（ruleBody 是子串匹配：收起态规则的前缀里含基类选择器子串，
+      顺序颠倒会让既有断言读到收起态那条）。
+   另外这条也适用于注释：**注释里不要出现「选择器 + 花括号」字样** —— ruleBody 用 indexOf 找
+   选择器后的花括号，命中注释会让括号平衡算错（加这段注释时当场踩到「规则未闭合」）。 */
+
+/* --- 收起态展开把手：常驻 DOM，宽度 0 ↔ 16 过渡（用常驻而非条件渲染，展开瞬间不会边缘瞬跳）--- */
+.mh-page__split-rail {
+  flex: 0 0 auto;
+  width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+.mh-page__split--left-collapsed .mh-page__split-rail {
+  width: 16px;
+}
+
+.mh-page__split-rail--right {
+  flex: 0 0 auto;
+  width: 0;
+  overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+.mh-page__split--right-collapsed .mh-page__split-rail--right {
+  width: 16px;
+}
+
+/* 展开按钮：**占满整条把手**（全高全宽）—— 收起态里它是整块侧栏唯一看得见的东西，
+   所以它自己就是那条「带边框的竖条」，不是里面再嵌一个小按钮。
+   盒模型走 border-box：1px 描边要算在 16px 里，否则右侧那条边会被把手的 overflow:hidden 裁掉。
+   与收起按钮共用同一套描边 / 底 / 圆角（尺寸不同是有意的：收起按钮钉在分隔线上，只能是小药丸）。 */
+.mh-page__split-rail-btn {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-base-100);
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  /* 自绘按钮必须关掉原生外观与原生焦点环：否则按下 / 聚焦时浏览器会画系统级描边
+     （真机反馈的「点击按钮出现黑色边框」就是它），焦点反馈只由下面的 :focus-visible 提供 */
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.mh-page__split-rail-btn:hover {
+  border-color: var(--ui-primary);
+  color: var(--ui-primary);
+  background: var(--ui-base-200);
+}
+
+/* 同收起按钮：上游 `button:focus` 的 5px 深色环特异性高于基础态，必须显式清掉 */
+.mh-page__split-rail-btn:focus {
+  outline: none;
+}
+
+.mh-page__split-rail-btn:focus-visible {
+  color: var(--ui-primary);
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: -2px;
+}
+
+/* --- 宽度过渡期间**内容不跟着重排**（收起 / 展开都算）---
+   内容按 `--mh-page-split-frozen`（该侧展开时的宽度，组件在收起那一刻实测后下发）定宽排布，
+   多出来的部分由本盒子的 overflow:hidden 裁掉 —— 观感还是「滑出去 / 滑进来」，
+   但栏内的滚动容器（Panel.Body、表格包裹层这些 overflow:auto 的件）不会因为宽度被压缩而现出滚动条。
+   取不到值时退回 100%：那种情形是「没给 width 的自适应侧栏」，容器宽度本身不可插值（auto 不能动画），
+   收起/展开是瞬间跳变，也就无所谓过渡期间的重排。 */
+.mh-page__split-sidebar > * {
+  width: var(--mh-page-split-frozen, 100%);
+}
+
+/* --- 右侧栏：左侧栏的镜像（分隔线在侧栏左侧、内距镜像）--- */
+.mh-page__split-sidebar--right {
+  flex-shrink: 0;
+  box-sizing: content-box;
+  border-left: 1px solid var(--ui-base-300);
+  overflow: hidden;
+  padding-left: var(--ui-space-4);
+  transition: width 0.2s ease, padding-left 0.2s ease, border-left-width 0.2s ease;
+}
+
+/* 右侧栏的内容定宽之外再靠右锚定：镜像方向要让「揭开」从右边缘往左走（否则内容像从左栏那侧长出来） */
+.mh-page__split-sidebar--right > * {
+  width: var(--mh-page-split-frozen, 100%);
+  margin-left: auto;
+}
+
+/* --- 主栏在右侧栏存在时补右内距（左侧那条是基类，逐条镜像）---
+   挂类条件只看「右槽位是否存在」，与是否收起无关 ⇒ 收起时主栏留白不跳变。 */
+.mh-page__split--has-right .mh-page__split-main {
+  padding-right: var(--ui-space-4);
+}
+
+/* --- 收起态：宽 0 + 内距 0 + 边线宽 0（边线透明仍占 1px，故归零宽度）；内容延迟到过渡结束才隐藏 ---
+   收起后那一条只剩 16px 的展开把手，可辨认性由**把手上的按钮**（描边 + 底）承担，不由分隔线承担。 */
+.mh-page__split--left-collapsed .mh-page__split-sidebar {
+  padding-right: 0;
+  border-right-width: 0;
+  visibility: hidden;
+  transition: width 0.2s ease, padding-right 0.2s ease, border-right-width 0.2s ease, visibility 0s linear 0.2s;
+}
+
+.mh-page__split--right-collapsed .mh-page__split-sidebar--right {
+  padding-left: 0;
+  border-left-width: 0;
+  visibility: hidden;
+  transition: width 0.2s ease, padding-left 0.2s ease, border-left-width 0.2s ease, visibility 0s linear 0.2s;
+}
+
+/* --- 拖拽中禁过渡（逐帧过渡会让拖拽滞后）--- */
+.mh-page__split-sidebar[data-dragging] {
+  transition: none;
+}
+
+.mh-page__split-sidebar--right[data-dragging] {
+  transition: none;
+}
+
+/* --- 拖拽手柄：0 宽 flex 子项 --- */
+.mh-page__split-handle {
+  flex: 0 0 auto;
+  width: 0;
+  position: relative;
+  /* 手柄整体压在手柄两侧的栏之上：否则跨在分隔线上的收起按钮会被栏内内容盖住 */
+  z-index: 1;
+  cursor: col-resize;
+  /* 触屏拖拽的前提：不交出滚动/缩放手势 */
+  touch-action: none;
+}
+
+/* 命中带：以 1px 分隔线为中心、两侧各扩 4px（9px 可抓），仍在 Split 的 overflow 边界内 */
+.mh-page__split-handle::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 9px;
+}
+
+/* 高亮：主色 1px，精确覆盖原灰线（不新增第二条线） */
+.mh-page__split-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1px;
+  width: 1px;
+  background: var(--ui-primary);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-page__split-handle:hover::after {
+  opacity: 1;
+}
+
+.mh-page__split-handle[data-dragging]::after {
+  opacity: 1;
+}
+
+.mh-page__split-handle--right {
+  flex: 0 0 auto;
+  width: 0;
+  position: relative;
+  z-index: 1;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.mh-page__split-handle--right::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -4px;
+  width: 9px;
+}
+
+.mh-page__split-handle--right::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -1px;
+  width: 1px;
+  background: var(--ui-primary);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.mh-page__split-handle--right:hover::after {
+  opacity: 1;
+}
+
+.mh-page__split-handle--right[data-dragging]::after {
+  opacity: 1;
+}
+
+/* --- 收起按钮：**扁高条**（宽 12 / 高 28，跨在分隔线上）；默认不可见也不拦事件。
+   两条位置关系都是踩过的坑：
+   ① 它比 9px 命中带宽，常驻可点会吞掉栏边内容的点击 ⇒ 默认 `opacity: 0` + `pointer-events: none`；
+   ② 高亮线是手柄的**伪元素**，而伪元素默认绘制在子元素（本按钮）**之上** ⇒ 必须给按钮 `z-index`
+      （同层叠上下文内只有定位元素的 z-index 参与比较，`auto` 视作 0），否则那条 1px 线会横穿按钮中央。 */
+.mh-page__split-handle-btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--ui-base-300);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-base-100);
+  color: var(--ui-base-content-muted);
+  cursor: pointer;
+  /* 同 rail-btn：自绘按钮必须关掉原生外观与原生焦点环，否则按下时会出现系统级描边（黑框） */
+  appearance: none;
+  -webkit-appearance: none;
+  outline: none;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.mh-page__split-handle:hover .mh-page__split-handle-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mh-page__split-handle--right:hover .mh-page__split-handle-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* 显式清掉 `:focus` 态的轮廓：上游 farris 有 `button:focus { outline: -webkit-focus-ring-color auto 5px }`，
+   特异性 (0,1,1) 高于本按钮基础态的 (0,1,0) —— 只写基础态 `outline: none` 压不住它，
+   鼠标点击（`:focus-visible` 不匹配）就会露出那道 5px 深色环。本规则 (0,2,0) 压过上游；
+   焦点反馈只留给紧随其后的 `:focus-visible`（同特异性、顺序在后 ⇒ 它赢）。
+   注：自绘层零 farris，本包之外的样式链若给全局按钮上过焦点环，本规则同样兜住。 */
+.mh-page__split-handle-btn:focus {
+  outline: none;
+}
+
+.mh-page__split-handle-btn:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  outline: 2px solid var(--ui-primary-weak);
+  outline-offset: 1px;
+}
+
+.mh-page__split-handle-btn:hover {
+  border-color: var(--ui-primary);
+  color: var(--ui-primary);
+}
+
+/* --- 拖拽期：整块保持拖动光标并禁选中文字 --- */
+.mh-page__split--resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+/* --- 动效降级：系统要求减少动效时，收起/展开直接到位 --- */
+@media (prefers-reduced-motion: reduce) {
+  .mh-page__split-sidebar {
+    transition: none;
+  }
+
+  .mh-page__split-sidebar--right {
+    transition: none;
+  }
+
+  .mh-page__split-rail {
+    transition: none;
+  }
+
+  .mh-page__split-rail--right {
+    transition: none;
+  }
+}