app/(tabs)/login.tsx

@@ -2,7 +2,6 @@ import Handers from '@/assets/icons/svg/handers.svg';
 import LoginIP1 from '@/assets/icons/svg/loginIp1.svg';
 import LoginIP2 from '@/assets/icons/svg/loginIp2.svg';
 import ForgetPwd from '@/components/login/forgetPwd';
-import Login from '@/components/login/login';
 import PhoneLogin from '@/components/login/phoneLogin';
 import SignUp from '@/components/login/signUp';
 import { ThemedText } from '@/components/ThemedText';
@@ -20,10 +19,7 @@ const LoginScreen = () => {
     const [error, setError] = useState<string>('123');
     const [containerHeight, setContainerHeight] = useState(0);
     const { height: windowHeight } = useWindowDimensions();
-    // 展示首次输入密码
     const [showPassword, setShowPassword] = useState(false);
-    // 展示二次输入密码
-    const [showSecondPassword, setShowSecondPassword] = useState(false);
     const [keyboardOffset, setKeyboardOffset] = useState(0);
     const insets = useSafeAreaInsets();
     // 判断是否有白边
@@ -81,7 +77,7 @@ const LoginScreen = () => {
                             }}
                         >
                             {
-                                (showPassword || showSecondPassword)
+                                showPassword
                                     ?
                                     <LoginIP2 />
                                     :
@@ -130,8 +126,6 @@ const LoginScreen = () => {
                                         {...commonProps}
                                         setShowPassword={setShowPassword}
                                         showPassword={showPassword}
-                                        setShowSecondPassword={setShowSecondPassword}
-                                        showSecondPassword={showSecondPassword}
                                     />
                                 ),
                                 forgetPwd: (
@@ -140,12 +134,12 @@ const LoginScreen = () => {
                                     />
                                 ),
                                 login: (
-                                    <Login
+                                    // <Login
-                                        {...commonProps}
+                                    //     {...commonProps}
-                                        setShowPassword={setShowPassword}
+                                    //     setShowPassword={setShowPassword}
-                                        showPassword={showPassword}
+                                    //     showPassword={showPassword}
-                                    />
+                                    // />
-                                    // <PhoneLogin  {...commonProps} />
+                                    <PhoneLogin  {...commonProps} />
                                 ),
                                 code: (
                                     <PhoneLogin  {...commonProps} />

components/login/forgetPwd.tsx

@@ -2,7 +2,7 @@ import { fetchApi } from "@/lib/server-api-util";
 import { User } from "@/types/user";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
 import { ThemedText } from "../ThemedText";
 
 interface LoginProps {
@@ -15,10 +15,12 @@ interface LoginProps {
 const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
     const { t } = useTranslation();
     const [loading, setLocading] = useState(false);
+    // 发送邮箱后把按钮变为disabled
     const [isDisabled, setIsDisabled] = useState(false);
     const [email, setEmail] = useState('');
     const [countdown, setCountdown] = useState(0);
 
+    // 倒计时效果
     useEffect(() => {
         if (countdown > 0) {
             const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
@@ -28,6 +30,7 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
         }
     }, [countdown, isDisabled]);
 
+    // 发送邮件
     const handleSubmit = () => {
         if (!email) {
             setError(t('auth.forgetPwd.emailPlaceholder', { ns: 'login' }));
@@ -38,7 +41,7 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
         const body = {
             email: email,
         }
-
+        // 调接口确定邮箱是否正确，是否有该用户邮箱权限
         fetchApi<User>('/iam/reset-password-session', {
             method: 'POST',
             body: JSON.stringify(body),
@@ -47,17 +50,19 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
             }
         })
             .then((_) => {
+                // console.log("Password reset email sent successfully");
                 setIsDisabled(true);
-                setCountdown(60);
+                setCountdown(60); // 开始60秒倒计时
             })
             .catch((error) => {
+                // console.error('Failed to send reset email:', error);
                 setError(t('auth.forgetPwd.sendEmailError', { ns: 'login' }));
             })
             .finally(() => {
                 setLocading(false);
             });
     };
-
+    // 返回登陆
     const handleBackToLogin = () => {
         if (setIsSignUp) {
             setIsSignUp('login');
@@ -67,14 +72,14 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
         }
     }
 
-    return (
+    return <View>
-        <View style={styles.container}>
+        {/* 邮箱输入框 */}
-            <View style={styles.inputContainer}>
+        <View className="mb-5">
-                <ThemedText style={styles.inputLabel}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                 {t('auth.forgetPwd.title', { ns: 'login' })}
             </ThemedText>
             <TextInput
-                    style={styles.textInput}
+                className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
                 placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
                 placeholderTextColor="#ccc"
                 value={email}
@@ -83,79 +88,34 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
                 autoCapitalize="none"
             />
         </View>
-
+        {/* 发送重置密码邮件 */}
         <TouchableOpacity
-                style={[
+            className={`w-full bg-[#E2793F] rounded-full p-4 items-center ${isDisabled ? 'opacity-50' : ''}`}
-                    styles.submitButton,
-                    (isDisabled || loading) && styles.disabledButton
-                ]}
             onPress={handleSubmit}
             disabled={isDisabled || loading}
         >
             {loading ? (
                 <ActivityIndicator color="#fff" />
             ) : (
-                    <ThemedText style={styles.buttonText}>
+                <ThemedText className="!text-white font-semibold">
                     {isDisabled
                         ? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
                         : t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
+
                 </ThemedText>
             )}
         </TouchableOpacity>
-
+        {/* 返回登陆 */}
         <TouchableOpacity
-                style={styles.backButton}
+            className="self-center mt-6"
             onPress={handleBackToLogin}
         >
-                <ThemedText style={styles.backButtonText}>
+            <ThemedText className="!text-textPrimary text-sm">
                 {t('auth.forgetPwd.goback', { ns: 'login' })}
             </ThemedText>
         </TouchableOpacity>
     </View>
-    );
 }
 
-const styles = StyleSheet.create({
-    container: {
-        width: '100%',
-    },
-    inputContainer: {
-        marginBottom: 20,
-    },
-    inputLabel: {
-        fontSize: 16,
-        color: '#1F2937',
-        marginBottom: 8,
-        marginLeft: 8,
-    },
-    textInput: {
-        borderRadius: 12,
-        padding: 12,
-        fontSize: 16,
-        backgroundColor: '#FFF8DE',
-    },
-    submitButton: {
-        width: '100%',
-        backgroundColor: '#E2793F',
-        borderRadius: 28,
-        padding: 16,
-        alignItems: 'center',
-    },
-    disabledButton: {
-        opacity: 0.5,
-    },
-    buttonText: {
-        color: '#FFFFFF',
-        fontWeight: '600',
-    },
-    backButton: {
-        alignSelf: 'center',
-        marginTop: 24,
-    },
-    backButtonText: {
-        color: '#1F2937',
-        fontSize: 14,
-    },
-});
 
-export default ForgetPwd;
+export default ForgetPwd

components/login/login.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
 import { useAuth } from "../../contexts/auth-context";
 import { fetchApi } from "../../lib/server-api-util";
 import { User } from "../../types/user";
@@ -52,7 +52,6 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
                 router.replace('/user-message');
             }
         } catch (error) {
-            // Handle error
         } finally {
             setIsLoading(false);
         }
@@ -65,15 +64,14 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
     const handleSignUp = () => {
         updateUrlParam('status', 'signUp');
     };
-
+    return <View>
-    return (
+        {/* 邮箱输入框 */}
-        <View style={styles.container}>
+        <View className="mb-5">
-            <View style={[styles.inputContainer, { marginBottom: 20 }]}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
-                <ThemedText style={styles.inputLabel}>
                 {t('auth.login.email', { ns: 'login' })}
             </ThemedText>
             <TextInput
-                    style={styles.textInput}
+                className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
                 placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
                 placeholderTextColor="#ccc"
                 value={email}
@@ -81,17 +79,18 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
                     setEmail(text);
                     setError('123');
                 }}
+                keyboardType="email-address"
                 autoCapitalize="none"
             />
         </View>
-
+        {/* 密码输入框 */}
-            <View style={styles.inputContainer}>
+        <View className="mb-2">
-                <ThemedText style={styles.inputLabel}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                 {t('auth.login.password', { ns: 'login' })}
             </ThemedText>
-                <View style={styles.passwordInputContainer}>
+            <View className="relative">
                 <TextInput
-                        style={[styles.textInput, { paddingRight: 48 }]}
+                    className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground pr-12"
                     placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
                     placeholderTextColor="#ccc"
                     value={password}
@@ -102,7 +101,7 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
                     secureTextEntry={!showPassword}
                 />
                 <TouchableOpacity
-                        style={styles.eyeIcon}
+                    className="absolute right-3 top-3.5"
                     onPress={() => setShowPassword(!showPassword)}
                 >
                     <Ionicons
@@ -114,107 +113,44 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
             </View>
         </View>
 
+        {/* 忘记密码链接 */}
         <TouchableOpacity
-                style={styles.forgotPassword}
+            className="self-end mb-6"
             onPress={handleForgotPassword}
         >
-                <ThemedText style={styles.forgotPasswordText}>
+            <ThemedText className="!text-textPrimary text-sm">
                 {t('auth.login.forgotPassword', { ns: 'login' })}
             </ThemedText>
         </TouchableOpacity>
 
+        {/* 登录按钮 */}
         <TouchableOpacity
-                style={[styles.loginButton, isLoading && { opacity: 0.7 }]}
+            className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''}`}
             onPress={handleLogin}
             disabled={isLoading}
         >
             {isLoading ? (
                 <ActivityIndicator color="#fff" />
             ) : (
-                    <ThemedText style={styles.loginButtonText}>
+                <ThemedText className="!text-white font-semibold">
                     {t('auth.login.loginButton', { ns: 'login' })}
                 </ThemedText>
             )}
         </TouchableOpacity>
 
-            <View style={styles.signupContainer}>
+        {/* 注册链接 */}
-                <ThemedText style={styles.signupText}>
+        <View className="flex-row justify-center mt-2">
+            <ThemedText className="!text-textPrimary text-sm">
                 {t('auth.login.signUpMessage', { ns: 'login' })}
             </ThemedText>
             <TouchableOpacity onPress={handleSignUp}>
-                    <ThemedText style={styles.signupLink}>
+                <ThemedText className="!text-[#E2793F] text-sm font-semibold ml-1">
                     {t('auth.login.signUp', { ns: 'login' })}
                 </ThemedText>
             </TouchableOpacity>
         </View>
     </View>
-    );
+}
-};
 
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    inputContainer: {
-        marginBottom: 20,
-    },
-    inputLabel: {
-        fontSize: 16,
-        color: '#1F2937',
-        marginBottom: 8,
-        marginLeft: 8,
-    },
-    textInput: {
-        borderRadius: 12,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        fontSize: 16,
-        textAlignVertical: 'center',
-        backgroundColor: '#FFF8DE'
-    },
-    passwordInputContainer: {
-        position: 'relative',
-    },
-    eyeIcon: {
-        position: 'absolute',
-        right: 12,
-        top: 14,
-    },
-    forgotPassword: {
-        alignSelf: 'flex-end',
-        marginBottom: 24,
-    },
-    forgotPasswordText: {
-        color: '#1F2937',
-        fontSize: 14,
-    },
-    loginButton: {
-        width: '100%',
-        backgroundColor: '#E2793F',
-        borderRadius: 28,
-        padding: 16,
-        alignItems: 'center',
-        marginBottom: 24,
-    },
-    loginButtonText: {
-        color: '#FFFFFF',
-        fontWeight: '600',
-    },
-    signupContainer: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 8,
-    },
-    signupText: {
-        color: '#1F2937',
-        fontSize: 14,
-    },
-    signupLink: {
-        color: '#E2793F',
-        fontSize: 14,
-        fontWeight: '600',
-        marginLeft: 4,
-    },
-});
 
-export default Login;
+export default Login

components/login/signUp.tsx

@@ -2,7 +2,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useEffect, useState } from 'react';
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, TextInput, TouchableOpacity, View } from 'react-native';
 import { useAuth } from "../../contexts/auth-context";
 import { fetchApi } from "../../lib/server-api-util";
 import { User } from "../../types/user";
@@ -14,11 +14,9 @@ interface LoginProps {
     setError: (error: string) => void;
     setShowPassword: (showPassword: boolean) => void;
     showPassword: boolean;
-    setShowSecondPassword: (showSecondPassword: boolean) => void;
-    showSecondPassword: boolean;
 }
 
-const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setShowSecondPassword, showSecondPassword }: LoginProps) => {
+const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword }: LoginProps) => {
     const { t } = useTranslation();
     const { login } = useAuth();
     const router = useRouter();
@@ -34,6 +32,7 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
     // 从 URL 参数中获取 task_id 和 steps
     const params = useLocalSearchParams<{ task_id?: string; steps?: string }>();
     const taskId = params.task_id;
+    const steps = params.steps;
 
     const handlePasswordChange = (value: string) => {
         setPassword(value);
@@ -140,19 +139,17 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
     // 初始化
     useEffect(() => {
         setShowPassword(false)
-        setShowSecondPassword(false)
     }, [])
 
-    return (
+    return <View className="w-full">
-        <View style={styles.container}>
         {/* 邮箱输入 */}
-            <View style={styles.inputContainer}>
+        <View className="mb-4">
-                <ThemedText style={styles.inputLabel}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                 {t('auth.login.email', { ns: 'login' })}
             </ThemedText>
-                <View style={styles.inputWrapper}>
+            <View className="border border-gray-300 rounded-2xl bg-inputBackground overflow-hidden">
                 <TextInput
-                        style={styles.textInput}
+                    className="p-3 text-base flex-1"
                     placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
                     placeholderTextColor="#ccc"
                     value={email}
@@ -167,13 +164,13 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
         </View>
 
         {/* 密码输入 */}
-            <View style={styles.inputContainer}>
+        <View className="mb-4">
-                <ThemedText style={styles.inputLabel}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                 {t('auth.login.password', { ns: 'login' })}
             </ThemedText>
-                <View style={styles.passwordInputContainer}>
+            <View className="border border-gray-300 rounded-2xl bg-inputBackground overflow-hidden flex-row items-center">
                 <TextInput
-                        style={[styles.textInput, { flex: 1 }]}
+                    className="p-3 text-base flex-1"
                     placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
                     placeholderTextColor="#ccc"
                     value={password}
@@ -185,7 +182,7 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                 />
                 <TouchableOpacity
                     onPress={() => setShowPassword(!showPassword)}
-                        style={styles.eyeIcon}
+                    className="px-3 py-2"
                 >
                     <Ionicons
                         name={showPassword ? 'eye' : 'eye-off'}
@@ -197,13 +194,13 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
         </View>
 
         {/* 确认密码 */}
-            <View style={[styles.inputContainer, { marginBottom: 24 }]}>
+        <View className="mb-6">
-                <ThemedText style={styles.inputLabel}>
+            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                 {t('auth.signup.confirmPassword', { ns: 'login' })}
             </ThemedText>
-                <View style={styles.passwordInputContainer}>
+            <View className="border border-gray-300 rounded-2xl bg-inputBackground overflow-hidden flex-row items-center">
                 <TextInput
-                        style={[styles.textInput, { flex: 1 }]}
+                    className="p-3 text-base flex-1"
                     placeholder={t('auth.signup.confirmPasswordPlaceholder', { ns: 'login' })}
                     placeholderTextColor="#ccc"
                     value={confirmPassword}
@@ -211,14 +208,14 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                         handleConfirmPasswordChange(value)
                         setError('123')
                     }}
-                        secureTextEntry={!showSecondPassword}
+                    secureTextEntry={!showPassword}
                 />
                 <TouchableOpacity
-                        onPress={() => setShowSecondPassword(!showSecondPassword)}
+                    onPress={() => setShowPassword(!showPassword)}
-                        style={styles.eyeIcon}
+                    className="px-3 py-2"
                 >
                     <Ionicons
-                            name={showSecondPassword ? 'eye' : 'eye-off'}
+                        name={showPassword ? 'eye' : 'eye-off'}
                         size={20}
                         color="#666"
                     />
@@ -228,19 +225,19 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
 
         {/* 注册按钮 */}
         <TouchableOpacity
-                style={[styles.signupButton, loading && { opacity: 0.7 }]}
+            className={`w-full bg-[#E2793F] rounded-full p-4 items-center ${loading ? 'opacity-70' : ''}`}
             onPress={handleSubmit}
             disabled={loading}
         >
             {loading ? (
                 <ActivityIndicator color="#fff" />
             ) : (
-                    <ThemedText style={styles.signupButtonText}>
+                <ThemedText className="!text-white font-semibold">
                     {t("auth.signup.signupButton", { ns: 'login' })}
                 </ThemedText>
             )}
         </TouchableOpacity>
-            <View style={styles.termsContainer}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 10 }}>
             <TouchableOpacity
                 onPress={() => {
                     const newValue = !checked;
@@ -253,74 +250,81 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                     }
 
                 }}
-                    style={[
+                style={{
-                        styles.checkbox,
+                    width: 20,
-                        checked && styles.checkboxChecked
+                    height: 20,
-                    ]}
+                    borderRadius: 10,
+                    borderWidth: 2,
+                    borderColor: checked ? '#E2793F' : '#ccc',
+                    backgroundColor: checked ? '#E2793F' : 'transparent',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    marginRight: 8,
+                }}
             >
                 {checked && (
                     <Ionicons name="checkmark" size={14} color="white" />
                 )}
             </TouchableOpacity>
-                <View style={styles.termsTextContainer}>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', flex: 1 }}>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.agree", { ns: 'login' })}
                 </ThemedText>
                 <TouchableOpacity onPress={() => {
                     setModalType('terms');
                     setPrivacyModalVisible(true);
                 }}>
-                        <ThemedText style={styles.termsLink}>
+                    <ThemedText className="text-sm !text-[#E2793F]">
                         {t("auth.telLogin.terms", { ns: 'login' })}
                     </ThemedText>
                 </TouchableOpacity>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.and", { ns: 'login' })}
                 </ThemedText>
                 <TouchableOpacity onPress={() => {
                     setModalType('privacy');
                     setPrivacyModalVisible(true);
                 }}>
-                        <ThemedText style={styles.termsLink}>
+                    <ThemedText className="text-sm !text-[#E2793F]">
                         {t("auth.telLogin.privacyPolicy", { ns: 'login' })}
                     </ThemedText>
                 </TouchableOpacity>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.and", { ns: 'login' })}
                 </ThemedText>
                 <TouchableOpacity onPress={() => {
                     setModalType('user');
                     setPrivacyModalVisible(true);
                 }}>
-                        <ThemedText style={styles.termsLink}>
+                    <ThemedText className="text-sm !text-[#E2793F]">
                         {t("auth.telLogin.userAgreement", { ns: 'login' })}
                     </ThemedText>
                 </TouchableOpacity>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.and", { ns: 'login' })}
                 </ThemedText>
                 <TouchableOpacity onPress={() => {
                     setModalType('ai');
                     setPrivacyModalVisible(true);
                 }}>
-                        <ThemedText style={styles.termsLink}>
+                    <ThemedText className="text-sm !text-[#E2793F]">
                         {t("auth.telLogin.aiAgreement", { ns: 'login' })}
                     </ThemedText>
                 </TouchableOpacity>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.agreement", { ns: 'login' })}
                 </ThemedText>
-                    <ThemedText style={styles.termsLink}>
+                <ThemedText className="text-sm !text-[#E2793F]">
                     {t("common.name")}
                 </ThemedText>
-                    <ThemedText style={styles.termsText}>
+                <ThemedText className="text-sm !text-textPrimary">
                     {t("auth.telLogin.getPhone", { ns: 'login' })}
                 </ThemedText>
             </View>
         </View>
         {/* 已有账号 */}
-            <View style={styles.loginContainer}>
+        <View className="flex-row justify-center mt-6">
-                <ThemedText style={styles.loginText}>
+            <ThemedText className="text-sm !text-textPrimary">
                 {t("auth.signup.haveAccount", { ns: 'login' })}
             </ThemedText>
             <TouchableOpacity
@@ -328,7 +332,7 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                     updateUrlParam("status", "login");
                 }}
             >
-                    <ThemedText style={styles.loginLink}>
+                <ThemedText className="!text-[#E2793F] text-sm font-semibold ml-1">
                     {t("auth.signup.login", { ns: 'login' })}
                 </ThemedText>
             </TouchableOpacity>
@@ -337,105 +341,6 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
         {/* 协议弹窗 */}
         <PrivacyModal modalVisible={privacyModalVisible} setModalVisible={setPrivacyModalVisible} type={modalType} />
     </View>
-    );
+}
-};
 
-const styles = StyleSheet.create({
+export default SignUp
-    container: {
-        width: '100%',
-    },
-    inputContainer: {
-        marginBottom: 16,
-    },
-    inputWrapper: {
-        borderRadius: 12,
-        backgroundColor: '#FFF8DE',
-        overflow: 'hidden',
-    },
-    inputLabel: {
-        fontSize: 16,
-        color: '#1F2937',
-        marginBottom: 8,
-        marginLeft: 8,
-    },
-    textInput: {
-        padding: 12,
-        fontSize: 16,
-        color: '#1F2937',
-    },
-    passwordInputContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 12,
-        backgroundColor: '#FFF8DE',
-        overflow: 'hidden',
-    },
-    eyeIcon: {
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    signupButton: {
-        width: '100%',
-        backgroundColor: '#E2793F',
-        borderRadius: 28,
-        padding: 16,
-        alignItems: 'center',
-        marginBottom: 16,
-    },
-    signupButtonText: {
-        color: '#FFFFFF',
-        fontWeight: '600',
-    },
-    termsContainer: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        marginVertical: 10,
-    },
-    checkbox: {
-        width: 20,
-        height: 20,
-        borderRadius: 10,
-        borderWidth: 2,
-        borderColor: '#E5E7EB',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 8,
-        marginTop: 2,
-    },
-    checkboxChecked: {
-        backgroundColor: '#E2793F',
-        borderColor: '#E2793F',
-    },
-    termsTextContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        flex: 1,
-    },
-    termsText: {
-        fontSize: 14,
-        color: '#1F2937',
-        lineHeight: 20,
-    },
-    termsLink: {
-        fontSize: 14,
-        color: '#E2793F',
-        lineHeight: 20,
-    },
-    loginContainer: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        marginTop: 24,
-    },
-    loginText: {
-        fontSize: 14,
-        color: '#1F2937',
-    },
-    loginLink: {
-        color: '#E2793F',
-        fontSize: 14,
-        fontWeight: '600',
-        marginLeft: 4,
-    },
-});
-
-export default SignUp;