@manohub/ui 0.6.1 → 0.7.1

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

@@ -4,6 +4,33 @@ import { type Padding } from '../part-padding';
 export type FormPadding = Padding;
 /** label 列的水平对齐：`right`（默认，与 farris / 主流水平表单一致）或 `left` */
 export type FormLabelAlign = 'left' | 'right';
+/**
+ * 字段行的排布档：
+ *
+ * - `1`（默认）：逐行；
+ * - `2 ~ 6`：**列数上限** —— 容器放得下 N 列就并排，放不下**少排一列**（不会把控件压成窄条）。
+ *   高列数（5 / 6）在默认最小宽 320 下要容器 1632 / 1960px 才排得出来，普通表单页用不到 ——
+ *   留着它是给「宽屏展示页 / 大屏看板」这类场景，配 `columnMinWidth` 才好落地；
+ * - `'auto'`：**列数随容器宽度动态变化** —— 能排几列排几列，每列宽由 `columnMinWidth` 决定。
+ *
+ * 两类的差别是**可预期性**（不是能力高低）：
+ *
+ * - 数字档承诺「最多 N 列」，所以「哪几个字段同排」在够宽的容器里是确定的；
+ * - 动态档会一路排下去（默认参数下 1320px 就够 4 列），窄了就减 ——
+ *   同一个表单在不同容器里列数不同 ⇒ **字段的相对位置会变**。要「两个字段必须并肩」就别用它。
+ */
+export type FormColumns = 1 | 2 | 3 | 4 | 5 | 6 | 'auto';
+/**
+ * 行内**垂直**对齐（label 与控件在控件行内怎么对齐）：
+ *
+ * - `center`（默认）：label 文字与控件**中线**对齐 —— 单行控件（输入框 / 选择器 / 开关）用它；
+ * - `start`：label 与控件**首行文字**对齐 —— 多行控件（文本域）与整块内容用它，
+ *   否则 label 会落到整块高度的中间。
+ *
+ * 不传即**自动判定**（样式按控件类型切档：文本域行零配置就是顶对齐）；
+ * 显式传入优先于自动判定，用于自绘内容（卡片组 / 表格 / 富文本这类样式认不出来的块）。
+ */
+export type FormItemAlign = 'center' | 'start';
 /** 表单值：**字段名 → 值**（键就是 `Form.Item` 的 `name`） */
 export type FormValues = Record<string, unknown>;
 /**
@@ -31,16 +58,27 @@ export interface FormProps {
      *
      * 宽表单（>600px）里让输入框一路拉到右边缘很难看，两种收法二选一：
      * ① 收宽度 —— 传 `controlWidth={360}`，控件列封顶、右侧留白；
-     * ② 分两列 —— 传 `columns={2}`，把行并排起来（更充分地用宽度，见下）。
+     * ② 分列 —— 传 `columns`（`2 | 3 | 4` 上限档，或 `'auto'` 动态），把行并排起来（见下）。
      */
     controlWidth?: number;
     /**
-     * 列数：`1`（默认，逐行）或 `2`（**容器够宽才并排**，窄了按列最小宽度自动回落一列）。
+     * 列数：`1`（默认，逐行）/ `2 ~ 6`（**容器够宽才并排**，窄了按列最小宽度自动回落一列）/
+     * `'auto'`（列数随容器宽度动态变化，取舍见 `FormColumns`）。
      *
-     * 两列下每一行都要能独立成格，所以「整行内容」（说明行、卡片组、表格、文本域）记得
-     * 在对应 `Form.Item` 上给 `fullWidth`，否则会被压成半宽。
+     * 多列下每一行都要能独立成格，所以「整行内容」（说明行、卡片组、表格、文本域）记得
+     * 在对应 `Form.Item` 上给 `fullWidth`，否则会被压成一格。
      */
-    columns?: 1 | 2;
+    columns?: FormColumns;
+    /**
+     * 一列的**最小宽度**（px）；缺省取令牌 `--ui-form-column-min`（320 = 「label 120 + 一个还能用的
+     * 输入框」的下限）。
+     *
+     * 它同时是**回落阈值**与**动态列数的除数**：数字档下容器窄于
+     * `N × 最小宽 + (N − 1) × 行距` 就少排一列；动态档下列数 =
+     * `floor((容器宽 + 行距) / (最小宽 + 行距))`。抽屉 / 弹窗里嫌字段太窄就调小（如 280），
+     * 宽页面里嫌列太多就调大（如 380）。
+     */
+    columnMinWidth?: number;
     /**
      * 表单内距（**px 数字**，与 `Panel` 同一口径）：`number` = 四边同值；`{ y, x }` = 上下 / 左右分别给。
      *
@@ -112,6 +150,11 @@ export interface FormItemProps {
      * 两个都给时 `text` 优先（`readonly` 只是把 label 的弱化带过去）。
      */
     readonly?: boolean;
+    /**
+     * 行内**垂直**对齐：`center`（默认，label 与控件中线对齐）/ `start`（label 与控件首行文字对齐，
+     * 用于多行与整块内容）。不传即按控件类型自动判定（文本域自动顶对齐），显式传入优先。
+     */
+    align?: FormItemAlign;
 }
 /**
  * 表单行（**自建**）：`label + 控件 + 错误 + 说明` 四件。
@@ -128,13 +171,28 @@ export interface FormItemProps {
  * ## 宽表单怎么处理（两条杠杆，可叠加）
  *
  * - **限宽**：`controlWidth` 封顶控件列（表单级给默认、逐行可覆盖）—— 单列表单不至于把输入框拉成长条；
- * - **分两列**：`columns={2}` 让行并排，宽度用得更充分；列最小宽度取令牌
- *   `--ui-form-column-min`（默认 320），所以窄容器会**自动回落成一列**，不需要消费方写媒体查询。
- *   两列下「整块内容」记得 `fullWidth`。
+ * - **分列**：`columns` 让行并排，宽度用得更充分。档位见 `FormColumns`：
+ *   `2 ~ 6` 是**列数上限**（宽够就并排、窄了自动少排一列）；`'auto'` 是**列数随宽度动态变化**。
+ *   回落阈值与动态列数都由 `columnMinWidth`（缺省令牌 `--ui-form-column-min` = 320）决定，
+ *   **不需要消费方写媒体查询**；多列下「整块内容」记得 `fullWidth`。
  *
  * `Form.Item` 是唯一入口（`Form` 只承载表单级设置、行间距/列数与容器内距），
  * 控件从默认插槽进，因此输入框 / 下拉 / 文本域 / 自绘分组卡片共用同一个容器。
  *
+ * ## 行内垂直对齐（label 与控件怎么对齐）
+ *
+ * 对齐参照是**控件那一行**，不是整行：控件列与 label 同处第 1 行，错误 / 说明自然落第 2 行起 ——
+ * 所以提示文案的有无与长短都不会带动 label 的位置。规则按控件形态自动切档，消费方零配置：
+ *
+ * - **单行控件**（输入框 / 选择器 / 开关 / 自绘单行内容）：label 与控件**中线**对齐，**与控件高度无关**
+ *   —— 档位切 sm/md/lg、换主题、放自绘控件都自动成立；
+ * - **多行与整块内容**（文本域这类样式认得出形态的）：label 与控件**首行文字**对齐，不会落到整块中间；
+ * - 样式认不出形态的自绘块（卡片组 / 表格 / 富文本）用 `align="start"` 显式声明；要强制居中用 `align="center"`。
+ *
+ * **本件不再依赖任何「控件高度」常量**：从前用一个外部注入的高度变量把 label 撑到控件高，
+ * 而那个变量在骨架层没有任何出处（回退成 `auto`），于是 label 盒退化成一行文字并贴行顶 ——
+ * 输入框中线偏高 6px、大号档偏高 10px、文本域偏高 9px，档位越高错得越多。
+ *
  * ## 容器内距（`padding`）
  *
  * 与 `Panel` **同一口径同一实现**（`src/components/part-padding.ts`）：`number` 四边同值、
@@ -211,6 +269,11 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+        type: PropType<FormItemAlign>;
+        default: undefined;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /** 字段名（绑定的键）；不传即纯布局行（值由消费方自己在控件上绑定） */
     name: {
@@ -259,12 +322,18 @@ export declare const FormItem: import("vue").DefineComponent<import("vue").Extra
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+        type: PropType<FormItemAlign>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
     text: string;
     name: string;
     label: string;
     error: string;
     required: boolean;
+    align: FormItemAlign;
     readonly: boolean;
     hint: string;
     labelWidth: number;
@@ -345,11 +414,16 @@ export declare const Form: {
             type: NumberConstructor;
             default: undefined;
         };
-        /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+        /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
         columns: {
-            type: PropType<1 | 2>;
+            type: PropType<FormColumns>;
             default: number;
         };
+        /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+        columnMinWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
         /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
         padding: {
             type: PropType<FormPadding>;
@@ -398,11 +472,12 @@ export declare const Form: {
         onChange: (values: FormValues) => void;
         defaultValue: FormValues;
         gap: number;
-        columns: 1 | 2;
+        columns: FormColumns;
         modelValue: FormValues;
         labelWidth: number;
         labelAlign: FormLabelAlign;
         controlWidth: number;
+        columnMinWidth: number;
     }, true, {}, SlotsType<{
         default?: () => VNodeChild;
     }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -428,11 +503,16 @@ export declare const Form: {
             type: NumberConstructor;
             default: undefined;
         };
-        /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+        /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
         columns: {
-            type: PropType<1 | 2>;
+            type: PropType<FormColumns>;
             default: number;
         };
+        /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+        columnMinWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
         /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
         padding: {
             type: PropType<FormPadding>;
@@ -479,11 +559,12 @@ export declare const Form: {
         onChange: (values: FormValues) => void;
         defaultValue: FormValues;
         gap: number;
-        columns: 1 | 2;
+        columns: FormColumns;
         modelValue: FormValues;
         labelWidth: number;
         labelAlign: FormLabelAlign;
         controlWidth: number;
+        columnMinWidth: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -504,11 +585,16 @@ export declare const Form: {
         type: NumberConstructor;
         default: undefined;
     };
-    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
     columns: {
-        type: PropType<1 | 2>;
+        type: PropType<FormColumns>;
         default: number;
     };
+    /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+    columnMinWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
     padding: {
         type: PropType<FormPadding>;
@@ -557,11 +643,12 @@ export declare const Form: {
     onChange: (values: FormValues) => void;
     defaultValue: FormValues;
     gap: number;
-    columns: 1 | 2;
+    columns: FormColumns;
     modelValue: FormValues;
     labelWidth: number;
     labelAlign: FormLabelAlign;
     controlWidth: number;
+    columnMinWidth: number;
 }, {}, string, SlotsType<{
     default?: () => VNodeChild;
 }>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
@@ -637,6 +724,11 @@ export declare const Form: {
             type: BooleanConstructor;
             default: boolean;
         };
+        /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+        align: {
+            type: PropType<FormItemAlign>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 字段名（绑定的键）；不传即纯布局行（值由消费方自己在控件上绑定） */
         name: {
@@ -685,12 +777,18 @@ export declare const Form: {
             type: BooleanConstructor;
             default: boolean;
         };
+        /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+        align: {
+            type: PropType<FormItemAlign>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
         text: string;
         name: string;
         label: string;
         error: string;
         required: boolean;
+        align: FormItemAlign;
         readonly: boolean;
         hint: string;
         labelWidth: number;

package/dist/components/form/index.js

@@ -55,6 +55,11 @@ const FormItem = /* @__PURE__ */ defineComponent({
     readonly: {
       type: Boolean,
       default: false
+    },
+    /** 行内垂直对齐；不传即自动（单行居中、多行顶对齐） */
+    align: {
+      type: String,
+      default: void 0
     }
   },
   slots: Object,
@@ -95,6 +100,10 @@ const FormItem = /* @__PURE__ */ defineComponent({
           "mh-form-item",
           props.error ? "is-invalid" : "",
           props.fullWidth ? "mh-form-item--full" : "",
+          // 无 label 列：控件位与提示横跨整行（两列 grid 下第一列不能留空位）
+          showLabel ? "" : "mh-form-item--no-label",
+          // 行内垂直对齐：**只在显式传入时**挂类；不传即由样式按控件类型自动判定（见 form.css 的顶对齐档）
+          props.align ? `mh-form-item--align-${props.align}` : "",
           // 右对齐是基类默认值，只有左对齐需要额外的修饰类（两处都挂会让「谁胜出」依赖源码顺序）
           labelAlign === "left" ? "mh-form-item--label-left" : "",
           // 只读展示行：label 降一档为次要色，与值拉开层级（样式见 `.mh-form-item--readonly .mh-form-item__label`）
@@ -123,11 +132,11 @@ const FormItem = /* @__PURE__ */ defineComponent({
           "class": "mh-form-item__text",
           "data-empty": textIsEmpty ? "true" : "false"
         }, [textIsEmpty ? FORM_TEXT_EMPTY : props.text])
-      ) : slots.default?.(scope()), props.error ? createVNode("div", {
+      ) : slots.default?.(scope())]), props.error ? createVNode("div", {
         "class": "mh-form-item__error"
       }, [props.error]) : null, props.hint ? createVNode("div", {
         "class": "mh-form-item__hint"
-      }, [props.hint]) : null])]);
+      }, [props.hint]) : null]);
     };
   }
 });
@@ -198,14 +207,19 @@ const FormRoot = /* @__PURE__ */ defineComponent({
       type: Number,
       default: void 0
     },
-    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    /** 列数：1（逐行，默认）/ 2~6（够宽才并排，窄了回落一列）/ 'auto'（列数随容器宽度动态变化） */
     columns: {
-      type: Number,
+      type: [Number, String],
       default: 1
     },
+    /** 一列的最小宽度（px）；缺省取令牌 --ui-form-column-min（320）；它同时是回落阈值 */
+    columnMinWidth: {
+      type: Number,
+      default: void 0
+    },
     /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
     padding: {
-      type: [Number, Object],
+      type: [Number, Object, String],
       default: void 0
     },
     /**
@@ -302,6 +316,12 @@ const FormRoot = /* @__PURE__ */ defineComponent({
         return cleared;
       }
     });
+    const columnsClass = () => {
+      const value = props.columns;
+      if (value === "auto") return "mh-form--columns-auto";
+      if (typeof value !== "number" || value <= 1) return "";
+      return value === 2 ? "mh-form--two-column" : `mh-form--columns-${value}`;
+    };
     return () => {
       const raw = slots.default?.();
       const list = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
@@ -310,10 +330,20 @@ const FormRoot = /* @__PURE__ */ defineComponent({
         rest
       } = splitFormHeader(list);
       return createVNode("div", {
-        "class": ["mh-form", props.columns === 2 ? "mh-form--two-column" : "", props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
-        "style": [mergePartStyle(attrs.style, props.padding), props.gap !== void 0 ? {
-          gap: `${props.gap}px`
-        } : null]
+        "class": ["mh-form", columnsClass(), props.layout === "vertical" ? "mh-form--vertical" : "", attrs.class].filter(Boolean).join(" "),
+        "style": [
+          mergePartStyle(attrs.style, props.padding),
+          /* 行距同时下发实体 `gap` 与变量：多列的轨道下限公式要用**同一个**行距值算 ——
+             从前公式里硬编码 8px，`gap={16}` 时列宽会算偏（临界宽度上还会误判回落）。 */
+          props.gap !== void 0 ? {
+            gap: `${props.gap}px`,
+            "--mh-form-gap": `${props.gap}px`
+          } : null,
+          /* 一列最小宽度：动态档列数的除数、数字档的回落阈值 */
+          props.columnMinWidth !== void 0 ? {
+            "--mh-form-column-min": `${props.columnMinWidth}px`
+          } : null
+        ]
       }, [header, rest]);
     };
   }

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

@@ -249,12 +249,12 @@ export declare const Input: import("vue").DefineComponent<import("vue").ExtractP
     autofocus: boolean;
     modelValue: string;
     status: InputStatus;
+    as: "button" | "input";
     readonly: boolean;
     clearable: boolean;
     maxlength: number;
     showCount: boolean;
     onEnter: (v: string) => void;
-    as: "button" | "input";
     controlClass: string;
     controlAttrs: Record<string, unknown>;
     hasValue: boolean;
@@ -547,12 +547,12 @@ export declare const InputCompound: {
         autofocus: boolean;
         modelValue: string;
         status: InputStatus;
+        as: "button" | "input";
         readonly: boolean;
         clearable: boolean;
         maxlength: number;
         showCount: boolean;
         onEnter: (v: string) => void;
-        as: "button" | "input";
         controlClass: string;
         controlAttrs: Record<string, unknown>;
         hasValue: boolean;
@@ -678,12 +678,12 @@ export declare const InputCompound: {
         autofocus: boolean;
         modelValue: string;
         status: InputStatus;
+        as: "button" | "input";
         readonly: boolean;
         clearable: boolean;
         maxlength: number;
         showCount: boolean;
         onEnter: (v: string) => void;
-        as: "button" | "input";
         controlClass: string;
         controlAttrs: Record<string, unknown>;
         hasValue: boolean;
@@ -804,12 +804,12 @@ export declare const InputCompound: {
     autofocus: boolean;
     modelValue: string;
     status: InputStatus;
+    as: "button" | "input";
     readonly: boolean;
     clearable: boolean;
     maxlength: number;
     showCount: boolean;
     onEnter: (v: string) => void;
-    as: "button" | "input";
     controlClass: string;
     controlAttrs: Record<string, unknown>;
     hasValue: boolean;

package/dist/components/input/index.js

@@ -184,7 +184,7 @@ const Input = /* @__PURE__ */ defineComponent({
       "tabindex": -1,
       "onClick": () => revealed.value = !revealed.value
     }, [createVNode(Icon, {
-      "name": "eye",
+      "name": "preview",
       "class": "mh-input__eye-icon"
     }, null)]) : null, slots.suffix ? createVNode("span", {
       "class": "mh-input__suffix"

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

@@ -1,4 +1,5 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type Padding } from '../part-padding';
 /**
  * 布局间距档：**只开放令牌档位，不开放任意 px**（`none/sm/md/lg/xl` → `0 / --ui-space-1/2/3/4`）。
  *
@@ -32,7 +33,8 @@ export type LayoutSpan = 1 | 2 | 3 | 4;
  *
  * ## 与其它件的边界
  *
- * - 表单里并排字段用 `Form columns={2}`（它管 label 列与行距），不要用本族拼表单；
+ * - 表单里并排字段用 `Form` 的 `columns`（它管 label 列、行距与**回落**），不要用本族拼表单
+ *   —— 本族的列数是**恒定**的，窄了只等分收窄，表单会被压出不可用的窄控件；
  * - 页面级两栏（各自滚动）用 `Page.Split`；
  * - 只有「块与块怎么摆」这一件事归本族，滚动 / 工具位 / 卡片外观都不归它。
  */
@@ -63,6 +65,20 @@ export declare const Layout: {
             type: NumberConstructor;
             default: undefined;
         };
+        /**
+         * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+         * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+         * 口径与理由见 `part-padding.ts`。
+         *
+         * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+         * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+         * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+         * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+         */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
         gap: {
@@ -89,7 +105,22 @@ export declare const Layout: {
             type: NumberConstructor;
             default: undefined;
         };
+        /**
+         * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+         * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+         * 口径与理由见 `part-padding.ts`。
+         *
+         * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+         * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+         * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+         * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+         */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
+        padding: Padding;
         justify: LayoutJustify;
         gap: LayoutGap;
         align: LayoutAlign;
@@ -124,6 +155,11 @@ export declare const Layout: {
             type: PropType<LayoutSpan>;
             default: number;
         };
+        /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
         gap: {
@@ -150,7 +186,13 @@ export declare const Layout: {
             type: PropType<LayoutSpan>;
             default: number;
         };
+        /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+        padding: {
+            type: PropType<Padding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, {
+        padding: Padding;
         wrap: boolean;
         justify: LayoutJustify;
         span: LayoutSpan;

package/dist/components/layout/index.js

@@ -1,4 +1,5 @@
 import { defineComponent, createVNode } from "vue";
+import { mergePartStyle } from "../part-padding.js";
 function modifier(base, name, value) {
   return value === void 0 || value === "" ? "" : `${base}--${name}-${value}`;
 }
@@ -30,6 +31,11 @@ const LayoutColumn = /* @__PURE__ */ defineComponent({
     span: {
       type: Number,
       default: 1
+    },
+    /** 内距：口径同 `Layout.Row`（共享 `Padding`，复用 `mergePartStyle`） */
+    padding: {
+      type: [Number, Object, String],
+      default: void 0
     }
   },
   slots: Object,
@@ -39,7 +45,7 @@ const LayoutColumn = /* @__PURE__ */ defineComponent({
   }) {
     return () => createVNode("div", {
       "class": ["mh-layout-column", modifier("mh-layout-column", "gap", props.gap), modifier("mh-layout-column", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-column", "justify", props.justify) : "", props.wrap ? "mh-layout-column--wrap" : "", props.span > 1 ? `mh-layout-column--span-${props.span}` : "", attrs.class].filter(Boolean).join(" "),
-      "style": attrs.style
+      "style": mergePartStyle(attrs.style, props.padding)
     }, [slots.default?.()]);
   }
 });
@@ -71,6 +77,20 @@ const LayoutRow = /* @__PURE__ */ defineComponent({
     minColumnWidth: {
       type: Number,
       default: void 0
+    },
+    /**
+     * 内距：**走骨架件共享口径**（`Padding`，同 `Card` / `Form` / `Page` / `Panel`）——
+     * `number` 四边同值、`{ y, x }` 分上下 / 左右、`string` 原样下发（CSS 简写，**逃生舱**）。
+     * 口径与理由见 `part-padding.ts`。
+     *
+     * ⚠️ 与 `gap` 不同口径：`gap` 只开放令牌档（防间距分叉），`padding` 接具体值 ——
+     * 内距在设计稿里常是**确定坐标**，令牌梯度（最大 24px）表达不了。
+     * ⚠️ 用它之前先想一次：这个数真是「内距」吗？若是「与某个内容列对齐」这类**布局坐标**，
+     * 优先改由结构表达（同轴容器 / `columns` / `minColumnWidth`）。
+     */
+    padding: {
+      type: [Number, Object, String],
+      default: void 0
     }
   },
   slots: Object,
@@ -86,7 +106,7 @@ const LayoutRow = /* @__PURE__ */ defineComponent({
       if (props.minColumnWidth) style["--mh-layout-row-min"] = `${props.minColumnWidth}px`;
       return createVNode("div", {
         "class": ["mh-layout-row", modifier("mh-layout-row", "gap", props.gap), modifier("mh-layout-row", "align", props.align), props.justify && props.justify !== "start" ? modifier("mh-layout-row", "justify", props.justify) : "", isGrid ? "mh-layout-row--grid" : "", isGrid ? modifier("mh-layout-row", "columns", props.columns) : "", attrs.class].filter(Boolean).join(" "),
-        "style": style
+        "style": mergePartStyle(style, props.padding)
       }, [slots.default?.()]);
     };
   }

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

@@ -1,3 +1,4 @@
+import { type IconName } from '@manohub/icon';
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
 export type NoticeTone = 'info' | 'success' | 'warning' | 'error';
 /**
@@ -24,10 +25,10 @@ export type NoticeTone = 'info' | 'success' | 'warning' | 'error';
  * | 有标题 | `message` + `description`（或插槽） | **标题行 + 描述行**两行 |
  *
  * @example 可关闭的说明条（列表页顶部）
- * <Notice closable onClose={() => (visible = false)} show-icon>值映射用于将来源向量转换为目标值。</Notice>
+ * <Notice closable onClose={() => (visible = false)} icon>值映射用于将来源向量转换为目标值。</Notice>
  *
  * @example 带标题与操作
- * <Notice tone="warning" show-icon message="尚未完成实名认证" description="使用该服务前须完成认证"
+ * <Notice tone="warning" icon message="尚未完成实名认证" description="使用该服务前须完成认证"
  *   action="立即认证" :on-action="goAuth" />
  */
 export declare const Notice: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -46,9 +47,15 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
-    /** 是否显示语义图标 */
-    showIcon: {
-        type: BooleanConstructor;
+    /**
+     * 前置图标：缺省 `false` 不出图标；`true` 按 `tone` 映射；也可直接给字形名。
+     *
+     * 与 `Toast.icon` / `Notification.icon` **同名同型**（0.6.x 本件叫 `showIcon` 且只收布尔，
+     * 三件三个名字三种默认 —— 已统一）。默认值仍与 `Toast` 不同：`Toast` 是「浮出即走」的
+     * 消息条，图标是它的主要语义承载；本件是嵌在页面里的说明条，页面里别处往往已经有图标，故缺省不出。
+     */
+    icon: {
+        type: PropType<boolean | IconName>;
         default: boolean;
     };
     /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
@@ -92,9 +99,15 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
         type: StringConstructor;
         default: undefined;
     };
-    /** 是否显示语义图标 */
-    showIcon: {
-        type: BooleanConstructor;
+    /**
+     * 前置图标：缺省 `false` 不出图标；`true` 按 `tone` 映射；也可直接给字形名。
+     *
+     * 与 `Toast.icon` / `Notification.icon` **同名同型**（0.6.x 本件叫 `showIcon` 且只收布尔，
+     * 三件三个名字三种默认 —— 已统一）。默认值仍与 `Toast` 不同：`Toast` 是「浮出即走」的
+     * 消息条，图标是它的主要语义承载；本件是嵌在页面里的说明条，页面里别处往往已经有图标，故缺省不出。
+     */
+    icon: {
+        type: PropType<boolean | IconName>;
         default: boolean;
     };
     /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
@@ -123,14 +136,14 @@ export declare const Notice: import("vue").DefineComponent<import("vue").Extract
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    icon: boolean | "search" | "link" | "filter" | "copy" | "help" | "table" | "menu" | "delete" | "image" | "close" | "key" | "page-title" | "loading" | "info" | "alert" | "chevron-left" | "chevron-right" | "chevron-down" | "chevron-up" | "check" | "user" | "download" | "back" | "folder" | "folder-open" | "file" | "file-code" | "file-json" | "file-text" | "terminal" | "shield" | "tool" | "plus" | "notification" | "settings" | "logout" | "home" | "workbench" | "apps" | "favorite" | "favorite-filled" | "drag-handle" | "edit" | "refresh" | "upload" | "save" | "more" | "preview" | "external-link" | "minus" | "plus-circle" | "close-circle" | "list" | "calendar" | "clock" | "lock" | "unlock" | "users" | "archive" | "package" | "plug" | "branch" | "tag" | "ai" | "shield-check" | "shield-alert" | "history";
     onClose: () => void;
     message: string;
-    tone: NoticeTone;
     closable: boolean;
+    tone: NoticeTone;
     description: string;
-    showIcon: boolean;
-    closeText: string;
     action: string;
+    closeText: string;
     onAction: () => void;
 }, SlotsType<{
     default?: () => VNodeChild;