@blocklet/ui-react 2.9.22 → 2.9.24

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

@@ -1,11 +1,12 @@
-import { Paper } from '@mui/material';
-import type { PaperProps } from '@mui/material';
+import { Box } from '@mui/material';
+import type { BoxProps } from '@mui/material';
 import { Icon } from '@iconify/react';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import MailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
 import ScheduleOutlineRoundedIcon from '@iconify-icons/material-symbols/schedule-outline-rounded';
 import MoreTimeRoundedIcon from '@iconify-icons/material-symbols/more-time-rounded';
 import CaptivePortalRoundedIcon from '@iconify-icons/material-symbols/captive-portal-rounded';
+import SettingsInputAntennaRoundedIcon from '@iconify-icons/material-symbols/settings-input-antenna-rounded';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -19,7 +20,7 @@ export default function UserInfo({
   ...rest
 }: {
   user: User;
-} & PaperProps) {
+} & BoxProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -41,21 +42,18 @@ export default function UserInfo({
   });
   userInfoListData.push({
     icon: <Icon fontSize={16} icon={ScheduleOutlineRoundedIcon} />,
-    title: t('lastLogin'),
-    content: (
-      <>
-        {user?.lastLoginAt || user?.lastLoginIp ? (
-          <>
-            {user?.lastLoginAt ? <RelativeTime locale={locale} value={user?.lastLoginAt} /> : null}
-            {user?.lastLoginAt && user?.lastLoginIp ? <br /> : null}
-            {user?.lastLoginIp}
-          </>
-        ) : (
-          t('unknown')
-        )}
-      </>
+    title: t('lastLoginAt'),
+    content: user?.lastLoginAt ? (
+      <RelativeTime locale={locale} value={user?.lastLoginAt} relativeRange={3 * 86400 * 1000} />
+    ) : (
+      t('unknown')
     ),
   });
+  userInfoListData.push({
+    icon: <Icon fontSize={16} icon={SettingsInputAntennaRoundedIcon} />,
+    title: t('lastLoginIp'),
+    content: user?.lastLoginIp || t('unknown'),
+  });
   userInfoListData.push({
     icon: <Icon fontSize={16} icon={MoreTimeRoundedIcon} />,
     title: t('createdAt'),
@@ -68,22 +66,17 @@ export default function UserInfo({
   });
 
   return (
-    <Paper
-      variant="outlined"
+    <Box
       {...rest}
       sx={{
         display: 'flex',
-        flexDirection: {
-          xs: 'column',
-          md: 'row',
-        },
-        alignItems: 'flex-start',
-        gap: 3,
+        flexDirection: 'column',
+        gap: 1.5,
         ...rest?.sx,
       }}>
       {userInfoListData.map((item) => (
         <UserInfoItem key={item.title} data={item} sx={{ flex: 1 }} />
       ))}
-    </Paper>
+    </Box>
   );
 }

package/src/UserCenter/libs/locales.ts

@@ -6,6 +6,8 @@ export const translations = {
     notification: '通知',
     email: '邮箱地址',
     lastLogin: '上次登录',
+    lastLoginAt: '上次登录时间',
+    lastLoginIp: '上次登录地址',
     createdAt: '创建时间',
     registerFrom: '注册来源',
     unknown: '未知',
@@ -23,7 +25,7 @@ export const translations = {
     noUserFound: '未找到指定的用户',
     notificationManagement: '通知管理',
     privacyManagement: '隐私管理',
-    storageManagement: "存储管理",
+    storageManagement: '存储管理',
     webhook: {
       url: '自定义URL',
       slack: 'Slack',
@@ -36,6 +38,7 @@ export const translations = {
     currentPassport: '当前使用的通行证',
     switchProfile: '切换',
     userInfo: '个人信息',
+    myInfo: '我的信息',
   },
   en: {
     settings: 'Settings',
@@ -44,6 +47,8 @@ export const translations = {
     notification: 'Notification',
     email: 'Email',
     lastLogin: 'Last Login & IP',
+    lastLoginAt: 'Last Login',
+    lastLoginIp: 'Last IP',
     createdAt: 'Created At',
     registerFrom: 'Register From',
     unknown: 'Unknown',
@@ -74,5 +79,6 @@ export const translations = {
     currentPassport: 'Passport currently in use',
     switchProfile: 'Switch',
     userInfo: 'User Info',
+    myInfo: 'My Info',
   },
 };