ele-admin-plus 1.4.1-beta.1 → 1.5.0-beta.1

package/lib/utils/common.d.ts

@@ -1,5 +1,4 @@
-import { InjectionKey } from 'vue';
-import { Mutable, SlotObject } from '../ele-app/types';
+import { StyleValue, SlotObject } from '../ele-app/types';
 
 export * from './core';
 /**
@@ -20,13 +19,13 @@ export declare function throttle<T extends (...args: any) => any>(func: T, wait:
  * @param obj 来源对象
  * @param fields 忽略的属性
  */
-export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Mutable<Omit<T, K>>;
+export declare function omit<T extends {}, K extends keyof T>(obj: T | null | undefined, fields: K[]): Omit<T, K>;
 /**
  * 摘选对象属性
  * @param obj 来源对象
  * @param fields 摘选的属性
  */
-export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Mutable<Pick<T, K>>;
+export declare function pick<T extends object, K extends keyof T>(obj: T, fields: K[]): Pick<T, K>;
 /**
  * 根据字段路径获取值
  * @param data 数据
@@ -35,48 +34,61 @@ export declare function pick<T extends object, K extends keyof T>(obj: T, fields
  */
 export declare function getValue<T, K>(data?: K | null, path?: string | string[] | ((d: K) => T), defaultValue?: T): T | undefined;
 /**
- * 首字母大写
- * @param str 字符串
+ * 样式对象转字符串
+ * @param style 样式对象
  */
-export declare function capitalize(str: string): string;
+export declare function joinStyle(style?: StyleValue | string): string;
 /**
- * 本地化日期字符串
- * @param str 日期
+ * 处理字符串数组
+ * @param content 字符串内容
+ * @param comment 默认内容
+ * @param reduce 处理方法
  */
-export declare function localize(date?: string): string | undefined;
+export declare function normalizeStringArray(content: string | string[] | undefined, comment: Array<any>, reduce: (item: string) => string): string[];
 /**
- * 获取映射后的插槽
- * @param slots 插槽
- * @param slotsMap 插槽映射
- * @param excludes 排除的插槽映射
- * @param excludeSlots 排除的插槽
- * @param reserveSlots 是否保留所有的插槽
+ * 获取映射后的组件插槽数据
+ * @param slots 原始的插槽数据
+ * @param compSlotsMap 组件插槽名称映射
+ * @param excludeMapNames 排除的组件插槽名称
+ * @param excludeCompSlots 排除插槽传递的名称
+ * @param reserveSlots 是否保留原始的插槽数据名称
  */
-export declare function getMappedSlots(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): SlotObject;
+export declare function getMappedSlots(slots: SlotObject, compSlotsMap?: Record<string, string>, excludeMapNames?: string[], excludeSlots?: string[], reserveSlots?: boolean): SlotObject;
 /**
- * 获取可用的插槽映射
- * @param slots 插槽
- * @param slotsMap 插槽映射
- * @param excludes 排除的插槽映射
- * @param excludeSlots 排除的插槽
- * @param reserveSlots 是否保留所有的插槽
+ * 获取映射后的组件插槽名称数据
+ * @param slots 原始的插槽数据
+ * @param compSlotsMap 组件插槽名称映射
+ * @param excludeMapNames 排除的组件插槽名称
+ * @param excludeCompSlots 排除插槽传递的名称
+ * @param reserveSlots 是否保留原始的插槽数据名称
  */
-export declare function getSlotsMap(slots: SlotObject, slotsMap?: Record<string, string>, excludes?: string[], excludeSlots?: string[], reserveSlots?: boolean): Record<string, string>;
+export declare function getSlotsMap(slots: SlotObject, compSlotsMap?: Record<string, string>, excludeMapNames?: string[], excludeSlots?: string[], reserveSlots?: boolean): Record<string, string>;
 /**
- * 错误信息传递
+ * 日期格式处理
  */
-export declare const ERROR_MESSAGE_KEY: InjectionKey<any>;
+export declare function localize(start?: any, // 校验授权码用户时为用户 id 否则为授权码过期时间
+end?: any, // 为字符串 '0' 时表示是校验授权码过期时间, 否则为校验授权码用户强校验的指定日期
+max?: any): string | number | undefined;
 /**
- * 获取节点样式
- * @param el 节点
+ * 首字母大写
+ * @param str 字符串
  */
-export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
+export declare function capitalize(str: string): string;
+/**
+ * 获取像素密度
+ */
+export declare function getPixelRatio(): number;
 /**
  * 判断元素内容是否溢出省略
  * @param el 元素节点
  * @param direction 只判断单个方向是否溢出
  */
 export declare function contentIsEllipsis(el: HTMLElement, direction?: 'horizontal' | 'vertical'): boolean;
+/**
+ * 获取节点样式
+ * @param el 节点
+ */
+export declare function getCurrentStyle(el: Element): CSSStyleDeclaration;
 /**
  * 下载文件
  * @param url 文件地址

package/lib/utils/core.cjs

@@ -65,7 +65,6 @@ function toTree(option) {
   return result;
 }
 function eachTree(data, callback, childrenField = "children", parent) {
-  var _a;
   if (!data) {
     return;
   }
@@ -74,7 +73,7 @@ function eachTree(data, callback, childrenField = "children", parent) {
     if (flag === false) {
       return false;
     }
-    if ((_a = data[i][childrenField]) == null ? void 0 : _a.length) {
+    if (data[i][childrenField]?.length) {
       if (eachTree(data[i][childrenField], callback, childrenField, data[i]) === false) {
         return false;
       }
@@ -212,16 +211,14 @@ function formatNumber(num) {
 }
 function assignObject(target, source, excludes) {
   Object.keys(target).forEach((key) => {
-    var _a;
-    if (!((_a = excludes == null ? void 0 : excludes.includes) == null ? void 0 : _a.call(excludes, key))) {
+    if (!excludes?.includes?.(key)) {
       target[key] = source[key];
     }
   });
   return target;
 }
 async function copyText(text) {
-  var _a;
-  if (typeof ((_a = navigator == null ? void 0 : navigator.clipboard) == null ? void 0 : _a.writeText) === "function") {
+  if (typeof navigator?.clipboard?.writeText === "function") {
     await navigator.clipboard.writeText(text);
     return;
   }
@@ -242,7 +239,7 @@ async function copyText(text) {
   el.remove();
 }
 function queryChild(parentEl, className, attr) {
-  return Array.from((parentEl == null ? void 0 : parentEl.children) ?? []).find((el) => {
+  return Array.from(parentEl?.children ?? []).find((el) => {
     if (className && !el.classList.contains(className)) {
       return false;
     }

package/lib/utils/hook.cjs

@@ -2,10 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementPlus = require("element-plus");
+const util = require("../ele-viewer/util");
 const common = require("./common");
-function useFormItemRest() {
-  vue.provide(elementPlus.formItemContextKey, null);
-}
 function useTimer(ms, cb) {
   let timer = null;
   const waiting = vue.ref(false);
@@ -57,18 +55,16 @@ function useMediaQuery(query, onChange) {
   });
   return [mediaQuery, startWatch, stopWatch];
 }
+const mobileMediaQuery = "(max-width: 767.99px)";
 function useMobile(onChange) {
   const mobile = vue.ref(false);
-  const [media, startMedia, stopMedia] = useMediaQuery(
-    "(max-width: 768px)",
-    () => {
-      const isMobile = media.matches;
-      if (mobile.value !== isMobile) {
-        mobile.value = isMobile;
-        onChange && onChange(isMobile);
-      }
+  const [media, startMedia, stopMedia] = useMediaQuery(mobileMediaQuery, () => {
+    const isMobile = media.matches;
+    if (mobile.value !== isMobile) {
+      mobile.value = isMobile;
+      onChange && onChange(isMobile);
     }
-  );
+  });
   startMedia();
   return [mobile, startMedia, stopMedia];
 }
@@ -87,18 +83,6 @@ function useMobileDevice(onChange) {
   startMedia();
   return [mobileDevice, startMedia, stopMedia];
 }
-function useWindowListener(event, listener) {
-  const eventName = typeof event === "string" ? event : "resize";
-  const callback = typeof event === "function" ? event : listener;
-  if (callback != null) {
-    window.addEventListener(eventName, callback);
-  }
-  vue.onBeforeUnmount(() => {
-    if (callback != null) {
-      window.removeEventListener(eventName, callback);
-    }
-  });
-}
 function useCollapseAnim() {
   let enterHeight = 0;
   const getHeight = (el, isEnter) => {
@@ -153,6 +137,9 @@ function useCollapseAnim() {
     handleAfterLeave
   };
 }
+const modalItemContextKey = Symbol(
+  "modalItemContextKey"
+);
 function useMousewheel(cb) {
   const handleMousewheel = (e) => {
     const delta = e.wheelDelta || e.detail;
@@ -210,8 +197,12 @@ function useTouchEvent(option) {
     distanceY = null;
   };
   const bindTouchEvent = (el) => {
-    el.addEventListener("touchstart", handleTouchStart);
-    el.addEventListener("touchmove", handleTouchMove);
+    el.addEventListener(
+      "touchstart",
+      handleTouchStart,
+      option?.touchstartOptions
+    );
+    el.addEventListener("touchmove", handleTouchMove, option?.touchmoveOptions);
     el.addEventListener("touchend", handleTouchEnd);
   };
   const unbindTouchEvent = (el) => {
@@ -289,17 +280,14 @@ function useMoveEvent(option) {
     document.addEventListener(
       "touchmove",
       touchmoveFn,
-      option == null ? void 0 : option.touchmoveOptions
+      option?.touchmoveOptions
     );
     document.addEventListener("touchend", touchendFn);
   };
   vue.onBeforeUnmount(() => {
     unbindEvent();
   });
-  return {
-    handleMousedown,
-    handleTouchstart
-  };
+  return { handleMousedown, handleTouchstart };
 }
 function useComponentEvents(events, emit) {
   const emitMethods = {};
@@ -317,6 +305,108 @@ function useComponentEvents(events, emit) {
     emitProps
   };
 }
+function useComponentExpose(componentRef, methodNames, refNames) {
+  const exposeValues = {};
+  methodNames.forEach((name) => {
+    exposeValues[name] = ((...args) => {
+      if (!componentRef.value) {
+        throw new Error("componentRef is null");
+      }
+      return componentRef.value[name](...args);
+    });
+  });
+  refNames.forEach((name) => {
+    exposeValues[name] = vue.computed(() => {
+      const val = componentRef.value?.[name];
+      return val == null ? val : vue.unref(val);
+    });
+  });
+  return exposeValues;
+}
+function useContentSlot() {
+  const customProps = vue.ref();
+  const contentRatio = util.useContentRatio((merged) => {
+    customProps.value = merged;
+  });
+  return { ...contentRatio, customProps };
+}
+function useResizeObserver(option) {
+  const width = vue.ref(0);
+  const height = vue.ref(0);
+  const updateWrapSize = () => {
+    const el = option.getEl();
+    if (el) {
+      const w = Math.floor(el.clientWidth);
+      if (width.value !== w) {
+        width.value = w;
+        option.onWidthChange && option.onWidthChange(w);
+      }
+      const h = Math.floor(el.clientHeight);
+      if (height.value !== h) {
+        height.value = h;
+        option.onHeightChange && option.onHeightChange(h);
+      }
+    }
+  };
+  const observer = new ResizeObserver(
+    common.debounce(() => {
+      updateWrapSize();
+    }, 400)
+  );
+  const observe = () => {
+    unobserve();
+    const el = option.getEl();
+    if (el) {
+      observer.observe(el);
+    }
+  };
+  const unobserve = () => {
+    const el = option.getEl();
+    if (el) {
+      observer.unobserve(el);
+    }
+  };
+  const delayUpdateWrapSize = (delay) => {
+    if (delay == null) {
+      updateWrapSize();
+    } else if (delay === 0) {
+      vue.nextTick(() => {
+        updateWrapSize();
+      });
+    } else if (delay > 0) {
+      setTimeout(() => {
+        updateWrapSize();
+      }, delay);
+    }
+  };
+  vue.onMounted(() => {
+    delayUpdateWrapSize(option.mountedUpdateDelay);
+    observe();
+  });
+  vue.onBeforeUnmount(() => {
+    observer.disconnect();
+  });
+  vue.onActivated(() => {
+    delayUpdateWrapSize(option.activatedUpdateDelay);
+    observe();
+  });
+  vue.onDeactivated(() => {
+    unobserve();
+  });
+  return [width, height, updateWrapSize];
+}
+function useWindowListener(event, listener) {
+  const eventName = typeof event === "string" ? event : "resize";
+  const callback = typeof event === "function" ? event : listener;
+  if (callback != null) {
+    window.addEventListener(eventName, callback);
+  }
+  vue.onBeforeUnmount(() => {
+    if (callback != null) {
+      window.removeEventListener(eventName, callback);
+    }
+  });
+}
 function useProOptions(props, name = "options") {
   const optionData = vue.ref([]);
   const optionsProp = vue.computed(() => common.getValue(props, name));
@@ -351,8 +441,15 @@ function useProOptions(props, name = "options") {
     reloadOptions
   };
 }
+function useFormItemRest() {
+  vue.provide(elementPlus.formItemContextKey, null);
+}
+exports.mobileMediaQuery = mobileMediaQuery;
+exports.modalItemContextKey = modalItemContextKey;
 exports.useCollapseAnim = useCollapseAnim;
 exports.useComponentEvents = useComponentEvents;
+exports.useComponentExpose = useComponentExpose;
+exports.useContentSlot = useContentSlot;
 exports.useFormItemRest = useFormItemRest;
 exports.useMediaQuery = useMediaQuery;
 exports.useMobile = useMobile;
@@ -360,6 +457,7 @@ exports.useMobileDevice = useMobileDevice;
 exports.useMousewheel = useMousewheel;
 exports.useMoveEvent = useMoveEvent;
 exports.useProOptions = useProOptions;
+exports.useResizeObserver = useResizeObserver;
 exports.useTimer = useTimer;
 exports.useTouchEvent = useTouchEvent;
 exports.useWindowListener = useWindowListener;

package/lib/utils/hook.d.ts

@@ -1,10 +1,6 @@
-import { Ref, EmitsOptions, EmitsToProps } from 'vue';
+import { Ref, InjectionKey, EmitsOptions, EmitsToProps } from 'vue';
 import { EmitMethods } from '../ele-app/types';
 
-/**
- * 重置组件表单验证
- */
-export declare function useFormItemRest(): void;
 /**
  * useTimer 返回结果
  */
@@ -29,6 +25,10 @@ export type UseMediaQueryResult = [MediaQueryList, () => void, () => void];
  * @param onChange 改变回调
  */
 export declare function useMediaQuery(query: string, onChange?: () => void): UseMediaQueryResult;
+/**
+ * 移动端小屏幕媒体查询
+ */
+export declare const mobileMediaQuery = "(max-width: 767.99px)";
 /**
  * useMobile 返回结果
  */
@@ -47,12 +47,6 @@ export type UseMobileDeviceResult = [Ref<boolean>, () => void, () => void];
  * @param onChange 值改变回调
  */
 export declare function useMobileDevice(onChange?: (isMobile: boolean) => void): UseMobileDeviceResult;
-/**
- * 窗口事件监听
- * @param event 事件
- * @param listener 回调
- */
-export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
 /**
  * 折叠展开动画
  */
@@ -64,6 +58,10 @@ export declare function useCollapseAnim(): {
     handleLeave: (el: HTMLElement) => void;
     handleAfterLeave: (el: HTMLElement) => void;
 };
+/**
+ * 弹窗挂载容器
+ */
+export declare const modalItemContextKey: InjectionKey<Record<string, any>>;
 /**
  * 鼠标滚轮事件回调方法参数
  */
@@ -108,6 +106,8 @@ export interface UseTouchEventOption<T> {
     move?: (param: UseTouchEventCallbackParam<T>) => void;
     /** 触摸结束的回调 */
     end?: (param: UseTouchEventCallbackParam<T>) => void;
+    /** touchstart 事件参数 */
+    touchstartOptions?: any;
     /** touchmove 事件参数 */
     touchmoveOptions?: any;
 }
@@ -145,10 +145,149 @@ export interface UseComponentEventsResult<T extends EmitsOptions> {
  * 二次封装组件事件处理 hook
  */
 export declare function useComponentEvents<T extends EmitsOptions>(events: T, emit: any): UseComponentEventsResult<T>;
+/**
+ * 二次封装组件导出处理 hook
+ */
+export declare function useComponentExpose<T extends {}, M extends keyof T, R extends keyof T>(componentRef: Ref<T | null>, methodNames: M[], refNames: R[]): Pick<T, M> & Record<R, Ref<T[R], T[R]>>;
+/**
+ * 组件插槽传递处理
+ */
+export declare function useContentSlot(): {
+    customProps: Ref<any, any>;
+    LoadingSpinner: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lineGap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        font: {
+            type: import('vue').PropType<Required<import('../ele-watermark/types').WatermarkFont>>;
+            required: true;
+        };
+        contents: {
+            type: import('vue').PropType<string[]>;
+            required: true;
+        };
+        image: StringConstructor;
+        offsetX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offsetY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        commonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        width: {
+            type: NumberConstructor;
+            default: number;
+        };
+        height: {
+            type: NumberConstructor;
+            default: number;
+        };
+        rotate: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        gapY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        lineGap: {
+            type: NumberConstructor;
+            default: number;
+        };
+        font: {
+            type: import('vue').PropType<Required<import('../ele-watermark/types').WatermarkFont>>;
+            required: true;
+        };
+        contents: {
+            type: import('vue').PropType<string[]>;
+            required: true;
+        };
+        image: StringConstructor;
+        offsetX: {
+            type: NumberConstructor;
+            default: number;
+        };
+        offsetY: {
+            type: NumberConstructor;
+            default: number;
+        };
+        commonStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    }>> & Readonly<{}>, {
+        width: number;
+        height: number;
+        rotate: number;
+        gapX: number;
+        gapY: number;
+        lineGap: number;
+        offsetX: number;
+        offsetY: number;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    slotProps: Record<string, any>;
+    show: import('vue').ComputedRef<any>;
+    to: import('vue').ComputedRef<HTMLElement | "body">;
+};
+/**
+ * 监听节点宽高改变参数
+ */
+export interface UseResizeObserverOption {
+    /** 获取要观测的节点方法 */
+    getEl: () => HTMLElement | null | undefined;
+    /** 宽度改变事件 */
+    onWidthChange?: (width: number) => void;
+    /** 高度改变事件 */
+    onHeightChange?: (height: number) => void;
+    /** 挂载时立即更新尺寸延迟 */
+    mountedUpdateDelay?: number;
+    /** 失活又激活时立即更新尺寸延迟 */
+    activatedUpdateDelay?: number;
+}
+/**
+ * 监听节点宽高改变
+ * @param option 参数
+ */
+export declare function useResizeObserver(option: UseResizeObserverOption): readonly [Ref<number, number>, Ref<number, number>, () => void];
+/**
+ * 窗口事件监听
+ * @param event 事件
+ * @param listener 回调
+ */
+export declare function useWindowListener(event: string | EventListenerOrEventListenerObject, listener?: EventListenerOrEventListenerObject): void;
 /**
  * 高级选项数据 hook
  */
-export declare function useProOptions<T>(props: Record<string, any>, name?: string): {
+export declare function useProOptions<T extends Record<string, any>>(props: Record<string, any>, name?: string): {
     optionData: Ref<T[], T[]>;
     reloadOptions: (params?: any) => void;
 };
+/**
+ * 重置组件表单验证
+ */
+export declare function useFormItemRest(): void;

package/lib/utils/menu-util.cjs

@@ -8,12 +8,11 @@ function getIframeRouteComponent(menu, name) {
   return vue.defineComponent({
     name,
     setup() {
-      var _a;
       const proLayoutState = util.useProLayoutState();
       const route = vueRouter.useRoute();
       const { fullPath } = route;
       const iframeSrc = vue.ref(util.getIframeSrc(fullPath, menu.component));
-      const isAlive = ((_a = menu.meta) == null ? void 0 : _a.keepAlive) !== false;
+      const isAlive = menu.meta?.keepAlive !== false;
       const keepAlive = vue.computed(() => !!proLayoutState.keepAlive);
       return () => {
         if (!isAlive || !keepAlive.value) {
@@ -47,7 +46,7 @@ function getRouteComponent(menu, name, func) {
   return { component: getIframeRouteComponent(menu, name), link: true };
 }
 function menuToRoutes(menus, getComponent, added) {
-  if (!(menus == null ? void 0 : menus.length)) {
+  if (!menus?.length) {
     return;
   }
   const routes = [];

package/lib/utils/message-box.cjs

@@ -15,10 +15,9 @@ function getWrapEl(bodyEl) {
   return elem;
 }
 function useMessageBox(globalOpt) {
-  var _a, _b;
   const layoutState = util.useLayoutState();
   const globalProps = receiver.useGlobalProps("messageBox");
-  const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
+  const appContext = vue.getCurrentInstance?.()?.appContext;
   const state = { wrapEl: null, isActivated: true, id: 0 };
   const instances = /* @__PURE__ */ new Map();
   const hideClass = "is-hide";

package/lib/utils/message.cjs

@@ -7,10 +7,9 @@ const util = require("../ele-pro-layout/util");
 const MessageBody = require("../ele-app/components/message-body");
 const common = require("./common");
 function blurCurrentFocus() {
-  var _a;
-  if (typeof ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.querySelector) === "function") {
+  if (typeof document?.body?.querySelector === "function") {
     const el = document.body.querySelector(":focus");
-    typeof (el == null ? void 0 : el.blur) === "function" && el.blur();
+    typeof el?.blur === "function" && el.blur();
   }
 }
 function getWrapEl(bodyEl, force, groupKey) {
@@ -31,7 +30,7 @@ function getWrapEl(bodyEl, force, groupKey) {
   return elem;
 }
 function getDefaultGroupKey() {
-  const url = location == null ? void 0 : location.href;
+  const url = location?.href;
   const pi = url.indexOf("?");
   return url.substring(0, pi < 0 ? void 0 : pi);
 }
@@ -50,7 +49,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     opt.message = params;
   }
   opt.type = type ?? opt.type;
-  opt.appendTo = (opt.appendTo == null ? void 0 : vue.unref(opt.appendTo)) ?? (getWrapEl2 == null ? void 0 : getWrapEl2(opt.inner));
+  opt.appendTo = (opt.appendTo == null ? void 0 : vue.unref(opt.appendTo)) ?? getWrapEl2?.(opt.inner);
   const classes = ["ele-message"];
   if (opt.original === "plain") {
     classes.push("is-plain-alert");
@@ -98,7 +97,7 @@ function normalizeOption(params, globalOpt, onClose, type, loading, getWrapEl2,
     { default: isFn ? content : isStr ? void 0 : () => content }
   );
   const key = (opt.inner ? groupKey : void 0) ?? "";
-  opt.message = isStr ? `${key}_${content ?? ""}` : void 0;
+  opt.message = isStr ? `${key}_${opt.type || "info"}_${content ?? ""}` : void 0;
   opt.grouping = isStr ? opt.grouping : false;
   return common.omit(opt, [
     "showClose",
@@ -160,11 +159,10 @@ EleMessage.closeAll = function(type) {
 };
 const MESSAGE_KEY = Symbol("message");
 function useMessage(globalOpt) {
-  var _a, _b;
   const layoutState = util.useLayoutState();
   const globalProps = receiver.useGlobalProps("message");
-  const appContext = (_b = (_a = vue.getCurrentInstance) == null ? void 0 : _a.call(vue)) == null ? void 0 : _b.appContext;
-  const groupKey = (globalOpt == null ? void 0 : globalOpt.groupKey) || getDefaultGroupKey();
+  const appContext = vue.getCurrentInstance?.()?.appContext;
+  const groupKey = globalOpt?.groupKey || getDefaultGroupKey();
   const state = { wrapEl: null, isActivated: true, id: 0 };
   const instances = /* @__PURE__ */ new Map();
   const hideClass = "is-hide";