@blocklet/ui-react 3.0.25 → 3.0.27

package/lib/UserCenter/components/user-center.js

@@ -1,25 +1,25 @@
-import { jsx as e, jsxs as f, Fragment as D } from "react/jsx-runtime";
-import { use as pe } from "react";
-import { Box as a, Typography as me, CircularProgress as he, Divider as xe } from "@mui/material";
-import { useMemoizedFn as y, useCreation as d, useRequest as Y } from "ahooks";
-import ge from "p-wait-for";
-import { SessionContext as ve } from "@arcblock/did-connect/lib/Session";
-import be from "@arcblock/ux/lib/Tabs";
-import M from "@arcblock/ux/lib/Empty";
-import we from "@arcblock/ux/lib/Button";
-import ye from "@arcblock/ux/lib/Result";
-import { useConfirm as Ce } from "@arcblock/ux/lib/Dialog";
-import { translate as ke } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext as Pe } from "@arcblock/ux/lib/Locale/context";
-import { ErrorFallback as Se } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled as oe } from "@arcblock/ux/lib/Theme";
-import De from "lodash/cloneDeep";
-import { joinURL as C, getQuery as Me, withoutTrailingSlash as Z, withQuery as $ } from "ufo";
+import { jsx as r, jsxs as f, Fragment as S } from "react/jsx-runtime";
+import { use as xe, isValidElement as X, cloneElement as Y, Children as ge } from "react";
+import { Box as l, Typography as be, CircularProgress as ve, Divider as we } from "@mui/material";
+import { useMemoizedFn as y, useCreation as u, useRequest as Z } from "ahooks";
+import ye from "p-wait-for";
+import { SessionContext as Ce } from "@arcblock/did-connect/lib/Session";
+import ke from "@arcblock/ux/lib/Tabs";
+import D from "@arcblock/ux/lib/Empty";
+import Pe from "@arcblock/ux/lib/Button";
+import Me from "@arcblock/ux/lib/Result";
+import { useConfirm as Se } from "@arcblock/ux/lib/Dialog";
+import { translate as De } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext as ze } from "@arcblock/ux/lib/Locale/context";
+import { ErrorFallback as Te } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as se } from "@arcblock/ux/lib/Theme";
+import We from "lodash/cloneDeep";
+import { joinURL as C, getQuery as Ae, withoutTrailingSlash as ee, withQuery as re } from "ufo";
 import { PROFILE_URL as k } from "@arcblock/ux/lib/Util/constant";
-import Te from "../../Footer/index.js";
-import ee from "../../Header/index.js";
-import { translations as We } from "../libs/locales.js";
-import re from "./user-info/user-basic-info.js";
+import Ue from "../../Footer/index.js";
+import te from "../../Header/index.js";
+import { translations as Le } from "../libs/locales.js";
+import ie from "./user-info/user-basic-info.js";
 import "@mui/icons-material";
 import "@iconify/react";
 import "@arcblock/ux/lib/DID";
@@ -30,15 +30,15 @@ import "@iconify-icons/material-symbols/settings-input-antenna-rounded";
 import "@arcblock/ux/lib/RelativeTime";
 import "@arcblock/ux/lib/UserCard/Content/shorten-label";
 import "./user-info/switch-role.js";
-import { formatBlockletInfo as ze, getLink as T, getLocalizedNavigation as Ae } from "../../blocklets.js";
-import Ue from "./passport.js";
-import Le from "./settings.js";
-import { client as te } from "../../libs/client.js";
-import Be from "../../hooks/use-mobile.js";
-import { ConfigUserSpaceProvider as Fe } from "../../contexts/config-user-space.js";
-import Re from "./storage/index.js";
-import Ie from "./nft.js";
-const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe(a)(({ theme: v }) => ({
+import { formatBlockletInfo as Be, getLink as z, getLocalizedNavigation as Fe } from "../../blocklets.js";
+import Ie from "./passport.js";
+import je from "./settings.js";
+import { client as ne } from "../../libs/client.js";
+import Ee from "../../hooks/use-mobile.js";
+import { ConfigUserSpaceProvider as He } from "../../contexts/config-user-space.js";
+import Ne from "./storage/index.js";
+import _e from "./nft.js";
+const T = C(k, "/nfts"), W = C(k, "/settings"), A = C(k, "/did-spaces"), oe = se(l)(({ theme: b }) => ({
   flex: 1,
   boxSizing: "border-box",
   padding: "0 16px",
@@ -49,13 +49,13 @@ const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe
   alignItems: "stretch",
   gap: 2.5,
   flexDirection: "column",
-  [v.breakpoints.up("md")]: {
+  [b.breakpoints.up("md")]: {
     flexDirection: "row"
   }
-})), U = oe(a)(({ theme: v }) => ({
+})), U = se(l)(({ theme: b }) => ({
   overflow: "hidden",
   flex: "revert",
-  [v.breakpoints.up("md")]: {
+  [b.breakpoints.up("md")]: {
     flex: 1
   },
   "@media (min-width: 850px) and (max-width: 1050px)": {
@@ -64,46 +64,46 @@ const W = C(k, "/nfts"), z = C(k, "/settings"), A = C(k, "/did-spaces"), ie = oe
     }
   }
 }));
-function Dr({
-  children: v,
+function Wr({
+  children: b,
   notLoginContent: L = null,
   currentTab: h,
   contentProps: B = {},
   disableAutoRedirect: F = !1,
-  hideFooter: ne = !1,
-  headerProps: se = {},
-  footerProps: ae = {},
+  hideFooter: ae = !1,
+  headerProps: le = {},
+  footerProps: de = {},
   userDid: P = void 0,
-  stickySidebar: R = !1,
-  embed: I = !1,
+  stickySidebar: I = !1,
+  embed: j = !1,
   onlyProfile: w = !1,
   // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
-  onDestroySelf: le = void 0
+  onDestroySelf: ue = void 0
 }) {
-  const { locale: x } = Pe(), l = Be({ key: "md" }), g = y((r, o = {}) => ke(We, r, x, "en", o)), t = pe(ve)?.session, p = d(() => {
+  const { locale: x } = ze(), d = Ee({ key: "md" }), g = y((e, t = {}) => De(Le, e, x, "en", t)), i = xe(Ce)?.session, p = u(() => {
     if (P)
       return P;
-    const r = window.location.href, o = Me(r);
-    return o?.did ? Array.isArray(o.did) ? o.did[0] : o.did : t?.user?.did;
-  }, [t?.user?.did, P]), i = d(() => t?.user ? p === t?.user?.did : !1, [p, t?.user?.did]), n = Y(
+    const e = window.location.href, t = Ae(e);
+    return t?.did ? Array.isArray(t.did) ? t.did[0] : t.did : i?.user?.did;
+  }, [i?.user?.did, P]), n = u(() => i?.user ? p === i?.user?.did : !1, [p, i?.user?.did]), o = Z(
     // eslint-disable-next-line consistent-return
     async () => {
-      if (await ge(() => t?.initialized), i)
-        return t.user;
+      if (await ye(() => i?.initialized), n)
+        return i.user;
       if (p)
-        return te.user.getUserPublicInfo({ did: p });
+        return ne.user.getUserPublicInfo({ did: p });
     },
     {
-      refreshDeps: [p, i, t?.initialized, t?.user]
+      refreshDeps: [p, n, i?.initialized, i?.user]
     }
-  ), j = y(() => i ? t.refresh() : n.refresh()), m = Y(
-    async () => n.data && h ? await te.user.getUserPrivacyConfig({ did: p }) : null,
+  ), E = y(() => n ? i.refresh() : o.refresh()), m = Z(
+    async () => o.data && h ? await ne.user.getUserPrivacyConfig({ did: p }) : null,
     {
-      refreshDeps: [p, n.data, h],
+      refreshDeps: [p, o.data, h],
       loadingDelay: 300
     }
-  ), { confirmHolder: H } = Ce({
-    fullScreen: l,
+  ), { confirmHolder: H } = Se({
+    fullScreen: d,
     sx: {
       ".MuiDialog-paper": {
         borderRadius: 1,
@@ -122,72 +122,78 @@ function Dr({
         }
       }
     }
-  }), N = d(() => {
-    const r = De(window.blocklet);
+  }), N = u(() => {
+    const e = We(window.blocklet);
     try {
-      return ze(r);
-    } catch (o) {
-      return console.error("Failed to format blocklet info", o, r), r;
+      return Be(e);
+    } catch (t) {
+      return console.error("Failed to format blocklet info", t, e), e;
     }
-  }, []), _ = d(() => {
-    const r = {
+  }, []), _ = u(() => {
+    const e = {
       label: g("common.nft"),
       protected: !1,
       isPrivate: !1,
       // true: 隐私数据，仅自己可见
-      value: W,
-      url: T(W, x)
+      value: T,
+      url: z(T, x)
     };
-    let o = [r];
-    return i && (o = [
-      r,
+    let t = [e];
+    return n && (t = [
+      e,
       {
         label: g("common.setting"),
         protected: !0,
         isPrivate: !0,
-        value: z,
-        url: T(z, x)
+        value: W,
+        url: z(W, x)
       },
       {
         label: g("storageManagement"),
         protected: !0,
         isPrivate: !0,
         value: A,
-        url: T(A, x)
+        url: z(A, x)
       }
-    ]), o;
-  }, [i, x]), c = d(() => {
-    const r = N?.navigation?.userCenter || [];
-    return (Ae(r, x) || []).concat(_).map((u) => {
-      const X = u.value ?? u._rawLink ?? u.link ?? u.url;
+    ]), t;
+  }, [n, x]), a = u(() => {
+    const e = N?.navigation?.userCenter || [];
+    return (Fe(e, x) || []).concat(_).map((c) => {
+      const K = c.value ?? c._rawLink ?? c.link ?? c.url;
       return {
-        value: X,
-        label: u.title || u.label,
-        url: u.link || u.url,
-        protected: m?.data?.[X] ?? !1,
-        isPrivate: u.isPrivate || u.private || (u?._rawLink?.includes("/customer") ?? !1)
+        value: K,
+        label: c.title || c.label,
+        url: c.link || c.url,
+        protected: m?.data?.[K] ?? !1,
+        isPrivate: c.isPrivate || c.private || (c?._rawLink?.includes("/customer") ?? !1)
         // FIXME: HACK: 隐藏 /customer 菜单, 需要一个通用的解决方案，在嵌入的时候就决定是否是私有的
         // icon: x.icon,
       };
-    }).filter((u) => i || !u.isPrivate);
-  }, [N, n.data, m?.data, x, _, i]), s = d(() => c.find((r) => Z(r.value) === Z(h)), [c]), de = y((r) => {
-    const o = c.find((b) => b.value === r);
-    o && (window.location.href = $(o.url, {
-      did: i ? void 0 : p
+    }).filter((c) => n || !c.isPrivate);
+  }, [N, o.data, m?.data, x, _, n]), s = u(() => a.find((e) => ee(e.value) === ee(h)), [a]), ce = y((e) => e && (X(e) ? Y(e, {
+    ...e.props || {},
+    userCenterTabs: a
+  }) : ge.map(e, (t) => X(t) ? Y(t, {
+    ...t.props || {},
+    userCenterTabs: a
+  }) : t))), fe = y((e) => {
+    const t = a.find((v) => v.value === e);
+    t && (window.location.href = re(t.url, {
+      did: n ? void 0 : p
     }));
-  }), E = d(() => /* @__PURE__ */ e(
-    Le,
+  }), R = u(() => /* @__PURE__ */ r(
+    je,
     {
-      user: n.data,
-      settings: { userCenterTabs: c },
-      onSave: async (r) => r === "privacy" ? (await m.runAsync(), m.data) : (r === "profile" && await t.refresh(), null),
-      isMobile: l,
-      onDestroySelf: le
+      user: o.data,
+      settings: { userCenterTabs: a },
+      onSave: async (e) => e === "privacy" ? (await m.runAsync(), m.data) : (e === "profile" && await i.refresh(), null),
+      isMobile: d,
+      onDestroySelf: ue
     }
-  ), [n.data, c, m.data, m.runAsync]), O = d(() => s && s?.value === z, [s]), q = d(() => s && s?.value === C(k, "/profile") || s?.value === W, [s]), ce = d(() => s && s?.value === A, [s]), ue = t.useOAuth(), fe = t.usePasskey(), Q = y(() => {
-    t?.user?.sourceProvider === "passkey" ? fe.switchPassport(t.user) : ["google", "apple", "email", "github"].includes(t?.user?.sourceProvider ?? "") ? ue.switchOAuthPassport(t.user) : t && t.switchPassport();
-  }), S = d(() => q ? /* @__PURE__ */ f(
-    a,
+  ), [o.data, a, m.data, m.runAsync]), O = u(() => s && s?.value === W, [s]), q = u(() => s && s?.value === C(k, "/profile") || s?.value === T, [s]), pe = u(() => s && s?.value === A, [s]), me = i.useOAuth(), he = i.usePasskey(), Q = y(() => {
+    i?.user?.sourceProvider === "passkey" ? he.switchPassport(i.user) : ["google", "apple", "email", "github"].includes(i?.user?.sourceProvider ?? "") ? me.switchOAuthPassport(i.user) : i && i.switchPassport();
+  }), M = u(() => q ? /* @__PURE__ */ f(
+    l,
     {
       sx: {
         display: "flex",
@@ -195,9 +201,9 @@ function Dr({
         gap: 2.5
       },
       children: [
-        i ? /* @__PURE__ */ f(a, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1.5, p: 2 }, children: [
-          /* @__PURE__ */ e(
-            me,
+        n ? /* @__PURE__ */ f(l, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1.5, p: 2 }, children: [
+          /* @__PURE__ */ r(
+            be,
             {
               sx: {
                 color: "text.primary",
@@ -207,25 +213,25 @@ function Dr({
               children: g("passport")
             }
           ),
-          /* @__PURE__ */ e(Ue, { user: n.data })
+          /* @__PURE__ */ r(Ie, { user: o.data })
         ] }) : null,
-        /* @__PURE__ */ e(Ie, { user: n.data })
+        /* @__PURE__ */ r(_e, { user: o.data })
       ]
     }
-  ) : O && i ? E : ce && i ? /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ e(Re, {}) }) : null, [O, q, n, i, R, E]), G = d(() => /* @__PURE__ */ e(
-    a,
+  ) : O && n ? R : pe && n ? /* @__PURE__ */ r(He, { children: /* @__PURE__ */ r(Ne, {}) }) : null, [O, q, o, n, I, R]), V = u(() => /* @__PURE__ */ r(
+    l,
     {
       sx: {
         display: {
-          xs: i ? "none" : "block",
+          xs: n ? "none" : "block",
           md: "block"
         },
         py: 3
       },
-      children: /* @__PURE__ */ e(M, { children: g("emptyContent") })
+      children: /* @__PURE__ */ r(D, { children: g("emptyContent") })
     }
-  ), [i, x]), J = d(() => !m.data || m.loading ? /* @__PURE__ */ e(
-    a,
+  ), [n, x]), $ = u(() => !m.data || m.loading ? /* @__PURE__ */ r(
+    l,
     {
       sx: {
         height: "100%",
@@ -236,27 +242,27 @@ function Dr({
         alignItems: "center",
         flex: 1
       },
-      children: /* @__PURE__ */ e(he, {})
+      children: /* @__PURE__ */ r(ve, {})
     }
   ) : (
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    /* @__PURE__ */ e(a, { sx: { flex: 1 }, children: s?.protected && !i ? /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(M, { children: g("underProtected") }) }) : (
+    /* @__PURE__ */ r(l, { sx: { flex: 1 }, children: s?.protected && !n ? /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(D, { children: g("underProtected") }) }) : (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ e(D, { children: v ? /* @__PURE__ */ e(a, { ...B, children: v }) : /* @__PURE__ */ e(D, { children: S }) })
+      /* @__PURE__ */ r(S, { children: b ? /* @__PURE__ */ r(l, { ...B, children: ce(b) }) : /* @__PURE__ */ r(S, { children: M }) })
     ) })
-  ), [m, s, i, v, B, S, x]), K = d(() => {
-    if (n.loading || t.loading)
+  ), [m, s, n, b, B, M, x]), G = u(() => {
+    if (o.loading || i.loading)
       return null;
-    if (n.error) {
-      if (n.error?.response?.status === 404)
-        return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(ye, { status: 404, description: g("noUserFound") }) });
-      const b = {
-        message: n.error.response?.data?.error || n.error.message || "error occurred"
+    if (o.error) {
+      if (o.error?.response?.status === 404)
+        return /* @__PURE__ */ r(l, { sx: { width: "100%" }, children: /* @__PURE__ */ r(Me, { status: 404, description: g("noUserFound") }) });
+      const v = {
+        message: o.error.response?.data?.error || o.error.message || "error occurred"
       };
-      return /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ e(Se, { error: b }) });
+      return /* @__PURE__ */ r(l, { sx: { width: "100%" }, children: /* @__PURE__ */ r(Te, { error: v }) });
     }
-    return !p && !n.data ? L || /* @__PURE__ */ e(a, { sx: { width: "100%" }, children: /* @__PURE__ */ f(
-      a,
+    return !p && !o.data ? L || /* @__PURE__ */ r(l, { sx: { width: "100%" }, children: /* @__PURE__ */ f(
+      l,
       {
         sx: {
           display: "flex",
@@ -266,54 +272,54 @@ function Dr({
           gap: 1
         },
         children: [
-          /* @__PURE__ */ e(M, { children: g("viewAfterLogin") }),
-          /* @__PURE__ */ e(we, { size: "small", variant: "contained", onClick: () => t.login(), children: g("loginNow") })
+          /* @__PURE__ */ r(D, { children: g("viewAfterLogin") }),
+          /* @__PURE__ */ r(Pe, { size: "small", variant: "contained", onClick: () => i.login(), children: g("loginNow") })
         ]
       }
-    ) }) : I ? /* @__PURE__ */ f(U, { children: [
-      c.length > 0 && h ? /* @__PURE__ */ e(
-        a,
+    ) }) : j ? /* @__PURE__ */ f(U, { children: [
+      a.length > 0 && h ? /* @__PURE__ */ r(
+        l,
         {
           sx: {
-            display: l ? "block" : "flex",
+            display: d ? "block" : "flex",
             height: "100%",
             overflow: "auto",
             padding: "1px"
           },
-          children: J
+          children: $
         }
       ) : null,
-      c.length === 0 && G
-    ] }) : w ? /* @__PURE__ */ e(U, { display: "flex", flexDirection: l ? "column" : "row", children: /* @__PURE__ */ e(
-      re,
+      a.length === 0 && V
+    ] }) : w ? /* @__PURE__ */ r(U, { display: "flex", flexDirection: d ? "column" : "row", children: /* @__PURE__ */ r(
+      ie,
       {
-        isMobile: l,
-        order: l ? 1 : "unset",
-        isMyself: i,
+        isMobile: d,
+        order: d ? 1 : "unset",
+        isMyself: n,
         switchPassport: Q,
-        switchProfile: t.switchProfile,
-        user: n.data,
+        switchProfile: i.switchProfile,
+        user: o.data,
         showFullDid: !1,
         onlyProfile: w,
-        refreshProfile: j,
+        refreshProfile: E,
         sx: {
-          padding: l ? "16px 0 0 0" : "40px 24px 24px 40px",
-          ...l ? {} : { width: 320, maxWidth: 320, flexShrink: 0 },
+          padding: d ? "16px 0 0 0" : "40px 24px 24px 40px",
+          ...d ? {} : { width: 320, maxWidth: 320, flexShrink: 0 },
           boxSizing: "content-box"
         }
       }
-    ) }) : /* @__PURE__ */ f(U, { display: "flex", flexDirection: l ? "column" : "row", children: [
+    ) }) : /* @__PURE__ */ f(U, { display: "flex", flexDirection: d ? "column" : "row", children: [
       /* @__PURE__ */ f(
-        a,
+        l,
         {
           className: "user-center-tabs",
           sx: {
             flex: "1",
-            order: l ? 2 : "unset"
+            order: d ? 2 : "unset"
           },
           children: [
-            c.length > 0 && h ? /* @__PURE__ */ f(
-              a,
+            a.length > 0 && h ? /* @__PURE__ */ f(
+              l,
               {
                 sx: {
                   display: "flex",
@@ -323,21 +329,21 @@ function Dr({
                   padding: "1px"
                 },
                 children: [
-                  /* @__PURE__ */ e(
-                    be,
+                  /* @__PURE__ */ r(
+                    ke,
                     {
                       orientation: "horizontal",
                       variant: "line",
-                      tabs: c,
+                      tabs: a,
                       current: s?.value ?? h,
-                      onChange: de,
+                      onChange: fe,
                       enableTabClick: !0,
                       sx: {
-                        mb: 2,
+                        mb: (e) => `${e.spacing(3)} !important`,
                         ".MuiTabs-flexContainer": {
                           gap: 3,
                           ".MuiButtonBase-root": {
-                            padding: l ? "16px 4px" : "32px 4px 16px 4px",
+                            padding: d ? "16px 4px" : "32px 4px 16px 4px",
                             fontSize: 16
                           },
                           ".MuiTab-root": {
@@ -345,13 +351,20 @@ function Dr({
                             textAlign: "left",
                             alignItems: "flex-start",
                             justifyContent: "flex-start",
-                            fontWeight: 400
+                            fontWeight: 400,
+                            mr: 0
                           }
                         },
-                        ".MuiTabs-root": {
+                        ".MuiTabs-indicator": {
+                          zIndex: 2
+                        },
+                        ".MuiTabs-scroller": {
                           "&:after": {
                             content: '""',
                             display: "block",
+                            position: "sticky",
+                            left: 0,
+                            zIndex: 1,
                             width: "100%",
                             height: "1px",
                             backgroundColor: "divider"
@@ -360,60 +373,60 @@ function Dr({
                       }
                     }
                   ),
-                  J
+                  $
                 ]
               }
             ) : null,
-            c.length === 0 && G
+            a.length === 0 && V
           ]
         }
       ),
-      !l && /* @__PURE__ */ e(xe, { orientation: "vertical", sx: { ml: 5 } }),
-      /* @__PURE__ */ e(
-        re,
+      !d && /* @__PURE__ */ r(we, { orientation: "vertical", sx: { ml: 5 } }),
+      /* @__PURE__ */ r(
+        ie,
         {
-          isMobile: l,
-          order: l ? 1 : "unset",
-          isMyself: i,
+          isMobile: d,
+          order: d ? 1 : "unset",
+          isMyself: n,
           switchPassport: Q,
-          switchProfile: t.switchProfile,
-          user: n.data,
-          refreshProfile: j,
+          switchProfile: i.switchProfile,
+          user: o.data,
+          refreshProfile: E,
           showFullDid: !1,
           sx: {
-            padding: l ? "16px 0 0 0" : "40px 24px 24px 40px",
-            ...l ? {} : { width: 320, maxWidth: 320, flexShrink: 0 },
+            padding: d ? "16px 0 0 0" : "40px 24px 24px 40px",
+            ...d ? {} : { width: 320, maxWidth: 320, flexShrink: 0 },
             boxSizing: "content-box"
           }
         }
       )
     ] });
   }, [
+    o,
+    a,
     n,
-    c,
-    i,
     s,
     m,
     h,
-    R,
-    S
-  ]), V = d(() => i ? !1 : s?.isPrivate, [i, s]);
-  if (d(() => w ? !1 : !F && !h && c?.length > 0 || !s || V, [F, h, c, s, V, w])) {
-    const r = c[0]?.url, o = c.find((b) => b.value === r);
-    return r && !o?.isPrivate && window.location.replace(
-      $(r, {
-        did: i ? void 0 : p
+    I,
+    M
+  ]), J = u(() => n ? !1 : s?.isPrivate, [n, s]);
+  if (u(() => w ? !1 : !F && !h && a?.length > 0 || !s || J, [F, h, a, s, J, w])) {
+    const e = a[0]?.url, t = a.find((v) => v.value === e);
+    return e && !t?.isPrivate && window.location.replace(
+      re(e, {
+        did: n ? void 0 : p
       })
     ), null;
   }
-  return I || w ? /* @__PURE__ */ f(D, { children: [
-    /* @__PURE__ */ e(ee, { style: { display: "none" } }),
-    /* @__PURE__ */ f(ie, { children: [
-      K,
+  return j || w ? /* @__PURE__ */ f(S, { children: [
+    /* @__PURE__ */ r(te, { style: { display: "none" } }),
+    /* @__PURE__ */ f(oe, { children: [
+      G,
       H
     ] })
   ] }) : /* @__PURE__ */ f(
-    a,
+    l,
     {
       sx: {
         minHeight: "100vh",
@@ -421,16 +434,16 @@ function Dr({
         flexDirection: "column"
       },
       children: [
-        /* @__PURE__ */ e(ee, { bordered: !0, ...se, maxWidth: "100%" }),
-        /* @__PURE__ */ f(ie, { children: [
-          K,
+        /* @__PURE__ */ r(te, { bordered: !0, ...le, maxWidth: "100%" }),
+        /* @__PURE__ */ f(oe, { children: [
+          G,
           H
         ] }),
-        ne ? null : /* @__PURE__ */ e(
-          Te,
+        ae ? null : /* @__PURE__ */ r(
+          Ue,
           {
             bordered: !0,
-            ...ae,
+            ...de,
             sx: {
               ".MuiContainer-root": {
                 maxWidth: 1600
@@ -443,5 +456,5 @@ function Dr({
   );
 }
 export {
-  Dr as default
+  Wr as default
 };

package/lib/common/domain-warning.js

@@ -1,12 +1,12 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { useState as S, useMemo as d, useCallback as u } from "react";
 import p from "prop-types";
-import { Dialog as T, DialogContent as A, Typography as c, Box as C, DialogActions as W, Button as f } from "@mui/material";
-import { useMemoizedFn as v } from "ahooks";
-import { translate as M } from "@arcblock/ux/lib/Locale/util";
-import { joinURL as O } from "ufo";
+import { Dialog as T, DialogContent as C, Typography as c, Box as W, DialogActions as v, Button as f } from "@mui/material";
+import { useMemoizedFn as M } from "ahooks";
+import { translate as O } from "@arcblock/ux/lib/Locale/util";
+import { joinURL as A } from "ufo";
 import j from "../hooks/use-mobile.js";
-const z = ["admin", "owner"], I = (t) => t.endsWith(".ip.abtnet.io"), E = (t) => t.endsWith(".did.abtnet.io"), H = {
+const z = ["admin", "owner"], I = (i) => i.endsWith(".ip.abtnet.io"), E = (i) => i.endsWith(".did.abtnet.io"), H = {
   en: {
     guest: {
       title: "Notice: You are using a temporary domain",
@@ -42,13 +42,13 @@ const z = ["admin", "owner"], I = (t) => t.endsWith(".ip.abtnet.io"), E = (t) =>
     bindDomain: "配置域名"
   }
 }, N = 1e3 * 60 * 60 * 24 * 30, w = ".well-known/service/admin/domains";
-function P({ locale: t = "en", session: h = {} }) {
+function P({ locale: i = "en", session: h = {} }) {
   const l = h?.user, b = j(), [g, s] = S(() => {
     const e = window.localStorage.getItem("domain-warning-skip");
     if (!e) return !0;
-    const r = +/* @__PURE__ */ new Date(), y = +new Date(e);
-    return r - y > N;
-  }), n = v((e, r = {}) => M(H, e, t, "en", r)), m = d(() => {
+    const r = +/* @__PURE__ */ new Date(), k = +new Date(e);
+    return r - k > N;
+  }), n = M((e, r = {}) => O(H, e, i, "en", r)), m = d(() => {
     try {
       const { hostname: e } = new URL(window.location.href);
       return e;
@@ -66,13 +66,13 @@ function P({ locale: t = "en", session: h = {} }) {
     [n]
   ), D = u(() => {
     window.localStorage.setItem("domain-warning-skip", (/* @__PURE__ */ new Date()).toISOString()), s(!1);
-  }, []), k = u(() => {
-    const e = O(window.location.origin, w);
+  }, []), y = u(() => {
+    const e = A(window.location.origin, w);
     e.startsWith("http") && window.open(e, "_blank"), s(!1);
   }, []), o = l?.role && z.includes(l.role);
   return window.location.href.includes(w) || b || !I(m) && !E(m) ? null : /* @__PURE__ */ a(T, { open: g, disableEscapeKeyDown: !0, fullWidth: !0, maxWidth: "sm", onClose: () => s(!1), children: [
-    /* @__PURE__ */ a(A, { sx: { padding: "20px !important" }, children: [
-      /* @__PURE__ */ i(
+    /* @__PURE__ */ a(C, { sx: { padding: "20px !important" }, children: [
+      /* @__PURE__ */ t(
         c,
         {
           sx: {
@@ -82,33 +82,33 @@ function P({ locale: t = "en", session: h = {} }) {
           children: n(o ? "owner.title" : "guest.title")
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ t(
         c,
         {
           sx: {
             marginTop: "20px",
             fontSize: "14px",
-            color: "#9397A1"
+            color: "text.secondary"
           },
           children: n(o ? "owner.description" : "guest.description")
         }
       ),
-      o && /* @__PURE__ */ i(C, { component: "ul", children: x.map((e) => /* @__PURE__ */ i(
+      o && /* @__PURE__ */ t(W, { component: "ul", children: x.map((e) => /* @__PURE__ */ t(
         c,
         {
           component: "li",
           sx: {
             fontSize: "14px",
-            color: "#9397A1"
+            color: "text.secondary"
           },
           children: e
         },
         e
       )) })
     ] }),
-    /* @__PURE__ */ a(W, { sx: { px: "12px !important" }, children: [
-      /* @__PURE__ */ i(f, { onClick: D, children: n("skip") }),
-      o && /* @__PURE__ */ i(f, { variant: "contained", onClick: k, children: n("bindDomain") })
+    /* @__PURE__ */ a(v, { sx: { px: "12px !important" }, children: [
+      /* @__PURE__ */ t(f, { onClick: D, children: n("skip") }),
+      o && /* @__PURE__ */ t(f, { variant: "contained", onClick: y, children: n("bindDomain") })
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.25",
+  "version": "3.0.27",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.46",
     "@abtnode/util": "^1.16.46",
-    "@arcblock/bridge": "3.0.25",
-    "@arcblock/icons": "3.0.25",
-    "@arcblock/react-hooks": "3.0.25",
+    "@arcblock/bridge": "3.0.27",
+    "@arcblock/icons": "3.0.27",
+    "@arcblock/react-hooks": "3.0.27",
     "@arcblock/ws": "^1.20.15",
     "@blocklet/constant": "^1.16.46",
     "@blocklet/did-space-react": "^1.1.6",
@@ -90,5 +90,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "4f1f8b69bdd71bd8dee091312a9923e6fb9b8f41"
+  "gitHead": "b1e137e0c74f4b58af16b1d75a65166b163cf65d"
 }

package/src/UserCenter/components/user-center.tsx

@@ -1,6 +1,6 @@
-import { use } from 'react';
+import { Children, cloneElement, isValidElement, use } from 'react';
 import { Box, CircularProgress, Divider, Typography } from '@mui/material';
-import type { BoxProps } from '@mui/material';
+import type { BoxProps, Theme } from '@mui/material';
 import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 
@@ -263,6 +263,30 @@ export default function UserCenter({
     return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
 
+  // 辅助函数：给 children 注入 userCenterTabs 属性
+  const renderChildrenWithProps = useMemoizedFn((childrenToRender: any) => {
+    if (!childrenToRender) return childrenToRender;
+
+    // 如果 children 是单个 React 元素，克隆并注入 props
+    if (isValidElement(childrenToRender)) {
+      return cloneElement(childrenToRender as any, {
+        ...(childrenToRender.props || {}),
+        userCenterTabs,
+      });
+    }
+
+    // 如果 children 是数组，遍历每个元素并注入 props
+    return Children.map(childrenToRender, (child) => {
+      if (isValidElement(child)) {
+        return cloneElement(child as any, {
+          ...(child.props || {}),
+          userCenterTabs,
+        });
+      }
+      return child;
+    });
+  });
+
   const handleChangeTab = useMemoizedFn((value) => {
     const findTab = userCenterTabs.find((x) => x.value === value);
     if (findTab) {
@@ -402,7 +426,7 @@ export default function UserCenter({
           </Box>
         ) : (
           // eslint-disable-next-line react/jsx-no-useless-fragment
-          <>{children ? <Box {...contentProps}>{children}</Box> : <>{renderDefaultTab}</>}</>
+          <>{children ? <Box {...contentProps}>{renderChildrenWithProps(children)}</Box> : <>{renderDefaultTab}</>}</>
         )}
       </Box>
     );
@@ -528,7 +552,7 @@ export default function UserCenter({
                 onChange={handleChangeTab}
                 enableTabClick
                 sx={{
-                  mb: 2,
+                  mb: (theme: Theme) => `${theme.spacing(3)} !important`,
                   '.MuiTabs-flexContainer': {
                     gap: 3,
                     '.MuiButtonBase-root': {
@@ -541,12 +565,19 @@ export default function UserCenter({
                       alignItems: 'flex-start',
                       justifyContent: 'flex-start',
                       fontWeight: 400,
+                      mr: 0,
                     },
                   },
-                  '.MuiTabs-root': {
+                  '.MuiTabs-indicator': {
+                    zIndex: 2,
+                  },
+                  '.MuiTabs-scroller': {
                     '&:after': {
                       content: '""',
                       display: 'block',
+                      position: 'sticky',
+                      left: 0,
+                      zIndex: 1,
                       width: '100%',
                       height: '1px',
                       backgroundColor: 'divider',

package/src/common/domain-warning.jsx

@@ -138,7 +138,7 @@ export default function DomainWarning({ locale = 'en', session = {} }) {
           sx={{
             marginTop: '20px',
             fontSize: '14px',
-            color: '#9397A1',
+            color: 'text.secondary',
           }}>
           {isOwner ? t('owner.description') : t('guest.description')}
         </Typography>
@@ -151,7 +151,7 @@ export default function DomainWarning({ locale = 'en', session = {} }) {
                 key={benefit}
                 sx={{
                   fontSize: '14px',
-                  color: '#9397A1',
+                  color: 'text.secondary',
                 }}>
                 {benefit}
               </Typography>