onboarding: 转场动画、名字步取消自动跳页、标题个性化招呼语、Skip/提醒步等文案与交互优化

Co-authored-by: Cursor <cursoragent@cursor.com>

client/components/onboarding/OnboardingLayout.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
+import React, { useRef, useEffect } from 'react';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform, Animated, Easing } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
 
+const TRANSITION_OFFSET = 24;
+const TRANSITION_DURATION = 280;
+
 interface OnboardingLayoutProps {
   children: React.ReactNode;
   title?: string;
@@ -11,6 +14,8 @@ interface OnboardingLayoutProps {
   onSkip: () => void;
   onBack?: () => void;
   showBackButton?: boolean;
+  /** 用户名字，仅在名字步骤之后的第一个问题（currentStep === 1）且非空时显示招呼语 */
+  userName?: string;
 }
 
 export function OnboardingLayout({ 
@@ -20,9 +25,48 @@ export function OnboardingLayout({
   totalSteps,
   onSkip, 
   onBack,
-  showBackButton = false
+  showBackButton = false,
+  userName = '',
 }: OnboardingLayoutProps) {
   const { t } = useTranslation();
+  const showGreeting = currentStep === 1 && userName.trim().length > 0;
+  const displayName = userName.trim();
+  const prevStepRef = useRef(currentStep);
+  const isFirstRenderRef = useRef(true);
+  const translateX = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      prevStepRef.current = currentStep;
+      return;
+    }
+    if (prevStepRef.current === currentStep) return;
+
+    const direction = currentStep > prevStepRef.current ? 'forward' : 'back';
+    prevStepRef.current = currentStep;
+
+    const startX = direction === 'forward' ? TRANSITION_OFFSET : -TRANSITION_OFFSET;
+    translateX.setValue(startX);
+    opacity.setValue(0.72);
+
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration: TRANSITION_DURATION,
+        useNativeDriver: true,
+        easing: Easing.out(Easing.cubic),
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: TRANSITION_DURATION,
+        useNativeDriver: true,
+        easing: Easing.out(Easing.cubic),
+      }),
+    ]).start();
+  }, [currentStep, translateX, opacity]);
+
   return (
     <View style={styles.container}>
       <StatusBar barStyle="dark-content" />
@@ -49,16 +93,29 @@ export function OnboardingLayout({
           </TouchableOpacity>
         </View>
 
-        {/* Title & Progress Row */}
+        {/* Title & Progress Row（名字步骤后第一步且名字非空时显示招呼语 + 问题） */}
         <View style={styles.titleRow}>
-          <Text style={styles.questionTitle}>{title}</Text>
+          <View style={styles.titleBlock}>
+            {showGreeting && (
+              <Text style={styles.greetingText}>{t('onboardingSurvey.greeting', { name: displayName })}</Text>
+            )}
+            <Text style={styles.questionTitle}>{title}</Text>
+          </View>
           <Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
         </View>
         
-        {/* Content */}
-        <View style={styles.content}>
+        {/* Content：step 切换时滑动 + 淡入 */}
+        <Animated.View
+          style={[
+            styles.content,
+            {
+              opacity,
+              transform: [{ translateX }],
+            },
+          ]}
+        >
           {children}
-        </View>
+        </Animated.View>
       </SafeAreaView>
     </View>
   );
@@ -114,13 +171,22 @@ const styles = StyleSheet.create({
     alignItems: 'flex-end',
     paddingHorizontal: 20,
     marginTop: 20,
-    marginBottom: 20,
+    marginBottom: 8,
+  },
+  titleBlock: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  greetingText: {
+    fontSize: 22,
+    color: OnboardingColors.questionTitle,
+    fontFamily: OnboardingFont.question,
+    marginBottom: 4,
   },
   questionTitle: {
     fontSize: 22,
     color: OnboardingColors.questionTitle,
     fontFamily: OnboardingFont.question,
-    flex: 1,
   },
   progressText: {
     fontSize: 18,