@gz-fronted/gz-pc 0.1.2 → 0.1.3-beta.1

package/dist/fetch/index.js

@@ -1,9 +1,123 @@
 import axios, { AxiosError, AxiosHeaders } from 'axios';
-import { Modal, message } from '@chenhui996/gg-ui';
-import { useRef, useSyncExternalStore, useEffect, useCallback } from 'react';
+import { Modal, message, Drawer, Button, Tooltip, Tabs, Tag } from '@chenhui996/gg-ui';
+import { useRef, useSyncExternalStore, useEffect, useCallback, useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/fetch/client.ts
+
+// src/fetch/debug.ts
+var EMPTY_DEBUG_DRAWER_SNAPSHOT = {
+  activeHostId: void 0,
+  errors: [],
+  open: false,
+  selectedErrorId: void 0
+};
+var debugErrorSequence = 0;
+var snapshot = EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var listeners = /* @__PURE__ */ new Set();
+var drawerHosts = /* @__PURE__ */ new Set();
+var emitChange = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var setSnapshot = (nextSnapshot) => {
+  snapshot = nextSnapshot;
+  emitChange();
+};
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var getResponseDebugInfo = (responseData) => {
+  if (!isRecord(responseData) || !isRecord(responseData.debug)) {
+    return void 0;
+  }
+  return responseData.debug;
+};
+var isDebugEnabled = () => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  try {
+    if (new URLSearchParams(window.location.search).get("showDebug") === "1") {
+      return true;
+    }
+  } catch (e) {
+  }
+  try {
+    return window.localStorage.getItem("showDebug") === "1";
+  } catch (e) {
+    return false;
+  }
+};
+var subscribeDebugDrawer = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getDebugDrawerSnapshot = () => snapshot;
+var getDebugDrawerServerSnapshot = () => EMPTY_DEBUG_DRAWER_SNAPSHOT;
+var registerDebugDrawerHost = (hostId) => {
+  drawerHosts.add(hostId);
+  if (snapshot.activeHostId === void 0) {
+    setSnapshot({ ...snapshot, activeHostId: hostId });
+  }
+  return () => {
+    drawerHosts.delete(hostId);
+    if (snapshot.activeHostId !== hostId) {
+      return;
+    }
+    const nextHost = drawerHosts.values().next();
+    setSnapshot({
+      ...snapshot,
+      activeHostId: nextHost.done ? void 0 : nextHost.value
+    });
+  };
+};
+var showFetchDebugError = (input) => {
+  if (snapshot.activeHostId === void 0) {
+    return false;
+  }
+  debugErrorSequence += 1;
+  const error = {
+    ...input,
+    id: `${Date.now()}-${debugErrorSequence}`
+  };
+  setSnapshot({
+    ...snapshot,
+    errors: [error, ...snapshot.errors],
+    open: true,
+    selectedErrorId: error.id
+  });
+  return true;
+};
+var closeDebugDrawer = () => {
+  if (snapshot.open) {
+    setSnapshot({ ...snapshot, open: false });
+  }
+};
+var removeDebugError = (id) => {
+  var _a, _b, _c, _d;
+  const removedIndex = snapshot.errors.findIndex((error) => error.id === id);
+  if (removedIndex === -1) {
+    return;
+  }
+  const errors = snapshot.errors.filter((error) => error.id !== id);
+  const selectedErrorId = snapshot.selectedErrorId === id ? (_c = (_a = errors[removedIndex]) == null ? void 0 : _a.id) != null ? _c : (_b = errors[removedIndex - 1]) == null ? void 0 : _b.id : snapshot.selectedErrorId && errors.some((error) => error.id === snapshot.selectedErrorId) ? snapshot.selectedErrorId : (_d = errors[0]) == null ? void 0 : _d.id;
+  setSnapshot({
+    ...snapshot,
+    errors,
+    selectedErrorId
+  });
+};
+var selectDebugError = (id) => {
+  if (snapshot.selectedErrorId === id || !snapshot.errors.some((error) => error.id === id)) {
+    return;
+  }
+  setSnapshot({ ...snapshot, selectedErrorId: id });
+};
+var clearDebugErrors = () => {
+  if (snapshot.errors.length > 0) {
+    setSnapshot({ ...snapshot, errors: [], selectedErrorId: void 0 });
+  }
+};
 var GzFetchError = class extends Error {
   constructor(message3, options) {
     super(message3);
@@ -87,6 +201,14 @@ var showFetchErrorMessage = (content) => {
   }
   message.error(content);
 };
+var showFetchSuccessMessage = (content) => {
+  const activeHost = activeHostId === void 0 ? void 0 : feedbackHosts.get(activeHostId);
+  if (activeHost == null ? void 0 : activeHost.showSuccessMessage) {
+    activeHost.showSuccessMessage(content);
+    return;
+  }
+  message.success(content);
+};
 
 // src/fetch/middleware.ts
 async function runRequestMiddlewares(initialConfig, middlewares) {
@@ -119,17 +241,17 @@ var DEFAULT_UNAUTHORIZED_LOGIN_URL = "/login";
 var DEFAULT_UNAUTHORIZED_MODAL_TITLE = "登录失效";
 var DEFAULT_UNAUTHORIZED_MODAL_MESSAGE = "当前登录状态已失效，请重新登录。";
 var IDLE_SNAPSHOT = { phase: "idle" };
-var snapshot = IDLE_SNAPSHOT;
-var listeners = /* @__PURE__ */ new Set();
+var snapshot2 = IDLE_SNAPSHOT;
+var listeners2 = /* @__PURE__ */ new Set();
 var modalHosts = /* @__PURE__ */ new Set();
-var emitChange = () => {
-  for (const listener of listeners) {
+var emitChange2 = () => {
+  for (const listener of listeners2) {
     listener();
   }
 };
-var setSnapshot = (nextSnapshot) => {
-  snapshot = nextSnapshot;
-  emitChange();
+var setSnapshot2 = (nextSnapshot) => {
+  snapshot2 = nextSnapshot;
+  emitChange2();
 };
 var resolveUnauthorizedOptions = (options) => {
   var _a, _b, _c, _d;
@@ -141,66 +263,66 @@ var resolveUnauthorizedOptions = (options) => {
     ...(options == null ? void 0 : options.onUnauthorized) === void 0 ? {} : { onUnauthorized: options.onUnauthorized }
   };
 };
-var getUnauthorizedSnapshot = () => snapshot;
+var getUnauthorizedSnapshot = () => snapshot2;
 var getUnauthorizedServerSnapshot = () => IDLE_SNAPSHOT;
 var subscribeUnauthorized = (listener) => {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+  listeners2.add(listener);
+  return () => listeners2.delete(listener);
 };
 var registerUnauthorizedModalHost = (hostId) => {
   modalHosts.add(hostId);
-  if (snapshot.activeHostId === void 0) {
-    setSnapshot({ ...snapshot, activeHostId: hostId });
+  if (snapshot2.activeHostId === void 0) {
+    setSnapshot2({ ...snapshot2, activeHostId: hostId });
   }
   return () => {
     modalHosts.delete(hostId);
-    if (snapshot.activeHostId !== hostId) {
+    if (snapshot2.activeHostId !== hostId) {
       return;
     }
     const nextHost = modalHosts.values().next();
     const nextHostId = nextHost.done ? void 0 : nextHost.value;
-    if (snapshot.phase === "closing") {
-      setSnapshot(
+    if (snapshot2.phase === "closing") {
+      setSnapshot2(
         nextHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: nextHostId, phase: "idle" }
       );
       return;
     }
     if (nextHostId === void 0) {
-      setSnapshot(
-        snapshot.options === void 0 ? { phase: snapshot.phase } : { options: snapshot.options, phase: snapshot.phase }
+      setSnapshot2(
+        snapshot2.options === void 0 ? { phase: snapshot2.phase } : { options: snapshot2.options, phase: snapshot2.phase }
       );
       return;
     }
-    setSnapshot({ ...snapshot, activeHostId: nextHostId });
+    setSnapshot2({ ...snapshot2, activeHostId: nextHostId });
   };
 };
 var openUnauthorizedModal = (options) => {
-  if (!options.enabled || snapshot.phase !== "idle") {
+  if (!options.enabled || snapshot2.phase !== "idle") {
     return false;
   }
-  setSnapshot({
-    ...snapshot.activeHostId === void 0 ? {} : { activeHostId: snapshot.activeHostId },
+  setSnapshot2({
+    ...snapshot2.activeHostId === void 0 ? {} : { activeHostId: snapshot2.activeHostId },
     options,
     phase: "open"
   });
   return true;
 };
 var beginCloseUnauthorizedModal = () => {
-  if (snapshot.phase !== "open" || snapshot.options === void 0) {
+  if (snapshot2.phase !== "open" || snapshot2.options === void 0) {
     return void 0;
   }
-  const { options } = snapshot;
-  setSnapshot({ ...snapshot, phase: "closing" });
+  const { options } = snapshot2;
+  setSnapshot2({ ...snapshot2, phase: "closing" });
   return options;
 };
 var cancelUnauthorizedModal = () => beginCloseUnauthorizedModal() !== void 0;
 var confirmUnauthorizedModal = () => beginCloseUnauthorizedModal();
 var completeUnauthorizedModal = () => {
-  if (snapshot.phase !== "closing") {
+  if (snapshot2.phase !== "closing") {
     return;
   }
-  setSnapshot(
-    snapshot.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot.activeHostId, phase: "idle" }
+  setSnapshot2(
+    snapshot2.activeHostId === void 0 ? IDLE_SNAPSHOT : { activeHostId: snapshot2.activeHostId, phase: "idle" }
   );
 };
 var executeUnauthorizedAction = (options, navigate = (loginUrl) => window.location.assign(loginUrl)) => {
@@ -279,7 +401,17 @@ function createGzFetch(options = {}) {
       await runErrorMiddlewares(error, { config: currentConfig }, middlewares);
       const shouldShowError = (_a2 = currentConfig.showErrorMessage) != null ? _a2 : showInstanceErrorMessage;
       if (shouldShowError && error.type !== "CANCELED_ERROR" && !shouldHandleUnauthorized) {
-        showFetchErrorMessage(error.message);
+        const debugInfo = error.type === "HTTP_ERROR" && error.status !== 401 && isDebugEnabled() ? getResponseDebugInfo(error.responseData) : void 0;
+        const didShowDebugError = debugInfo === void 0 ? false : showFetchDebugError({
+          debug: debugInfo,
+          message: error.message,
+          method: currentConfig.method,
+          responseData: error.responseData,
+          url: currentConfig.url
+        });
+        if (!didShowDebugError) {
+          showFetchErrorMessage(error.message);
+        }
       }
       throw error;
     }
@@ -314,18 +446,526 @@ async function gzFetch(config) {
   }
   return defaultClient(config);
 }
+var EMPTY_DEBUG_VALUE = "（无）";
+var formatDebugValue = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (value === void 0 || value === null) {
+    return EMPTY_DEBUG_VALUE;
+  }
+  try {
+    const serialized = JSON.stringify(value, null, 2);
+    return serialized != null ? serialized : "（无法序列化）";
+  } catch (e) {
+    return "（无法序列化）";
+  }
+};
+var formatCompleteDebugResponse = (error) => formatDebugValue(error.responseData);
+var copyDebugText = async (text) => {
+  var _a;
+  try {
+    if (typeof navigator !== "undefined" && ((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch (e) {
+  }
+  if (typeof document === "undefined" || !document.body || typeof document.execCommand !== "function") {
+    return false;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  let copied = false;
+  try {
+    textarea.focus();
+    textarea.select();
+    copied = document.execCommand("copy");
+  } catch (e) {
+    copied = false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+  return copied;
+};
+var codeBlockStyle = {
+  background: "var(--gz-color-bg-field, rgba(127, 127, 127, 0.08))",
+  border: "0",
+  borderRadius: 6,
+  boxSizing: "border-box",
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  lineHeight: 1.5,
+  margin: 0,
+  minHeight: 0,
+  overflow: "auto",
+  overflowWrap: "anywhere",
+  padding: 16,
+  whiteSpace: "pre-wrap"
+};
+var methodTagColors = {
+  DELETE: "red",
+  GET: "green",
+  PATCH: "purple",
+  POST: "gold",
+  PUT: "blue"
+};
+var getHttpMethodTagColor = (method) => {
+  const normalizedMethod = method == null ? void 0 : method.toUpperCase();
+  return normalizedMethod === void 0 ? void 0 : methodTagColors[normalizedMethod];
+};
+var HttpMethodTag = ({ method }) => {
+  var _a;
+  const normalizedMethod = (_a = method == null ? void 0 : method.toUpperCase()) != null ? _a : "--";
+  const color = getHttpMethodTagColor(method);
+  return color ? /* @__PURE__ */ jsx(Tag, { color, children: normalizedMethod }) : /* @__PURE__ */ jsx(Tag, { children: normalizedMethod });
+};
+var DebugCodeBlock = ({ onCopy, value }) => {
+  const canCopy = value !== void 0 && value !== null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        minHeight: 0,
+        overflow: "auto",
+        position: "relative"
+      },
+      children: [
+        canCopy ? /* @__PURE__ */ jsx(Tooltip, { title: "复制", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "复制",
+            size: "middle",
+            style: {
+              paddingInline: 12,
+              position: "absolute",
+              right: 8,
+              top: 8,
+              zIndex: 1
+            },
+            type: "primary",
+            onClick: onCopy,
+            children: "复制"
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              ...codeBlockStyle,
+              paddingRight: canCopy ? 88 : codeBlockStyle.padding
+            },
+            children: formatDebugValue(value)
+          }
+        )
+      ]
+    }
+  );
+};
+var DebugErrorListItem = ({ error, index, selected, total }) => {
+  var _a, _b;
+  const handleRemove = (event) => {
+    event.stopPropagation();
+    removeDebugError(error.id);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      selectDebugError(error.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-selected": selected,
+      role: "button",
+      tabIndex: 0,
+      title: error.url,
+      onClick: () => selectDebugError(error.id),
+      onKeyDown: handleKeyDown,
+      style: {
+        background: selected ? "var(--gz-color-bg-field, rgba(127, 127, 127, 0.12))" : "transparent",
+        borderRadius: 6,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        margin: "0 8px",
+        minWidth: 0,
+        padding: "10px 8px",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              background: selected ? "var(--gz-color-primary, var(--gz-color-primary-border, rgba(127, 127, 127, 0.24)))" : "transparent",
+              borderRadius: 2,
+              bottom: 8,
+              left: 0,
+              pointerEvents: "none",
+              position: "absolute",
+              top: 8,
+              width: 3
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              alignItems: "center",
+              display: "flex",
+              gap: 8,
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { color: "var(--gz-color-text-secondary)", flex: "0 0 auto" }, children: [
+                "#",
+                total - index
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { flex: "0 0 58px", minWidth: 58 }, children: /* @__PURE__ */ jsx(HttpMethodTag, { method: error.method }) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    display: "block",
+                    flex: "1 1 auto",
+                    minWidth: 0,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(Tooltip, { title: (_a = error.url) != null ? _a : "--", children: /* @__PURE__ */ jsx(
+                    "code",
+                    {
+                      style: {
+                        color: "var(--gz-color-text-secondary)",
+                        direction: "rtl",
+                        display: "block",
+                        minWidth: 0,
+                        overflow: "hidden",
+                        textAlign: "left",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      },
+                      children: (_b = error.url) != null ? _b : "--"
+                    }
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { flex: "0 0 24px", width: 24 }, children: /* @__PURE__ */ jsx(Tooltip, { title: "关闭此条", children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "关闭此条",
+                  size: "small",
+                  style: { padding: 0, width: 24 },
+                  type: "text",
+                  onClick: handleRemove,
+                  children: "×"
+                }
+              ) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "-webkit-box",
+              overflow: "hidden",
+              overflowWrap: "anywhere",
+              WebkitBoxOrient: "vertical",
+              WebkitLineClamp: 2
+            },
+            children: error.message
+          }
+        )
+      ]
+    }
+  );
+};
+var debugTabKeys = ["request", "stackTrace", "mdc"];
+var isDebugTabKey = (value) => debugTabKeys.includes(value);
+var DebugErrorDetails = ({ error }) => {
+  var _a, _b;
+  const [activeTab, setActiveTab] = useState("request");
+  const canCopyCompleteResponse = error.responseData !== void 0 && error.responseData !== null;
+  const values = {
+    mdc: error.debug.mdc,
+    request: error.debug.request,
+    stackTrace: error.debug.stackTrace
+  };
+  const handleCopy = async (value) => {
+    if (value === void 0 || value === null) {
+      return;
+    }
+    const copied = await copyDebugText(formatDebugValue(value));
+    if (copied) {
+      showFetchSuccessMessage("已复制");
+      return;
+    }
+    showFetchErrorMessage("复制失败");
+  };
+  const handleCopyCompleteResponse = async () => {
+    const copied = await copyDebugText(formatCompleteDebugResponse(error));
+    if (copied) {
+      showFetchSuccessMessage("完整响应信息已复制");
+      return;
+    }
+    showFetchErrorMessage("复制失败");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { flex: "0 0 auto", marginBottom: 16, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: { alignItems: "flex-start", display: "flex", gap: 8, minWidth: 0 },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "strong",
+                  {
+                    style: {
+                      display: "block",
+                      flex: "1 1 auto",
+                      fontSize: 16,
+                      minWidth: 0,
+                      overflowWrap: "anywhere"
+                    },
+                    children: error.message
+                  }
+                ),
+                canCopyCompleteResponse ? /* @__PURE__ */ jsx(Tooltip, { title: "复制完整响应信息", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    "aria-label": "复制完整响应信息",
+                    size: "middle",
+                    style: { flex: "0 0 auto", paddingInline: 12 },
+                    type: "primary",
+                    onClick: () => {
+                      void handleCopyCompleteResponse();
+                    },
+                    children: "复制完整响应"
+                  }
+                ) }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                alignItems: "center",
+                display: "flex",
+                gap: 8,
+                marginTop: 8,
+                minWidth: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(HttpMethodTag, { method: error.method }),
+                /* @__PURE__ */ jsx(
+                  "code",
+                  {
+                    style: {
+                      color: "var(--gz-color-text-secondary)",
+                      display: "block",
+                      minWidth: 0,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    },
+                    title: (_a = error.url) != null ? _a : "--",
+                    children: (_b = error.url) != null ? _b : "--"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            activeKey: activeTab,
+            items: [
+              {
+                children: /* @__PURE__ */ jsx(
+                  DebugCodeBlock,
+                  {
+                    onCopy: () => {
+                      void handleCopy(values.request);
+                    },
+                    value: values.request
+                  }
+                ),
+                key: "request",
+                label: "Request"
+              },
+              {
+                children: /* @__PURE__ */ jsx(
+                  DebugCodeBlock,
+                  {
+                    onCopy: () => {
+                      void handleCopy(values.stackTrace);
+                    },
+                    value: values.stackTrace
+                  }
+                ),
+                key: "stackTrace",
+                label: "Stack Trace"
+              },
+              {
+                children: /* @__PURE__ */ jsx(
+                  DebugCodeBlock,
+                  {
+                    onCopy: () => {
+                      void handleCopy(values.mdc);
+                    },
+                    value: values.mdc
+                  }
+                ),
+                key: "mdc",
+                label: "MDC"
+              }
+            ],
+            style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 },
+            onChange: (key) => {
+              if (isDebugTabKey(key)) {
+                setActiveTab(key);
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var GzFetchDebugDrawer = () => {
+  var _a, _b;
+  const hostIdRef = useRef(void 0);
+  (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-debug-drawer-host");
+  const hostId = hostIdRef.current;
+  const snapshot3 = useSyncExternalStore(
+    subscribeDebugDrawer,
+    getDebugDrawerSnapshot,
+    getDebugDrawerServerSnapshot
+  );
+  useEffect(() => registerDebugDrawerHost(hostId), [hostId]);
+  if (snapshot3.activeHostId !== hostId) {
+    return null;
+  }
+  const selectedError = (_b = snapshot3.errors.find((error) => error.id === snapshot3.selectedErrorId)) != null ? _b : snapshot3.errors[0];
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      open: snapshot3.open,
+      placement: "right",
+      styles: { body: { overflow: "hidden", padding: 0 } },
+      title: `Debug Error (${snapshot3.errors.length})`,
+      extra: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: snapshot3.errors.length === 0,
+          size: "middle",
+          style: { paddingInline: 12 },
+          type: "default",
+          onClick: clearDebugErrors,
+          children: "清空记录"
+        }
+      ),
+      width: "min(calc(100vw - 32px), clamp(720px, 80vw, 1120px))",
+      onClose: closeDebugDrawer,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            height: "100%",
+            minHeight: 0,
+            minWidth: 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "aside",
+              {
+                "aria-label": "Debug Error 列表",
+                style: {
+                  borderRight: "1px solid var(--gz-color-border, rgba(127, 127, 127, 0.24))",
+                  flex: "0 1 clamp(220px, 24vw, 320px)",
+                  minHeight: 0,
+                  overflowY: "auto",
+                  padding: "6px 0",
+                  width: "clamp(220px, 24vw, 320px)"
+                },
+                children: snapshot3.errors.length > 0 ? snapshot3.errors.map((error, index) => /* @__PURE__ */ jsx(
+                  DebugErrorListItem,
+                  {
+                    error,
+                    index,
+                    selected: error.id === (selectedError == null ? void 0 : selectedError.id),
+                    total: snapshot3.errors.length
+                  },
+                  error.id
+                )) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "var(--gz-color-text-secondary)",
+                      padding: 16,
+                      textAlign: "center"
+                    },
+                    children: "暂无 Debug Error"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "main",
+              {
+                "aria-label": "Debug Error 详情",
+                style: {
+                  flex: "1 1 auto",
+                  minHeight: 0,
+                  minWidth: 0,
+                  overflow: "hidden",
+                  padding: 20
+                },
+                children: selectedError ? /* @__PURE__ */ jsx(DebugErrorDetails, { error: selectedError }, selectedError.id) : /* @__PURE__ */ jsx("div", { style: { color: "var(--gz-color-text-secondary)" }, children: "暂无 Debug Error" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+GzFetchDebugDrawer.displayName = "GzFetchDebugDrawer";
+var GzFetchDebugDrawer_default = GzFetchDebugDrawer;
 var GzFetchUnauthorizedModal = () => {
   var _a, _b, _c;
   const hostIdRef = useRef(void 0);
   (_a = hostIdRef.current) != null ? _a : hostIdRef.current = /* @__PURE__ */ Symbol("gz-fetch-unauthorized-modal-host");
   const hostId = hostIdRef.current;
-  const snapshot2 = useSyncExternalStore(
+  const snapshot3 = useSyncExternalStore(
     subscribeUnauthorized,
     getUnauthorizedSnapshot,
     getUnauthorizedServerSnapshot
   );
   useEffect(() => registerUnauthorizedModalHost(hostId), [hostId]);
-  if (snapshot2.activeHostId !== hostId) {
+  if (snapshot3.activeHostId !== hostId) {
     return null;
   }
   const handleConfirm = () => {
@@ -341,11 +981,11 @@ var GzFetchUnauthorizedModal = () => {
       cancelText: "取消",
       closable: true,
       okText: "重新登录",
-      open: snapshot2.phase === "open",
-      title: (_b = snapshot2.options) == null ? void 0 : _b.modalTitle,
+      open: snapshot3.phase === "open",
+      title: (_b = snapshot3.options) == null ? void 0 : _b.modalTitle,
       onCancel: cancelUnauthorizedModal,
       onOk: handleConfirm,
-      children: (_c = snapshot2.options) == null ? void 0 : _c.modalMessage
+      children: (_c = snapshot3.options) == null ? void 0 : _c.modalMessage
     }
   );
 };
@@ -363,12 +1003,19 @@ var GzFetchFeedbackProvider = ({ children }) => {
     },
     [messageApi]
   );
+  const showSuccessMessage = useCallback(
+    (content) => {
+      void messageApi.success(content);
+    },
+    [messageApi]
+  );
   useEffect(
-    () => registerFeedbackHost(hostId, { showErrorMessage }),
-    [hostId, showErrorMessage]
+    () => registerFeedbackHost(hostId, { showErrorMessage, showSuccessMessage }),
+    [hostId, showErrorMessage, showSuccessMessage]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     messageContextHolder,
+    /* @__PURE__ */ jsx(GzFetchDebugDrawer_default, {}),
     /* @__PURE__ */ jsx(GzFetchUnauthorizedModal_default, {}),
     children
   ] });