@moluoxixi/ajax-package 0.0.34 → 0.0.35

package/es/BaseHttpClient.d.ts

@@ -20,6 +20,31 @@ export default class BaseHttpClient {
     protected messageInstance: MessageInstance;
     protected notificationInstance: NotificationInstance;
     protected addSign?: (config: AxiosRequestConfig) => void;
+    /**
+     * 检查是否在浏览器环境（在类初始化时判断）
+     * 注意：这是静态属性，所有实例共享
+     */
+    protected static readonly hasDocument: boolean;
+    /**
+     * 获取是否在浏览器环境（实例 getter）
+     * @returns 是否在浏览器环境
+     */
+    protected get hasDocument(): boolean;
+    /**
+     * 获取或创建 ajaxPackage-container 容器元素
+     * @returns 容器元素，如果不是浏览器环境则返回 null
+     */
+    protected getContainer(): HTMLElement | null;
+    /**
+     * 获取或创建 ajaxPackage-popover 容器元素（用于 Dialog）
+     * @returns 容器元素，如果不是浏览器环境则返回 null
+     */
+    protected getPopoverContainer(): HTMLElement | null;
+    /**
+     * 获取或创建 ajaxPackage-message 容器元素（用于 Message 和 Notification）
+     * @returns 容器元素，如果不是浏览器环境则返回 null
+     */
+    protected getMessageContainer(): HTMLElement | null;
     /**
      * 创建 BaseHttpClient 实例
      * @param config - HTTP 客户端配置对象

package/es/_utils/messageWrapper.d.ts

@@ -1,39 +1,12 @@
 /**
  * 创建消息实例的包装函数
- * @returns 消息实例，支持 success、error、warning、info 方法
+ * @param hasDocument - 是否在浏览器环境
+ * @param container - 容器元素，如果提供则消息将挂载到该容器中
+ * @returns 消息函数实例，直接调用即可，支持传入 type: 'success' | 'error' | 'warning' | 'info'
  */
-export declare function createMessageWrapper(): (import('element-plus').MessageFn & {
-    primary: import('element-plus').MessageTypedFn;
-    success: import('element-plus').MessageTypedFn;
-    warning: import('element-plus').MessageTypedFn;
-    info: import('element-plus').MessageTypedFn;
-    error: import('element-plus').MessageTypedFn;
-} & import('vue').ObjectPlugin<any[]> & {
-    _context: import('vue').AppContext | null;
-}) | (import('element-plus').MessageFn & {
-    primary: import('element-plus').MessageTypedFn;
-    success: import('element-plus').MessageTypedFn;
-    warning: import('element-plus').MessageTypedFn;
-    info: import('element-plus').MessageTypedFn;
-    error: import('element-plus').MessageTypedFn;
-} & ((app: import('vue').App, ...options: any[]) => any) & Partial<import('vue').ObjectPlugin<any[]>> & {
-    _context: import('vue').AppContext | null;
-}) | {
-    success: (options: string | {
-        message?: string;
-        [key: string]: any;
-    }) => void;
-    error: (options: string | {
-        message?: string;
-        [key: string]: any;
-    }) => void;
-    warning: (options: string | {
-        message?: string;
-        [key: string]: any;
-    }) => void;
-    info: (options: string | {
-        message?: string;
-        [key: string]: any;
-    }) => void;
-};
+export declare function createMessageWrapper(hasDocument: boolean, container?: HTMLElement | null): (options: string | {
+    message?: string;
+    type?: "success" | "error" | "warning" | "info";
+    [key: string]: any;
+}) => void;
 export type MessageInstance = ReturnType<typeof createMessageWrapper>;

package/es/_utils/notificationWrapper.d.ts

@@ -1,10 +1,15 @@
 /**
  * 创建通知实例的包装函数（用于 errors / tips 展示）
- * @returns 通知实例，支持 success、error、warning、info 方法
+ * @param hasDocument - 是否在浏览器环境
+ * @param container - 容器元素，如果提供则通知将挂载到该容器中
+ * @returns 通知函数实例，直接调用即可，支持传入 type: 'success' | 'error' | 'warning' | 'info'
  */
-export declare function createNotificationWrapper(): ((import('element-plus').Notify & import('vue').Plugin) & {
-    _context: import('vue').AppContext | null;
-}) | ((options: string | {
+export declare function createNotificationWrapper(hasDocument: boolean, container?: HTMLElement | null): ((options: string | {
+    message?: string;
+    title?: string;
+    type?: "success" | "error" | "warning" | "info";
+    [key: string]: any;
+}) => import('element-plus').NotificationHandle) | ((options: string | {
     message?: string;
     title?: string;
     type?: "success" | "error" | "warning" | "info";

package/es/class.d.ts

@@ -10,11 +10,6 @@ export default class BaseApi extends BaseHttpClient {
     protected responseFields: Required<BaseApiConfig['responseFields']>;
     protected enableSystemErrorDialog: boolean;
     protected systemErrorMessage: string;
-    /**
-     * 检查是否在浏览器环境（在类初始化时判断）
-     * 注意：这是静态属性，所有实例共享
-     */
-    private static readonly hasDocument;
     /**
      * SystemErrorDialog 实例
      * 注意：这是实例属性，每个实例有自己的对话框实例
@@ -32,11 +27,6 @@ export default class BaseApi extends BaseHttpClient {
      * 注意：这是静态属性，所有实例共享同一个错误信息存储
      */
     private static systemErrorInfoMap;
-    /**
-     * 获取是否在浏览器环境（实例 getter）
-     * @returns 是否在浏览器环境
-     */
-    protected get hasDocument(): boolean;
     /**
      * 获取系统错误信息存储（实例 getter）
      * @returns 系统错误信息存储 Map

package/es/index.mjs

@@ -2,9 +2,9 @@
   "use strict";
   try {
     if (typeof document !== "undefined") {
-      if (!document.getElementById("b2882460-4b80-4dc1-b28b-fc865ae04458")) {
+      if (!document.getElementById("59b794d1-a3ef-4b37-9b28-cc9399203b57")) {
         var elementStyle = document.createElement("style");
-        elementStyle.id = "b2882460-4b80-4dc1-b28b-fc865ae04458";
+        elementStyle.id = "59b794d1-a3ef-4b37-9b28-cc9399203b57";
         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);
       }
@@ -12049,32 +12049,38 @@ notify.closeAll = closeAll;
 notify.updateOffsets = updateOffsets;
 notify._context = null;
 const ElNotification = withInstallFunction(notify, "$notify");
-const hasDocument$1 = typeof document !== "undefined";
-function createMessageWrapper() {
-  if (hasDocument$1) {
-    return ElMessage;
+function createMessageWrapper(hasDocument, container) {
+  if (hasDocument) {
+    return (options) => {
+      const opts = typeof options === "string" ? { message: options } : options;
+      const finalOptions = container ? { ...opts, appendTo: container } : opts;
+      return ElMessage(finalOptions);
+    };
   }
-  return {
-    success: (options) => {
-      typeof options === "string" ? options : (options == null ? void 0 : options.message) || "";
-    },
-    error: (options) => {
-      const message2 = typeof options === "string" ? options : (options == null ? void 0 : options.message) || "";
-      console.error(`[Message Error] ${message2}`);
-    },
-    warning: (options) => {
-      const message2 = typeof options === "string" ? options : (options == null ? void 0 : options.message) || "";
-      console.warn(`[Message Warning] ${message2}`);
-    },
-    info: (options) => {
-      typeof options === "string" ? options : (options == null ? void 0 : options.message) || "";
+  return (options) => {
+    const opts = typeof options === "string" ? { message: options } : options;
+    const message2 = (opts == null ? void 0 : opts.message) || "";
+    const type = (opts == null ? void 0 : opts.type) || "info";
+    const logMessage = `[Message ${type}] ${message2}`;
+    switch (type) {
+      case "success":
+        break;
+      case "error":
+        console.error(logMessage);
+        break;
+      case "warning":
+        console.warn(logMessage);
+        break;
     }
   };
 }
-const hasDocument = typeof document !== "undefined";
-function createNotificationWrapper() {
+function createNotificationWrapper(hasDocument, container) {
   if (hasDocument) {
-    return ElNotification;
+    return (options) => {
+      const opts = typeof options === "string" ? { message: options } : options;
+      const finalOptions = container ? { ...opts, appendTo: container } : opts;
+      return ElNotification(finalOptions);
+    };
   }
   const consoleNotification = (options, level = "info") => {
     const opts = typeof options === "string" ? { message: options } : options;
@@ -12188,7 +12194,8 @@ function extractSystemErrorInfo(response, code, message2) {
   };
 }
 function defaultOnLoginRequired(messageInstance) {
-  messageInstance == null ? void 0 : messageInstance.error({
+  messageInstance == null ? void 0 : messageInstance({
+    type: "error",
     message: "登录已过期，请重新登录",
     duration: 5 * 1e3
   });
@@ -12199,7 +12206,7 @@ function defaultOnLoginRequired(messageInstance) {
 function defaultGetToken() {
   return typeof localStorage !== "undefined" ? localStorage.getItem("token") || "" : "";
 }
-class BaseHttpClient {
+const _BaseHttpClient = class _BaseHttpClient {
   /**
    * 创建 BaseHttpClient 实例
    * @param config - HTTP 客户端配置对象
@@ -12226,8 +12233,10 @@ class BaseHttpClient {
     } = config;
     this.baseURL = baseURL;
     this.timeout = timeout;
-    this.messageInstance = createMessageWrapper();
-    this.notificationInstance = createNotificationWrapper();
+    this.getContainer();
+    const messageContainer = this.getMessageContainer();
+    this.messageInstance = createMessageWrapper(this.hasDocument, messageContainer);
+    this.notificationInstance = createNotificationWrapper(this.hasDocument, messageContainer);
     this.onTimeout = onTimeout;
     this.getToken = getToken;
     this.onLoginRequired = onLoginRequired;
@@ -12240,6 +12249,58 @@ class BaseHttpClient {
     });
     this.setupInterceptors();
   }
+  /**
+   * 获取是否在浏览器环境（实例 getter）
+   * @returns 是否在浏览器环境
+   */
+  get hasDocument() {
+    return _BaseHttpClient.hasDocument;
+  }
+  /**
+   * 获取或创建 ajaxPackage-container 容器元素
+   * @returns 容器元素，如果不是浏览器环境则返回 null
+   */
+  getContainer() {
+    if (!this.hasDocument) {
+      return null;
+    }
+    let container = document.getElementById("ajaxPackage-container");
+    if (!container) {
+      container = document.createElement("div");
+      container.id = "ajaxPackage-container";
+      document.body.appendChild(container);
+      const popoverContainer = document.createElement("div");
+      popoverContainer.id = "ajaxPackage-popover";
+      container.appendChild(popoverContainer);
+      const messageContainer = document.createElement("div");
+      messageContainer.id = "ajaxPackage-message";
+      messageContainer.style.zIndex = "99999999";
+      container.appendChild(messageContainer);
+    }
+    return container;
+  }
+  /**
+   * 获取或创建 ajaxPackage-popover 容器元素（用于 Dialog）
+   * @returns 容器元素，如果不是浏览器环境则返回 null
+   */
+  getPopoverContainer() {
+    if (!this.hasDocument) {
+      return null;
+    }
+    this.getContainer();
+    return document.getElementById("ajaxPackage-popover");
+  }
+  /**
+   * 获取或创建 ajaxPackage-message 容器元素（用于 Message 和 Notification）
+   * @returns 容器元素，如果不是浏览器环境则返回 null
+   */
+  getMessageContainer() {
+    if (!this.hasDocument) {
+      return null;
+    }
+    this.getContainer();
+    return document.getElementById("ajaxPackage-message");
+  }
   /**
    * 处理请求配置，子类可重写此方法自定义请求配置
    * @param config - 请求配置对象
@@ -12323,7 +12384,8 @@ class BaseHttpClient {
     var _a2, _b, _c;
     if (((_a2 = error.response) == null ? void 0 : _a2.status) !== 401 && error.code !== "ECONNABORTED") {
       const fallbackError = error;
-      (_c = this.messageInstance) == null ? void 0 : _c.error({
+      (_c = this.messageInstance) == null ? void 0 : _c.call(this, {
+        type: "error",
         message: ((_b = fallbackError.response) == null ? void 0 : _b.data) || fallbackError.message || "网络错误",
         duration: 5 * 1e3
       });
@@ -12462,6 +12524,42 @@ class BaseHttpClient {
     link.remove();
     window.URL.revokeObjectURL(url);
   }
+};
+/**
+ * 检查是否在浏览器环境（在类初始化时判断）
+ * 注意：这是静态属性，所有实例共享
+ */
+__publicField(_BaseHttpClient, "hasDocument", typeof document !== "undefined");
+let BaseHttpClient = _BaseHttpClient;
+async function copyToClipboard(text) {
+  if (!text) {
+    console.warn("复制文本为空");
+    return false;
+  }
+  try {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } else {
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.select();
+      if (document.execCommand("copy")) {
+        document.body.removeChild(textArea);
+        return true;
+      } else {
+        document.body.removeChild(textArea);
+        return false;
+      }
+    }
+  } catch (error) {
+    console.error("复制到剪贴板失败:", error);
+    return false;
+  }
 }
 async function dynamicImport(modulePromise, exportName = "default") {
   const module = await modulePromise;
@@ -12483,7 +12581,7 @@ async function dynamicImports(modulePromise, exportNames) {
   }
   return result;
 }
-function createApiDialog(DialogComponent) {
+function createApiDialog(DialogComponent, parentContainer) {
   let container = null;
   let vnode = null;
   let isOpen = false;
@@ -12518,6 +12616,8 @@ function createApiDialog(DialogComponent) {
         "modelValue": props.modelValue,
         "title": props.title,
         "width": props.width,
+        // 如果提供了父容器，则挂载到父容器中
+        "appendTo": parentContainer || void 0,
         "onUpdate:modelValue": (val) => {
           emit("update:modelValue", val);
           if (!val) {
@@ -12545,7 +12645,8 @@ function createApiDialog(DialogComponent) {
   const FinalDialogComponent = DialogComponent || DefaultDialog;
   function createContainer() {
     const el = document.createElement("div");
-    document.body.appendChild(el);
+    const mountTarget = parentContainer || document.body;
+    mountTarget.appendChild(el);
     return el;
   }
   function show(options = {}) {
@@ -12629,7 +12730,7 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
     const {
       responseFields,
       enableSystemErrorDialog = true,
-      systemErrorMessage = "系统异常",
+      systemErrorMessage = "系统异常，点击看详情",
       ...baseConfig
     } = config;
     super(baseConfig);
@@ -12661,13 +12762,6 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
       this.systemErrorDialogInitPromise = this.initSystemErrorDialog();
     }
   }
-  /**
-   * 获取是否在浏览器环境（实例 getter）
-   * @returns 是否在浏览器环境
-   */
-  get hasDocument() {
-    return _BaseApi.hasDocument;
-  }
   /**
    * 获取系统错误信息存储（实例 getter）
    * @returns 系统错误信息存储 Map
@@ -12748,7 +12842,8 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
   async initSystemErrorDialog() {
     try {
       const { default: SystemErrorDialog2 } = await dynamicImports(Promise.resolve().then(() => SystemErrorDialog$1), ["default"]);
-      this.systemErrorDialogInstance = createApiDialog(SystemErrorDialog2);
+      const popoverContainer = this.getPopoverContainer();
+      this.systemErrorDialogInstance = createApiDialog(SystemErrorDialog2, popoverContainer);
     } catch (error) {
       console.warn("Failed to load SystemErrorDialog:", error);
       throw error;
@@ -12888,25 +12983,13 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
         })
       ])
     ]);
-    (_a2 = this.messageInstance) == null ? void 0 : _a2.error({
+    (_a2 = this.messageInstance) == null ? void 0 : _a2.call(this, {
+      type: "error",
       message: messageVNode,
       duration: 5 * 1e3,
       customClass: "system-error-message"
       // 添加自定义类名
     });
-    if (typeof document !== "undefined") {
-      let styleElement = document.getElementById("system-error-message-style");
-      if (!styleElement) {
-        styleElement = document.createElement("style");
-        styleElement.id = "system-error-message-style";
-        document.head.appendChild(styleElement);
-      }
-      styleElement.textContent = `
-        .system-error-message {
-          z-index: 99999998 !important;
-        }
-      `;
-    }
   }
   /**
    * 处理业务错误（其他非200错误码）
@@ -12917,7 +13000,8 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
   handleBusinessError(code, message2) {
     var _a2;
     if (code && code !== 200) {
-      (_a2 = this.messageInstance) == null ? void 0 : _a2.error({
+      (_a2 = this.messageInstance) == null ? void 0 : _a2.call(this, {
+        type: "error",
         message: message2 || "请求失败",
         duration: 5 * 1e3
       });
@@ -13013,24 +13097,10 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
       ...messageOptions,
       message: (messageOptions == null ? void 0 : messageOptions.message) ?? tipsMessage
     };
-    const messageType = finalOptions.type || "success";
     const messageInstance = this.messageInstance;
     if (!messageInstance)
       return;
-    switch (messageType) {
-      case "success":
-        messageInstance.success(finalOptions);
-        break;
-      case "error":
-        messageInstance.error(finalOptions);
-        break;
-      case "warning":
-        messageInstance.warning(finalOptions);
-        break;
-      case "info":
-        messageInstance.info(finalOptions);
-        break;
-    }
+    messageInstance(finalOptions);
   }
   /**
    * 发送 HTTP 请求，所有 HTTP 方法最终都调用此方法
@@ -13115,11 +13185,6 @@ const _BaseApi = class _BaseApi extends BaseHttpClient {
     return super.downloadFile(blob, filename);
   }
 };
-/**
- * 检查是否在浏览器环境（在类初始化时判断）
- * 注意：这是静态属性，所有实例共享
- */
-__publicField(_BaseApi, "hasDocument", typeof document !== "undefined");
 /**
  * 系统错误信息存储，用于在点击 icon 时打开详细错误弹窗
  * key: 错误ID，value: 错误信息对象
@@ -13262,6 +13327,22 @@ const SystemErrorDialog = defineComponent({
     function handleModelValueChange(val) {
       emit("update:modelValue", val);
     }
+    function getAjaxPackageMessageContainer() {
+      if (typeof document === "undefined")
+        return null;
+      return document.getElementById("ajaxPackage-message");
+    }
+    function getAjaxPackagePopoverContainer() {
+      if (typeof document === "undefined")
+        return null;
+      return document.getElementById("ajaxPackage-popover");
+    }
+    function showMessage(options) {
+      const container = getAjaxPackageMessageContainer();
+      const { type = "info", message: message2 } = options;
+      const finalOptions = container ? { type, message: message2, appendTo: container } : { type, message: message2 };
+      ElMessage(finalOptions);
+    }
     async function handleReport() {
       await baseApi.post("/upgGlobalExceptionReports", {
         username: userInfo.value.userName,
@@ -13275,7 +13356,7 @@ const SystemErrorDialog = defineComponent({
         menuUrl: currentUrl,
         errorMessage: props.errorMessage
       });
-      ElMessage.success("上报成功");
+      showMessage({ type: "success", message: "上报成功" });
       handleClose();
     }
     function toggleTechSummary() {
@@ -13294,6 +13375,19 @@ const SystemErrorDialog = defineComponent({
       const skyWalkingUrl = `${origin2}/middle/skywalking/trace/Trace?traceId=${encodeURIComponent(props.traceId)}`;
       window.open(skyWalkingUrl, "_blank");
     }
+    async function handleCopyTraceId() {
+      const traceId = props.traceId;
+      if (!traceId) {
+        showMessage({ type: "warning", message: "TraceId 不存在" });
+        return;
+      }
+      const success = await copyToClipboard(traceId);
+      if (success) {
+        showMessage({ type: "success", message: "复制 traceId 成功" });
+      } else {
+        showMessage({ type: "error", message: "复制 traceId 失败" });
+      }
+    }
     function close2() {
       handleClose();
     }
@@ -13304,6 +13398,7 @@ const SystemErrorDialog = defineComponent({
       return typeof props.width === "number" ? `${props.width}px` : props.width;
     });
     return () => {
+      const popoverContainer = getAjaxPackagePopoverContainer();
       return h(
         ElDialog,
         {
@@ -13313,8 +13408,8 @@ const SystemErrorDialog = defineComponent({
           "showClose": true,
           "closeOnClickModal": false,
           "closeOnPressEscape": false,
-          "zIndex": 99999999,
           "style": { padding: "16px 0" },
+          "appendTo": popoverContainer || void 0,
           "onUpdate:modelValue": handleModelValueChange
         },
         {
@@ -13403,7 +13498,20 @@ const SystemErrorDialog = defineComponent({
               )
             ]),
             // 黑色错误信息区域
-            h("div", { style: { backgroundColor: "#2c3e50", color: "#fff", padding: "16px 20px", fontFamily: 'Monaco, Consolas, "Courier New", monospace', fontSize: "12px", lineHeight: 1.5, maxHeight: "200px", overflowY: "auto" } }, [
+            h("div", {
+              style: {
+                backgroundColor: "#2c3e50",
+                color: "#fff",
+                padding: "16px 20px",
+                fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+                fontSize: "12px",
+                lineHeight: 1.5,
+                maxHeight: "200px",
+                overflowY: "auto",
+                cursor: "pointer"
+              },
+              onClick: handleCopyTraceId
+            }, [
               h("div", { style: { marginBottom: "8px", color: "#ecf0f1" } }, `Trace ID: ${props.traceId || "a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8"}`),
               h("div", { style: { color: "#e74c3c", fontWeight: "bold", whiteSpace: "pre-wrap" } }, `Error: ${props.errorMessage || "Connection timeout after 5000ms"}`)
             ])

package/package.json

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