@manohub/ui 0.6.0

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

@@ -0,0 +1,401 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type Padding } from '../part-padding';
+/**
+ * 区域容器（页面内分区）—— 与 `Page` 的分工：
+ *
+ * - `Page`：**页面级**（唯一）。管页头规格、Footer 固定、页面级滚动归属（`Body.mode`）。
+ * - `Panel`：**区域级**（可多个）。只管区域内的三件（Header / Body / Footer）与区域内滚动
+ *   （Header 与 Footer 固定、只有 Body 滚），**不参与页面高度分配**，也不决定页面级滚动归属。
+ *
+ * ## 三件结构（与 `Page` 同款复合写法）
+ *
+ * ```
+ * <Panel>
+ *   <Panel.Header title="值映射列表" toolbar={…} actions={…} />
+ *   <Panel.Body>…内容（表格 / 树 / 表单）…</Panel.Body>
+ *   <Panel.Footer><分页器 … /></Panel.Footer>
+ * </Panel>
+ * ```
+ *
+ * 简写仍可用（等价于「内建 Header + 包一层的 Body」）：`<Panel title=… toolbar=… actions=…>内容</Panel>`；
+ * 两种写法可混用 —— 显式的 `Panel.Header/ Body/ Footer` 会被提到对应位置，其余子节点自动进 Body。
+ *
+ * ## 分页归属（**跟承载表格的容器走**）
+ *
+ * 分页条不按「页面」决定位置，而按**表格所在容器**：
+ * - 表格在 `Panel` 里（区域级列表）→ 放 `Panel.Footer`（面板内表 + 分页是一个整体，面板体滚动、分页常驻）；
+ * - 表格直接挂在 页面主体 下（页面级列表）→ 放 页面页脚。
+ * 把区域列表的分页提到 页面页脚（或把页面级分页塞进面板）都属于错位。
+ *
+ * ## 无框契约
+ *
+ * `Panel` 自身**不加描边、不加圆角、不加阴影、不设独立底色、不加单侧边框** ——
+ * 分区感只由 Header 下方的 1px 分隔线提供（与 `.mh-page__header` 同一手法）；
+ * 两栏之间的竖直分隔线由 `Page` 提供。
+ * 需要卡片外观时由**内容件**承载（表格用 `表格.framed`），业务侧不得给面板补描边/圆角/阴影。
+ *
+ * ## 内距（`padding`）
+ *
+ * 面板与它的三件吃**同一套** `padding`（px 数字 / `{ y, x }`），缺省都不吃（贴各自的边）：
+ *
+ * - 根件 = 整块面板的内距：页面里的区域通常不吃（内外距由 `Page` 的各部件给）；
+ *   弹窗内的区域没有别的东西可给内距，用它自带（`padding={{ y: 12, x: 20 }}`）——
+ *   这样就不必再给面板挂一个「只写 padding」的应用侧类（那类规则曾经每个弹窗各写一份）。
+ * - `Panel.Body` = 内容区的内距，**弹窗里最常用的一条**：如向导内容区
+ *   `padding={{ y: 24, x: 100 }}` —— `y` 是上下留白，`x` 开大即充当**限宽**
+ *   （宽弹窗里不让表单行一路拉到右边缘）；这条以前是应用侧的「只写 padding」类。
+ * - `Panel.Footer` = 常驻控件（分页条等）与内容的距离，如 `padding={{ y: 10 }}`。
+ * - `Panel.Header` = 内建头那一行的内距；走 `header` 插槽时（整行替换）会把自定义头**包一层**
+ *   只带内距的 div（自定义头内部的几何仍归消费方）。
+ *
+ * ## 两位分工（不可互换）
+ *
+ * - `toolbar`：**本区域的筛选/搜索位**（≤3 个字段，过滤本区域数据）
+ * - `actions`：**本区域的操作位**（该区域的新建 / 刷新等）
+ *
+ * 筛选归属判据：**先问「过滤谁的数据」决定放哪个区域的 toolbar，再问「几个字段」** ——
+ * 字段数 > 3 时上提为页面级 页面级筛选区。把筛选塞进 `actions`、或把操作塞进 `toolbar` 均属违规。
+ *
+ * 完全自定义的面板头请走 `Panel.Header`（不传 `title`）或 `header` 插槽（需在接入方登记为白名单）。
+ * **只给 `toolbar` / `actions`、不给 `title` 也是合法形态**：那一行照渲染（标题在容器外层时用，如弹窗内的区域
+ * —— 弹窗标题栏已写了区域名，面板头只剩一行「搜索 + 操作」）；三样都不给才不渲染头。
+ *
+ * @example 区域级列表（表格 + 分页都在本区域内）
+ * <Panel>
+ *   <Panel.Header title="值映射列表" toolbar={<搜索框 … />} actions={<Button>新建</Button>} />
+ *   <Panel.Body><表格 framed rows={rows} columns={columns} rowKey="id" /></Panel.Body>
+ *   <Panel.Footer><分页器 page={page} pageSize={size} total={total} onPageChange={…} /></Panel.Footer>
+ * </Panel>
+ */
+export interface PanelProps {
+    /** 面板标题；缺省时若提供了 `header` 插槽则走完全自定义面板头 */
+    title?: string;
+    /** 本区域的筛选/搜索位（≤3 字段），与 `actions` 分工不可互换 */
+    toolbar?: unknown;
+    /** 本区域的操作位（新建 / 刷新等） */
+    actions?: unknown;
+    /**
+     * 面板内距（**px 数字**，与 `Form.labelWidth` / `表格.rowHeight` 同口径：几何值是设计基准，不跟根字号）：
+     * - `number` → 四边同值（`padding={16}`）；
+     * - `{ y, x }` → 上下 / 左右分别给（`{ y: 12, x: 20 }`，弹窗内的区域常用 —— 与 `Page` 的页面左右内距同档）。
+     *
+     * **缺省 0**：面板贴容器边，内距由所在容器给（页面里是 `Page` 的各部件，弹窗里没有别的东西可给）。
+     * 无框契约不变：这里只是内距，描边 / 圆角 / 底色仍一概不加。
+     *
+     * 三件（`Header` / `Body` / `Footer`）有**同名同口径**的 `padding`，管各自那块的内距。
+     */
+    padding?: PanelPadding;
+}
+/** 面板（及其三件）的内距：与 `Form` / `Panel` 共用一套口径（`number` = 四边同值；`{ y, x }` 分别给） */
+export type PanelPadding = Padding;
+/** 面板标题行（区域级）：标题 + 本区域筛选位(toolbar) + 本区域操作位(actions) */
+export declare const PanelHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * 面板标题；缺省时**不渲染标题节点**，但仍会渲染 `toolbar` / `actions` 那一行
+     * （无标题的区域头，见组件头注释）；要给完全自定义的头走 `header` 插槽。
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 本区域的筛选/搜索位（≤3 字段）；节点或返回节点的函数 */
+    toolbar: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 本区域的操作位（新建 / 刷新等）；节点或返回节点的函数 */
+    actions: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 面板标题；缺省时**不渲染标题节点**，但仍会渲染 `toolbar` / `actions` 那一行
+     * （无标题的区域头，见组件头注释）；要给完全自定义的头走 `header` 插槽。
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 本区域的筛选/搜索位（≤3 字段）；节点或返回节点的函数 */
+    toolbar: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 本区域的操作位（新建 / 刷新等）；节点或返回节点的函数 */
+    actions: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+    toolbar: any;
+    title: string;
+    actions: any;
+}, SlotsType<{
+    header?: () => VNodeChild;
+    /** 自定义标题节点（替代 `title` 属性；标题里要放图标 / 计数 / 状态点时用它） */
+    title?: () => VNodeChild;
+    toolbar?: () => VNodeChild;
+    actions?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 面板内容区：**区域内的滚动唯一归属**（Header / Footer 固定，只有它滚）。
+ *
+ * 表格场景天然不双滚：`.mh-table { height: 100% }` 让表格恰好填满 Body、由底层网格内部滚。
+ * 反例：别在 Body 里给 表格族 外套一层 `height:auto` 的 div，否则 Body 整块滚、表头跟着走。
+ *
+ * `padding` 是**内容的内距**（不改变滚动归属）：弹窗里的内容区最常用它
+ * （`padding={{ y: 24, x: 100 }}` —— `x` 开大即充当限宽），从此不必再给 Body 挂一个「只写 padding」的应用侧类。
+ */
+export declare const PanelBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 面板页脚：区域内**常驻**控件（本区域表格的分页条等），不随内容滚动。
+ *
+ * `padding` 用来把常驻控件与上面的内容拉开（如 `padding={{ y: 10 }}`）——
+ * 页脚自己没有内距，以前这条距离各弹窗各写一个 `padding-top` 的应用侧类。
+ */
+export declare const PanelFooter: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    padding: Padding;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 复合件入口：`Panel` + `Panel.Header` / `Panel.Body` / `Panel.Footer`
+ * （与 `Page` 同款 Object.assign 复合写法）
+ */
+export declare const Panel: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        /** 简写标题：等价于内建 `Panel.Header` */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 简写筛选位：等价于内建 `Panel.Header` 的 toolbar */
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 简写操作位：等价于内建 `Panel.Header` 的 actions */
+        actions: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 面板内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        padding: Padding;
+        toolbar: any;
+        title: string;
+        actions: any;
+    }, true, {}, SlotsType<{
+        default?: () => VNodeChild;
+        header?: () => VNodeChild;
+        toolbar?: () => VNodeChild;
+        actions?: () => VNodeChild;
+    }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        /** 简写标题：等价于内建 `Panel.Header` */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 简写筛选位：等价于内建 `Panel.Header` 的 toolbar */
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 简写操作位：等价于内建 `Panel.Header` 的 actions */
+        actions: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 面板内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        padding: Padding;
+        toolbar: any;
+        title: string;
+        actions: any;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    /** 简写标题：等价于内建 `Panel.Header` */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 简写筛选位：等价于内建 `Panel.Header` 的 toolbar */
+    toolbar: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 简写操作位：等价于内建 `Panel.Header` 的 actions */
+    actions: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    /** 面板内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边 */
+    padding: {
+        type: PropType<PanelPadding>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    padding: Padding;
+    toolbar: any;
+    title: string;
+    actions: any;
+}, {}, string, SlotsType<{
+    default?: () => VNodeChild;
+    header?: () => VNodeChild;
+    toolbar?: () => VNodeChild;
+    actions?: () => VNodeChild;
+}>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /**
+         * 面板标题；缺省时**不渲染标题节点**，但仍会渲染 `toolbar` / `actions` 那一行
+         * （无标题的区域头，见组件头注释）；要给完全自定义的头走 `header` 插槽。
+         */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 本区域的筛选/搜索位（≤3 字段）；节点或返回节点的函数 */
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 本区域的操作位（新建 / 刷新等）；节点或返回节点的函数 */
+        actions: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>, () => VNodeChild, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /**
+         * 面板标题；缺省时**不渲染标题节点**，但仍会渲染 `toolbar` / `actions` 那一行
+         * （无标题的区域头，见组件头注释）；要给完全自定义的头走 `header` 插槽。
+         */
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        /** 本区域的筛选/搜索位（≤3 字段）；节点或返回节点的函数 */
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 本区域的操作位（新建 / 刷新等）；节点或返回节点的函数 */
+        actions: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+        toolbar: any;
+        title: string;
+        actions: any;
+    }, SlotsType<{
+        header?: () => VNodeChild;
+        /** 自定义标题节点（替代 `title` 属性；标题里要放图标 / 计数 / 状态点时用它） */
+        title?: () => VNodeChild;
+        toolbar?: () => VNodeChild;
+        actions?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Body: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Footer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+        padding: {
+            type: PropType<PanelPadding>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        padding: Padding;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type PanelCompound = typeof Panel;

package/dist/components/panel/index.js

@@ -0,0 +1,193 @@
+import { defineComponent, createVNode, h } from "vue";
+import { mergePartStyle, partPaddingStyle } from "../part-padding.js";
+const PanelHeader = /* @__PURE__ */ defineComponent({
+  name: "PanelHeader",
+  inheritAttrs: false,
+  props: {
+    /**
+     * 面板标题；缺省时**不渲染标题节点**，但仍会渲染 `toolbar` / `actions` 那一行
+     * （无标题的区域头，见组件头注释）；要给完全自定义的头走 `header` 插槽。
+     */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 本区域的筛选/搜索位（≤3 字段）；节点或返回节点的函数 */
+    toolbar: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 本区域的操作位（新建 / 刷新等）；节点或返回节点的函数 */
+    actions: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 头这一行的内距（与根件同一口径）；内建头自带 `0 8px` 的内距，本项按需覆盖 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const renderSlotValue = (slotFn, propValue) => {
+      if (slotFn) return slotFn();
+      if (typeof propValue === "function") return propValue();
+      return propValue;
+    };
+    return () => {
+      const toolbar = renderSlotValue(slots.toolbar, props.toolbar);
+      const actions = renderSlotValue(slots.actions, props.actions);
+      if (slots.header) {
+        const custom = slots.header();
+        const paddingStyle = partPaddingStyle(props.padding);
+        return paddingStyle === void 0 ? custom : createVNode("div", {
+          "style": paddingStyle
+        }, [custom]);
+      }
+      if (!props.title && !slots.title && !toolbar && !actions) return null;
+      return createVNode("div", {
+        "class": ["mh-panel__header", attrs.class].filter(Boolean).join(" "),
+        "style": mergePartStyle(attrs.style, props.padding)
+      }, [slots.title || props.title ? createVNode("span", {
+        "class": "mh-panel__header-title"
+      }, [slots.title ? slots.title() : props.title]) : null, createVNode("div", {
+        "class": "mh-panel__header-right"
+      }, [toolbar ? createVNode("div", {
+        "class": "mh-panel__header-toolbar"
+      }, [toolbar]) : null, actions ? createVNode("div", {
+        "class": "mh-panel__header-actions"
+      }, [actions]) : null])]);
+    };
+  }
+});
+const PanelBody = /* @__PURE__ */ defineComponent({
+  name: "PanelBody",
+  inheritAttrs: false,
+  props: {
+    /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-panel__body", attrs.class].filter(Boolean).join(" "),
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const PanelFooter = /* @__PURE__ */ defineComponent({
+  name: "PanelFooter",
+  inheritAttrs: false,
+  props: {
+    /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["mh-panel__footer", attrs.class].filter(Boolean).join(" "),
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+function splitParts(children) {
+  const header = [];
+  const body = [];
+  const footer = [];
+  const rest = [];
+  for (const child of children) {
+    if (child.type === PanelHeader) header.push(child);
+    else if (child.type === PanelBody) body.push(child);
+    else if (child.type === PanelFooter) footer.push(child);
+    else rest.push(child);
+  }
+  return {
+    header,
+    body,
+    footer,
+    rest
+  };
+}
+const PanelRoot = /* @__PURE__ */ defineComponent({
+  name: "Panel",
+  inheritAttrs: false,
+  props: {
+    /** 简写标题：等价于内建 `Panel.Header` */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 简写筛选位：等价于内建 `Panel.Header` 的 toolbar */
+    toolbar: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 简写操作位：等价于内建 `Panel.Header` 的 actions */
+    actions: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 面板内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const raw = slots.default?.();
+      const children = (Array.isArray(raw) ? raw : raw == null ? [] : [raw]).filter((child) => !!child && typeof child === "object");
+      const {
+        header,
+        body,
+        footer,
+        rest
+      } = splitParts(children);
+      const hasBuiltinHeader = !!props.title || !slots.header && (props.toolbar !== void 0 || props.actions !== void 0);
+      const headerNode = header.length > 0 ? header : hasBuiltinHeader ? createVNode(PanelHeader, {
+        "title": props.title,
+        "toolbar": props.toolbar,
+        "actions": props.actions
+      }, null) : slots.header?.() ?? null;
+      const bodyNode = body.length > 0 ? body : rest.length > 0 ? h(PanelBody, null, {
+        default: () => rest
+      }) : null;
+      const panelStyle = mergePartStyle(attrs.style, props.padding);
+      return createVNode("section", {
+        "class": ["mh-panel", attrs.class].filter(Boolean).join(" "),
+        "style": panelStyle
+      }, [headerNode, bodyNode, footer]);
+    };
+  }
+});
+const Panel = Object.assign(PanelRoot, {
+  Header: PanelHeader,
+  Body: PanelBody,
+  Footer: PanelFooter
+});
+export {
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader
+};

package/dist/components/part-padding.d.ts

@@ -0,0 +1,27 @@
+import type { StyleValue } from 'vue';
+/**
+ * 骨架件的**内距**口径（`Panel` 及其三件、`Form` 共用同一套）。
+ *
+ * - `number` → 四边同值（`padding={16}`）；
+ * - `{ y, x }` → 上下 / 左右分别给（`{ y: 12, x: 20 }`，弹窗里的容器常用 —— 与 `Page` 的页面左右内距同档），
+ *   **缺哪边就不落哪边的声明**（只给 `y` 时不覆盖消费方在 `style` 里写的左右内距）。
+ *
+ * 为什么是 px 数字而不是 CSS 字符串：几何值在本仓是**设计基准**，不跟根字号
+ * （与 `Form.labelWidth` / `表格.rowHeight` 同口径）；要写自适应内距的场合请走 `class`。
+ */
+export type Padding = number | {
+    y?: number;
+    x?: number;
+};
+/**
+ * 内距 → 行内样式。缺省（`undefined`）时返回 `undefined`：**不额外产生 style 属性**，
+ * DOM 与「没有这个维度」时完全一致。
+ */
+export declare function partPaddingStyle(padding: Padding | undefined): StyleValue | undefined;
+/**
+ * 合并「消费方给的 `style`」与「内距行内样式」：两者都可能有，内距排在后面
+ * —— 同一属性以组件的 `padding` 为准（消费方要覆盖就用 `class` 里更具体的规则）。
+ *
+ * 不给 `padding` 时**原样返回消费方的 style**（含 `undefined`）。
+ */
+export declare function mergePartStyle(attrsStyle: unknown, padding: Padding | undefined): StyleValue | undefined;

package/dist/components/part-padding.js

@@ -0,0 +1,23 @@
+function partPaddingStyle(padding) {
+  if (padding === void 0) return void 0;
+  if (typeof padding === "number") return { padding: `${padding}px` };
+  const style = {};
+  if (padding.y !== void 0) {
+    style.paddingTop = `${padding.y}px`;
+    style.paddingBottom = `${padding.y}px`;
+  }
+  if (padding.x !== void 0) {
+    style.paddingLeft = `${padding.x}px`;
+    style.paddingRight = `${padding.x}px`;
+  }
+  return style;
+}
+function mergePartStyle(attrsStyle, padding) {
+  const paddingStyle = partPaddingStyle(padding);
+  if (paddingStyle === void 0) return attrsStyle;
+  return [attrsStyle, paddingStyle];
+}
+export {
+  mergePartStyle,
+  partPaddingStyle
+};