@manohub/app-kit 0.1.0

package/dist/atoms/app-layout.d.ts

@@ -0,0 +1,348 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/**
+ * 布局间距档：**只开放令牌档位，不开放任意 px**（`none/sm/md/lg/xl` → `0 / --ui-space-1/2/3/4`）。
+ *
+ * 间距一旦可以随便写，同一个页面里就会出现 6/7/9/10/14… 这些"看着差不多"的值，
+ * 而它们在不同缩放档/不同人手里会继续分叉 —— 这正是应用侧 CSS 只允许写布局的同一理由。
+ */
+export type AppLayoutGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/** 轴向对齐（`align-items`）：主轴方向的排布用 `justify` */
+export type AppLayoutAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+/** 主轴排布（`justify-content`）：`between` = 两端对齐（左文右操作这种） */
+export type AppLayoutJustify = 'start' | 'center' | 'end' | 'between';
+/**
+ * 栅格列数**上限**（传了它才切成等分栅格；实际列数还受最小列宽约束，窄了会自动减列）。
+ */
+export type AppLayoutColumns = 1 | 2 | 3 | 4;
+/** 栅格单元跨格数：不应超过所在行的 `columns`（超了 auto-fit 会为它多开轨道） */
+export type AppLayoutSpan = 1 | 2 | 3 | 4;
+/**
+ * 列（`AppLayout.Column`）—— **水平容器**：一行里的一格，内容**左右排**。
+ *
+ * ```tsx
+ * // 标签 + 值（摘要、只读信息）
+ * <AppLayout.Column gap="sm"><span>缓存方式</span><span>按需缓存</span></AppLayout.Column>
+ *
+ * // 一格里要上下两行（标签在上、值在下）→ 列里再放一条竖排的 Row
+ * <AppLayout.Column gap="sm">
+ *   <span>缓存方式</span>
+ *   <AppLayout.Row gap="none"><span>按需缓存</span></AppLayout.Row>
+ * </AppLayout.Column>
+ * ```
+ *
+ * - 作为 `Row columns={n}` 的子项时它同时是**栅格单元**：`span` 决定占几格（默认 1）。
+ * - 默认 `align-items: center`（徽标 / 控件与文本齐中线）；贴顶写 `align="start"`，要齐宽写 `align="stretch"`。
+ * - 内容宽了要折行（表格单元格里的「按钮 + 摘要」）：`wrap`。
+ * - **不要拿它当竖排容器用**（`.ak-column` 里堆一串块级元素靠的是块级默认流，不是它的本意）：
+ *   要一条一条往下堆，用 `AppLayout.Row`，或交给父容器的间距。
+ *
+ * 方向为什么与 CSS 属性名相反（`.ak-column` = `flex-direction: row`）：见 `AppLayout.Row` 的「方向口径」。
+ */
+export declare const AppLayoutColumn: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+        type: PropType<AppLayoutGap>;
+        default: string;
+    };
+    /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+    align: {
+        type: PropType<AppLayoutAlign>;
+        default: undefined;
+    };
+    /** 单元内主轴排布；不传即 `start` */
+    justify: {
+        type: PropType<AppLayoutJustify>;
+        default: undefined;
+    };
+    /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+    span: {
+        type: PropType<AppLayoutSpan>;
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+        type: PropType<AppLayoutGap>;
+        default: string;
+    };
+    /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+    align: {
+        type: PropType<AppLayoutAlign>;
+        default: undefined;
+    };
+    /** 单元内主轴排布；不传即 `start` */
+    justify: {
+        type: PropType<AppLayoutJustify>;
+        default: undefined;
+    };
+    /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+    span: {
+        type: PropType<AppLayoutSpan>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    span: AppLayoutSpan;
+    wrap: boolean;
+    justify: AppLayoutJustify;
+    align: AppLayoutAlign;
+    gap: AppLayoutGap;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 行（`AppLayout.Row`）—— **竖排容器**（行与行是上下关系）：行一条一条往下堆。
+ *
+ * | 形态 | 触发 | 行为 | 典型场景 |
+ * |---|---|---|---|
+ * | **竖排** | 不传 `columns` | `flex-direction: column`：子项一条一行往下排 | 校验结果、摘要字段、逐条说明 |
+ * | **一行分 n 列** | 传 `columns` | `grid`：这一行的子项并排（列数上限 + 窄了自动减列） | 并排字段/卡片（配 `Column` 的 `span` 做 2:1） |
+ *
+ * ## 方向口径（别再改回去）
+ *
+ * 名字说的是"**它排什么**"，不是"它自己长什么样"：`Row` 排的是**行**（行与行上下相邻 ⇒ 自己竖着堆），
+ * `Column` 排的是**列**（列与列左右相邻 ⇒ 自己横着排）。于是 CSS 里 `.ak-row` 是 `flex-direction: column`、
+ * `.ak-column` 是 `row` —— **与 CSS 命名直觉正好相反**，这是刻意的（两种读法都自洽，判据是"读表格"：
+ * `<tr>` 一行行往下堆、一行里的格子左右并排）。写代码时按"**我要排行还是排列**"想：往下堆用 `Row`，
+ * 横着排一组（徽标+文本 / 标签+值 / 控件+按钮）用 `Column`。
+ *
+ * - `columns` 是**列数上限**（1/2/3/4；不传 = 纯竖排），`minColumnWidth` 是单元最小宽度
+ *   （默认取令牌 `--ui-grid-column-min` 260）：两者一起决定实际列数 —— **宽容器最多 N 列，窄了自动减列**。
+ *   实测（Chrome，N=2 / 最小 260）：1400→2、900→2、600→2、500→1 列。
+ * - `justify` / `align`：竖排时主轴是纵向、交叉轴是水平（`align` 不传即 CSS 默认的 stretch，子项齐宽）。
+ * - 栅格子项请用 `AppLayout.Column`；竖排时子项随意，但"一条里的横排内容"要包一层 `Column`。
+ *
+ * 实现说明（栅格形态为什么不用"固定 N 列 + 媒体查询"）：固定份数在宽容器里会挤成很窄的多列；
+ * 而断点式媒体查询与**容器宽度**无关（本仓页面都在弹窗/分栏里，视口宽度根本代表不了容器）。
+ * 故用 auto-fit + minmax，track 下限取 `max(最小列宽, 按上限等分)` —— 上限与回落一句话同时成立。
+ *
+ * @example 竖排：一条一行（行内一列横着排）
+ * <AppLayout.Row gap="lg">
+ *   <AppLayout.Column gap="sm"><AppBadge tone="success" shape="soft">通过</AppBadge><span>编码唯一性</span></AppLayout.Column>
+ *   <AppLayout.Column gap="sm"><AppBadge tone="success" shape="soft">通过</AppBadge><span>列结构一致性</span></AppLayout.Column>
+ * </AppLayout.Row>
+ *
+ * @example 一行分 n 列 + 跨格
+ * <AppLayout.Row columns={2} gap="lg">
+ *   <AppLayout.Column gap="sm">…</AppLayout.Column>
+ *   <AppLayout.Column gap="sm">…</AppLayout.Column>
+ *   <AppLayout.Column span={2}>整行内容</AppLayout.Column>
+ * </AppLayout.Row>
+ */
+export declare const AppLayoutRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+        type: PropType<AppLayoutGap>;
+        default: string;
+    };
+    /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+    align: {
+        type: PropType<AppLayoutAlign>;
+        default: undefined;
+    };
+    /** 主轴排布（竖排时是纵向）；不传即 `start` */
+    justify: {
+        type: PropType<AppLayoutJustify>;
+        default: undefined;
+    };
+    /** 列数上限；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格） */
+    columns: {
+        type: PropType<AppLayoutColumns>;
+        default: undefined;
+    };
+    /** 单元最小宽度（px，栅格形态）；缺省取令牌 `--ui-grid-column-min`（260） */
+    minColumnWidth: {
+        type: NumberConstructor;
+        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: {
+        type: PropType<AppLayoutGap>;
+        default: string;
+    };
+    /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+    align: {
+        type: PropType<AppLayoutAlign>;
+        default: undefined;
+    };
+    /** 主轴排布（竖排时是纵向）；不传即 `start` */
+    justify: {
+        type: PropType<AppLayoutJustify>;
+        default: undefined;
+    };
+    /** 列数上限；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格） */
+    columns: {
+        type: PropType<AppLayoutColumns>;
+        default: undefined;
+    };
+    /** 单元最小宽度（px，栅格形态）；缺省取令牌 `--ui-grid-column-min`（260） */
+    minColumnWidth: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    justify: AppLayoutJustify;
+    columns: AppLayoutColumns;
+    align: AppLayoutAlign;
+    gap: AppLayoutGap;
+    minColumnWidth: number;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * 布局原子件族（命名空间，**本身不是组件**）。
+ *
+ * | 成员 | 干什么 | 什么时候用 |
+ * |---|---|---|
+ * | `AppLayout.Row` | **排「行」**：竖排（一条一行往下堆）；传 `columns` 则一行分 n 列（列数上限 + 窄了自动减列） | 逐条清单 / 摘要字段 / 并排字段与卡片 |
+ * | `AppLayout.Column` | **排「列」**：水平容器（内容左右排），同时是 `Row columns` 的栅格单元 | 徽标+文本 / 标签+值 / 控件+按钮 / 一行里的一格 |
+ *
+ * ## 命名与方向口径（别再改回去）
+ *
+ * - **方向按表格语义定**：行与行上下相邻 ⇒ `Row` 竖排；列与列左右相邻 ⇒ `Column` 横排。
+ *   故 `.ak-column` 是 `flex-direction: row`、`.ak-row` 是 `column` —— **与 CSS 属性名相反**是刻意的（见 `AppLayout.Row`）。
+ * - `columns` 说的是"**这一行分几列**"（每行摆几格），不是"这个容器有几种方向"。
+ * - 嵌套：要分栏/栅格就 `Row columns={n}` + `Column`；一格里要上下堆，就在 `Column` 里再放 `Row`。
+ * - **公开面只出 `AppLayout`**，不平级导出 `AppRow` / `AppColumn` —— 通用词会与 `AppTableColumn`
+ *   在一份 import 清单里混读，也破坏「成族子件用点号」的约定（`AppShell.Header` / `AppForm.Item`）。
+ *
+ * ## 与其它件的边界
+ *
+ * - 表单里并排字段用 `AppForm columns={2}`（它管 label 列与行距），不要用本族拼表单；
+ * - 页面级两栏（各自滚动）用 `AppShell.Split`；
+ * - 只有"块与块怎么摆"这一件事归本族，滚动 / 工具位 / 卡片外观都不归它。
+ */
+export declare const AppLayout: {
+    Row: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<AppLayoutGap>;
+            default: string;
+        };
+        /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+        align: {
+            type: PropType<AppLayoutAlign>;
+            default: undefined;
+        };
+        /** 主轴排布（竖排时是纵向）；不传即 `start` */
+        justify: {
+            type: PropType<AppLayoutJustify>;
+            default: undefined;
+        };
+        /** 列数上限；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格） */
+        columns: {
+            type: PropType<AppLayoutColumns>;
+            default: undefined;
+        };
+        /** 单元最小宽度（px，栅格形态）；缺省取令牌 `--ui-grid-column-min`（260） */
+        minColumnWidth: {
+            type: NumberConstructor;
+            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: {
+            type: PropType<AppLayoutGap>;
+            default: string;
+        };
+        /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+        align: {
+            type: PropType<AppLayoutAlign>;
+            default: undefined;
+        };
+        /** 主轴排布（竖排时是纵向）；不传即 `start` */
+        justify: {
+            type: PropType<AppLayoutJustify>;
+            default: undefined;
+        };
+        /** 列数上限；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格） */
+        columns: {
+            type: PropType<AppLayoutColumns>;
+            default: undefined;
+        };
+        /** 单元最小宽度（px，栅格形态）；缺省取令牌 `--ui-grid-column-min`（260） */
+        minColumnWidth: {
+            type: NumberConstructor;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        justify: AppLayoutJustify;
+        columns: AppLayoutColumns;
+        align: AppLayoutAlign;
+        gap: AppLayoutGap;
+        minColumnWidth: number;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Column: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<AppLayoutGap>;
+            default: string;
+        };
+        /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+        align: {
+            type: PropType<AppLayoutAlign>;
+            default: undefined;
+        };
+        /** 单元内主轴排布；不传即 `start` */
+        justify: {
+            type: PropType<AppLayoutJustify>;
+            default: undefined;
+        };
+        /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+        span: {
+            type: PropType<AppLayoutSpan>;
+            default: number;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+        gap: {
+            type: PropType<AppLayoutGap>;
+            default: string;
+        };
+        /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+        align: {
+            type: PropType<AppLayoutAlign>;
+            default: undefined;
+        };
+        /** 单元内主轴排布；不传即 `start` */
+        justify: {
+            type: PropType<AppLayoutJustify>;
+            default: undefined;
+        };
+        /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+        wrap: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+        span: {
+            type: PropType<AppLayoutSpan>;
+            default: number;
+        };
+    }>> & Readonly<{}>, {
+        span: AppLayoutSpan;
+        wrap: boolean;
+        justify: AppLayoutJustify;
+        align: AppLayoutAlign;
+        gap: AppLayoutGap;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/atoms/app-layout.js

@@ -0,0 +1,102 @@
+import { defineComponent, createVNode } from "vue";
+function modifier(base, name, value) {
+  return value === void 0 || value === "" ? "" : `${base}--${name}-${value}`;
+}
+const AppLayoutColumn = /* @__PURE__ */ defineComponent({
+  name: "AppLayoutColumn",
+  inheritAttrs: false,
+  props: {
+    /** 单元内间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+      type: String,
+      default: "md"
+    },
+    /** 单元内交叉轴对齐；不传即 `center`（内容齐中线） */
+    align: {
+      type: String,
+      default: void 0
+    },
+    /** 单元内主轴排布；不传即 `start` */
+    justify: {
+      type: String,
+      default: void 0
+    },
+    /** 允许折行：内容宽过容器时下一项换行（窄格子里的「按钮 + 摘要」靠它不撑破外层） */
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    /** 跨格数（默认 1）；不要超过所在行的 `columns` */
+    span: {
+      type: Number,
+      default: 1
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-column", modifier("ak-column", "gap", props.gap), modifier("ak-column", "align", props.align), props.justify && props.justify !== "start" ? modifier("ak-column", "justify", props.justify) : "", props.wrap ? "ak-column--wrap" : "", props.span > 1 ? `ak-column--span-${props.span}` : "", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default?.()]);
+  }
+});
+const AppLayoutRow = /* @__PURE__ */ defineComponent({
+  name: "AppLayoutRow",
+  inheritAttrs: false,
+  props: {
+    /** 行间距档（默认 `md` 8px；要贴紧写 `none`） */
+    gap: {
+      type: String,
+      default: "md"
+    },
+    /** 交叉轴对齐（竖排时是水平方向）；不传即 CSS 默认 `stretch`（子项齐宽） */
+    align: {
+      type: String,
+      default: void 0
+    },
+    /** 主轴排布（竖排时是纵向）；不传即 `start` */
+    justify: {
+      type: String,
+      default: void 0
+    },
+    /** 列数上限；**不传 = 纯竖排**，传了 = 一行分 n 列（等分栅格） */
+    columns: {
+      type: Number,
+      default: void 0
+    },
+    /** 单元最小宽度（px，栅格形态）；缺省取令牌 `--ui-grid-column-min`（260） */
+    minColumnWidth: {
+      type: Number,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      const isGrid = props.columns !== void 0;
+      const style = {
+        ...attrs.style ?? {}
+      };
+      if (props.minColumnWidth) style["--ak-row-min"] = `${props.minColumnWidth}px`;
+      return createVNode("div", {
+        "class": ["ak-row", modifier("ak-row", "gap", props.gap), modifier("ak-row", "align", props.align), props.justify && props.justify !== "start" ? modifier("ak-row", "justify", props.justify) : "", isGrid ? "ak-row--grid" : "", isGrid ? `ak-row--columns-${props.columns}` : "", attrs.class].filter(Boolean).join(" "),
+        "style": style
+      }, [slots.default?.()]);
+    };
+  }
+});
+const AppLayout = {
+  Row: AppLayoutRow,
+  Column: AppLayoutColumn
+};
+export {
+  AppLayout,
+  AppLayoutColumn,
+  AppLayoutRow
+};

package/dist/atoms/app-notice.d.ts

@@ -0,0 +1,90 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export type AppNoticeTone = 'info' | 'success' | 'warning' | 'error';
+/**
+ * 说明条 / 警告提示（**自建**，不封装 farris）。
+ *
+ * ## 为什么自建
+ *
+ * `@farris/ui-vue` 1.8.4 **没有 Alert 组件**（`types/` 下无 `alert` 目录、无 `FAlert` 导出，
+ * 产物 `farris.all.esm.js` 里 `f-alert` 零命中）；`index.css` 里唯一带 message 的
+ * `.f-message-strip` 只是 notify 的 toast 容器（`.f-message-strip .toast`），不是内联说明块。
+ * 故这里自建，**视觉规范对齐 `@aihub/theme` 的 Alert（`.sem-bar`）**：
+ * 通栏 100% 宽、高 42、圆角 6、投影 `0 2 10 rgba(0,0,0,.08)`、文案 15px、
+ * 语义三件套（底 / 边 / 字），操作为文字按钮。
+ *
+ * ## 口径（取自主题包 Alert 规范）
+ *
+ * - **警示 / 错误须常驻**（不渲染关闭按钮），只有通知类信息才可关闭 —— 故 `closable` 默认 `false`，
+ *   由消费方显式开启；`tone='warning' | 'error'` 时即使传了 `closable` 也只按消费方意愿渲染，
+ *   但规范建议不这么做（见主题包 `alert.html` 「2 不可关闭」）。
+ * - 位置：页面顶部通栏（`AppShell.Body` 顶部），静态展示、不随滚动消失。
+ *
+ * @example 可关闭的说明条（列表页顶部）
+ * <AppNotice closable onClose={() => (noticeVisible = false)}>
+ *   <p>值映射用于将来源向量转换为单个目标值。</p>
+ * </AppNotice>
+ *
+ * @example 警示 + 文字按钮操作
+ * <AppNotice tone="warning" action="立即认证" onAction={goAuth}>使用该服务前须完成实名认证</AppNotice>
+ */
+export declare const AppNotice: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 语义类型；决定底/边/字三件套 */
+    tone: {
+        type: PropType<AppNoticeTone>;
+        default: string;
+    };
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 文字按钮点击 */
+    onAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 语义类型；决定底/边/字三件套 */
+    tone: {
+        type: PropType<AppNoticeTone>;
+        default: string;
+    };
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 文字按钮点击 */
+    onAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    tone: AppNoticeTone;
+    closable: boolean;
+    action: string;
+    onAction: () => void;
+    onClose: () => void;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/atoms/app-notice.js

@@ -0,0 +1,59 @@
+import { defineComponent, createVNode, createTextVNode } from "vue";
+const AppNotice = /* @__PURE__ */ defineComponent({
+  name: "AppNotice",
+  inheritAttrs: false,
+  props: {
+    /** 语义类型；决定底/边/字三件套 */
+    tone: {
+      type: String,
+      default: "info"
+    },
+    /** 是否渲染右上关闭按钮（规范：仅通知类信息可关闭） */
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    /** 右侧文字按钮文案（不传则不渲染操作位） */
+    action: {
+      type: String,
+      default: void 0
+    },
+    /** 文字按钮点击 */
+    onAction: {
+      type: Function,
+      default: void 0
+    },
+    /** 关闭回调（配合 `closable`；关闭动作由消费方决定可见性） */
+    onClose: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const close = () => {
+      props.onClose?.();
+    };
+    return () => createVNode("div", {
+      "class": [attrs.class, "ak-notice", `ak-notice--${props.tone}`].filter(Boolean).join(" "),
+      "role": "alert"
+    }, [createVNode("div", {
+      "class": "ak-notice__body"
+    }, [slots.default?.()]), props.action ? createVNode("button", {
+      "type": "button",
+      "class": "ak-notice__action",
+      "onClick": () => props.onAction?.()
+    }, [props.action]) : null, props.closable ? createVNode("button", {
+      "type": "button",
+      "class": "ak-notice__close",
+      "aria-label": "关闭",
+      "onClick": close
+    }, [createTextVNode("✕")]) : null]);
+  }
+});
+export {
+  AppNotice
+};