@arcblock/ux 2.12.20 → 2.12.22

package/lib/PhoneInput/country-select.d.ts

@@ -1,7 +1,7 @@
 import { SelectProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 export interface CountryDisplayOptions {
-    showFullName?: boolean;
+    hideFlag?: boolean;
 }
 export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
     value: CountryIso2;

package/lib/PhoneInput/country-select.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, forwardRef, useState, useCallback } from 'react';
+import { useMemo, forwardRef, useState } from 'react';
 import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import { temp as colors } from '../Colors';
 const CountrySelect = /*#__PURE__*/forwardRef(({
   value,
   onChange,
@@ -10,14 +12,15 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
   preview = false
 }, ref) => {
   const {
-    showFullName = false
+    hideFlag = true
   } = selectCountryProps || {};
   const [searchQuery, setSearchQuery] = useState('');
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find(v => v[1] === value);
     return value && item ? parseCountry(item) : {
       name: '',
-      iso2: ''
+      iso2: '',
+      dialCode: ''
     };
   }, [value]);
   const filteredCountries = useMemo(() => {
@@ -28,10 +31,7 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       return parsed.name.toLowerCase().includes(query) || parsed.iso2.toLowerCase().includes(query) || parsed.dialCode.includes(query);
     });
   }, [searchQuery]);
-  const onCountryChange = e => {
-    onChange?.(e.target.value);
-  };
-  const renderCountryContent = useCallback(code => /*#__PURE__*/_jsxs(Box, {
+  const renderCountryContent = /*#__PURE__*/_jsxs(Box, {
     display: "flex",
     alignItems: "center",
     flexWrap: "nowrap",
@@ -39,26 +39,30 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
     sx: {
       cursor: preview ? 'default' : 'pointer'
     },
-    children: [/*#__PURE__*/_jsx(FlagEmoji, {
-      iso2: code,
+    children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
+      iso2: value,
       style: {
         display: 'flex',
-        width: '24px',
+        width: 24,
         color: 'inherit'
       }
-    }), /*#__PURE__*/_jsx(Typography, {
-      children: showFullName ? countryDetail?.name : countryDetail?.iso2
+    }), /*#__PURE__*/_jsxs(Typography, {
+      component: "span",
+      sx: {
+        lineHeight: 1.5
+      },
+      children: ["+", countryDetail?.dialCode]
     })]
-  }), [preview, showFullName, countryDetail]);
+  });
   if (preview) {
-    return renderCountryContent(value);
+    return renderCountryContent;
   }
   return /*#__PURE__*/_jsxs(Select, {
     ref: ref,
     MenuProps: {
       style: {
-        height: '300px',
-        top: '10px'
+        maxHeight: 400,
+        top: 2
       },
       anchorOrigin: {
         vertical: 'bottom',
@@ -70,21 +74,26 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       }
     },
     sx: {
-      width: '100%',
-      fieldset: {
-        display: 'none'
-      },
       '&.Mui-focused:has(div[aria-expanded="false"])': {
         fieldset: {
           display: 'block'
         }
       },
       '.MuiSelect-select': {
-        padding: '8px',
+        padding: 1,
         paddingRight: '24px !important'
       },
       svg: {
-        right: 0
+        right: 4,
+        top: 10
+      },
+      '&:hover': {
+        'fieldset.MuiOutlinedInput-notchedOutline': {
+          borderColor: colors.dividerColor
+        }
+      },
+      'fieldset.MuiOutlinedInput-notchedOutline': {
+        borderColor: colors.dividerColor
       },
       '.MuiMenuItem-root': {
         justifyContent: 'flex-start'
@@ -92,8 +101,15 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
       ...sx
     },
     value: value,
-    onChange: onCountryChange,
-    renderValue: renderCountryContent,
+    onChange: e => onChange?.(e.target.value)
+    // eslint-disable-next-line react/no-unstable-nested-components
+    ,
+    IconComponent: props => /*#__PURE__*/_jsx(ArrowDownwardIcon, {
+      ...props,
+      width: 20,
+      height: 20
+    }),
+    renderValue: () => renderCountryContent,
     children: [/*#__PURE__*/_jsx(Box, {
       sx: {
         p: 1,
@@ -109,31 +125,24 @@ const CountrySelect = /*#__PURE__*/forwardRef(({
         value: searchQuery,
         onChange: e => setSearchQuery(e.target.value),
         onClick: e => e.stopPropagation(),
-        onKeyDown: e => e.stopPropagation(),
-        sx: {
-          '& .MuiOutlinedInput-root': {
-            '& fieldset': {
-              borderColor: 'divider'
-            }
-          }
-        }
+        onKeyDown: e => e.stopPropagation()
       })
     }), filteredCountries.map(c => {
       const parsed = parseCountry(c);
       return /*#__PURE__*/_jsxs(MenuItem, {
         value: parsed.iso2,
-        children: [/*#__PURE__*/_jsx(FlagEmoji, {
+        children: [hideFlag ? null : /*#__PURE__*/_jsx(FlagEmoji, {
           iso2: parsed.iso2,
           style: {
-            marginRight: '8px',
-            width: '24px'
+            marginRight: 8,
+            width: 24
           }
         }), /*#__PURE__*/_jsx(Typography, {
-          marginRight: "8px",
+          marginRight: 1,
           children: parsed.name
         }), /*#__PURE__*/_jsxs(Typography, {
           color: "gray",
-          children: ["+", parsed.dialCode]
+          children: ["(+", parsed.dialCode, ")"]
         })]
       }, parsed.iso2);
     })]

package/lib/PhoneInput/index.d.ts

@@ -12,6 +12,5 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
     preview?: boolean;
     allowDial?: boolean;
 }
-export declare function getCountryCallingCode(country: CountryIso2): string;
 export declare function validatePhoneNumber(phone: string): boolean;
 export default function PhoneInput({ value, onChange, placeholder, countryDisplayOptions, preview, allowDial, ...props }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/PhoneInput/index.js

@@ -1,21 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box, InputAdornment, TextField, Typography } from '@mui/material';
+import { Box, TextField, Typography } from '@mui/material';
 import { defaultCountries, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect from './country-select';
-export function getCountryCallingCode(country) {
-  const countryData = defaultCountries.find(c => parseCountry(c).iso2 === country);
-  if (countryData) {
-    return parseCountry(countryData).dialCode.replace('+', '');
-  }
-  return '';
-}
+import { mergeSx } from '../Util/style';
 export function validatePhoneNumber(phone) {
   return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', {
     strictMode: true
   });
 }
+
+// 从带区号的电话号码中提取纯号码部分
+function extractPhoneWithoutCode(phone, dialCode) {
+  if (!phone) return '';
+  // 先去除区号
+  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
+  // 去除非数字字符，但保留括号
+  return phoneWithoutCode.replace(/[^\d()]/g, '');
+}
+
+// 添加区号到纯号码
+function addCountryCodeToPhone(phone, dialCode) {
+  if (!phone) return '';
+  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
+}
+
+// 获取不带+号的区号
+function getDialCodeWithoutPlus(dialCode) {
+  return dialCode.replace(/^\+/, '');
+}
 export default function PhoneInput({
   value = {
     country: 'us',
@@ -28,39 +42,73 @@ export default function PhoneInput({
   allowDial = true,
   ...props
 }) {
-  // 在使用 usePhoneInput 之前处理电话号码
-  const phoneWithPrefix = useMemo(() => {
-    if (!value.phone) return '';
-    // 如果电话号码已经包含 + 号，说明已经有区号了
-    if (value.phone.startsWith('+')) return value.phone;
-    // 获取国家区号并添加到号码前
-    const countryCode = getCountryCallingCode(value.country);
-    return `+${countryCode}${value.phone}`;
-  }, [value.phone, value.country]);
+  // 创建国家代码映射表，避免重复解析
+  const countryMap = useMemo(() => {
+    const map = new Map();
+    defaultCountries.forEach(country => {
+      const parsed = parseCountry(country);
+      map.set(parsed.iso2, parsed);
+    });
+    return map;
+  }, []);
+
+  // 使用 react-international-phone 的 hook
   const {
     phone,
-    handlePhoneValueChange,
     inputRef,
-    country,
-    setCountry
+    country
   } = usePhoneInput({
     defaultCountry: value.country,
-    value: phoneWithPrefix,
+    value: value.phone,
     countries: defaultCountries,
     onChange: data => {
-      // 确保类型匹配 PhoneValue 接口
-      const phoneValue = {
-        country: data.country,
-        phone: data.phone
-      };
-      onChange?.(phoneValue);
+      if (!preview && onChange) {
+        onChange({
+          country: data.country,
+          phone: data.phone
+        });
+      }
     }
   });
-  const onCountryChange = v => {
-    if (!preview) {
-      setCountry(v);
-    }
+
+  // 获取当前国家的区号（不带+号）
+  const currentDialCode = useMemo(() => {
+    const countryData = countryMap.get(country);
+    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
+  }, [country, countryMap]);
+
+  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
+  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
+
+  // 创建更新后的 PhoneValue 对象
+  const createUpdatedPhoneValue = (countryIso2, phoneWithoutCode) => {
+    const countryData = countryMap.get(countryIso2);
+    if (!countryData) return {
+      country: countryIso2,
+      phone: ''
+    };
+    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
+    return {
+      country: countryIso2,
+      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode)
+    };
+  };
+
+  // 处理电话号码变更
+  const onPhoneChange = e => {
+    if (preview) return;
+    // 去除用户输入中的非数字字符，但保留括号
+    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
+    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
+  };
+
+  // 处理国家变更
+  const onCountryChange = newCountry => {
+    if (preview) return;
+    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
   };
+
+  // 预览模式
   if (preview) {
     const isValid = phone && validatePhoneNumber(phone);
     const canDial = allowDial && isValid;
@@ -90,56 +138,41 @@ export default function PhoneInput({
         sx: {
           ml: 0.5
         },
-        children: phone
+        children: displayPhone
       })]
     });
   }
-  return /*#__PURE__*/_jsx(TextField, {
-    ...props,
-    value: phone,
-    onChange: preview ? undefined : handlePhoneValueChange,
-    placeholder: placeholder,
-    className: "phone-input",
-    inputRef: inputRef,
-    disabled: preview,
-    sx: {
-      '&>.MuiInputBase-root': {
-        paddingLeft: '8px',
-        cursor: preview ? 'default' : undefined
-      },
-      ...(props.sx ?? {}),
-      ...(preview ? {
-        '& .Mui-disabled': {
-          '-webkit-text-fill-color': 'inherit',
-          color: 'inherit'
+  // 编辑模式
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsx(CountrySelect, {
+      value: country,
+      onChange: onCountryChange,
+      preview: false,
+      selectCountryProps: countryDisplayOptions
+    }), /*#__PURE__*/_jsx(TextField, {
+      ...props,
+      value: displayPhone,
+      onChange: onPhoneChange,
+      placeholder: placeholder,
+      className: "phone-input",
+      inputRef: inputRef,
+      sx: mergeSx({
+        '& .MuiInputBase-input': {
+          padding: 1
         },
-        fieldset: {
-          display: 'none'
+        '& .MuiFormHelperText-root': {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          transform: 'translateY(100%)',
+          margin: 0
         }
-      } : {})
-    },
-    InputProps: {
-      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
-        position: "start",
-        style: {
-          marginRight: '2px',
-          marginLeft: '-8px'
-        },
-        children: /*#__PURE__*/_jsx(CountrySelect, {
-          value: country,
-          onChange: onCountryChange,
-          preview: preview,
-          selectCountryProps: countryDisplayOptions,
-          sx: {
-            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-              borderColor: 'transparent'
-            },
-            opacity: preview ? 1 : undefined,
-            cursor: preview ? 'default' : undefined
-          }
-        })
-      }),
-      ...(props.InputProps ?? {})
-    }
+      }, props.sx // 这里传入的可能是一个数组或一个对象
+      ),
+      InputProps: props.InputProps ?? {}
+    })]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.20",
+  "version": "2.12.22",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -68,12 +68,12 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "c2b00ec84f106657107bb415f255855e22e1de26",
+  "gitHead": "f6f7c7949553c8c3e66516f13f768264f480b5d6",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.20",
-    "@arcblock/nft-display": "^2.12.20",
-    "@arcblock/react-hooks": "^2.12.20",
+    "@arcblock/icons": "^2.12.22",
+    "@arcblock/nft-display": "^2.12.22",
+    "@arcblock/react-hooks": "^2.12.22",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -110,7 +110,7 @@
     "react-error-boundary": "^3.1.4",
     "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
-    "react-international-phone": "^3.1.2",
+    "react-international-phone": "3.1.2",
     "react-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",

package/src/PhoneInput/country-select.tsx

@@ -1,10 +1,12 @@
-import { useMemo, forwardRef, useState, useCallback } from 'react';
+import { useMemo, forwardRef, useState } from 'react';
 import { Box, MenuItem, Select, Typography, SelectProps, TextField } from '@mui/material';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
 import type { CountryIso2 } from 'react-international-phone';
+import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
+import { temp as colors } from '../Colors';
 
 export interface CountryDisplayOptions {
-  showFullName?: boolean;
+  hideFlag?: boolean;
 }
 
 export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
@@ -16,16 +18,17 @@ export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChang
 
 const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
   ({ value, onChange, sx = {}, selectCountryProps, preview = false }, ref) => {
-    const { showFullName = false } = selectCountryProps || {};
+    const { hideFlag = true } = selectCountryProps || {};
     const [searchQuery, setSearchQuery] = useState('');
 
     const countryDetail = useMemo(() => {
       const item = defaultCountries.find((v) => v[1] === value);
-      return value && item ? parseCountry(item) : { name: '', iso2: '' };
+      return value && item ? parseCountry(item) : { name: '', iso2: '', dialCode: '' };
     }, [value]);
 
     const filteredCountries = useMemo(() => {
       if (!searchQuery) return defaultCountries;
+
       const query = searchQuery.toLowerCase();
       return defaultCountries.filter((country) => {
         const parsed = parseCountry(country);
@@ -37,71 +40,52 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
       });
     }, [searchQuery]);
 
-    const onCountryChange = (e: any) => {
-      onChange?.(e.target.value as CountryIso2);
-    };
-
-    const renderCountryContent = useCallback(
-      (code: CountryIso2) => (
-        <Box
-          display="flex"
-          alignItems="center"
-          flexWrap="nowrap"
-          gap={0.5}
-          sx={{ cursor: preview ? 'default' : 'pointer' }}>
-          <FlagEmoji iso2={code} style={{ display: 'flex', width: '24px', color: 'inherit' }} />
-          <Typography>{showFullName ? countryDetail?.name : countryDetail?.iso2}</Typography>
-        </Box>
-      ),
-      [preview, showFullName, countryDetail]
+    const renderCountryContent = (
+      <Box
+        display="flex"
+        alignItems="center"
+        flexWrap="nowrap"
+        gap={0.5}
+        sx={{ cursor: preview ? 'default' : 'pointer' }}>
+        {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
+        <Typography component="span" sx={{ lineHeight: 1.5 }}>
+          +{countryDetail?.dialCode}
+        </Typography>
+      </Box>
     );
 
     if (preview) {
-      return renderCountryContent(value);
+      return renderCountryContent;
     }
 
     return (
       <Select
         ref={ref}
         MenuProps={{
-          style: {
-            height: '300px',
-            top: '10px',
-          },
-          anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: 'left',
-          },
-          transformOrigin: {
-            vertical: 'top',
-            horizontal: 'left',
-          },
+          style: { maxHeight: 400, top: 2 },
+          anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+          transformOrigin: { vertical: 'top', horizontal: 'left' },
         }}
         sx={{
-          width: '100%',
-          fieldset: {
-            display: 'none',
-          },
-          '&.Mui-focused:has(div[aria-expanded="false"])': {
-            fieldset: {
-              display: 'block',
+          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
+          '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
+          svg: { right: 4, top: 10 },
+          '&:hover': {
+            'fieldset.MuiOutlinedInput-notchedOutline': {
+              borderColor: colors.dividerColor,
             },
           },
-          '.MuiSelect-select': {
-            padding: '8px',
-            paddingRight: '24px !important',
-          },
-          svg: {
-            right: 0,
-          },
-          '.MuiMenuItem-root': {
-            justifyContent: 'flex-start',
+          'fieldset.MuiOutlinedInput-notchedOutline': {
+            borderColor: colors.dividerColor,
           },
+          '.MuiMenuItem-root': { justifyContent: 'flex-start' },
           ...sx,
         }}
         value={value}
-        onChange={onCountryChange}
-        renderValue={renderCountryContent}>
+        onChange={(e) => onChange?.(e.target.value as CountryIso2)}
+        // eslint-disable-next-line react/no-unstable-nested-components
+        IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
+        renderValue={() => renderCountryContent}>
         <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
           <TextField
             size="small"
@@ -111,22 +95,16 @@ const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
             onChange={(e) => setSearchQuery(e.target.value)}
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                '& fieldset': {
-                  borderColor: 'divider',
-                },
-              },
-            }}
           />
         </Box>
-        {filteredCountries.map((c: any) => {
+
+        {filteredCountries.map((c) => {
           const parsed = parseCountry(c);
           return (
             <MenuItem key={parsed.iso2} value={parsed.iso2}>
-              <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px', width: '24px' }} />
-              <Typography marginRight="8px">{parsed.name}</Typography>
-              <Typography color="gray">+{parsed.dialCode}</Typography>
+              {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
+              <Typography marginRight={1}>{parsed.name}</Typography>
+              <Typography color="gray">(+{parsed.dialCode})</Typography>
             </MenuItem>
           );
         })}

package/src/PhoneInput/index.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
-import { Box, InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
+import { Box, TextField, TextFieldProps, Typography } from '@mui/material';
 import { defaultCountries, CountryIso2, usePhoneInput, parseCountry } from 'react-international-phone';
 import isMobilePhone from 'validator/lib/isMobilePhone';
 import CountrySelect, { CountryDisplayOptions } from './country-select';
+import { mergeSx } from '../Util/style';
 
 export interface PhoneValue {
   country: CountryIso2;
-  phone: string;
+  phone: string; // 带区号的完整电话号码，如 +86123456789
 }
 
 export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
@@ -17,18 +18,30 @@ export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChang
   allowDial?: boolean; // 是否允许拨号, 只在 preview 为 true 时有效
 }
 
-export function getCountryCallingCode(country: CountryIso2): string {
-  const countryData = defaultCountries.find((c) => parseCountry(c).iso2 === country);
-  if (countryData) {
-    return parseCountry(countryData).dialCode.replace('+', '');
-  }
-  return '';
-}
-
 export function validatePhoneNumber(phone: string): boolean {
   return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', { strictMode: true });
 }
 
+// 从带区号的电话号码中提取纯号码部分
+function extractPhoneWithoutCode(phone: string, dialCode: string): string {
+  if (!phone) return '';
+  // 先去除区号
+  const phoneWithoutCode = phone.replace(new RegExp(`^\\+${dialCode}`), '');
+  // 去除非数字字符，但保留括号
+  return phoneWithoutCode.replace(/[^\d()]/g, '');
+}
+
+// 添加区号到纯号码
+function addCountryCodeToPhone(phone: string, dialCode: string): string {
+  if (!phone) return '';
+  return phone.startsWith('+') ? phone : `+${dialCode}${phone}`;
+}
+
+// 获取不带+号的区号
+function getDialCodeWithoutPlus(dialCode: string): string {
+  return dialCode.replace(/^\+/, '');
+}
+
 export default function PhoneInput({
   value = { country: 'us', phone: '' },
   onChange,
@@ -38,36 +51,67 @@ export default function PhoneInput({
   allowDial = true,
   ...props
 }: PhoneInputProps) {
-  // 在使用 usePhoneInput 之前处理电话号码
-  const phoneWithPrefix = useMemo(() => {
-    if (!value.phone) return '';
-    // 如果电话号码已经包含 + 号，说明已经有区号了
-    if (value.phone.startsWith('+')) return value.phone;
-    // 获取国家区号并添加到号码前
-    const countryCode = getCountryCallingCode(value.country);
-    return `+${countryCode}${value.phone}`;
-  }, [value.phone, value.country]);
-
-  const { phone, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
+  // 创建国家代码映射表，避免重复解析
+  const countryMap = useMemo(() => {
+    const map = new Map<CountryIso2, ReturnType<typeof parseCountry>>();
+    defaultCountries.forEach((country) => {
+      const parsed = parseCountry(country);
+      map.set(parsed.iso2, parsed);
+    });
+    return map;
+  }, []);
+
+  // 使用 react-international-phone 的 hook
+  const { phone, inputRef, country } = usePhoneInput({
     defaultCountry: value.country,
-    value: phoneWithPrefix,
+    value: value.phone,
     countries: defaultCountries,
     onChange: (data) => {
-      // 确保类型匹配 PhoneValue 接口
-      const phoneValue: PhoneValue = {
-        country: data.country,
-        phone: data.phone,
-      };
-      onChange?.(phoneValue);
+      if (!preview && onChange) {
+        onChange({
+          country: data.country,
+          phone: data.phone,
+        });
+      }
     },
   });
 
-  const onCountryChange = (v: CountryIso2) => {
-    if (!preview) {
-      setCountry(v);
-    }
+  // 获取当前国家的区号（不带+号）
+  const currentDialCode = useMemo(() => {
+    const countryData = countryMap.get(country);
+    return countryData ? getDialCodeWithoutPlus(countryData.dialCode) : '';
+  }, [country, countryMap]);
+
+  // 从完整电话号码中提取不带区号的部分用于显示，并去除格式化字符
+  const displayPhone = useMemo(() => extractPhoneWithoutCode(phone, currentDialCode), [phone, currentDialCode]);
+
+  // 创建更新后的 PhoneValue 对象
+  const createUpdatedPhoneValue = (countryIso2: CountryIso2, phoneWithoutCode: string): PhoneValue => {
+    const countryData = countryMap.get(countryIso2);
+    if (!countryData) return { country: countryIso2, phone: '' };
+
+    const dialCode = getDialCodeWithoutPlus(countryData.dialCode);
+    return {
+      country: countryIso2,
+      phone: addCountryCodeToPhone(phoneWithoutCode, dialCode),
+    };
+  };
+
+  // 处理电话号码变更
+  const onPhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (preview) return;
+    // 去除用户输入中的非数字字符，但保留括号
+    const cleanedValue = e.target.value.replace(/[^\d()]/g, '');
+    onChange?.(createUpdatedPhoneValue(country, cleanedValue));
   };
 
+  // 处理国家变更
+  const onCountryChange = (newCountry: CountryIso2) => {
+    if (preview) return;
+    onChange?.(createUpdatedPhoneValue(newCountry, displayPhone));
+  };
+
+  // 预览模式
   if (preview) {
     const isValid = phone && validatePhoneNumber(phone);
     const canDial = allowDial && isValid;
@@ -95,57 +139,43 @@ export default function PhoneInput({
           },
         }}>
         <CountrySelect value={country} preview={preview} />
-        <Typography sx={{ ml: 0.5 }}>{phone}</Typography>
+        <Typography sx={{ ml: 0.5 }}>{displayPhone}</Typography>
       </Box>
     );
   }
+  // 编辑模式
   return (
-    <TextField
-      {...props}
-      value={phone}
-      onChange={preview ? undefined : handlePhoneValueChange}
-      placeholder={placeholder}
-      className="phone-input"
-      inputRef={inputRef}
-      disabled={preview}
-      sx={{
-        '&>.MuiInputBase-root': {
-          paddingLeft: '8px',
-          cursor: preview ? 'default' : undefined,
-        },
-        ...(props.sx ?? {}),
-        ...(preview
-          ? {
-              '& .Mui-disabled': {
-                '-webkit-text-fill-color': 'inherit',
-                color: 'inherit',
-              },
-              fieldset: {
-                display: 'none',
-              },
-            }
-          : {}),
-      }}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position="start" style={{ marginRight: '2px', marginLeft: '-8px' }}>
-            <CountrySelect
-              value={country}
-              onChange={onCountryChange}
-              preview={preview}
-              selectCountryProps={countryDisplayOptions}
-              sx={{
-                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  borderColor: 'transparent',
-                },
-                opacity: preview ? 1 : undefined,
-                cursor: preview ? 'default' : undefined,
-              }}
-            />
-          </InputAdornment>
-        ),
-        ...(props.InputProps ?? {}),
-      }}
-    />
+    <Box display="flex" alignItems="flex-start" gap={0.5}>
+      <CountrySelect
+        value={country}
+        onChange={onCountryChange}
+        preview={false}
+        selectCountryProps={countryDisplayOptions}
+      />
+      <TextField
+        {...props}
+        value={displayPhone}
+        onChange={onPhoneChange}
+        placeholder={placeholder}
+        className="phone-input"
+        inputRef={inputRef}
+        sx={mergeSx(
+          {
+            '& .MuiInputBase-input': {
+              padding: 1,
+            },
+            '& .MuiFormHelperText-root': {
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              transform: 'translateY(100%)',
+              margin: 0,
+            },
+          },
+          props.sx as any // 这里传入的可能是一个数组或一个对象
+        )}
+        InputProps={props.InputProps ?? {}}
+      />
+    </Box>
   );
 }