@blocklet/ui-react 2.12.64 → 2.12.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.64",
+  "version": "2.12.71",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,11 +34,11 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.41",
     "@abtnode/util": "^1.16.41",
-    "@arcblock/bridge": "^2.12.64",
-    "@arcblock/react-hooks": "^2.12.64",
+    "@arcblock/bridge": "^2.12.71",
+    "@arcblock/react-hooks": "^2.12.71",
     "@arcblock/ws": "^1.19.19",
     "@blocklet/constant": "^1.16.42-beta-20250408-072924-4b6a877a",
-    "@blocklet/did-space-react": "^1.0.43",
+    "@blocklet/did-space-react": "^1.0.45",
     "@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": "535a7ce33f7325f00aab13b8812123cafc5788c7"
+  "gitHead": "12e8ad0b88c0d3e9ee9cbd84634e0778044cf494"
 }

package/src/Footer/index.jsx

@@ -1,13 +1,12 @@
 import { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@arcblock/ux/lib/Theme';
+import { styled, useTheme, deepmerge, ThemeProvider } 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';
@@ -19,6 +18,7 @@ import withHideWhenEmbed from '../libs/with-hide-when-embed';
  */
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
+  const parentTheme = useTheme();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -28,12 +28,14 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
       return blocklet;
     }
   }, [meta]);
+  const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
 
   if (!formattedBlocklet.appName) {
     return null;
   }
 
-  const { appLogo, appLogoRect, appName, appDescription, description, theme, copyright } = formattedBlocklet;
+  const { appLogo, appLogoRect, appName, appDescription, description, copyright } = formattedBlocklet;
+  const $bgColor = mergeTheme.palette.background.default;
 
   const localized = {
     footerNav: getLocalizedNavigation(formattedBlocklet?.navigation?.footer, locale) || [],
@@ -62,14 +64,9 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
   };
 
   return (
-    <OverridableThemeProvider theme={themeOverrides}>
-      <StyledInternalFooter
-        {...props}
-        {...omit(rest, ['bordered'])}
-        $bordered={rest?.bordered}
-        $bgcolor={theme?.background?.footer}
-      />
-    </OverridableThemeProvider>
+    <ThemeProvider theme={mergeTheme}>
+      <StyledInternalFooter {...props} {...omit(rest, ['bordered'])} $bordered={rest?.bordered} $bgcolor={$bgColor} />
+    </ThemeProvider>
   );
 }
 
@@ -88,8 +85,6 @@ const StyledInternalFooter = styled(InternalFooter)`
   ${({ $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,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 `;
 
 export default withErrorBoundary(withHideWhenEmbed(Footer), {

package/src/Footer/links.jsx

@@ -167,7 +167,7 @@ Links.defaultProps = {
 
 const Root = styled('div')`
   overflow: hidden;
-  color: #9397a1;
+  color: ${({ theme }) => theme.palette.grey[500]};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -198,8 +198,8 @@ const Root = styled('div')`
     font-size: 14px;
     &--new::after {
       content: 'New';
-      color: #4672ea;
-      background-color: #e1e8fb;
+      color: ${({ theme }) => theme.palette.info.main};
+      background-color: ${({ theme }) => theme.palette.info.light};
       padding: 1px 8px;
       border-radius: 10px/50%;
       margin-left: 8px;
@@ -209,7 +209,7 @@ const Root = styled('div')`
     .footer-links-group {
       > .footer-links-item {
         font-weight: 600;
-        color: #25292f;
+        color: ${({ theme }) => theme.palette.text.primary};
       }
       .footer-links-sub {
         margin-top: 8px;
@@ -223,7 +223,7 @@ const Root = styled('div')`
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {
-      color: #25292f;
+      color: ${({ theme }) => theme.palette.text.primary};
     }
   }
   /* columns 布局 */

package/src/Footer/social-media.jsx

@@ -52,11 +52,11 @@ const Root = styled('div')`
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(props) => props.theme.palette.grey[400]};
+    color: ${(props) => props.theme.palette.grey[500]};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {
-      color: #25292f;
+      color: ${({ theme }) => theme.palette.text.primary};
     }
   }
   ${(props) => props.theme.breakpoints.down('md')} {

package/src/Header/index.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useMemoizedFn } from 'ahooks';
 import { withErrorBoundary } from 'react-error-boundary';
 import { ErrorFallback } from '@arcblock/ux/lib/ErrorBoundary';
-import { styled } from '@arcblock/ux/lib/Theme';
+import { styled, useTheme, deepmerge, ThemeProvider } from '@arcblock/ux/lib/Theme';
 import { ResponsiveHeader } from '@arcblock/ux/lib/Header';
 import NavMenu, { Products } from '@arcblock/ux/lib/NavMenu';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
@@ -14,7 +14,6 @@ import type { BoxProps, Breakpoint } from '@mui/material';
 import clsx from 'clsx';
 
 import Icon from '../Icon';
-import OverridableThemeProvider from '../common/overridable-theme-provider';
 import { mapRecursive, flatRecursive, matchPaths } from '../utils';
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from '../blocklets';
 import HeaderAddons from '../common/header-addons';
@@ -115,6 +114,7 @@ function Header({
   ...rest
 }: HeaderProps & Omit<BoxProps, keyof HeaderProps>) {
   useWalletHiddenTopbar();
+  const parentTheme = useTheme();
   const { locale } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
@@ -129,11 +129,12 @@ function Header({
     }
   }, [meta]);
   const isMobileDevice = useMobile();
+  const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
 
   if (!formattedBlocklet.appName) {
     return null;
   }
-  const { appLogo, appLogoRect, theme } = formattedBlocklet;
+  const { appLogo, appLogoRect } = formattedBlocklet;
   const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
   const parsedNavigation = parseNavigation(navigation);
   const { navItems, activeId } = parsedNavigation;
@@ -164,7 +165,7 @@ function Header({
   );
 
   return (
-    <OverridableThemeProvider theme={themeOverrides}>
+    <ThemeProvider theme={mergeTheme}>
       <StyledUxHeader
         // @ts-ignore
         homeLink={homeLink}
@@ -172,7 +173,7 @@ function Header({
         addons={headerAddons}
         {...omit(rest, ['bordered'])}
         $bordered={rest?.bordered}
-        $bgcolor={theme?.background?.header}
+        $bgcolor={mergeTheme.palette.background.default}
         className={clsx('blocklet__header', rest.className)}>
         {/* blocklet.yml 没有配置 navigation 时, 则为 children 传入 null, 此时 ResponsiveHeader 会渲染普通的不带 menu 的 Header */}
         {hideNavMenu || !navItems?.length
@@ -185,11 +186,12 @@ function Header({
                 items={navItems}
                 className="header-nav"
                 bgColor="transparent"
-                textColor="#777"
+                textColor={mergeTheme.palette.grey[500]}
+                activeTextColor={mergeTheme.palette.text.primary}
               />
             )}
       </StyledUxHeader>
-    </OverridableThemeProvider>
+    </ThemeProvider>
   );
 }
 
@@ -200,8 +202,6 @@ type StyledUxHeaderProps = {
 
 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';
   .header-logo {
     min-width: 44px;
   }

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

@@ -27,6 +27,7 @@ interface EditableFieldProps {
   verified?: boolean;
   errorMsg?: string;
   canEdit?: boolean;
+  hidePreview?: boolean;
   renderValue?: (value: string) => React.ReactNode;
 }
 
@@ -78,6 +79,7 @@ function EditableField({
   canEdit = true,
   renderValue,
   disabled = false,
+  hidePreview = false,
 }: EditableFieldProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -174,7 +176,7 @@ function EditableField({
   }
 
   if (!editable) {
-    return value ? (
+    return value && !hidePreview ? (
       <Tooltip
         open={Boolean(mousePosition)}
         title={tooltip}

package/src/UserCenter/components/settings.tsx

@@ -15,6 +15,7 @@ import { UserSessions } from '../../UserSessions';
 import ThirdPartyLogin from './third-party-login';
 import ConfigProfile from './config-profile';
 import DangerZone from './danger-zone';
+import { client } from '../../libs/client';
 
 export default function Settings({
   user,
@@ -68,7 +69,19 @@ export default function Settings({
       {
         label: t('sessionManagement'),
         value: 'session',
-        content: <UserSessions user={user} showUser={false} />,
+        content: (
+          <UserSessions
+            user={user}
+            showUser={false}
+            // FIXME: @zhanghan 暂时忽略类型不对的问题 (js-sdk 新版发布后，此处的类型就正确了)
+            // @ts-ignore
+            getUserSessions={(params) => {
+              // FIXME: @zhanghan 暂时忽略类型不对的问题 (js-sdk 新版发布后，此处的类型就正确了)
+              // @ts-ignore
+              return client.userSession.getMyLoginSessions({}, params);
+            }}
+          />
+        ),
       },
       {
         label: t('dangerZone.title'),

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

@@ -25,6 +25,7 @@ import isEmail from 'validator/lib/isEmail';
 import isPostalCode from 'validator/lib/isPostalCode';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useBrowser } from '@arcblock/react-hooks';
+import Clock from '@arcblock/ux/lib/UserCard/Content/clock';
 
 import { translations } from '../../libs/locales';
 import type { User, UserAddress, UserMetadata, UserPhoneProps } from '../../../@types';
@@ -32,7 +33,6 @@ import EditableField, { commonInputStyle, inputFieldStyle } from '../editable-fi
 import { LinkPreviewInput } from './link-preview-input';
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from './utils';
 import { TimezoneSelect } from './timezone-select';
-import Clock from './clock';
 import AddressEditor from './address';
 
 const LocationIcon = lazy(() => import('@arcblock/icons/lib/Location'));
@@ -429,6 +429,7 @@ export default function UserMetadataComponent({
         <EditableField
           value={metadata.email ?? user?.email ?? ''}
           editable={editing}
+          hidePreview={!isMyself}
           disabled={user?.sourceProvider === LOGIN_PROVIDER.EMAIL}
           canEdit={!emailVerified}
           verified={emailVerified}
@@ -453,16 +454,18 @@ export default function UserMetadataComponent({
           }
           onChange={(value) => onChange(value, 'email')}
           errorMsg={validateMsg.email}
-          renderValue={(value) => (
-            <a
-              href={`mailto:${value}`}
-              style={{
-                color: 'inherit',
-                textDecoration: 'none',
-              }}>
-              {value}
-            </a>
-          )}
+          renderValue={(value) =>
+            isMyself ? (
+              <a
+                href={`mailto:${value}`}
+                style={{
+                  color: 'inherit',
+                  textDecoration: 'none',
+                }}>
+                {value}
+              </a>
+            ) : null
+          }
           onValueValidate={(value) => {
             let msg = '';
             if (!!value && !isEmail(value)) {
@@ -475,6 +478,7 @@ export default function UserMetadataComponent({
         <EditableField
           value={phoneValue.phone}
           editable={editing}
+          hidePreview={!isMyself}
           canEdit={!phoneVerified}
           verified={phoneVerified}
           placeholder="Phone"
@@ -482,7 +486,7 @@ export default function UserMetadataComponent({
           onChange={(value) => onChange(value, 'phone')}
           label={t('profile.phone')}
           renderValue={() => {
-            return <PhoneInput value={phoneValue} preview />;
+            return isMyself ? <PhoneInput value={phoneValue} preview /> : null;
           }}>
           <PhoneInput
             variant="outlined"

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

@@ -5,21 +5,28 @@ import { useCreation, useMemoizedFn, 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';
-import sortBy from 'lodash/sortBy';
 import UAParser from 'ua-parser-js';
 import { getVisitorId } from '@arcblock/ux/lib/Util';
 import { useConfirm } from '@arcblock/ux/lib/Dialog';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
-import pAll from 'p-all';
 import PQueue from 'p-queue';
-import { Box, Button, CircularProgress, Tooltip, Typography, useMediaQuery } from '@mui/material';
-import { memo, ReactElement, useContext, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  CircularProgress,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
+import { memo, ReactElement, useEffect } from 'react';
 import { UserSession } from '@blocklet/js-sdk';
-import { SessionContext } from '@arcblock/did-connect/lib/Session';
 
 import useMobile from '../../hooks/use-mobile';
 import UserSessionInfo from './user-session-info';
-import { User, SessionContext as TSessionContext } from '../../@types';
+import { User } from '../../@types';
 import { client } from '../../libs/client';
 import { translations } from '../libs/locales';
 import { ip2Region } from '../libs/utils';
@@ -80,14 +87,29 @@ export default function UserSessions({
   user,
   showAction = true,
   showUser = true,
+  getUserSessions,
 }: {
   readonly user: User & {
     userSessions?: any[];
   };
   readonly showAction?: boolean;
   readonly showUser?: boolean;
+  readonly getUserSessions: (params: { page: number; pageSize: number; status: string }) => Promise<{
+    paging: {
+      total: number;
+    };
+    list: UserSession[];
+  }>;
 }) {
-  const { session } = useContext<TSessionContext>(SessionContext);
+  const filterParams = useReactive({
+    status: 'online',
+    page: 1,
+    pageSize: 10,
+  });
+  const userSessionsCountMap = useReactive({
+    online: 0,
+    expired: 0,
+  });
   const currentVisitorId = getVisitorId();
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: 'md' });
@@ -96,31 +118,48 @@ export default function UserSessions({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
-  const getData: () => Promise<(UserSession & { ipRegion?: string })[]> = useMemoizedFn(async () => {
-    let data = (user?.userSessions || []) as (UserSession & { ipRegion?: string })[];
-    try {
-      if (!user?.userSessions && session.user) {
-        data = await client.userSession.getMyLoginSessions();
-      }
-    } catch (e) {
-      console.warn('Failed to convert ip to region');
-      console.error(e);
-    }
+  const getData = useMemoizedFn(async () => {
+    const result = await getUserSessions({
+      page: filterParams.page,
+      pageSize: filterParams.pageSize,
+      status: filterParams.status,
+    });
 
-    const now = new Date().getTime();
-    return sortBy(data, (x) => {
-      if (x.visitorId === currentVisitorId) {
-        return -1;
-      }
-      return now - new Date(x.updatedAt).getTime();
+    const total = result?.paging?.total || 0;
+    userSessionsCountMap[filterParams.status as keyof typeof userSessionsCountMap] = total;
+
+    return {
+      total,
+      list: result?.list || [],
+    };
+  });
+
+  useRequest(async () => {
+    const result = await getUserSessions({
+      page: 1,
+      pageSize: 1,
+      status: 'expired',
     });
+    userSessionsCountMap.expired = result?.paging?.total || 0;
+    return result?.paging?.total || 0;
   });
 
-  const pageState = useRequest(getData);
+  const pageState = useRequest(getData, {
+    refreshDeps: [filterParams.status, filterParams.page, filterParams.pageSize],
+  });
 
   const safeData = useCreation(() => {
-    return pageState.data || [];
-  }, [pageState.data]);
+    return pageState.data?.list || [];
+  }, [pageState.data?.list]);
+
+  const disableLogout = useCreation(() => {
+    const status = filterParams.status as keyof typeof userSessionsCountMap;
+    if (status === 'online') {
+      // HACK: 这里只能假设会话列表包含了当前登录的会话，所以只有大于 1 的时候才能够去注销其他会话
+      return userSessionsCountMap[status] <= 1;
+    }
+    return userSessionsCountMap[status] === 0;
+  }, [safeData, currentVisitorId]);
 
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
@@ -138,26 +177,24 @@ export default function UserSessions({
       },
     });
   });
-  const otherUserSessions = useCreation(() => {
-    const list = safeData.filter((x) => x.visitorId !== currentVisitorId);
-    return list;
-  }, [safeData]);
   const logoutAll = useMemoizedFn(() => {
     confirmApi.open({
-      title: t('logoutAllSession'),
-      content: t('logoutAllSessionConfirm'),
+      title: t('logoutAllSession', {
+        type: t(filterParams.status),
+      }),
+      content: t('logoutAllSessionConfirm', {
+        type: t(filterParams.status),
+      }),
       confirmButtonText: t('confirm'),
       confirmButtonProps: {
         color: 'error',
       },
       cancelButtonText: t('cancel'),
       onConfirm: async () => {
-        const list = otherUserSessions.map((x) => {
-          return () => client.user.logout({ visitorId: x.visitorId });
-        });
-        await pAll(list, {
-          concurrency: 3,
-          stopOnError: false,
+        await client.user.logout({
+          // @ts-expect-error js-sdk 发了新版后，会有这个类型定义
+          status: filterParams.status,
+          visitorId: currentVisitorId as string,
         });
         pageState.refresh();
         confirmApi.close();
@@ -167,15 +204,21 @@ export default function UserSessions({
   const customButtons: ReactElement[] = [];
   if (showAction) {
     customButtons.push(
-      <Tooltip key="logoutAll" title={t('logoutAllTips')}>
+      <Tooltip
+        key="logoutAll"
+        title={t('logoutAllTips', {
+          type: t(filterParams.status),
+        })}>
         <Button
           sx={{ ml: 0.5 }}
           size="small"
           variant="contained"
           color="error"
           onClick={logoutAll}
-          disabled={otherUserSessions.length === 0}>
-          {t('logoutAll')}
+          disabled={disableLogout}>
+          {t('logoutAll', {
+            type: t(filterParams.status),
+          })}
         </Button>
       </Tooltip>
     );
@@ -190,8 +233,11 @@ export default function UserSessions({
       print: false,
       expandableRowsOnClick: false,
       searchDebounceTime: 600,
+      page: filterParams.page - 1,
+      rowsPerPage: filterParams.pageSize,
+      count: pageState.data?.total || 0,
     };
-  }, []);
+  }, [pageState.data?.total, filterParams.page, filterParams.pageSize]);
   const columns = [
     {
       label: t('platform'),
@@ -313,7 +359,6 @@ export default function UserSessions({
                 size="small"
                 color="error"
                 onClick={() => logout({ visitorId: x.visitorId })}>
-                {/* @ts-ignore FIXME: @zhanghan 新版 js-sdk 会提供这个属性的提示 */}
                 {x.status === 'expired'
                   ? t('remove')
                   : currentVisitorId === x.visitorId
@@ -371,6 +416,7 @@ export default function UserSessions({
       }}>
       {confirmHolder}
       <Datatable
+        count={pageState.data?.total || 0}
         locale={locale}
         data={safeData}
         // @ts-expect-error
@@ -380,6 +426,47 @@ export default function UserSessions({
         options={tableOptions}
         loading={pageState.loading}
         className="pc-user-sessions-table"
+        title={
+          <RadioGroup
+            row
+            sx={{ lineHeight: 1, ml: 1 }}
+            onChange={(e) => {
+              filterParams.status = e.target.value;
+            }}>
+            <FormControlLabel
+              value="online"
+              control={
+                <Radio size="small" sx={{ lineHeight: 1, fontSize: 0 }} checked={filterParams.status === 'online'} />
+              }
+              label={
+                <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+                  {t('online')}
+                  <Typography component="span" sx={{ ml: 0.5, color: 'text.secondary' }}>
+                    ({userSessionsCountMap.online})
+                  </Typography>
+                </Typography>
+              }
+            />
+            <FormControlLabel
+              value="expired"
+              control={
+                <Radio size="small" sx={{ lineHeight: 1, fontSize: 0 }} checked={filterParams.status === 'expired'} />
+              }
+              label={
+                <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+                  {t('expired')}
+                  <Typography component="span" sx={{ ml: 0.5, color: 'text.secondary' }}>
+                    ({userSessionsCountMap.expired})
+                  </Typography>
+                </Typography>
+              }
+            />
+          </RadioGroup>
+        }
+        onChange={(state) => {
+          filterParams.page = state.page + 1;
+          filterParams.pageSize = state.rowsPerPage;
+        }}
       />
     </Box>
   );

package/src/UserSessions/libs/locales.ts

@@ -15,7 +15,7 @@ export const translations = {
     updatedAt: '最近活动时间',
     lastLoginIp: '最近活动地址',
     actions: '操作',
-    logoutAll: '注销所有会话',
+    logoutAll: '注销所有{type}会话',
     logoutAllTips: '不会注销当前会话',
     logout: '注销',
     currentSession: '当前会话',
@@ -24,8 +24,9 @@ export const translations = {
     remove: '删除',
     logoutThisSession: '注销指定会话',
     logoutThisSessionConfirm: '确定要注销此会话吗?',
-    logoutAllSession: '注销所有会话',
-    logoutAllSessionConfirm: '确定要注销所有会话吗?',
+    logoutAllSession: '注销所有{type}会话',
+    logoutAllSessionConfirm: '确定要注销所有{type}会话吗?',
+    online: '活跃',
   },
   en: {
     confirm: 'Confirm',
@@ -43,7 +44,7 @@ export const translations = {
     updatedAt: 'Last Active Time',
     actions: 'Actions',
     lastLoginIp: 'Last Login IP',
-    logoutAll: 'Logout all',
+    logoutAll: 'Logout all {type} sessions',
     logoutAllTips: 'Will not logout current session',
     logout: 'Logout',
     currentSession: 'Current Session',
@@ -52,7 +53,8 @@ export const translations = {
     remove: 'Remove',
     logoutThisSession: 'Logout this session',
     logoutThisSessionConfirm: 'Are you sure to logout this session?',
-    logoutAllSession: 'Logout all sessions',
-    logoutAllSessionConfirm: 'Are you sure to logout all sessions?',
+    logoutAllSession: 'Logout all {type} sessions',
+    logoutAllSessionConfirm: 'Are you sure to logout all {type} sessions?',
+    online: 'Active',
   },
 };