@blocklet/ui-react 2.12.15 → 2.12.17

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

@@ -57,6 +57,10 @@ export declare enum StatusEnum {
     OffSick = "off_sick",
     WorkingRemotely = "working_remotely"
 }
+export type UserPhoneProps = {
+    country: string;
+    phoneNumber: string;
+};
 export type UserMetadata = {
     bio?: string;
     location?: string;
@@ -70,7 +74,7 @@ export type UserMetadata = {
     links?: UserMetadataLink[];
     cover?: string;
     email?: string;
-    phone?: string;
+    phone?: UserPhoneProps;
 };
 export type User = UserPublicInfo & {
     role: string;

package/lib/UserCenter/components/editable-field.d.ts

@@ -18,6 +18,7 @@ interface EditableFieldProps {
     verified?: boolean;
     errorMsg?: string;
     canEdit?: boolean;
+    renderValue?: (value: string) => React.ReactNode;
 }
-declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, }: 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, }: EditableFieldProps): JSX.Element | null;
 export default EditableField;

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

@@ -43,7 +43,8 @@ function EditableField({
   inline = true,
   style = {},
   verified = false,
-  canEdit = true
+  canEdit = true,
+  renderValue
 }) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -146,7 +147,7 @@ function EditableField({
                   whiteSpace: "pre-wrap",
                   ...inline ? { whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } : {}
                 },
-                children: value
+                children: renderValue ? renderValue(value) : value
               }
             ),
             verified && /* @__PURE__ */ jsx(VerifiedIcon, { color: "success", style: { fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 } })

package/lib/UserCenter/components/user-center.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '@mui/material';
-export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, embed, }: {
+export default function UserCenter({ children, notLoginContent, currentTab, contentProps, disableAutoRedirect, hideFooter, headerProps, footerProps, userDid, stickySidebar, embed, onlyProfile, }: {
     readonly children: any;
     readonly notLoginContent: any;
     readonly currentTab: string;
@@ -12,4 +12,5 @@ export default function UserCenter({ children, notLoginContent, currentTab, cont
     readonly userDid?: string;
     readonly stickySidebar?: boolean;
     readonly embed?: boolean;
+    readonly onlyProfile?: boolean;
 }): import("react").JSX.Element | null;

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

@@ -70,7 +70,9 @@ export default function UserCenter({
   footerProps = {},
   userDid = void 0,
   stickySidebar = false,
-  embed = false
+  embed = false,
+  onlyProfile = false
+  // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
 }) {
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: "md" });
@@ -386,6 +388,26 @@ export default function UserCenter({
         userCenterTabs.length === 0 && emptyContent
       ] });
     }
+    if (onlyProfile) {
+      return /* @__PURE__ */ jsx(ContentWrapper, { display: "flex", flexDirection: isMobile ? "column" : "row", children: /* @__PURE__ */ jsx(
+        UserBasicInfo,
+        {
+          isMobile,
+          order: isMobile ? 1 : "unset",
+          isMyself,
+          switchPassport: handleSwitchPassport,
+          switchProfile: session.switchProfile,
+          user: userState.data,
+          showFullDid: false,
+          onlyProfile,
+          sx: {
+            padding: !isMobile ? "40px 24px 24px 40px" : "16px 0 0 0",
+            ...!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {},
+            boxSizing: "content-box"
+          }
+        }
+      ) });
+    }
     return /* @__PURE__ */ jsxs(ContentWrapper, { display: "flex", flexDirection: isMobile ? "column" : "row", children: [
       /* @__PURE__ */ jsxs(Box, { flex: "1", className: "user-center-tabs", order: isMobile ? 2 : "unset", children: [
         userCenterTabs.length > 0 && currentTab ? /* @__PURE__ */ jsxs(
@@ -412,7 +434,7 @@ export default function UserCenter({
                     ".MuiTabs-flexContainer": {
                       gap: 3,
                       ".MuiButtonBase-root": {
-                        padding: "40px 4px 32px 4px",
+                        padding: isMobile ? "16px 4px" : "40px 4px 32px 4px",
                         fontSize: 16
                       },
                       ".MuiTab-root": {
@@ -453,7 +475,7 @@ export default function UserCenter({
           user: userState.data,
           showFullDid: false,
           sx: {
-            padding: !isMobile ? "40px 24px 24px 40px" : "24px 0",
+            padding: !isMobile ? "40px 24px 24px 40px" : "16px 0 0 0",
             ...!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {},
             boxSizing: "content-box"
           }

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

@@ -1,5 +1,6 @@
 import type { User, UserMetadata } from '../../../@types';
-export default function UserMetadataComponent({ isMyself, user, onSave, }: {
+export default function UserMetadataComponent({ isMyself, user, onSave, isMobile, }: {
+    isMobile: boolean;
     isMyself: boolean;
     user: User;
     onSave: (v: UserMetadata) => void;

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

@@ -7,12 +7,13 @@ import Backdrop from "@mui/material/Backdrop";
 import styled from "@emotion/styled";
 import { joinURL } from "ufo";
 import Button from "@arcblock/ux/lib/Button";
+import PhoneInput, { validatePhoneNumber } from "@arcblock/ux/lib/PhoneInput";
 import cloneDeep from "lodash/cloneDeep";
 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 isMobilePhone from "validator/lib/isMobilePhone";
+import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { useBrowser } from "@arcblock/react-hooks";
 import { translations } from "../../libs/locales.js";
@@ -52,7 +53,8 @@ BackdropWrap.displayName = "BackdropWrap";
 export default function UserMetadataComponent({
   isMyself,
   user,
-  onSave
+  onSave,
+  isMobile
 }) {
   const [editable, setEditable] = useState(false);
   const [visible, setVisible] = useState(false);
@@ -82,9 +84,34 @@ export default function UserMetadataComponent({
     user?.metadata ? cloneDeep(user.metadata) : {
       joinedAt: user?.createdAt,
       email: user?.email,
-      phone: user?.phone
+      phone: {
+        country: "cn",
+        phoneNumber: user?.phone ?? ""
+      }
     }
   );
+  const phoneValue = useCreation(() => {
+    const phone = metadata.phone ?? user?.phone ?? {
+      country: "cn",
+      phone: ""
+    };
+    if (typeof phone === "string") {
+      return {
+        country: "cn",
+        phone
+      };
+    }
+    if (typeof phone === "object") {
+      return {
+        country: phone.country,
+        phone: phone.phoneNumber
+      };
+    }
+    return {
+      country: "cn",
+      phone: ""
+    };
+  }, [metadata.phone, user?.phone]);
   const onChange = (v, field) => {
     metadata[field] = v;
   };
@@ -155,159 +182,223 @@ export default function UserMetadataComponent({
     setVisible(false);
   };
   const renderEdit = (editing, mode = "self") => {
-    return /* @__PURE__ */ jsxs(MetadataInfo, { pt: 2, display: "flex", flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: metadata.bio ?? "",
-          onChange: (value) => onChange(value, "bio"),
-          editable: editing,
-          placeholder: "Bio",
-          component: "textarea",
-          inline: false,
-          rows: 3,
-          label: t("profile.bio"),
-          maxLength: bioMaxLength,
-          style: {
-            ...editing ? { marginBottom: 8 } : {}
-          }
-        }
-      ),
-      !editing && isMyself ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: "large",
-          variant: "outlined",
-          sx: {
-            ...defaultButtonStyle,
-            mb: 2,
-            mt: 2,
-            height: "40px"
-          },
-          onClick: onEdit,
-          fullWidth: true,
-          children: t("profile.editProfile")
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: metadata.location ?? "",
-          onChange: (value) => onChange(value, "location"),
-          editable: editing,
-          placeholder: "Location",
-          label: t("profile.location"),
-          icon: /* @__PURE__ */ jsx(LocationIcon, { ...iconSize })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: metadata.timezone || currentTimezone,
-          onChange: (value) => onChange(value, "timezone"),
-          editable: editing,
-          placeholder: "timezone",
-          icon: /* @__PURE__ */ jsx(TimezoneIcon, { ...iconSize }),
-          label: t("profile.timezone"),
-          tooltip: /* @__PURE__ */ jsxs("p", { style: { display: "flex", margin: 0 }, children: [
-            /* @__PURE__ */ jsx("span", { style: { marginRight: "4px" }, children: t("profile.localTime") }),
-            /* @__PURE__ */ jsx(Clock, { timezone: metadata.timezone, locale })
-          ] }),
-          children: /* @__PURE__ */ jsx(
-            TimezoneSelect,
+    return /* @__PURE__ */ jsxs(
+      MetadataInfo,
+      {
+        pt: 2,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: !isMobile ? "16px" : "4px",
+        children: [
+          /* @__PURE__ */ jsx(
+            EditableField,
+            {
+              value: metadata.bio ?? "",
+              onChange: (value) => onChange(value, "bio"),
+              editable: editing,
+              placeholder: "Bio",
+              component: "textarea",
+              inline: false,
+              rows: 3,
+              label: t("profile.bio"),
+              maxLength: bioMaxLength,
+              style: {
+                ...editing ? { marginBottom: 8 } : {}
+              }
+            }
+          ),
+          !editing && isMyself ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: isMobile ? "small" : "large",
+              variant: "outlined",
+              sx: {
+                ...defaultButtonStyle,
+                mb: !isMobile ? 2 : "4px",
+                mt: !isMobile ? 2 : "4px",
+                height: !isMobile ? "40px" : "32px"
+              },
+              onClick: onEdit,
+              fullWidth: true,
+              children: t("profile.editProfile")
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            EditableField,
+            {
+              value: metadata.location ?? "",
+              onChange: (value) => onChange(value, "location"),
+              editable: editing,
+              placeholder: "Location",
+              label: t("profile.location"),
+              icon: /* @__PURE__ */ jsx(LocationIcon, { ...iconSize })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EditableField,
             {
               value: metadata.timezone || currentTimezone,
               onChange: (value) => onChange(value, "timezone"),
-              disabled: !editing
+              editable: editing,
+              placeholder: "timezone",
+              icon: /* @__PURE__ */ jsx(TimezoneIcon, { ...iconSize }),
+              label: t("profile.timezone"),
+              tooltip: /* @__PURE__ */ jsxs("p", { style: { display: "flex", margin: 0 }, children: [
+                /* @__PURE__ */ jsx("span", { style: { marginRight: "4px" }, children: t("profile.localTime") }),
+                /* @__PURE__ */ jsx(Clock, { timezone: metadata.timezone, locale })
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                TimezoneSelect,
+                {
+                  value: metadata.timezone || currentTimezone,
+                  onChange: (value) => onChange(value, "timezone"),
+                  disabled: !editing
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: metadata.email ?? user?.email ?? "",
-          editable: editing,
-          canEdit: !emailVerified,
-          verified: emailVerified,
-          placeholder: "Email",
-          icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
-          label: t("profile.email"),
-          onChange: (value) => onChange(value, "email"),
-          errorMsg: validateMsg.email,
-          onValueValidate: (value) => {
-            let msg = "";
-            if (!!value && !isEmail(value)) {
-              msg = t("profile.emailInvalid");
+          ),
+          /* @__PURE__ */ jsx(
+            EditableField,
+            {
+              value: metadata.email ?? user?.email ?? "",
+              editable: editing,
+              canEdit: !emailVerified,
+              verified: emailVerified,
+              placeholder: "Email",
+              icon: /* @__PURE__ */ jsx(EmailIcon, { ...iconSize }),
+              label: t("profile.email"),
+              onChange: (value) => onChange(value, "email"),
+              errorMsg: validateMsg.email,
+              renderValue: (value) => /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: `mailto:${value}`,
+                  style: {
+                    color: "inherit",
+                    textDecoration: "none"
+                  },
+                  children: value
+                }
+              ),
+              onValueValidate: (value) => {
+                let msg = "";
+                if (!!value && !isEmail(value)) {
+                  msg = t("profile.emailInvalid");
+                }
+                validateMsg.email = msg;
+              }
             }
-            validateMsg.email = msg;
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        EditableField,
-        {
-          value: metadata.phone ?? user?.phone ?? "",
-          editable: editing,
-          canEdit: !phoneVerified,
-          verified: phoneVerified,
-          placeholder: "Phone",
-          icon: /* @__PURE__ */ jsx(PhoneIcon, { ...iconSize }),
-          onChange: (value) => onChange(value, "phone"),
-          label: t("profile.phone"),
-          errorMsg: validateMsg.phone,
-          onValueValidate: (value) => {
-            let msg = "";
-            if (!!value && !isMobilePhone(value)) {
-              msg = t("profile.phoneInvalid");
+          ),
+          /* @__PURE__ */ jsx(
+            EditableField,
+            {
+              value: phoneValue.phone,
+              editable: editing,
+              canEdit: !phoneVerified,
+              verified: phoneVerified,
+              placeholder: "Phone",
+              icon: /* @__PURE__ */ jsx(PhoneIcon, { ...iconSize }),
+              onChange: (value) => onChange(value, "phone"),
+              label: t("profile.phone"),
+              renderValue: () => {
+                return /* @__PURE__ */ jsx(PhoneInput, { value: phoneValue, preview: true });
+              },
+              children: /* @__PURE__ */ jsx(
+                PhoneInput,
+                {
+                  variant: "outlined",
+                  className: "editable-field",
+                  InputProps: {
+                    sx: { backgroundColor: "transparent" },
+                    placeholder: "Phone"
+                  },
+                  value: phoneValue,
+                  error: !!validateMsg.phone,
+                  helperText: validateMsg.phone,
+                  sx: {
+                    width: "100%",
+                    ".MuiOutlinedInput-root": {
+                      "&:hover": {
+                        fieldset: {
+                          borderColor: colors.dividerColor
+                        }
+                      },
+                      "&.Mui-focused": {
+                        fieldset: {
+                          borderColor: colors.dividerColor
+                        }
+                      }
+                    },
+                    fieldset: {
+                      borderColor: colors.dividerColor
+                    }
+                  },
+                  onChange: (value) => {
+                    const isValid = validatePhoneNumber(value.phone);
+                    if (!isValid) {
+                      validateMsg.phone = t("profile.phoneInvalid");
+                    } else {
+                      validateMsg.phone = "";
+                    }
+                    onChange(
+                      {
+                        country: value.country,
+                        phoneNumber: value.phone
+                      },
+                      "phone"
+                    );
+                  }
+                }
+              )
             }
-            validateMsg.phone = msg;
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(LinkPreviewInput, { editable: editing, links, onChange: handleLinksChange }),
-      editing && isMyself ? /* @__PURE__ */ jsxs(
-        Box,
-        {
-          display: "flex",
-          gap: 1,
-          style: { width: "100%" },
-          justifyContent: "flex-end",
-          flexDirection: mode === "drawer" ? "column" : "row",
-          children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                fullWidth: mode === "drawer",
-                size: "small",
-                variant: "outlined",
-                sx: { ...defaultButtonStyle, minWidth: "54px" },
-                onClick: onCancel,
-                children: t("common.cancel")
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                fullWidth: mode === "drawer",
-                size: "small",
-                disabled: !!validateMsg.email || !!validateMsg.phone,
-                variant: "outlined",
-                sx: {
-                  ...primaryButtonStyle,
-                  minWidth: "54px",
-                  "&.Mui-disabled": {
-                    backgroundColor: "rgba(0, 0, 0, 0.12)"
+          ),
+          /* @__PURE__ */ jsx(LinkPreviewInput, { editable: editing, links, onChange: handleLinksChange }),
+          editing && isMyself ? /* @__PURE__ */ jsxs(
+            Box,
+            {
+              display: "flex",
+              gap: 1,
+              style: { width: "100%" },
+              justifyContent: "flex-end",
+              flexDirection: mode === "drawer" ? "column" : "row",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    fullWidth: mode === "drawer",
+                    size: "small",
+                    variant: "outlined",
+                    sx: { ...defaultButtonStyle, minWidth: "54px" },
+                    onClick: onCancel,
+                    children: t("common.cancel")
                   }
-                },
-                onClick: handleSave,
-                children: t("common.save")
-              }
-            )
-          ]
-        }
-      ) : null
-    ] });
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    fullWidth: mode === "drawer",
+                    size: "small",
+                    disabled: !!validateMsg.email || !!validateMsg.phone,
+                    variant: "outlined",
+                    sx: {
+                      ...primaryButtonStyle,
+                      minWidth: "54px",
+                      "&.Mui-disabled": {
+                        backgroundColor: "rgba(0, 0, 0, 0.12)"
+                      }
+                    },
+                    onClick: handleSave,
+                    children: t("common.save")
+                  }
+                )
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     renderEdit(editable),
@@ -374,9 +465,6 @@ export default function UserMetadataComponent({
   ] });
 }
 const MetadataInfo = styled(Box)`
-  gap: 16px;
-  justify-content: space-between;
-  align-items: flex-start;
   width: 100%;
 
   .MuiOutlinedInput-root {

package/lib/UserCenter/components/user-info/timezone-select.js

@@ -70,11 +70,8 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = "self
             size: "small",
             fullWidth: true,
             onChange: (event) => setSearchText(event.target.value),
-            onKeyDown: (e) => {
-              if (e.key !== "Escape") {
-                e.stopPropagation();
-              }
-            },
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => e.stopPropagation(),
             sx: {
               marginTop: "8px",
               "& .MuiOutlinedInput-root": {

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, ...rest }: {
+export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassport, switchProfile, isMobile, onlyProfile, ...rest }: {
     user: User;
     isMyself?: boolean;
     showFullDid?: boolean;
@@ -8,4 +8,5 @@ export default function UserBasicInfo({ user, isMyself, showFullDid, switchPassp
     switchProfile: () => void;
     size?: number;
     isMobile?: boolean;
+    onlyProfile?: boolean;
 } & BoxProps): import("react").JSX.Element | null;

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

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Box, Divider, Typography } from "@mui/material";
+import { Box, Divider, Typography, IconButton, Collapse } from "@mui/material";
 import Avatar from "@arcblock/ux/lib/Avatar";
 import DID from "@arcblock/ux/lib/DID";
 import { useMemoizedFn } from "ahooks";
@@ -10,6 +10,8 @@ import { useEffect, useState } from "react";
 import Toast from "@arcblock/ux/lib/Toast";
 import { temp as colors } from "@arcblock/ux/lib/Colors";
 import { parseURL, joinURL } from "ufo";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { translations } from "../../libs/locales.js";
 import { formatAxiosError } from "../../libs/utils.js";
 import { currentTimezone, getStatusDuration, isValidUrl } from "./utils.js";
@@ -25,6 +27,7 @@ export default function UserBasicInfo({
   switchPassport,
   switchProfile,
   isMobile = false,
+  onlyProfile = false,
   ...rest
 }) {
   const { locale } = useLocaleContext();
@@ -32,9 +35,13 @@ export default function UserBasicInfo({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, "en", data);
   });
+  const [expanded, setExpanded] = useState(!isMobile || onlyProfile);
   useEffect(() => {
     setUserStatus(user?.metadata?.status);
   }, [user]);
+  useEffect(() => {
+    setExpanded(!isMobile || onlyProfile);
+  }, [isMobile, onlyProfile]);
   const onUpdateUserStatus = async (v) => {
     if (!isMyself) {
       return;
@@ -57,6 +64,9 @@ export default function UserBasicInfo({
       Toast.error(formatAxiosError(err));
     }
   };
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+  };
   if (!user) {
     return null;
   }
@@ -184,11 +194,38 @@ export default function UserBasicInfo({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(UserMetadataComponent, { isMyself, user, onSave }),
+        /* @__PURE__ */ jsx(UserMetadataComponent, { isMobile, isMyself, user, onSave }),
         isMyself ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Divider, { sx: { my: 3, borderColor: colors.dividerColor } }),
-          /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", fontSize: "14px", mb: 2, children: t("profile.justForYou") }),
-          /* @__PURE__ */ jsx(UserInfo, { user, isMySelf: isMyself })
+          /* @__PURE__ */ jsx(Divider, { sx: { my: isMobile ? 1 : 3, borderColor: colors.dividerColor } }),
+          isMobile && !onlyProfile ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "center",
+                mb: 0
+              },
+              children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: toggleExpand,
+                  sx: {
+                    backgroundColor: colors.backgroundsBgField,
+                    "&:hover": {
+                      backgroundColor: colors.backgroundsBgField,
+                      opacity: 0.8
+                    }
+                  },
+                  children: expanded ? /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {}) : /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {})
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(Collapse, { in: expanded, timeout: "auto", children: [
+            /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", fontSize: "14px", mb: 2, children: t("profile.justForYou") }),
+            /* @__PURE__ */ jsx(UserInfo, { user, isMySelf: isMyself })
+          ] })
         ] }) : null
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "2.12.15",
+  "version": "2.12.17",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -33,10 +33,10 @@
   },
   "dependencies": {
     "@abtnode/constant": "^1.16.39",
-    "@arcblock/bridge": "^2.12.15",
-    "@arcblock/react-hooks": "^2.12.15",
+    "@arcblock/bridge": "^2.12.17",
+    "@arcblock/react-hooks": "^2.12.17",
     "@arcblock/ws": "^1.19.15",
-    "@blocklet/did-space-react": "^1.0.30",
+    "@blocklet/did-space-react": "^1.0.31",
     "@iconify-icons/logos": "^1.2.36",
     "@iconify-icons/material-symbols": "^1.2.58",
     "@iconify/react": "^4.1.1",
@@ -87,5 +87,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "16a4f35c677fc2ca2118801dc62984b71734df70"
+  "gitHead": "de1814f4c2eca44000845ce0db42e9d30d487e80"
 }

package/src/@types/index.ts

@@ -66,6 +66,11 @@ export enum StatusEnum {
   WorkingRemotely = 'working_remotely',
 }
 
+export type UserPhoneProps = {
+  country: string;
+  phoneNumber: string;
+};
+
 export type UserMetadata = {
   bio?: string;
   location?: string;
@@ -80,7 +85,7 @@ export type UserMetadata = {
   cover?: string;
   // 这两个字段是 User, 方便数据更新，在保存时同步
   email?: string;
-  phone?: string;
+  phone?: UserPhoneProps;
 };
 
 export type User = UserPublicInfo & {

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

@@ -25,6 +25,7 @@ interface EditableFieldProps {
   verified?: boolean;
   errorMsg?: string;
   canEdit?: boolean;
+  renderValue?: (value: string) => React.ReactNode;
 }
 
 const inputFieldStyle = {
@@ -65,6 +66,7 @@ function EditableField({
   style = {},
   verified = false,
   canEdit = true,
+  renderValue,
 }: EditableFieldProps) {
   const { locale } = useLocaleContext();
   const t = useMemoizedFn((key, data = {}) => {
@@ -160,7 +162,7 @@ function EditableField({
                 whiteSpace: 'pre-wrap',
                 ...(inline ? { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } : {}),
               }}>
-              {value}
+              {renderValue ? renderValue(value) : value}
             </Typography>
             {verified && (
               <VerifiedIcon color="success" style={{ fontSize: 16, width: 16, marginLeft: 4, flexShrink: 0 }} />

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

@@ -81,6 +81,7 @@ export default function UserCenter({
   userDid = undefined,
   stickySidebar = false,
   embed = false,
+  onlyProfile = false, // 只显示 profile 页面，用于 ArcSphere 只需要显示 Profile 的内容
 }: {
   readonly children: any;
   readonly notLoginContent: any;
@@ -95,6 +96,7 @@ export default function UserCenter({
   readonly userDid?: string;
   readonly stickySidebar?: boolean;
   readonly embed?: boolean;
+  readonly onlyProfile?: boolean;
 }) {
   const { locale } = useLocaleContext();
   const isMobile = useMobile({ key: 'md' });
@@ -456,6 +458,28 @@ export default function UserCenter({
       );
     }
 
+    if (onlyProfile) {
+      return (
+        <ContentWrapper display="flex" flexDirection={isMobile ? 'column' : 'row'}>
+          <UserBasicInfo
+            isMobile={isMobile}
+            order={isMobile ? 1 : 'unset'}
+            isMyself={isMyself}
+            switchPassport={handleSwitchPassport}
+            switchProfile={session.switchProfile}
+            user={userState.data as User}
+            showFullDid={false}
+            onlyProfile={onlyProfile}
+            sx={{
+              padding: !isMobile ? '40px 24px 24px 40px' : '16px 0 0 0',
+              ...(!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {}),
+              boxSizing: 'content-box',
+            }}
+          />
+        </ContentWrapper>
+      );
+    }
+
     return (
       <ContentWrapper display="flex" flexDirection={isMobile ? 'column' : 'row'}>
         <Box flex="1" className="user-center-tabs" order={isMobile ? 2 : 'unset'}>
@@ -479,7 +503,7 @@ export default function UserCenter({
                   '.MuiTabs-flexContainer': {
                     gap: 3,
                     '.MuiButtonBase-root': {
-                      padding: '40px 4px 32px 4px',
+                      padding: isMobile ? '16px 4px' : '40px 4px 32px 4px',
                       fontSize: 16,
                     },
                     '.MuiTab-root': {
@@ -516,7 +540,7 @@ export default function UserCenter({
           user={userState.data as User}
           showFullDid={false}
           sx={{
-            padding: !isMobile ? '40px 24px 24px 40px' : '24px 0',
+            padding: !isMobile ? '40px 24px 24px 40px' : '16px 0 0 0',
             ...(!isMobile ? { width: 320, maxWidth: 320, flexShrink: 0 } : {}),
             boxSizing: 'content-box',
           }}

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

@@ -9,18 +9,19 @@ import Backdrop, { BackdropProps } from '@mui/material/Backdrop';
 import styled from '@emotion/styled';
 import { joinURL } from 'ufo';
 import Button from '@arcblock/ux/lib/Button';
+import PhoneInput, { PhoneValue, validatePhoneNumber } from '@arcblock/ux/lib/PhoneInput';
 import cloneDeep from 'lodash/cloneDeep';
 
 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 isMobilePhone from 'validator/lib/isMobilePhone';
+import { temp as colors } from '@arcblock/ux/lib/Colors';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 
 import { useBrowser } from '@arcblock/react-hooks';
 import { translations } from '../../libs/locales';
-import type { User, UserMetadata } from '../../../@types';
+import type { User, UserMetadata, UserPhoneProps } from '../../../@types';
 import EditableField from '../editable-field';
 import { LinkPreviewInput } from './link-preview-input';
 import { currentTimezone, defaultButtonStyle, primaryButtonStyle } from './utils';
@@ -64,7 +65,9 @@ export default function UserMetadataComponent({
   isMyself,
   user,
   onSave,
+  isMobile,
 }: {
+  isMobile: boolean;
   isMyself: boolean;
   user: User;
   onSave: (v: UserMetadata) => void;
@@ -104,11 +107,40 @@ export default function UserMetadataComponent({
       : {
           joinedAt: user?.createdAt,
           email: user?.email,
-          phone: user?.phone,
+          phone: {
+            country: 'cn',
+            phoneNumber: user?.phone ?? '',
+          },
         }
   );
 
-  const onChange = (v: any, field: keyof UserMetadata | 'email') => {
+  const phoneValue = useCreation((): PhoneValue => {
+    const phone = metadata.phone ??
+      user?.phone ?? {
+        country: 'cn',
+        phone: '',
+      };
+
+    if (typeof phone === 'string') {
+      return {
+        country: 'cn',
+        phone,
+      };
+    }
+    if (typeof phone === 'object') {
+      return {
+        country: phone.country,
+        phone: (phone as UserPhoneProps).phoneNumber,
+      };
+    }
+
+    return {
+      country: 'cn',
+      phone: '',
+    };
+  }, [metadata.phone, user?.phone]);
+
+  const onChange = (v: any, field: keyof UserMetadata | 'email' | 'phone') => {
     metadata[field] = v;
   };
 
@@ -186,7 +218,13 @@ export default function UserMetadataComponent({
 
   const renderEdit = (editing: boolean, mode: 'drawer' | 'self' = 'self') => {
     return (
-      <MetadataInfo pt={2} display="flex" flexDirection="column">
+      <MetadataInfo
+        pt={2}
+        display="flex"
+        flexDirection="column"
+        justifyContent="space-between"
+        alignItems="flex-start"
+        gap={!isMobile ? '16px' : '4px'}>
         <EditableField
           value={metadata.bio ?? ''}
           onChange={(value) => onChange(value, 'bio')}
@@ -203,13 +241,13 @@ export default function UserMetadataComponent({
         />
         {!editing && isMyself ? (
           <Button
-            size="large"
+            size={isMobile ? 'small' : 'large'}
             variant="outlined"
             sx={{
               ...defaultButtonStyle,
-              mb: 2,
-              mt: 2,
-              height: '40px',
+              mb: !isMobile ? 2 : '4px',
+              mt: !isMobile ? 2 : '4px',
+              height: !isMobile ? '40px' : '32px',
             }}
             onClick={onEdit}
             fullWidth>
@@ -255,6 +293,16 @@ export default function UserMetadataComponent({
           label={t('profile.email')}
           onChange={(value) => onChange(value, 'email')}
           errorMsg={validateMsg.email}
+          renderValue={(value) => (
+            <a
+              href={`mailto:${value}`}
+              style={{
+                color: 'inherit',
+                textDecoration: 'none',
+              }}>
+              {value}
+            </a>
+          )}
           onValueValidate={(value) => {
             let msg = '';
             if (!!value && !isEmail(value)) {
@@ -265,7 +313,7 @@ export default function UserMetadataComponent({
         />
 
         <EditableField
-          value={metadata.phone ?? user?.phone ?? ''}
+          value={phoneValue.phone}
           editable={editing}
           canEdit={!phoneVerified}
           verified={phoneVerified}
@@ -273,15 +321,54 @@ export default function UserMetadataComponent({
           icon={<PhoneIcon {...iconSize} />}
           onChange={(value) => onChange(value, 'phone')}
           label={t('profile.phone')}
-          errorMsg={validateMsg.phone}
-          onValueValidate={(value) => {
-            let msg = '';
-            if (!!value && !isMobilePhone(value)) {
-              msg = t('profile.phoneInvalid');
-            }
-            validateMsg.phone = msg;
-          }}
-        />
+          renderValue={() => {
+            return <PhoneInput value={phoneValue} preview />;
+          }}>
+          <PhoneInput
+            variant="outlined"
+            className="editable-field"
+            InputProps={{
+              sx: { backgroundColor: 'transparent' },
+              placeholder: 'Phone',
+            }}
+            value={phoneValue}
+            error={!!validateMsg.phone}
+            helperText={validateMsg.phone}
+            sx={{
+              width: '100%',
+              '.MuiOutlinedInput-root': {
+                '&:hover': {
+                  fieldset: {
+                    borderColor: colors.dividerColor,
+                  },
+                },
+                '&.Mui-focused': {
+                  fieldset: {
+                    borderColor: colors.dividerColor,
+                  },
+                },
+              },
+              fieldset: {
+                borderColor: colors.dividerColor,
+              },
+            }}
+            onChange={(value: any) => {
+              const isValid = validatePhoneNumber(value.phone);
+              if (!isValid) {
+                validateMsg.phone = t('profile.phoneInvalid');
+              } else {
+                validateMsg.phone = '';
+              }
+              onChange(
+                {
+                  country: value.country,
+                  phoneNumber: value.phone,
+                },
+                'phone'
+              );
+            }}
+          />
+        </EditableField>
 
         <LinkPreviewInput editable={editing} links={links} onChange={handleLinksChange} />
         {editing && isMyself ? (
@@ -374,9 +461,6 @@ export default function UserMetadataComponent({
   );
 }
 const MetadataInfo = styled(Box)`
-  gap: 16px;
-  justify-content: space-between;
-  align-items: flex-start;
   width: 100%;
 
   .MuiOutlinedInput-root {

package/src/UserCenter/components/user-info/timezone-select.tsx

@@ -82,11 +82,8 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
           size="small"
           fullWidth
           onChange={(event) => setSearchText(event.target.value)}
-          onKeyDown={(e) => {
-            if (e.key !== 'Escape') {
-              e.stopPropagation();
-            }
-          }}
+          onClick={(e) => e.stopPropagation()}
+          onKeyDown={(e) => e.stopPropagation()}
           sx={{
             marginTop: '8px',
             '& .MuiOutlinedInput-root': {

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

@@ -1,4 +1,4 @@
-import { Box, Divider, Typography } from '@mui/material';
+import { Box, Divider, Typography, IconButton, Collapse } from '@mui/material';
 import type { BoxProps } from '@mui/material';
 import Avatar from '@arcblock/ux/lib/Avatar';
 import DID from '@arcblock/ux/lib/DID';
@@ -11,6 +11,8 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { temp as colors } from '@arcblock/ux/lib/Colors';
 import type { AxiosError } from 'axios';
 import { parseURL, joinURL } from 'ufo';
+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';
@@ -29,6 +31,7 @@ export default function UserBasicInfo({
   switchPassport,
   switchProfile,
   isMobile = false,
+  onlyProfile = false,
   ...rest
 }: {
   user: User;
@@ -38,6 +41,7 @@ export default function UserBasicInfo({
   switchProfile: () => void;
   size?: number;
   isMobile?: boolean;
+  onlyProfile?: boolean;
 } & BoxProps) {
   const { locale } = useLocaleContext();
   const [userStatus, setUserStatus] = useState<UserMetadata['status']>(undefined);
@@ -45,10 +49,17 @@ export default function UserBasicInfo({
     return translate(translations, key, locale, 'en', data);
   });
 
+  const [expanded, setExpanded] = useState(!isMobile || onlyProfile);
+
   useEffect(() => {
     setUserStatus(user?.metadata?.status);
   }, [user]);
 
+  // Add effect to handle mobile state changes
+  useEffect(() => {
+    setExpanded(!isMobile || onlyProfile);
+  }, [isMobile, onlyProfile]);
+
   const onUpdateUserStatus = async (v: UserMetadata['status']) => {
     if (!isMyself) {
       return;
@@ -72,6 +83,10 @@ export default function UserBasicInfo({
     }
   };
 
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+  };
+
   if (!user) {
     return null;
   }
@@ -187,14 +202,37 @@ export default function UserBasicInfo({
           <DID did={user.did} showQrcode copyable compact={!showFullDid} responsive={!showFullDid} locale={locale} />
         </Box>
       </Box>
-      <UserMetadataComponent isMyself={isMyself} user={user} onSave={onSave} />
+      <UserMetadataComponent isMobile={isMobile} isMyself={isMyself} user={user} onSave={onSave} />
       {isMyself ? (
         <>
-          <Divider sx={{ my: 3, borderColor: colors.dividerColor }} />
-          <Typography component="p" color="text.secondary" fontSize="14px" mb={2}>
-            {t('profile.justForYou')}
-          </Typography>
-          <UserInfo user={user} isMySelf={isMyself} />
+          <Divider sx={{ my: isMobile ? 1 : 3, borderColor: colors.dividerColor }} />
+          {isMobile && !onlyProfile ? (
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                mb: 0,
+              }}>
+              <IconButton
+                size="small"
+                onClick={toggleExpand}
+                sx={{
+                  backgroundColor: colors.backgroundsBgField,
+                  '&:hover': {
+                    backgroundColor: colors.backgroundsBgField,
+                    opacity: 0.8,
+                  },
+                }}>
+                {expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+              </IconButton>
+            </Box>
+          ) : null}
+          <Collapse in={expanded} timeout="auto">
+            <Typography component="p" color="text.secondary" fontSize="14px" mb={2}>
+              {t('profile.justForYou')}
+            </Typography>
+            <UserInfo user={user} isMySelf={isMyself} />
+          </Collapse>
         </>
       ) : null}
     </Box>