@manohub/ui 0.6.0

package/dist/components/upload/index.js

@@ -0,0 +1,172 @@
+import { defineComponent, ref, createVNode, Fragment, createTextVNode } from "vue";
+function formatFileSize(bytes) {
+  if (bytes === void 0 || Number.isNaN(bytes)) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+const Upload = /* @__PURE__ */ defineComponent({
+  name: "Upload",
+  inheritAttrs: false,
+  props: {
+    /** 已选文件（受控；本件只渲染与回调） */
+    files: {
+      type: Array,
+      default: () => []
+    },
+    /** 原生 accept（如 `.pdf,.xls`） */
+    accept: {
+      type: String,
+      default: void 0
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 主文案（缺省「点击上传，或将文件拖到此处」） */
+    title: {
+      type: String,
+      default: void 0
+    },
+    /** 副文案（类型 / 大小上限这类提示） */
+    hint: {
+      type: String,
+      default: void 0
+    },
+    /** 选择（点击或拖拽都会走这里）回调 */
+    /** 数量上限（`0` = 不限）：超出部分由本件在入口截断，并回调 `onExceed` */
+    maxCount: {
+      type: Number,
+      default: 0
+    },
+    /** 超出上限（参数是本次被拒的全部文件） */
+    onExceed: {
+      type: Function,
+      default: void 0
+    },
+    onSelect: {
+      type: Function,
+      default: void 0
+    },
+    /** 拖拽落文件回调（需要与点击区分时用） */
+    onDrop: {
+      type: Function,
+      default: void 0
+    },
+    /** 删除某一行回调 */
+    onRemove: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const dragover = ref(false);
+    const onDragEnter = (event) => {
+      event.preventDefault();
+      if (!props.disabled) dragover.value = true;
+    };
+    const onDragOver = (event) => event.preventDefault();
+    const onDragLeave = () => {
+      dragover.value = false;
+    };
+    const onDrop = (event) => {
+      event.preventDefault();
+      dragover.value = false;
+      if (props.disabled) return;
+      const picked = Array.from(event.dataTransfer?.files ?? []);
+      if (!picked.length) return;
+      props.onDrop?.(picked);
+      props.onSelect?.(picked);
+    };
+    const onPick = (event) => {
+      const input = event.target;
+      const picked = Array.from(input.files ?? []);
+      input.value = "";
+      if (!picked.length) return;
+      const room = props.maxCount > 0 ? Math.max(0, props.maxCount - props.files.length) : picked.length;
+      if (picked.length > room) props.onExceed?.(picked);
+      const accepted = picked.slice(0, room);
+      if (accepted.length) props.onSelect?.(accepted);
+    };
+    return () => createVNode("div", {
+      "class": ["mh-upload", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("label", {
+      "class": ["mh-upload__zone", props.disabled ? "is-disabled" : "", dragover.value ? "is-dragover" : ""].filter(Boolean).join(" "),
+      "data-state": dragover.value ? "dragover" : "idle",
+      "onDragenter": onDragEnter,
+      "onDragover": onDragOver,
+      "onDragleave": onDragLeave,
+      "onDrop": onDrop
+    }, [createVNode("input", {
+      "class": "mh-upload__input",
+      "type": "file",
+      "accept": props.accept,
+      "multiple": props.multiple,
+      "disabled": props.disabled,
+      "onChange": onPick
+    }, null), slots.default ? slots.default() : createVNode(Fragment, null, [createVNode("span", {
+      "class": "mh-upload__zone-main"
+    }, [props.title ? props.title : createVNode(Fragment, null, [createVNode("span", {
+      "class": "mh-upload__link"
+    }, [createTextVNode("点击上传")]), createTextVNode("，或将文件拖到此处")])]), props.hint ? createVNode("span", {
+      "class": "mh-upload__zone-hint"
+    }, [props.hint]) : null])]), props.files.length ? createVNode("div", {
+      "class": "mh-upload__list"
+    }, [props.files.map((file, index) => createVNode("div", {
+      "class": "mh-upload__item",
+      "key": `${file.name}-${index}`
+    }, [createVNode("span", {
+      "class": "mh-upload__item-name"
+    }, [file.name]), createVNode("span", {
+      "class": "mh-upload__item-size"
+    }, [formatFileSize(file.size)]), createVNode("button", {
+      "type": "button",
+      "class": "mh-button mh-button--text mh-button--danger mh-upload__item-remove",
+      "aria-label": `移除 ${file.name}`,
+      "disabled": props.disabled,
+      "onClick": () => props.onRemove?.(file, index)
+    }, [createTextVNode("删除")])]))]) : null]);
+  }
+});
+const UploadThumbs = /* @__PURE__ */ defineComponent({
+  name: "UploadThumbs",
+  inheritAttrs: false,
+  props: {
+    files: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const extensionOf = (name) => name.split(".").pop()?.toUpperCase() ?? "";
+    return () => createVNode("div", {
+      "class": ["mh-upload__thumbs", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [props.files.map((file, index) => createVNode("div", {
+      "class": "mh-upload__thumb",
+      "key": `${file.name}-${index}`
+    }, [file.thumb ? createVNode("img", {
+      "class": "mh-upload__thumb-img",
+      "src": file.thumb,
+      "alt": file.name
+    }, null) : createVNode("span", null, [extensionOf(file.name)])]))]);
+  }
+});
+Object.assign(Upload, {
+  Thumbs: UploadThumbs
+});
+export {
+  Upload,
+  formatFileSize
+};

package/dist/index.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @manohub/ui 对外导出白名单。
+ *
+ * 三条约束：
+ * 1. **禁 `export *`**：导出面必须逐条列出，改名/删除都得过一次编译；
+ * 2. **零 farris**：本包不 import `@farris/ui-vue`，也不 re-export 任何 farris 类型或组件
+ *    （产物文本级护栏在仓根 `scripts/verify-pack.mjs` 的 ui 分支）；
+ * 3. **公开名一旦发布即冻结**（改名属破坏性变更，需要大版本 + 迁移说明），
+ *    故 `Card` / `Panel` / … 这些名字与类型名一个都不能变。
+ *
+ * 复合件的成员（`Card.Header` / `Form.Item` / `Panel.Body` …）**不平级导出**，一律走点号，
+ * 复合件用 `Object.assign` 挂成员（成员不平级导出）。
+ *
+ * 四层分工（本文件只做出口，不承载实现）：
+ *   `theme/<主题>/`  令牌（值）｜ `styles/`  组件面（类 + 状态协议，零 JS）｜ `components/`  Vue 层（增强）
+ *   ｜ `services/`  命令式服务（宿主 + 队列 + 生命周期；共用上面三层的组件与面，不另造浮层）
+ */
+export { Page, type PageCompound, type PagePadding, type PageHeaderProps, type PageBodyProps, type PageSplitProps, type PageSplitSidebarProps, } from './components/page';
+export { Panel, type PanelProps, type PanelPadding, type PanelCompound } from './components/panel';
+export { Card, type CardProps, type CardVariant, type CardPadding, type CardHeaderIcon, type CardCompound, } from './components/card';
+export { Divider, type DividerProps } from './components/divider';
+export { Nav, type NavVariant } from './components/nav';
+export { Collapse, type CollapseProps, type CollapseCompound } from './components/collapse';
+export { Tabset, type TabsetOption, type TabsetProps } from './components/tabset';
+export { Layout, type LayoutGap, type LayoutAlign, type LayoutJustify, type LayoutColumns, type LayoutSpan, } from './components/layout';
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarCompound } from './components/avatar';
+export { Skeleton, type SkeletonProps } from './components/skeleton';
+export { Radio, type RadioProps, type RadioCompound, type RadioCompoundType, type RadioCardItem, type RadioCardValue, } from './components/radio';
+export { Tag, type TagProps } from './components/tag';
+export { Tree, type TreeNode } from './components/tree';
+export { ListView, type ListViewProps, type ListViewStatus, type ListViewStatusTone, type ListViewCardItemProps, type ListViewCompound, } from './components/list-view';
+export { Badge, type BadgeTone, type BadgeShape, type BadgeSize, type BadgeDot, type BadgeStatus, } from './components/badge';
+export { Button, type ButtonVariant, type ButtonCompound, type ButtonCompoundType, } from './components/button';
+export { Input, Textarea, type TextareaProps, type InputCompound, type InputCompoundType, } from './components/input';
+export { Search, type SearchProps } from './components/search';
+export { Select, type SelectOption, type SelectValue } from './components/select';
+export { Switch } from './components/switch';
+export { Capsule, type CapsuleOption, type CapsuleShape } from './components/capsule';
+export { Form, type FormProps, type FormHeaderProps, type FormItemProps, type FormValues, type FormItemSlotScope, type FormLabelAlign, type FormPadding, type FormCompound, } from './components/form';
+export { Checkbox, type CheckboxOption, type CheckboxCompound, type CheckboxCompoundType, } from './components/checkbox';
+export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterCompound, } from './components/filter';
+export { Notice, type NoticeTone } from './components/notice';
+export { Notification, type NotificationTone, } from './components/notification';
+export { Dialog, type DialogWidth } from './components/dialog';
+export { Drawer, type DrawerSide } from './components/drawer';
+export { Tooltip, type TooltipSide, type TooltipAlign, } from './components/tooltip';
+export { Table, type TableColumn, type TableRow, type TableSortOrder, } from './components/table';
+export { Pagination, type PaginationPageItem } from './components/pagination';
+export { Tabs, type TabsOption, type TabsValue } from './components/tabs';
+export { Steps, type StepsItem, type StepsVariant, type StepsCompound, type StepsCompoundType, } from './components/steps';
+export { Toast, type ToastTone, type ToastCompound, type ToastCompoundType, } from './components/toast';
+export { Code } from './components/code';
+export { CodeEditor, type CodeEditorProps, type CodeEditorAutoSize, } from './components/code-editor';
+export { Upload, formatFileSize, type UploadFile, type UploadCompound, type UploadCompoundType, } from './components/upload';
+export { QueryState, type QueryStateKind, type QueryStateProps } from './components/query-state';
+export { Loading, type LoadingOverlay, type LoadingProps } from './components/loading';
+export type { ControlSize } from './components/control-size';
+export type { Padding } from './components/part-padding';
+export { partPaddingStyle, mergePartStyle } from './components/part-padding';
+export { configureHost, getHostSelector, resolveHost } from './services';
+export { toast, clearToasts, type ToastHandle, type ToastServiceOptions } from './services';
+export { alert, closeAllDialogs, confirm, type ConfirmOptions } from './services';
+export { hideLoading, showLoading } from './services';

package/dist/index.js

@@ -0,0 +1,102 @@
+import { Page } from "./components/page/index.js";
+import { Panel } from "./components/panel/index.js";
+import { Card } from "./components/card/index.js";
+import { Divider } from "./components/divider/index.js";
+import { Nav } from "./components/nav/index.js";
+import { Collapse } from "./components/collapse/index.js";
+import { Tabset } from "./components/tabset/index.js";
+import { Layout } from "./components/layout/index.js";
+import { Avatar } from "./components/avatar/index.js";
+import { Skeleton } from "./components/skeleton/index.js";
+import { Radio } from "./components/radio/index.js";
+import { Tag } from "./components/tag/index.js";
+import { Tree } from "./components/tree/index.js";
+import { ListView } from "./components/list-view/index.js";
+import { Badge } from "./components/badge/index.js";
+import { Button } from "./components/button/index.js";
+import { Input, Textarea } from "./components/input/index.js";
+import { Search } from "./components/search/index.js";
+import { Select } from "./components/select/index.js";
+import { Switch } from "./components/switch/index.js";
+import { Capsule } from "./components/capsule/index.js";
+import { Form } from "./components/form/index.js";
+import { Checkbox } from "./components/checkbox/index.js";
+import { FILTER_ALL, Filter, FilterItem, normalizeFilterValue } from "./components/filter/index.js";
+import { Notice } from "./components/notice/index.js";
+import { Notification } from "./components/notification/index.js";
+import { Dialog } from "./components/dialog/index.js";
+import { Drawer } from "./components/drawer/index.js";
+import { Tooltip } from "./components/tooltip/index.js";
+import { Table } from "./components/table/index.js";
+import { Pagination } from "./components/pagination/index.js";
+import { Tabs } from "./components/tabs/index.js";
+import { Steps } from "./components/steps/index.js";
+import { Toast } from "./components/toast/index.js";
+import { Code } from "./components/code/index.js";
+import { CodeEditor } from "./components/code-editor/index.js";
+import { Upload, formatFileSize } from "./components/upload/index.js";
+import { QueryState } from "./components/query-state/index.js";
+import { Loading } from "./components/loading/index.js";
+import { mergePartStyle, partPaddingStyle } from "./components/part-padding.js";
+import { alert, closeAllDialogs, confirm } from "./services/dialog.js";
+import { clearToasts, toast } from "./services/toast.js";
+import { configureHost, getHostSelector, resolveHost } from "./services/base.js";
+import { hideLoading, showLoading } from "./services/loading.js";
+export {
+  Avatar,
+  Badge,
+  Button,
+  Capsule,
+  Card,
+  Checkbox,
+  Code,
+  CodeEditor,
+  Collapse,
+  Dialog,
+  Divider,
+  Drawer,
+  FILTER_ALL,
+  Filter,
+  FilterItem,
+  Form,
+  Input,
+  Layout,
+  ListView,
+  Loading,
+  Nav,
+  Notice,
+  Notification,
+  Page,
+  Pagination,
+  Panel,
+  QueryState,
+  Radio,
+  Search,
+  Select,
+  Skeleton,
+  Steps,
+  Switch,
+  Table,
+  Tabs,
+  Tabset,
+  Tag,
+  Textarea,
+  Toast,
+  Tooltip,
+  Tree,
+  Upload,
+  alert,
+  clearToasts,
+  closeAllDialogs,
+  configureHost,
+  confirm,
+  formatFileSize,
+  getHostSelector,
+  hideLoading,
+  mergePartStyle,
+  normalizeFilterValue,
+  partPaddingStyle,
+  resolveHost,
+  showLoading,
+  toast
+};

package/dist/services/base.d.ts

@@ -0,0 +1,21 @@
+/** 注册宿主变更时的清理动作（服务层内部用；后注册的也按注册顺序执行） */
+export declare function onHostReset(hook: () => void): void;
+/** 显式指定服务层宿主；传 `null` 恢复自动解析 */
+export declare function configureHost(el: Element | null): void;
+/** 解析当前宿主（顺序见文件头；浏览器环境外直接抛错 —— 命令式服务没有可渲染的宿主） */
+export declare function resolveHost(): Element;
+/**
+ * 同 `resolveHost()`，但返回**选择器字符串** —— 给「只吃字符串宿主」的上游件用。
+ *
+ * 为什么不能直接给 Element：有的上游件把宿主当选择器解析（`document.querySelector(host)`），
+ * 传 Element 会拿到 `"[object HTMLDivElement]"` 这个非法选择器而当场抛错。给字符串又要避免
+ * 「门户里多应用并存时串到第一个 `[data-manohub-ui]`」，故给容器补一个**进程内唯一 id** 再返回它。
+ */
+export declare function getHostSelector(): string;
+/**
+ * 建一个挂载容器并挂到宿主下。
+ *
+ * 挂在宿主**内部**而不是拿宿主本身当挂载点：宿主是应用自己的根节点，直接挂上去会让
+ * `app.unmount()` 把应用自己的渲染结果一起抹掉。
+ */
+export declare function createHostContainer(): HTMLElement;

package/dist/services/base.js

@@ -0,0 +1,42 @@
+let configuredHost = null;
+const resetHooks = [];
+function onHostReset(hook) {
+  resetHooks.push(hook);
+}
+function configureHost(el) {
+  configuredHost = el;
+  for (const hook of resetHooks) hook();
+}
+function resolveHost() {
+  if (configuredHost) return configuredHost;
+  if (typeof document === "undefined") {
+    throw new Error("命令式服务只能在浏览器环境使用：当前上下文没有 document，无法解析渲染宿主");
+  }
+  return document.querySelector("[data-manohub-ui]") ?? document.body;
+}
+let idSeq = 0;
+const containerIds = /* @__PURE__ */ new WeakMap();
+function getHostSelector() {
+  const host = resolveHost();
+  if (host === document.body) return "body";
+  if (host.id) return `#${host.id}`;
+  let id = containerIds.get(host);
+  if (!id) {
+    id = `mh-service-host-${idSeq += 1}`;
+    containerIds.set(host, id);
+    host.id = id;
+  }
+  return `#${id}`;
+}
+function createHostContainer() {
+  const container = document.createElement("div");
+  resolveHost().appendChild(container);
+  return container;
+}
+export {
+  configureHost,
+  createHostContainer,
+  getHostSelector,
+  onHostReset,
+  resolveHost
+};

package/dist/services/dialog.d.ts

@@ -0,0 +1,41 @@
+export interface ConfirmOptions {
+    /** 标题（缺省不渲染页头，只剩内容与底栏） */
+    title?: string;
+    /** 正文（纯文本；复杂内容请直接用 `Dialog` 组件） */
+    detail?: string;
+    /** 确定按钮文案 */
+    okText?: string;
+    /** 取消按钮文案（`alert` 不使用） */
+    cancelText?: string;
+    /** 确定按钮的危险色（删除类确认） */
+    okDanger?: boolean;
+    /** 是否显示关闭位（缺省开：用户总得有第三条退路） */
+    closable?: boolean;
+}
+/**
+ * 确认框（命令式）：确定 → `true`，取消 / 关闭位 / Esc / 点遮罩 → `false`。
+ *
+ * 与 `Dialog` 组件的分工：组件是「受控弹窗」，本函数补齐命令式调用缺的那一层（宿主 + 收场 Promise）。
+ * 语义与主流库一致：**任何非确定路径都折成 `false`**，调用方 `if (await confirm(...))` 一处判断即可。
+ *
+ * 需要「确定按钮进加载态」的异步确认请直接用 `Dialog` 组件（`onOk` 返回 Promise 时自动进加载态）——
+ * 命令式形态刻意不引入跨 tick 的加载态，免得调用方以为弹窗已经关了。
+ *
+ * @example 删除确认
+ * if (await confirm({ title: '删除确认', detail: '删除后不可恢复，确认继续？', okText: '删除', okDanger: true })) {
+ *   await remove()
+ * }
+ */
+export declare function confirm(options?: ConfirmOptions): Promise<boolean>;
+/**
+ * 告知框（命令式）：只有一个「知道了」，任意收场路径都 resolve。
+ *
+ * 底栏**自绘**而不是用内建底栏：内建底栏固定是「取消 + 确定」两枚，而告知框没有「取消」可言
+ * （给两枚按钮会让用户以为还有一条分支）。
+ *
+ * @example
+ * await alert({ title: '导入完成', detail: '共 128 条，其中 3 条被跳过。' })
+ */
+export declare function alert(options?: ConfirmOptions): Promise<void>;
+/** 收掉全部在档弹窗（逐个折成 `false`）；幂等。换应用 / 卸载时调 */
+export declare function closeAllDialogs(): void;

package/dist/services/dialog.js

@@ -0,0 +1,83 @@
+import { ref, createApp, defineComponent, nextTick, h } from "vue";
+import { Button } from "../components/button/index.js";
+import { Dialog } from "../components/dialog/index.js";
+import { createHostContainer, onHostReset } from "./base.js";
+const pending = /* @__PURE__ */ new Set();
+function openDialog(render) {
+  return new Promise((resolve) => {
+    const open = ref(true);
+    const container = createHostContainer();
+    let settled = false;
+    let app = null;
+    const finish = (value) => {
+      if (settled) return;
+      settled = true;
+      pending.delete(finish);
+      open.value = false;
+      resolve(value);
+      void nextTick(() => {
+        app?.unmount();
+        app = null;
+        container.remove();
+      });
+    };
+    const ctx = { isOpen: () => open.value, finish };
+    pending.add(finish);
+    app = createApp(
+      defineComponent({
+        name: "DialogServiceView",
+        setup: () => () => render(ctx)
+      })
+    );
+    app.mount(container);
+  });
+}
+function confirm(options = {}) {
+  return openDialog(
+    (ctx) => h(
+      Dialog,
+      {
+        open: ctx.isOpen(),
+        title: options.title,
+        closable: options.closable ?? true,
+        okText: options.okText ?? "确定",
+        cancelText: options.cancelText ?? "取消",
+        okDanger: options.okDanger ?? false,
+        onOk: () => ctx.finish(true),
+        onCancel: () => ctx.finish(false),
+        onClose: () => ctx.finish(false)
+      },
+      { default: () => options.detail }
+    )
+  );
+}
+function alert(options = {}) {
+  return openDialog(
+    (ctx) => h(
+      Dialog,
+      {
+        open: ctx.isOpen(),
+        title: options.title,
+        closable: options.closable ?? true,
+        // 关闭位与 Esc 都算「看过了」
+        onCancel: () => ctx.finish(true),
+        onClose: () => ctx.finish(true)
+      },
+      {
+        default: () => options.detail,
+        footer: () => h(Button, { variant: "primary", onClick: () => ctx.finish(true) }, {
+          default: () => options.okText ?? "知道了"
+        })
+      }
+    )
+  ).then(() => void 0);
+}
+function closeAllDialogs() {
+  for (const finish of [...pending]) finish(false);
+}
+onHostReset(() => closeAllDialogs());
+export {
+  alert,
+  closeAllDialogs,
+  confirm
+};

package/dist/services/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 服务层出口（命令式反馈：消息提示 / 确认框 / 全屏加载）。
+ *
+ * 与组件层的分工：**组件的可见性归调用方**（受控、到点只回调）；本层补齐命令式调用缺的那三样
+ * ——宿主、队列与生命周期。二者共用同一批组件与同一份面，不另造一套浮层。
+ *
+ * 宿主解析见 `./base`：微前端下必须落回**本应用自己的容器**，否则令牌与应用侧样式同时失效。
+ */
+export { configureHost, getHostSelector, resolveHost } from './base';
+export { toast, clearToasts, type ToastHandle, type ToastServiceOptions } from './toast';
+export { alert, closeAllDialogs, confirm, type ConfirmOptions } from './dialog';
+export { hideLoading, showLoading } from './loading';

package/dist/services/loading.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 显示全屏加载遮罩（命令式），返回**幂等的关闭句柄**。
+ *
+ * 遮罩落在服务宿主（应用自己的 `[data-manohub-ui]` 容器）内 —— 令牌与应用侧样式都跟着它走。
+ * 层级压在同包的 `Toast` 堆叠之上、模态层（`<dialog>` 的 top layer）之下。
+ *
+ * @example 配平用法（推荐：句柄只关自己那一次）
+ * const done = showLoading('保存中…')
+ * try {
+ *   await save()
+ * } finally {
+ *   done()
+ * }
+ *
+ * @example 文案可后置（同一批并发里最后一次给的文案生效）
+ * showLoading()
+ * showLoading('正在导入，请勿关闭页面')
+ */
+export declare function showLoading(value?: string): () => void;
+/** 关闭一次（引用计数递减）；计数归零时收掉宿主与实例。已是 0 时是 no-op */
+export declare function hideLoading(): void;

package/dist/services/loading.js

@@ -0,0 +1,41 @@
+import { createApp, ref, defineComponent, h } from "vue";
+import { Loading } from "../components/loading/index.js";
+import { createHostContainer, onHostReset } from "./base.js";
+let count = 0;
+let app = null;
+let container = null;
+const text = ref(void 0);
+const LoadingServiceView = defineComponent({
+  name: "LoadingServiceView",
+  setup: () => () => h(Loading, { overlay: "screen", text: text.value })
+});
+function ensureApp() {
+  if (app) return;
+  container = createHostContainer();
+  app = createApp(LoadingServiceView);
+  app.mount(container);
+}
+function dispose() {
+  count = 0;
+  text.value = void 0;
+  app?.unmount();
+  app = null;
+  container?.remove();
+  container = null;
+}
+function showLoading(value) {
+  ensureApp();
+  count += 1;
+  text.value = value;
+  return () => hideLoading();
+}
+function hideLoading() {
+  if (count === 0) return;
+  count -= 1;
+  if (count === 0) dispose();
+}
+onHostReset(() => dispose());
+export {
+  hideLoading,
+  showLoading
+};

package/dist/services/toast.d.ts

@@ -0,0 +1,40 @@
+import { type ToastTone } from '../components/toast';
+export interface ToastServiceOptions {
+    /** 自动消失毫秒数（缺省 3000；`0` = 常驻，必须由调用方或用户自行关掉） */
+    duration?: number;
+    /** 动作位（文案 + 回调）：如「导出失败 → 重试」 */
+    action?: {
+        text: string;
+        onClick: () => void;
+    };
+    /** 手动关闭位（缺省：常驻提示自动开、会自己消失的不开） */
+    closable?: boolean;
+}
+/** 单条提示的句柄：提前关掉它（如「保存中」完成后立刻收掉） */
+export interface ToastHandle {
+    close: () => void;
+}
+/**
+ * 弹一条消息提示（命令式）。
+ *
+ * 与 `Toast` 组件的分工：组件是「一条提示的渲染与计时」，本函数补齐命令式调用缺的那一层
+ * ——**宿主、队列、上限、按需挂载**。四条语义：
+ * ① 首次调用才建宿主与 Vue 实例（模块顶层零 DOM 操作，不拖首屏）；
+ * ② 队列空时自动收掉宿主；
+ * ③ 同屏最多 5 条，超出挤掉最早的；
+ * ④ 返回句柄可提前关掉它自己（其余各条互不影响）。
+ *
+ * @example 成功提示（3 秒自动消失）
+ * toast('success', '保存成功')
+ *
+ * @example 失败 + 重试动作
+ * toast('error', '导出失败', { action: { text: '重试', onClick: retry } })
+ *
+ * @example 常驻的「进行中」，完成后自己收掉
+ * const pending = toast('loading', '正在导入…', { duration: 0 })
+ * // …导入完成
+ * pending.close()
+ */
+export declare function toast(tone: ToastTone, text: string, options?: ToastServiceOptions): ToastHandle;
+/** 清空全部提示并收掉宿主（换应用 / 卸载时调；幂等） */
+export declare function clearToasts(): void;