@blocklet/ui-react 3.0.35 → 3.0.36

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

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

package/lib/UserCenter/libs/locales.d.ts

@@ -170,6 +170,9 @@ export declare const translations: {
             error: string;
         };
         notImplemented: string;
+        userCenter: {
+            title: string;
+        };
     };
     en: {
         settings: string;
@@ -343,5 +346,8 @@ export declare const translations: {
             error: string;
         };
         notImplemented: string;
+        userCenter: {
+            title: string;
+        };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -169,7 +169,10 @@ const e = {
       abort: "取消删除账户",
       error: "删除账户失败"
     },
-    notImplemented: "操作未实现"
+    notImplemented: "操作未实现",
+    userCenter: {
+      title: "用户中心"
+    }
   },
   en: {
     settings: "Settings",
@@ -342,7 +345,10 @@ const e = {
       abort: "Delete account aborted",
       error: "Delete account failed"
     },
-    notImplemented: "This action is not implemented"
+    notImplemented: "This action is not implemented",
+    userCenter: {
+      title: "User Center"
+    }
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.0.35",
+  "version": "3.0.36",
   "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.35",
-    "@arcblock/icons": "3.0.35",
-    "@arcblock/react-hooks": "3.0.35",
+    "@arcblock/bridge": "3.0.36",
+    "@arcblock/icons": "3.0.36",
+    "@arcblock/react-hooks": "3.0.36",
     "@arcblock/ws": "^1.21.0",
     "@blocklet/constant": "^1.16.46",
     "@blocklet/did-space-react": "^1.1.10",
@@ -61,6 +61,7 @@
     "p-wait-for": "^5.0.2",
     "prop-types": "^15.8.1",
     "react-error-boundary": "^3.1.4",
+    "react-helmet": "^6.1.0",
     "react-placeholder": "^4.1.0",
     "semver": "^7.7.2",
     "type-fest": "^4.41.0",
@@ -90,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "96e21256a13c640548c59ccd807a61e6faae35f8"
+  "gitHead": "8d2ee041615e72c57199253d5425b50872642e6e"
 }

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

@@ -3,6 +3,7 @@ import { Box, CircularProgress, Divider, Typography } from '@mui/material';
 import type { BoxProps, Theme } from '@mui/material';
 import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
+import Helmet from 'react-helmet';
 
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
 import Tabs from '@arcblock/ux/lib/Tabs';
@@ -263,6 +264,16 @@ export default function UserCenter({
     return userCenterTabs.find((x) => withoutTrailingSlash(x.value) === withoutTrailingSlash(currentTab));
   }, [userCenterTabs]);
 
+  const htmlTitle = useCreation(() => {
+    const blockletName = window.blocklet?.appName;
+    const titleGroup = [currentActiveTab?.label, t('userCenter.title')].filter(Boolean);
+    const title = titleGroup.join('-');
+    if (blockletName) {
+      return `${title} | ${blockletName}`;
+    }
+    return title;
+  }, [currentActiveTab, t]);
+
   // 辅助函数：给 children 注入 userCenterTabs 属性
   const renderChildrenWithProps = useMemoizedFn((childrenToRender: any) => {
     if (!childrenToRender) return childrenToRender;
@@ -663,14 +674,17 @@ export default function UserCenter({
   // 嵌入其它页面内时，只展示 content
   if (embed || onlyProfile) {
     return (
-      <>
+      <Box>
         {/* 在 Arcsphere 中，需要渲染 header 用于注入某些 bridge 方法，设置为隐藏状态 */}
+        <Helmet>
+          <title>{htmlTitle}</title>
+        </Helmet>
         <Header style={{ display: 'none' }} />
         <Main>
           {content}
           {confirmHolder}
         </Main>
-      </>
+      </Box>
     );
   }
 
@@ -681,6 +695,9 @@ export default function UserCenter({
         display: 'flex',
         flexDirection: 'column',
       }}>
+      <Helmet>
+        <title>{htmlTitle}</title>
+      </Helmet>
       <Header bordered {...headerProps} maxWidth="100%" />
       <Main>
         {content}

package/src/UserCenter/libs/locales.ts

@@ -172,6 +172,9 @@ export const translations = {
       error: '删除账户失败',
     },
     notImplemented: '操作未实现',
+    userCenter: {
+      title: '用户中心',
+    },
   },
   en: {
     settings: 'Settings',
@@ -348,5 +351,8 @@ export const translations = {
       error: 'Delete account failed',
     },
     notImplemented: 'This action is not implemented',
+    userCenter: {
+      title: 'User Center',
+    },
   },
 };