@qingmingmu/components 0.1.0-beta.0

package/es/components/notification/index.d.cts

@@ -0,0 +1,90 @@
+/**
+ * QmNotification 类型定义（03-T4 命令式 API）
+ *
+ * 与 Message 的差异：
+ * - 卡片化：图标 + 标题 + 内容 + 关闭按钮 + 操作区（footer）；
+ * - 四角弹出：top-left / top-right / bottom-left / bottom-right；
+ * - 不常驻时默认 4500ms 自动关闭；closable 默认 true。
+ */
+/** 通知类型 */
+type NotificationType = 'success' | 'warning' | 'error' | 'info';
+/** 弹出位置（四角） */
+type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** 操作按钮（imperative 调用提供，渲染到 footer） */
+interface NotificationAction {
+    text: string;
+    onClick: () => void;
+}
+/** 命令式调用选项 */
+interface NotificationOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文内容 */
+    message?: string;
+    /** 类型，默认 info */
+    type?: NotificationType;
+    /** 自动关闭时长（ms），默认 4500；0 = 常驻 */
+    duration?: number;
+    /** 是否显示关闭按钮，默认 true */
+    closable?: boolean;
+    /** 弹出位置，默认 top-right */
+    placement?: NotificationPlacement;
+    /** 操作按钮（渲染到 footer） */
+    action?: NotificationAction;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+/** 单条通知运行时状态 */
+interface NotificationItemData {
+    id: number;
+    type: NotificationType;
+    title: string;
+    message: string;
+    closable: boolean;
+    placement: NotificationPlacement;
+    action?: NotificationAction;
+    visible: boolean;
+}
+/** 调用方持有的句柄 */
+interface NotificationInstance {
+    close: () => void;
+    update: (options: NotificationOptions) => void;
+}
+
+/**
+ * QmNotification 管理器（03-T4 §3.4：四角独立队列 / 堆叠）
+ *
+ * - 惰性挂载：首次调用才创建容器；容器复用（四角共用一个根容器）；
+ * - 四角独立队列：top-left / top-right / bottom-left / bottom-right 各自一组列表；
+ * - 堆叠：靠近弹出角为最新一条（顶部 unshift，底部 unshift + CSS column-reverse）；
+ * - 定时器：每条独立 setTimeout，duration=0 常驻；close/update 清理/重置；
+ * - 进出场：TransitionGroup 管理 leave，完成后 splice。
+ */
+
+/** 关闭全部并卸载（测试清理 / 统一销毁） */
+declare function destroyNotificationManager(): void;
+
+/**
+ * QmNotification 命令式入口（03-T4）
+ *
+ * 用法：
+ *   import { notification } from '@qingmingmu/components'
+ *   notification.success({ title: '导出完成', message: '文件已保存到下载目录' })
+ *   notification.error({ title: '失败', message: '网络异常', placement: 'bottom-right' })
+ *
+ * auto-import：resolver 将 QmNotification 映射为 `import { notification } from '@qingmingmu/components'`。
+ */
+
+/** 命令式 API 对象：success / error / warning / info */
+declare const notification: {
+    success: (input: string | NotificationOptions) => NotificationInstance;
+    error: (input: string | NotificationOptions) => NotificationInstance;
+    warning: (input: string | NotificationOptions) => NotificationInstance;
+    info: (input: string | NotificationOptions) => NotificationInstance;
+};
+/** 别名（兼容 QmNotification.xxx 调用风格） */
+declare const QmNotification: typeof notification;
+type NotificationApi = typeof notification;
+
+export { QmNotification, destroyNotificationManager, notification };
+export type { NotificationAction, NotificationApi, NotificationInstance, NotificationItemData, NotificationOptions, NotificationPlacement, NotificationType };

package/es/components/notification/index.d.mts

@@ -0,0 +1,90 @@
+/**
+ * QmNotification 类型定义（03-T4 命令式 API）
+ *
+ * 与 Message 的差异：
+ * - 卡片化：图标 + 标题 + 内容 + 关闭按钮 + 操作区（footer）；
+ * - 四角弹出：top-left / top-right / bottom-left / bottom-right；
+ * - 不常驻时默认 4500ms 自动关闭；closable 默认 true。
+ */
+/** 通知类型 */
+type NotificationType = 'success' | 'warning' | 'error' | 'info';
+/** 弹出位置（四角） */
+type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** 操作按钮（imperative 调用提供，渲染到 footer） */
+interface NotificationAction {
+    text: string;
+    onClick: () => void;
+}
+/** 命令式调用选项 */
+interface NotificationOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文内容 */
+    message?: string;
+    /** 类型，默认 info */
+    type?: NotificationType;
+    /** 自动关闭时长（ms），默认 4500；0 = 常驻 */
+    duration?: number;
+    /** 是否显示关闭按钮，默认 true */
+    closable?: boolean;
+    /** 弹出位置，默认 top-right */
+    placement?: NotificationPlacement;
+    /** 操作按钮（渲染到 footer） */
+    action?: NotificationAction;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+/** 单条通知运行时状态 */
+interface NotificationItemData {
+    id: number;
+    type: NotificationType;
+    title: string;
+    message: string;
+    closable: boolean;
+    placement: NotificationPlacement;
+    action?: NotificationAction;
+    visible: boolean;
+}
+/** 调用方持有的句柄 */
+interface NotificationInstance {
+    close: () => void;
+    update: (options: NotificationOptions) => void;
+}
+
+/**
+ * QmNotification 管理器（03-T4 §3.4：四角独立队列 / 堆叠）
+ *
+ * - 惰性挂载：首次调用才创建容器；容器复用（四角共用一个根容器）；
+ * - 四角独立队列：top-left / top-right / bottom-left / bottom-right 各自一组列表；
+ * - 堆叠：靠近弹出角为最新一条（顶部 unshift，底部 unshift + CSS column-reverse）；
+ * - 定时器：每条独立 setTimeout，duration=0 常驻；close/update 清理/重置；
+ * - 进出场：TransitionGroup 管理 leave，完成后 splice。
+ */
+
+/** 关闭全部并卸载（测试清理 / 统一销毁） */
+declare function destroyNotificationManager(): void;
+
+/**
+ * QmNotification 命令式入口（03-T4）
+ *
+ * 用法：
+ *   import { notification } from '@qingmingmu/components'
+ *   notification.success({ title: '导出完成', message: '文件已保存到下载目录' })
+ *   notification.error({ title: '失败', message: '网络异常', placement: 'bottom-right' })
+ *
+ * auto-import：resolver 将 QmNotification 映射为 `import { notification } from '@qingmingmu/components'`。
+ */
+
+/** 命令式 API 对象：success / error / warning / info */
+declare const notification: {
+    success: (input: string | NotificationOptions) => NotificationInstance;
+    error: (input: string | NotificationOptions) => NotificationInstance;
+    warning: (input: string | NotificationOptions) => NotificationInstance;
+    info: (input: string | NotificationOptions) => NotificationInstance;
+};
+/** 别名（兼容 QmNotification.xxx 调用风格） */
+declare const QmNotification: typeof notification;
+type NotificationApi = typeof notification;
+
+export { QmNotification, destroyNotificationManager, notification };
+export type { NotificationAction, NotificationApi, NotificationInstance, NotificationItemData, NotificationOptions, NotificationPlacement, NotificationType };

package/es/components/notification/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * QmNotification 类型定义（03-T4 命令式 API）
+ *
+ * 与 Message 的差异：
+ * - 卡片化：图标 + 标题 + 内容 + 关闭按钮 + 操作区（footer）；
+ * - 四角弹出：top-left / top-right / bottom-left / bottom-right；
+ * - 不常驻时默认 4500ms 自动关闭；closable 默认 true。
+ */
+/** 通知类型 */
+type NotificationType = 'success' | 'warning' | 'error' | 'info';
+/** 弹出位置（四角） */
+type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** 操作按钮（imperative 调用提供，渲染到 footer） */
+interface NotificationAction {
+    text: string;
+    onClick: () => void;
+}
+/** 命令式调用选项 */
+interface NotificationOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文内容 */
+    message?: string;
+    /** 类型，默认 info */
+    type?: NotificationType;
+    /** 自动关闭时长（ms），默认 4500；0 = 常驻 */
+    duration?: number;
+    /** 是否显示关闭按钮，默认 true */
+    closable?: boolean;
+    /** 弹出位置，默认 top-right */
+    placement?: NotificationPlacement;
+    /** 操作按钮（渲染到 footer） */
+    action?: NotificationAction;
+    /** 关闭回调 */
+    onClose?: () => void;
+}
+/** 单条通知运行时状态 */
+interface NotificationItemData {
+    id: number;
+    type: NotificationType;
+    title: string;
+    message: string;
+    closable: boolean;
+    placement: NotificationPlacement;
+    action?: NotificationAction;
+    visible: boolean;
+}
+/** 调用方持有的句柄 */
+interface NotificationInstance {
+    close: () => void;
+    update: (options: NotificationOptions) => void;
+}
+
+/**
+ * QmNotification 管理器（03-T4 §3.4：四角独立队列 / 堆叠）
+ *
+ * - 惰性挂载：首次调用才创建容器；容器复用（四角共用一个根容器）；
+ * - 四角独立队列：top-left / top-right / bottom-left / bottom-right 各自一组列表；
+ * - 堆叠：靠近弹出角为最新一条（顶部 unshift，底部 unshift + CSS column-reverse）；
+ * - 定时器：每条独立 setTimeout，duration=0 常驻；close/update 清理/重置；
+ * - 进出场：TransitionGroup 管理 leave，完成后 splice。
+ */
+
+/** 关闭全部并卸载（测试清理 / 统一销毁） */
+declare function destroyNotificationManager(): void;
+
+/**
+ * QmNotification 命令式入口（03-T4）
+ *
+ * 用法：
+ *   import { notification } from '@qingmingmu/components'
+ *   notification.success({ title: '导出完成', message: '文件已保存到下载目录' })
+ *   notification.error({ title: '失败', message: '网络异常', placement: 'bottom-right' })
+ *
+ * auto-import：resolver 将 QmNotification 映射为 `import { notification } from '@qingmingmu/components'`。
+ */
+
+/** 命令式 API 对象：success / error / warning / info */
+declare const notification: {
+    success: (input: string | NotificationOptions) => NotificationInstance;
+    error: (input: string | NotificationOptions) => NotificationInstance;
+    warning: (input: string | NotificationOptions) => NotificationInstance;
+    info: (input: string | NotificationOptions) => NotificationInstance;
+};
+/** 别名（兼容 QmNotification.xxx 调用风格） */
+declare const QmNotification: typeof notification;
+type NotificationApi = typeof notification;
+
+export { QmNotification, destroyNotificationManager, notification };
+export type { NotificationAction, NotificationApi, NotificationInstance, NotificationItemData, NotificationOptions, NotificationPlacement, NotificationType };

package/es/components/notification/index.mjs

@@ -0,0 +1,284 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, toDisplayString, createCommentVNode, renderSlot, reactive, createApp, h, TransitionGroup } from 'vue';
+import { I as Icon } from '../../shared/components.D3on6_fI.mjs';
+import { _ as _export_sfc } from '../../shared/components.pcqpp-6-.mjs';
+import '@qingmingmu/components/es/components/notification/style.css';
+import '@qingmingmu/icons';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmNotification" },
+  __name: "notification",
+  props: {
+    item: { type: Object, required: true }
+  },
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const iconName = computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "check-circle";
+        case "error":
+          return "error";
+        case "warning":
+          return "warning";
+        default:
+          return "info";
+      }
+    });
+    const colorVar = computed(() => {
+      switch (props.item.type) {
+        case "success":
+          return "var(--qm-notification-color-success)";
+        case "error":
+          return "var(--qm-notification-color-error)";
+        case "warning":
+          return "var(--qm-notification-color-warning)";
+        default:
+          return "var(--qm-notification-color-info)";
+      }
+    });
+    function handleClose() {
+      emit("close", props.item.id);
+    }
+    function handleAction() {
+      props.item.action?.onClick();
+    }
+    const __returned__ = { props, emit, iconName, colorVar, handleClose, handleAction, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-notification__main" };
+const _hoisted_2 = { class: "qm-notification__text" };
+const _hoisted_3 = {
+	key: 0,
+	class: "qm-notification__title"
+};
+const _hoisted_4 = {
+	key: 1,
+	class: "qm-notification__message"
+};
+const _hoisted_5 = { class: "qm-notification__aside" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-notification", [`qm-notification--${$props.item.type}`]]),
+			role: "status",
+			"aria-live": "polite"
+		},
+		[createElementVNode("div", _hoisted_1, [createElementVNode(
+			"span",
+			{
+				class: "qm-notification__icon",
+				style: normalizeStyle({ color: $setup.colorVar }),
+				"aria-hidden": "true"
+			},
+			[createVNode($setup["QmIcon"], { name: $setup.iconName }, null, 8, ["name"])],
+			4
+			/* STYLE */
+		), createElementVNode("div", _hoisted_2, [
+			$props.item.title ? (openBlock(), createElementBlock(
+				"h3",
+				_hoisted_3,
+				toDisplayString($props.item.title),
+				1
+				/* TEXT */
+			)) : createCommentVNode("v-if", true),
+			$props.item.message ? (openBlock(), createElementBlock(
+				"p",
+				_hoisted_4,
+				toDisplayString($props.item.message),
+				1
+				/* TEXT */
+			)) : createCommentVNode("v-if", true),
+			createCommentVNode(" footer 插槽：组件化使用时可自定义操作区；命令式由 action 渲染 "),
+			renderSlot(_ctx.$slots, "footer")
+		])]), createElementVNode("div", _hoisted_5, [$props.item.closable ? (openBlock(), createElementBlock("button", {
+			key: 0,
+			type: "button",
+			class: "qm-notification__close",
+			"aria-label": "关闭通知",
+			onClick: $setup.handleClose
+		}, [createVNode($setup["QmIcon"], {
+			name: "close",
+			style: { "font-size": "14px" }
+		})])) : createCommentVNode("v-if", true), $props.item.action ? (openBlock(), createElementBlock(
+			"button",
+			{
+				key: 1,
+				type: "button",
+				class: "qm-notification__action",
+				onClick: $setup.handleAction
+			},
+			toDisplayString($props.item.action.text),
+			1
+			/* TEXT */
+		)) : createCommentVNode("v-if", true)])],
+		2
+		/* CLASS */
+	);
+}
+const NotificationItem = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\notification\\notification.vue"]]);
+
+const DEFAULT_DURATION = 4500;
+const PLACEMENTS = ["top-left", "top-right", "bottom-left", "bottom-right"];
+let seed = 0;
+const queues = {
+  "top-left": reactive([]),
+  "top-right": reactive([]),
+  "bottom-left": reactive([]),
+  "bottom-right": reactive([])
+};
+const timers = /* @__PURE__ */ new Map();
+let container = null;
+let app = null;
+function clearTimer(id) {
+  const t = timers.get(id);
+  if (t) {
+    clearTimeout(t);
+    timers.delete(id);
+  }
+}
+function startTimer(item) {
+  clearTimer(item.id);
+  if (item.duration > 0) {
+    timers.set(
+      item.id,
+      setTimeout(() => removeInstance(item.id), item.duration)
+    );
+  }
+}
+function findQueue(id) {
+  return PLACEMENTS.map((p) => queues[p]).find((q) => q.some((i) => i.id === id));
+}
+function removeInstance(id) {
+  clearTimer(id);
+  const queue = findQueue(id);
+  if (!queue)
+    return;
+  const idx = queue.findIndex((i) => i.id === id);
+  if (idx === -1)
+    return;
+  const [removed] = queue.splice(idx, 1);
+  removed?.onClose?.();
+}
+function createRoot() {
+  return {
+    setup() {
+      return () => h(
+        "div",
+        { class: "qm-notification-container-root" },
+        PLACEMENTS.map(
+          (placement) => h(
+            "div",
+            {
+              key: placement,
+              class: ["qm-notification-placement", `qm-notification-placement--${placement}`]
+            },
+            [
+              h(
+                TransitionGroup,
+                { name: "qm-notification", tag: "div", class: "qm-notification__list" },
+                () => queues[placement].map(
+                  (item) => h(NotificationItem, {
+                    key: item.id,
+                    item,
+                    onClose: () => removeInstance(item.id)
+                  })
+                )
+              )
+            ]
+          )
+        )
+      );
+    }
+  };
+}
+function ensureContainer() {
+  if (container && app)
+    return;
+  container = document.createElement("div");
+  container.className = "qm-notification-root";
+  document.body.appendChild(container);
+  app = createApp(createRoot());
+  app.mount(container);
+}
+function destroyNotificationManager() {
+  for (const id of [...timers.keys()]) clearTimer(id);
+  for (const p of PLACEMENTS) queues[p].splice(0, queues[p].length);
+  if (app) {
+    app.unmount();
+    app = null;
+  }
+  if (container) {
+    container.remove();
+    container = null;
+  }
+}
+function normalize(type, input) {
+  const opts = typeof input === "string" ? { message: input } : { ...input };
+  return {
+    ...opts,
+    type: opts.type ?? type,
+    duration: opts.duration ?? DEFAULT_DURATION,
+    closable: opts.closable ?? true,
+    placement: opts.placement ?? "top-right"
+  };
+}
+function openNotification(type, input) {
+  const opts = normalize(type, input);
+  ensureContainer();
+  const item = reactive({
+    id: ++seed,
+    type: opts.type,
+    title: opts.title ?? "",
+    message: opts.message ?? "",
+    closable: opts.closable ?? true,
+    placement: opts.placement ?? "top-right",
+    action: opts.action,
+    visible: true,
+    duration: opts.duration ?? DEFAULT_DURATION,
+    onClose: opts.onClose
+  });
+  queues[item.placement].unshift(item);
+  startTimer(item);
+  return {
+    close: () => removeInstance(item.id),
+    update: (patch) => {
+      if (typeof patch === "string") {
+        item.message = patch;
+        return;
+      }
+      if (patch.title !== void 0)
+        item.title = patch.title;
+      if (patch.message !== void 0)
+        item.message = patch.message;
+      if (patch.type !== void 0)
+        item.type = patch.type;
+      if (patch.closable !== void 0)
+        item.closable = patch.closable;
+      if (patch.action !== void 0)
+        item.action = patch.action;
+      if (patch.duration !== void 0) {
+        item.duration = patch.duration;
+        startTimer(item);
+      }
+    }
+  };
+}
+
+const notification = {
+  success: (input) => openNotification("success", input),
+  error: (input) => openNotification("error", input),
+  warning: (input) => openNotification("warning", input),
+  info: (input) => openNotification("info", input)
+};
+const QmNotification = notification;
+
+export { QmNotification, destroyNotificationManager, notification };

package/es/components/notification/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/notification/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱 / 命令式入口自引入）。
+import './style.css'