@blocklet/ui-react 2.9.23 → 2.9.25

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

@@ -6,6 +6,8 @@ export declare const translations: {
         notification: string;
         email: string;
         lastLogin: string;
+        lastLoginAt: string;
+        lastLoginIp: string;
         createdAt: string;
         registerFrom: string;
         unknown: string;
@@ -36,6 +38,7 @@ export declare const translations: {
         currentPassport: string;
         switchProfile: string;
         userInfo: string;
+        myInfo: string;
     };
     en: {
         settings: string;
@@ -44,6 +47,8 @@ export declare const translations: {
         notification: string;
         email: string;
         lastLogin: string;
+        lastLoginAt: string;
+        lastLoginIp: string;
         createdAt: string;
         registerFrom: string;
         unknown: string;
@@ -74,5 +79,6 @@ export declare const translations: {
         currentPassport: string;
         switchProfile: string;
         userInfo: string;
+        myInfo: string;
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -12,6 +12,8 @@ const translations = exports.translations = {
     notification: "\u901A\u77E5",
     email: "\u90AE\u7BB1\u5730\u5740",
     lastLogin: "\u4E0A\u6B21\u767B\u5F55",
+    lastLoginAt: "\u4E0A\u6B21\u767B\u5F55\u65F6\u95F4",
+    lastLoginIp: "\u4E0A\u6B21\u767B\u5F55\u5730\u5740",
     createdAt: "\u521B\u5EFA\u65F6\u95F4",
     registerFrom: "\u6CE8\u518C\u6765\u6E90",
     unknown: "\u672A\u77E5",
@@ -41,7 +43,8 @@ const translations = exports.translations = {
     toPublic: "\u516C\u5F00 \u201C{name}\u201D \u9875\u9762",
     currentPassport: "\u5F53\u524D\u4F7F\u7528\u7684\u901A\u884C\u8BC1",
     switchProfile: "\u5207\u6362",
-    userInfo: "\u4E2A\u4EBA\u4FE1\u606F"
+    userInfo: "\u4E2A\u4EBA\u4FE1\u606F",
+    myInfo: "\u6211\u7684\u4FE1\u606F"
   },
   en: {
     settings: "Settings",
@@ -50,6 +53,8 @@ const translations = exports.translations = {
     notification: "Notification",
     email: "Email",
     lastLogin: "Last Login & IP",
+    lastLoginAt: "Last Login",
+    lastLoginIp: "Last IP",
     createdAt: "Created At",
     registerFrom: "Register From",
     unknown: "Unknown",
@@ -79,6 +84,7 @@ const translations = exports.translations = {
     toPublic: 'Public "{name}" page',
     currentPassport: "Passport currently in use",
     switchProfile: "Switch",
-    userInfo: "User Info"
+    userInfo: "User Info",
+    myInfo: "My Info"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.9.23",
+  "version": "2.9.25",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -62,10 +62,10 @@
     }
   },
   "dependencies": {
-    "@abtnode/constant": "1.16.23-beta-aeb9f5bd",
-    "@arcblock/did-connect": "^2.9.23",
-    "@arcblock/ux": "^2.9.23",
-    "@blocklet/js-sdk": "1.16.23-beta-aeb9f5bd",
+    "@abtnode/constant": "1.16.23-beta-c9c4e08e",
+    "@arcblock/did-connect": "^2.9.25",
+    "@arcblock/ux": "^2.9.25",
+    "@blocklet/js-sdk": "1.16.23-beta-c9c4e08e",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@iconify-icons/material-symbols": "^1.2.58",
@@ -99,5 +99,5 @@
     "jest": "^28.1.3",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "83609a54526c180ff8aabb3950505da36de7ef4a"
+  "gitHead": "a55d6db8fb2b95082cbd879ed5469543a2c0835f"
 }

package/src/Footer/index.jsx

@@ -4,12 +4,13 @@ import { styled } from '@arcblock/ux/lib/Theme';
 import { withErrorBoundary } from 'react-error-boundary';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import omit from 'lodash/omit';
 
 import OverridableThemeProvider from '../common/overridable-theme-provider';
 import InternalFooter from './internal-footer';
 import { mapRecursive } from '../utils';
 import { formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
-
 import { blockletMetaProps } from '../types';
 
 /**
@@ -60,7 +61,12 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
 
   return (
     <OverridableThemeProvider theme={themeOverrides}>
-      <StyledInternalFooter {...props} {...rest} $bgcolor={theme?.background?.footer} />
+      <StyledInternalFooter
+        {...props}
+        {...omit(rest, ['bordered'])}
+        $bordered={rest?.bordered}
+        $bgcolor={theme?.background?.footer}
+      />
     </OverridableThemeProvider>
   );
 }
@@ -77,7 +83,7 @@ Footer.defaultProps = {
 };
 
 const StyledInternalFooter = styled(InternalFooter)`
-  border-top: 1px solid #eee;
+  ${({ $bordered }) => `border-top: 1px solid ${$bordered ? colors.strokeSep : '#eee'};`}
   color: ${(props) => props.theme.palette.grey[600]};
   ${({ $bgcolor }) => $bgcolor && `background-color: ${$bgcolor};`}
   font-family: Inter, Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,

package/src/Header/index.jsx

@@ -6,9 +6,11 @@ import { styled } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 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 Icon from '../Icon';
 import OverridableThemeProvider from '../common/overridable-theme-provider';
-
 import { blockletMetaProps, sessionManagerProps } from '../types';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
@@ -92,7 +94,8 @@ function Header({ meta, addons, sessionManagerProps, homeLink, theme: themeOverr
         homeLink={homeLink}
         logo={<img src={appLogoRect || appLogo} alt="logo" />}
         addons={headerAddons}
-        {...rest}
+        {...omit(rest, ['bordered'])}
+        $bordered={rest?.bordered}
         $bgcolor={theme?.background?.header}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {!navItems?.length
@@ -143,6 +146,7 @@ const StyledUxHeader = styled(ResponsiveHeader)`
   .header-logo {
     min-width: 44px;
   }
+  ${({ $bordered }) => ($bordered ? `border-bottom: 1px solid ${colors.strokeSep};` : '')}
   ${(props) => props.theme.breakpoints.down('md')} {
     .header-logo {
       min-width: 32px;

package/src/UserCenter/components/passport.tsx

@@ -1,5 +1,5 @@
-import { Stack } from '@mui/material';
-import type { StackProps } from '@mui/material';
+import { Box } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import Empty from '@arcblock/ux/lib/Empty';
 import { useTheme } from '@arcblock/ux/lib/Theme';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
@@ -14,7 +14,7 @@ import { translations } from '../libs/locales';
 import { createPassportSvg } from '../libs/utils';
 import type { User } from '../../@types';
 
-export default function Passport({ user, ...rest }: { user: User } & StackProps) {
+export default function Passport({ user, ...rest }: { user: User } & BoxProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -46,17 +46,31 @@ export default function Passport({ user, ...rest }: { user: User } & StackProps)
   }, [theme?.palette?.primary?.main]);
 
   if (passports.length === 0) {
-    return <Empty>{t('noPassport')}</Empty>;
+    return (
+      <Box>
+        <Empty>{t('noPassport')}</Empty>
+      </Box>
+    );
   }
 
   return (
-    <Stack direction="row" spacing={3} flexWrap="wrap" useFlexGap {...rest}>
+    <Box
+      {...rest}
+      sx={{
+        display: 'grid',
+        gridTemplateColumns: {
+          xs: 'repeat(2, 1fr)',
+          sm: 'repeat(3, 1fr)',
+          md: 'repeat(2, 1fr)',
+        },
+        gap: 2.5,
+        ...rest.sx,
+      }}>
       {passports.map((x) => (
         <PassportItem
           key={x.id}
           passport={x}
           user={user}
-          width={200}
           color={window.blocklet.passportColor}
           createPassportSvg={createPassportSvg}
           title={currentRole && currentRole.role === x.role ? t('currentPassport') : ''}
@@ -71,11 +85,11 @@ export default function Passport({ user, ...rest }: { user: User } & StackProps)
               px: 2,
               display: 'flex',
               justifyContent: 'center',
-              backgroundColor: 'white',
+              backgroundColor: colors.backgroundsBgComponent,
               boxShadow:
                 currentRole && currentRole.role === x.role
                   ? `0px 2px 4px 0px ${activeColor}, 0px 1px 2px -1px ${activeColor}, 0px 0px 0px 1px ${activeColor} !important`
-                  : '0px 2px 4px 0px rgba(2, 7, 19, 0.04), 0px 1px 2px -1px rgba(2, 7, 19, 0.08), 0px 0px 0px 1px rgba(2, 7, 19, 0.08) !important',
+                  : 'unset',
             },
             '.passport-item__body': {
               marginLeft: '0 !important',
@@ -83,6 +97,6 @@ export default function Passport({ user, ...rest }: { user: User } & StackProps)
           }}
         />
       ))}
-    </Stack>
+    </Box>
   );
 }

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

@@ -18,13 +18,15 @@ import type { User } from '../../@types';
 export default function UserBasicInfo({
   user,
   isMyself = true,
+  showFullDid = true,
   switchPassport,
   switchProfile,
   openSettings,
   ...rest
 }: {
   user: User;
-  isMyself: boolean;
+  isMyself?: boolean;
+  showFullDid?: boolean;
   switchPassport: () => void;
   switchProfile: () => void;
   openSettings: () => void;
@@ -59,6 +61,7 @@ export default function UserBasicInfo({
           backgroundColor: '#fff',
           position: 'relative',
           overflow: 'hidden',
+          mb: 1.5,
           ...(isMyself
             ? {
                 cursor: 'pointer',
@@ -86,7 +89,7 @@ export default function UserBasicInfo({
         onClick={isMyself ? switchProfile : noop}
       />
       <Typography
-        variant="h5"
+        variant="h6"
         sx={{
           fontWeight: 'bold',
           display: 'flex',
@@ -106,7 +109,7 @@ export default function UserBasicInfo({
               fontSize: '12px',
               color: colors.textBase,
               borderColor: colors.strokeBorderStrong,
-              backgroundColor: 'white',
+              backgroundColor: 'transparent',
               textTransform: 'capitalize',
               pr: 1,
               pl: 0.5,
@@ -124,7 +127,7 @@ export default function UserBasicInfo({
           />
         ) : null}
       </Typography>
-      <DID did={user.did} copyable={false} />
+      <DID did={user.did} copyable={false} compact={!showFullDid} responsive={!showFullDid} />
       {isMyself ? (
         <IconButton
           sx={{
@@ -133,14 +136,7 @@ export default function UserBasicInfo({
             backgroundColor: 'white',
             border: `1px solid ${colors.strokeBorderBase}`,
             position: 'absolute',
-            bottom: {
-              xs: 'unset',
-              md: 0,
-            },
-            top: {
-              xs: 0,
-              md: 'unset',
-            },
+            top: 0,
             right: 0,
           }}
           disableFocusRipple

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

@@ -1,10 +1,9 @@
 import { useContext } from 'react';
-import { Box, CircularProgress, Paper, Typography } from '@mui/material';
-import type { PaperProps } from '@mui/material';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import { useCreation, useMemoizedFn, useMount, useRequest } from 'ahooks';
 
 import { SessionContext } from '@arcblock/did-connect/lib/Session';
-
 import Tabs from '@arcblock/ux/lib/Tabs';
 import Empty from '@arcblock/ux/lib/Empty';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
@@ -40,7 +39,7 @@ export default function UserCenter({
 }: {
   readonly children: any;
   readonly currentTab: string;
-  readonly contentProps?: PaperProps;
+  readonly contentProps?: BoxProps;
   readonly disableAutoRedirect?: boolean;
   readonly autoPopupSetting?: boolean;
   readonly hideFooter?: boolean;
@@ -176,7 +175,6 @@ export default function UserCenter({
           settings={{
             userCenterTabs,
           }}
-          sx={{ mt: -2 }}
           onSave={async () => {
             await privacyState.runAsync();
             return privacyState.data;
@@ -212,104 +210,138 @@ export default function UserCenter({
     }
 
     return (
-      <Box
-        sx={{
-          maxWidth: 880,
-          margin: '0 auto',
-          p: 3,
-          display: 'flex',
-          gap: 2.5,
-          flexDirection: 'column',
-        }}>
-        <UserBasicInfo
-          isMyself={isMyself}
-          switchPassport={session.switchPassport}
-          switchProfile={session.switchProfile}
-          openSettings={openSettings}
-          user={userState.data}
-        />
-        {userCenterTabs.length > 0 && currentTab ? (
-          <Box
-            sx={{
-              gridArea: 'tabs',
-              overflow: 'auto',
-              padding: '1px',
-            }}>
-            <Tabs variant="card" tabs={userCenterTabs} current={currentTab} onChange={handleChangeTab} />
-            {!privacyState.data || privacyState.loading ? (
-              <Box
-                sx={{
-                  height: '100%',
-                  minWidth: '160px',
-                  minHeight: '160px',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                }}>
-                <CircularProgress sx={{ color: colors.primary100 }} />
-              </Box>
-            ) : (
-              <>
-                {currentActiveTab?.protected && !isMyself ? (
-                  <Paper variant="outlined" sx={{ mt: 2, borderRadius: 2, p: 2 }}>
-                    <Empty>{t('underProtected')}</Empty>
-                  </Paper>
-                ) : (
-                  <>
-                    {children && (
-                      <Paper
-                        {...contentProps}
-                        variant="outlined"
-                        sx={{ mt: 2, borderRadius: 2, p: 2, ...contentProps?.sx }}>
-                        {children}
-                      </Paper>
-                    )}
-                  </>
-                )}
-              </>
-            )}
-          </Box>
-        ) : null}
-        {!isMyself && userCenterTabs.length === 0 ? (
-          <Box
+      <>
+        <Box sx={{ flex: 1 }}>
+          {userState?.data?.fullName ? (
+            <Typography
+              variant="h4"
+              sx={{
+                py: 1.5,
+                fontWeight: 700,
+                display: {
+                  xs: 'none',
+                  md: 'block',
+                },
+              }}>
+              {userState.data.fullName}
+            </Typography>
+          ) : null}
+          <UserBasicInfo
+            isMyself={isMyself}
+            switchPassport={session.switchPassport}
+            switchProfile={session.switchProfile}
+            openSettings={openSettings}
+            user={userState.data}
+            showFullDid={false}
             sx={{
-              gridArea: 'tabs',
-              overflow: 'auto',
-              padding: '1px',
-            }}>
-            <Paper
-              variant="outlined"
+              display: {
+                md: 'none',
+                xs: 'block',
+              },
+              mb: 1.5,
+            }}
+          />
+          {userCenterTabs.length > 0 && currentTab ? (
+            <Box
               sx={{
-                borderRadius: 2,
-                p: 2,
+                overflow: 'auto',
+                padding: '1px',
               }}>
-              <Empty>{t('emptyContent')}</Empty>
-            </Paper>
-          </Box>
-        ) : null}
-        {isMyself ? (
-          <>
-            <Box>
-              <Typography variant="h6" sx={{ fontWeight: 600, mb: 1.5 }}>
-                {t('passport')}
-              </Typography>
-              <Passport user={userState.data} />
-            </Box>
-            <Box>
-              <Typography variant="h6" sx={{ fontWeight: 600, mb: 1.5 }}>
-                {t('userInfo')}
-              </Typography>
-              <UserInfo
-                user={userState.data}
-                sx={{
-                  padding: 3,
-                  borderRadius: 3,
-                }}
+              <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>
+              ) : (
+                <>
+                  {currentActiveTab?.protected && !isMyself ? (
+                    <Box>
+                      <Empty>{t('underProtected')}</Empty>
+                    </Box>
+                  ) : (
+                    <>{children && <Box {...contentProps}>{children}</Box>}</>
+                  )}
+                </>
+              )}
             </Box>
-          </>
-        ) : null}
-      </Box>
+          ) : null}
+          {userCenterTabs.length === 0 ? (
+            <Box
+              sx={{
+                display: {
+                  xs: isMyself ? 'none' : 'block',
+                  md: 'block',
+                },
+                py: 3,
+              }}>
+              <Empty>{t('emptyContent')}</Empty>
+            </Box>
+          ) : null}
+        </Box>
+        <Box
+          sx={{
+            display: {
+              xs: 'none',
+              md: 'block',
+            },
+            width: '1px',
+            my: -3,
+            backgroundColor: colors.strokeSep,
+          }}
+        />
+        <Box
+          sx={{
+            width: {
+              sx: '100%',
+              md: 400,
+            },
+            maxWidth: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2.5,
+          }}>
+          <UserBasicInfo
+            isMyself={isMyself}
+            switchPassport={session.switchPassport}
+            switchProfile={session.switchProfile}
+            openSettings={openSettings}
+            user={userState.data}
+            sx={{
+              display: {
+                xs: 'none',
+                md: 'block',
+              },
+            }}
+          />
+
+          {isMyself ? (
+            <>
+              <Box>
+                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('myInfo')}</Typography>
+                <UserInfo user={userState.data} />
+              </Box>
+              <Box>
+                <Typography sx={{ fontWeight: 600, mb: 1.5 }}>{t('passport')}</Typography>
+                <Passport user={userState.data} />
+              </Box>
+            </>
+          ) : null}
+        </Box>
+      </>
     );
   }, [userState, userCenterTabs]);
 
@@ -326,12 +358,26 @@ export default function UserCenter({
         display: 'flex',
         flexDirection: 'column',
       }}>
-      <Header {...headerProps} />
-      <Box flex={1}>
+      <Header bordered {...headerProps} />
+      <Box
+        flex={1}
+        sx={{
+          width: '100%',
+          maxWidth: 1200,
+          margin: '0 auto',
+          p: 3,
+          display: 'flex',
+          alignItems: 'stretch',
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+          gap: 2.5,
+        }}>
         {content}
         {confirmHolder}
       </Box>
-      {hideFooter ? null : <Footer {...footerProps} />}
+      {hideFooter ? null : <Footer bordered {...footerProps} />}
     </Box>
   );
 }

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

@@ -14,35 +14,27 @@ export default function UserInfoItem({ data, ...rest }: TUserInfoItemProps & Box
     <Box
       {...rest}
       sx={{
-        display: 'grid',
-        gridTemplateColumns: 'auto 1fr',
-        gridTemplateAreas: `"icon title" ". content"`,
+        display: 'flex',
         alignItems: 'center',
-        rowGap: 0.75,
-        columnGap: 1,
+        justifyContent: 'space-between',
         ...rest.sx,
       }}>
-      <Box
+      <Typography
         sx={{
-          gridArea: 'icon',
           display: 'flex',
           alignItems: 'center',
-        }}>
-        {data.icon}
-      </Box>
-      <Typography
-        sx={{
           color: colors.textBase,
-          gridArea: 'title',
           fontSize: '14px',
+          gap: 1,
+          fontWeight: 500,
         }}>
+        {data.icon}
         {data.title}
       </Typography>
       <Typography
         sx={{
           color: colors.textSubtitle,
           whiteSpace: 'pre-wrap',
-          gridArea: 'content',
           fontSize: '14px',
         }}>
         {data.content}