@blocklet/ui-react 3.2.8 → 3.2.10

package/lib/UserCenter/components/user-info/link-preview-input.js

@@ -1,6 +1,6 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { useState as C, useMemo as k } from "react";
-import { styled as I, Box as p, Typography as y, IconButton as D, Button as U, useTheme as S, FormControl as F, TextField as B } from "@mui/material";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { useState as I, useMemo as C } from "react";
+import { styled as k, Box as p, Typography as y, IconButton as D, Button as U, useTheme as S, FormControl as B, TextField as F } from "@mui/material";
 import { Remove as T, Add as _ } from "@mui/icons-material";
 import { translate as z } from "@arcblock/ux/lib/Locale/util";
 import { useMemoizedFn as E } from "ahooks";
@@ -8,48 +8,49 @@ import { useLocaleContext as M } from "@arcblock/ux/lib/Locale/context";
 import R from "@arcblock/icons/lib/Link";
 import { mergeSx as j } from "@arcblock/ux/lib/Util/style";
 import { withoutProtocol as A } from "ufo";
-import { isValidUrl as h, isDuplicateUrl as P } from "./utils.js";
-import { translations as W } from "../../libs/locales.js";
-import { inputFieldStyle as N, commonInputStyle as V } from "../editable-field.js";
-const x = 10;
-function K(e) {
-  return A(e);
+import { Icon as P } from "@iconify/react";
+import { isValidUrl as h, getLogoByUrl as W, isDuplicateUrl as N } from "./utils.js";
+import { translations as V } from "../../libs/locales.js";
+import { inputFieldStyle as K, commonInputStyle as O } from "../editable-field.js";
+const g = 10;
+function X(t) {
+  return A(t);
 }
-function O({
-  value: e,
-  onChange: a,
-  errorMsg: s
+function $({
+  value: t,
+  onChange: s,
+  errorMsg: l
 }) {
-  return /* @__PURE__ */ t(F, { fullWidth: !0, children: /* @__PURE__ */ t(
-    B,
+  return /* @__PURE__ */ e(B, { fullWidth: !0, children: /* @__PURE__ */ e(
+    F,
     {
       variant: "outlined",
-      value: e,
+      value: t,
       onChange: (i) => {
         const u = i.target.value;
-        a(u);
+        s(u);
       },
       fullWidth: !0,
-      error: !!s,
-      helperText: s,
-      sx: j(N, s ? {} : V)
+      error: !!l,
+      helperText: l,
+      sx: j(K, l ? {} : O)
     }
   ) });
 }
-function X({ links: e = [], onChange: a }) {
-  const { locale: s } = M(), n = E((r, o = {}) => z(W, r, s, "en", o)), [i, u] = C([""]), g = k(() => {
-    const r = e[e.length - 1];
-    return !h(r) || i.length > 0 && i[i.length - 1];
-  }, [i, e]), L = () => {
-    (e.length < x || !g) && a([...e, ""]);
-  }, v = (r) => {
-    const o = e.filter((c, d) => d !== r), l = i.filter((c, d) => d !== r);
-    u(l), a(o);
-  }, b = (r, o) => {
-    const l = [...e];
-    l[r] = o;
-    const c = [...i], d = !!(o && !h(o));
-    c[r] = !1, d ? c[r] = d : l.filter((m, w) => m && h(m) && w !== r).some((m) => P(m, o)) && (c[r] = "duplicate"), u(c), a(l);
+function q({ links: t = [], onChange: s }) {
+  const { locale: l } = M(), r = E((o, n = {}) => z(V, o, l, "en", n)), [i, u] = I([""]), x = C(() => {
+    const o = t[t.length - 1];
+    return !h(o) || i.length > 0 && i[i.length - 1];
+  }, [i, t]), v = () => {
+    (t.length < g || !x) && s([...t, ""]);
+  }, L = (o) => {
+    const n = t.filter((c, d) => d !== o), a = i.filter((c, d) => d !== o);
+    u(a), s(n);
+  }, b = (o, n) => {
+    const a = [...t];
+    a[o] = n;
+    const c = [...i], d = !!(n && !h(n));
+    c[o] = !1, d ? c[o] = d : a.filter((m, w) => m && h(m) && w !== o).some((m) => N(m, n)) && (c[o] = "duplicate"), u(c), s(a);
   };
   return /* @__PURE__ */ f(
     p,
@@ -58,7 +59,7 @@ function X({ links: e = [], onChange: a }) {
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           p,
           {
             sx: {
@@ -67,12 +68,12 @@ function X({ links: e = [], onChange: a }) {
               alignItems: "center",
               gap: 1
             },
-            children: /* @__PURE__ */ t(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: n("profile.socialMedia") })
+            children: /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.primary" }, children: r("profile.socialMedia") })
           }
         ),
-        e.map((r, o) => {
-          let l = "";
-          return i[o] === "duplicate" ? l = n("profile.duplicateURL") : i[o] === !0 ? l = n("profile.invalidURL") : l = "", /* @__PURE__ */ f(
+        t.map((o, n) => {
+          let a = "";
+          return i[n] === "duplicate" ? a = r("profile.duplicateURL") : i[n] === !0 ? a = r("profile.invalidURL") : a = "", /* @__PURE__ */ f(
             p,
             {
               sx: {
@@ -81,20 +82,20 @@ function X({ links: e = [], onChange: a }) {
                 mb: 1
               },
               children: [
-                /* @__PURE__ */ t(O, { value: r, onChange: (c) => b(o, c), errorMsg: l }),
-                /* @__PURE__ */ t(D, { onClick: () => v(o), children: /* @__PURE__ */ t(T, { sx: { color: "text.secondary" } }) })
+                /* @__PURE__ */ e($, { value: o, onChange: (c) => b(n, c), errorMsg: a }),
+                /* @__PURE__ */ e(D, { onClick: () => L(n), children: /* @__PURE__ */ e(T, { sx: { color: "text.secondary" } }) })
               ]
             },
-            o
+            n
           );
         }),
-        e.length < x ? /* @__PURE__ */ f(
+        t.length < g ? /* @__PURE__ */ f(
           U,
           {
             fullWidth: !0,
             variant: "outlined",
-            disabled: !!g,
-            onClick: L,
+            disabled: !!x,
+            onClick: v,
             size: "small",
             sx: {
               height: "40px",
@@ -110,26 +111,41 @@ function X({ links: e = [], onChange: a }) {
               }
             },
             children: [
-              /* @__PURE__ */ t(_, {}),
+              /* @__PURE__ */ e(_, {}),
               " ",
-              /* @__PURE__ */ t("span", { children: n("profile.addLink") })
+              /* @__PURE__ */ e("span", { children: r("profile.addLink") })
             ]
           }
-        ) : /* @__PURE__ */ t(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.secondary" }, children: n("profile.maxLinkCount", { count: x }) })
+        ) : /* @__PURE__ */ e(y, { variant: "subtitle1", gutterBottom: !0, sx: { mb: 0, fontSize: "12px", color: "text.secondary" }, children: r("profile.maxLinkCount", { count: g }) })
       ]
     }
   );
 }
-function $({ link: e }) {
-  const s = S().palette.mode === "dark";
-  return e ? /* @__PURE__ */ t(R, { width: 20, height: 20, style: { filter: s ? "brightness(0) saturate(100%) invert(1)" : "none" } }) : null;
+function G({ link: t }) {
+  const l = S().palette.mode === "dark";
+  if (!t)
+    return null;
+  const { icon: r, options: i } = W(t) || {};
+  return r ? /* @__PURE__ */ e(
+    P,
+    {
+      icon: r,
+      width: 20,
+      height: 20,
+      style: {
+        filter: l && !i?.skipDarkInvert ? "brightness(0) saturate(100%) invert(1)" : "none",
+        transform: "scale(0.8)"
+      },
+      ...i
+    }
+  ) : /* @__PURE__ */ e(R, { width: 20, height: 20, style: { filter: l ? "brightness(0) saturate(100%) invert(1)" : "none" } });
 }
-function ce({
-  editable: e = !1,
-  links: a = [],
-  onChange: s
+function ut({
+  editable: t = !1,
+  links: s = [],
+  onChange: l
 }) {
-  return e ? /* @__PURE__ */ t(X, { links: a, onChange: s }) : /* @__PURE__ */ t(
+  return t ? /* @__PURE__ */ e(q, { links: s, onChange: l }) : /* @__PURE__ */ e(
     p,
     {
       sx: {
@@ -138,7 +154,7 @@ function ce({
         flexDirection: "column",
         gap: 2
       },
-      children: a.map((n) => /* @__PURE__ */ f(
+      children: s.map((r) => /* @__PURE__ */ f(
         p,
         {
           sx: {
@@ -149,23 +165,23 @@ function ce({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ t($, { link: n }),
-            /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(p, { component: "a", href: n, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: K(n) }) })
+            /* @__PURE__ */ e(G, { link: r }),
+            /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(p, { component: "a", href: r, style: { textDecoration: "none" }, target: "_blank", rel: "noopener noreferrer", children: X(r) }) })
           ]
         },
-        n
+        r
       ))
     }
   );
 }
-const q = I("span")`
+const H = k("span")`
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   &,
   & > * {
-    color: ${({ theme: e }) => e.palette.text.primary};
+    color: ${({ theme: t }) => t.palette.text.primary};
   }
 
   & > * {
@@ -177,5 +193,5 @@ const q = I("span")`
   }
 `;
 export {
-  ce as LinkPreviewInput
+  ut as LinkPreviewInput
 };

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

@@ -1,36 +1,36 @@
 import { jsxs as y, Fragment as L, jsx as t } from "react/jsx-runtime";
-import { lazy as I, memo as ie, createElement as ae, useState as T, useRef as le, useEffect as de, useMemo as F } from "react";
-import { Icon as ce } from "@iconify/react";
-import { Backdrop as se, Box as m, useMediaQuery as pe, SwipeableDrawer as me, Typography as N, Tooltip as ue } from "@mui/material";
-import he from "@emotion/styled";
+import { lazy as I, memo as re, createElement as ie, useState as D, useRef as ae, useEffect as le, useMemo as F } from "react";
+import { Icon as de } from "@iconify/react";
+import { Backdrop as ce, Box as m, useMediaQuery as se, SwipeableDrawer as pe, Typography as N, Tooltip as me } from "@mui/material";
+import ue from "@emotion/styled";
 import j from "@arcblock/ux/lib/Button";
-import M, { detectCountryFromPhone as $, getCountryNameByCountry as fe, validatePhoneNumber as ye, getDialCodeByCountry as xe } from "@arcblock/ux/lib/PhoneInput";
+import T, { detectCountryFromPhone as M, getCountryNameByCountry as he, validatePhoneNumber as fe, getDialCodeByCountry as ye } from "@arcblock/ux/lib/PhoneInput";
 import v from "lodash/cloneDeep";
-import be from "lodash/omit";
-import { mergeSx as ge } from "@arcblock/ux/lib/Util/style";
-import { LOGIN_PROVIDER as G } from "@arcblock/ux/lib/Util/constant";
-import { useReactive as w, useCreation as k, useMemoizedFn as Ce } from "ahooks";
-import { translate as ve } from "@arcblock/ux/lib/Locale/util";
-import we from "validator/lib/isEmail";
-import H from "validator/lib/isPostalCode";
-import { useLocaleContext as ke } from "@arcblock/ux/lib/Locale/context";
-import { useBrowser as Ee } from "@arcblock/react-hooks";
-import Ie from "@arcblock/ux/lib/UserCard/Content/clock";
-import { translations as ze } from "../../libs/locales.js";
-import g, { inputFieldStyle as Pe, commonInputStyle as Ve } from "../editable-field.js";
-import { LinkPreviewInput as Be } from "./link-preview-input.js";
-import { defaultButtonStyle as Q, currentTimezone as A, primaryButtonStyle as Le } from "./utils.js";
-import { TimezoneSelect as Ne } from "./timezone-select.js";
-import je from "./address.js";
-const Ae = I(() => import("@arcblock/icons/lib/Location")), Se = I(() => import("@arcblock/icons/lib/Timezone")), Oe = I(() => import("@arcblock/icons/lib/Email")), We = I(() => import("@arcblock/icons/lib/Phone")), E = {
+import xe from "lodash/omit";
+import { mergeSx as be } from "@arcblock/ux/lib/Util/style";
+import { LOGIN_PROVIDER as $ } from "@arcblock/ux/lib/Util/constant";
+import { useReactive as w, useCreation as k, useMemoizedFn as ge } from "ahooks";
+import { translate as Ce } from "@arcblock/ux/lib/Locale/util";
+import ve from "validator/lib/isEmail";
+import G from "validator/lib/isPostalCode";
+import { useLocaleContext as we } from "@arcblock/ux/lib/Locale/context";
+import { useBrowser as ke } from "@arcblock/react-hooks";
+import Ee from "@arcblock/ux/lib/UserCard/Content/clock";
+import { translations as Ie } from "../../libs/locales.js";
+import g, { inputFieldStyle as ze, commonInputStyle as Pe } from "../editable-field.js";
+import { LinkPreviewInput as Ve } from "./link-preview-input.js";
+import { defaultButtonStyle as H, primaryButtonStyle as Be } from "./utils.js";
+import { TimezoneSelect as Le } from "./timezone-select.js";
+import Ne from "./address.js";
+const je = I(() => import("@arcblock/icons/lib/Location")), Ae = I(() => import("@arcblock/icons/lib/Timezone")), Se = I(() => import("@arcblock/icons/lib/Email")), Oe = I(() => import("@arcblock/icons/lib/Phone")), E = {
   width: 20,
   height: 20
-}, U = 200, Y = ie(function({
+}, Q = 200, U = re(function({
   ref: r,
   ...z
 }) {
-  return /* @__PURE__ */ ae(
-    se,
+  return /* @__PURE__ */ ie(
+    ce,
     {
       ref: r,
       component: "div",
@@ -44,14 +44,14 @@ const Ae = I(() => import("@arcblock/icons/lib/Location")), Se = I(() => import(
     }
   );
 });
-Y.displayName = "BackdropWrap";
-function so({
+U.displayName = "BackdropWrap";
+function co({
   isMyself: s,
   user: r,
   onSave: z,
   isMobile: x
 }) {
-  const [_, P] = T(!1), [q, C] = T(!1), J = le(null), K = Ee(), b = pe("(max-width:640px)") || K.mobile.any, c = w({
+  const [Y, P] = D(!1), [_, C] = D(!1), q = ae(null), J = ke(), b = se("(max-width:640px)") || J.mobile.any, c = w({
     email: "",
     phone: ""
   }), u = w({
@@ -62,10 +62,10 @@ function so({
     line2: "",
     postalCode: ""
   });
-  de(() => {
+  le(() => {
     b || C(!1);
   }, [b]);
-  const S = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), O = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: V } = ke(), d = Ce((o, n = {}) => ve(ze, o, V, "en", n)), a = w(
+  const A = k(() => r?.phoneVerified ?? !1, [r?.phoneVerified]), S = k(() => r?.emailVerified ?? !1, [r?.emailVerified]), { locale: V } = we(), d = ge((o, n = {}) => Ce(Ie, o, V, "en", n)), a = w(
     r?.metadata ? v(r.metadata) : {
       joinedAt: r?.createdAt,
       email: r?.email,
@@ -83,20 +83,20 @@ function so({
       line2: "",
       postalCode: ""
     }
-  ), X = k(() => !!r?.address, [r?.address?.country]), h = F(() => r?.address?.country ? r.address.country : V === "zh" ? "cn" : "us", [r?.address?.country, V]), B = k(() => {
+  ), K = k(() => !!r?.address, [r?.address?.country]), h = F(() => r?.address?.country ? r.address.country : V === "zh" ? "cn" : "us", [r?.address?.country, V]), B = k(() => {
     const o = a.phone ?? r?.phone ?? {
       country: h,
       phone: ""
     };
     if (o && typeof o == "string")
       return {
-        country: $(o) || h,
+        country: M(o) || h,
         phone: o
       };
     if (o && typeof o == "object") {
       const { country: n = "", phoneNumber: e = "" } = o;
       return {
-        country: n || $(e) || "",
+        country: n || M(e) || "",
         phone: e || ""
       };
     }
@@ -106,11 +106,11 @@ function so({
     };
   }, [a.phone, r?.phone, h]), p = (o, n) => {
     a[n] = o;
-  }, Z = (o, n) => {
-    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !H(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
-  }, W = () => {
+  }, X = (o, n) => {
+    l[o] = n, o === "city" && p(n, "location"), o === "postalCode" ? u.postalCode = n && !G(n, "any") ? d("profile.address.invalidPostalCode") : "" : u[o] = "";
+  }, O = () => {
     b ? C(!0) : P(!0);
-  }, R = () => {
+  }, W = () => {
     const o = v(r?.metadata) ?? {};
     o && Object.keys(a).forEach((e) => {
       const i = e;
@@ -125,10 +125,10 @@ function so({
         e[i] = "";
       });
     }), b ? C(!1) : P(!1);
-  }, ee = F(() => {
+  }, Z = F(() => {
     const o = a?.links?.map((n) => n.url) || [""];
     return o.length > 0 ? o : [""];
-  }, [a.links]), oe = (o) => {
+  }, [a.links]), ee = (o) => {
     const n = o.map((e) => {
       if (!e)
         return {
@@ -144,22 +144,22 @@ function so({
       };
     });
     p(n, "links");
-  }, ne = () => {
+  }, oe = () => {
     if (Object.keys(a).forEach((n) => {
       const e = n, i = a[e];
-      if (i && typeof i == "string" && (a[e] = i.trim()), e === "bio" && (a[e] = a[e]?.slice(0, U)), e === "timezone" && (a[e] = i || A), e === "phone" && i && typeof i == "object") {
-        const f = i, te = xe(f.country), re = (f.phoneNumber?.replace(new RegExp(`^\\+${te}`), "") || "")?.trim().length > 0;
+      if (i && typeof i == "string" && (a[e] = i.trim()), e === "bio" && (a[e] = a[e]?.slice(0, Q)), e === "timezone" && (a[e] = i || ""), e === "phone" && i && typeof i == "object") {
+        const f = i, ne = ye(f.country), te = (f.phoneNumber?.replace(new RegExp(`^\\+${ne}`), "") || "")?.trim().length > 0;
         a[e] = {
           country: f.country,
-          ...re ? { phoneNumber: f.phoneNumber } : {}
+          ...te ? { phoneNumber: f.phoneNumber } : {}
         };
       }
-    }), l.postalCode && !H(l.postalCode, "any") && (u.postalCode = d("profile.address.invalidPostalCode")), [c, u].some((n) => Object.values(n).some((e) => e)))
+    }), l.postalCode && !G(l.postalCode, "any") && (u.postalCode = d("profile.address.invalidPostalCode")), [c, u].some((n) => Object.values(n).some((e) => e)))
       return;
-    const o = be(l, "detailedAddress");
+    const o = xe(l, "detailedAddress");
     o.country || (o.country = h), z({ metadata: a, address: o }), P(!1), C(!1);
-  }, D = (o, n = "self") => /* @__PURE__ */ y(
-    Re,
+  }, R = (o, n = "self") => /* @__PURE__ */ y(
+    We,
     {
       pt: 2,
       display: "flex",
@@ -179,7 +179,7 @@ function so({
             inline: !1,
             rows: 3,
             label: d("profile.bio"),
-            maxLength: U,
+            maxLength: Q,
             style: {
               ...o ? { marginBottom: 8 } : {}
             }
@@ -191,22 +191,22 @@ function so({
             size: x ? "small" : "large",
             variant: "outlined",
             sx: {
-              ...Q,
+              ...H,
               mb: x ? "4px" : 2,
               mt: x ? "4px" : 2,
               height: x ? "32px" : "40px"
             },
-            onClick: W,
+            onClick: O,
             fullWidth: !0,
             children: d("profile.editProfile")
           }
         ) : null,
-        o && s && X ? /* @__PURE__ */ t(
-          je,
+        o && s && K ? /* @__PURE__ */ t(
+          Ne,
           {
             address: l,
             errors: u,
-            handleChange: Z,
+            handleChange: X,
             defaultCountry: h
           }
         ) : /* @__PURE__ */ t(
@@ -233,26 +233,26 @@ function so({
               /* @__PURE__ */ t(N, { variant: "caption", component: "span", children: l[e] })
             ] }, e) : null) }) : null,
             renderValue: () => {
-              const i = [l?.country ? fe(l?.country) : "", l.province, l.city || a.location || ""].filter(Boolean).join(" ");
+              const i = [l?.country ? he(l?.country) : "", l.province, l.city || a.location || ""].filter(Boolean).join(" ");
               return /* @__PURE__ */ t(N, { component: "span", children: i });
             },
-            icon: /* @__PURE__ */ t(Ae, { ...E })
+            icon: /* @__PURE__ */ t(je, { ...E })
           }
         ),
         /* @__PURE__ */ t(
           g,
           {
-            value: a.timezone || A,
+            value: a.timezone || "",
             onChange: (e) => p(e, "timezone"),
             editable: o,
             placeholder: "timezone",
-            icon: /* @__PURE__ */ t(Se, { ...E }),
+            icon: /* @__PURE__ */ t(Ae, { ...E }),
             label: d("profile.timezone"),
-            renderValue: (e) => /* @__PURE__ */ t(Ie, { value: e }),
+            renderValue: (e) => /* @__PURE__ */ t(Ee, { value: e }),
             children: /* @__PURE__ */ t(
-              Ne,
+              Le,
               {
-                value: a.timezone || A,
+                value: a.timezone ?? "",
                 onChange: (e) => p(e, "timezone"),
                 disabled: !o,
                 mode: n
@@ -266,17 +266,17 @@ function so({
             value: a.email ?? r?.email ?? "",
             editable: o,
             hidePreview: !s,
-            disabled: r?.sourceProvider === G.EMAIL,
-            canEdit: !O,
-            verified: O,
+            disabled: r?.sourceProvider === $.EMAIL,
+            canEdit: !S,
+            verified: S,
             placeholder: "Email",
-            icon: /* @__PURE__ */ t(Oe, { ...E }),
+            icon: /* @__PURE__ */ t(Se, { ...E }),
             label: /* @__PURE__ */ y(L, { children: [
               d("profile.email"),
-              r?.sourceProvider === G.EMAIL ? /* @__PURE__ */ t(ue, { title: d("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ t(
+              r?.sourceProvider === $.EMAIL ? /* @__PURE__ */ t(me, { title: d("profile.emailSourceProviderNotAllowEdit"), children: /* @__PURE__ */ t(
                 m,
                 {
-                  component: ce,
+                  component: de,
                   icon: "mdi:info-outline",
                   sx: {
                     verticalAlign: "middle",
@@ -300,7 +300,7 @@ function so({
             ) : null,
             onValueValidate: (e) => {
               let i = "";
-              e && !we(e) && (i = d("profile.emailInvalid")), c.email = i;
+              e && !ve(e) && (i = d("profile.emailInvalid")), c.email = i;
             }
           }
         ),
@@ -310,15 +310,15 @@ function so({
             value: B.phone,
             editable: o,
             hidePreview: !s,
-            canEdit: !S,
-            verified: S,
+            canEdit: !A,
+            verified: A,
             placeholder: "Phone",
-            icon: /* @__PURE__ */ t(We, { ...E }),
+            icon: /* @__PURE__ */ t(Oe, { ...E }),
             onChange: (e) => p(e, "phone"),
             label: d("profile.phone"),
-            renderValue: () => s ? /* @__PURE__ */ t(M, { value: B, preview: !0 }) : null,
+            renderValue: () => s ? /* @__PURE__ */ t(T, { value: B, preview: !0 }) : null,
             children: /* @__PURE__ */ t(
-              M,
+              T,
               {
                 variant: "outlined",
                 className: "editable-field",
@@ -329,9 +329,9 @@ function so({
                 value: B,
                 error: !!c.phone,
                 helperText: c.phone,
-                sx: ge(Pe, c.phone ? {} : Ve),
+                sx: be(ze, c.phone ? {} : Pe),
                 onChange: (e) => {
-                  ye(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
+                  fe(e.phone, e.country) ? c.phone = "" : c.phone = d("profile.phoneInvalid"), p(
                     {
                       country: e.country,
                       phoneNumber: e.phone
@@ -343,7 +343,7 @@ function so({
             )
           }
         ),
-        /* @__PURE__ */ t(Be, { editable: o, links: ee, onChange: oe }),
+        /* @__PURE__ */ t(Ve, { editable: o, links: Z, onChange: ee }),
         o && s ? /* @__PURE__ */ y(
           m,
           {
@@ -361,8 +361,8 @@ function so({
                   fullWidth: n === "drawer",
                   size: "small",
                   variant: "outlined",
-                  sx: { ...Q, minWidth: "54px" },
-                  onClick: R,
+                  sx: { ...H, minWidth: "54px" },
+                  onClick: W,
                   children: d("common.cancel")
                 }
               ),
@@ -374,13 +374,13 @@ function so({
                   disabled: !!c.email || !!c.phone,
                   variant: "outlined",
                   sx: {
-                    ...Le,
+                    ...Be,
                     minWidth: "54px",
                     "&.Mui-disabled": {
                       backgroundColor: "rgba(0, 0, 0, 0.12)"
                     }
                   },
-                  onClick: ne,
+                  onClick: oe,
                   children: d("common.save")
                 }
               )
@@ -391,20 +391,20 @@ function so({
     }
   );
   return /* @__PURE__ */ y(L, { children: [
-    D(_),
+    R(Y),
     b && /* @__PURE__ */ y(
-      me,
+      pe,
       {
         sx: {
           zIndex: 9999
         },
         disableSwipeToOpen: !0,
-        onOpen: W,
-        open: q,
+        onOpen: O,
+        open: _,
         anchor: "bottom",
-        onClose: R,
+        onClose: W,
         slots: {
-          backdrop: Y
+          backdrop: U
         },
         slotProps: {
           paper: {
@@ -421,7 +421,7 @@ function so({
           /* @__PURE__ */ t(
             m,
             {
-              ref: J,
+              ref: q,
               sx: {
                 padding: "16px 32px",
                 margin: "-8px auto -16px",
@@ -448,7 +448,7 @@ function so({
                 maxHeight: "500px",
                 overflowY: "auto"
               },
-              children: D(!0, "drawer")
+              children: R(!0, "drawer")
             }
           )
         ]
@@ -456,7 +456,7 @@ function so({
     )
   ] });
 }
-const Re = he(m)`
+const We = ue(m)`
   width: 100%;
 
   .MuiOutlinedInput-root {
@@ -495,5 +495,5 @@ const Re = he(m)`
   }
 `;
 export {
-  so as default
+  co as default
 };

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

@@ -1,45 +1,49 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { useState as a, useMemo as v, useEffect as d } from "react";
-import { Select as x, ListSubheader as b, TextField as C, MenuItem as z } from "@mui/material";
-import g from "lodash/debounce";
-import { KeyboardArrowDown as T } from "@mui/icons-material";
-import { getTimezones as w } from "./utils.js";
-const r = w();
-function P({ value: s, onChange: u, disabled: l = !1, mode: c = "self" }) {
-  const [m, p] = a(r), [i, f] = a(""), o = v(
-    () => g((e) => e ? r.filter((n) => n.value.toLowerCase().includes(e.toLowerCase())) : r, 300),
-    []
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as m, useRef as z, useEffect as g } from "react";
+import { Select as y, ListSubheader as T, TextField as w, MenuItem as M } from "@mui/material";
+import { useMemoizedFn as c, useDebounce as I } from "ahooks";
+import { KeyboardArrowDown as S } from "@mui/icons-material";
+import { useLocaleContext as D } from "@arcblock/ux/lib/Locale/context";
+import { translate as O } from "@arcblock/ux/lib/Locale/util";
+import P from "@arcblock/ux/lib/Empty";
+import { getTimezones as F } from "./utils.js";
+import { translations as L } from "../../libs/locales.js";
+const r = F();
+function V({ value: p, onChange: f, disabled: i = !1, mode: h = "self" }) {
+  const { locale: x } = D(), n = c((e, o = {}) => O(L, e, x, "en", o)), [l, v] = m(r), [s, C] = m(""), a = I(s, { wait: 500 }), u = z(null), d = c(
+    (e) => e ? r.filter((o) => o.value.toLowerCase().includes(e.toLowerCase())) : r
   );
-  return d(() => {
-    const e = o(i);
-    p(e ?? r);
-  }, [i, o]), d(() => () => {
-    o.cancel();
-  }, [o]), /* @__PURE__ */ h(
-    x,
+  return g(() => {
+    const e = d(a);
+    v(e ?? r), setTimeout(() => {
+      u.current?.focus();
+    }, 0);
+  }, [a, d]), /* @__PURE__ */ b(
+    y,
     {
-      className: `timezone-select ${l ? "disabled" : ""}`,
-      value: s,
-      onChange: (e) => u(e.target.value),
-      disabled: l,
+      className: `timezone-select ${i ? "disabled" : ""}`,
+      value: p,
+      onChange: (e) => f(e.target.value),
+      disabled: i,
       displayEmpty: !0,
       variant: "outlined",
-      placeholder: "Timezone",
+      placeholder: n("profile.timezone"),
       IconComponent: (e) => /* @__PURE__ */ t(
-        T,
+        S,
         {
           ...e,
-          sx: { fontSize: 18, color: (n) => `${n.palette.text.secondary} !important` }
+          sx: { fontSize: 18, color: (o) => `${o.palette.text.secondary} !important` }
         }
       ),
       MenuProps: {
+        autoFocus: !1,
         PaperProps: {
           style: {
             maxHeight: "400px"
           }
         },
         style: {
-          zIndex: c === "drawer" ? 9999 : 1300
+          zIndex: h === "drawer" ? 9999 : 1300
         }
       },
       sx: {
@@ -54,16 +58,17 @@ function P({ value: s, onChange: u, disabled: l = !1, mode: c = "self" }) {
         }
       },
       children: [
-        /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(
-          C,
+        /* @__PURE__ */ t(T, { children: /* @__PURE__ */ t(
+          w,
           {
+            inputRef: u,
             autoFocus: !0,
-            value: i,
-            placeholder: "Timezone",
+            value: s,
+            placeholder: n("profile.timezone"),
             variant: "outlined",
             size: "small",
             fullWidth: !0,
-            onChange: (e) => f(e.target.value),
+            onChange: (e) => C(e.target.value),
             onClick: (e) => e.stopPropagation(),
             onKeyDown: (e) => e.stopPropagation(),
             sx: {
@@ -83,11 +88,12 @@ function P({ value: s, onChange: u, disabled: l = !1, mode: c = "self" }) {
             }
           }
         ) }),
-        m.map((e) => /* @__PURE__ */ t(z, { value: e.value, children: e.label }, e.value))
+        l.map((e) => /* @__PURE__ */ t(M, { value: e.value, children: e.label }, e.value)),
+        l.length > 0 ? null : /* @__PURE__ */ t(P, { children: n("emptyContent") })
       ]
     }
   );
 }
 export {
-  P as TimezoneSelect
+  V as TimezoneSelect
 };

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

@@ -50,3 +50,7 @@ export declare const primaryButtonStyle: {
     py: number;
     borderRadius: number;
 };
+export declare const getLogoByUrl: (url: string) => {
+    icon: string;
+    options?: Record<string, any>;
+} | undefined;

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

@@ -1,12 +1,12 @@
-import h from "is-url";
-import { withHttps as c } from "ufo";
-import n from "dayjs";
-import C from "dayjs/plugin/timezone";
-import k from "dayjs/plugin/utc";
+import T from "is-url";
+import { withHttps as u } from "ufo";
+import i from "dayjs";
+import A from "dayjs/plugin/timezone";
+import I from "dayjs/plugin/utc";
 import { DurationEnum as s } from "../../../@types/index.js";
-n.extend(k);
-n.extend(C);
-const l = 3600, m = 1800, d = 600, f = 300, p = 60, b = 1, _ = n.tz.guess(), y = [
+i.extend(I);
+i.extend(A);
+const d = 3600, p = 1800, f = 600, k = 300, b = 60, g = 1, E = i.tz.guess(), y = [
   "America/New_York",
   "America/Chicago",
   "America/Denver",
@@ -28,7 +28,7 @@ const l = 3600, m = 1800, d = 600, f = 300, p = 60, b = 1, _ = n.tz.guess(), y =
   "America/Mexico_City",
   "Africa/Cairo",
   "UTC"
-], O = () => {
+], C = () => {
   if (typeof Intl < "u" && Intl.supportedValuesOf)
     try {
       return Intl.supportedValuesOf("timeZone");
@@ -43,57 +43,57 @@ const l = 3600, m = 1800, d = 600, f = 300, p = 60, b = 1, _ = n.tz.guess(), y =
       console.warn("Intl.DateTimeFormat timezone support limited");
     }
   return y;
-}, v = () => O().map((e) => {
+}, _ = () => C().map((o) => {
   try {
-    const t = n.tz(n(), e).utcOffset() / 60, a = Math.floor(t), i = t % 1 * 60;
-    return { label: `GMT${a >= 0 ? "+" : ""}${a}:${i === 30 ? "30" : "00"}`, value: e };
+    const r = i.tz(i(), o).utcOffset() / 60, n = Math.floor(r), a = r % 1 * 60;
+    return { label: `GMT${n >= 0 ? "+" : ""}${n}:${a === 30 ? "30" : "00"}`, value: o };
   } catch {
-    return console.warn(`Timezone ${e} not supported, skipping`), null;
+    return console.warn(`Timezone ${o} not supported, skipping`), null;
   }
-}).filter((e) => e !== null).sort((e, t) => {
-  const [a, i] = e.label.replace("GMT", "").split(":").map(Number), [u, g] = t.label.replace("GMT", "").split(":").map(Number), A = a * 60 + i;
-  return u * 60 + g - A;
-}).map((e) => ({
-  label: `(${e.label}) ${e.value}`,
-  value: e.value
-})), T = (o) => h(c(o)), z = (o, r) => {
-  if (!o || !r || !T(o) || !T(r))
+}).filter((o) => o !== null).sort((o, r) => {
+  const [n, a] = o.label.replace("GMT", "").split(":").map(Number), [c, l] = r.label.replace("GMT", "").split(":").map(Number), m = n * 60 + a;
+  return c * 60 + l - m;
+}).map((o) => ({
+  label: `(${o.label}) ${o.value}`,
+  value: o.value
+})), h = (t) => T(u(t)), R = (t, e) => {
+  if (!t || !e || !h(t) || !h(e))
     return !1;
-  const e = c(o.trim()), t = c(r.trim());
-  return e.toLowerCase() === t.toLowerCase();
-}, D = (o) => {
-  let r = o?.dateRange?.map((t) => n(t)) ?? [];
-  const e = n();
-  switch (o?.duration) {
+  const o = u(t.trim()), r = u(e.trim());
+  return o.toLowerCase() === r.toLowerCase();
+}, z = (t) => {
+  let e = t?.dateRange?.map((r) => i(r)) ?? [];
+  const o = i();
+  switch (t?.duration) {
     case s.ThirtyMinutes:
-      r = [e, e.add(30, "minutes")];
+      e = [o, o.add(30, "minutes")];
       break;
     case s.OneHour:
-      r = [e, e.add(1, "hour")];
+      e = [o, o.add(1, "hour")];
       break;
     case s.FourHours:
-      r = [e, e.add(4, "hours")];
+      e = [o, o.add(4, "hours")];
       break;
     case s.Today:
-      r = [e, e.endOf("day")];
+      e = [o, o.endOf("day")];
       break;
     case s.ThisWeek:
-      r = [e, e.endOf("week")];
+      e = [o, o.endOf("week")];
       break;
     case s.NoClear:
-      r = [e, e];
+      e = [o, o];
       break;
   }
-  return r.map((t) => t.toDate());
-}, B = (o) => {
-  const r = n();
-  return r.isAfter(n(o[0])) && r.isBefore(n(o[1]));
-}, R = (o) => {
-  const { duration: r, dateRange: e } = o ?? {};
-  return !r || !e ? !1 : r === s.NoClear || n(e?.[0]).isSame(n(e?.[1]));
-}, x = (o) => {
-  const r = n(), t = n(o).diff(r, "seconds"), a = (i) => i * 1e3;
-  return t >= l ? a(l) : t >= m ? a(m) : t >= d ? a(d) : t >= f ? a(f) : t >= p ? a(p) : t >= b ? a(b) : 0;
+  return e.map((r) => r.toDate());
+}, B = (t) => {
+  const e = i();
+  return e.isAfter(i(t[0])) && e.isBefore(i(t[1]));
+}, L = (t) => {
+  const { duration: e, dateRange: o } = t ?? {};
+  return !e || !o ? !1 : e === s.NoClear || i(o?.[0]).isSame(i(o?.[1]));
+}, x = (t) => {
+  const e = i(), r = i(t).diff(e, "seconds"), n = (a) => a * 1e3;
+  return r >= d ? n(d) : r >= p ? n(p) : r >= f ? n(f) : r >= k ? n(k) : r >= b ? n(b) : r >= g ? n(g) : 0;
 }, $ = {
   color: "text.primary",
   borderColor: "grey.100",
@@ -104,7 +104,7 @@ const l = 3600, m = 1800, d = 600, f = 300, p = 60, b = 1, _ = n.tz.guess(), y =
   },
   py: 0.5,
   borderRadius: 1
-}, H = {
+}, F = {
   color: "primary.contrastText",
   borderColor: "primary.main",
   backgroundColor: "primary.main",
@@ -114,16 +114,81 @@ const l = 3600, m = 1800, d = 600, f = 300, p = 60, b = 1, _ = n.tz.guess(), y =
   },
   py: 0.5,
   borderRadius: 1
+}, O = {
+  x: {
+    domains: ["twitter.com", "x.com"]
+  },
+  facebook: {
+    domains: ["facebook.com", "fb.com"],
+    options: { skipDarkInvert: !0 }
+  },
+  "linkedin-icon": {
+    domains: ["linkedin.com"],
+    options: { skipDarkInvert: !0 }
+  },
+  "github-icon": {
+    domains: ["github.com"]
+  },
+  "instagram-icon": {
+    domains: ["instagram.com"]
+  },
+  "youtube-icon": {
+    domains: ["youtube.com", "youtu.be"],
+    options: { skipDarkInvert: !0 }
+  },
+  "tiktok-icon": {
+    domains: ["tiktok.com"]
+  },
+  "reddit-icon": {
+    domains: ["reddit.com"],
+    options: { skipDarkInvert: !0 }
+  },
+  "medium-icon": {
+    domains: ["medium.com"]
+  },
+  "discord-icon": {
+    domains: ["discord.com", "discord.gg"],
+    options: { skipDarkInvert: !0 }
+  },
+  telegram: {
+    domains: ["telegram.org", "t.me"],
+    options: { skipDarkInvert: !0 }
+  },
+  "whatsapp-monochrome-icon": {
+    domains: ["whatsapp.com"]
+  },
+  producthunt: {
+    domains: ["producthunt.com"],
+    options: { skipDarkInvert: !0 }
+  },
+  ycombinator: {
+    domains: ["ycombinator.com", "news.ycombinator.com"],
+    options: { skipDarkInvert: !0 }
+  }
+}, H = (t) => {
+  try {
+    const e = u(t), n = new URL(e).hostname.toLowerCase().replace(/^www\./, "");
+    for (const [a, { domains: c, options: l }] of Object.entries(O))
+      if (c.some((m) => n === m || n.endsWith(`.${m}`)))
+        return {
+          icon: `logos:${a}`,
+          options: l
+        };
+    return;
+  } catch {
+    return;
+  }
 };
 export {
-  _ as currentTimezone,
+  E as currentTimezone,
   $ as defaultButtonStyle,
-  D as getStatusDuration,
+  H as getLogoByUrl,
+  z as getStatusDuration,
   x as getTimeRemaining,
-  v as getTimezones,
-  z as isDuplicateUrl,
-  R as isNotClear,
-  T as isValidUrl,
+  _ as getTimezones,
+  R as isDuplicateUrl,
+  L as isNotClear,
+  h as isValidUrl,
   B as isWithinTimeRange,
-  H as primaryButtonStyle
+  F as primaryButtonStyle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/ui-react",
-  "version": "3.2.8",
+  "version": "3.2.10",
   "description": "Some useful front-end web components that can be used in Blocklets.",
   "keywords": [
     "react",
@@ -35,9 +35,9 @@
   "dependencies": {
     "@abtnode/constant": "1.17.2",
     "@abtnode/util": "1.17.2",
-    "@arcblock/bridge": "3.2.8",
-    "@arcblock/icons": "3.2.8",
-    "@arcblock/react-hooks": "3.2.8",
+    "@arcblock/bridge": "3.2.10",
+    "@arcblock/icons": "3.2.10",
+    "@arcblock/react-hooks": "3.2.10",
     "@arcblock/ws": "^1.27.6",
     "@blocklet/constant": "1.17.2",
     "@blocklet/did-space-react": "^1.2.3",
@@ -83,7 +83,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@arcblock/did-connect-react": "3.2.8",
+    "@arcblock/did-connect-react": "3.2.10",
     "@types/dompurify": "^3.2.0",
     "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.15.2",
@@ -91,5 +91,5 @@
     "jest": "^29.7.0",
     "unbuild": "^2.0.0"
   },
-  "gitHead": "c3986ded30e94992b83a628e4ffc73c99e630b5d"
+  "gitHead": "8ed4de885ae6ce687de01add02b489c178da0c12"
 }

package/src/UserCenter/components/user-info/link-preview-input.tsx

@@ -7,7 +7,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import LinkIcon from '@arcblock/icons/lib/Link';
 import { mergeSx } from '@arcblock/ux/lib/Util/style';
 import { withoutProtocol } from 'ufo';
-import { isDuplicateUrl, isValidUrl } from './utils';
+import { Icon } from '@iconify/react';
+import { getLogoByUrl, isDuplicateUrl, isValidUrl } from './utils';
 import { translations } from '../../libs/locales';
 import { commonInputStyle, inputFieldStyle } from '../editable-field';
 
@@ -188,6 +189,23 @@ function FaviconPreview({ link }: { link: string }) {
     return null;
   }
 
+  const { icon: logoIcon, options } = getLogoByUrl(link) || {};
+
+  if (logoIcon) {
+    return (
+      <Icon
+        icon={logoIcon}
+        width={20}
+        height={20}
+        style={{
+          filter: isDark && !options?.skipDarkInvert ? 'brightness(0) saturate(100%) invert(1)' : 'none',
+          transform: 'scale(0.8)',
+        }}
+        {...options}
+      />
+    );
+  }
+
   return (
     <LinkIcon width={20} height={20} style={{ filter: isDark ? 'brightness(0) saturate(100%) invert(1)' : 'none' }} />
   );

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

@@ -28,7 +28,7 @@ import { translations } from '../../libs/locales';
 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 { defaultButtonStyle, primaryButtonStyle } from './utils';
 import { TimezoneSelect } from './timezone-select';
 import AddressEditor from './address';
 
@@ -287,7 +287,7 @@ export default function UserMetadataComponent({
         metadata[k] = metadata[k]?.slice(0, bioMaxLength);
       }
       if (k === 'timezone') {
-        metadata[k] = (value as string) || currentTimezone;
+        metadata[k] = (value as string) || '';
       }
       if (k === 'phone' && value && typeof value === 'object') {
         const phoneInput = value as UserPhoneProps;
@@ -417,7 +417,7 @@ export default function UserMetadataComponent({
           />
         )}
         <EditableField
-          value={metadata.timezone || currentTimezone}
+          value={metadata.timezone || ''}
           onChange={(value) => onChange(value, 'timezone')}
           editable={editing}
           placeholder="timezone"
@@ -427,7 +427,7 @@ export default function UserMetadataComponent({
             return <Clock value={value} />;
           }}>
           <TimezoneSelect
-            value={metadata.timezone || currentTimezone}
+            value={metadata.timezone ?? ''}
             onChange={(value) => onChange(value, 'timezone')}
             disabled={!editing}
             mode={mode}

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

@@ -1,8 +1,12 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { MenuItem, Select, SelectChangeEvent, ListSubheader, TextField } from '@mui/material';
-import debounce from 'lodash/debounce';
+import { useDebounce, useMemoizedFn } from 'ahooks';
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { translate } from '@arcblock/ux/lib/Locale/util';
+import Empty from '@arcblock/ux/lib/Empty';
 import { getTimezones } from './utils';
+import { translations } from '../../libs/locales';
 
 const timezones = getTimezones();
 
@@ -14,27 +18,27 @@ interface TimezoneSelectProps {
 }
 
 export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self' }: TimezoneSelectProps) {
+  const { locale } = useLocaleContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return translate(translations, key, locale, 'en', data);
+  });
   const [timezoneData, setTimezoneData] = useState(timezones);
   const [searchText, setSearchText] = useState('');
+  const debouncedValue = useDebounce(searchText, { wait: 500 });
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const timezoneDebounce = useMemo(
-    () =>
-      debounce((v: string) => {
-        return v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones;
-      }, 300),
-    []
+  const searchTimezones = useMemoizedFn((v: string) =>
+    v ? timezones.filter((tz) => tz.value.toLowerCase().includes(v.toLowerCase())) : timezones
   );
 
   useEffect(() => {
-    const data = timezoneDebounce(searchText);
+    const data = searchTimezones(debouncedValue);
     setTimezoneData(data ?? timezones);
-  }, [searchText, timezoneDebounce]);
-
-  useEffect(() => {
-    return () => {
-      timezoneDebounce.cancel();
-    };
-  }, [timezoneDebounce]);
+    // 数据更新后重新聚焦到输入框
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [debouncedValue, searchTimezones]);
 
   return (
     <Select
@@ -45,7 +49,7 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
       displayEmpty
       variant="outlined"
       // @ts-expect-error
-      placeholder="Timezone"
+      placeholder={t('profile.timezone')}
       // eslint-disable-next-line react/no-unstable-nested-components
       IconComponent={(props) => (
         <KeyboardArrowDownIcon
@@ -54,6 +58,7 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
         />
       )}
       MenuProps={{
+        autoFocus: false,
         PaperProps: {
           style: {
             maxHeight: '400px',
@@ -76,9 +81,10 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
       }}>
       <ListSubheader>
         <TextField
+          inputRef={inputRef}
           autoFocus
           value={searchText}
-          placeholder="Timezone"
+          placeholder={t('profile.timezone')}
           variant="outlined"
           size="small"
           fullWidth
@@ -107,6 +113,7 @@ export function TimezoneSelect({ value, onChange, disabled = false, mode = 'self
           {tz.label}
         </MenuItem>
       ))}
+      {timezoneData.length > 0 ? null : <Empty>{t('emptyContent')}</Empty>}
     </Select>
   );
 }

package/src/UserCenter/components/user-info/utils.ts

@@ -235,3 +235,86 @@ export const primaryButtonStyle = {
   py: 0.5,
   borderRadius: 1,
 };
+
+// 域名关键词到平台标识符的映射表
+const DOMAIN_PLATFORM_MAP: Record<string, { domains: string[]; options?: Record<string, any> }> = {
+  x: {
+    domains: ['twitter.com', 'x.com'],
+  },
+  facebook: {
+    domains: ['facebook.com', 'fb.com'],
+    options: { skipDarkInvert: true },
+  },
+  'linkedin-icon': {
+    domains: ['linkedin.com'],
+    options: { skipDarkInvert: true },
+  },
+  'github-icon': {
+    domains: ['github.com'],
+  },
+  'instagram-icon': {
+    domains: ['instagram.com'],
+  },
+  'youtube-icon': {
+    domains: ['youtube.com', 'youtu.be'],
+    options: { skipDarkInvert: true },
+  },
+  'tiktok-icon': {
+    domains: ['tiktok.com'],
+  },
+  'reddit-icon': {
+    domains: ['reddit.com'],
+    options: { skipDarkInvert: true },
+  },
+  'medium-icon': {
+    domains: ['medium.com'],
+  },
+  'discord-icon': {
+    domains: ['discord.com', 'discord.gg'],
+    options: { skipDarkInvert: true },
+  },
+  telegram: {
+    domains: ['telegram.org', 't.me'],
+    options: { skipDarkInvert: true },
+  },
+  'whatsapp-monochrome-icon': {
+    domains: ['whatsapp.com'],
+  },
+  producthunt: {
+    domains: ['producthunt.com'],
+    options: { skipDarkInvert: true },
+  },
+  ycombinator: {
+    domains: ['ycombinator.com', 'news.ycombinator.com'],
+    options: { skipDarkInvert: true },
+  },
+};
+
+export const getLogoByUrl = (url: string): { icon: string; options?: Record<string, any> } | undefined => {
+  try {
+    // 添加协议（如果没有）
+    const fullUrl = withHttps(url);
+
+    // 解析 URL
+    const urlObj = new URL(fullUrl);
+    const hostname = urlObj.hostname.toLowerCase();
+
+    // 移除 www. 前缀
+    const domain = hostname.replace(/^www\./, '');
+
+    // 根据域名返回对应的平台标识符
+    for (const [platform, { domains, options }] of Object.entries(DOMAIN_PLATFORM_MAP)) {
+      if (domains.some((d) => domain === d || domain.endsWith(`.${d}`))) {
+        return {
+          icon: `logos:${platform}`,
+          options,
+        };
+      }
+    }
+
+    // 对于未匹配的域名，返回空字符串
+    return undefined;
+  } catch {
+    return undefined;
+  }
+};