@manohub/app-kit 0.1.0

package/dist/components/app-panel.d.ts

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

package/dist/components/app-panel.js

@@ -0,0 +1,213 @@
+import { defineComponent, createVNode, h } from "vue";
+function panelPaddingStyle(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 = panelPaddingStyle(padding);
+  if (paddingStyle === void 0) return attrsStyle;
+  return [attrsStyle, paddingStyle];
+}
+const AppPanelHeader = /* @__PURE__ */ defineComponent({
+  name: "AppPanelHeader",
+  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 = panelPaddingStyle(props.padding);
+        return paddingStyle === void 0 ? custom : createVNode("div", {
+          "style": paddingStyle
+        }, [custom]);
+      }
+      if (!props.title && !toolbar && !actions) return null;
+      return createVNode("div", {
+        "class": ["ak-panel__header", attrs.class].filter(Boolean).join(" "),
+        "style": mergePartStyle(attrs.style, props.padding)
+      }, [props.title ? createVNode("span", {
+        "class": "ak-panel__header-title"
+      }, [props.title]) : null, createVNode("div", {
+        "class": "ak-panel__header-right"
+      }, [toolbar ? createVNode("div", {
+        "class": "ak-panel__header-toolbar"
+      }, [toolbar]) : null, actions ? createVNode("div", {
+        "class": "ak-panel__header-actions"
+      }, [actions]) : null])]);
+    };
+  }
+});
+const AppPanelBody = /* @__PURE__ */ defineComponent({
+  name: "AppPanelBody",
+  inheritAttrs: false,
+  props: {
+    /** 内容区内距（与根件同一口径）；缺省 0 = 内容贴面板边（页面里的区域通常如此） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-panel__body", attrs.class].filter(Boolean).join(" "),
+      "style": mergePartStyle(attrs.style, props.padding)
+    }, [slots.default?.()]);
+  }
+});
+const AppPanelFooter = /* @__PURE__ */ defineComponent({
+  name: "AppPanelFooter",
+  inheritAttrs: false,
+  props: {
+    /** 页脚内距（与根件同一口径）；缺省 0 = 贴面板边 */
+    padding: {
+      type: [Number, Object],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-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 === AppPanelHeader) header.push(child);
+    else if (child.type === AppPanelBody) body.push(child);
+    else if (child.type === AppPanelFooter) footer.push(child);
+    else rest.push(child);
+  }
+  return {
+    header,
+    body,
+    footer,
+    rest
+  };
+}
+const AppPanelRoot = /* @__PURE__ */ defineComponent({
+  name: "AppPanel",
+  inheritAttrs: false,
+  props: {
+    /** 简写标题：等价于内建 `AppPanel.Header` */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 简写筛选位：等价于内建 `AppPanel.Header` 的 toolbar */
+    toolbar: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    /** 简写操作位：等价于内建 `AppPanel.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(AppPanelHeader, {
+        "title": props.title,
+        "toolbar": props.toolbar,
+        "actions": props.actions
+      }, null) : slots.header?.() ?? null;
+      const bodyNode = body.length > 0 ? body : rest.length > 0 ? h(AppPanelBody, null, {
+        default: () => rest
+      }) : null;
+      const panelStyle = mergePartStyle(attrs.style, props.padding);
+      return createVNode("section", {
+        "class": ["ak-panel", attrs.class].filter(Boolean).join(" "),
+        "style": panelStyle
+      }, [headerNode, bodyNode, footer]);
+    };
+  }
+});
+const AppPanel = Object.assign(AppPanelRoot, {
+  Header: AppPanelHeader,
+  Body: AppPanelBody,
+  Footer: AppPanelFooter
+});
+export {
+  AppPanel,
+  AppPanelBody,
+  AppPanelFooter,
+  AppPanelHeader
+};

package/dist/components/app-section.d.ts

@@ -0,0 +1,68 @@
+import { type SlotsType, type VNodeChild } from 'vue';
+export interface AppSectionProps {
+    /**
+     * 区块标题。不传则该区块**不渲染标题行**，只提供「区块间距」——
+     * 用于「这一块是独立的一件事」但不需要文字的场合。
+     */
+    title?: string;
+}
+/**
+ * 区块：**区块标题 + 一组内容**，负责标题排版与区块之间的距离。
+ *
+ * 它是「区块」这件事的**唯一实现**：页面级（详情/长表单里的小节）与表单内（分组行）
+ * 用的是同一个件 —— 表单里写 `AppForm.Section`，它就是本件（同一个对象、同一套样式），
+ * 名字只是让调用处读起来贴语境，**不存在第二套实现**。
+ *
+ * ## 它管什么 / 不管什么
+ *
+ * - 管：**标题排版**（14px/600，与字段 label 的 14px/400 拉开一个"这是标题"的层级差）、
+ *   **内容行距**（8px：内容块/表单行之间的统一档）、**区块间距**（16px 叠父级 gap）。
+ * - 不管：任何滚动归属（那是 `AppPanel` 的区域职责）、工具位（筛选/操作属于 `AppPanel` 的
+ *   `toolbar` / `actions`）、卡片外观（外观一律由内容件承载，如 `AppTable framed`）。
+ *
+ * 为什么**内容行距也必须由本件给**：父容器（如 `AppForm`）的 `gap` 只作用于它的**直接子元素**，
+ * 内容一旦被包进本件，里面的行距就没人管了 —— 自绘 `<div class="xx-sub-title">` 最常踩的坑
+ * 正是「标题有了、间距乱了」。所以两档间距固定在本件：内容 8px、区块 16px（3:1 的对比才读得出
+ * 「这是两块」）。
+ *
+ * 可以脱离表单单独用（如「校验结果」这类不成表单的区块）：区块间距走 `:not(:first-child)`，
+ * 不依赖兄弟结构。
+ *
+ * **嵌套（区块里再分组）时二级分组自动降级**：直接子区块不叠区块间距（父级 gap 即组内行距）、
+ * 其标题转常规字重 —— 层级差由「一级 14/600 ↔ 二级 14/400」表达（两级都吃 600 就读不出从属）。
+ * 需要二级分组直接嵌套即可，应用侧不要自写 margin / font-weight 去修（视觉属性也在应用侧护栏内）。
+ *
+ * 与 `AppPanel` 的判据：**内容会不会自己滚？有没有区域级筛选/操作/分页？** 有 → `AppPanel`；
+ * 只是「给一段内容起个名」→ 本件。
+ *
+ * @example 表单内的分组
+ * <AppForm labelAlign="left">
+ *   <AppForm.Section title="基本信息">
+ *     <AppForm.Item label="编码" text={definition.code} />
+ *   </AppForm.Section>
+ *   <AppForm.Section title="来源列" v-slots={{ extra: () => <span>{n} / 10</span> }}>
+ *     <AppTable … />
+ *   </AppForm.Section>
+ * </AppForm>
+ *
+ * @example 页面级区块
+ * <AppSection title="映射策略">
+ *   <AppTable framed … />
+ * </AppSection>
+ */
+export declare const AppSection: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    extra?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;