@moluoxixi/ajax-package 0.0.36 → 0.0.38

package/es/BaseHttpClient.d.ts

@@ -17,6 +17,10 @@ export default class BaseHttpClient {
     protected getToken?: () => string | null;
     protected onLoginRequired?: (messageInstance: MessageInstance) => void;
     protected appendTo?: HTMLElement | string | null;
+    protected appendToFallback: string | null;
+    protected containerId: string;
+    protected popoverContainerId: string;
+    protected messageContainerId: string;
     instance: ReturnType<typeof axios.create>;
     protected messageInstance: MessageInstance;
     protected notificationInstance: NotificationInstance;
@@ -33,24 +37,24 @@ export default class BaseHttpClient {
     protected get hasDocument(): boolean;
     /**
      * 解析 appendTo 配置，返回目标 HTMLElement
-     * @returns 目标元素，默认为 document.body
+     * @returns 目标元素，如果找不到且配置为 null 则返回 null，'body' 时返回 document.body，其他字符串作为选择器查找
      */
-    protected resolveAppendToTarget(): HTMLElement;
+    protected resolveAppendToTarget(): HTMLElement | null;
     /**
      * 获取或创建 ajaxPackage-container 容器元素
      * @returns 容器元素，如果不是浏览器环境则返回 null
      */
     protected getContainer(): HTMLElement | null;
     /**
-     * 获取或创建 ajaxPackage-popover 容器元素（用于 Dialog）
+     * 获取或创建 popover 容器元素（用于 Dialog）
      * @returns 容器元素，如果不是浏览器环境则返回 null
      */
-    protected getPopoverContainer(): HTMLElement | null;
+    getPopoverContainer(): HTMLElement | null;
     /**
-     * 获取或创建 ajaxPackage-message 容器元素（用于 Message 和 Notification）
+     * 获取或创建 message 容器元素（用于 Message 和 Notification）
      * @returns 容器元素，如果不是浏览器环境则返回 null
      */
-    protected getMessageContainer(): HTMLElement | null;
+    getMessageContainer(): HTMLElement | null;
     /**
      * 创建 BaseHttpClient 实例
      * @param config - HTTP 客户端配置对象

package/es/_types/api.d.ts

@@ -18,6 +18,8 @@ export interface BaseHttpClientConfig {
     onLoginRequired?: (messageInstance: MessageInstance) => void;
     /** container 插入的目标元素，可以是 HTMLElement 或选择器字符串，默认为 document.body */
     appendTo?: HTMLElement | string | null;
+    /** 当 appendTo 配置了但找不到元素时的处理方式：'body' - 使用 document.body（默认），string - 作为选择器查找后备元素，null - 返回 null 不降级 */
+    appendToFallback?: string | null;
     /** 允许其他任意配置项，会直接传递给 axios.create */
     [key: string]: any;
 }

package/es/_utils/messageWrapper.d.ts

@@ -1,10 +1,10 @@
 /**
  * 创建消息实例的包装函数
  * @param hasDocument - 是否在浏览器环境
- * @param container - 容器元素，如果提供则消息将挂载到该容器中
+ * @param container - 容器元素或获取容器的函数，如果提供则消息将挂载到该容器中
  * @returns 消息函数实例，直接调用即可，支持传入 type: 'success' | 'error' | 'warning' | 'info'
  */
-export declare function createMessageWrapper(hasDocument: boolean, container?: HTMLElement | null): (options: string | {
+export declare function createMessageWrapper(hasDocument: boolean, container?: HTMLElement | null | (() => HTMLElement | null)): (options: string | {
     message?: string;
     type?: "success" | "error" | "warning" | "info";
     [key: string]: any;

package/es/_utils/notificationWrapper.d.ts

@@ -1,10 +1,10 @@
 /**
  * 创建通知实例的包装函数（用于 errors / tips 展示）
  * @param hasDocument - 是否在浏览器环境
- * @param container - 容器元素，如果提供则通知将挂载到该容器中
+ * @param container - 容器元素或获取容器的函数，如果提供则通知将挂载到该容器中
  * @returns 通知函数实例，直接调用即可，支持传入 type: 'success' | 'error' | 'warning' | 'info'
  */
-export declare function createNotificationWrapper(hasDocument: boolean, container?: HTMLElement | null): ((options: string | {
+export declare function createNotificationWrapper(hasDocument: boolean, container?: HTMLElement | null | (() => HTMLElement | null)): ((options: string | {
     message?: string;
     title?: string;
     type?: "success" | "error" | "warning" | "info";

package/es/index.mjs

@@ -2,9 +2,9 @@
   "use strict";
   try {
     if (typeof document !== "undefined") {
-      if (!document.getElementById("55abf58f-b1b4-4e82-ab0d-ee119c15bd62")) {
+      if (!document.getElementById("631710a0-260c-438a-9571-db68806a8879")) {
         var elementStyle = document.createElement("style");
-        elementStyle.id = "55abf58f-b1b4-4e82-ab0d-ee119c15bd62";
+        elementStyle.id = "631710a0-260c-438a-9571-db68806a8879";
         elementStyle.appendChild(document.createTextNode("._root_11p33_1 .el-dialog__header {\n  padding: 0 12px 12px;\n}\n\n._root_11p33_1 .el-dialog__body {\n  border-top: 1px solid #e5e7eb;\n  border-bottom: 1px solid #e5e7eb;\n  padding: 0 12px;\n}\n\n._root_11p33_1 .el-dialog__footer {\n  padding: 0 12px;\n}"));
         document.head.appendChild(elementStyle);
       }
@@ -12053,7 +12053,8 @@ function createMessageWrapper(hasDocument, container) {
   if (hasDocument) {
     return (options) => {
       const opts = typeof options === "string" ? { message: options } : options;
-      const finalOptions = container ? { ...opts, appendTo: container } : opts;
+      const actualContainer = typeof container === "function" ? container() : container;
+      const finalOptions = actualContainer ? { ...opts, appendTo: actualContainer } : opts;
       return ElMessage(finalOptions);
     };
   }
@@ -12078,7 +12079,8 @@ function createNotificationWrapper(hasDocument, container) {
   if (hasDocument) {
     return (options) => {
       const opts = typeof options === "string" ? { message: options } : options;
-      const finalOptions = container ? { ...opts, appendTo: container } : opts;
+      const actualContainer = typeof container === "function" ? container() : container;
+      const finalOptions = actualContainer ? { ...opts, appendTo: actualContainer } : opts;
       return ElNotification(finalOptions);
     };
   }
@@ -12206,6 +12208,16 @@ function defaultOnLoginRequired(messageInstance) {
 function defaultGetToken() {
   return typeof localStorage !== "undefined" ? localStorage.getItem("token") || "" : "";
 }
+function generateUUID() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+}
 const _BaseHttpClient = class _BaseHttpClient {
   /**
    * 创建 BaseHttpClient 实例
@@ -12218,6 +12230,10 @@ const _BaseHttpClient = class _BaseHttpClient {
     __publicField(this, "getToken");
     __publicField(this, "onLoginRequired");
     __publicField(this, "appendTo");
+    __publicField(this, "appendToFallback", "body");
+    __publicField(this, "containerId", "");
+    __publicField(this, "popoverContainerId", "");
+    __publicField(this, "messageContainerId", "");
     __publicField(this, "instance");
     __publicField(this, "messageInstance");
     __publicField(this, "notificationInstance");
@@ -12230,16 +12246,16 @@ const _BaseHttpClient = class _BaseHttpClient {
       getToken = defaultGetToken,
       onLoginRequired = defaultOnLoginRequired,
       appendTo,
+      appendToFallback = "body",
       addSign,
       ...axiosConfig
     } = config;
     this.baseURL = baseURL;
     this.timeout = timeout;
     this.appendTo = appendTo;
-    this.getContainer();
-    const messageContainer = this.getMessageContainer();
-    this.messageInstance = createMessageWrapper(this.hasDocument, messageContainer);
-    this.notificationInstance = createNotificationWrapper(this.hasDocument, messageContainer);
+    this.appendToFallback = appendToFallback;
+    this.messageInstance = createMessageWrapper(this.hasDocument, () => this.getMessageContainer());
+    this.notificationInstance = createNotificationWrapper(this.hasDocument, () => this.getMessageContainer());
     this.onTimeout = onTimeout;
     this.getToken = getToken;
     this.onLoginRequired = onLoginRequired;
@@ -12261,7 +12277,7 @@ const _BaseHttpClient = class _BaseHttpClient {
   }
   /**
    * 解析 appendTo 配置，返回目标 HTMLElement
-   * @returns 目标元素，默认为 document.body
+   * @returns 目标元素，如果找不到且配置为 null 则返回 null，'body' 时返回 document.body，其他字符串作为选择器查找
    */
   resolveAppendToTarget() {
     if (!this.hasDocument) {
@@ -12278,8 +12294,19 @@ const _BaseHttpClient = class _BaseHttpClient {
       if (element) {
         return element;
       }
-      console.warn(`appendTo 选择器 "${this.appendTo}" 未找到元素，将使用默认的 document.body`);
-      return document.body;
+      if (this.appendToFallback === null) {
+        console.warn(`appendTo 选择器 "${this.appendTo}" 未找到元素，appendToFallback 为 null，返回 null`);
+        return null;
+      } else if (this.appendToFallback === "body") {
+        return document.body;
+      } else if (typeof this.appendToFallback === "string") {
+        const fallbackElement = document.querySelector(this.appendToFallback);
+        if (fallbackElement) {
+          return fallbackElement;
+        }
+        console.warn(`appendTo 选择器 "${this.appendTo}" 和 appendToFallback 选择器 "${this.appendToFallback}" 都未找到元素，返回 null`);
+        return null;
+      }
     }
     return document.body;
   }
@@ -12291,43 +12318,77 @@ const _BaseHttpClient = class _BaseHttpClient {
     if (!this.hasDocument) {
       return null;
     }
-    let container = document.getElementById("ajaxPackage-container");
+    if (!this.containerId) {
+      this.containerId = `ajaxPackage-container-${generateUUID()}`;
+      this.popoverContainerId = `ajaxPackage-popover-${generateUUID()}`;
+      this.messageContainerId = `ajaxPackage-message-${generateUUID()}`;
+    }
+    let container = document.getElementById(this.containerId);
     if (!container) {
       container = document.createElement("div");
-      container.id = "ajaxPackage-container";
+      container.id = this.containerId;
       const targetElement = this.resolveAppendToTarget();
-      targetElement.appendChild(container);
+      if (targetElement) {
+        targetElement.appendChild(container);
+      } else {
+        return null;
+      }
       const popoverContainer = document.createElement("div");
-      popoverContainer.id = "ajaxPackage-popover";
+      popoverContainer.id = this.popoverContainerId;
+      popoverContainer.style.position = "relative";
+      popoverContainer.style.zIndex = "999999";
       container.appendChild(popoverContainer);
       const messageContainer = document.createElement("div");
-      messageContainer.id = "ajaxPackage-message";
+      messageContainer.id = this.messageContainerId;
+      messageContainer.style.position = "relative";
       messageContainer.style.zIndex = "99999999";
       container.appendChild(messageContainer);
     }
     return container;
   }
   /**
-   * 获取或创建 ajaxPackage-popover 容器元素（用于 Dialog）
+   * 获取或创建 popover 容器元素（用于 Dialog）
    * @returns 容器元素，如果不是浏览器环境则返回 null
    */
   getPopoverContainer() {
     if (!this.hasDocument) {
       return null;
     }
-    this.getContainer();
-    return document.getElementById("ajaxPackage-popover");
+    const container = this.getContainer();
+    if (!container) {
+      return null;
+    }
+    if (!this.popoverContainerId) {
+      return null;
+    }
+    const popoverContainer = document.getElementById(this.popoverContainerId);
+    if (popoverContainer && !popoverContainer.style.position) {
+      popoverContainer.style.position = "relative";
+      popoverContainer.style.zIndex = "999999";
+    }
+    return popoverContainer;
   }
   /**
-   * 获取或创建 ajaxPackage-message 容器元素（用于 Message 和 Notification）
+   * 获取或创建 message 容器元素（用于 Message 和 Notification）
    * @returns 容器元素，如果不是浏览器环境则返回 null
    */
   getMessageContainer() {
     if (!this.hasDocument) {
       return null;
     }
-    this.getContainer();
-    return document.getElementById("ajaxPackage-message");
+    const container = this.getContainer();
+    if (!container) {
+      return null;
+    }
+    if (!this.messageContainerId) {
+      return null;
+    }
+    const messageContainer = document.getElementById(this.messageContainerId);
+    if (messageContainer && !messageContainer.style.position) {
+      messageContainer.style.position = "relative";
+      messageContainer.style.zIndex = "99999999";
+    }
+    return messageContainer;
   }
   /**
    * 处理请求配置，子类可重写此方法自定义请求配置
@@ -13356,14 +13417,10 @@ const SystemErrorDialog = defineComponent({
       emit("update:modelValue", val);
     }
     function getAjaxPackageMessageContainer() {
-      if (typeof document === "undefined")
-        return null;
-      return document.getElementById("ajaxPackage-message");
+      return baseApi.getMessageContainer();
     }
     function getAjaxPackagePopoverContainer() {
-      if (typeof document === "undefined")
-        return null;
-      return document.getElementById("ajaxPackage-popover");
+      return baseApi.getPopoverContainer();
     }
     function showMessage(options) {
       const container = getAjaxPackageMessageContainer();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moluoxixi/ajax-package",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "AjaxPackage 组件",
   "sideEffects": [
     "*.css",