@manohub/app-kit 0.1.0

package/dist/services/modal.d.ts

@@ -0,0 +1,51 @@
+import type { VNodeChild } from 'vue';
+export interface AppModalButton {
+    /** 按钮标识（disableButtons 按此引用） */
+    name: string;
+    text: string;
+    /** primary=主按钮；缺省浅色普通按钮 */
+    variant?: 'primary' | 'default';
+    disabled?: boolean;
+    /** 按钮内 loading 态（spinner 图标 + 禁点） */
+    loading?: boolean;
+    /** 点击处理；返回 false 阻止关闭（farris 契约），异步失败须自行恢复按钮状态 */
+    handle?: () => boolean | void | Promise<boolean | void>;
+}
+export interface AppModalOptions {
+    title: string;
+    width?: number;
+    fitContent?: boolean;
+    showButtons?: boolean;
+    buttons?: AppModalButton[];
+    /** 弹窗内容渲染函数 */
+    content: {
+        render: () => VNodeChild;
+    };
+}
+/** farris 模态句柄的对外形态（destroy=销毁弹窗，close=触发关闭流程，update=换按钮/配置，disableButtons=批量禁用） */
+export interface AppModalHandle {
+    destroy: () => void;
+    close: () => void;
+    update: (options: Partial<AppModalOptions>) => void;
+    disableButtons: (names: string[], disabled?: boolean) => void;
+}
+/**
+ * 命令式弹窗（收敛 inject('FModalService')）。
+ *
+ * farris 契约在内部翻译：按钮 variant→btn class、loading→spinner 图标类；
+ * 句柄保留 destroy/close/update/disableButtons 语义（farris 命令式弹窗的既有用法）。
+ *
+ * @example
+ * const modal = modalService.open({
+ *   title: '新增分类',
+ *   width: 480,
+ *   buttons: [
+ *     { name: 'cancel', text: '取消', handle: () => { modal.destroy(); return true } },
+ *     { name: 'submit', text: '确定', variant: 'primary', handle: handleSubmit },
+ *   ],
+ *   content: { render: () => <TopicForm ... /> },
+ * })
+ */
+export declare const modalService: {
+    open(options: AppModalOptions): AppModalHandle;
+};

package/dist/services/modal.js

@@ -0,0 +1,51 @@
+import { inject } from "vue";
+import { getCurrentApp } from "./app-context.js";
+import { resolveAppContainer } from "./app-container.js";
+function translateButton(button) {
+  return {
+    name: button.name,
+    text: button.text,
+    class: button.variant === "primary" ? "btn btn-primary" : "btn btn-light",
+    disabled: button.disabled ?? false,
+    iconClass: button.loading ? "ak-modal-btn-spinner" : "",
+    handle: button.handle
+  };
+}
+function translateOptions(options) {
+  return {
+    title: options.title,
+    width: options.width,
+    fitContent: options.fitContent ?? true,
+    showButtons: options.showButtons ?? true,
+    buttons: options.buttons?.map(translateButton),
+    content: options.content,
+    // 与 AppDialog 同口径：farris 缺省投到 body，令牌与应用侧样式都会失效（见 resolveAppContainer）
+    host: resolveAppContainer()
+  };
+}
+function getModalService() {
+  const app = getCurrentApp();
+  if (!app) {
+    throw new Error("[app-kit] modal 服务必须在 createSubApp 挂载后使用（无活跃的 app 上下文）");
+  }
+  const service = app.runWithContext(() => inject("FModalService"));
+  if (!service) {
+    throw new Error("[app-kit] FModalService 未注册：请确认经 createSubApp 启动（内部执行 app.use(Farris)）");
+  }
+  return service;
+}
+const modalService = {
+  open(options) {
+    const service = getModalService();
+    const handle = service.open(translateOptions(options));
+    return {
+      destroy: handle.destroy,
+      close: handle.close,
+      update: (next) => handle.update(translateOptions({ ...options, ...next })),
+      disableButtons: handle.disableButtons
+    };
+  }
+};
+export {
+  modalService
+};

package/dist/services/notify.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 提示位置。取值与 farris 的 `NotifyPosition` 一致，但**在本包内重新声明**：
+ * farris 类型一律不对外转发（本包把 farris 挡在边界内）。
+ */
+export type NotifyPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-center';
+/**
+ * 单条提示的覆盖项（不传则用全局配置）。
+ *
+ * 对应 farris 的 `ShowNotifyParams`：`title` / `position` / `timeout` / `showCloseButton`。
+ */
+export interface NotifyOverride {
+    title?: string;
+    /** 通知位置，如 'top-center' */
+    position?: NotifyPosition;
+    /** 延时关闭时间（ms） */
+    timeout?: number;
+    showCloseButton?: boolean;
+}
+export declare const notify: {
+    success: (message: string, override?: NotifyOverride) => import("vue").App<any>;
+    warning: (message: string, override?: NotifyOverride) => import("vue").App<any>;
+    error: (message: string, override?: NotifyOverride) => import("vue").App<any>;
+    info: (message: string, override?: NotifyOverride) => import("vue").App<any>;
+};

package/dist/services/notify.js

@@ -0,0 +1,22 @@
+import { FNotifyService } from "@farris/ui-vue";
+let service = null;
+function getService() {
+  if (!service) {
+    service = new FNotifyService();
+    service.globalConfig = { position: "top-center", timeout: 5e3, showCloseButton: true };
+  }
+  return service;
+}
+const show = (kind, message, override) => {
+  const sink = getService();
+  return override ? sink[kind]({ message, ...override }) : sink[kind](message);
+};
+const notify = {
+  success: (message, override) => show("success", message, override),
+  warning: (message, override) => show("warning", message, override),
+  error: (message, override) => show("error", message, override),
+  info: (message, override) => show("info", message, override)
+};
+export {
+  notify
+};

package/dist/shell/AppShell.d.ts

@@ -0,0 +1,139 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface AppShellHeaderProps {
+    /** 传入 title 走内置布局；不传则纯 slot 直出（自定义页头出口） */
+    title?: string;
+    /**
+     * 标题左侧图标：**svg 节点或返回节点的函数**皆可。缺省渲染设计稿默认图标
+     * （MH后台-0911 node 0:3904：26×26 圆角方块 #2660FF）。
+     */
+    icon?: VNodeChild | (() => VNodeChild);
+    /**
+     * Header 右侧工具条（唯一可自定义位）：搜索框 / 按钮 / 下拉等，水平排列。
+     * 传节点或返回节点的函数。布局（水平 / 垂直居中 / 间距）由标准样式锁死。
+     */
+    toolbar?: unknown;
+    /** 页头下方页签区，传参同 toolbar */
+    tabs?: unknown;
+}
+export interface AppShellBodyProps {
+    /** table=由 AppTable 内部滚；scroll=自身滚；plain=不滚（向导页） */
+    mode?: 'table' | 'scroll' | 'plain';
+}
+export interface AppShellSplitProps {
+    sidebar?: {
+        width?: number;
+        content?: () => VNodeChild;
+    };
+}
+/**
+ * Object.assign 复合件。两个注意点：
+ * 1. Object.assign 后不要再 defineComponent 二次包装，否则 props 类型丢失；
+ * 2. 每个子件必须显式声明 slots（SlotsType），否则 JSX 下 slot 参数类型退化为 any。
+ */
+export declare const AppShell: {
+    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/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Header: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        tabs: {
+            type: PropType<any>;
+            default: undefined;
+        };
+    }>, () => string | number | boolean | import("vue").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;
+        };
+        icon: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        toolbar: {
+            type: PropType<any>;
+            default: undefined;
+        };
+        tabs: {
+            type: PropType<any>;
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        title: string;
+        icon: any;
+        toolbar: any;
+        tabs: any;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+        toolbar?: () => VNodeChild;
+        tabs?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Toolbar: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Body: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        mode: {
+            type: () => NonNullable<AppShellBodyProps["mode"]>;
+            default: string;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        mode: {
+            type: () => NonNullable<AppShellBodyProps["mode"]>;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        mode: NonNullable<"table" | "scroll" | "plain" | undefined>;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Footer: import("vue").DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Split: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        sidebar: {
+            type: () => AppShellSplitProps["sidebar"];
+            default: undefined;
+        };
+    }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        sidebar: {
+            type: () => AppShellSplitProps["sidebar"];
+            default: undefined;
+        };
+    }>> & Readonly<{}>, {
+        sidebar: {
+            width?: number;
+            content?: () => VNodeChild;
+        } | undefined;
+    }, SlotsType<{
+        default?: () => VNodeChild;
+    }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
+export type AppShellCompound = typeof AppShell;

package/dist/shell/AppShell.js

@@ -0,0 +1,171 @@
+import { defineComponent, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+const AppShellRoot = /* @__PURE__ */ defineComponent({
+  name: "AppShell",
+  slots: Object,
+  setup(_, {
+    slots
+  }) {
+    return () => createVNode("div", {
+      "class": "ak-shell"
+    }, [slots.default?.()]);
+  }
+});
+const DefaultHeaderIcon = () => createVNode(Icon, {
+  "name": "page-title",
+  "size": 26
+}, null);
+const AppShellFilter = /* @__PURE__ */ defineComponent({
+  name: "AppShellFilter",
+  inheritAttrs: false,
+  slots: Object,
+  setup(_, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-shell-filter", attrs.class].filter(Boolean).join(" ")
+    }, [slots.default?.()]);
+  }
+});
+const AppShellHeader = /* @__PURE__ */ defineComponent({
+  name: "AppShellHeader",
+  inheritAttrs: false,
+  props: {
+    title: {
+      type: String,
+      default: void 0
+    },
+    icon: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    toolbar: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    },
+    tabs: {
+      type: [Function, Object, Array, String],
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    const renderAction = (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) {
+        return slots.default?.() ?? null;
+      }
+      const toolbar = renderAction(slots.toolbar, props.toolbar);
+      const tabs = renderAction(slots.tabs, props.tabs);
+      return createVNode("header", {
+        "class": ["ak-shell-header", "ak-shell-header--titled"]
+      }, [createVNode("div", {
+        "class": "ak-shell-header-inner"
+      }, [createVNode("div", {
+        "class": "ak-shell-header-text"
+      }, [createVNode("div", {
+        "class": "ak-shell-header-title-row"
+      }, [createVNode("span", {
+        "class": "ak-shell-header-icon"
+      }, [renderIcon()]), createVNode("h1", {
+        "class": "ak-shell-header-title"
+      }, [props.title])])]), toolbar ? createVNode("div", {
+        "class": "ak-shell-header-toolbar"
+      }, [toolbar]) : null]), tabs ? createVNode("div", {
+        "class": "ak-shell-header-tabs"
+      }, [tabs]) : null]);
+    };
+  }
+});
+const AppShellToolbar = /* @__PURE__ */ defineComponent({
+  name: "AppShellToolbar",
+  inheritAttrs: false,
+  slots: Object,
+  setup(_, {
+    slots
+  }) {
+    return () => createVNode("div", {
+      "class": "ak-shell-toolbar"
+    }, [slots.default?.()]);
+  }
+});
+const AppShellBody = /* @__PURE__ */ defineComponent({
+  name: "AppShellBody",
+  inheritAttrs: false,
+  props: {
+    mode: {
+      type: String,
+      default: "plain"
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-shell-body", `ak-shell-body--${props.mode}`]
+    }, [slots.default?.()]);
+  }
+});
+const AppShellFooter = /* @__PURE__ */ defineComponent({
+  name: "AppShellFooter",
+  inheritAttrs: false,
+  slots: Object,
+  setup(_, {
+    slots
+  }) {
+    return () => createVNode("footer", {
+      "class": "ak-shell-footer"
+    }, [createVNode("div", {
+      "class": "ak-shell-footer-inner"
+    }, [slots.default?.()])]);
+  }
+});
+const AppShellSplit = /* @__PURE__ */ defineComponent({
+  name: "AppShellSplit",
+  inheritAttrs: false,
+  props: {
+    sidebar: {
+      type: Object,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots
+  }) {
+    return () => createVNode("div", {
+      "class": "ak-shell-split"
+    }, [createVNode("aside", {
+      "class": "ak-shell-split-sidebar",
+      "style": props.sidebar?.width ? {
+        width: `${props.sidebar.width}px`
+      } : void 0
+    }, [props.sidebar?.content?.()]), createVNode("div", {
+      "class": "ak-shell-split-main"
+    }, [slots.default?.()])]);
+  }
+});
+const AppShell = Object.assign(AppShellRoot, {
+  Filter: AppShellFilter,
+  Header: AppShellHeader,
+  Toolbar: AppShellToolbar,
+  Body: AppShellBody,
+  Footer: AppShellFooter,
+  Split: AppShellSplit
+});
+export {
+  AppShell
+};

package/dist/shell/shell.css

@@ -0,0 +1,153 @@
+/**
+ * AppShell 布局契约（滚动归属写死，调用方无法违反）：
+ * - .ak-shell：height 100%，纵向 flex，自身不滚
+ * - Header / Toolbar / Footer：flex-shrink 0，不滚
+ * - Body mode="table"：不滚，由 AppTable 内部滚动（表头固定）
+ * - Body mode="scroll"：自身 overflow-y auto（详情页长内容）
+ * - Body mode="plain"：不滚（向导页，内容自带滚动）
+ * - Split：自身不滚，栏内滚动由内容承担（双栏内用 AppPanel 的 Body 滚）
+ *
+ * 统一 height:100% 语义（不用 100vh）：子应用被注入宿主容器，
+ * 100vh 取 window 视口高度，宿主有顶栏即溢出。
+ */
+
+.ak-shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.ak-shell-header {
+  flex-shrink: 0;
+  /* 页头条规格依据 MH后台-0911 设计稿 node 0:3888：条高 56（14+28+13+1px 分隔线）、左右 20 */
+  padding: 14px 20px 13px;
+  border-bottom: 1px solid var(--ui-base-300);
+}
+
+.ak-shell-header-inner {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ui-space-4);
+}
+
+.ak-shell-header-text {
+  min-width: 0;
+  flex: 1;
+}
+
+.ak-shell-header-title-row {
+  display: flex;
+  align-items: center;
+  /* 设计稿：图标 26 宽 + 10 间距 → 文字起点 36 */
+  gap: 10px;
+}
+
+.ak-shell-header-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ui-primary);
+  /* 设计稿图标 26×26（svg 或 f-icon 字体类均按此渲染） */
+  font-size: 26px;
+}
+
+.ak-shell-header-icon svg {
+  width: 26px;
+  height: 26px;
+}
+
+/* 页头右侧工具条（Header 唯一可自定义位）：搜索框 / 按钮 / 下拉等，水平排列；
+   间距与垂直对齐由标准样式锁死，内容（搜索框、按钮）由消费方提供 */
+.ak-shell-header-toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+}
+
+.ak-shell-header-tabs {
+  margin-top: var(--ui-space-3);
+}
+
+.ak-shell-header-title {
+  margin: 0;
+  font-size: var(--ui-font-title);
+  font-weight: 600;
+  line-height: 28px;
+  color: var(--ui-base-content);
+}
+
+/* 筛选区块（Header 上方的第一子块）：query-solution / 筛选条。
+   无边框；padding-bottom 恒为 0 —— 与 Header 的间距由 Header 自身的 top padding
+   （14px）提供，避免两块 padding 叠加成双倍间距 */
+.ak-shell-filter {
+  flex-shrink: 0;
+  padding: 14px 20px 0;
+}
+
+.ak-shell-toolbar {
+  flex-shrink: 0;
+  padding: var(--ui-space-3) 20px;
+}
+
+.ak-shell-body {
+  flex: 1;
+  min-height: 0;
+  /* 页面内距 20px（与页头左边距对齐，同设计稿） */
+  padding: 0 20px;
+}
+
+.ak-shell-body--scroll {
+  overflow-y: auto;
+}
+
+.ak-shell-body--table,
+.ak-shell-body--plain {
+  overflow: hidden;
+}
+
+.ak-shell-footer {
+  flex-shrink: 0;
+  padding: var(--ui-space-3) 20px;
+}
+
+.ak-shell-footer-inner {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ===== Split 双栏 =====
+   中间 1px 竖直分隔线由 Split 统一提供（线色与页头下边线同源 --ui-base-300），
+   线右侧（主栏）留 --ui-space-4(16px) 内距与线拉开间距；**侧栏不额外加内距**（内容自带）。
+   业务侧不得再给栏的子元素加竖直边框。
+
+   滚动：**Split 自身不滚，栏内滚动由内容承担**（双栏内用 AppPanel，其 Body overflow:auto）。
+   两栏 overflow:hidden 是为了避免「外层先滚、内层滚不到」的双层滚动容器。
+
+   侧栏宽度语义（`sidebar.width`）：**内容宽**（content-box），
+   1px 边线与 16px 右内距加在框外 —— 消费方不必手算补偿值。 */
+.ak-shell-split {
+  height: 100%;
+  display: flex;
+  gap: 0;
+  overflow: hidden;
+}
+
+.ak-shell-split-sidebar {
+  flex-shrink: 0;
+  /* width 语义是内容宽 → 1px 边线加在内容框外 */
+  box-sizing: content-box;
+  border-right: 1px solid var(--ui-base-300);
+  /* **有意不留右内距**：侧栏内容（面板 / 树）自带内距，再加一段会让线与内容脱节。
+     反向锁定见 __tests__/app-shell.spec.ts，别再「顺手补齐」。 */
+  overflow: hidden;
+}
+
+.ak-shell-split-main {
+  flex: 1;
+  min-width: 0;
+  /* 线右侧 16px 内距：把内容与分隔线拉开 */
+  padding-left: var(--ui-space-4);
+  overflow: hidden;
+}