@blocklet/ui-react 2.12.28 → 2.12.30

package/lib/@types/index.d.ts

@@ -77,6 +77,13 @@ export type UserMetadata = {
     email?: string;
     phone?: UserPhoneProps;
 };
+export type UserAddress = {
+    country?: string;
+    province?: string;
+    city?: string;
+    detailedAddress?: string;
+    postalCode?: string;
+};
 export type User = UserPublicInfo & {
     role: string;
     email?: string;
@@ -95,6 +102,7 @@ export type User = UserPublicInfo & {
     emailVerified?: boolean;
     phoneVerified?: boolean;
     metadata?: UserMetadata;
+    address?: UserAddress;
 };
 export type UserCenterTab = {
     value: string;

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Box, TextField, Typography, Tooltip } from "@mui/material";
 import { useCreation, useMemoizedFn } from "ahooks";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
@@ -59,6 +60,16 @@ function EditableField({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
+  const [mousePosition, setMousePosition] = useState(null);
+  const handleMouseEnter = (event) => {
+    setMousePosition({
+      mouseX: event.clientX,
+      mouseY: event.clientY
+    });
+  };
+  const handleMouseLeave = () => {
+    setMousePosition(null);
+  };
   const handleChange = useMemoizedFn((v) => {
     if (onChange) {
       onChange(v);
@@ -107,7 +118,7 @@ function EditableField({
           helperText: errorMsg
         }
       ),
-      /* @__PURE__ */ jsxs(
+      maxLength && maxLength > 0 ? /* @__PURE__ */ jsxs(
         Typography,
         {
           position: "absolute",
@@ -124,46 +135,83 @@ function EditableField({
             maxLength
           ]
         }
-      )
+      ) : null
     ] });
   }, [value, handleChange, component, placeholder, rows, children]);
   if (!canEdit && editable) {
     return null;
   }
   if (!editable) {
-    return value ? /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", children: /* @__PURE__ */ jsxs(
-      Typography,
+    return value ? /* @__PURE__ */ jsx(
+      Tooltip,
       {
-        variant: "subtitle1",
-        component: "div",
-        gutterBottom: true,
-        sx: {
-          width: "100%",
-          mb: 0,
-          lineHeight: 1.4,
-          overflow: "hidden"
-        },
-        display: "flex",
-        alignItems: "center",
-        gap: 1,
-        children: [
-          icon,
-          /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "90%", children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                sx: {
-                  whiteSpace: "pre-wrap",
-                  ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
-                },
-                children: renderValue ? renderValue(value) : value
+        open: Boolean(mousePosition),
+        title: tooltip,
+        placement: "top",
+        arrow: true,
+        PopperProps: {
+          // 使用虚拟锚点元素，基于鼠标位置
+          anchorEl: mousePosition ? {
+            getBoundingClientRect: () => ({
+              top: mousePosition.mouseY,
+              left: mousePosition.mouseX,
+              right: mousePosition.mouseX,
+              bottom: mousePosition.mouseY,
+              width: 0,
+              height: 0,
+              x: mousePosition.mouseX,
+              y: mousePosition.mouseY,
+              toJSON: () => {
+              }
+            })
+          } : null,
+          // 设置偏移，使tooltip显示在鼠标上方
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, 10]
               }
-            ),
-            verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })
-          ] })
-        ]
+            }
+          ]
+        },
+        children: /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "subtitle1",
+            component: "div",
+            gutterBottom: true,
+            sx: {
+              width: "100%",
+              mb: 0,
+              lineHeight: 1.4,
+              overflow: "hidden"
+            },
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            children: [
+              icon,
+              /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", width: "90%", children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    sx: {
+                      whiteSpace: "pre-wrap",
+                      ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
+                    },
+                    onMouseEnter: handleMouseEnter,
+                    onMouseLeave: handleMouseLeave,
+                    children: renderValue ? renderValue(value) : value
+                  }
+                ),
+                verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })
+              ] })
+            ]
+          }
+        )
       }
-    ) }) : null;
+    ) : null;
   }
   return /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, style, children: [
     label && /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", gutterBottom: true, sx: { mb: 0.5, fontSize: "12px", color: "#4B5563" }, children: label }),

package/lib/UserCenter/components/status-dialog/index.js

@@ -96,7 +96,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
       },
       children: [
         /* @__PURE__ */ jsxs(DialogTitle, { sx: { borderBottom: `1px solid ${colors.dividerColor}` }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
           /* @__PURE__ */ jsx(
             IconButton,
             {

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

@@ -116,6 +116,12 @@ export default function UserCenter({
       refreshDeps: [currentDid, isMyself, session?.initialized, session?.user]
     }
   );
+  const onRefreshUser = useMemoizedFn(() => {
+    if (isMyself) {
+      return session.refresh();
+    }
+    return userState.refresh();
+  });
   const privacyState = useRequest(
     async () => {
       if (userState.data && currentTab) {
@@ -400,6 +406,7 @@ export default function UserCenter({
           user: userState.data,
           showFullDid: false,
           onlyProfile,
+          refreshProfile: onRefreshUser,
           sx: {
             padding: !isMobile ? "40px 24px 24px 40px" : "16px 0 0 0",
             ...!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {},
@@ -473,6 +480,7 @@ export default function UserCenter({
           switchPassport: handleSwitchPassport,
           switchProfile: session.switchProfile,
           user: userState.data,
+          refreshProfile: onRefreshUser,
           showFullDid: false,
           sx: {
             padding: !isMobile ? "40px 24px 24px 40px" : "16px 0 0 0",

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

@@ -0,0 +1,15 @@
+import type { UserAddress } from '../../../@types';
+interface AddressErrors {
+    country?: string;
+    province?: string;
+    city?: string;
+    detailedAddress?: string;
+    postalCode?: string;
+}
+export default function AddressEditor({ address, errors, handleChange, defaultCountry, }: {
+    address: UserAddress;
+    errors: AddressErrors;
+    handleChange: (field: keyof UserAddress, value: string) => void;
+    defaultCountry: string;
+}): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { useMemoizedFn } from "ahooks";
+import { translate } from "@arcblock/ux/lib/Locale/util";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
+import CountrySelect from "@arcblock/ux/lib/PhoneInput/country-select";
+import { translations } from "../../libs/locales.js";
+import EditableField from "../editable-field.js";
+const selectStyle = {
+  width: "100%",
+  px: 2,
+  py: 1,
+  borderRadius: 1,
+  "&:hover": {
+    "fieldset.MuiOutlinedInput-notchedOutline": {
+      borderColor: colors.dividerColor
+    }
+  },
+  "fieldset.MuiOutlinedInput-notchedOutline": {
+    borderColor: colors.dividerColor,
+    borderRadius: 1
+  },
+  ".MuiSelect-select": {
+    padding: "0 !important",
+    display: "flex",
+    alignItems: "center"
+  }
+};
+export default function AddressEditor({
+  address,
+  errors,
+  handleChange,
+  defaultCountry
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, "en", data);
+  });
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, mt: 2, children: [
+    /* @__PURE__ */ jsx(
+      EditableField,
+      {
+        placeholder: t("profile.address.country"),
+        value: address.country || defaultCountry,
+        editable: true,
+        errorMsg: errors.country,
+        label: t("profile.address.country"),
+        children: /* @__PURE__ */ jsx(
+          CountrySelect,
+          {
+            valueField: "name",
+            value: address.country || defaultCountry,
+            onChange: (v) => handleChange("country", v),
+            displayEmpty: true,
+            variant: "outlined",
+            selectCountryProps: {
+              hideDialCode: true
+            },
+            sx: selectStyle
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { display: "flex", gap: 2, children: [
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: address.province || "",
+          onChange: (value) => handleChange("province", value),
+          placeholder: t("profile.address.province"),
+          label: t("profile.address.province"),
+          editable: true,
+          errorMsg: errors.province
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        EditableField,
+        {
+          value: address.city || "",
+          onChange: (value) => handleChange("city", value),
+          placeholder: t("profile.address.city"),
+          label: t("profile.address.city"),
+          editable: true,
+          errorMsg: errors.city
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditableField,
+      {
+        value: address.detailedAddress || "",
+        onChange: (value) => handleChange("detailedAddress", value),
+        placeholder: t("profile.address.detailedAddress"),
+        label: t("profile.address.detailedAddress"),
+        component: "textarea",
+        editable: true,
+        rows: 3,
+        errorMsg: errors.detailedAddress
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EditableField,
+      {
+        value: address.postalCode || "",
+        onChange: (value) => handleChange("postalCode", value),
+        placeholder: t("profile.address.postalCode"),
+        label: t("profile.address.postalCode"),
+        editable: true,
+        errorMsg: errors.postalCode
+      }
+    )
+  ] });
+}

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

@@ -34,6 +34,8 @@ export default function Clock({ value }) {
               " ",
               timeInfo.fullDateTime
             ] }),
+            placement: "top",
+            arrow: true,
             children: /* @__PURE__ */ jsxs(Typography, { component: "span", fontSize: 14, children: [
               "(",
               locale === "zh" ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : "",

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

@@ -1,7 +1,10 @@
-import type { User, UserMetadata } from '../../../@types';
+import type { User, UserAddress, UserMetadata } from '../../../@types';
 export default function UserMetadataComponent({ isMyself, user, onSave, isMobile, }: {
     isMobile: boolean;
     isMyself: boolean;
     user: User;
-    onSave: (v: UserMetadata) => void;
+    onSave: (v: {
+        metadata: UserMetadata;
+        address: UserAddress;
+    }) => void;
 }): import("react").JSX.Element;

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

@@ -3,6 +3,7 @@ import { createElement } from "react";
 import Box from "@mui/material/Box";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import SwipeableDrawer from "@mui/material/SwipeableDrawer";
+import Typography from "@mui/material/Typography";
 import Backdrop from "@mui/material/Backdrop";
 import styled from "@emotion/styled";
 import { joinURL } from "ufo";
@@ -14,6 +15,7 @@ import { useCreation, useMemoizedFn, useReactive } from "ahooks";
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from "react";
 import { translate } from "@arcblock/ux/lib/Locale/util";
 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 { translations } from "../../libs/locales.js";
@@ -22,6 +24,7 @@ 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"));
 const EmailIcon = lazy(() => import("@arcblock/icons/lib/Email"));
@@ -65,6 +68,13 @@ export default function UserMetadataComponent({
     email: "",
     phone: ""
   });
+  const addressValidateMsg = useReactive({
+    country: "",
+    province: "",
+    city: "",
+    detailedAddress: "",
+    postalCode: ""
+  });
   useEffect(() => {
     if (!isMobileView) {
       setVisible(false);
@@ -90,6 +100,21 @@ export default function UserMetadataComponent({
       }
     }
   );
+  const address = useCreation(() => {
+    return user?.address || {
+      country: "",
+      province: "",
+      city: "",
+      detailedAddress: "",
+      postalCode: ""
+    };
+  }, [user?.address]);
+  const defaultCountry = useMemo(() => {
+    if (user?.address?.country) {
+      return user.address.country;
+    }
+    return locale === "zh" ? "China" : "United States";
+  }, [user?.address?.country, locale]);
   const phoneValue = useCreation(() => {
     const phone = metadata.phone ?? user?.phone ?? {
       country: "cn",
@@ -115,6 +140,17 @@ export default function UserMetadataComponent({
   const onChange = (v, field) => {
     metadata[field] = v;
   };
+  const onAddressChange = (field, value) => {
+    address[field] = value;
+    if (field === "city") {
+      onChange(value, "location");
+    }
+    if (field === "postalCode") {
+      addressValidateMsg.postalCode = value && !isPostalCode(value, "any") ? t("profile.address.invalidPostalCode") : "";
+    } else {
+      addressValidateMsg[field] = "";
+    }
+  };
   const onEdit = () => {
     if (!isMobileView) {
       setEditable(true);
@@ -130,8 +166,18 @@ export default function UserMetadataComponent({
         metadata[k] = defaultMetadata[k];
       });
     }
-    validateMsg.email = "";
-    validateMsg.phone = "";
+    const defaultAddress = cloneDeep(user?.address) ?? {};
+    if (defaultAddress) {
+      Object.keys(address).forEach((key) => {
+        const k = key;
+        address[k] = defaultAddress[k];
+      });
+    }
+    [validateMsg, addressValidateMsg].forEach((o) => {
+      Object.keys(o).forEach((key) => {
+        o[key] = "";
+      });
+    });
     if (!isMobileView) {
       setEditable(false);
     } else {
@@ -177,7 +223,13 @@ export default function UserMetadataComponent({
         metadata[k] = value || currentTimezone;
       }
     });
-    onSave(metadata);
+    if (address.postalCode && !isPostalCode(address.postalCode, "any")) {
+      addressValidateMsg.postalCode = t("profile.address.invalidPostalCode");
+    }
+    if ([validateMsg, addressValidateMsg].some((o) => Object.values(o).some((e) => e))) {
+      return;
+    }
+    onSave({ metadata, address });
     setEditable(false);
     setVisible(false);
   };
@@ -225,14 +277,30 @@ export default function UserMetadataComponent({
               children: t("profile.editProfile")
             }
           ) : null,
-          /* @__PURE__ */ jsx(
+          editing && isMyself ? /* @__PURE__ */ jsx(
+            AddressEditor,
+            {
+              address,
+              errors: addressValidateMsg,
+              handleChange: onAddressChange,
+              defaultCountry
+            }
+          ) : /* @__PURE__ */ jsx(
             EditableField,
             {
-              value: metadata.location ?? "",
+              value: metadata.location ?? user?.address?.city ?? "",
               onChange: (value) => onChange(value, "location"),
               editable: editing,
               placeholder: "Location",
               label: t("profile.location"),
+              tooltip: isMyself ? /* @__PURE__ */ jsxs(Box, { fontSize: "14px", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "p", fontWeight: 600, children: t("profile.address.detailedAddress") }),
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", component: "span", children: address.detailedAddress })
+              ] }) : null,
+              renderValue: () => {
+                const fullLocation = [address.country, address.province, address.city || metadata.location || ""].filter(Boolean).join(" ");
+                return /* @__PURE__ */ jsx(Typography, { component: "span", children: fullLocation });
+              },
               icon: /* @__PURE__ */ jsx(LocationIcon, { ...iconSize })
             }
           ),

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

@@ -1,6 +1,6 @@
 import type { BoxProps } from '@mui/material';
 import type { User } from '../../../@types';
-export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, isMobile, onlyProfile, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, isMobile, onlyProfile, refreshProfile, ...rest }: {
     user: User;
     isMyself?: boolean;
     showFullDid?: boolean;
@@ -9,4 +9,5 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     size?: number;
     isMobile?: boolean;
     onlyProfile?: boolean;
+    refreshProfile: () => void;
 } & BoxProps): import("react").JSX.Element | null;

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

@@ -28,6 +28,7 @@ export default function UserBasicInfo({
   switchProfile,
   isMobile = false,
   onlyProfile = false,
+  refreshProfile,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -59,6 +60,7 @@ export default function UserBasicInfo({
           status: v || {}
         }
       });
+      refreshProfile();
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err));
@@ -74,8 +76,9 @@ export default function UserBasicInfo({
     if (!isMyself) {
       return;
     }
+    const { metadata, address } = v;
     try {
-      const newLinks = v?.links?.map((link) => {
+      const newLinks = metadata?.links?.map((link) => {
         if (!link.url || !isValidUrl(link.url))
           return null;
         try {
@@ -89,8 +92,9 @@ export default function UserBasicInfo({
           return null;
         }
       }).filter((l) => !!l) || [];
-      v.links = newLinks;
-      await client.user.saveProfile({ metadata: v });
+      metadata.links = newLinks;
+      await client.user.saveProfile({ metadata, address });
+      refreshProfile();
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err));

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

@@ -139,6 +139,15 @@ export declare const translations: {
                 afternoon: string;
                 night: string;
             };
+            address: {
+                title: string;
+                country: string;
+                province: string;
+                city: string;
+                detailedAddress: string;
+                postalCode: string;
+                invalidPostalCode: string;
+            };
         };
     };
     en: {
@@ -282,6 +291,15 @@ export declare const translations: {
                 afternoon: string;
                 night: string;
             };
+            address: {
+                title: string;
+                country: string;
+                province: string;
+                city: string;
+                detailedAddress: string;
+                postalCode: string;
+                invalidPostalCode: string;
+            };
         };
     };
 };

package/lib/UserCenter/libs/locales.js

@@ -138,6 +138,15 @@ export const translations = {
         morning: "\u4E0A\u5348",
         afternoon: "\u4E0B\u5348",
         night: "\u665A\u4E0A"
+      },
+      address: {
+        title: "\u5730\u5740",
+        country: "\u56FD\u5BB6/\u5730\u533A",
+        province: "\u5DDE/\u7701",
+        city: "\u57CE\u5E02/\u9547",
+        detailedAddress: "\u8BE6\u7EC6\u5730\u5740",
+        postalCode: "\u90AE\u653F\u7F16\u7801",
+        invalidPostalCode: "\u90AE\u653F\u7F16\u7801\u683C\u5F0F\u4E0D\u6B63\u786E"
       }
     }
   },
@@ -281,6 +290,15 @@ export const translations = {
         morning: "AM",
         afternoon: "PM",
         night: "PM"
+      },
+      address: {
+        title: "Address",
+        country: "Country/Region",
+        province: "State/Province",
+        city: "City/Town",
+        detailedAddress: "Detailed Address",
+        postalCode: "Postal Code",
+        invalidPostalCode: "Postal code is invalid"
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.28",
+  "version": "2.12.30",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.40",
-    "@arcblock/bridge": "^2.12.28",
-    "@arcblock/react-hooks": "^2.12.28",
+    "@arcblock/bridge": "^2.12.30",
+    "@arcblock/react-hooks": "^2.12.30",
     "@arcblock/ws": "^1.19.15",
     "@blocklet/did-space-react": "^1.0.35",
     "@iconify-icons/logos": "^1.2.36",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "f5d659cb0c3bf7d4b94202c17a603c861aed3f8d"
+  "gitHead": "97305a61162566787fbc38decf9d26dcdb556637"
 }

package/src/@types/index.ts

@@ -89,6 +89,14 @@ export type UserMetadata = {
   phone?: UserPhoneProps;
 };
 
+export type UserAddress = {
+  country?: string;
+  province?: string;
+  city?: string;
+  detailedAddress?: string;
+  postalCode?: string;
+};
+
 export type User = UserPublicInfo & {
   role: string;
   email?: string;
@@ -106,7 +114,10 @@ export type User = UserPublicInfo & {
   inviter?: string;
   emailVerified?: boolean;
   phoneVerified?: boolean;
+  // 1.16.40 新增
   metadata?: UserMetadata;
+  // 1.16.41 新增
+  address?: UserAddress;
 };
 
 export type UserCenterTab = {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, TextField, Typography, Tooltip, TooltipProps } from '@mui/material';
 import { useCreation, useMemoizedFn } from 'ahooks';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
@@ -82,6 +82,25 @@ function EditableField({
     return translate(translations, key, locale, 'en', data);
   });
 
+  // 存储鼠标位置的状态
+  const [mousePosition, setMousePosition] = useState<{
+    mouseX: number;
+    mouseY: number;
+  } | null>(null);
+
+  // 处理鼠标移动事件，更新鼠标位置
+  const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+    setMousePosition({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+    });
+  };
+
+  // 处理鼠标离开事件，清除鼠标位置
+  const handleMouseLeave = () => {
+    setMousePosition(null);
+  };
+
   const handleChange = useMemoizedFn((v: string) => {
     if (onChange) {
       onChange(v);
@@ -129,17 +148,19 @@ function EditableField({
           error={Boolean(errorMsg)}
           helperText={errorMsg}
         />
-        <Typography
-          position="absolute"
-          bottom={-22}
-          right={2}
-          variant="caption"
-          fontSize="12px"
-          component="span"
-          color={isTooLong ? 'error' : 'text.secondary'}>
-          {isTooLong ? `(${t('profile.maxInputLength')} ${maxLength}) ` : ''}
-          {value.length} / {maxLength}
-        </Typography>
+        {maxLength && maxLength > 0 ? (
+          <Typography
+            position="absolute"
+            bottom={-22}
+            right={2}
+            variant="caption"
+            fontSize="12px"
+            component="span"
+            color={isTooLong ? 'error' : 'text.secondary'}>
+            {isTooLong ? `(${t('profile.maxInputLength')} ${maxLength}) ` : ''}
+            {value.length} / {maxLength}
+          </Typography>
+        ) : null}
       </Box>
     );
   }, [value, handleChange, component, placeholder, rows, children]);
@@ -150,7 +171,38 @@ function EditableField({
 
   if (!editable) {
     return value ? (
-      <Tooltip title={tooltip} placement="top">
+      <Tooltip
+        open={Boolean(mousePosition)}
+        title={tooltip}
+        placement="top"
+        arrow
+        PopperProps={{
+          // 使用虚拟锚点元素，基于鼠标位置
+          anchorEl: mousePosition
+            ? {
+                getBoundingClientRect: () => ({
+                  top: mousePosition.mouseY,
+                  left: mousePosition.mouseX,
+                  right: mousePosition.mouseX,
+                  bottom: mousePosition.mouseY,
+                  width: 0,
+                  height: 0,
+                  x: mousePosition.mouseX,
+                  y: mousePosition.mouseY,
+                  toJSON: () => {},
+                }),
+              }
+            : null,
+          // 设置偏移，使tooltip显示在鼠标上方
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 10],
+              },
+            },
+          ],
+        }}>
         <Typography
           variant="subtitle1"
           component="div"
@@ -170,7 +222,9 @@ function EditableField({
               sx={{
                 whiteSpace: 'pre-wrap',
                 ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
-              }}>
+              }}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}>
               {renderValue ? renderValue(value) : value}
             </Typography>
             {verified && (

package/src/UserCenter/components/status-dialog/index.tsx

@@ -114,7 +114,7 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
         },
       }}>
       <DialogTitle sx={{ borderBottom: `1px solid ${colors.dividerColor}` }}>
-        <Typography variant="h6" sx={{ fontSize: '16px !important', mb: 0 }}>
+        <Typography variant="body1" sx={{ fontSize: '16px !important', mb: 0 }}>
           {t('profile.setStatus')}
         </Typography>
         <IconButton

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

@@ -145,6 +145,13 @@ export default function UserCenter({
     }
   );
 
+  const onRefreshUser = useMemoizedFn(() => {
+    if (isMyself) {
+      return session.refresh();
+    }
+    return userState.refresh();
+  });
+
   const privacyState = useRequest(
     async () => {
       if (userState.data && currentTab) {
@@ -470,6 +477,7 @@ export default function UserCenter({
             user={userState.data as User}
             showFullDid={false}
             onlyProfile={onlyProfile}
+            refreshProfile={onRefreshUser}
             sx={{
               padding: !isMobile ? '40px 24px 24px 40px' : '16px 0 0 0',
               ...(!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {}),
@@ -538,6 +546,7 @@ export default function UserCenter({
           switchPassport={handleSwitchPassport}
           switchProfile={session.switchProfile}
           user={userState.data as User}
+          refreshProfile={onRefreshUser}
           showFullDid={false}
           sx={{
             padding: !isMobile ? '40px 24px 24px 40px' : '16px 0 0 0',

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

@@ -0,0 +1,121 @@
+/**
+ * 用户地址组件
+ */
+import { Box } from '@mui/material';
+import { useMemoizedFn } from 'ahooks';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
+import CountrySelect from '@arcblock/ux/lib/PhoneInput/country-select';
+import type { UserAddress } from '../../../@types';
+import { translations } from '../../libs/locales';
+import EditableField from '../editable-field';
+
+const selectStyle = {
+  width: '100%',
+  px: 2,
+  py: 1,
+  borderRadius: 1,
+  '&:hover': {
+    'fieldset.MuiOutlinedInput-notchedOutline': {
+      borderColor: colors.dividerColor,
+    },
+  },
+  'fieldset.MuiOutlinedInput-notchedOutline': {
+    borderColor: colors.dividerColor,
+    borderRadius: 1,
+  },
+  '.MuiSelect-select': {
+    padding: '0 !important',
+    display: 'flex',
+    alignItems: 'center',
+  },
+};
+
+interface AddressErrors {
+  country?: string;
+  province?: string;
+  city?: string;
+  detailedAddress?: string;
+  postalCode?: string;
+}
+
+export default function AddressEditor({
+  address,
+  errors,
+  handleChange,
+  defaultCountry,
+}: {
+  address: UserAddress;
+  errors: AddressErrors;
+  handleChange: (field: keyof UserAddress, value: string) => void;
+  defaultCountry: string;
+}) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
+
+  return (
+    <Box display="flex" flexDirection="column" gap={2} mt={2}>
+      <EditableField
+        placeholder={t('profile.address.country')}
+        value={address.country || defaultCountry}
+        editable
+        errorMsg={errors.country}
+        label={t('profile.address.country')}>
+        <CountrySelect<'name'>
+          valueField="name"
+          value={address.country || defaultCountry}
+          onChange={(v) => handleChange('country', v)}
+          displayEmpty
+          variant="outlined"
+          selectCountryProps={{
+            hideDialCode: true,
+          }}
+          sx={selectStyle}
+        />
+      </EditableField>
+
+      <Box display="flex" gap={2}>
+        <EditableField
+          value={address.province || ''}
+          onChange={(value) => handleChange('province', value)}
+          placeholder={t('profile.address.province')}
+          label={t('profile.address.province')}
+          editable
+          errorMsg={errors.province}
+        />
+
+        <EditableField
+          value={address.city || ''}
+          onChange={(value) => handleChange('city', value)}
+          placeholder={t('profile.address.city')}
+          label={t('profile.address.city')}
+          editable
+          errorMsg={errors.city}
+        />
+      </Box>
+
+      <EditableField
+        value={address.detailedAddress || ''}
+        onChange={(value) => handleChange('detailedAddress', value)}
+        placeholder={t('profile.address.detailedAddress')}
+        label={t('profile.address.detailedAddress')}
+        component="textarea"
+        editable
+        rows={3}
+        errorMsg={errors.detailedAddress}
+      />
+
+      <EditableField
+        value={address.postalCode || ''}
+        onChange={(value) => handleChange('postalCode', value)}
+        placeholder={t('profile.address.postalCode')}
+        label={t('profile.address.postalCode')}
+        editable
+        errorMsg={errors.postalCode}
+      />
+    </Box>
+  );
+}

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

@@ -30,7 +30,9 @@ export default function Clock({ value }: { value: string }) {
           <span>
             {t('profile.localTime')} {timeInfo.fullDateTime}
           </span>
-        }>
+        }
+        placement="top"
+        arrow>
         <Typography component="span" fontSize={14}>
           ({locale === 'zh' ? `${t(`profile.timezonePhase.${timeInfo.phase}`)} ` : ''}
           {timeInfo.formattedTime})

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

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable import/no-extraneous-dependencies */
-
 import Box from '@mui/material/Box';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import Typography from '@mui/material/Typography';
 import Backdrop, { BackdropProps } from '@mui/material/Backdrop';
 
 import styled from '@emotion/styled';
@@ -17,15 +17,17 @@ import { useCreation, useMemoizedFn, useReactive } from 'ahooks';
 import { useMemo, useRef, useState, memo, forwardRef, useEffect, lazy } from 'react';
 import { translate } from '@arcblock/ux/lib/Locale/util';
 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 { translations } from '../../libs/locales';
-import type { User, UserMetadata, UserPhoneProps } from '../../../@types';
+import type { User, UserAddress, UserMetadata, UserPhoneProps } from '../../../@types';
 import EditableField, { commonInputStyle, inputFieldStyle } from '../editable-field';
 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'));
 const TimezoneIcon = lazy(() => import('@arcblock/icons/lib/Timezone'));
@@ -69,7 +71,7 @@ export default function UserMetadataComponent({
   isMobile: boolean;
   isMyself: boolean;
   user: User;
-  onSave: (v: UserMetadata) => void;
+  onSave: (v: { metadata: UserMetadata; address: UserAddress }) => void;
 }) {
   const [editable, setEditable] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -80,6 +82,13 @@ export default function UserMetadataComponent({
     email: '',
     phone: '',
   });
+  const addressValidateMsg = useReactive<Record<string, string>>({
+    country: '',
+    province: '',
+    city: '',
+    detailedAddress: '',
+    postalCode: '',
+  });
 
   useEffect(() => {
     if (!isMobileView) {
@@ -113,6 +122,31 @@ export default function UserMetadataComponent({
         }
   );
 
+  const address = useCreation(() => {
+    return (
+      user?.address || {
+        country: '',
+        province: '',
+        city: '',
+        detailedAddress: '',
+        postalCode: '',
+      }
+    );
+  }, [user?.address]);
+
+  /**
+   * 获取默认的国家
+   * 如果 address 中存储有 country 信息就使用 address 中的信息
+   * 如果没有根据 locale 获取，如果是中文环境，默认 country 是中国，如果是其他就选择美国
+   */
+  const defaultCountry = useMemo(() => {
+    if (user?.address?.country) {
+      return user.address.country;
+    }
+
+    return locale === 'zh' ? 'China' : 'United States';
+  }, [user?.address?.country, locale]);
+
   const phoneValue = useCreation((): PhoneValue => {
     const phone = metadata.phone ??
       user?.phone ?? {
@@ -143,6 +177,21 @@ export default function UserMetadataComponent({
     metadata[field] = v;
   };
 
+  const onAddressChange = (field: keyof UserAddress, value: string) => {
+    address[field] = value;
+
+    if (field === 'city') {
+      onChange(value, 'location');
+    }
+
+    if (field === 'postalCode') {
+      addressValidateMsg.postalCode =
+        value && !isPostalCode(value, 'any') ? t('profile.address.invalidPostalCode') : '';
+    } else {
+      addressValidateMsg[field] = '';
+    }
+  };
+
   const onEdit = () => {
     if (!isMobileView) {
       setEditable(true);
@@ -159,8 +208,22 @@ export default function UserMetadataComponent({
         (metadata[k] as any) = defaultMetadata[k];
       });
     }
-    validateMsg.email = '';
-    validateMsg.phone = '';
+
+    const defaultAddress: UserAddress = cloneDeep(user?.address) ?? {};
+    if (defaultAddress) {
+      Object.keys(address).forEach((key) => {
+        const k = key as keyof UserAddress;
+        (address[k] as any) = defaultAddress[k];
+      });
+    }
+
+    // 清空校验状态
+    [validateMsg, addressValidateMsg].forEach((o) => {
+      Object.keys(o).forEach((key) => {
+        o[key] = '';
+      });
+    });
+
     if (!isMobileView) {
       setEditable(false);
     } else {
@@ -210,7 +273,17 @@ export default function UserMetadataComponent({
       }
     });
 
-    onSave(metadata);
+    // 单独处理邮政编码验证，避免嵌套三元表达式
+    if (address.postalCode && !isPostalCode(address.postalCode, 'any')) {
+      addressValidateMsg.postalCode = t('profile.address.invalidPostalCode');
+    }
+
+    // 检查是否有错误
+    if ([validateMsg, addressValidateMsg].some((o) => Object.values(o).some((e) => e))) {
+      return;
+    }
+
+    onSave({ metadata, address });
     setEditable(false);
     setVisible(false);
   };
@@ -253,14 +326,42 @@ export default function UserMetadataComponent({
             {t('profile.editProfile')}
           </Button>
         ) : null}
-        <EditableField
-          value={metadata.location ?? ''}
-          onChange={(value) => onChange(value, 'location')}
-          editable={editing}
-          placeholder="Location"
-          label={t('profile.location')}
-          icon={<LocationIcon {...iconSize} />}
-        />
+
+        {editing && isMyself ? (
+          <AddressEditor
+            address={address}
+            errors={addressValidateMsg}
+            handleChange={onAddressChange}
+            defaultCountry={defaultCountry}
+          />
+        ) : (
+          <EditableField
+            value={metadata.location ?? user?.address?.city ?? ''}
+            onChange={(value) => onChange(value, 'location')}
+            editable={editing}
+            placeholder="Location"
+            label={t('profile.location')}
+            tooltip={
+              isMyself ? (
+                <Box fontSize="14px">
+                  <Typography variant="caption" component="p" fontWeight={600}>
+                    {t('profile.address.detailedAddress')}
+                  </Typography>
+                  <Typography variant="caption" component="span">
+                    {address.detailedAddress}
+                  </Typography>
+                </Box>
+              ) : null
+            }
+            renderValue={() => {
+              const fullLocation = [address.country, address.province, address.city || metadata.location || '']
+                .filter(Boolean)
+                .join(' ');
+              return <Typography component="span">{fullLocation}</Typography>;
+            }}
+            icon={<LocationIcon {...iconSize} />}
+          />
+        )}
 
         <EditableField
           value={metadata.timezone || currentTimezone}

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

@@ -15,7 +15,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 import { translations } from '../../libs/locales';
-import type { User, UserMetadata } from '../../../@types';
+import type { User, UserAddress, UserMetadata } from '../../../@types';
 import { formatAxiosError } from '../../libs/utils';
 import { currentTimezone, getStatusDuration, isValidUrl } from './utils';
 import SwitchRole from './switch-role';
@@ -32,6 +32,7 @@ export default function UserBasicInfo({
   switchProfile,
   isMobile = false,
   onlyProfile = false,
+  refreshProfile,
   ...rest
 }: {
   user: User;
@@ -42,6 +43,7 @@ export default function UserBasicInfo({
   size?: number;
   isMobile?: boolean;
   onlyProfile?: boolean;
+  refreshProfile: () => void;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const [userStatus, setUserStatus] = useState<UserMetadata['status']>(undefined);
@@ -77,6 +79,7 @@ export default function UserBasicInfo({
           status: v || {},
         },
       });
+      refreshProfile();
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err as AxiosError));
@@ -91,13 +94,14 @@ export default function UserBasicInfo({
     return null;
   }
 
-  const onSave = async (v: UserMetadata) => {
+  const onSave = async (v: { metadata: UserMetadata; address: UserAddress }) => {
     if (!isMyself) {
       return;
     }
+    const { metadata, address } = v;
     try {
       const newLinks =
-        v?.links
+        metadata?.links
           ?.map((link) => {
             if (!link.url || !isValidUrl(link.url)) return null;
 
@@ -114,10 +118,10 @@ export default function UserBasicInfo({
             }
           })
           .filter((l) => !!l) || [];
-      v.links = newLinks;
-      // TODO: 需要更新 SDK
+      metadata.links = newLinks;
       // @ts-ignore
-      await client.user.saveProfile({ metadata: v });
+      await client.user.saveProfile({ metadata, address });
+      refreshProfile();
     } catch (err) {
       console.error(err);
       Toast.error(formatAxiosError(err as AxiosError));

package/src/UserCenter/libs/locales.ts

@@ -141,6 +141,15 @@ export const translations = {
         afternoon: '下午',
         night: '晚上',
       },
+      address: {
+        title: '地址',
+        country: '国家/地区',
+        province: '州/省',
+        city: '城市/镇',
+        detailedAddress: '详细地址',
+        postalCode: '邮政编码',
+        invalidPostalCode: '邮政编码格式不正确',
+      },
     },
   },
   en: {
@@ -286,6 +295,15 @@ export const translations = {
         afternoon: 'PM',
         night: 'PM',
       },
+      address: {
+        title: 'Address',
+        country: 'Country/Region',
+        province: 'State/Province',
+        city: 'City/Town',
+        detailedAddress: 'Detailed Address',
+        postalCode: 'Postal Code',
+        invalidPostalCode: 'Postal code is invalid',
+      },
     },
   },
 };