@ruzhiai/runid-react 0.1.0 → 0.1.1

package/src/index.tsx

@@ -4,30 +4,32 @@ import {
   useState,
   useCallback,
   useEffect,
+  useMemo,
   type CSSProperties,
   type ReactNode,
 } from 'react';
 
 import {
-  Tabs,
   Button,
+  Flex,
   Input,
+  Select,
   Space,
   Checkbox,
   Modal,
   Typography,
   Spin,
   message,
-  Form,
+  Tooltip,
 } from 'antd';
 import {
+  ArrowRightOutlined,
   PhoneOutlined,
   MailOutlined,
   MessageOutlined,
   SafetyOutlined,
   WechatOutlined,
   UserOutlined,
-  SendOutlined,
 } from '@ant-design/icons';
 
 import {
@@ -54,6 +56,34 @@ export * from '@ruzhiai/runid-sdk';
 
 const { Text, Title, Paragraph } = Typography;
 
+function getBrowserUserAgent(): string {
+  if (typeof navigator === 'undefined') return '';
+  return navigator.userAgent || '';
+}
+
+function isWecomEmbeddedBrowser(): boolean {
+  return /wxwork/i.test(getBrowserUserAgent());
+}
+
+function isMobileBrowser(): boolean {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(getBrowserUserAgent());
+}
+
+function pickWecomAutoRedirectURL(urls: WecomAuthURLs): string | undefined {
+  if (!isWecomEmbeddedBrowser()) return undefined;
+  return urls.mobile_auth_url ?? urls.app_auth_url ?? urls.auth_url;
+}
+
+function pickWecomBrowserURL(urls: WecomAuthURLs): string | undefined {
+  if (isWecomEmbeddedBrowser()) {
+    return urls.mobile_auth_url ?? urls.app_auth_url ?? urls.auth_url;
+  }
+  if (isMobileBrowser()) {
+    return urls.app_auth_url ?? urls.mobile_auth_url ?? urls.auth_url;
+  }
+  return urls.auth_url;
+}
+
 interface RunIDAuthContextValue {
   isAuthenticated: boolean;
   isLoading: boolean;
@@ -271,6 +301,7 @@ export interface RunIDLoginWidgetProps {
   returnUrl?: string;
   defaultMethod?: AuthMethod;
   locale?: 'zh-CN' | 'en-US';
+  theme?: 'light' | 'dark';
   onSuccess: (response: LoginResponse) => void | Promise<void>;
   onError?: (error: RunIDAuthError) => void;
   onOAuthRedirect?: (method: 'wechat' | 'wecom', url: string) => void;
@@ -278,6 +309,69 @@ export interface RunIDLoginWidgetProps {
   style?: CSSProperties;
 }
 
+type ThemeTokens = {
+  surface: string;
+  surfaceBorder: string;
+  text: string;
+  textSecondary: string;
+  inputIcon: string;
+  noticeBg: string;
+  noticeBorder: string;
+  noticeText: string;
+  qrBg: string;
+  activeTabColor: string;
+  inactiveTabColor: string;
+  activeTabShadow: string;
+  buttonShadow: string;
+  socialBtnColor: string;
+};
+
+const THEME: Record<'light' | 'dark', ThemeTokens> = {
+  light: {
+    surface: '#f5f7fa',
+    surfaceBorder: 'transparent',
+    text: '#0f1629',
+    textSecondary: '#6b7aa0',
+    inputIcon: '#94a0bf',
+    noticeBg: '#fff8e1',
+    noticeBorder: '#ffe082',
+    noticeText: '#8d6e00',
+    qrBg: '#fff',
+    activeTabColor: '#fff',
+    inactiveTabColor: '#6b7aa0',
+    activeTabShadow: '0 2px 8px rgba(15,22,41,0.08)',
+    buttonShadow: '0 8px 20px rgba(99, 102, 241, 0.2)',
+    socialBtnColor: '#6b7aa0',
+  },
+  dark: {
+    surface: 'rgba(255,255,255,0.06)',
+    surfaceBorder: 'rgba(255,255,255,0.08)',
+    text: '#f4f4f5',
+    textSecondary: '#a1a1aa',
+    inputIcon: '#71717a',
+    noticeBg: 'rgba(234,179,8,0.1)',
+    noticeBorder: 'rgba(234,179,8,0.25)',
+    noticeText: '#fbbf24',
+    qrBg: '#18181b',
+    activeTabColor: '#fff',
+    inactiveTabColor: '#a1a1aa',
+    activeTabShadow: '0 2px 8px rgba(0,0,0,0.3)',
+    buttonShadow: 'none',
+    socialBtnColor: '#a1a1aa',
+  },
+};
+
+function resolveTheme(explicit?: 'light' | 'dark'): 'light' | 'dark' {
+  if (explicit) return explicit;
+  if (typeof document !== 'undefined') {
+    const htmlTheme = document.documentElement.getAttribute('data-rd-theme')
+      || document.documentElement.getAttribute('data-theme');
+    if (htmlTheme === 'dark') return 'dark';
+    if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) return 'dark';
+  }
+  return 'light';
+}
+
 type CountdownState = {
   [key in 'phone' | 'email' | 'whatsapp']: number;
 };
@@ -307,7 +401,14 @@ const TEXT: Record<'zh-CN' | 'en-US', Record<string, string>> = {
     emailPlaceholder: '请输入邮箱',
     whatsappPlaceholder: '请输入 WhatsApp 号码',
     codePlaceholder: '请输入验证码',
+    invalidPhone: '请输入正确的手机号',
+    invalidEmail: '请输入正确的邮箱地址',
+    invalidWhatsapp: '请输入正确的 WhatsApp 号码',
+    requiredCode: '请输入验证码',
+    sendCodeFailed: '发送验证码失败',
+    loginFailed: '登录失败',
     mfaHint: '该账号已开启二次验证，请完成下一步认证。',
+    methodNotConfigured: '该登录方式未配置，暂不可用',
   },
   'en-US': {
     wechat: 'WeChat',
@@ -333,7 +434,14 @@ const TEXT: Record<'zh-CN' | 'en-US', Record<string, string>> = {
     emailPlaceholder: 'Enter email',
     whatsappPlaceholder: 'Enter WhatsApp number',
     codePlaceholder: 'Enter verification code',
+    invalidPhone: 'Enter a valid phone number',
+    invalidEmail: 'Enter a valid email address',
+    invalidWhatsapp: 'Enter a valid WhatsApp number',
+    requiredCode: 'Enter verification code',
+    sendCodeFailed: 'Failed to send code',
+    loginFailed: 'Sign-in failed',
     mfaHint: 'MFA is required before login. Please complete second-factor verification.',
+    methodNotConfigured: 'This login method is not configured',
   },
 };
 
@@ -345,11 +453,11 @@ function resolveInitialMethod(config: LoginConfig, requested?: AuthMethod): Auth
   if (requested && isAllowedMethod(config, requested)) {
     return requested;
   }
+  if (config.client.allowed_methods.includes('wecom')) return 'wecom';
   if (config.client.allowed_methods.includes('phone')) return 'phone';
   if (config.client.allowed_methods.includes('email')) return 'email';
-  if (config.client.allowed_methods.includes('wecom')) return 'wecom';
-  if (config.client.allowed_methods.includes('wechat')) return 'wechat';
-  return 'whatsapp';
+  if (config.client.allowed_methods.includes('whatsapp')) return 'whatsapp';
+  return 'wechat';
 }
 
 function isMfaResponse(response: unknown): response is { mfa_required: boolean; account_id: string } {
@@ -360,6 +468,47 @@ function isMfaResponse(response: unknown): response is { mfa_required: boolean;
   );
 }
 
+function phoneDigits(value: string): string {
+  return value.replace(/\D/g, '');
+}
+
+function normalizeCountryPhone(countryCode: string, value: string): string {
+  return `${countryCode}${phoneDigits(value)}`;
+}
+
+function normalizeInternationalPhone(value: string): string {
+  const trimmed = value.trim();
+  const digits = phoneDigits(trimmed);
+  return trimmed.startsWith('+') ? `+${digits}` : digits;
+}
+
+function isValidCountryPhone(countryCode: string, value: string): boolean {
+  const digits = phoneDigits(value);
+  if (!digits) return false;
+  if (countryCode === '+86') return /^1\d{10}$/.test(digits);
+  if (countryCode === '+1') return digits.length === 10;
+  if (countryCode === '+44') return digits.length >= 10 && digits.length <= 11;
+  if (countryCode === '+81') return digits.length >= 10 && digits.length <= 11;
+  if (countryCode === '+65') return digits.length === 8;
+  return digits.length >= 6 && digits.length <= 20;
+}
+
+function isValidInternationalPhone(value: string): boolean {
+  const digits = phoneDigits(value);
+  return digits.length >= 6 && digits.length <= 20;
+}
+
+function isValidEmail(value: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+}
+
+type LoginMethodOption = {
+  key: AuthMethod;
+  visible: boolean;
+  icon: JSX.Element;
+  label: string;
+};
+
 const initialCountdown: CountdownState = {
   phone: 0,
   email: 0,
@@ -371,6 +520,7 @@ export function RunIDLoginWidget({
   returnUrl,
   defaultMethod,
   locale = 'zh-CN',
+  theme: themeProp,
   onSuccess,
   onError,
   onOAuthRedirect,
@@ -378,33 +528,17 @@ export function RunIDLoginWidget({
   style,
 }: RunIDLoginWidgetProps) {
   const [messageApi, contextHolder] = message.useMessage();
-  const [auth, setAuth] = useState(() => new RunIDAuth({
+  const t = THEME[resolveTheme(themeProp)];
+  const auth = useMemo(() => new RunIDAuth({
     ...config,
     defaultReturnURL: returnUrl,
     onAuthSuccess: () => {},
     onAuthError: (error: RunIDAuthError) => {
-      const msg = parseAuthErrorMessage(error.payload) || error.message;
-      if (msg) {
-        messageApi.error(msg);
+      if (error.status !== 401) {
+        onError?.(error);
       }
-      onError?.(error);
     },
-  }));
-
-  useEffect(() => {
-    setAuth(new RunIDAuth({
-      ...config,
-      defaultReturnURL: returnUrl,
-      onAuthSuccess: () => {},
-      onAuthError: (error: RunIDAuthError) => {
-        const msg = parseAuthErrorMessage(error.payload) || error.message;
-        if (msg) {
-          messageApi.error(msg);
-        }
-        onError?.(error);
-      },
-    }));
-  }, [config.baseURL, config.client_id, messageApi, onError, returnUrl]);
+  }), [config.issuer, config.apiBaseURL, config.baseURL, config.client_id, onError, returnUrl]);
 
   const texts = TEXT[locale];
   const [loginConfig, setLoginConfig] = useState<LoginConfig | null>(null);
@@ -430,6 +564,10 @@ export function RunIDLoginWidget({
   const [consentData, setConsentData] = useState<ConsentRequiredResponse | null>(null);
   const [agreed, setAgreed] = useState(false);
   const [processingConsent, setProcessingConsent] = useState(false);
+  const [wecomURLs, setWecomURLs] = useState<WecomAuthURLs | null>(null);
+  const [loadingWecomQR, setLoadingWecomQR] = useState(false);
+  const [showWecomQR, setShowWecomQR] = useState(false);
+  const [wecomAutoRedirecting, setWecomAutoRedirecting] = useState(false);
 
   useEffect(() => {
     let active = true;
@@ -463,13 +601,11 @@ export function RunIDLoginWidget({
     };
   }, [auth, defaultMethod, onError, returnUrl, messageApi, texts.requiredMethodError]);
 
-  const methods = [
+  const primaryMethods = ([
+    { key: 'wecom' as const, visible: isAllowedMethod(loginConfig, 'wecom'), icon: <UserOutlined />, label: texts.wecom },
     { key: 'phone' as const, visible: isAllowedMethod(loginConfig, 'phone'), icon: <PhoneOutlined />, label: texts.phone },
     { key: 'email' as const, visible: isAllowedMethod(loginConfig, 'email'), icon: <MailOutlined />, label: texts.email },
-    { key: 'wechat' as const, visible: isAllowedMethod(loginConfig, 'wechat'), icon: <WechatOutlined />, label: texts.wechat },
-    { key: 'wecom' as const, visible: isAllowedMethod(loginConfig, 'wecom'), icon: <UserOutlined />, label: texts.wecom },
-    { key: 'whatsapp' as const, visible: isAllowedMethod(loginConfig, 'whatsapp'), icon: <MessageOutlined />, label: texts.whatsapp },
-  ].filter((item): item is { key: AuthMethod; visible: true; icon: JSX.Element; label: string } => item.visible);
+  ] satisfies LoginMethodOption[]).filter((item) => item.visible);
 
   const setCountDown = useCallback((method: keyof CountdownState, seconds: number) => {
     setCountdown((prev) => ({ ...prev, [method]: seconds }));
@@ -500,30 +636,42 @@ export function RunIDLoginWidget({
         const targetWhatsapp = whatsapp.trim();
         setIsSending((prev) => ({ ...prev, [method]: true }));
         if (method === 'phone') {
-          const target = `${countryCode}${targetPhone}`;
-          if (!target) {
+          if (!targetPhone) {
             messageApi.error(texts.phonePlaceholder);
             return;
           }
+          if (!isValidCountryPhone(countryCode, targetPhone)) {
+            messageApi.error(texts.invalidPhone);
+            return;
+          }
+          const target = normalizeCountryPhone(countryCode, targetPhone);
           await auth.sendPhoneCode(target);
         } else if (method === 'email') {
-          if (!targetEmail.includes('@')) {
+          if (!targetEmail) {
             messageApi.error(texts.emailPlaceholder);
             return;
           }
+          if (!isValidEmail(targetEmail)) {
+            messageApi.error(texts.invalidEmail);
+            return;
+          }
           await auth.sendEmailCode(targetEmail);
         } else {
           if (!targetWhatsapp) {
             messageApi.error(texts.whatsappPlaceholder);
             return;
           }
-          await auth.sendWhatsAppCode(targetWhatsapp);
+          if (!isValidInternationalPhone(targetWhatsapp)) {
+            messageApi.error(texts.invalidWhatsapp);
+            return;
+          }
+          await auth.sendWhatsAppCode(normalizeInternationalPhone(targetWhatsapp));
         }
         messageApi.success(texts.sendCode);
         startTimer(method);
       } catch (error) {
         const runErr = error as RunIDAuthError;
-        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || `${texts.sendCode}失败`;
+        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || texts.sendCodeFailed;
         messageApi.error(msg);
         onError?.(runErr);
       } finally {
@@ -536,10 +684,23 @@ export function RunIDLoginWidget({
   const openOAuth = useCallback(
     async (method: 'wechat' | 'wecom') => {
       try {
-        const urls = method === 'wechat'
-          ? await auth.getWechatAuthURL(returnUrl)
-          : await auth.getWecomAuthURL(returnUrl);
-        const target = urls.auth_url;
+        if (method === 'wechat') {
+          const urls = await auth.getWechatAuthURL(returnUrl);
+          const target = urls.auth_url;
+          if (onOAuthRedirect) {
+            onOAuthRedirect(method, target);
+            return;
+          }
+          window.location.assign(target);
+          return;
+        }
+
+        const urls = await auth.getWecomAuthURL(returnUrl);
+        const target = pickWecomBrowserURL(urls);
+        if (!target) {
+          messageApi.error(locale === 'zh-CN' ? '企业微信登录地址不可用' : 'WeCom sign-in URL is unavailable');
+          return;
+        }
         if (onOAuthRedirect) {
           onOAuthRedirect(method, target);
           return;
@@ -552,9 +713,128 @@ export function RunIDLoginWidget({
         onError?.(runErr);
       }
     },
-    [auth, onError, onOAuthRedirect, returnUrl, messageApi]
+    [auth, locale, messageApi, onError, onOAuthRedirect, returnUrl]
   );
 
+  const openWecomLogin = useCallback(async () => {
+    try {
+      const urls = wecomURLs ?? await auth.getWecomAuthURL(returnUrl);
+      if (!wecomURLs) {
+        setWecomURLs(urls);
+      }
+      const target = pickWecomBrowserURL(urls);
+      if (!target) {
+        messageApi.error(locale === 'zh-CN' ? '企业微信登录地址不可用' : 'WeCom sign-in URL is unavailable');
+        return;
+      }
+      if (onOAuthRedirect) {
+        onOAuthRedirect('wecom', target);
+        return;
+      }
+      window.location.assign(target);
+    } catch (error) {
+      const runErr = error as RunIDAuthError;
+      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信登录地址失败';
+      messageApi.error(msg);
+      onError?.(runErr);
+    }
+  }, [auth, locale, messageApi, onError, onOAuthRedirect, returnUrl, wecomURLs]);
+
+  const loadWecomQR = useCallback(async () => {
+    try {
+      setLoadingWecomQR(true);
+      const urls = await auth.getWecomAuthURL(returnUrl);
+      setWecomURLs(urls);
+    } catch (error) {
+      const runErr = error as RunIDAuthError;
+      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信二维码失败';
+      messageApi.error(msg);
+      onError?.(runErr);
+    } finally {
+      setLoadingWecomQR(false);
+    }
+  }, [auth, messageApi, onError, returnUrl]);
+
+  useEffect(() => {
+    if (!loginConfig || activeMethod !== 'wecom' || !isAllowedMethod(loginConfig, 'wecom')) {
+      setWecomAutoRedirecting(false);
+      return;
+    }
+    if (!isWecomEmbeddedBrowser()) {
+      setWecomAutoRedirecting(false);
+      return;
+    }
+    let cancelled = false;
+    setWecomAutoRedirecting(true);
+    void (async () => {
+      try {
+        const urls = await auth.getWecomAuthURL(returnUrl);
+        if (cancelled) return;
+        setWecomURLs(urls);
+        const redirect = pickWecomAutoRedirectURL(urls);
+        if (redirect) {
+          window.location.assign(redirect);
+          return;
+        }
+        setWecomAutoRedirecting(false);
+      } catch (error) {
+        if (cancelled) return;
+        const runErr = error as RunIDAuthError;
+        const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '获取企业微信登录地址失败';
+        messageApi.error(msg);
+        onError?.(runErr);
+        setWecomAutoRedirecting(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeMethod, auth, loginConfig, messageApi, onError, returnUrl]);
+
+  useEffect(() => {
+    if (activeMethod !== 'wecom') {
+      setShowWecomQR(false);
+    }
+  }, [activeMethod]);
+
+  useEffect(() => {
+    if (activeMethod !== 'wecom' || isWecomEmbeddedBrowser() || isMobileBrowser()) {
+      return;
+    }
+    if (showWecomQR) {
+      return;
+    }
+    setShowWecomQR(true);
+    if (!wecomURLs && !loadingWecomQR) {
+      void loadWecomQR();
+    }
+  }, [activeMethod, loadWecomQR, loadingWecomQR, showWecomQR, wecomURLs]);
+
+  useEffect(() => {
+    if (activeMethod !== 'wecom' || !wecomURLs) {
+      return;
+    }
+    let cancelled = false;
+    const interval = window.setInterval(async () => {
+      try {
+        const status = await auth.getAuthStatus({ client_id: config.client_id });
+        if (cancelled) return;
+        if (status.authenticated && status.account_id) {
+          window.clearInterval(interval);
+          if (!cancelled) {
+            await onSuccess(status);
+          }
+        }
+      } catch {
+        // Waiting for the OAuth callback to create the hosted RunID session.
+      }
+    }, 2000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [activeMethod, auth, config.client_id, onSuccess, wecomURLs]);
+
   const handleVerify = useCallback(async () => {
     if (!loginConfig) {
       messageApi.error(texts.requiredMethodError);
@@ -566,23 +846,53 @@ export function RunIDLoginWidget({
       let response: LoginOrConsentResponse;
 
       if (activeMethod === 'phone') {
-        if (!phone.trim() || !phoneCode.trim()) {
+        const targetPhone = phone.trim();
+        const targetCode = phoneCode.trim();
+        if (!targetPhone) {
           messageApi.error(texts.phonePlaceholder);
           return;
         }
-        response = await auth.verifyPhone(`${countryCode}${phone.trim()}`, phoneCode.trim());
+        if (!isValidCountryPhone(countryCode, targetPhone)) {
+          messageApi.error(texts.invalidPhone);
+          return;
+        }
+        if (!targetCode) {
+          messageApi.error(texts.requiredCode);
+          return;
+        }
+        response = await auth.verifyPhone(normalizeCountryPhone(countryCode, targetPhone), targetCode);
       } else if (activeMethod === 'email') {
-        if (!email.trim() || !emailCode.trim()) {
+        const targetEmail = email.trim();
+        const targetCode = emailCode.trim();
+        if (!targetEmail) {
           messageApi.error(texts.emailPlaceholder);
           return;
         }
-        response = await auth.verifyEmail(email.trim(), emailCode.trim());
+        if (!isValidEmail(targetEmail)) {
+          messageApi.error(texts.invalidEmail);
+          return;
+        }
+        if (!targetCode) {
+          messageApi.error(texts.requiredCode);
+          return;
+        }
+        response = await auth.verifyEmail(targetEmail, targetCode);
       } else if (activeMethod === 'whatsapp') {
-        if (!whatsapp.trim() || !whatsappCode.trim()) {
+        const targetWhatsapp = whatsapp.trim();
+        const targetCode = whatsappCode.trim();
+        if (!targetWhatsapp) {
           messageApi.error(texts.whatsappPlaceholder);
           return;
         }
-        response = await auth.verifyWhatsApp(whatsapp.trim(), whatsappCode.trim());
+        if (!isValidInternationalPhone(targetWhatsapp)) {
+          messageApi.error(texts.invalidWhatsapp);
+          return;
+        }
+        if (!targetCode) {
+          messageApi.error(texts.requiredCode);
+          return;
+        }
+        response = await auth.verifyWhatsApp(normalizeInternationalPhone(targetWhatsapp), targetCode);
       } else {
         messageApi.error(texts.requiredMethodError);
         return;
@@ -602,13 +912,13 @@ export function RunIDLoginWidget({
       await onSuccess(response as LoginResponse);
     } catch (error) {
       const runErr = error as RunIDAuthError;
-      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || '登录失败';
+      const msg = parseAuthErrorMessage(runErr.payload) || runErr.message || texts.loginFailed;
       messageApi.error(msg);
       onError?.(runErr);
     } finally {
       setIsSubmitting(false);
     }
-  }, [activeMethod, auth, countryCode, email, emailCode, loginConfig, messageApi, onError, onSuccess, phone, phoneCode, texts.emailPlaceholder, texts.phonePlaceholder, texts.requiredMethodError, texts.whatsappPlaceholder, texts.mfaHint, whatsapp, whatsappCode]);
+  }, [activeMethod, auth, countryCode, email, emailCode, loginConfig, messageApi, onError, onSuccess, phone, phoneCode, texts.emailPlaceholder, texts.invalidEmail, texts.invalidPhone, texts.invalidWhatsapp, texts.loginFailed, texts.phonePlaceholder, texts.requiredCode, texts.requiredMethodError, texts.whatsappPlaceholder, texts.mfaHint, whatsapp, whatsappCode]);
 
   const submitConsent = useCallback(async () => {
     if (!consentData || !agreed) {
@@ -626,6 +936,7 @@ export function RunIDLoginWidget({
         agreedIds,
         consentData.login_method || activeMethod,
         consentData.client_id,
+        consentData.consent_challenge,
       );
       setConsentData(null);
       setAgreed(false);
@@ -658,7 +969,18 @@ export function RunIDLoginWidget({
     );
   }
 
-  if (!methods.length) {
+  const isInternalProduct = loginConfig.is_internal_product || loginConfig.client.realm === 'internal';
+  const wechatConfigured = isAllowedMethod(loginConfig, 'wechat');
+  const whatsappConfigured = isAllowedMethod(loginConfig, 'whatsapp');
+  const hasConfiguredSocialMethods = wechatConfigured || whatsappConfigured;
+  const showSocialMethods = !isInternalProduct && hasConfiguredSocialMethods;
+  const countryCodeSelectOptions = [{ value: countryCode, label: countryCode }];
+  const wecomEmbeddedBrowser = isWecomEmbeddedBrowser();
+  const mobileBrowser = isMobileBrowser();
+  const showWecomContinueButton = wecomEmbeddedBrowser || mobileBrowser;
+  const showWecomQRCode = activeMethod === 'wecom' && (!showWecomContinueButton || showWecomQR);
+
+  if (!primaryMethods.length && !hasConfiguredSocialMethods) {
     return (
       <div className={className} style={style}>
         {contextHolder}
@@ -667,16 +989,6 @@ export function RunIDLoginWidget({
     );
   }
 
-  const tabItems = methods.map((method) => ({
-    key: method.key,
-    label: (
-      <span>
-        {method.icon}
-        <span style={{ marginLeft: 6 }}>{method.label}</span>
-      </span>
-    ),
-  }));
-
   const canSubmit = !isSubmitting &&
     [
       activeMethod === 'phone' ? phone.trim() && phoneCode.trim() :
@@ -690,144 +1002,390 @@ export function RunIDLoginWidget({
     window.open(href, '_blank', 'noopener,noreferrer');
   };
 
+  const rootClassName = ['runid-login-widget', className].filter(Boolean).join(' ');
+  const inputStyle: CSSProperties = {
+    height: 52,
+    borderRadius: 8,
+    fontSize: 15,
+  };
+  const sendButtonStyle: CSSProperties = {
+    minWidth: 120,
+    height: 52,
+    borderRadius: 8,
+    fontWeight: 500,
+  };
+  const primaryButtonStyle: CSSProperties = {
+    height: 56,
+    borderRadius: 8,
+    fontSize: 16,
+    fontWeight: 600,
+    marginTop: 12,
+    boxShadow: t.buttonShadow,
+  };
+  const oauthButtonStyle: CSSProperties = {
+    height: 56,
+    borderRadius: 8,
+    fontSize: 16,
+    fontWeight: 600,
+    width: '100%',
+  };
+  const methodButtonStyle = (method: AuthMethod): CSSProperties => ({
+    flex: 1,
+    height: 40,
+    borderRadius: 6,
+    border: 'none',
+    boxShadow: activeMethod === method ? t.activeTabShadow : 'none',
+    background: activeMethod === method ? undefined : 'transparent',
+    color: activeMethod === method ? t.activeTabColor : t.inactiveTabColor,
+    fontWeight: activeMethod === method ? 600 : 400,
+  });
+  const socialButtonStyle: CSSProperties = {
+    borderRadius: 8,
+    height: 44,
+    padding: '0 24px',
+    color: t.socialBtnColor,
+  };
+  const submitLabel = isSubmitting ? texts.verifying : texts.login;
+
   return (
-    <div className={className} style={style}>
+    <div className={rootClassName} data-active-method={activeMethod} style={style}>
       {contextHolder}
 
-      <Tabs
-        activeKey={activeMethod}
-        items={tabItems}
-        onChange={(value) => setActiveMethod(value as AuthMethod)}
-        size="large"
-      />
-
-      <Space direction="vertical" size={16} style={{ width: '100%' }}>
+      {primaryMethods.length > 0 && (
+        <Flex
+          gap={4}
+          className="login-method-tabs animate-fade-in-up delay-200"
+          style={{ width: '100%', marginBottom: 24, background: t.surface, border: `1px solid ${t.surfaceBorder}`, padding: 4, borderRadius: 8 }}
+        >
+          {primaryMethods.map((method) => (
+            <Button
+              key={method.key}
+              type={activeMethod === method.key ? 'primary' : 'text'}
+              onClick={() => setActiveMethod(method.key)}
+              className={`login-method-tab login-method-tab-${method.key}`}
+              style={methodButtonStyle(method.key)}
+              icon={method.icon}
+            >
+              {method.label}
+            </Button>
+          ))}
+        </Flex>
+      )}
+
+      <div className="login-content-area animate-scale-in" style={{ minHeight: 320 }}>
         {activeMethod === 'phone' && (
-          <Space direction="vertical" size={12} style={{ width: '100%' }}>
-            <Form.Item label={texts.countryCodePrefix} required>
-              <Space.Compact style={{ width: '100%' }}>
-                <Input
+          <Flex vertical gap={24} style={{ padding: '10px 0' }}>
+            {isInternalProduct && (
+              <div style={{ padding: '10px 14px', borderRadius: 6, background: t.noticeBg, border: `1px solid ${t.noticeBorder}`, fontSize: 12, color: t.noticeText, lineHeight: 1.6 }}>
+                {locale === 'zh-CN'
+                  ? '仅限内部成员使用已登记的手机号登录，未登记的手机号无法登录。'
+                  : 'Only registered internal phone numbers can sign in.'}
+              </div>
+            )}
+            <Flex vertical gap={16}>
+              <Flex gap={12}>
+                <Select
                   value={countryCode}
-                  onChange={(e) => setCountryCode(e.target.value)}
-                  style={{ width: 90 }}
+                  disabled
+                  options={countryCodeSelectOptions}
+                  size="large"
+                  style={{ width: 100, height: 52, borderRadius: 8 }}
                 />
                 <Input
+                  size="large"
                   value={phone}
-                  onChange={(e) => setPhone(e.target.value)}
+                  onChange={(e) => setPhone(phoneDigits(e.target.value).slice(0, 20))}
                   placeholder={texts.phonePlaceholder}
+                  style={{ ...inputStyle, flex: 1 }}
                 />
-              </Space.Compact>
-            </Form.Item>
-            <Form.Item label={texts.code} required>
-              <Space.Compact style={{ width: '100%' }}>
+              </Flex>
+              <Flex gap={12}>
                 <Input
+                  size="large"
                   value={phoneCode}
-                  onChange={(e) => setPhoneCode(e.target.value)}
+                  onChange={(e) => setPhoneCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                   placeholder={texts.codePlaceholder}
+                  style={{ ...inputStyle, flex: 1 }}
                 />
                 <Button
-                  icon={<SendOutlined />}
+                  size="large"
                   onClick={() => sendCode('phone')}
                   loading={isSending.phone}
                   disabled={countdown.phone > 0}
+                  style={sendButtonStyle}
                 >
-                  {countdown.phone > 0 ? `${texts.resendPrefix}(${countdown.phone}s)` : texts.sendCode}
+                  {countdown.phone > 0 ? `${countdown.phone}s` : texts.sendCode}
                 </Button>
-              </Space.Compact>
-            </Form.Item>
-          </Space>
+              </Flex>
+            </Flex>
+            <Button
+              type="primary"
+              size="large"
+              block
+              loading={isSubmitting}
+              disabled={!canSubmit}
+              onClick={handleVerify}
+              style={primaryButtonStyle}
+            >
+              <span>{submitLabel}</span>
+              <ArrowRightOutlined style={{ marginLeft: 8 }} />
+            </Button>
+          </Flex>
         )}
 
         {activeMethod === 'email' && (
-          <Space direction="vertical" size={12} style={{ width: '100%' }}>
-            <Form.Item label={texts.email} required>
+          <Flex vertical gap={24} style={{ padding: '10px 0' }}>
+            {isInternalProduct && (
+              <div style={{ padding: '10px 14px', borderRadius: 6, background: t.noticeBg, border: `1px solid ${t.noticeBorder}`, fontSize: 12, color: t.noticeText, lineHeight: 1.6 }}>
+                {locale === 'zh-CN'
+                  ? '仅限内部成员使用企业邮箱登录，非内部邮箱无法登录。'
+                  : 'Only internal organization email accounts can sign in.'}
+              </div>
+            )}
+            <Flex vertical gap={16}>
               <Input
+                size="large"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
+                onChange={(e) => setEmail(e.target.value.slice(0, 120))}
                 placeholder={texts.emailPlaceholder}
+                prefix={<MailOutlined style={{ color: t.inputIcon, marginRight: 8 }} />}
+                style={inputStyle}
               />
-            </Form.Item>
-            <Form.Item label={texts.code} required>
-              <Space.Compact style={{ width: '100%' }}>
+              <Flex gap={12}>
                 <Input
+                  size="large"
                   value={emailCode}
-                  onChange={(e) => setEmailCode(e.target.value)}
+                  onChange={(e) => setEmailCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                   placeholder={texts.codePlaceholder}
+                  style={{ ...inputStyle, flex: 1 }}
                 />
                 <Button
+                  size="large"
                   onClick={() => sendCode('email')}
                   loading={isSending.email}
                   disabled={countdown.email > 0}
+                  style={sendButtonStyle}
                 >
-                  {countdown.email > 0 ? `${texts.resendPrefix}(${countdown.email}s)` : texts.sendCode}
+                  {countdown.email > 0 ? `${countdown.email}s` : texts.sendCode}
                 </Button>
-              </Space.Compact>
-            </Form.Item>
-          </Space>
+              </Flex>
+            </Flex>
+            <Button
+              type="primary"
+              size="large"
+              block
+              loading={isSubmitting}
+              disabled={!canSubmit}
+              onClick={handleVerify}
+              style={primaryButtonStyle}
+            >
+              <span>{submitLabel}</span>
+              <ArrowRightOutlined style={{ marginLeft: 8 }} />
+            </Button>
+          </Flex>
         )}
 
         {activeMethod === 'whatsapp' && (
-          <Space direction="vertical" size={12} style={{ width: '100%' }}>
-            <Form.Item label={texts.whatsapp} required>
+          <Flex vertical gap={24} style={{ padding: '10px 0' }}>
+            <Flex vertical gap={16}>
               <Input
+                size="large"
                 value={whatsapp}
-                onChange={(e) => setWhatsapp(e.target.value)}
+                onChange={(e) => setWhatsapp(phoneDigits(e.target.value).slice(0, 20))}
                 placeholder={texts.whatsappPlaceholder}
+                prefix={<MessageOutlined style={{ color: t.inputIcon, marginRight: 8 }} />}
+                style={inputStyle}
               />
-            </Form.Item>
-            <Form.Item label={texts.code} required>
-              <Space.Compact style={{ width: '100%' }}>
+              <Flex gap={12}>
                 <Input
+                  size="large"
                   value={whatsappCode}
-                  onChange={(e) => setWhatsappCode(e.target.value)}
+                  onChange={(e) => setWhatsappCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                   placeholder={texts.codePlaceholder}
+                  style={{ ...inputStyle, flex: 1 }}
                 />
                 <Button
+                  size="large"
                   onClick={() => sendCode('whatsapp')}
                   loading={isSending.whatsapp}
                   disabled={countdown.whatsapp > 0}
+                  style={sendButtonStyle}
                 >
-                  {countdown.whatsapp > 0 ? `${texts.resendPrefix}(${countdown.whatsapp}s)` : texts.sendCode}
+                  {countdown.whatsapp > 0 ? `${countdown.whatsapp}s` : texts.sendCode}
                 </Button>
-              </Space.Compact>
-            </Form.Item>
-          </Space>
+              </Flex>
+            </Flex>
+            <Button
+              type="primary"
+              size="large"
+              block
+              loading={isSubmitting}
+              disabled={!canSubmit}
+              onClick={handleVerify}
+              style={primaryButtonStyle}
+            >
+              <span>{submitLabel}</span>
+              <ArrowRightOutlined style={{ marginLeft: 8 }} />
+            </Button>
+          </Flex>
         )}
 
         {activeMethod === 'wechat' && (
-          <Button
-            block
-            size="large"
-            onClick={() => openOAuth('wechat')}
-            icon={<WechatOutlined />}
-          >
-            {texts.wechat}
-          </Button>
+          <Flex vertical align="center" justify="center" gap={20} style={{ padding: '44px 0' }}>
+            <Text style={{ color: t.text, fontWeight: 500, textAlign: 'center' }}>
+              {locale === 'zh-CN' ? '点击下方按钮完成微信授权' : 'Continue with WeChat authorization'}
+            </Text>
+            <Button
+              type="primary"
+              size="large"
+              onClick={() => openOAuth('wechat')}
+              icon={<WechatOutlined />}
+              style={{ ...oauthButtonStyle, background: '#07c160', borderColor: '#07c160' }}
+            >
+              {texts.wechat}
+            </Button>
+          </Flex>
         )}
 
         {activeMethod === 'wecom' && (
-          <Button
-            block
-            size="large"
-            onClick={() => openOAuth('wecom')}
-            icon={<UserOutlined />}
-          >
-            {texts.wecom}
-          </Button>
+          <Flex className="login-wecom-panel" vertical align="center" justify="center" gap={14} style={{ padding: '28px 0 4px' }}>
+            {wecomAutoRedirecting ? (
+              <Flex vertical align="center" justify="center" gap={14} style={{ minHeight: 220 }}>
+                <Spin />
+                <Text style={{ color: t.textSecondary, fontSize: 13, textAlign: 'center' }}>
+                  {locale === 'zh-CN' ? '正在进入企业微信登录...' : 'Opening WeCom sign-in...'}
+                </Text>
+              </Flex>
+            ) : (
+              <>
+                {showWecomContinueButton && (
+                  <>
+                    <Button
+                      type="primary"
+                      size="large"
+                      block
+                      onClick={openWecomLogin}
+                      icon={<UserOutlined />}
+                      style={{ ...oauthButtonStyle, background: '#07c160', borderColor: '#07c160' }}
+                    >
+                      {locale === 'zh-CN' ? '继续企业微信登录' : 'Continue with WeCom'}
+                    </Button>
+                    <Text style={{ color: t.textSecondary, fontSize: 12, textAlign: 'center' }}>
+                      {locale === 'zh-CN' ? '将进入企业微信授权页；已登录客户端时可直接确认' : 'Continue on the WeCom authorization page.'}
+                    </Text>
+                  </>
+                )}
+
+                {!showWecomContinueButton && (
+                  <Text style={{ color: t.textSecondary, fontSize: 13, textAlign: 'center' }}>
+                    {locale === 'zh-CN' ? '使用企业微信扫码完成登录' : 'Scan with WeCom to sign in'}
+                  </Text>
+                )}
+
+                {showWecomContinueButton && !showWecomQR && (
+                  <Button
+                    type="link"
+                    onClick={() => {
+                      setShowWecomQR(true);
+                      void loadWecomQR();
+                    }}
+                  >
+                    {locale === 'zh-CN' ? '无法打开时使用扫码登录' : 'Use QR code if the app does not open'}
+                  </Button>
+                )}
+
+                {showWecomQRCode && (
+                  <>
+                    <div
+                      className="login-wecom-qr-frame"
+                      style={{
+                        width: '100%',
+                        maxWidth: 340,
+                        height: 360,
+                        overflow: 'hidden',
+                      }}
+                    >
+                      {(!showWecomQR || loadingWecomQR) && (
+                        <Flex align="center" justify="center" style={{ height: 360 }}>
+                          <Spin />
+                        </Flex>
+                      )}
+                      {showWecomQR && !loadingWecomQR && wecomURLs?.auth_url && (
+                        <iframe
+                          className="login-wecom-qr-iframe"
+                          title={locale === 'zh-CN' ? '企业微信扫码登录' : 'WeCom sign-in QR code'}
+                          src={wecomURLs.auth_url}
+                          style={{
+                            display: 'block',
+                            width: 380,
+                            height: 400,
+                            border: 0,
+                            background: t.qrBg,
+                            transform: 'translateX(-20px) scale(0.9)',
+                            transformOrigin: 'top center',
+                          }}
+                        />
+                      )}
+                      {showWecomQR && !loadingWecomQR && !wecomURLs?.auth_url && (
+                        <Flex vertical align="center" justify="center" gap={12} style={{ height: 360, padding: 24, textAlign: 'center' }}>
+                          <Text style={{ color: t.textSecondary }}>
+                            {locale === 'zh-CN' ? '企业微信二维码加载失败' : 'Failed to load WeCom QR code'}
+                          </Text>
+                          <Button onClick={loadWecomQR}>
+                            {locale === 'zh-CN' ? '重新加载' : 'Reload'}
+                          </Button>
+                        </Flex>
+                      )}
+                    </div>
+                    {showWecomContinueButton && (
+                      <Text style={{ color: t.textSecondary, fontSize: 13, textAlign: 'center' }}>
+                        {locale === 'zh-CN' ? '使用企业微信扫码完成登录' : 'Scan with WeCom to sign in'}
+                      </Text>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          </Flex>
         )}
+      </div>
 
-        {(activeMethod === 'phone' || activeMethod === 'email' || activeMethod === 'whatsapp') && (
-          <Button
-            type="primary"
-            size="large"
-            loading={isSubmitting}
-            disabled={!canSubmit}
-            onClick={handleVerify}
-          >
-            {isSubmitting ? texts.verifying : texts.login}
-          </Button>
-        )}
-      </Space>
+      {showSocialMethods && (
+        <Flex justify="center" gap={16} style={{ marginTop: 24 }}>
+          {wechatConfigured && (
+            <Tooltip title={undefined}>
+              <span style={{ display: 'inline-flex' }}>
+                <Button
+                  type="text"
+                  size="large"
+                  onClick={() => openOAuth('wechat')}
+                  className="login-social-button login-social-button-wechat"
+                  icon={<WechatOutlined style={{ fontSize: 18, color: '#94a0bf' }} />}
+                  style={socialButtonStyle}
+                >
+                  {texts.wechat}
+                </Button>
+              </span>
+            </Tooltip>
+          )}
+          {whatsappConfigured && (
+            <Tooltip title={undefined}>
+              <span style={{ display: 'inline-flex' }}>
+                <Button
+                  type={activeMethod === 'whatsapp' ? 'primary' : 'text'}
+                  size="large"
+                  onClick={() => setActiveMethod('whatsapp')}
+                  className="login-social-button login-social-button-whatsapp"
+                  icon={<MessageOutlined style={{ fontSize: 18, color: activeMethod === 'whatsapp' ? '#fff' : '#94a0bf' }} />}
+                  style={activeMethod === 'whatsapp' ? { ...socialButtonStyle, color: '#fff' } : socialButtonStyle}
+                >
+                  {texts.whatsapp}
+                </Button>
+              </span>
+            </Tooltip>
+          )}
+        </Flex>
+      )}
 
       <Modal
         open={Boolean(consentData)}
@@ -837,7 +1395,7 @@ export function RunIDLoginWidget({
           setConsentData(null);
           setAgreed(false);
         }}
-        destroyOnClose
+        destroyOnHidden
       >
         {consentData && (
           <Space direction="vertical" size={12} style={{ width: '100%' }}>