@manohub/ui 0.6.0

package/dist/components/page/index.d.ts

@@ -0,0 +1,276 @@
+import { type PropType, type SlotsType, type VNode, type VNodeChild } from 'vue';
+import { type Padding } from '../part-padding';
+/**
+ * 页面骨架复合件 —— 页面结构与滚动归属的统一契约。
+ *
+ * 滚动契约写死在 `.mh-page*` 样式：Header / Filter / Footer 不滚；
+ * Body 只管**页面级**滚动归属，只有两档：`mode="scroll"` 自身滚（长内容页）、
+ * `mode="plain"`（默认）不滚 —— 滚动下沉到区域内容区或内容件自持的定高容器。
+ * **表格不靠 Body 的 mode 表达**：外框由 `Table` 的 `framed` 档给，高度与滚动由
+ * 承载它的内容件承担（`Panel.Body`，或表格件自带的定高容器）。
+ *
+ * **Split 不滚，栏内滚动由内容承担** —— 双栏内部用 `Panel`
+ * （Header 固定 + Body `overflow:auto`）承载各自区域的滚动。
+ *
+ * 与 `Panel` 的分工：本件是**页面级**（唯一），管页头规格、页脚固定、页面级滚动归属；
+ * `Panel` 是**区域级**（可多个），只管区域内的三件与区域内滚动。分页归属跟承载表格的容器走。
+ *
+ * **侧栏能力（内建，缺省开启，无需消费方配置）**：
+ * - 分隔线即拖拽手柄：按住左右拖即改宽，夹在 `minWidth`（缺省 160）与 `maxWidth`（缺省 480）之间；
+ * - 手柄上悬停显形一个箭头按钮，点击收起侧栏；收起后页面边缘常驻 16px 展开把手，点击展开并恢复收起前的宽度
+ *   —— 展开按钮**占满整条把手**（全高全宽 + 描边 + 底），收起态里它是整块侧栏唯一看得见的东西；
+ * - `width` 只是**初始宽度**：拖拽结果不持久化（刷新 / 重进回到初始宽度），收起也不清拖出的宽度；
+ * - **宽度过渡期间内容不重排**：内容按展开时的宽度定宽（组件下发 `--mh-page-split-frozen`），
+ *   多出的部分由容器裁掉 —— 栏内滚动容器不会因宽度被压缩而闪出滚动条；
+ * - 左侧栏用 `sidebar`、右侧栏用 `rightSidebar`（互为镜像：分隔线在侧栏左侧、拖拽方向相反），
+ *   两者可同时存在构成三栏；某侧传 `resizable: false` 时该侧不渲染手柄与把手。
+ *
+ * 两级滚动归属（契约）：
+ * - `Page.Body.mode` 管**页面级**（scroll/plain，全页唯一）；
+ * - `Panel.Body` 管**区域内**（Header 固定 / 内容滚）。
+ *
+ * **成员位置固定（归位）**：成员不按书写顺序渲染 —— 以本件为根，一律归到固定位置，
+ * 于是「读代码的顺序」不必等于「视觉顺序」（页脚写最前面也仍在底部）：
+ * - **页面级行**：`Filter → Header → Body → Footer`（与 `Panel` 同款归位法）；
+ * - **主体区**：自由内容（含直接写在根下的 `Page.Split`）—— 没写显式 `Page.Body` 时
+ *   自动包一层 `Page.Body`（缺省 `mode="plain"`），所以双栏可以只写 `Page.Split`。
+ *
+ * 页头右侧的自由位（搜索框 / 按钮 / 等）是 `Page.Header` 的 `extra` 位（属性或插槽），
+ * 没有独立的成员件：那个位置只有页头一个承载者，写成成员等于给它加一层没有意义的转发。
+ *
+ * @example
+ * // 模板 A：列表页（页头 + 表格 + 页脚分页）
+ * <Page>
+ *   <Page.Header title="技能分类" subTitle="共 128 个技能"
+ *                extra={<搜索框 modelValue={kw} />} />
+ *   <Page.Body mode="plain">
+ *     <Table framed rows={rows} columns={columns} rowKey="id" />
+ *   </Page.Body>
+ *   <Page.Footer>
+ *     <Pagination page={page} pageSize={size} total={total} onPageChange={…} />
+ *   </Page.Footer>
+ * </Page>
+ *
+ * // 模板 B：双栏（Split 提供中间分隔线，栏内滚动由 Panel 承担）
+ * <Page.Body mode="plain">
+ *   <Page.Split sidebar={{ width: 208, content: () => <Panel title="业务域" /> }}>
+ *     <Panel title="值映射列表"><Table framed rows={rows} columns={cols} rowKey="id" /></Panel>
+ *   </Page.Split>
+ * </Page.Body>
+ */
+/** 页面骨架（及其各部件）的内距：与 `Panel` / `Form` 共用一套口径（`number` = 四边同值；`{ y, x }` 分别给） */
+export type PagePadding = Padding;
+export interface PageHeaderProps {
+    /** 传入 title 走内置布局；不传则纯 slot 直出（自定义页头出口） */
+    title?: string;
+    /**
+     * 页头副标题：标题**下一行**的次要说明（对象名、统计口径等），随 `title` 一起进内置布局。
+     * 不传即不渲染（页头条高度不变）；`title` 不传时本项不生效（整块走自定义页头出口）。
+     */
+    subTitle?: string;
+    /**
+     * 标题左侧图标：**svg 节点或返回节点的函数**皆可。缺省渲染设计稿默认图标
+     * （MH后台-0911 node 0:3904：26×26 圆角方块，`currentColor` 随主题）。
+     */
+    icon?: VNodeChild | (() => VNodeChild);
+    /**
+     * 页头右侧的自由位（唯一可自定义位）：搜索框 / 按钮 / 下拉等，水平排列。
+     * 传节点或返回节点的函数。布局（垂直居中 / 间距）由标准样式锁死。
+     */
+    extra?: unknown;
+}
+export interface PageBodyProps {
+    /** scroll=自身滚（长内容页）；plain=不滚（默认，滚动归区域内容区 / 内容件自持的定高容器） */
+    mode?: 'scroll' | 'plain';
+    /**
+     * 内容区内距（px 数字 = 四边同值；`{ y, x }` 分别给）。缺省不落行内样式，沿用 CSS 默认（`0 20px`）——
+     * 行内只覆盖**给到的轴**，所以传 `{ y: 16 }` 时左右仍是 CSS 的 20px（与页头左对齐不破）。
+     * 典型用法：「表格 / 卡片不贴页头下边线」→ `padding={{ y: 16 }}`。
+     */
+    padding?: PagePadding;
+}
+export interface PageSplitSidebarProps {
+    /**
+     * 该侧栏的**初始**内容宽（px 数字，`content-box` 语义）：
+     * 不传即自适应（不写死宽度）；拖拽后以拖出的宽度为准 —— 拖拽结果不持久化，刷新 / 重进回到本值。
+     */
+    width?: number;
+    /** 是否内建拖拽手柄与收起按钮，缺省 `true`；`false` 时该侧不渲染手柄/把手、不挂监听 */
+    resizable?: boolean;
+    /** 拖拽下限（px），缺省 160 */
+    minWidth?: number;
+    /** 拖拽上限（px），缺省 480 */
+    maxWidth?: number;
+    /** 首帧是否处于收起态，缺省 `false`；`resizable: false` 时忽略本项 */
+    defaultCollapsed?: boolean;
+    /** 侧栏内容（区域头与滚动归 `Panel`） */
+    content?: () => VNodeChild;
+}
+export interface PageSplitProps {
+    /** 左侧栏 */
+    sidebar?: PageSplitSidebarProps;
+    /** 右侧栏（**镜像**：分隔线在侧栏左侧、拖拽方向相反、收起把手贴右边缘；与 `sidebar` 可同时存在，构成三栏） */
+    rightSidebar?: PageSplitSidebarProps;
+}
+/**
+ * Object.assign 复合件。两个注意点：
+ * 1. Object.assign 后不要再 defineComponent 二次包装，否则 props 类型丢失；
+ * 2. 每个子件必须显式声明 slots（SlotsType），否则 JSX 下 slot 参数类型退化为 any。
+ */
+export declare const Page: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Filter: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 0`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 0`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subTitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        extra: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 13px`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>, () => string | number | boolean | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | import("vue").VNodeArrayChildren | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subTitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        extra: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 13px`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+        icon: any;
+        title: string;
+        subTitle: string;
+        extra: any;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+        extra?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Body: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        mode: {
+            type: () => NonNullable<PageBodyProps["mode"]>;
+            default: string;
+        };
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        mode: {
+            type: () => NonNullable<PageBodyProps["mode"]>;
+            default: string;
+        };
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+        mode: NonNullable<"scroll" | "plain" | undefined>;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Footer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`12px 20px`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`12px 20px`） */
+        padding: {
+            type: PropType<PagePadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Split: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        sidebar: {
+            type: () => PageSplitProps["sidebar"];
+            default: undefined;
+        };
+        rightSidebar: {
+            type: () => PageSplitProps["rightSidebar"];
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        sidebar: {
+            type: () => PageSplitProps["sidebar"];
+            default: undefined;
+        };
+        rightSidebar: {
+            type: () => PageSplitProps["rightSidebar"];
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        sidebar: PageSplitSidebarProps | undefined;
+        rightSidebar: PageSplitSidebarProps | undefined;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type PageCompound = typeof Page;

package/dist/components/page/index.js

@@ -0,0 +1,351 @@
+import { defineComponent, Comment, Text, h, createVNode, onBeforeUnmount, ref, watch, computed } from "vue";
+import { Icon } from "@manohub/icon";
+import { mergePartStyle, partPaddingStyle } from "../part-padding.js";
+import { measureSidebarWidth, clampSplitWidth, projectSplitWidth } from "./split-resize.js";
+const DefaultHeaderIcon = () => createVNode(Icon, {
+  "name": "page-title",
+  "size": 26
+}, null);
+const PageFilter = /* @__PURE__ */ defineComponent({
+  name: "PageFilter",
+  inheritAttrs: false,
+  props: {
+    /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 0`） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-page__filter", attrs.class].filter(Boolean).join(" "),
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const PageHeader = /* @__PURE__ */ defineComponent({
+  name: "PageHeader",
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    subTitle: {
+      type: String,
+      default: void 0
+    },
+    icon: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    extra: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`14px 20px 13px`） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const renderPosition = (slotFn, propValue) => {
+      if (slotFn) return slotFn();
+      if (typeof propValue === "function") return propValue();
+      return propValue;
+    };
+    const renderIcon = () => {
+      const icon = props.icon;
+      if (typeof icon === "function") return icon();
+      return icon ?? DefaultHeaderIcon();
+    };
+    return () => {
+      if (!props.title) {
+        const custom = slots.default?.() ?? null;
+        const paddingStyle = partPaddingStyle(props.padding);
+        return paddingStyle === void 0 ? custom : createVNode("div", {
+          "style": paddingStyle
+        }, [custom]);
+      }
+      const extra = renderPosition(slots.extra, props.extra);
+      return createVNode("header", {
+        "class": "mh-page__header",
+        "style": mergePartStyle(attrs.style, props.padding)
+      }, [createVNode("div", {
+        "class": "mh-page__header-inner"
+      }, [createVNode("div", {
+        "class": "mh-page__header-text"
+      }, [createVNode("div", {
+        "class": "mh-page__header-title-row"
+      }, [createVNode("span", {
+        "class": "mh-page__header-icon"
+      }, [renderIcon()]), createVNode("h1", {
+        "class": "mh-page__header-title"
+      }, [props.title])]), props.subTitle ? createVNode("div", {
+        "class": "mh-page__header-subtitle"
+      }, [props.subTitle]) : null]), extra ? createVNode("div", {
+        "class": "mh-page__header-extra"
+      }, [extra]) : null])]);
+    };
+  }
+});
+const PageBody = /* @__PURE__ */ defineComponent({
+  name: "PageBody",
+  inheritAttrs: false,
+  props: {
+    mode: {
+      type: String,
+      default: "plain"
+    },
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-page__body", `mh-page__body--${props.mode}`],
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const PageFooter = /* @__PURE__ */ defineComponent({
+  name: "PageFooter",
+  inheritAttrs: false,
+  props: {
+    /** 内距（px 数字 = 四边同值；`{ y, x }` 分别给）；缺省不落行内样式，沿用 CSS 默认（`12px 20px`） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("footer", {
+      "class": "mh-page__footer",
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [createVNode("div", {
+      "class": "mh-page__footer-inner"
+    }, [slots.default?.()])]);
+  }
+});
+const PageSplit = /* @__PURE__ */ defineComponent({
+  name: "PageSplit",
+  inheritAttrs: false,
+  props: {
+    sidebar: {
+      type: Object,
+      default: void 0
+    },
+    rightSidebar: {
+      type: Object,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    const createSide = (side) => {
+      const config = () => side === "right" ? props.rightSidebar : props.sidebar;
+      const enabled = () => !!config() && config()?.resizable !== false;
+      const asideEl = ref(null);
+      const draggedWidth = ref(null);
+      const frozenWidth = ref(null);
+      const dragging = ref(false);
+      const collapsed = ref(enabled() && config()?.defaultCollapsed === true);
+      let startX = 0;
+      let startWidth = 0;
+      const onPointerMove = (event) => {
+        const deltaX = event.clientX - startX;
+        draggedWidth.value = clampSplitWidth(projectSplitWidth(startWidth, deltaX, side), config()?.minWidth, config()?.maxWidth);
+      };
+      const stopDrag = () => {
+        dragging.value = false;
+        window.removeEventListener("pointermove", onPointerMove);
+        window.removeEventListener("pointerup", stopDrag);
+        window.removeEventListener("pointercancel", stopDrag);
+      };
+      const startDrag = (event) => {
+        const pointer = event;
+        if (!enabled() || collapsed.value || pointer.button !== 0) return;
+        const target = pointer.target;
+        if (target?.closest?.(".mh-page__split-handle-btn")) return;
+        pointer.preventDefault();
+        startX = pointer.clientX;
+        startWidth = measureSidebarWidth(asideEl.value, side, config()?.width);
+        dragging.value = true;
+        window.addEventListener("pointermove", onPointerMove);
+        window.addEventListener("pointerup", stopDrag);
+        window.addEventListener("pointercancel", stopDrag);
+      };
+      const toggleCollapsed = () => {
+        if (!enabled()) return;
+        stopDrag();
+        frozenWidth.value = collapsed.value ? null : measureSidebarWidth(asideEl.value, side, draggedWidth.value ?? config()?.width);
+        collapsed.value = !collapsed.value;
+      };
+      watch(() => config()?.width, () => {
+        draggedWidth.value = null;
+        frozenWidth.value = null;
+      });
+      const width = computed(() => {
+        if (collapsed.value) return 0;
+        return draggedWidth.value ?? config()?.width;
+      });
+      const contentWidth = computed(() => frozenWidth.value ?? draggedWidth.value ?? config()?.width);
+      return {
+        asideEl,
+        dragging,
+        collapsed,
+        width,
+        contentWidth,
+        enabled,
+        startDrag,
+        stopDrag,
+        toggleCollapsed
+      };
+    };
+    const left = createSide("left");
+    const right = createSide("right");
+    onBeforeUnmount(() => {
+      left.stopDrag();
+      right.stopDrag();
+    });
+    const renderRail = (side, state) => {
+      const isRight = side === "right";
+      const shown = state.collapsed.value;
+      return createVNode("div", {
+        "key": `${side}-rail`,
+        "class": isRight ? "mh-page__split-rail--right" : "mh-page__split-rail"
+      }, [createVNode("button", {
+        "type": "button",
+        "class": "mh-page__split-rail-btn",
+        "aria-label": isRight ? "展开右侧栏" : "展开左侧栏",
+        "tabindex": shown ? 0 : -1,
+        "aria-hidden": shown ? void 0 : "true",
+        "onClick": () => state.toggleCollapsed()
+      }, [createVNode(Icon, {
+        "name": isRight ? "chevron-left" : "chevron-right",
+        "size": 16
+      }, null)])]);
+    };
+    const renderSide = (side, state) => {
+      const config = side === "right" ? props.rightSidebar : props.sidebar;
+      if (!config) return null;
+      const isRight = side === "right";
+      const width = state.width.value;
+      const contentWidth = state.contentWidth.value;
+      const asideStyle = {};
+      if (width !== void 0 && width !== null) asideStyle.width = `${width}px`;
+      if (contentWidth !== void 0 && contentWidth !== null) {
+        asideStyle["--mh-page-split-frozen"] = `${contentWidth}px`;
+      }
+      const aside = createVNode("aside", {
+        "key": `${side}-sidebar`,
+        "ref": state.asideEl,
+        "class": isRight ? "mh-page__split-sidebar--right" : "mh-page__split-sidebar",
+        "style": Object.keys(asideStyle).length > 0 ? asideStyle : void 0,
+        "data-dragging": state.dragging.value ? "" : void 0
+      }, [config.content?.()]);
+      const handle = state.enabled() && !state.collapsed.value ? createVNode("div", {
+        "key": `${side}-handle`,
+        "class": isRight ? "mh-page__split-handle--right" : "mh-page__split-handle",
+        "role": "separator",
+        "aria-orientation": "vertical",
+        "data-dragging": state.dragging.value ? "" : void 0,
+        "onPointerdown": state.startDrag
+      }, [createVNode("button", {
+        "type": "button",
+        "class": "mh-page__split-handle-btn",
+        "aria-label": isRight ? "收起右侧栏" : "收起左侧栏",
+        "onClick": () => state.toggleCollapsed()
+      }, [createVNode(Icon, {
+        "name": isRight ? "chevron-right" : "chevron-left",
+        "size": 12
+      }, null)])]) : null;
+      return isRight ? [handle, aside] : [aside, handle];
+    };
+    return () => {
+      const rootClass = ["mh-page__split", props.rightSidebar ? "mh-page__split--has-right" : "", props.sidebar && left.collapsed.value ? "mh-page__split--left-collapsed" : "", props.rightSidebar && right.collapsed.value ? "mh-page__split--right-collapsed" : "", left.dragging.value || right.dragging.value ? "mh-page__split--resizing" : ""].filter(Boolean).join(" ");
+      return createVNode("div", {
+        "class": rootClass
+      }, [props.sidebar && left.enabled() ? renderRail("left", left) : null, renderSide("left", left), createVNode("div", {
+        "class": "mh-page__split-main"
+      }, [slots.default?.()]), renderSide("right", right), props.rightSidebar && right.enabled() ? renderRail("right", right) : null]);
+    };
+  }
+});
+function splitParts(children) {
+  const filter = [];
+  const header = [];
+  const body = [];
+  const footer = [];
+  const rest = [];
+  for (const child of children) {
+    if (child.type === PageFilter) filter.push(child);
+    else if (child.type === PageHeader) header.push(child);
+    else if (child.type === PageBody) body.push(child);
+    else if (child.type === PageFooter) footer.push(child);
+    else rest.push(child);
+  }
+  return {
+    filter,
+    header,
+    body,
+    footer,
+    rest
+  };
+}
+const PageRoot = /* @__PURE__ */ defineComponent({
+  name: "Page",
+  slots: Object,
+  setup(_, {
+    slots
+  }) {
+    return () => {
+      const raw = slots.default?.();
+      const list = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
+      const children = list.filter((child) => !!child && typeof child === "object" && !Array.isArray(child) && child.type !== Comment && !(child.type === Text && String(child.children ?? "").trim() === ""));
+      const {
+        filter,
+        header,
+        body,
+        footer,
+        rest
+      } = splitParts(children);
+      const bodyNodes = rest.length > 0 ? [...body, h(PageBody, null, {
+        default: () => rest
+      })] : body;
+      return createVNode("div", {
+        "class": "mh-page"
+      }, [filter, header, bodyNodes, footer]);
+    };
+  }
+});
+const Page = Object.assign(PageRoot, {
+  Filter: PageFilter,
+  Header: PageHeader,
+  Body: PageBody,
+  Footer: PageFooter,
+  Split: PageSplit
+});
+export {
+  Page
+};

package/dist/components/page/split-resize.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `Page.Split` 侧栏交互的内部纯函数与常量（**不进对外导出面**：`src/index.ts` 白名单不外扩）。
+ *
+ * 抽出来的理由：宽度夹取与基准实测是**带分支的纯逻辑**（区间归一化、非有限数容错、
+ * content-box 语义下的内距扣除、无布局环境下的回退顺序），放一处便于直接单测；
+ * 组件里只留状态与 DOM 绑定。
+ *
+ * 已知取舍：`measureSidebarWidth` 依赖 `clientWidth`，jsdom 没有布局引擎（恒为 0），
+ * 走的是「回退到 prop 宽度 → 回退到兜底常量」这条路径；浏览器里才有真实实测值。
+ */
+/** 侧栏所在侧：`left` = `sidebar` 槽位；`right` = `rightSidebar` 槽位（镜像） */
+export type SplitSide = 'left' | 'right';
+/** 拖拽下限缺省值（px） */
+export declare const SPLIT_MIN_WIDTH = 160;
+/** 拖拽上限缺省值（px） */
+export declare const SPLIT_MAX_WIDTH = 480;
+/**
+ * 未传 `width` 且实测不到时的拖拽基准兜底。
+ * **只用于拖拽基准**，不参与初始渲染 —— 所以不违背「不传 `width` 就不写死宽度」的口径。
+ */
+export declare const SPLIT_FALLBACK_WIDTH = 208;
+/** 区间归一化：`max < min` 时按数值大小归位（不抛错），缺省 160 / 480 */
+export declare function splitWidthBounds(min?: number, max?: number): {
+    min: number;
+    max: number;
+};
+/**
+ * 夹取到区间并取整（防亚像素抖动）。
+ *
+ * 非有限数的口径：`NaN` 无法比较大小 ⇒ 落回下限；`±Infinity` 有明确方向
+ * （"拖到无穷远"就是顶到那侧的边界）⇒ 由 `Math.min/max` 自然夹到上限 / 下限。
+ */
+export declare function clampSplitWidth(value: number, min?: number, max?: number): number;
+/** 拖拽位移投影为宽度：右侧栏镜像（向左拖变宽） */
+export declare function projectSplitWidth(base: number, deltaX: number, side: SplitSide): number;
+/**
+ * 实测某侧栏的**内容宽**（与 `box-sizing: content-box` 的 `width` 同语义）。
+ *
+ * `clientWidth` 天然排除边框、包含内距，故减去该侧内距即内容宽 —— 不必手工补 1px 边框。
+ * 取不到正值（jsdom 无布局 / 未渲染 / 已收起）时按 `prop 宽度 → 兜底常量` 回退。
+ */
+export declare function measureSidebarWidth(el: HTMLElement | null | undefined, side: SplitSide, fallback?: number): number;