@blocklet/ui-react 2.12.63 → 2.12.70

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/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/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%"
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.63",
+  "version": "2.12.70",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -34,8 +34,8 @@
   "dependencies": {
     "@abtnode/constant": "^1.16.41",
     "@abtnode/util": "^1.16.41",
-    "@arcblock/bridge": "^2.12.63",
-    "@arcblock/react-hooks": "^2.12.63",
+    "@arcblock/bridge": "^2.12.70",
+    "@arcblock/react-hooks": "^2.12.70",
     "@arcblock/ws": "^1.19.19",
     "@blocklet/constant": "^1.16.42-beta-20250408-072924-4b6a877a",
     "@blocklet/did-space-react": "^1.0.43",
@@ -94,5 +94,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "47f8ac34d544cb600e084266ceb722989476f287"
+  "gitHead": "89e31e2599d8ab7462307771239849a6edd19d7f"
 }

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/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/common/notification-addon.jsx

@@ -1,7 +1,6 @@
 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';
 // eslint-disable-next-line import/no-extraneous-dependencies
@@ -105,7 +104,6 @@ export default function NotificationAddon({ session = {} }) {
       variant="outlined"
       href={viewAllUrl}
       sx={{
-        borderColor: colors.lineBorderStrong,
         '&:hover': {
           borderRadius: '50%',
         },

package/lib/UserCenter/components/user-info/clock.d.ts

@@ -1,3 +0,0 @@
-export default function Clock({ value }: {
-    value: string;
-}): import("react").JSX.Element;

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

@@ -1,50 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useMemoizedFn } from "ahooks";
-import { translations } from "../../libs/locales.js";
-import { useClock } from "../../../hooks/use-clock.js";
-export default function Clock({ value }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const timeInfo = useClock(value, locale);
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      sx: {
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      },
-      display: "flex",
-      alignItems: "center",
-      gap: 1,
-      children: [
-        /* @__PURE__ */ jsx(Typography, { children: value }),
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            title: /* @__PURE__ */ jsxs("span", { children: [
-              t("profile.localTime"),
-              " ",
-              timeInfo.fullDateTime
-            ] }),
-            placement: "top",
-            arrow: true,
-            children: /* @__PURE__ */ jsxs(Typography, { component: "span", fontSize: 14, children: [
-              "(",
-              locale === "zh" ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : "",
-              timeInfo.formattedTime,
-              ")"
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}

package/lib/hooks/use-clock.d.ts

@@ -1,9 +0,0 @@
-import 'dayjs/locale/zh-cn';
-import 'dayjs/locale/en';
-export declare function useClock(timezone?: any, locale?: string): {
-    formattedTime: any;
-    fullDateTime: any;
-    phase: string;
-    icon: string;
-    rawTime: any;
-};

package/lib/hooks/use-clock.js

@@ -1,49 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezonePlugin from "dayjs/plugin/timezone";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import { formatToDatetime } from "@arcblock/ux/lib/Util";
-import "dayjs/locale/zh-cn";
-import "dayjs/locale/en";
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-dayjs.extend(localizedFormat);
-const currentTimezone = dayjs.tz.guess();
-const getTimePhase = (hour) => {
-  if (hour >= 0 && hour < 6)
-    return { phase: "dawn", icon: "\u{1F312}" };
-  if (hour >= 6 && hour < 12)
-    return { phase: "morning", icon: "\u{1F31E}" };
-  if (hour >= 12 && hour < 18)
-    return { phase: "afternoon", icon: "\u{1F31E}" };
-  return { phase: "night", icon: "\u{1F312}" };
-};
-export function useClock(timezone = currentTimezone, locale = "zh") {
-  const getLatestTimeInfo = useCallback(() => {
-    const currentLocale = locale === "zh" ? "zh-cn" : "en";
-    const localeOption = locale === "zh" ? "zh-cn" : "en-us";
-    dayjs.locale(currentLocale);
-    const now = dayjs().tz(timezone);
-    const hour = now.hour();
-    const { phase, icon } = getTimePhase(hour);
-    return {
-      formattedTime: now.format("LT"),
-      fullDateTime: formatToDatetime(now.toDate(), { tz: timezone, locale: localeOption }),
-      phase,
-      icon,
-      rawTime: now
-    };
-  }, [timezone, locale]);
-  const [timeInfo, setTimeInfo] = useState(getLatestTimeInfo());
-  useEffect(() => {
-    setTimeInfo(getLatestTimeInfo());
-    const timerId = setInterval(() => {
-      setTimeInfo(getLatestTimeInfo());
-    }, 6e3);
-    return () => {
-      clearInterval(timerId);
-    };
-  }, [timezone, locale, getLatestTimeInfo]);
-  return timeInfo;
-}

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

@@ -1,43 +0,0 @@
-import Tooltip from '@mui/material/Tooltip';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { translate } from '@arcblock/ux/lib/Locale/util';
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { useMemoizedFn } from 'ahooks';
-import { translations } from '../../libs/locales';
-import { useClock } from '../../../hooks/use-clock';
-
-export default function Clock({ value }: { value: string }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const timeInfo = useClock(value, locale);
-
-  return (
-    <Box
-      sx={{
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      }}
-      display="flex"
-      alignItems="center"
-      gap={1}>
-      <Typography>{value}</Typography>
-      <Tooltip
-        title={
-          <span>
-            {t('profile.localTime')} {timeInfo.fullDateTime}
-          </span>
-        }
-        placement="top"
-        arrow>
-        <Typography component="span" fontSize={14}>
-          ({locale === 'zh' ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : ''}
-          {timeInfo.formattedTime})
-        </Typography>
-      </Tooltip>
-    </Box>
-  );
-}

package/src/hooks/use-clock.tsx

@@ -1,61 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import { formatToDatetime } from '@arcblock/ux/lib/Util';
-import 'dayjs/locale/zh-cn';
-import 'dayjs/locale/en';
-
-dayjs.extend(utc);
-dayjs.extend(timezonePlugin);
-dayjs.extend(localizedFormat);
-
-const currentTimezone = dayjs.tz.guess();
-
-// 获取时间段
-const getTimePhase = (hour: number) => {
-  if (hour >= 0 && hour < 6) return { phase: 'dawn', icon: '🌒' }; // 凌晨 00:00-05:59
-  if (hour >= 6 && hour < 12) return { phase: 'morning', icon: '🌞' }; // 上午 06:00-11:59
-  if (hour >= 12 && hour < 18) return { phase: 'afternoon', icon: '🌞' }; // 下午 12:00-17:59
-  return { phase: 'night', icon: '🌒' }; // 晚上 18:00-23:59
-};
-
-export function useClock(timezone = currentTimezone, locale = 'zh') {
-  const getLatestTimeInfo = useCallback(() => {
-    const currentLocale = locale === 'zh' ? 'zh-cn' : 'en';
-    const localeOption = locale === 'zh' ? 'zh-cn' : 'en-us';
-    dayjs.locale(currentLocale);
-
-    const now = dayjs().tz(timezone);
-    const hour = now.hour();
-    const { phase, icon } = getTimePhase(hour);
-
-    return {
-      formattedTime: now.format('LT'),
-      fullDateTime: formatToDatetime(now.toDate(), { tz: timezone, locale: localeOption }),
-      phase,
-      icon,
-      rawTime: now,
-    };
-  }, [timezone, locale]);
-
-  const [timeInfo, setTimeInfo] = useState(getLatestTimeInfo());
-
-  useEffect(() => {
-    // 立即更新一次，确保初始状态是最新的
-    setTimeInfo(getLatestTimeInfo());
-
-    // 设置定时器
-    const timerId = setInterval(() => {
-      setTimeInfo(getLatestTimeInfo());
-    }, 6000);
-
-    // 清理函数
-    return () => {
-      clearInterval(timerId);
-    };
-  }, [timezone, locale, getLatestTimeInfo]);
-
-  return timeInfo;
-}