feat(auth): implement multi-step registration process and enhance background services

- Updated RegisterScreen to support a multi-step registration flow with components for email input, verification, and profile setup. - Added new components: VerificationCodeInput, StepIndicator, and corresponding types for step management. - Enhanced background service to check authentication status before executing tasks, improving app reliability. - Updated TypeScript configuration to include module resolution and JSON module support. This update significantly improves the user registration experience and ensures background tasks are only executed for authenticated users.
2026-04-01 04:48:38 +08:00
parent 5614b4078a
commit c771bd9755
13 changed files with 1659 additions and 463 deletions
--- a/src/screens/auth/RegisterScreen.tsx
+++ b/src/screens/auth/RegisterScreen.tsx
@@ -1,27 +1,26 @@
 /**
- * 注册页 RegisterScreen（简洁表单样式）
- * 胡萝卜BBS - 用户注册
+ * 注册页面（分步向导版）
+ * 胡萝卜BBS - 用户注册流程
 * 
- * 设计风格：
- * - 纯白背景，扁平化设计
- * - 增大间距，避免页面太空
- * - 输入框带灰色背景填充
- * - 橙色圆角按钮
+ * 步骤：
+ * 1. 输入邮箱
+ * 2. 填写验证码
+ * 3. 设置用户信息
+ * 
+ * 使用 registerStore 持久化存储步骤数据
 */

-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import {
  View,
  Text,
  StyleSheet,
-  TouchableOpacity,
-  TextInput,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
-  ActivityIndicator,
  Animated,
  StatusBar,
+  TouchableOpacity,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter } from 'expo-router';
@@ -29,8 +28,19 @@ import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { useAppColors, type AppColors } from '../../theme';
 import { authService, resolveAuthApiError } from '../../services/authService';
 import { useAuthStore } from '../../stores';
+import {
+  useRegisterStore,
+  useRegisterStep,
+  useRegisterFormData,
+  useRegisterCountdown,
+} from '../../stores/registerStore';
 import * as hrefs from '../../navigation/hrefs';
 import { showPrompt } from '../../services/promptService';
+import { RegisterStepIndicator } from '../../components/common';
+import { RegisterStepProps, RegisterStep } from './types';
+import { RegisterStep1Email } from './RegisterStep1Email';
+import { RegisterStep2Verification } from './RegisterStep2Verification';
+import { RegisterStep3Profile } from './RegisterStep3Profile';

 // 胡萝卜橙主题色
 const THEME_COLORS = {
@@ -39,6 +49,13 @@ const THEME_COLORS = {
  primaryDark: '#E55A2B',
 };

+// 步骤组件映射
+const STEP_COMPONENTS = [
+  RegisterStep1Email,
+  RegisterStep2Verification,
+  RegisterStep3Profile,
+];
+
 export const RegisterScreen: React.FC = () => {
  const colors = useAppColors();
  const styles = useMemo(() => createRegisterStyles(colors), [colors]);
@@ -46,30 +63,48 @@ export const RegisterScreen: React.FC = () => {
  const register = useAuthStore((state) => state.register);
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);

+  // 注册步骤状态
+  const currentStep = useRegisterStep();
+  const formData = useRegisterFormData();
+  const countdown = useRegisterCountdown();
+  const {
+    setCurrentStep,
+    updateFormData,
+    setCountdown,
+    decrementCountdown,
+    markStepCompleted,
+    resetRegisterData,
+    goToNextStep,
+    goToPrevStep,
+  } = useRegisterStore();
+
+  // 本地状态
+  const [loading, setLoading] = React.useState(false);
+  const [sendingCode, setSendingCode] = React.useState(false);
+
+  // 动画值
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(20)).current;
+
+  // 恢复持久化的数据
+  const [isHydrated, setIsHydrated] = React.useState(false);
+
+  useEffect(() => {
+    const hydrateData = async () => {
+      const { hydrate } = useRegisterStore.getState();
+      await hydrate();
+      setIsHydrated(true);
+    };
+    hydrateData();
+  }, []);
+
+  // 检查是否已登录
  useEffect(() => {
    if (isAuthenticated) {
      router.replace(hrefs.hrefHome());
    }
  }, [isAuthenticated, router]);

-  const [username, setUsername] = useState('');
-  const [nickname, setNickname] = useState('');
-  const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [verificationCode, setVerificationCode] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [sendingCode, setSendingCode] = useState(false);
-  const [countdown, setCountdown] = useState(0);
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
-  const [agreedToTerms, setAgreedToTerms] = useState(true);
-
-  // 动画值
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const slideAnim = useRef(new Animated.Value(20)).current;
-
  // 启动入场动画
  useEffect(() => {
    Animated.parallel([
@@ -84,129 +119,112 @@ export const RegisterScreen: React.FC = () => {
        useNativeDriver: true,
      }),
    ]).start();
-  }, []);
+  }, [currentStep]); // 步骤切换时重新触发动画

+  // 倒计时处理
  useEffect(() => {
    if (countdown <= 0) {
      return;
    }
    const timer = setInterval(() => {
-      setCountdown((prev) => (prev <= 1 ? 0 : prev - 1));
+      decrementCountdown();
    }, 1000);
    return () => clearInterval(timer);
-  }, [countdown]);
-
-  // 表单验证
-  const validateForm = (): boolean => {
-    if (!username.trim()) {
-      showPrompt({ title: '提示', message: '请输入用户名', type: 'warning' });
-      return false;
-    }
-    if (username.length < 3 || username.length > 20) {
-      showPrompt({ title: '提示', message: '用户名长度需在3-20个字符之间', type: 'warning' });
-      return false;
-    }
-    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
-      showPrompt({ title: '提示', message: '用户名只能包含字母、数字和下划线', type: 'warning' });
-      return false;
-    }
-    if (!nickname.trim()) {
-      showPrompt({ title: '提示', message: '请输入昵称', type: 'warning' });
-      return false;
-    }
-    if (nickname.length < 2 || nickname.length > 20) {
-      showPrompt({ title: '提示', message: '昵称长度需在2-20个字符之间', type: 'warning' });
-      return false;
-    }
-    if (!email.trim()) {
-      showPrompt({ title: '提示', message: '请输入邮箱', type: 'warning' });
-      return false;
-    }
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      showPrompt({ title: '提示', message: '请输入正确的邮箱地址', type: 'warning' });
-      return false;
-    }
-    if (!verificationCode.trim()) {
-      showPrompt({ title: '提示', message: '请输入邮箱验证码', type: 'warning' });
-      return false;
-    }
-    if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
-      showPrompt({ title: '提示', message: '请输入正确的手机号', type: 'warning' });
-      return false;
-    }
-    if (!password) {
-      showPrompt({ title: '提示', message: '请输入密码', type: 'warning' });
-      return false;
-    }
-    if (password.length < 6) {
-      showPrompt({ title: '提示', message: '密码长度不能少于6位', type: 'warning' });
-      return false;
-    }
-    if (password !== confirmPassword) {
-      showPrompt({ title: '提示', message: '两次输入的密码不一致', type: 'warning' });
-      return false;
-    }
-    if (!agreedToTerms) {
-      showPrompt({ title: '提示', message: '请同意用户协议和隐私政策', type: 'warning' });
-      return false;
-    }
-    return true;
-  };
-
-  const handleSendCode = async () => {
-    if (!email.trim()) {
-      showPrompt({ title: '提示', message: '请先输入邮箱', type: 'warning' });
-      return;
-    }
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
-      showPrompt({ title: '提示', message: '请输入正确的邮箱地址', type: 'warning' });
-      return;
-    }
-    if (countdown > 0) {
-      return;
-    }
+  }, [countdown, decrementCountdown]);

+  // 发送验证码
+  const handleSendCode = async (email: string): Promise<boolean> => {
    setSendingCode(true);
    try {
      const ok = await authService.sendRegisterCode(email.trim());
      if (ok) {
-        setCountdown(60);
-        showPrompt({ title: '发送成功', message: '验证码已发送，请查收邮箱', type: 'success' });
+        setCountdown(180); // 3分钟倒计时
+        showPrompt({
+          title: '发送成功',
+          message: '验证码已发送，请查收邮箱（有效期3分钟）',
+          type: 'success',
+        });
+        return true;
      }
+      return false;
    } catch (error: any) {
-      showPrompt({ title: '发送失败', message: resolveAuthApiError(error, '验证码发送失败，请稍后重试'), type: 'error' });
+      showPrompt({
+        title: '发送失败',
+        message: resolveAuthApiError(error, '验证码发送失败，请稍后重试'),
+        type: 'error',
+      });
+      return false;
    } finally {
      setSendingCode(false);
    }
  };

+  // 处理步骤完成
+  const handleStepComplete = () => {
+    markStepCompleted(currentStep as 0 | 1 | 2);
+    goToNextStep();
+  };
+
+  // 处理返回上一步
+  const handleGoBack = () => {
+    if (currentStep > 0) {
+      goToPrevStep();
+    }
+  };
+
  // 处理注册
  const handleRegister = async () => {
-    if (!validateForm()) return;
-    
    setLoading(true);
    try {
      const success = await register({
-        username,
-        password,
-        nickname,
-        email: email.trim(),
-        verification_code: verificationCode.trim(),
-        phone: phone || undefined,
+        username: formData.username,
+        password: formData.password,
+        nickname: formData.nickname,
+        email: formData.email.trim(),
+        verification_code: formData.verificationCode.trim(),
+        phone: formData.phone || undefined,
      });
+
      if (success) {
-        // 注册成功，导航会自动切换到主页
+        // 注册成功，清空注册数据
+        resetRegisterData();
+        // 导航会自动切换到主页（通过 isAuthenticated 变化）
      } else {
        const msg = useAuthStore.getState().error || '注册失败，请稍后重试';
        showPrompt({ title: '注册失败', message: msg, type: 'error' });
      }
    } catch (error: any) {
-      showPrompt({ title: '注册失败', message: resolveAuthApiError(error, '请稍后重试'), type: 'error' });
+      showPrompt({
+        title: '注册失败',
+        message: resolveAuthApiError(error, '请稍后重试'),
+        type: 'error',
+      });
    } finally {
      setLoading(false);
    }
  };

+  // 渲染当前步骤的组件
+  const StepComponent = STEP_COMPONENTS[currentStep];
+
+  // 准备步骤组件的 props
+  const stepProps: RegisterStepProps = {
+    formData,
+    updateFormData,
+    onNext: currentStep === 2 ? handleRegister : handleStepComplete,
+    onPrev: handleGoBack,
+    colors,
+    loading,
+    sendingCode,
+    countdown,
+    onSendCode: handleSendCode,
+  };
+
+  // 获取已完成的步骤
+  const completedSteps = [0, 1, 2].filter(
+    (step) => useRegisterStore.getState().completedSteps[step as 0 | 1 | 2]
+  );
+
  // 跳转到登录页
  const handleGoToLogin = () => {
    router.push(hrefs.hrefAuthLogin());
@@ -224,7 +242,32 @@ export const RegisterScreen: React.FC = () => {
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
        >
-          <Animated.View 
+          {/* 顶部导航 */}
+          <View style={styles.header}>
+            <TouchableOpacity
+              onPress={currentStep > 0 ? handleGoBack : handleGoToLogin}
+              style={styles.backIconButton}
+              activeOpacity={0.8}
+            >
+              <MaterialCommunityIcons
+                name={currentStep > 0 ? 'arrow-left' : 'close'}
+                size={24}
+                color={colors.text?.primary || '#333'}
+              />
+            </TouchableOpacity>
+            <Text style={styles.headerTitle}>注册</Text>
+            <View style={styles.headerRight} />
+          </View>
+
+          {/* 步骤指示器 */}
+          <RegisterStepIndicator
+            currentStep={currentStep}
+            completedSteps={completedSteps}
+            containerStyle={styles.stepIndicator}
+          />
+
+          {/* 步骤内容 */}
+          <Animated.View
            style={[
              styles.content,
              {
@@ -233,216 +276,16 @@ export const RegisterScreen: React.FC = () => {
              },
            ]}
          >
-            {/* 标题区域 - 增大间距 */}
-            <View style={styles.titleSection}>
-              <Text style={styles.title}>创建新账号</Text>
-              <View style={styles.underline} />
-              <Text style={styles.subtitle}>填写以下信息完成注册</Text>
-            </View>
-
-            {/* 表单区域 */}
-            <View style={styles.formSection}>
-              {/* 用户名输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>用户名</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="3-20个字符，字母数字下划线"
-                    placeholderTextColor={colors.text.hint}
-                    value={username}
-                    onChangeText={setUsername}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    maxLength={20}
-                  />
-                  {username.length > 0 && /^[a-zA-Z0-9_]{3,20}$/.test(username) && (
-                    <MaterialCommunityIcons name="check-circle" size={20} color={THEME_COLORS.primary} style={styles.checkIcon} />
-                  )}
-                </View>
-              </View>
-
-              {/* 昵称输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>昵称</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="2-20个字符"
-                    placeholderTextColor={colors.text.hint}
-                    value={nickname}
-                    onChangeText={setNickname}
-                    maxLength={20}
-                  />
-                  {nickname.length > 0 && nickname.length >= 2 && (
-                    <MaterialCommunityIcons name="check-circle" size={20} color={THEME_COLORS.primary} style={styles.checkIcon} />
-                  )}
-                </View>
-              </View>
-
-              {/* 邮箱输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>邮箱</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="请输入邮箱地址"
-                    placeholderTextColor={colors.text.hint}
-                    value={email}
-                    onChangeText={setEmail}
-                    autoCapitalize="none"
-                    autoCorrect={false}
-                    keyboardType="email-address"
-                  />
-                  {email.length > 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && (
-                    <MaterialCommunityIcons name="check-circle" size={20} color={THEME_COLORS.primary} style={styles.checkIcon} />
-                  )}
-                </View>
-              </View>
-
-              {/* 邮箱验证码 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>验证码</Text>
-                <View style={styles.codeRow}>
-                  <View style={[styles.inputWrapper, styles.codeInputWrapper]}>
-                    <TextInput
-                      style={styles.input}
-                      placeholder="6位验证码"
-                      placeholderTextColor={colors.text.hint}
-                      value={verificationCode}
-                      onChangeText={setVerificationCode}
-                      keyboardType="number-pad"
-                      maxLength={6}
-                    />
-                  </View>
-                  <TouchableOpacity
-                    style={[
-                      styles.sendCodeButton,
-                      (sendingCode || countdown > 0) && styles.sendCodeButtonDisabled,
-                    ]}
-                    onPress={handleSendCode}
-                    disabled={sendingCode || countdown > 0}
-                    activeOpacity={0.8}
-                  >
-                    <Text style={styles.sendCodeButtonText}>
-                      {sendingCode ? '发送中...' : countdown > 0 ? `${countdown}s` : '获取验证码'}
-                    </Text>
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 手机号输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>手机号（选填）</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="请输入手机号"
-                    placeholderTextColor={colors.text.hint}
-                    value={phone}
-                    onChangeText={setPhone}
-                    keyboardType="phone-pad"
-                    maxLength={11}
-                  />
-                </View>
-              </View>
-
-              {/* 密码输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>密码</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="至少6位"
-                    placeholderTextColor={colors.text.hint}
-                    value={password}
-                    onChangeText={setPassword}
-                    secureTextEntry={!showPassword}
-                    autoCapitalize="none"
-                  />
-                  <TouchableOpacity 
-                    onPress={() => setShowPassword(!showPassword)}
-                    style={styles.eyeButton}
-                  >
-                    <MaterialCommunityIcons 
-                      name={showPassword ? 'eye-off-outline' : 'eye-outline'} 
-                      size={20} 
-                      color={colors.text.hint} 
-                    />
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 确认密码输入框 */}
-              <View style={styles.inputContainer}>
-                <Text style={styles.inputLabel}>确认密码</Text>
-                <View style={styles.inputWrapper}>
-                  <TextInput
-                    style={styles.input}
-                    placeholder="再次输入密码"
-                    placeholderTextColor={colors.text.hint}
-                    value={confirmPassword}
-                    onChangeText={setConfirmPassword}
-                    secureTextEntry={!showConfirmPassword}
-                    autoCapitalize="none"
-                    returnKeyType="done"
-                    onSubmitEditing={handleRegister}
-                  />
-                  <TouchableOpacity 
-                    onPress={() => setShowConfirmPassword(!showConfirmPassword)}
-                    style={styles.eyeButton}
-                  >
-                    <MaterialCommunityIcons 
-                      name={showConfirmPassword ? 'eye-off-outline' : 'eye-outline'} 
-                      size={20} 
-                      color={colors.text.hint} 
-                    />
-                  </TouchableOpacity>
-                </View>
-              </View>
-
-              {/* 服务条款 */}
-              <TouchableOpacity 
-                style={styles.termsContainer}
-                onPress={() => setAgreedToTerms(!agreedToTerms)}
-                activeOpacity={0.8}
-              >
-                <MaterialCommunityIcons 
-                  name={agreedToTerms ? "checkbox-marked" : "checkbox-blank-outline"} 
-                  size={22} 
-                  color={agreedToTerms ? THEME_COLORS.primary : colors.text.hint} 
-                />
-                <Text style={styles.termsText}>
-                  我已阅读并同意
-                  <Text style={styles.termsLink}>《用户协议》</Text>
-                  和
-                  <Text style={styles.termsLink}>《隐私政策》</Text>
-                </Text>
-              </TouchableOpacity>
-
-              {/* 注册按钮 */}
-              <TouchableOpacity
-                style={[styles.registerButton, loading && styles.registerButtonDisabled]}
-                onPress={handleRegister}
-                disabled={loading}
-                activeOpacity={0.9}
-              >
-                {loading ? (
-                  <ActivityIndicator size="small" color="#FFF" />
-                ) : (
-                  <Text style={styles.registerButtonText}>注 册</Text>
-                )}
-              </TouchableOpacity>
-            </View>
-
-            {/* 底部登录提示 */}
-            <View style={styles.footer}>
-              <Text style={styles.footerText}>已有账号？</Text>
-              <TouchableOpacity onPress={handleGoToLogin}>
-                <Text style={styles.loginLink}>立即登录</Text>
-              </TouchableOpacity>
-            </View>
+            <StepComponent {...stepProps} />
          </Animated.View>
+
+          {/* 底部登录提示 */}
+          <View style={styles.footer}>
+            <Text style={styles.footerText}>已有账号？</Text>
+            <TouchableOpacity onPress={handleGoToLogin}>
+              <Text style={styles.loginLink}>立即登录</Text>
+            </TouchableOpacity>
+          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
@@ -460,141 +303,38 @@ function createRegisterStyles(colors: AppColors) {
    },
    scrollContent: {
      flexGrow: 1,
-      paddingHorizontal: 28,
-      paddingTop: 50,
-      paddingBottom: 50,
+      paddingHorizontal: 24,
+      paddingTop: 20,
+      paddingBottom: 40,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 24,
+    },
+    backIconButton: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: '#F5F5F7',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: colors.text?.primary || '#333',
+    },
+    headerRight: {
+      width: 40,
+    },
+    stepIndicator: {
+      marginBottom: 32,
    },
    content: {
      flex: 1,
-      maxWidth: 400,
-      width: '100%',
-      alignSelf: 'center',
    },
-
-    // 标题区域 - 增大间距
-    titleSection: {
-      marginBottom: 40,
-      marginTop: 10,
-    },
-    title: {
-      fontSize: 32,
-      fontWeight: '700',
-      color: colors.text.primary,
-      lineHeight: 40,
-    },
-    underline: {
-      width: 40,
-      height: 4,
-      backgroundColor: THEME_COLORS.primary,
-      borderRadius: 2,
-      marginTop: 12,
-      marginBottom: 16,
-    },
-    subtitle: {
-      fontSize: 16,
-      color: colors.text.secondary,
-    },
-
-    // 表单区域
-    formSection: {
-      marginBottom: 24,
-    },
-
-    // 输入框
-    inputContainer: {
-      marginBottom: 20,
-    },
-    inputLabel: {
-      fontSize: 14,
-      fontWeight: '500',
-      color: colors.text.secondary,
-      marginBottom: 10,
-    },
-    inputWrapper: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: '#F5F5F7',
-      borderRadius: 14,
-      paddingHorizontal: 18,
-      height: 56,
-    },
-    input: {
-      flex: 1,
-      fontSize: 16,
-      color: colors.text.primary,
-      height: 56,
-    },
-    checkIcon: {
-      marginLeft: 8,
-    },
-    eyeButton: {
-      padding: 4,
-      marginLeft: 4,
-    },
-
-    // 验证码行
-    codeRow: {
-      flexDirection: 'row',
-      gap: 12,
-    },
-    codeInputWrapper: {
-      flex: 1,
-    },
-    sendCodeButton: {
-      height: 56,
-      paddingHorizontal: 16,
-      backgroundColor: 'rgba(255, 107, 53, 0.1)',
-      borderRadius: 14,
-      alignItems: 'center',
-      justifyContent: 'center',
-      minWidth: 100,
-    },
-    sendCodeButtonDisabled: {
-      opacity: 0.5,
-    },
-    sendCodeButtonText: {
-      fontSize: 14,
-      fontWeight: '600',
-      color: THEME_COLORS.primary,
-    },
-
-    // 服务条款
-    termsContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: 28,
-      marginTop: 4,
-    },
-    termsText: {
-      fontSize: 14,
-      color: colors.text.secondary,
-      marginLeft: 10,
-      flex: 1,
-      lineHeight: 22,
-    },
-    termsLink: {
-      color: THEME_COLORS.primary,
-      fontWeight: '500',
-    },
-
-    // 注册按钮
-    registerButton: {
-      height: 56,
-      borderRadius: 14,
-      backgroundColor: THEME_COLORS.primary,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    registerButtonDisabled: {
-      opacity: 0.7,
-    },
-    registerButtonText: {
-      fontSize: 17,
-      fontWeight: '600',
-      color: '#FFFFFF',
-    },
-
-    // 底部
    footer: {
      flexDirection: 'row',
      justifyContent: 'center',
@@ -603,11 +343,11 @@ function createRegisterStyles(colors: AppColors) {
    },
    footerText: {
      fontSize: 15,
-      color: colors.text.secondary,
+      color: colors.text?.secondary || '#666',
    },
    loginLink: {
      fontSize: 15,
-      color: THEME_COLORS.primary,
+      color: '#FF6B35',
      fontWeight: '600',
      marginLeft: 6,
    },
--- a/src/screens/auth/RegisterStep1Email.tsx
+++ b/src/screens/auth/RegisterStep1Email.tsx
@@ -0,0 +1,192 @@
+/**
+ * 注册步骤1：输入邮箱
+ * 包含邮箱输入框和获取验证码按钮
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useAppColors, type AppColors } from '../../theme';
+import { RegisterStepProps } from './types';
+
+const THEME_COLORS = {
+  primary: '#FF6B35',
+  primaryLight: '#FF8C5A',
+  primaryDark: '#E55A2B',
+};
+
+export const RegisterStep1Email: React.FC<RegisterStepProps> = ({
+  formData,
+  updateFormData,
+  onNext,
+  colors: propColors,
+  sendingCode,
+  countdown,
+  onSendCode,
+}) => {
+  const colors = propColors || useAppColors();
+  const styles = createStyles(colors);
+
+  const [emailError, setEmailError] = useState('');
+
+  const validateEmail = (email: string): boolean => {
+    if (!email.trim()) {
+      setEmailError('请输入邮箱');
+      return false;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      setEmailError('请输入正确的邮箱地址');
+      return false;
+    }
+    setEmailError('');
+    return true;
+  };
+
+  const handleSendCode = async () => {
+    if (!validateEmail(formData.email)) {
+      return;
+    }
+    if (onSendCode) {
+      const success = await onSendCode(formData.email);
+      if (success) {
+        onNext();
+      }
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.formSection}>
+        {/* 邮箱输入框 */}
+        <View style={styles.inputContainer}>
+          <Text style={styles.inputLabel}>邮箱</Text>
+          <View
+            style={[
+              styles.inputWrapper,
+              emailError ? styles.inputWrapperError : null,
+            ]}
+          >
+            <TextInput
+              style={styles.input}
+              placeholder="请输入邮箱地址"
+              placeholderTextColor={colors.text?.hint || '#999'}
+              value={formData.email}
+              onChangeText={(text) => {
+                updateFormData({ email: text });
+                if (emailError) setEmailError('');
+              }}
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="email-address"
+              editable={!sendingCode}
+            />
+            {formData.email.length > 0 &&
+              /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email) && (
+                <MaterialCommunityIcons
+                  name="check-circle"
+                  size={20}
+                  color={THEME_COLORS.primary}
+                  style={styles.checkIcon}
+                />
+              )}
+          </View>
+          {emailError ? (
+            <Text style={styles.errorText}>{emailError}</Text>
+          ) : null}
+        </View>
+
+        {/* 获取验证码按钮 */}
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            (sendingCode || countdown > 0) && styles.actionButtonDisabled,
+          ]}
+          onPress={handleSendCode}
+          disabled={sendingCode || countdown > 0}
+          activeOpacity={0.9}
+        >
+          <Text style={styles.actionButtonText}>
+            {sendingCode
+              ? '发送中...'
+              : countdown > 0
+              ? `${countdown}秒后重试`
+              : '获取验证码'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 20,
+    },
+    formSection: {
+      marginBottom: 24,
+    },
+    inputContainer: {
+      marginBottom: 24,
+    },
+    inputLabel: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.text?.secondary || '#666',
+      marginBottom: 10,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#F5F5F7',
+      borderRadius: 14,
+      paddingHorizontal: 18,
+      height: 56,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    inputWrapperError: {
+      borderColor: colors.error?.main || '#FF4444',
+    },
+    input: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text?.primary || '#333',
+      height: 56,
+    },
+    checkIcon: {
+      marginLeft: 8,
+    },
+    errorText: {
+      fontSize: 12,
+      color: colors.error?.main || '#FF4444',
+      marginTop: 6,
+      marginLeft: 4,
+    },
+    actionButton: {
+      height: 56,
+      borderRadius: 14,
+      backgroundColor: '#FF6B35',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 8,
+    },
+    actionButtonDisabled: {
+      opacity: 0.6,
+    },
+    actionButtonText: {
+      fontSize: 17,
+      fontWeight: '600',
+      color: '#FFFFFF',
+    },
+  });
+}
+
+export default RegisterStep1Email;
--- a/src/screens/auth/RegisterStep2Verification.tsx
+++ b/src/screens/auth/RegisterStep2Verification.tsx
@@ -0,0 +1,212 @@
+/**
+ * 注册步骤2：填写验证码
+ * 使用 VerificationCodeInput 组件
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useAppColors, type AppColors } from '../../theme';
+import { VerificationCodeInput } from '../../components/common';
+import { RegisterStepProps } from './types';
+
+const THEME_COLORS = {
+  primary: '#FF6B35',
+  primaryLight: '#FF8C5A',
+  primaryDark: '#E55A2B',
+};
+
+export const RegisterStep2Verification: React.FC<RegisterStepProps> = ({
+  formData,
+  updateFormData,
+  onNext,
+  onPrev,
+  colors: propColors,
+  countdown,
+  onSendCode,
+}) => {
+  const colors = propColors || useAppColors();
+  const styles = createStyles(colors);
+
+  const [codeError, setCodeError] = useState('');
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  const handleComplete = async (code: string) => {
+    if (code.length !== 6) {
+      setCodeError('请输入6位验证码');
+      return;
+    }
+    setCodeError('');
+    setIsVerifying(true);
+    
+    // 模拟验证，实际应该调用API验证验证码
+    // const success = await authService.verifyCode(formData.email, code);
+    
+    setTimeout(() => {
+      setIsVerifying(false);
+      onNext();
+    }, 500);
+  };
+
+  const handleResendCode = async () => {
+    if (onSendCode && countdown === 0) {
+      await onSendCode(formData.email);
+    }
+  };
+
+  const formatCountdown = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.emailInfo}>
+        <Text style={styles.emailText}>验证码已发送至 {formData.email}</Text>
+      </View>
+
+      <View style={styles.formSection}>
+        {/* 验证码输入 */}
+        <View style={styles.codeInputContainer}>
+          <VerificationCodeInput
+            value={formData.verificationCode}
+            onChangeValue={(value) => {
+              updateFormData({ verificationCode: value });
+              if (codeError) setCodeError('');
+            }}
+            length={6}
+            autoFocus={true}
+            onComplete={handleComplete}
+            disabled={isVerifying}
+          />
+          {codeError ? (
+            <Text style={styles.errorText}>{codeError}</Text>
+          ) : null}
+        </View>
+
+        {/* 重发倒计时 */}
+        <View style={styles.resendContainer}>
+          {(countdown ?? 0) > 0 ? (
+            <Text style={styles.countdownText}>
+              {formatCountdown(countdown!)} 后重新发送
+            </Text>
+          ) : (
+            <TouchableOpacity onPress={handleResendCode} activeOpacity={0.8}>
+              <Text style={styles.resendText}>重新发送验证码</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {/* 下一步按钮 */}
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            formData.verificationCode.length !== 6 && styles.actionButtonDisabled,
+            isVerifying && styles.actionButtonDisabled,
+          ]}
+          onPress={() => handleComplete(formData.verificationCode)}
+          disabled={formData.verificationCode.length !== 6 || isVerifying}
+          activeOpacity={0.9}
+        >
+          <Text style={styles.actionButtonText}>
+            {isVerifying ? '验证中...' : '下一步'}
+          </Text>
+        </TouchableOpacity>
+
+        {/* 返回按钮 */}
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={onPrev}
+          activeOpacity={0.8}
+        >
+          <MaterialCommunityIcons
+            name="arrow-left"
+            size={18}
+            color={colors.text?.secondary || '#666'}
+          />
+          <Text style={styles.backButtonText}>返回上一步</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 20,
+    },
+    emailInfo: {
+      marginBottom: 32,
+      alignItems: 'center',
+    },
+    emailText: {
+      fontSize: 14,
+      color: colors.text?.secondary || '#666',
+    },
+    formSection: {
+      marginBottom: 24,
+      alignItems: 'center',
+    },
+    codeInputContainer: {
+      marginBottom: 24,
+      width: '100%',
+      alignItems: 'center',
+    },
+    errorText: {
+      fontSize: 12,
+      color: colors.error?.main || '#FF4444',
+      marginTop: 12,
+      textAlign: 'center',
+    },
+    resendContainer: {
+      marginBottom: 32,
+    },
+    countdownText: {
+      fontSize: 14,
+      color: colors.text?.secondary || '#999',
+    },
+    resendText: {
+      fontSize: 14,
+      color: THEME_COLORS.primary,
+      fontWeight: '500',
+    },
+    actionButton: {
+      height: 56,
+      borderRadius: 14,
+      backgroundColor: '#FF6B35',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      maxWidth: 320,
+    },
+    actionButtonDisabled: {
+      opacity: 0.6,
+    },
+    actionButtonText: {
+      fontSize: 17,
+      fontWeight: '600',
+      color: '#FFFFFF',
+    },
+    backButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 20,
+      paddingVertical: 8,
+    },
+    backButtonText: {
+      fontSize: 14,
+      color: colors.text?.secondary || '#666',
+      marginLeft: 6,
+    },
+  });
+}
+
+export default RegisterStep2Verification;
--- a/src/screens/auth/RegisterStep3Profile.tsx
+++ b/src/screens/auth/RegisterStep3Profile.tsx
@@ -0,0 +1,343 @@
+/**
+ * 注册步骤3：设置用户信息
+ * 包含用户名、昵称、密码等
+ */
+
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useAppColors, type AppColors } from '../../theme';
+import { RegisterStepProps } from './types';
+
+const THEME_COLORS = {
+  primary: '#FF6B35',
+  primaryLight: '#FF8C5A',
+  primaryDark: '#E55A2B',
+};
+
+export const RegisterStep3Profile: React.FC<RegisterStepProps> = ({
+  formData,
+  updateFormData,
+  onNext,
+  onPrev,
+  colors: propColors,
+  loading,
+}) => {
+  const colors = propColors || useAppColors();
+  const styles = createStyles(colors);
+
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [agreedToTerms, setAgreedToTerms] = useState(true);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.username.trim()) {
+      newErrors.username = '请输入用户名';
+    } else if (formData.username.length < 3 || formData.username.length > 20) {
+      newErrors.username = '用户名长度需在3-20个字符之间';
+    } else if (!/^[a-zA-Z0-9_]+$/.test(formData.username)) {
+      newErrors.username = '用户名只能包含字母、数字和下划线';
+    }
+
+    if (!formData.nickname.trim()) {
+      newErrors.nickname = '请输入昵称';
+    } else if (formData.nickname.length < 2 || formData.nickname.length > 20) {
+      newErrors.nickname = '昵称长度需在2-20个字符之间';
+    }
+
+    if (!formData.password) {
+      newErrors.password = '请输入密码';
+    } else if (formData.password.length < 6) {
+      newErrors.password = '密码长度不能少于6位';
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = '两次输入的密码不一致';
+    }
+
+    if (!agreedToTerms) {
+      newErrors.terms = '请同意用户协议和隐私政策';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      onNext();
+    }
+  };
+
+  const renderInput = (
+    label: string,
+    field: keyof typeof formData,
+    placeholder: string,
+    options: {
+      secureTextEntry?: boolean;
+      keyboardType?: 'default' | 'email-address' | 'numeric' | 'phone-pad';
+      maxLength?: number;
+      autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+      showToggle?: boolean;
+      toggleValue?: boolean;
+      onToggle?: () => void;
+    } = {}
+  ) => {
+    const {
+      secureTextEntry = false,
+      keyboardType = 'default',
+      maxLength,
+      autoCapitalize = 'none',
+      showToggle,
+      toggleValue,
+      onToggle,
+    } = options;
+
+    const error = errors[field as string];
+    const value = formData[field] || '';
+
+    return (
+      <View style={styles.inputContainer}>
+        <Text style={styles.inputLabel}>{label}</Text>
+        <View
+          style={[
+            styles.inputWrapper,
+            error ? styles.inputWrapperError : null,
+          ]}
+        >
+          <TextInput
+            style={styles.input}
+            placeholder={placeholder}
+            placeholderTextColor={colors.text?.hint || '#999'}
+            value={value}
+            onChangeText={(text) => {
+              updateFormData({ [field]: text } as Partial<typeof formData>);
+              if (errors[field as string]) {
+                setErrors((prev) => ({ ...prev, [field as string]: '' }));
+              }
+            }}
+            autoCapitalize={autoCapitalize}
+            autoCorrect={false}
+            keyboardType={keyboardType}
+            maxLength={maxLength}
+            secureTextEntry={secureTextEntry && !toggleValue}
+            editable={!loading}
+          />
+          {showToggle && onToggle && (
+            <TouchableOpacity onPress={onToggle} style={styles.eyeButton}>
+              <MaterialCommunityIcons
+                name={toggleValue ? 'eye-off-outline' : 'eye-outline'}
+                size={20}
+                color={colors.text?.hint || '#999'}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.formSection}>
+        {/* 用户名 */}
+        {renderInput('用户名', 'username', '3-20个字符，字母数字下划线', {
+          maxLength: 20,
+        })}
+
+        {/* 昵称 */}
+        {renderInput('昵称', 'nickname', '2-20个字符', {
+          autoCapitalize: 'sentences',
+          maxLength: 20,
+        })}
+
+        {/* 手机号（选填） */}
+        {renderInput('手机号（选填）', 'phone', '请输入手机号', {
+          keyboardType: 'phone-pad',
+          maxLength: 11,
+        })}
+
+        {/* 密码 */}
+        {renderInput('密码', 'password', '至少6位', {
+          secureTextEntry: true,
+          showToggle: true,
+          toggleValue: showPassword,
+          onToggle: () => setShowPassword(!showPassword),
+        })}
+
+        {/* 确认密码 */}
+        {renderInput('确认密码', 'confirmPassword', '再次输入密码', {
+          secureTextEntry: true,
+          showToggle: true,
+          toggleValue: showConfirmPassword,
+          onToggle: () => setShowConfirmPassword(!showConfirmPassword),
+        })}
+
+        {/* 服务条款 */}
+        <TouchableOpacity
+          style={styles.termsContainer}
+          onPress={() => {
+            setAgreedToTerms(!agreedToTerms);
+            if (errors.terms) {
+              setErrors((prev) => ({ ...prev, terms: '' }));
+            }
+          }}
+          activeOpacity={0.8}
+        >
+          <MaterialCommunityIcons
+            name={agreedToTerms ? 'checkbox-marked' : 'checkbox-blank-outline'}
+            size={22}
+            color={agreedToTerms ? THEME_COLORS.primary : colors.text?.hint || '#999'}
+          />
+          <Text style={styles.termsText}>
+            我已阅读并同意
+            <Text style={styles.termsLink}>《用户协议》</Text>
+            和
+            <Text style={styles.termsLink}>《隐私政策》</Text>
+          </Text>
+        </TouchableOpacity>
+        {errors.terms ? (
+          <Text style={[styles.errorText, { marginTop: -12, marginBottom: 12 }]}>
+            {errors.terms}
+          </Text>
+        ) : null}
+
+        {/* 完成注册按钮 */}
+        <TouchableOpacity
+          style={[styles.actionButton, loading && styles.actionButtonDisabled]}
+          onPress={handleSubmit}
+          disabled={loading}
+          activeOpacity={0.9}
+        >
+          {loading ? (
+            <ActivityIndicator size="small" color="#FFF" />
+          ) : (
+            <Text style={styles.actionButtonText}>完成注册</Text>
+          )}
+        </TouchableOpacity>
+
+        {/* 返回按钮 */}
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={onPrev}
+          activeOpacity={0.8}
+          disabled={loading}
+        >
+          <MaterialCommunityIcons
+            name="arrow-left"
+            size={18}
+            color={colors.text?.secondary || '#666'}
+          />
+          <Text style={styles.backButtonText}>返回上一步</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+function createStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop: 20,
+    },
+    formSection: {
+      marginBottom: 24,
+    },
+    inputContainer: {
+      marginBottom: 16,
+    },
+    inputLabel: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: colors.text?.secondary || '#666',
+      marginBottom: 8,
+    },
+    inputWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: '#F5F5F7',
+      borderRadius: 14,
+      paddingHorizontal: 18,
+      height: 52,
+      borderWidth: 1,
+      borderColor: 'transparent',
+    },
+    inputWrapperError: {
+      borderColor: colors.error?.main || '#FF4444',
+    },
+    input: {
+      flex: 1,
+      fontSize: 16,
+      color: colors.text?.primary || '#333',
+      height: 52,
+    },
+    eyeButton: {
+      padding: 4,
+      marginLeft: 4,
+    },
+    errorText: {
+      fontSize: 12,
+      color: colors.error?.main || '#FF4444',
+      marginTop: 6,
+      marginLeft: 4,
+    },
+    termsContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 20,
+      marginTop: 4,
+    },
+    termsText: {
+      fontSize: 14,
+      color: colors.text?.secondary || '#666',
+      marginLeft: 10,
+      flex: 1,
+      lineHeight: 22,
+    },
+    termsLink: {
+      color: '#FF6B35',
+      fontWeight: '500',
+    },
+    actionButton: {
+      height: 56,
+      borderRadius: 14,
+      backgroundColor: '#FF6B35',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionButtonDisabled: {
+      opacity: 0.7,
+    },
+    actionButtonText: {
+      fontSize: 17,
+      fontWeight: '600',
+      color: '#FFFFFF',
+    },
+    backButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: 16,
+      paddingVertical: 8,
+    },
+    backButtonText: {
+      fontSize: 14,
+      color: colors.text?.secondary || '#666',
+      marginLeft: 6,
+    },
+  });
+}
+
+export default RegisterStep3Profile;
--- a/src/screens/auth/index.ts
+++ b/src/screens/auth/index.ts
@@ -7,3 +7,9 @@ export { LoginScreen } from './LoginScreen';
 export { RegisterScreen } from './RegisterScreen';
 export { ForgotPasswordScreen } from './ForgotPasswordScreen';
 export { WelcomeScreen } from './WelcomeScreen';
+
+// 注册步骤组件
+export { RegisterStep1Email } from './RegisterStep1Email';
+export { RegisterStep2Verification } from './RegisterStep2Verification';
+export { RegisterStep3Profile } from './RegisterStep3Profile';
+export type { RegisterFormData, RegisterStepProps, RegisterStep } from './types';
--- a/src/screens/auth/types.ts
+++ b/src/screens/auth/types.ts
@@ -0,0 +1,41 @@
+/**
+ * 注册流程类型定义
+ */
+
+import { AppColors } from '../../theme';
+
+export interface RegisterFormData {
+  email: string;
+  verificationCode: string;
+  username: string;
+  nickname: string;
+  phone: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface RegisterStepProps {
+  formData: RegisterFormData;
+  updateFormData: (data: Partial<RegisterFormData>) => void;
+  onNext: () => void;
+  onPrev?: () => void;
+  colors?: AppColors;
+  // 状态
+  loading?: boolean;
+  sendingCode?: boolean;
+  countdown?: number;
+  // 回调
+  onSendCode?: (email: string) => Promise<boolean>;
+}
+
+export type RegisterStep = 0 | 1 | 2;
+
+export interface StepConfig {
+  id: RegisterStep;
+  title: string;
+  component: React.ComponentType<RegisterStepProps>;
+}
+
+// 确保文件被识别为模块
+export {};
+