@blocklet/ui-react 2.13.33 → 2.13.35

package/lib/UserCenter/components/config-profile.js

@@ -70,7 +70,7 @@ export default function ConfigProfile({ user, onSave }) {
               size: "small",
               IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
               sx: {
-                minWidth: 300,
+                minWidth: 200,
                 "&:hover": {
                   "fieldset.MuiOutlinedInput-notchedOutline": {
                     borderColor: "divider"

package/lib/UserCenter/components/danger-zone.js

@@ -100,7 +100,8 @@ export default function DangerZone() {
           display: "flex",
           alignItems: "center",
           gap: 1,
-          justifyContent: "space-between"
+          justifyContent: "space-between",
+          flexWrap: "wrap"
         },
         children: [
           /* @__PURE__ */ jsxs(Box, { children: [

package/lib/UserCenter/components/editable-field.js

@@ -203,6 +203,7 @@ function EditableField({
                       whiteSpace: "pre-wrap",
                       ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
                     },
+                    component: "div",
                     onMouseEnter: handleMouseEnter,
                     onMouseLeave: handleMouseLeave,
                     children: renderValue ? renderValue(value) : value

package/lib/UserCenter/components/notification.d.ts

@@ -1,4 +1,5 @@
 import { User } from '../../@types';
-export default function Notification({ user }: {
+export default function Notification({ user, isMobile }: {
     user: User;
+    isMobile: boolean;
 }): import("react").JSX.Element;

package/lib/UserCenter/components/notification.js

@@ -9,6 +9,7 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { getWalletDid } from "@arcblock/ux/lib/SessionUser/libs/utils";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import DID from "@arcblock/ux/lib/DID";
 import { translations } from "../libs/locales.js";
 import WebhookItem from "./webhook-item.js";
 import { formatAxiosError } from "../libs/utils.js";
@@ -17,7 +18,8 @@ function NotificationItem({
   title,
   description,
   value,
-  onChange
+  onChange,
+  isMobile
 }) {
   return /* @__PURE__ */ jsx(
     Switch,
@@ -31,9 +33,10 @@ function NotificationItem({
             sx: {
               fontSize: 14,
               display: "flex",
-              flexFlow: "wrap",
+              flexFlow: isMobile ? "wrap" : "nowrap",
               columnGap: 1,
-              flex: 1
+              flex: 1,
+              whiteSpace: "nowrap"
             },
             children: [
               title,
@@ -47,7 +50,7 @@ function NotificationItem({
     }
   );
 }
-export default function Notification({ user }) {
+export default function Notification({ user, isMobile }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -175,15 +178,29 @@ export default function Notification({ user }) {
             NotificationItem,
             {
               value: notifications.wallet,
+              isMobile,
               title: t("walletNotification"),
               onChange: (event) => handleChangeSwitch("wallet", event.target.checked),
-              description: getWalletDid(user) && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: getWalletDid(user) })
+              description: getWalletDid(user) && /* @__PURE__ */ jsx(
+                DID,
+                {
+                  did: getWalletDid(user),
+                  showQrcode: false,
+                  showAvatar: !isMobile,
+                  copyable: true,
+                  compact: true,
+                  responsive: true,
+                  locale,
+                  startChars: isMobile ? 2 : 6
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx(
             NotificationItem,
             {
               value: notifications.email,
+              isMobile,
               onChange: (event) => handleChangeSwitch("email", event.target.checked),
               title: t("emailNotification"),
               description: user?.email && /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", fontSize: 13, children: user?.email })
@@ -192,6 +209,7 @@ export default function Notification({ user }) {
           /* @__PURE__ */ jsx(
             NotificationItem,
             {
+              isMobile,
               value: notifications.push,
               title: t("pushNotification"),
               onChange: (event) => handleChangeSwitch("push", event.target.checked)

package/lib/UserCenter/components/settings.d.ts

@@ -1,9 +1,10 @@
 import type { BoxProps } from '@mui/material';
 import { User, UserCenterTab } from '../../@types';
-export default function Settings({ user, settings, onSave, ...rest }: {
+export default function Settings({ user, settings, onSave, isMobile, ...rest }: {
     user: User;
     onSave: (type: 'privacy' | 'profile') => void;
     settings: {
         userCenterTabs: UserCenterTab[];
     };
+    isMobile: boolean;
 } & BoxProps): import("react").JSX.Element;

package/lib/UserCenter/components/settings.js

@@ -18,6 +18,7 @@ export default function Settings({
   user,
   settings,
   onSave,
+  isMobile,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -47,7 +48,7 @@ export default function Settings({
       {
         label: t("notificationManagement"),
         value: "notification",
-        content: /* @__PURE__ */ jsx(Notification, { user })
+        content: /* @__PURE__ */ jsx(Notification, { user, isMobile })
       },
       {
         label: t("thirdPartyLogin.title"),
@@ -82,7 +83,7 @@ export default function Settings({
         }
       }
     ].filter(Boolean);
-  }, [user, privacyConfigList]);
+  }, [user, privacyConfigList, isMobile]);
   useEffect(() => {
     const id = window.location.hash.slice(1);
     if (id) {

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

@@ -238,7 +238,8 @@ export default function UserCenter({
             await session.refresh();
           }
           return null;
-        }
+        },
+        isMobile
       }
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
@@ -452,7 +453,7 @@ export default function UserCenter({
                         fontWeight: 400
                       }
                     },
-                    ".MuiTabs-scroller": {
+                    ".MuiTabs-root": {
                       "&:after": {
                         content: '""',
                         display: "block",

package/lib/UserSessions/components/user-sessions.d.ts

@@ -1,15 +1,16 @@
 import { UserSession } from '@blocklet/js-sdk';
 import { User } from '../../@types';
-export default function UserSessions({ user, showAction, showUser, getUserSessions, }: {
+export default function UserSessions({ user, showAction, showUser, getUserSessions, showOffline, }: {
     readonly user: User & {
         userSessions?: any[];
     };
     readonly showAction?: boolean;
     readonly showUser?: boolean;
+    readonly showOffline?: boolean;
     readonly getUserSessions: (params: {
         page: number;
         pageSize: number;
-        status?: 'online' | 'expired';
+        status?: 'online' | 'expired' | 'offline';
     }) => Promise<{
         paging: {
             total: number;

package/lib/UserSessions/components/user-sessions.js

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Datatable from "@arcblock/ux/lib/Datatable";
-import { useCreation, useMemoizedFn, useReactive, useRequest } from "ahooks";
+import { useCreation, useMemoizedFn, useMount, useReactive, useRequest } from "ahooks";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import RelativeTime from "@arcblock/ux/lib/RelativeTime";
@@ -20,6 +20,7 @@ import {
   useMediaQuery
 } from "@mui/material";
 import { memo, useEffect } from "react";
+import { mergeSx } from "@arcblock/ux/lib/Util/style";
 import useMobile from "../../hooks/use-mobile.js";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
@@ -33,6 +34,11 @@ const parseUa = (ua) => {
   const result = parser.getResult();
   return result;
 };
+const textRightStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  textAlign: "right"
+};
 const queue = new PQueue({ concurrency: 1 });
 const UserSessionIp = memo(({ userSession, isMobile = false }) => {
   const currentState = useReactive({
@@ -49,19 +55,32 @@ const UserSessionIp = memo(({ userSession, isMobile = false }) => {
       }
     });
   }, [currentState, userSession.lastLoginIp]);
-  return /* @__PURE__ */ jsx(Box, { ...isMobile && { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1 }, children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
-    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Typography, { children: userSession.lastLoginIp || t("unknown") }),
-    currentState.loading ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit" }) }) : null
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...isMobile && {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: 1,
+        flexWrap: "wrap"
+      },
+      children: currentState.ipRegion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: currentState.ipRegion }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", children: userSession.lastLoginIp || t("unknown") })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Typography, { children: userSession.lastLoginIp || t("unknown") }),
+        currentState.loading ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", sx: { textAlign: "center" }, children: /* @__PURE__ */ jsx(CircularProgress, { size: 12, color: "inherit" }) }) : null
+      ] })
+    }
+  );
 });
 export default function UserSessions({
   user,
   showAction = true,
   showUser = true,
-  getUserSessions
+  getUserSessions,
+  showOffline = false
 }) {
   const filterParams = useReactive({
     status: "online",
@@ -70,7 +89,8 @@ export default function UserSessions({
   });
   const userSessionsCountMap = useReactive({
     online: 0,
-    expired: 0
+    expired: 0,
+    offline: 0
   });
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
@@ -93,14 +113,19 @@ export default function UserSessions({
       list: result?.list || []
     };
   });
-  useRequest(async () => {
-    const result = await getUserSessions({
+  useMount(async () => {
+    const expiredResult = await getUserSessions({
       page: 1,
       pageSize: 1,
       status: "expired"
     });
-    userSessionsCountMap.expired = result?.paging?.total || 0;
-    return result?.paging?.total || 0;
+    userSessionsCountMap.expired = expiredResult?.paging?.total || 0;
+    const offlineResult = await getUserSessions({
+      page: 1,
+      pageSize: 1,
+      status: "offline"
+    });
+    userSessionsCountMap.offline = offlineResult?.paging?.total || 0;
   });
   const pageState = useRequest(getData, {
     refreshDeps: [filterParams.status, filterParams.page, filterParams.pageSize]
@@ -115,6 +140,9 @@ export default function UserSessions({
     }
     return userSessionsCountMap[status] === 0;
   }, [safeData, currentVisitorId]);
+  const mergeStyle = useCreation(() => {
+    return mergeSx({}, isMobile ? textRightStyle : {});
+  }, [isMobile]);
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t("logoutThisSession"),
@@ -127,7 +155,6 @@ export default function UserSessions({
       onConfirm: async () => {
         await client.user.logout({
           visitorId,
-          // @ts-expect-error js-sdk 1.16.43 中会包含这个参数
           includeFederated: true
         });
         pageState.refresh();
@@ -152,7 +179,6 @@ export default function UserSessions({
         await client.user.logout({
           status: filterParams.status,
           visitorId: currentVisitorId,
-          // @ts-expect-error js-sdk 1.16.43 中会包含这个参数
           includeFederated: true
         });
         pageState.refresh();
@@ -210,8 +236,8 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
+          const result = parseUa(x?.ua);
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: [result.os?.name, result.os?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -221,8 +247,8 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
+          const result = parseUa(x?.ua);
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: [result.browser?.name, result.browser?.version].filter(Boolean).join("/") || t("unknown") });
         }
       }
     },
@@ -232,7 +258,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.extra?.walletOS || t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.extra?.walletOS || t("unknown") });
         }
       }
     },
@@ -242,7 +268,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: { minWidth: 150, maxWidth: 250, ...isMobile && { textAlign: "right" } }, children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeSx({ minWidth: 150, maxWidth: 250 }, isMobile ? textRightStyle : {}), children: /* @__PURE__ */ jsx(UserSessionInfo, { sessionUser: x.user, user }) });
         }
       }
     },
@@ -252,17 +278,17 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown") });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.createdAt ? /* @__PURE__ */ jsx(RelativeTime, { value: x.createdAt, relativeRange: 3 * 86400 * 1e3, locale }) : t("unknown") });
         }
       }
     },
-    {
+    !showOffline && {
       label: t("updatedAt"),
       name: "updatedAt",
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale }) });
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: x.status === "expired" ? t("expired") : /* @__PURE__ */ jsx(RelativeTime, { value: x.updatedAt, relativeRange: 3 * 86400 * 1e3, locale }) });
         }
       }
     },
@@ -282,7 +308,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex) => {
           const x = safeData[rawIndex];
-          return /* @__PURE__ */ jsx(Box, { sx: isMobile ? { textAlign: "right" } : {}, children: /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx(Box, { sx: mergeStyle, children: /* @__PURE__ */ jsx(
             Button,
             {
               sx: {
@@ -400,7 +426,22 @@ export default function UserSessions({
                         ] })
                       ] })
                     }
-                  )
+                  ),
+                  showOffline ? /* @__PURE__ */ jsx(
+                    FormControlLabel,
+                    {
+                      value: "offline",
+                      control: /* @__PURE__ */ jsx(Radio, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: filterParams.status === "offline" }),
+                      label: /* @__PURE__ */ jsxs(Typography, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("offline"),
+                        /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                          "(",
+                          userSessionsCountMap.offline,
+                          ")"
+                        ] })
+                      ] })
+                    }
+                  ) : null
                 ]
               }
             ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.13.33",
+  "version": "2.13.35",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,11 +34,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.43",
     "@abtnode/util": "^1.16.43",
-    "@arcblock/bridge": "^2.13.33",
-    "@arcblock/react-hooks": "^2.13.33",
-    "@arcblock/ws": "^1.20.8",
+    "@arcblock/bridge": "^2.13.35",
+    "@arcblock/react-hooks": "^2.13.35",
+    "@arcblock/ws": "^1.20.10",
     "@blocklet/constant": "^1.16.43",
-    "@blocklet/did-space-react": "^1.0.51",
+    "@blocklet/did-space-react": "^1.0.53",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify-icons/tabler": "^1.2.95",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "b835dedcd8f2e473082e4c1aee0a8cb3ed0e78ec"
+  "gitHead": "0637c76e4c1036802b2fef273f785cc9bf00edd0"
 }

package/src/UserCenter/components/config-profile.tsx

@@ -69,7 +69,7 @@ export default function ConfigProfile({ user, onSave }: { user: User; onSave: (t
           // eslint-disable-next-line react/no-unstable-nested-components
           IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
           sx={{
-            minWidth: 300,
+            minWidth: 200,
             '&:hover': {
               'fieldset.MuiOutlinedInput-notchedOutline': {
                 borderColor: 'divider',

package/src/UserCenter/components/danger-zone.tsx

@@ -110,6 +110,7 @@ export default function DangerZone() {
             alignItems: 'center',
             gap: 1,
             justifyContent: 'space-between',
+            flexWrap: 'wrap',
           }}>
           <Box>
             <Typography

package/src/UserCenter/components/editable-field.tsx

@@ -230,6 +230,7 @@ function EditableField({
                 whiteSpace: 'pre-wrap',
                 ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
               }}
+              component="div"
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}>
               {renderValue ? renderValue(value) : value}

package/src/UserCenter/components/notification.tsx

@@ -10,6 +10,7 @@ import { getWalletDid } from '@arcblock/ux/lib/SessionUser/libs/utils';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AxiosError } from 'axios';
+import DID from '@arcblock/ux/lib/DID';
 
 import { translations } from '../libs/locales';
 import WebhookItem from './webhook-item';
@@ -22,11 +23,13 @@ function NotificationItem({
   description,
   value,
   onChange,
+  isMobile,
 }: {
   title?: string;
   description?: React.ReactNode;
   value: boolean;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  isMobile: boolean;
 }) {
   return (
     <Switch
@@ -38,9 +41,10 @@ function NotificationItem({
             sx={{
               fontSize: 14,
               display: 'flex',
-              flexFlow: 'wrap',
+              flexFlow: isMobile ? 'wrap' : 'nowrap',
               columnGap: 1,
               flex: 1,
+              whiteSpace: 'nowrap',
             }}>
             {title}
             {description}
@@ -53,7 +57,7 @@ function NotificationItem({
   );
 }
 
-export default function Notification({ user }: { user: User }) {
+export default function Notification({ user, isMobile }: { user: User; isMobile: boolean }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -184,18 +188,27 @@ export default function Notification({ user }: { user: User }) {
         }}>
         <NotificationItem
           value={notifications.wallet}
+          isMobile={isMobile}
           title={t('walletNotification')}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('wallet', event.target.checked)}
           description={
             getWalletDid(user) && (
-              <Typography component="span" color="text.secondary" fontSize={13}>
-                {getWalletDid(user)}
-              </Typography>
+              <DID
+                did={getWalletDid(user)}
+                showQrcode={false}
+                showAvatar={!isMobile}
+                copyable
+                compact
+                responsive
+                locale={locale}
+                startChars={isMobile ? 2 : 6}
+              />
             )
           }
         />
         <NotificationItem
           value={notifications.email}
+          isMobile={isMobile}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('email', event.target.checked)}
           title={t('emailNotification')}
           description={
@@ -207,6 +220,7 @@ export default function Notification({ user }: { user: User }) {
           }
         />
         <NotificationItem
+          isMobile={isMobile}
           value={notifications.push}
           title={t('pushNotification')}
           onChange={(event: ChangeEvent<HTMLInputElement>) => handleChangeSwitch('push', event.target.checked)}

package/src/UserCenter/components/settings.tsx

@@ -20,6 +20,7 @@ export default function Settings({
   user,
   settings,
   onSave,
+  isMobile,
   ...rest
 }: {
   user: User;
@@ -27,6 +28,7 @@ export default function Settings({
   settings: {
     userCenterTabs: UserCenterTab[];
   };
+  isMobile: boolean;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const browser = useBrowser();
@@ -57,7 +59,7 @@ export default function Settings({
       {
         label: t('notificationManagement'),
         value: 'notification',
-        content: <Notification user={user} />,
+        content: <Notification user={user} isMobile={isMobile} />,
       },
       {
         label: t('thirdPartyLogin.title'),
@@ -91,7 +93,7 @@ export default function Settings({
         },
       },
     ].filter(Boolean);
-  }, [user, privacyConfigList]);
+  }, [user, privacyConfigList, isMobile]);
 
   // 支持 hash 锚点定位
   useEffect(() => {

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

@@ -286,6 +286,7 @@ export default function UserCenter({
           }
           return null;
         }}
+        isMobile={isMobile}
       />
     );
   }, [userState.data, userCenterTabs, privacyState.data, privacyState.runAsync]);
@@ -533,7 +534,7 @@ export default function UserCenter({
                       fontWeight: 400,
                     },
                   },
-                  '.MuiTabs-scroller': {
+                  '.MuiTabs-root': {
                     '&:after': {
                       content: '""',
                       display: 'block',

package/src/UserSessions/components/user-sessions.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable react/no-unstable-nested-components */
 import Datatable from '@arcblock/ux/lib/Datatable';
-import { useCreation, useMemoizedFn, useReactive, useRequest } from 'ahooks';
+import { useCreation, useMemoizedFn, useMount, useReactive, useRequest } from 'ahooks';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import RelativeTime from '@arcblock/ux/lib/RelativeTime';
@@ -22,6 +22,7 @@ import {
 } from '@mui/material';
 import { memo, ReactElement, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
+import { mergeSx } from '@arcblock/ux/lib/Util/style';
 
 import useMobile from '../../hooks/use-mobile';
 import UserSessionInfo from './user-session-info';
@@ -39,6 +40,12 @@ const parseUa = (ua: string) => {
   return result;
 };
 
+const textRightStyle = {
+  display: 'flex',
+  justifyContent: 'flex-end',
+  textAlign: 'right',
+};
+
 const queue = new PQueue({ concurrency: 1 });
 
 const UserSessionIp = memo(({ userSession, isMobile = false }: { userSession: any; isMobile: boolean }) => {
@@ -60,7 +67,14 @@ const UserSessionIp = memo(({ userSession, isMobile = false }: { userSession: an
   }, [currentState, userSession.lastLoginIp]);
 
   return (
-    <Box {...(isMobile && { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 1 })}>
+    <Box
+      {...(isMobile && {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: 1,
+        flexWrap: 'wrap',
+      })}>
       {currentState.ipRegion ? (
         <>
           <Typography variant="body2">{currentState.ipRegion}</Typography>
@@ -87,13 +101,19 @@ export default function UserSessions({
   showAction = true,
   showUser = true,
   getUserSessions,
+  showOffline = false,
 }: {
   readonly user: User & {
     userSessions?: any[];
   };
   readonly showAction?: boolean;
   readonly showUser?: boolean;
-  readonly getUserSessions: (params: { page: number; pageSize: number; status?: 'online' | 'expired' }) => Promise<{
+  readonly showOffline?: boolean;
+  readonly getUserSessions: (params: {
+    page: number;
+    pageSize: number;
+    status?: 'online' | 'expired' | 'offline';
+  }) => Promise<{
     paging: {
       total: number;
     };
@@ -108,6 +128,7 @@ export default function UserSessions({
   const userSessionsCountMap = useReactive({
     online: 0,
     expired: 0,
+    offline: 0,
   });
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
@@ -121,7 +142,7 @@ export default function UserSessions({
     const result = await getUserSessions({
       page: filterParams.page,
       pageSize: filterParams.pageSize,
-      status: filterParams.status as 'online' | 'expired',
+      status: filterParams.status as 'online' | 'expired' | 'offline',
     });
 
     const total = result?.paging?.total || 0;
@@ -133,14 +154,20 @@ export default function UserSessions({
     };
   });
 
-  useRequest(async () => {
-    const result = await getUserSessions({
+  useMount(async () => {
+    const expiredResult = await getUserSessions({
       page: 1,
       pageSize: 1,
       status: 'expired',
     });
-    userSessionsCountMap.expired = result?.paging?.total || 0;
-    return result?.paging?.total || 0;
+    userSessionsCountMap.expired = expiredResult?.paging?.total || 0;
+
+    const offlineResult = await getUserSessions({
+      page: 1,
+      pageSize: 1,
+      status: 'offline',
+    });
+    userSessionsCountMap.offline = offlineResult?.paging?.total || 0;
   });
 
   const pageState = useRequest(getData, {
@@ -160,6 +187,10 @@ export default function UserSessions({
     return userSessionsCountMap[status] === 0;
   }, [safeData, currentVisitorId]);
 
+  const mergeStyle = useCreation(() => {
+    return mergeSx({}, isMobile ? textRightStyle : {});
+  }, [isMobile]);
+
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t('logoutThisSession'),
@@ -172,7 +203,6 @@ export default function UserSessions({
       onConfirm: async () => {
         await client.user.logout({
           visitorId,
-          // @ts-expect-error js-sdk 1.16.43 中会包含这个参数
           includeFederated: true,
         });
         pageState.refresh();
@@ -197,7 +227,6 @@ export default function UserSessions({
         await client.user.logout({
           status: filterParams.status,
           visitorId: currentVisitorId as string,
-          // @ts-expect-error js-sdk 1.16.43 中会包含这个参数
           includeFederated: true,
         });
         pageState.refresh();
@@ -249,11 +278,9 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
+          const result = parseUa(x?.ua);
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
-              {[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}
-            </Box>
+            <Box sx={mergeStyle}>{[result.os?.name, result.os?.version].filter(Boolean).join('/') || t('unknown')}</Box>
           );
         },
       },
@@ -264,9 +291,9 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          const result = parseUa(x.ua);
+          const result = parseUa(x?.ua);
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {[result.browser?.name, result.browser?.version].filter(Boolean).join('/') || t('unknown')}
             </Box>
           );
@@ -279,7 +306,7 @@ export default function UserSessions({
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
-          return <Box sx={isMobile ? { textAlign: 'right' } : {}}>{x.extra?.walletOS || t('unknown')}</Box>;
+          return <Box sx={mergeStyle}>{x.extra?.walletOS || t('unknown')}</Box>;
         },
       },
     },
@@ -290,7 +317,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={{ minWidth: 150, maxWidth: 250, ...(isMobile && { textAlign: 'right' }) }}>
+            <Box sx={mergeSx({ minWidth: 150, maxWidth: 250 }, isMobile ? textRightStyle : {})}>
               <UserSessionInfo sessionUser={x.user} user={user} />
             </Box>
           );
@@ -304,7 +331,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {x.createdAt ? (
                 <RelativeTime value={x.createdAt} relativeRange={3 * 86400 * 1000} locale={locale} />
               ) : (
@@ -315,14 +342,14 @@ export default function UserSessions({
         },
       },
     },
-    {
+    !showOffline && {
       label: t('updatedAt'),
       name: 'updatedAt',
       options: {
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               {x.status === 'expired' ? (
                 t('expired')
               ) : (
@@ -350,7 +377,7 @@ export default function UserSessions({
         customBodyRenderLite: (rawIndex: number) => {
           const x = safeData[rawIndex];
           return (
-            <Box sx={isMobile ? { textAlign: 'right' } : {}}>
+            <Box sx={mergeStyle}>
               <Button
                 sx={{
                   whiteSpace: 'nowrap',
@@ -468,6 +495,22 @@ export default function UserSessions({
                 </Typography>
               }
             />
+            {showOffline ? (
+              <FormControlLabel
+                value="offline"
+                control={
+                  <Radio size="small" sx={{ lineHeight: 1, fontSize: 0 }} checked={filterParams.status === 'offline'} />
+                }
+                label={
+                  <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+                    {t('offline')}
+                    <Typography component="span" sx={{ ml: 0.5, color: 'text.secondary' }}>
+                      ({userSessionsCountMap.offline})
+                    </Typography>
+                  </Typography>
+                }
+              />
+            ) : null}
           </RadioGroup>
         }
         onChange={(state) => {