@blocklet/ui-react 2.10.90 → 2.11.1

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

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Box, CircularProgress, Divider, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
-import { useCreation, useMemoizedFn, useMount, useRequest, useUpdateEffect } from 'ahooks';
+import { useCreation, useMemoizedFn, useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
@@ -15,14 +15,15 @@ import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
 import cloneDeep from 'lodash/cloneDeep';
-import { getQuery, withQuery } from 'ufo';
+import { getQuery, withQuery, joinURL } from 'ufo';
 import type { AxiosError } from 'axios';
 import type { UserPublicInfo } from '@blocklet/js-sdk';
 
+import { PROFILE_URL } from '@arcblock/ux/lib/Util/constant';
 import Footer from '../../Footer';
 import Header from '../../Header';
 import { translations } from '../libs/locales';
-import { UserInfo, UserBasicInfo } from './user-info';
+import { UserInfo, UserBasicInfo, SwitchRole } from './user-info';
 import type { SessionContext as TSessionContext, User, UserCenterTab } from '../../@types';
 // @ts-ignore
 import { formatBlockletInfo, getLocalizedNavigation } from '../../blocklets';
@@ -37,7 +38,6 @@ export default function UserCenter({
   currentTab,
   contentProps = {},
   disableAutoRedirect = false,
-  autoPopupSetting = false,
   hideFooter = false,
   headerProps = {},
   footerProps = {},
@@ -118,7 +118,7 @@ export default function UserCenter({
     }
   );
 
-  const { confirmHolder, confirmApi } = useConfirm({
+  const { confirmHolder } = useConfirm({
     fullScreen: isMobile,
     sx: {
       '.MuiDialog-paper': {
@@ -150,21 +150,44 @@ export default function UserCenter({
     }
   }, []);
 
+  const defaultTabs = useCreation((): any => {
+    const tabs: any = [
+      {
+        label: t('common.profile'),
+        protected: false,
+        url: joinURL(PROFILE_URL, '/profile'),
+      },
+    ];
+    if (isMyself) {
+      tabs.push({
+        label: t('common.setting'),
+        protected: true,
+        isPrivate: true,
+        url: joinURL(PROFILE_URL, '/settings'),
+      });
+    }
+    return tabs;
+  }, [isMyself]);
+
   const userCenterTabs = useCreation<UserCenterTab[]>(() => {
     const menus = formattedBlocklet?.navigation?.userCenter || [];
     const localizedMenus = getLocalizedNavigation(menus, locale) || [];
-    return localizedMenus.map((x: any) => {
-      const value = x._rawLink ?? x.link;
+    const allMenus = localizedMenus.concat(defaultTabs);
+    return allMenus
+      .map((x: any) => {
+        const value = x._rawLink ?? x.link ?? x.url;
 
-      return {
-        value,
-        label: x.title,
-        url: x.link,
-        protected: privacyState?.data?.[value] ?? false,
-        // icon: x.icon,
-      };
-    });
-  }, [formattedBlocklet, userState.data, privacyState?.data, locale]);
+        return {
+          value,
+          label: x.title || x.label,
+          url: x.link || x.url,
+          protected: privacyState?.data?.[value] ?? false,
+          isPrivate: x.isPrivate,
+          // icon: x.icon,
+        };
+      })
+      .filter((x: any) => isMyself || !x.isPrivate);
+  }, [formattedBlocklet, userState.data, privacyState?.data, locale, defaultTabs, isMyself]);
 
   const currentActiveTab = useCreation(() => {
     return userCenterTabs.find((x) => x.value === currentTab);
@@ -199,27 +222,59 @@ export default function UserCenter({
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
 
-  const openSettings = useMemoizedFn(() => {
-    confirmApi.open({
-      title: t('settings'),
-      content: settingContent,
-      showCancelButton: false,
-      confirmButtonText: t('done'),
-      onConfirm: confirmApi.close,
-    });
-  });
+  const isSettingTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/settings');
+  }, [currentActiveTab]);
 
-  useUpdateEffect(() => {
-    confirmApi.update({
-      content: settingContent,
-    });
-  }, [settingContent]);
+  const isProfileTab = useCreation(() => {
+    return currentActiveTab && currentActiveTab?.value === joinURL(PROFILE_URL, '/profile');
+  }, [currentActiveTab]);
 
-  useMount(() => {
-    if (autoPopupSetting) {
-      openSettings();
+  const renderDefaultTab = useCreation(() => {
+    if (isProfileTab) {
+      return (
+        <Box
+          sx={{
+            width: {
+              sx: '100%',
+              md: 420,
+            },
+            maxWidth: '100%',
+            position: 'relative',
+          }}>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2.5,
+              position: {
+                xs: 'static',
+                md: stickySidebar ? 'sticky' : 'static',
+              },
+              top: (theme) => (stickySidebar ? theme.spacing(3) : 'unset'),
+            }}>
+            <Box>
+              <Box display="flex" justifyContent="space-between">
+                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{isMyself ? t('myInfo') : t('hisInfo')}</Typography>
+                {isMyself ? <SwitchRole user={userState.data as User} switchPassport={session.switchPassport} /> : null}
+              </Box>
+              <UserInfo user={userState.data as User} isMySelf={isMyself} />
+            </Box>
+            {isMyself ? (
+              <Box>
+                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
+                <Passport user={userState.data as User} />
+              </Box>
+            ) : null}
+          </Box>
+        </Box>
+      );
     }
-  });
+    if (isSettingTab && isMyself) {
+      return settingContent;
+    }
+    return null;
+  }, [isSettingTab, isProfileTab, userState, isMyself, stickySidebar, settingContent]);
 
   const content = useCreation(() => {
     if (userState.loading || session.loading) {
@@ -274,165 +329,126 @@ export default function UserCenter({
     }
 
     return (
-      <>
-        <Box
-          sx={[
-            {
-              flex: {
-                xs: 'revert',
-                md: 1,
-              },
-              overflow: 'hidden',
+      <Box
+        sx={[
+          {
+            flex: {
+              xs: 'revert',
+              md: 1,
             },
-          ]}>
-          {userState?.data?.fullName ? (
-            <Typography
-              variant="h4"
-              sx={{
-                py: 1.5,
-                fontSize: '18px !important',
-                fontWeight: 700,
-                lineHeight: 1.5,
-                display: {
-                  xs: 'none',
-                  md: 'block',
-                },
-              }}>
-              {userState.data.fullName}
-            </Typography>
-          ) : null}
-          <UserBasicInfo
-            isMyself={isMyself}
-            switchPassport={session.switchPassport}
-            switchProfile={session.switchProfile}
-            openSettings={openSettings}
-            user={userState.data as User}
-            showFullDid={false}
-            sx={{
-              display: {
-                md: 'none',
-                xs: 'block',
-              },
-              mb: 1.5,
-            }}
-          />
-          {userCenterTabs.length > 0 && currentTab ? (
-            <Box
-              sx={{
-                overflow: 'auto',
-                padding: '1px',
-              }}>
-              <Tabs
-                variant="line"
-                tabs={userCenterTabs}
-                current={currentTab}
-                onChange={handleChangeTab}
-                sx={{ mb: 1.5 }}
-              />
-              {!privacyState.data || privacyState.loading ? (
-                <Box
-                  sx={{
-                    height: '100%',
-                    minWidth: '160px',
-                    minHeight: '160px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}>
-                  <CircularProgress sx={{ color: colors.primary100 }} />
-                </Box>
-              ) : (
-                // eslint-disable-next-line react/jsx-no-useless-fragment
-                <>
-                  {currentActiveTab?.protected && !isMyself ? (
-                    <Box>
-                      <Empty>{t('underProtected')}</Empty>
-                    </Box>
-                  ) : (
-                    // eslint-disable-next-line react/jsx-no-useless-fragment
-                    <>{children && <Box {...contentProps}>{children}</Box>}</>
-                  )}
-                </>
-              )}
-            </Box>
-          ) : null}
-          {userCenterTabs.length === 0 ? (
-            <Box
-              sx={{
-                display: {
-                  xs: isMyself ? 'none' : 'block',
-                  md: 'block',
-                },
-                py: 3,
-              }}>
-              <Empty>{t('emptyContent')}</Empty>
-            </Box>
-          ) : null}
-        </Box>
-        <Box
+            overflow: 'hidden',
+          },
+        ]}>
+        <UserBasicInfo
+          isMyself={isMyself}
+          switchPassport={session.switchPassport}
+          switchProfile={session.switchProfile}
+          user={userState.data as User}
+          showFullDid={false}
           sx={{
-            display: {
-              xs: 'none',
-              md: 'block',
-            },
-            width: '1px',
-            my: -3,
-            backgroundColor: colors.strokeSep,
+            display: 'flex',
+            gap: 3,
+            mt: 2,
           }}
         />
-        <Box
-          sx={{
-            width: {
-              sx: '100%',
-              md: 420,
-            },
-            maxWidth: '100%',
-            position: 'relative',
-          }}>
+        <Divider sx={{ mt: 3, mb: 3 }} />
+        {userCenterTabs.length > 0 && currentTab ? (
           <Box
+            display={isMobile ? 'block' : 'flex'}
+            gap={2}
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 2.5,
-              position: {
-                xs: 'static',
-                md: stickySidebar ? 'sticky' : 'static',
-              },
-              top: (theme) => (stickySidebar ? theme.spacing(3) : 'unset'),
+              overflow: 'auto',
+              padding: '1px',
             }}>
-            <UserBasicInfo
-              isMyself={isMyself}
-              switchPassport={session.switchPassport}
-              switchProfile={session.switchProfile}
-              openSettings={openSettings}
-              user={userState.data as User}
+            <Tabs
+              orientation={isMobile ? 'horizontal' : 'vertical'}
+              variant="line"
+              tabs={userCenterTabs}
+              current={currentTab}
+              onChange={handleChangeTab}
               sx={{
-                display: {
-                  xs: 'none',
-                  md: 'block',
+                width: isMobile ? '100%' : 180,
+                '.MuiTabs-flexContainer': {
+                  gap: 1.5,
+                  '.MuiButtonBase-root': {
+                    fontSize: 16,
+                  },
+                  '.MuiTab-root': {
+                    display: 'block',
+                    textAlign: 'left',
+                  },
                 },
               }}
             />
-
-            <Box>
-              <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{isMyself ? t('myInfo') : t('hisInfo')}</Typography>
-              <UserInfo user={userState.data as User} isMySelf={isMyself} />
-            </Box>
-            {isMyself ? (
-              <Box>
-                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
-                <Passport user={userState.data as User} />
+            {!privacyState.data || privacyState.loading ? (
+              <Box
+                sx={{
+                  height: '100%',
+                  minWidth: '160px',
+                  minHeight: '160px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <CircularProgress sx={{ color: colors.primary100 }} />
               </Box>
-            ) : null}
+            ) : (
+              // eslint-disable-next-line react/jsx-no-useless-fragment
+              <Box sx={{ flex: 1 }}>
+                {currentActiveTab?.protected && !isMyself ? (
+                  <Box>
+                    <Empty>{t('underProtected')}</Empty>
+                  </Box>
+                ) : (
+                  // eslint-disable-next-line react/jsx-no-useless-fragment
+                  <>{children ? <Box {...contentProps}>{children}</Box> : <>{renderDefaultTab}</>}</>
+                )}
+              </Box>
+            )}
           </Box>
-        </Box>
-      </>
+        ) : null}
+        {userCenterTabs.length === 0 ? (
+          <Box
+            sx={{
+              display: {
+                xs: isMyself ? 'none' : 'block',
+                md: 'block',
+              },
+              py: 3,
+            }}>
+            <Empty>{t('emptyContent')}</Empty>
+          </Box>
+        ) : null}
+      </Box>
     );
-  }, [userState, userCenterTabs, isMyself, currentActiveTab, privacyState, currentTab, stickySidebar]);
+  }, [
+    userState,
+    userCenterTabs,
+    isMyself,
+    currentActiveTab,
+    privacyState,
+    currentTab,
+    stickySidebar,
+    renderDefaultTab,
+  ]);
+
+  // 如果当前URL指向的是 private tab需要重定向
+  const isPrivateActive = useCreation(() => {
+    if (isMyself) {
+      return false;
+    }
+    return currentActiveTab?.isPrivate;
+  }, [isMyself, currentActiveTab]);
 
-  if (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) {
+  // TODO 过滤 !mySelf 是的URL跳转
+  if (
+    (!disableAutoRedirect && !currentTab && formattedBlocklet?.navigation?.userCenter?.length > 0) ||
+    !currentActiveTab ||
+    isPrivateActive
+  ) {
     const firstUserCenterUrl = formattedBlocklet?.navigation?.userCenter[0]?.link;
-    if (firstUserCenterUrl) {
+    const firstTab = userCenterTabs.find((x) => x.value === firstUserCenterUrl);
+    if (firstUserCenterUrl && !firstTab?.isPrivate) {
       window.location.replace(
         withQuery(firstUserCenterUrl, {
           did: isMyself ? undefined : currentDid,
@@ -445,12 +461,11 @@ export default function UserCenter({
   return (
     <Box
       sx={{
-        backgroundColor: colors.backgroundsBgSubtitle,
         minHeight: '100vh',
         display: 'flex',
         flexDirection: 'column',
       }}>
-      <Header bordered {...headerProps} />
+      <Header bordered {...headerProps} maxWidth="100%" />
       <Box
         flex={1}
         sx={{

package/src/UserCenter/components/user-info/index.tsx

@@ -1,3 +1,4 @@
 export { default as UserBasicInfo } from './user-basic-info';
 export { default as UserInfoItem } from './user-info-item';
 export { default as UserInfo } from './user-info';
+export { default as SwitchRole } from './switch-role';

package/src/UserCenter/components/user-info/switch-role.tsx

@@ -0,0 +1,44 @@
+import { memo } from 'react';
+import { Chip } from '@mui/material';
+import { Icon } from '@iconify/react';
+import { useCreation } from 'ahooks';
+import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import type { User } from '../../../@types';
+
+function SwitchRole({ user, switchPassport }: { user: User; switchPassport: () => void }) {
+  const currentRole = useCreation(
+    () => (user?.passports || [])?.find((item) => item.name === user.role),
+    [user?.passports, user?.role]
+  );
+  return (
+    <Chip
+      label={currentRole?.title || user?.role || 'Guest'}
+      size="small"
+      variant="outlined"
+      sx={{
+        flexShrink: 0,
+        fontWeight: 'bold',
+        fontSize: '12px',
+        color: colors.textBase,
+        borderColor: colors.strokeBorderStrong,
+        backgroundColor: 'transparent',
+        textTransform: 'capitalize',
+        pr: 1,
+        pl: 0.5,
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.04)',
+        },
+        '&:active': {
+          boxShadow: 'none',
+        },
+      }}
+      clickable
+      deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
+      onDelete={switchPassport}
+      onClick={switchPassport}
+    />
+  );
+}
+
+export default memo(SwitchRole);

package/src/UserCenter/components/user-info/user-basic-info.tsx

@@ -1,13 +1,9 @@
-import { Box, Chip, CircularProgress, IconButton, Tooltip, Typography } from '@mui/material';
+import { Box, CircularProgress, Tooltip, Typography } from '@mui/material';
 import type { BoxProps } from '@mui/material';
-import { Icon } from '@iconify/react';
-import SwapHorizRoundedIcon from '@iconify-icons/material-symbols/swap-horiz-rounded';
-import SettingsOutlineRoundedIcon from '@iconify-icons/material-symbols/settings-outline-rounded';
 import Avatar from '@arcblock/ux/lib/Avatar';
-import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import DID from '@arcblock/ux/lib/DID';
-import { useCreation, useMemoizedFn } from 'ahooks';
+import { useMemoizedFn } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import noop from 'lodash/noop';
@@ -22,6 +18,7 @@ import { SessionContext as TSessionContext } from '../../../@types';
 import { translations } from '../../libs/locales';
 import type { User } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
+import SwitchRole from './switch-role';
 
 export default function UserBasicInfo({
   user,
@@ -29,7 +26,6 @@ export default function UserBasicInfo({
   showFullDid = true,
   switchPassport,
   switchProfile,
-  openSettings,
   ...rest
 }: {
   user: User;
@@ -37,7 +33,6 @@ export default function UserBasicInfo({
   showFullDid?: boolean;
   switchPassport: () => void;
   switchProfile: () => void;
-  openSettings: () => void;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const { session } = useContext<TSessionContext>(SessionContext);
@@ -46,10 +41,7 @@ export default function UserBasicInfo({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
-  const currentRole = useCreation(
-    () => (user?.passports || [])?.find((item) => item.name === user.role),
-    [user?.passports, user?.role]
-  );
+
   const theme = useTheme();
 
   const isSmallView = theme.breakpoints.down('md');
@@ -91,7 +83,6 @@ export default function UserBasicInfo({
           backgroundColor: '#fff',
           position: 'relative',
           overflow: 'hidden',
-          mb: 1.5,
           ...(isMyself
             ? {
                 cursor: 'pointer',
@@ -114,75 +105,36 @@ export default function UserBasicInfo({
         }}
         onClick={isMyself ? switchProfile : noop}
       />
-      <Typography
-        variant="h6"
-        sx={{
-          fontWeight: 'bold',
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          fontSize: '24px !important',
-        }}>
-        {user?.fullName}
-        {isMyself ? (
-          <>
-            <Chip
-              label={currentRole?.title || user?.role || 'Guest'}
-              size="small"
-              variant="outlined"
-              sx={{
-                flexShrink: 0,
-                fontWeight: 'bold',
-                fontSize: '12px',
-                color: colors.textBase,
-                borderColor: colors.strokeBorderStrong,
-                backgroundColor: 'transparent',
-                textTransform: 'capitalize',
-                pr: 1,
-                pl: 0.5,
-                '&:hover': {
-                  backgroundColor: 'rgba(0, 0, 0, 0.04)',
-                },
-                '&:active': {
-                  boxShadow: 'none',
-                },
-              }}
-              clickable
-              deleteIcon={<Icon icon={SwapHorizRoundedIcon} color={colors.textBase} />}
-              onDelete={switchPassport}
-              onClick={switchPassport}
-            />
-            {!isEmpty(user.url) && (
-              <Tooltip
-                title={!loading && translate(translations, 'refreshProfile.title', locale)}
-                sx={{ display: 'flex', alignItems: 'center' }}>
-                {loading ? (
-                  <CircularProgress size="16px" sx={{ color: theme?.colors?.primary, ml: 0.5 }} />
-                ) : (
-                  <RefreshOutlinedIcon onClick={refreshProfile} />
-                )}
-              </Tooltip>
-            )}
-          </>
-        ) : null}
-      </Typography>
-      <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
-      {isMyself ? (
-        <IconButton
+      <Box>
+        <Typography
+          variant="h6"
           sx={{
-            borderRadius: 2,
-            color: colors.textBase,
-            backgroundColor: 'white',
-            border: `1px solid ${colors.strokeBorderBase}`,
-            position: 'absolute',
-            top: 0,
-            right: 0,
-          }}
-          disableFocusRipple
-          onClick={openSettings}>
-          <Icon icon={SettingsOutlineRoundedIcon} />
-        </IconButton>
-      ) : null}
+            fontWeight: 'bold',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            fontSize: '24px !important',
+          }}>
+          {user?.fullName}
+          {isMyself ? (
+            <>
+              <SwitchRole user={user} switchPassport={switchPassport} />
+              {!isEmpty(user.url) && (
+                <Tooltip
+                  title={!loading && translate(translations, 'refreshProfile.title', locale)}
+                  sx={{ display: 'flex', alignItems: 'center' }}>
+                  {loading ? (
+                    <CircularProgress size="16px" sx={{ color: theme?.colors?.primary, ml: 0.5 }} />
+                  ) : (
+                    <RefreshOutlinedIcon onClick={refreshProfile} />
+                  )}
+                </Tooltip>
+              )}
+            </>
+          ) : null}
+        </Typography>
+        <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
+      </Box>
     </Box>
   );
 }