@blocklet/ui-react 2.12.64 → 2.12.71

package/lib/Footer/index.js

@@ -1,13 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 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.js";
 import InternalFooter from "./internal-footer.js";
 import { mapRecursive } from "../utils.js";
 import { formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
@@ -15,6 +14,7 @@ import { BlockletMetaProps } from "../types.js";
 import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
 function Footer({ meta, theme: themeOverrides, ...rest }) {
   const { locale } = useLocaleContext() || {};
+  const parentTheme = useTheme();
   const formattedBlocklet = useMemo(() => {
     const blocklet = Object.assign({}, window.blocklet, meta);
     try {
@@ -24,10 +24,12 @@ 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) || [],
     socialMedia: getLocalizedNavigation(formattedBlocklet?.navigation?.social, locale) || [],
@@ -52,15 +54,7 @@ function Footer({ meta, theme: themeOverrides, ...rest }) {
     socialMedia: localized.socialMedia,
     links: localized.links.map((item) => ({ ...item, label: item.title }))
   };
-  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
-    StyledInternalFooter,
-    {
-      ...props,
-      ...omit(rest, ["bordered"]),
-      $bordered: rest?.bordered,
-      $bgcolor: theme?.background?.footer
-    }
-  ) });
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: mergeTheme, children: /* @__PURE__ */ jsx(StyledInternalFooter, { ...props, ...omit(rest, ["bordered"]), $bordered: rest?.bordered, $bgcolor: $bgColor }) });
 }
 Footer.propTypes = {
   meta: BlockletMetaProps,
@@ -75,8 +69,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), {
   FallbackComponent: ErrorFallback

package/lib/Footer/links.js

@@ -128,7 +128,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;
@@ -159,8 +159,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;
@@ -170,7 +170,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;
@@ -184,7 +184,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/lib/Footer/social-media.js

@@ -48,11 +48,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/lib/Header/index.js

@@ -3,7 +3,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";
@@ -13,7 +13,6 @@ import omit from "lodash/omit";
 import isFinite from "lodash/isFinite";
 import clsx from "clsx";
 import Icon from "../Icon/index.js";
-import OverridableThemeProvider from "../common/overridable-theme-provider.js";
 import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
 import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
 import HeaderAddons from "../common/header-addons.js";
@@ -76,6 +75,7 @@ function Header({
   ...rest
 }) {
   useWalletHiddenTopbar();
+  const parentTheme = useTheme();
   const { locale } = useLocaleContext() || {};
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
@@ -90,10 +90,11 @@ 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;
@@ -118,7 +119,7 @@ function Header({
       }
     )
   );
-  return /* @__PURE__ */ jsx(OverridableThemeProvider, { theme: themeOverrides, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: mergeTheme, children: /* @__PURE__ */ jsx(
     StyledUxHeader,
     {
       homeLink,
@@ -126,7 +127,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),
       children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => (
         // @ts-ignore
@@ -138,7 +139,8 @@ function Header({
             items: navItems,
             className: "header-nav",
             bgColor: "transparent",
-            textColor: "#777"
+            textColor: mergeTheme.palette.grey[500],
+            activeTextColor: mergeTheme.palette.text.primary
           }
         )
       )
@@ -147,8 +149,6 @@ function Header({
 }
 const StyledUxHeader = styled(ResponsiveHeader)`
   ${({ $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/lib/UserCenter/components/editable-field.d.ts

@@ -19,6 +19,7 @@ interface EditableFieldProps {
     verified?: boolean;
     errorMsg?: string;
     canEdit?: boolean;
+    hidePreview?: boolean;
     renderValue?: (value: string) => React.ReactNode;
 }
 export declare const commonInputStyle: {
@@ -47,5 +48,5 @@ export declare const inputFieldStyle: {
         borderColor: string;
     };
 };
-declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, disabled, }: EditableFieldProps): JSX.Element | null;
+declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, disabled, hidePreview, }: EditableFieldProps): JSX.Element | null;
 export default EditableField;

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

@@ -55,7 +55,8 @@ function EditableField({
   verified = false,
   canEdit = true,
   renderValue,
-  disabled = false
+  disabled = false,
+  hidePreview = false
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -145,7 +146,7 @@ function EditableField({
     return null;
   }
   if (!editable) {
-    return value ? /* @__PURE__ */ jsx(
+    return value && !hidePreview ? /* @__PURE__ */ jsx(
       Tooltip,
       {
         open: Boolean(mousePosition),

package/lib/UserCenter/components/settings.js

@@ -13,6 +13,7 @@ import { UserSessions } from "../../UserSessions/index.js";
 import ThirdPartyLogin from "./third-party-login/index.js";
 import ConfigProfile from "./config-profile.js";
 import DangerZone from "./danger-zone.js";
+import { client } from "../../libs/client.js";
 export default function Settings({
   user,
   settings,
@@ -59,7 +60,16 @@ export default function Settings({
       {
         label: t("sessionManagement"),
         value: "session",
-        content: /* @__PURE__ */ jsx(UserSessions, { user, showUser: false })
+        content: /* @__PURE__ */ jsx(
+          UserSessions,
+          {
+            user,
+            showUser: false,
+            getUserSessions: (params) => {
+              return client.userSession.getMyLoginSessions({}, params);
+            }
+          }
+        )
       },
       {
         label: t("dangerZone.title"),

package/lib/UserCenter/components/user-info/metadata.js

@@ -22,12 +22,12 @@ 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.js";
 import EditableField, { commonInputStyle, inputFieldStyle } from "../editable-field.js";
 import { LinkPreviewInput } from "./link-preview-input.js";
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from "./utils.js";
 import { TimezoneSelect } from "./timezone-select.js";
-import Clock from "./clock.js";
 import AddressEditor from "./address.js";
 const LocationIcon = lazy(() => import("@arcblock/icons/lib/Location"));
 const TimezoneIcon = lazy(() => import("@arcblock/icons/lib/Timezone"));
@@ -363,6 +363,7 @@ export default function UserMetadataComponent({
             {
               value: metadata.email ?? user?.email ?? "",
               editable: editing,
+              hidePreview: !isMyself,
               disabled: user?.sourceProvider === LOGIN_PROVIDER.EMAIL,
               canEdit: !emailVerified,
               verified: emailVerified,
@@ -384,7 +385,7 @@ export default function UserMetadataComponent({
               ] }),
               onChange: (value) => onChange(value, "email"),
               errorMsg: validateMsg.email,
-              renderValue: (value) => /* @__PURE__ */ jsx(
+              renderValue: (value) => isMyself ? /* @__PURE__ */ jsx(
                 "a",
                 {
                   href: `mailto:${value}`,
@@ -394,7 +395,7 @@ export default function UserMetadataComponent({
                   },
                   children: value
                 }
-              ),
+              ) : null,
               onValueValidate: (value) => {
                 let msg = "";
                 if (!!value && !isEmail(value)) {
@@ -409,6 +410,7 @@ export default function UserMetadataComponent({
             {
               value: phoneValue.phone,
               editable: editing,
+              hidePreview: !isMyself,
               canEdit: !phoneVerified,
               verified: phoneVerified,
               placeholder: "Phone",
@@ -416,7 +418,7 @@ export default function UserMetadataComponent({
               onChange: (value) => onChange(value, "phone"),
               label: t("profile.phone"),
               renderValue: () => {
-                return /* @__PURE__ */ jsx(PhoneInput, { value: phoneValue, preview: true });
+                return isMyself ? /* @__PURE__ */ jsx(PhoneInput, { value: phoneValue, preview: true }) : null;
               },
               children: /* @__PURE__ */ jsx(
                 PhoneInput,

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

@@ -1,8 +1,19 @@
+import { UserSession } from '@blocklet/js-sdk';
 import { User } from '../../@types';
-export default function UserSessions({ user, showAction, showUser, }: {
+export default function UserSessions({ user, showAction, showUser, 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[];
+    }>;
 }): import("react").JSX.Element;

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

@@ -4,16 +4,23 @@ 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, useContext, useEffect } from "react";
-import { SessionContext } from "@arcblock/did-connect/lib/Session";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Tooltip,
+  Typography,
+  useMediaQuery
+} from "@mui/material";
+import { memo, useEffect } from "react";
 import useMobile from "../../hooks/use-mobile.js";
 import UserSessionInfo from "./user-session-info.js";
 import { client } from "../../libs/client.js";
@@ -54,9 +61,18 @@ const UserSessionIp = memo(({ userSession, isMobile = false }) => {
 export default function UserSessions({
   user,
   showAction = true,
-  showUser = true
+  showUser = true,
+  getUserSessions
 }) {
-  const { session } = useContext(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" });
@@ -66,27 +82,40 @@ export default function UserSessions({
     return translate(translations, key, locale, "en", data);
   });
   const getData = useMemoizedFn(async () => {
-    let data = user?.userSessions || [];
-    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 now = (/* @__PURE__ */ new Date()).getTime();
-    return sortBy(data, (x) => {
-      if (x.visitorId === currentVisitorId) {
-        return -1;
-      }
-      return now - new Date(x.updatedAt).getTime();
+    const result = await getUserSessions({
+      page: filterParams.page,
+      pageSize: filterParams.pageSize,
+      status: filterParams.status
     });
+    const total = result?.paging?.total || 0;
+    userSessionsCountMap[filterParams.status] = 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, {
+    refreshDeps: [filterParams.status, filterParams.page, filterParams.pageSize]
   });
-  const pageState = useRequest(getData);
   const safeData = useCreation(() => {
-    return pageState.data || [];
-  }, [pageState.data]);
+    return pageState.data?.list || [];
+  }, [pageState.data?.list]);
+  const disableLogout = useCreation(() => {
+    const status = filterParams.status;
+    if (status === "online") {
+      return userSessionsCountMap[status] <= 1;
+    }
+    return userSessionsCountMap[status] === 0;
+  }, [safeData, currentVisitorId]);
   const logout = useMemoizedFn(({ visitorId }) => {
     confirmApi.open({
       title: t("logoutThisSession"),
@@ -103,26 +132,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
         });
         pageState.refresh();
         confirmApi.close();
@@ -132,18 +159,29 @@ export default function UserSessions({
   const customButtons = [];
   if (showAction) {
     customButtons.push(
-      /* @__PURE__ */ jsx(Tooltip, { title: t("logoutAllTips"), children: /* @__PURE__ */ jsx(
-        Button,
+      /* @__PURE__ */ jsx(
+        Tooltip,
         {
-          sx: { ml: 0.5 },
-          size: "small",
-          variant: "contained",
-          color: "error",
-          onClick: logoutAll,
-          disabled: otherUserSessions.length === 0,
-          children: t("logoutAll")
-        }
-      ) }, "logoutAll")
+          title: t("logoutAllTips", {
+            type: t(filterParams.status)
+          }),
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              sx: { ml: 0.5 },
+              size: "small",
+              variant: "contained",
+              color: "error",
+              onClick: logoutAll,
+              disabled: disableLogout,
+              children: t("logoutAll", {
+                type: t(filterParams.status)
+              })
+            }
+          )
+        },
+        "logoutAll"
+      )
     );
   }
   const tableOptions = useCreation(() => {
@@ -155,9 +193,12 @@ export default function UserSessions({
       filter: false,
       print: false,
       expandableRowsOnClick: false,
-      searchDebounceTime: 600
+      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"),
@@ -307,13 +348,60 @@ export default function UserSessions({
         /* @__PURE__ */ jsx(
           Datatable,
           {
+            count: pageState.data?.total || 0,
             locale,
             data: safeData,
             columns,
             customButtons,
             options: tableOptions,
             loading: pageState.loading,
-            className: "pc-user-sessions-table"
+            className: "pc-user-sessions-table",
+            title: /* @__PURE__ */ jsxs(
+              RadioGroup,
+              {
+                row: true,
+                sx: { lineHeight: 1, ml: 1 },
+                onChange: (e) => {
+                  filterParams.status = e.target.value;
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    FormControlLabel,
+                    {
+                      value: "online",
+                      control: /* @__PURE__ */ jsx(Radio, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: filterParams.status === "online" }),
+                      label: /* @__PURE__ */ jsxs(Typography, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("online"),
+                        /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                          "(",
+                          userSessionsCountMap.online,
+                          ")"
+                        ] })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    FormControlLabel,
+                    {
+                      value: "expired",
+                      control: /* @__PURE__ */ jsx(Radio, { size: "small", sx: { lineHeight: 1, fontSize: 0 }, checked: filterParams.status === "expired" }),
+                      label: /* @__PURE__ */ jsxs(Typography, { sx: { display: "flex", alignItems: "center" }, children: [
+                        t("expired"),
+                        /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { ml: 0.5, color: "text.secondary" }, children: [
+                          "(",
+                          userSessionsCountMap.expired,
+                          ")"
+                        ] })
+                      ] })
+                    }
+                  )
+                ]
+              }
+            ),
+            onChange: (state) => {
+              filterParams.page = state.page + 1;
+              filterParams.pageSize = state.rowsPerPage;
+            }
           }
         )
       ]

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

@@ -26,6 +26,7 @@ export declare const translations: {
         logoutThisSessionConfirm: string;
         logoutAllSession: string;
         logoutAllSessionConfirm: string;
+        online: string;
     };
     en: {
         confirm: string;
@@ -54,5 +55,6 @@ export declare const translations: {
         logoutThisSessionConfirm: string;
         logoutAllSession: string;
         logoutAllSessionConfirm: string;
+        online: string;
     };
 };

package/lib/UserSessions/libs/locales.js

@@ -15,7 +15,7 @@ export const translations = {
     updatedAt: "\u6700\u8FD1\u6D3B\u52A8\u65F6\u95F4",
     lastLoginIp: "\u6700\u8FD1\u6D3B\u52A8\u5730\u5740",
     actions: "\u64CD\u4F5C",
-    logoutAll: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
+    logoutAll: "\u6CE8\u9500\u6240\u6709{type}\u4F1A\u8BDD",
     logoutAllTips: "\u4E0D\u4F1A\u6CE8\u9500\u5F53\u524D\u4F1A\u8BDD",
     logout: "\u6CE8\u9500",
     currentSession: "\u5F53\u524D\u4F1A\u8BDD",
@@ -24,8 +24,9 @@ export const translations = {
     remove: "\u5220\u9664",
     logoutThisSession: "\u6CE8\u9500\u6307\u5B9A\u4F1A\u8BDD",
     logoutThisSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6B64\u4F1A\u8BDD\u5417?",
-    logoutAllSession: "\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD",
-    logoutAllSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6240\u6709\u4F1A\u8BDD\u5417?"
+    logoutAllSession: "\u6CE8\u9500\u6240\u6709{type}\u4F1A\u8BDD",
+    logoutAllSessionConfirm: "\u786E\u5B9A\u8981\u6CE8\u9500\u6240\u6709{type}\u4F1A\u8BDD\u5417?",
+    online: "\u6D3B\u8DC3"
   },
   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"
   }
 };

package/lib/common/notification-addon.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import Badge from "@mui/material/Badge";
 import PropTypes from "prop-types";
 import { useCallback, useEffect } from "react";
-import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { IconButton } from "@mui/material";
 import { useSnackbar } from "notistack";
 import NotificationsOutlinedIcon from "@arcblock/icons/lib/Notification";
@@ -89,7 +88,6 @@ export default function NotificationAddon({ session = {} }) {
       variant: "outlined",
       href: viewAllUrl,
       sx: {
-        borderColor: colors.lineBorderStrong,
         "&:hover": {
           borderRadius: "50%"
         }