@moluoxixi/ajax-package 0.0.35 → 0.0.37

package/es/BaseHttpClient.d.ts

@@ -16,6 +16,8 @@ export default class BaseHttpClient {
     protected onTimeout: (messageInstance: MessageInstance) => void;
     protected getToken?: () => string | null;
     protected onLoginRequired?: (messageInstance: MessageInstance) => void;
+    protected appendTo?: HTMLElement | string | null;
+    protected appendToFallback: string | null;
     instance: ReturnType<typeof axios.create>;
     protected messageInstance: MessageInstance;
     protected notificationInstance: NotificationInstance;
@@ -30,6 +32,11 @@ export default class BaseHttpClient {
      * @returns 是否在浏览器环境
      */
     protected get hasDocument(): boolean;
+    /**
+     * 解析 appendTo 配置，返回目标 HTMLElement
+     * @returns 目标元素，如果找不到且配置为 null 则返回 null，'body' 时返回 document.body，其他字符串作为选择器查找
+     */
+    protected resolveAppendToTarget(): HTMLElement | null;
     /**
      * 获取或创建 ajaxPackage-container 容器元素
      * @returns 容器元素，如果不是浏览器环境则返回 null

package/es/_types/api.d.ts

@@ -16,6 +16,10 @@ export interface BaseHttpClientConfig {
     getToken?: () => string | null;
     /** 登录失效回调函数，当检测到 401 错误时调用，接收 messageInstance 用于显示消息提示 */
     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("59b794d1-a3ef-4b37-9b28-cc9399203b57")) {
+      if (!document.getElementById("d90637ed-57fd-4f94-b0c2-d8acbe328d03")) {
         var elementStyle = document.createElement("style");
-        elementStyle.id = "59b794d1-a3ef-4b37-9b28-cc9399203b57";
+        elementStyle.id = "d90637ed-57fd-4f94-b0c2-d8acbe328d03";
         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);
     };
   }
@@ -12217,6 +12219,8 @@ const _BaseHttpClient = class _BaseHttpClient {
     __publicField(this, "onTimeout");
     __publicField(this, "getToken");
     __publicField(this, "onLoginRequired");
+    __publicField(this, "appendTo");
+    __publicField(this, "appendToFallback", "body");
     __publicField(this, "instance");
     __publicField(this, "messageInstance");
     __publicField(this, "notificationInstance");
@@ -12228,15 +12232,17 @@ const _BaseHttpClient = class _BaseHttpClient {
       },
       getToken = defaultGetToken,
       onLoginRequired = defaultOnLoginRequired,
+      appendTo,
+      appendToFallback = "body",
       addSign,
       ...axiosConfig
     } = config;
     this.baseURL = baseURL;
     this.timeout = timeout;
-    this.getContainer();
-    const messageContainer = this.getMessageContainer();
-    this.messageInstance = createMessageWrapper(this.hasDocument, messageContainer);
-    this.notificationInstance = createNotificationWrapper(this.hasDocument, messageContainer);
+    this.appendTo = appendTo;
+    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;
@@ -12256,6 +12262,41 @@ const _BaseHttpClient = class _BaseHttpClient {
   get hasDocument() {
     return _BaseHttpClient.hasDocument;
   }
+  /**
+   * 解析 appendTo 配置，返回目标 HTMLElement
+   * @returns 目标元素，如果找不到且配置为 null 则返回 null，'body' 时返回 document.body，其他字符串作为选择器查找
+   */
+  resolveAppendToTarget() {
+    if (!this.hasDocument) {
+      return document.body;
+    }
+    if (!this.appendTo) {
+      return document.body;
+    }
+    if (this.appendTo instanceof HTMLElement) {
+      return this.appendTo;
+    }
+    if (typeof this.appendTo === "string") {
+      const element = document.querySelector(this.appendTo);
+      if (element) {
+        return element;
+      }
+      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;
+  }
   /**
    * 获取或创建 ajaxPackage-container 容器元素
    * @returns 容器元素，如果不是浏览器环境则返回 null
@@ -12268,12 +12309,20 @@ const _BaseHttpClient = class _BaseHttpClient {
     if (!container) {
       container = document.createElement("div");
       container.id = "ajaxPackage-container";
-      document.body.appendChild(container);
+      const targetElement = this.resolveAppendToTarget();
+      if (targetElement) {
+        targetElement.appendChild(container);
+      } else {
+        return null;
+      }
       const popoverContainer = document.createElement("div");
       popoverContainer.id = "ajaxPackage-popover";
+      popoverContainer.style.position = "relative";
+      popoverContainer.style.zIndex = "999999";
       container.appendChild(popoverContainer);
       const messageContainer = document.createElement("div");
       messageContainer.id = "ajaxPackage-message";
+      messageContainer.style.position = "relative";
       messageContainer.style.zIndex = "99999999";
       container.appendChild(messageContainer);
     }
@@ -12287,8 +12336,16 @@ const _BaseHttpClient = class _BaseHttpClient {
     if (!this.hasDocument) {
       return null;
     }
-    this.getContainer();
-    return document.getElementById("ajaxPackage-popover");
+    const container = this.getContainer();
+    if (!container) {
+      return null;
+    }
+    const popoverContainer = document.getElementById("ajaxPackage-popover");
+    if (popoverContainer && !popoverContainer.style.position) {
+      popoverContainer.style.position = "relative";
+      popoverContainer.style.zIndex = "999999";
+    }
+    return popoverContainer;
   }
   /**
    * 获取或创建 ajaxPackage-message 容器元素（用于 Message 和 Notification）
@@ -12298,8 +12355,16 @@ const _BaseHttpClient = class _BaseHttpClient {
     if (!this.hasDocument) {
       return null;
     }
-    this.getContainer();
-    return document.getElementById("ajaxPackage-message");
+    const container = this.getContainer();
+    if (!container) {
+      return null;
+    }
+    const messageContainer = document.getElementById("ajaxPackage-message");
+    if (messageContainer && !messageContainer.style.position) {
+      messageContainer.style.position = "relative";
+      messageContainer.style.zIndex = "99999999";
+    }
+    return messageContainer;
   }
   /**
    * 处理请求配置，子类可重写此方法自定义请求配置

package/package.json

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