@blocklet/ui-react 2.11.25 → 2.11.27

package/lib/Header/index.d.ts

@@ -1,11 +1,10 @@
-import { LiteralUnion } from 'type-fest';
-import type { BoxProps } from '@mui/material';
+import type { BoxProps, Breakpoint } from '@mui/material';
 import { BlockletMetaProps, SessionManagerProps } from '../@types';
 type HeaderProps = {
     meta?: BlockletMetaProps;
     addons?: Function | React.ReactNode;
     sessionManagerProps?: SessionManagerProps;
-    homeLink?: string | Function;
+    homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
     theme?: object;
     hideNavMenu?: boolean;
     bordered?: boolean;
@@ -16,7 +15,7 @@ type HeaderProps = {
     children?: React.ReactNode;
     prepend?: React.ReactNode;
     align?: 'left' | 'right';
-    maxWidth?: false | LiteralUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;
+    maxWidth?: false | Breakpoint;
 };
 declare const _default: import("react").ComponentType<HeaderProps & Omit<BoxProps, keyof HeaderProps>>;
 export default _default;

package/lib/UserCenter/components/settings.js

@@ -5,11 +5,9 @@ import { useCreation, useMemoizedFn } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import colors from "@arcblock/ux/lib/Colors/themes/temp";
-import { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
 import { translations } from "../libs/locales.js";
 import Notification from "./notification.js";
 import Privacy from "./privacy.js";
-import DidSpace from "./storage/index.js";
 import { UserSessions } from "../../UserSessions/index.js";
 import ThirdPartyLogin from "./third-party-login/index.js";
 import ConfigProfile from "./config-profile.js";
@@ -56,11 +54,6 @@ export default function Settings({
         value: "privacy",
         content: /* @__PURE__ */ jsx(Privacy, { configList: privacyConfigList, onSave })
       },
-      {
-        label: t("storageManagement"),
-        value: "storage",
-        content: /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) })
-      },
       {
         label: t("sessionManagement"),
         value: "session",

package/lib/UserCenter/components/storage/action.d.ts

@@ -1,9 +1,9 @@
-import { SpaceGateway } from '@blocklet/did-space-react';
+import { DIDSpaceGateway, DIDSpaceStatus } from '@blocklet/did-space-react';
 import { Session } from '../../../@types';
 declare function Action({ session, spaceGateway, spaceStatus, refresh, }: {
     session: Session;
-    spaceGateway: SpaceGateway;
-    spaceStatus: SpaceStatus;
+    spaceGateway: DIDSpaceGateway;
+    spaceStatus: DIDSpaceStatus;
     refresh: Function;
 }): import("react").JSX.Element;
 export default Action;

package/lib/UserCenter/components/storage/action.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ReConnect, SpaceStatus } from "@blocklet/did-space-react";
+import { DIDSpaceConnect, DIDSpaceStatus } from "@blocklet/did-space-react";
 import { IconButton, Link, Stack } from "@mui/material";
 import Toast from "@arcblock/ux/lib/Toast";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -12,14 +12,15 @@ function Action({
   refresh
 }) {
   return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
-    spaceStatus === SpaceStatus.DISCONNECTED && /* @__PURE__ */ jsx(
-      ReConnect,
+    spaceStatus === DIDSpaceStatus.DISCONNECTED && /* @__PURE__ */ jsx(
+      DIDSpaceConnect,
       {
+        reconnect: true,
         variant: "outlined",
         session,
         spaceDid: session.user?.didSpace?.did,
         spaceGatewayUrl: session.user?.didSpace?.url,
-        onConnected: async () => {
+        onSuccess: async () => {
           await refresh();
         },
         onError: (error) => {

package/lib/UserCenter/components/storage/connected.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Typography } from "@mui/material";
-import { SpaceCard, SessionConnectTo } from "@blocklet/did-space-react";
+import { DIDSpaceConnection, DIDSpaceConnect } from "@blocklet/did-space-react";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
 import Action from "./action.js";
 import useMobile from "../../../hooks/use-mobile.js";
@@ -9,13 +9,14 @@ function Connected({ spaceGateway }) {
   const { t } = useLocaleContext();
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
   const isMobile = useMobile();
+  const onSuccess = ({ spaceGateway: _spaceGateway }) => updateSpaceGateway(_spaceGateway);
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: "12px", children: [
       /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: "bold", children: t("storage.spaces.connected.title") }),
-      !isMobile && /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway })
+      !isMobile && /* @__PURE__ */ jsx(DIDSpaceConnect, { session, onSuccess })
     ] }),
     /* @__PURE__ */ jsx(Box, { children: spaceGateway && /* @__PURE__ */ jsx(
-      SpaceCard,
+      DIDSpaceConnection,
       {
         endpoint: spaceGateway.endpoint,
         deps: [spaceGateway],
@@ -24,7 +25,7 @@ function Connected({ spaceGateway }) {
       },
       spaceGateway.endpoint
     ) }),
-    isMobile && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: 2 }, children: /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway }) })
+    isMobile && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: 2 }, children: /* @__PURE__ */ jsx(DIDSpaceConnect, { session, onSuccess }) })
   ] });
 }
 export default Connected;

package/lib/UserCenter/components/storage/disconnect.js

@@ -1,16 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Typography } from "@mui/material";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { SessionConnectTo } from "@blocklet/did-space-react";
-import EmptySpacesNFT from "./icons/empty-spaces-nft.svg?react";
+import { DIDSpaceConnect, EmptySpacesNFTIcon } from "@blocklet/did-space-react";
 import { useConfigUserSpaceContext } from "../../../contexts/config-user-space.js";
 function Disconnect() {
   const { t } = useLocaleContext();
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", alignContent: "center", children: [
-    /* @__PURE__ */ jsx(EmptySpacesNFT, { style: { width: 200, height: 250 } }),
-    /* @__PURE__ */ jsx(Typography, { sx: { mt: 1, mb: 2 }, children: t("storage.spaces.connect.providerForStorage") }),
-    /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx(SessionConnectTo, { session, onConnected: updateSpaceGateway }) })
+  const onSuccess = ({ spaceGateway }) => updateSpaceGateway(spaceGateway);
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Typography, { fontSize: "16px", fontWeight: "bold", children: t("storage.spaces.connect.providerForStorage") }),
+    /* @__PURE__ */ jsx(
+      EmptySpacesNFTIcon,
+      {
+        viewBox: "0 0 228 258",
+        style: {
+          width: "156px",
+          height: "156px",
+          margin: "16px 0"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(DIDSpaceConnect, { session, onSuccess })
   ] });
 }
 export default Disconnect;

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

@@ -25,8 +25,11 @@ import Passport from "./passport.js";
 import Settings from "./settings.js";
 import { client } from "../../libs/client.js";
 import useMobile from "../../hooks/use-mobile.js";
+import { ConfigUserSpaceProvider } from "../../contexts/config-user-space.js";
+import DidSpace from "./storage/index.js";
 const profileLink = joinURL(PROFILE_URL, "/profile");
 const settingsLink = joinURL(PROFILE_URL, "/settings");
+const didSpacesLink = joinURL(PROFILE_URL, "/did-spaces");
 export default function UserCenter({
   children,
   notLoginContent = null,
@@ -141,6 +144,13 @@ export default function UserCenter({
         value: settingsLink,
         url: getLink(settingsLink, locale)
       });
+      tabs.push({
+        label: t("storageManagement"),
+        protected: true,
+        isPrivate: true,
+        value: didSpacesLink,
+        url: getLink(didSpacesLink, locale)
+      });
     }
     return tabs;
   }, [isMyself, locale]);
@@ -196,12 +206,15 @@ export default function UserCenter({
   const isProfileTab = useCreation(() => {
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/profile");
   }, [currentActiveTab]);
+  const isDidSpaceTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, "/did-spaces");
+  }, [currentActiveTab]);
   const oauth = session.useOAuth();
   const passkey = session.usePasskey();
   const handleSwitchPassport = useMemoizedFn(() => {
     if (session?.user?.sourceProvider === "passkey") {
       passkey.switchPassport(session.user);
-    } else if (["google", "apple", "email", "github"].includes(session?.user?.sourceProvider)) {
+    } else if (["google", "apple", "email", "github"].includes(session?.user?.sourceProvider ?? "")) {
       oauth.switchOAuthPassport(session.user);
     } else if (session) {
       session.switchPassport();
@@ -261,6 +274,9 @@ export default function UserCenter({
     if (isSettingTab && isMyself) {
       return settingContent;
     }
+    if (isDidSpaceTab && isMyself) {
+      return /* @__PURE__ */ jsx(ConfigUserSpaceProvider, { children: /* @__PURE__ */ jsx(DidSpace, {}) });
+    }
     return null;
   }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
   const content = useCreation(() => {

package/lib/UserCenter/libs/locales.js

@@ -28,7 +28,7 @@ export const translations = {
     noUserFound: "\u672A\u627E\u5230\u6307\u5B9A\u7684\u7528\u6237",
     notificationManagement: "\u901A\u77E5\u7BA1\u7406",
     privacyManagement: "\u9690\u79C1\u7BA1\u7406",
-    storageManagement: "\u5B58\u50A8\u7BA1\u7406",
+    storageManagement: "DID Spaces",
     webhook: {
       url: "\u81EA\u5B9A\u4E49URL",
       slack: "Slack"
@@ -121,7 +121,7 @@ export const translations = {
     emptyField: "None",
     notificationManagement: "Notifications",
     privacyManagement: "Privacy",
-    storageManagement: "Storage",
+    storageManagement: "DID Spaces",
     emptyContent: "Empty",
     underProtected: "This page has protected privacy",
     noUserFound: "No user found",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.11.25",
+  "version": "2.11.27",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -32,8 +32,8 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/bridge": "^2.11.25",
-    "@arcblock/react-hooks": "^2.11.25",
+    "@arcblock/bridge": "^2.11.27",
+    "@arcblock/react-hooks": "^2.11.27",
     "@blocklet/did-space-react": "^1.0.2",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -81,5 +81,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "1efa61a0f43a73a0b90654ff2db7d116782952a1"
+  "gitHead": "cfe12067f89f858787bcbea4822f940a2e850b76"
 }

package/src/Header/index.tsx

@@ -7,8 +7,7 @@ import NavMenu from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import omit from 'lodash/omit';
-import { LiteralUnion } from 'type-fest';
-import type { BoxProps } from '@mui/material';
+import type { BoxProps, Breakpoint } from '@mui/material';
 import clsx from 'clsx';
 
 import Icon from '../Icon';
@@ -63,7 +62,7 @@ type HeaderProps = {
   meta?: BlockletMetaProps;
   addons?: Function | React.ReactNode;
   sessionManagerProps?: SessionManagerProps;
-  homeLink?: string | Function;
+  homeLink?: string | ((brandContent: React.ReactNode) => JSX.Element | null);
   theme?: object;
   hideNavMenu?: boolean;
   bordered?: boolean;
@@ -74,7 +73,7 @@ type HeaderProps = {
   children?: React.ReactNode;
   prepend?: React.ReactNode;
   align?: 'left' | 'right';
-  maxWidth?: false | LiteralUnion<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;
+  maxWidth?: false | Breakpoint;
 };
 
 /**
@@ -109,6 +108,7 @@ function Header({
     return null;
   }
   const { appLogo, appLogoRect, theme } = formattedBlocklet;
+
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
@@ -153,7 +153,12 @@ function Header({
   );
 }
 
-const StyledUxHeader = styled(ResponsiveHeader)`
+type StyledUxHeaderProps = {
+  $bordered?: boolean;
+  $bgcolor?: string;
+};
+
+const StyledUxHeader = styled(ResponsiveHeader)<StyledUxHeaderProps>`
   ${({ $bgcolor }) => `background-color: ${$bgcolor || '#fff'};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

package/src/UserCenter/components/settings.tsx

@@ -6,12 +6,10 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
 import colors from '@arcblock/ux/lib/Colors/themes/temp';
-import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
 import { translations } from '../libs/locales';
 import Notification from './notification';
 import Privacy from './privacy';
 import { User, UserCenterTab } from '../../@types';
-import DidSpace from './storage';
 import { UserSessions } from '../../UserSessions';
 import ThirdPartyLogin from './third-party-login';
 import ConfigProfile from './config-profile';
@@ -65,15 +63,6 @@ export default function Settings({
         value: 'privacy',
         content: <Privacy configList={privacyConfigList} onSave={onSave} />,
       },
-      {
-        label: t('storageManagement'),
-        value: 'storage',
-        content: (
-          <ConfigUserSpaceProvider>
-            <DidSpace />
-          </ConfigUserSpaceProvider>
-        ),
-      },
       {
         label: t('sessionManagement'),
         value: 'session',

package/src/UserCenter/components/storage/action.tsx

@@ -1,4 +1,4 @@
-import { ReConnect, SpaceGateway, SpaceStatus } from '@blocklet/did-space-react';
+import { DIDSpaceConnect, DIDSpaceGateway, DIDSpaceStatus } from '@blocklet/did-space-react';
 import { IconButton, Link, Stack } from '@mui/material';
 import Toast from '@arcblock/ux/lib/Toast';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
@@ -14,20 +14,21 @@ function Action({
   refresh,
 }: {
   session: Session;
-  spaceGateway: SpaceGateway;
-  spaceStatus: SpaceStatus;
+  spaceGateway: DIDSpaceGateway;
+  spaceStatus: DIDSpaceStatus;
   refresh: Function;
 }) {
   return (
     <Stack direction="row" spacing={1}>
       {/* 重新连接 */}
-      {spaceStatus === SpaceStatus.DISCONNECTED && (
-        <ReConnect
+      {spaceStatus === DIDSpaceStatus.DISCONNECTED && (
+        <DIDSpaceConnect
+          reconnect
           variant="outlined"
           session={session}
           spaceDid={session.user?.didSpace?.did}
           spaceGatewayUrl={session.user?.didSpace?.url}
-          onConnected={async () => {
+          onSuccess={async () => {
             await refresh();
           }}
           onError={(error) => {

package/src/UserCenter/components/storage/connected.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Typography } from '@mui/material';
-import { SpaceCard, SessionConnectTo } from '@blocklet/did-space-react';
+import { DIDSpaceConnection, DIDSpaceConnect } from '@blocklet/did-space-react';
 import { SpaceGateway, useConfigUserSpaceContext } from '../../../contexts/config-user-space';
 import Action from './action';
 import useMobile from '../../../hooks/use-mobile';
@@ -10,17 +10,20 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
   const isMobile = useMobile();
 
+  const onSuccess = ({ spaceGateway: _spaceGateway }: { spaceGateway: SpaceGateway }) =>
+    updateSpaceGateway(_spaceGateway);
+
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex" flexDirection="row" alignItems="center" justifyContent="space-between" marginBottom="12px">
         <Typography fontSize="16px" fontWeight="bold">
           {t('storage.spaces.connected.title')}
         </Typography>
-        {!isMobile && <SessionConnectTo session={session} onConnected={updateSpaceGateway} />}
+        {!isMobile && <DIDSpaceConnect session={session} onSuccess={onSuccess} />}
       </Box>
       <Box>
         {spaceGateway && (
-          <SpaceCard
+          <DIDSpaceConnection
             key={spaceGateway.endpoint}
             endpoint={spaceGateway.endpoint}
             deps={[spaceGateway]}
@@ -32,7 +35,7 @@ function Connected({ spaceGateway }: { spaceGateway: SpaceGateway | undefined })
       </Box>
       {isMobile && (
         <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}>
-          <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
+          <DIDSpaceConnect session={session} onSuccess={onSuccess} />
         </Box>
       )}
     </Box>

package/src/UserCenter/components/storage/disconnect.tsx

@@ -1,21 +1,28 @@
 import { Box, Typography } from '@mui/material';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { SessionConnectTo } from '@blocklet/did-space-react';
-// @ts-expect-error
-import EmptySpacesNFT from './icons/empty-spaces-nft.svg?react';
+import { DIDSpaceConnect, EmptySpacesNFTIcon, type DIDSpaceGateway } from '@blocklet/did-space-react';
 import { useConfigUserSpaceContext } from '../../../contexts/config-user-space';
 
 function Disconnect() {
   const { t } = useLocaleContext();
   const { updateSpaceGateway, session } = useConfigUserSpaceContext();
 
+  const onSuccess = ({ spaceGateway }: { spaceGateway: DIDSpaceGateway }) => updateSpaceGateway(spaceGateway);
+
   return (
-    <Box display="flex" flexDirection="column" justifyContent="center" alignItems="center" alignContent="center">
-      <EmptySpacesNFT style={{ width: 200, height: 250 }} />
-      <Typography sx={{ mt: 1, mb: 2 }}>{t('storage.spaces.connect.providerForStorage')}</Typography>
-      <Box display="flex" alignItems="center" justifyContent="center">
-        <SessionConnectTo session={session} onConnected={updateSpaceGateway} />
-      </Box>
+    <Box display="flex" flexDirection="column">
+      <Typography fontSize="16px" fontWeight="bold">
+        {t('storage.spaces.connect.providerForStorage')}
+      </Typography>
+      <EmptySpacesNFTIcon
+        viewBox="0 0 228 258"
+        style={{
+          width: '156px',
+          height: '156px',
+          margin: '16px 0',
+        }}
+      />
+      <DIDSpaceConnect session={session} onSuccess={onSuccess} />
     </Box>
   );
 }

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

@@ -31,9 +31,12 @@ import Passport from './passport';
 import Settings from './settings';
 import { client } from '../../libs/client';
 import useMobile from '../../hooks/use-mobile';
+import { ConfigUserSpaceProvider } from '../../contexts/config-user-space';
+import DidSpace from './storage';
 
 const profileLink = joinURL(PROFILE_URL, '/profile');
 const settingsLink = joinURL(PROFILE_URL, '/settings');
+const didSpacesLink = joinURL(PROFILE_URL, '/did-spaces');
 
 export default function UserCenter({
   children,
@@ -170,6 +173,13 @@ export default function UserCenter({
         value: settingsLink,
         url: getLink(settingsLink, locale),
       });
+      tabs.push({
+        label: t('storageManagement'),
+        protected: true,
+        isPrivate: true,
+        value: didSpacesLink,
+        url: getLink(didSpacesLink, locale),
+      });
     }
     return tabs;
   }, [isMyself, locale]);
@@ -235,12 +245,16 @@ export default function UserCenter({
     return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile');
   }, [currentActiveTab]);
 
+  const isDidSpaceTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/did-spaces');
+  }, [currentActiveTab]);
+
   const oauth = session.useOAuth();
   const passkey = session.usePasskey();
   const handleSwitchPassport = useMemoizedFn(() => {
     if (session?.user?.sourceProvider === 'passkey') {
       passkey.switchPassport(session.user);
-    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider)) {
+    } else if (['google', 'apple', 'email', 'github'].includes(session?.user?.sourceProvider ?? '')) {
       oauth.switchOAuthPassport(session.user);
     } else if (session) {
       session.switchPassport();
@@ -292,6 +306,13 @@ export default function UserCenter({
     if (isSettingTab && isMyself) {
       return settingContent;
     }
+    if (isDidSpaceTab && isMyself) {
+      return (
+        <ConfigUserSpaceProvider>
+          <DidSpace />
+        </ConfigUserSpaceProvider>
+      );
+    }
     return null;
   }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
 

package/src/UserCenter/libs/locales.ts

@@ -28,7 +28,7 @@ export const translations = {
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
-    storageManagement: '存储管理',
+    storageManagement: 'DID Spaces',
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -123,7 +123,7 @@ export const translations = {
     emptyField: 'None',
     notificationManagement: 'Notifications',
     privacyManagement: 'Privacy',
-    storageManagement: 'Storage',
+    storageManagement: 'DID Spaces',
     emptyContent: 'Empty',
     underProtected: 'This page has protected privacy',
     noUserFound: 'No user found',