@arcblock/ux 2.12.14 → 2.12.16

package/lib/Address/did-address.js

@@ -98,8 +98,8 @@ const DidAddress = /*#__PURE__*/forwardRef((props, ref) => {
       /* title prop 直接加在 icon 上不生效 */
       _jsx(CopyIcon, {
         className: "did-address-copy",
-        width: 16,
-        height: 16,
+        width: "1em",
+        height: "1em",
         onClick: onCopy
       })
     });

package/lib/Locale/selector.js

@@ -115,37 +115,37 @@ export default function LocaleSelector(props) {
             children: languages.map(({
               code,
               name
-            }) => /*#__PURE__*/_jsxs(MenuItem, {
-              className: "locale-item",
-              onClick: () => onSelect(code),
-              sx: {
-                fontSize: 16,
-                fontStyle: 'normal',
-                fontStretch: 'normal',
-                lineHeight: 'normal',
-                letterSpacing: '2px',
-                textAlign: 'center',
-                color: getColor({
-                  ...popperProps,
-                  theme
-                }),
-                cursor: 'pointer',
-                display: 'flex',
-                padding: '16px',
-                alignItems: 'center'
-              },
-              children: [/*#__PURE__*/_jsx(Box, {
-                component: IconifyIcon,
-                icon: CheckIcon,
-                className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
-                sx: [code === locale ? {
-                  visibility: 'visible'
-                } : {}, {
-                  visibility: 'hidden',
-                  marginRight: 0.5
-                }]
-              }), name]
-            }, code))
+            }) => {
+              return /*#__PURE__*/_jsxs(MenuItem, {
+                className: "locale-item",
+                onClick: () => onSelect(code),
+                sx: {
+                  fontSize: 16,
+                  fontStyle: 'normal',
+                  fontStretch: 'normal',
+                  lineHeight: 'normal',
+                  letterSpacing: '2px',
+                  textAlign: 'center',
+                  color: getColor({
+                    ...popperProps,
+                    theme
+                  }),
+                  cursor: 'pointer',
+                  display: 'flex',
+                  padding: '16px',
+                  alignItems: 'center'
+                },
+                children: [/*#__PURE__*/_jsx(Box, {
+                  component: IconifyIcon,
+                  icon: CheckIcon,
+                  className: code === locale ? 'check-icon check-icon-visible' : 'check-icon',
+                  sx: {
+                    marginRight: 0.5,
+                    visibility: code === locale ? 'visible' : 'hidden'
+                  }
+                }), name]
+              }, code);
+            })
           })
         })
       })

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

@@ -0,0 +1,13 @@
+import { SelectProps } from '@mui/material';
+import type { CountryIso2 } from 'react-international-phone';
+export interface CountryDisplayOptions {
+    showFullName?: boolean;
+}
+export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
+    value: CountryIso2;
+    onChange?: (value: CountryIso2) => void;
+    selectCountryProps?: CountryDisplayOptions;
+    preview?: boolean;
+}
+declare const CountrySelect: import("react").ForwardRefExoticComponent<Omit<CountrySelectProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default CountrySelect;

package/lib/PhoneInput/country-select.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, forwardRef, useState, useCallback } from 'react';
+import { Box, MenuItem, Select, Typography, TextField } from '@mui/material';
+import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
+const CountrySelect = /*#__PURE__*/forwardRef(({
+  value,
+  onChange,
+  sx = {},
+  selectCountryProps,
+  preview = false
+}, ref) => {
+  const {
+    showFullName = false
+  } = selectCountryProps || {};
+  const [searchQuery, setSearchQuery] = useState('');
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find(v => v[1] === value);
+    return value && item ? parseCountry(item) : {
+      name: '',
+      iso2: ''
+    };
+  }, [value]);
+  const filteredCountries = useMemo(() => {
+    if (!searchQuery) return defaultCountries;
+    const query = searchQuery.toLowerCase();
+    return defaultCountries.filter(country => {
+      const parsed = parseCountry(country);
+      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, {
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    gap: 0.5,
+    sx: {
+      cursor: preview ? 'default' : 'pointer'
+    },
+    children: [/*#__PURE__*/_jsx(FlagEmoji, {
+      iso2: code,
+      style: {
+        display: 'flex',
+        width: '24px',
+        color: 'inherit'
+      }
+    }), /*#__PURE__*/_jsx(Typography, {
+      children: showFullName ? countryDetail?.name : countryDetail?.iso2
+    })]
+  }), [preview, showFullName, countryDetail]);
+  if (preview) {
+    return renderCountryContent(value);
+  }
+  return /*#__PURE__*/_jsxs(Select, {
+    ref: ref,
+    MenuProps: {
+      style: {
+        height: '300px',
+        top: '10px'
+      },
+      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'
+        }
+      },
+      '.MuiSelect-select': {
+        padding: '8px',
+        paddingRight: '24px !important'
+      },
+      svg: {
+        right: 0
+      },
+      '.MuiMenuItem-root': {
+        justifyContent: 'flex-start'
+      },
+      ...sx
+    },
+    value: value,
+    onChange: onCountryChange,
+    renderValue: renderCountryContent,
+    children: [/*#__PURE__*/_jsx(Box, {
+      sx: {
+        p: 1,
+        position: 'sticky',
+        top: 0,
+        bgcolor: 'background.paper',
+        zIndex: 1
+      },
+      children: /*#__PURE__*/_jsx(TextField, {
+        size: "small",
+        fullWidth: true,
+        placeholder: "Search country...",
+        value: searchQuery,
+        onChange: e => setSearchQuery(e.target.value),
+        onClick: e => e.stopPropagation(),
+        onKeyDown: e => e.stopPropagation(),
+        sx: {
+          '& .MuiOutlinedInput-root': {
+            '& fieldset': {
+              borderColor: 'divider'
+            }
+          }
+        }
+      })
+    }), filteredCountries.map(c => {
+      const parsed = parseCountry(c);
+      return /*#__PURE__*/_jsxs(MenuItem, {
+        value: parsed.iso2,
+        children: [/*#__PURE__*/_jsx(FlagEmoji, {
+          iso2: parsed.iso2,
+          style: {
+            marginRight: '8px',
+            width: '24px'
+          }
+        }), /*#__PURE__*/_jsx(Typography, {
+          marginRight: "8px",
+          children: parsed.name
+        }), /*#__PURE__*/_jsxs(Typography, {
+          color: "gray",
+          children: ["+", parsed.dialCode]
+        })]
+      }, parsed.iso2);
+    })]
+  });
+});
+export default CountrySelect;

package/lib/PhoneInput/index.d.ts

@@ -0,0 +1,17 @@
+import { TextFieldProps } from '@mui/material';
+import { CountryIso2 } from 'react-international-phone';
+import { CountryDisplayOptions } from './country-select';
+export interface PhoneValue {
+    country: CountryIso2;
+    phone: string;
+}
+export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+    value?: PhoneValue;
+    onChange?: (value: PhoneValue) => void;
+    countryDisplayOptions?: CountryDisplayOptions;
+    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

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, InputAdornment, 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 '';
+}
+export function validatePhoneNumber(phone) {
+  return isMobilePhone(phone.replace(/[\s\-()]+/g, ''), 'any', {
+    strictMode: true
+  });
+}
+export default function PhoneInput({
+  value = {
+    country: 'us',
+    phone: ''
+  },
+  onChange,
+  placeholder = 'Enter phone number',
+  countryDisplayOptions = {},
+  preview = false,
+  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 {
+    phone,
+    handlePhoneValueChange,
+    country,
+    setCountry
+  } = usePhoneInput({
+    defaultCountry: value.country,
+    value: phoneWithPrefix,
+    countries: defaultCountries,
+    onChange: data => {
+      // 确保类型匹配 PhoneValue 接口
+      const phoneValue = {
+        country: data.country,
+        phone: data.phone
+      };
+      onChange?.(phoneValue);
+    }
+  });
+  const onCountryChange = v => {
+    if (!preview) {
+      setCountry(v);
+    }
+  };
+  if (preview) {
+    const isValid = phone && validatePhoneNumber(phone);
+    const canDial = allowDial && isValid;
+    return /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      component: canDial ? 'a' : 'div',
+      href: canDial ? `tel:${phone}` : undefined,
+      sx: {
+        textDecoration: 'none',
+        color: 'inherit',
+        cursor: canDial ? 'pointer' : 'default',
+        '&:hover': {
+          opacity: canDial ? 0.8 : 1
+        }
+      },
+      children: [/*#__PURE__*/_jsx(CountrySelect, {
+        value: country,
+        preview: preview
+      }), /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          ml: 0.5
+        },
+        children: phone
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(TextField, {
+    ...props,
+    value: phone,
+    onChange: preview ? undefined : handlePhoneValueChange,
+    placeholder: placeholder,
+    className: "phone-input",
+    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: /*#__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 ?? {})
+    }
+  });
+}

package/lib/SessionUser/components/un-login.js

@@ -25,6 +25,7 @@ export default function UnLogin({
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const searchParams = new URLSearchParams(window.location.search);
   const browser = useBrowser();
   const isFirstLoading = false;
   const userAnchorRef = useRef(null);
@@ -53,7 +54,7 @@ export default function UnLogin({
     let timer;
 
     // NOTICE: ArcSphere 中使用原生的快捷登录
-    if (!browser.arcSphere) {
+    if (!browser.arcSphere && searchParams.get('showQuickConnect') !== 'false') {
       timer = setTimeout(async () => {
         currentState.userSessions = await session.getUserSessions();
         if (currentState.userSessions.length > 0) {

package/lib/Util/constant.d.ts

@@ -15,6 +15,7 @@ export declare const PASSPORT_STATUS: {
     REVOKED: string;
 };
 export declare const LOGIN_PROVIDER: {
+    EMAIL: string;
     AUTH0: string;
     APPLE: string;
     GITHUB: string;

package/lib/Util/constant.js

@@ -15,7 +15,7 @@ export const PASSPORT_STATUS = {
   REVOKED: 'revoked'
 };
 export const LOGIN_PROVIDER = {
-  // EMAIL: 'Email',
+  EMAIL: 'email',
   AUTH0: 'auth0',
   APPLE: 'apple',
   GITHUB: 'github',
@@ -25,8 +25,8 @@ export const LOGIN_PROVIDER = {
   PASSKEY: 'passkey'
 };
 export const LOGIN_PROVIDER_NAME = {
-  // [LOGIN_PROVIDER.EMAIL]: 'Email',
-  [LOGIN_PROVIDER.AUTH0]: 'Email',
+  [LOGIN_PROVIDER.EMAIL]: 'Email',
+  [LOGIN_PROVIDER.AUTH0]: 'Auth0',
   [LOGIN_PROVIDER.APPLE]: 'Apple',
   [LOGIN_PROVIDER.GITHUB]: 'Github',
   [LOGIN_PROVIDER.GOOGLE]: 'Google',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.12.14",
+  "version": "2.12.16",
   "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": "ac2b40cdc5ca3cf446e5a1ced41d5eada7860cbd",
+  "gitHead": "02b619f243bf6a0c6847349edf513e18b212bcd7",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.12.14",
-    "@arcblock/nft-display": "^2.12.14",
-    "@arcblock/react-hooks": "^2.12.14",
+    "@arcblock/icons": "^2.12.16",
+    "@arcblock/nft-display": "^2.12.16",
+    "@arcblock/react-hooks": "^2.12.16",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/ubuntu-mono": "^5.0.18",
@@ -110,6 +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-intersection-observer": "^8.34.0",
     "react-lottie-player": "^1.4.3",
     "react-player": "^1.15.3",
@@ -119,6 +120,7 @@
     "rebound": "^0.1.0",
     "topojson-client": "^3.1.0",
     "type-fest": "^4.28.0",
+    "validator": "^13.9.0",
     "versor": "^0.0.4"
   }
 }

package/src/Address/did-address.tsx

@@ -120,7 +120,7 @@ const DidAddress = forwardRef<HTMLDidAddressElement, IDidAddressProps>((props, r
           </Tooltip>
         ) : (
           /* title prop 直接加在 icon 上不生效 */
-          <CopyIcon className="did-address-copy" width={16} height={16} onClick={onCopy} />
+          <CopyIcon className="did-address-copy" width="1em" height="1em" onClick={onCopy} />
         )}
       </span>
     );

package/src/Locale/selector.tsx

@@ -115,39 +115,38 @@ export default function LocaleSelector(props: LocaleSelectorProps) {
           }}>
           <ClickAwayListener onClickAway={onClose}>
             <MenuList>
-              {languages.map(({ code, name }) => (
-                <MenuItem
-                  key={code}
-                  className="locale-item"
-                  onClick={() => onSelect(code)}
-                  sx={{
-                    fontSize: 16,
-                    fontStyle: 'normal',
-                    fontStretch: 'normal',
-                    lineHeight: 'normal',
-                    letterSpacing: '2px',
-                    textAlign: 'center',
-                    color: getColor({ ...popperProps, theme }),
-                    cursor: 'pointer',
-                    display: 'flex',
-                    padding: '16px',
-                    alignItems: 'center',
-                  }}>
-                  <Box
-                    component={IconifyIcon}
-                    icon={CheckIcon}
-                    className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
-                    sx={[
-                      code === locale ? { visibility: 'visible' } : {},
-                      {
-                        visibility: 'hidden',
+              {languages.map(({ code, name }) => {
+                return (
+                  <MenuItem
+                    key={code}
+                    className="locale-item"
+                    onClick={() => onSelect(code)}
+                    sx={{
+                      fontSize: 16,
+                      fontStyle: 'normal',
+                      fontStretch: 'normal',
+                      lineHeight: 'normal',
+                      letterSpacing: '2px',
+                      textAlign: 'center',
+                      color: getColor({ ...popperProps, theme }),
+                      cursor: 'pointer',
+                      display: 'flex',
+                      padding: '16px',
+                      alignItems: 'center',
+                    }}>
+                    <Box
+                      component={IconifyIcon}
+                      icon={CheckIcon}
+                      className={code === locale ? 'check-icon check-icon-visible' : 'check-icon'}
+                      sx={{
                         marginRight: 0.5,
-                      },
-                    ]}
-                  />
-                  {name}
-                </MenuItem>
-              ))}
+                        visibility: code === locale ? 'visible' : 'hidden',
+                      }}
+                    />
+                    {name}
+                  </MenuItem>
+                );
+              })}
             </MenuList>
           </ClickAwayListener>
         </Box>

package/src/PhoneInput/country-select.tsx

@@ -0,0 +1,138 @@
+import { useMemo, forwardRef, useState, useCallback } 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';
+
+export interface CountryDisplayOptions {
+  showFullName?: boolean;
+}
+
+export interface CountrySelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
+  value: CountryIso2;
+  onChange?: (value: CountryIso2) => void;
+  selectCountryProps?: CountryDisplayOptions;
+  preview?: boolean;
+}
+
+const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
+  ({ value, onChange, sx = {}, selectCountryProps, preview = false }, ref) => {
+    const { showFullName = false } = selectCountryProps || {};
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const countryDetail = useMemo(() => {
+      const item = defaultCountries.find((v) => v[1] === value);
+      return value && item ? parseCountry(item) : { name: '', iso2: '' };
+    }, [value]);
+
+    const filteredCountries = useMemo(() => {
+      if (!searchQuery) return defaultCountries;
+      const query = searchQuery.toLowerCase();
+      return defaultCountries.filter((country) => {
+        const parsed = parseCountry(country);
+        return (
+          parsed.name.toLowerCase().includes(query) ||
+          parsed.iso2.toLowerCase().includes(query) ||
+          parsed.dialCode.includes(query)
+        );
+      });
+    }, [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]
+    );
+
+    if (preview) {
+      return renderCountryContent(value);
+    }
+
+    return (
+      <Select
+        ref={ref}
+        MenuProps={{
+          style: {
+            height: '300px',
+            top: '10px',
+          },
+          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',
+            },
+          },
+          '.MuiSelect-select': {
+            padding: '8px',
+            paddingRight: '24px !important',
+          },
+          svg: {
+            right: 0,
+          },
+          '.MuiMenuItem-root': {
+            justifyContent: 'flex-start',
+          },
+          ...sx,
+        }}
+        value={value}
+        onChange={onCountryChange}
+        renderValue={renderCountryContent}>
+        <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
+          <TextField
+            size="small"
+            fullWidth
+            placeholder="Search country..."
+            value={searchQuery}
+            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) => {
+          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>
+            </MenuItem>
+          );
+        })}
+      </Select>
+    );
+  }
+);
+
+export default CountrySelect;

package/src/PhoneInput/index.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from 'react';
+import { Box, InputAdornment, 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';
+
+export interface PhoneValue {
+  country: CountryIso2;
+  phone: string;
+}
+
+export interface PhoneInputProps extends Omit<TextFieldProps, 'value' | 'onChange'> {
+  value?: PhoneValue;
+  onChange?: (value: PhoneValue) => void;
+  countryDisplayOptions?: CountryDisplayOptions;
+  preview?: boolean;
+  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 });
+}
+
+export default function PhoneInput({
+  value = { country: 'us', phone: '' },
+  onChange,
+  placeholder = 'Enter phone number',
+  countryDisplayOptions = {},
+  preview = false,
+  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, country, setCountry } = usePhoneInput({
+    defaultCountry: value.country,
+    value: phoneWithPrefix,
+    countries: defaultCountries,
+    onChange: (data) => {
+      // 确保类型匹配 PhoneValue 接口
+      const phoneValue: PhoneValue = {
+        country: data.country,
+        phone: data.phone,
+      };
+      onChange?.(phoneValue);
+    },
+  });
+
+  const onCountryChange = (v: CountryIso2) => {
+    if (!preview) {
+      setCountry(v);
+    }
+  };
+
+  if (preview) {
+    const isValid = phone && validatePhoneNumber(phone);
+    const canDial = allowDial && isValid;
+
+    return (
+      <Box
+        display="flex"
+        alignItems="center"
+        component={canDial ? 'a' : 'div'}
+        href={canDial ? `tel:${phone}` : undefined}
+        sx={{
+          textDecoration: 'none',
+          color: 'inherit',
+          cursor: canDial ? 'pointer' : 'default',
+          '&:hover': {
+            opacity: canDial ? 0.8 : 1,
+          },
+        }}>
+        <CountrySelect value={country} preview={preview} />
+        <Typography sx={{ ml: 0.5 }}>{phone}</Typography>
+      </Box>
+    );
+  }
+  return (
+    <TextField
+      {...props}
+      value={phone}
+      onChange={preview ? undefined : handlePhoneValueChange}
+      placeholder={placeholder}
+      className="phone-input"
+      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 ?? {}),
+      }}
+    />
+  );
+}

package/src/SessionUser/components/un-login.tsx

@@ -40,6 +40,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
   const t = useMemoizedFn((key, data = {}) => {
     return translate(translations, key, locale, 'en', data);
   });
+  const searchParams = new URLSearchParams(window.location.search);
   const browser = useBrowser();
 
   const isFirstLoading = false;
@@ -74,7 +75,7 @@ export default function UnLogin({ session, onLogin = noop, size = 24, dark = fal
     let timer: NodeJS.Timeout;
 
     // NOTICE: ArcSphere 中使用原生的快捷登录
-    if (!browser.arcSphere) {
+    if (!browser.arcSphere && searchParams.get('showQuickConnect') !== 'false') {
       timer = setTimeout(async () => {
         currentState.userSessions = await session.getUserSessions();
         if (currentState.userSessions.length > 0) {

package/src/Util/constant.ts

@@ -20,7 +20,7 @@ export const PASSPORT_STATUS = {
 };
 
 export const LOGIN_PROVIDER = {
-  // EMAIL: 'Email',
+  EMAIL: 'email',
   AUTH0: 'auth0',
   APPLE: 'apple',
   GITHUB: 'github',
@@ -31,8 +31,8 @@ export const LOGIN_PROVIDER = {
 };
 
 export const LOGIN_PROVIDER_NAME = {
-  // [LOGIN_PROVIDER.EMAIL]: 'Email',
-  [LOGIN_PROVIDER.AUTH0]: 'Email',
+  [LOGIN_PROVIDER.EMAIL]: 'Email',
+  [LOGIN_PROVIDER.AUTH0]: 'Auth0',
   [LOGIN_PROVIDER.APPLE]: 'Apple',
   [LOGIN_PROVIDER.GITHUB]: 'Github',
   [LOGIN_PROVIDER.GOOGLE]: 'Google',