feat: 完善个人中心与小组件功能，优化 Onboarding 交互与手势体验

client/components/onboarding/NameInputStep.tsx

@@ -1,32 +1,82 @@
-import React from 'react';
-import { View, StyleSheet, TextInput, Platform } from 'react-native';
-import { SerifText } from './SerifText';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Dimensions, Text } from 'react-native';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
+import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+import EnterLightIcon from '@/assets/images/icon/enter_Light_icon.svg';
+
+const { height } = Dimensions.get('window');
 
 interface NameInputStepProps {
   value: string;
   onChangeText: (text: string) => void;
-  onSubmitEditing?: () => void;
+  onNext: () => void;
 }
 
-export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInputStepProps) {
+export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const blinkAnim = useRef(new Animated.Value(1)).current;
+  const hasInput = value.trim().length > 0;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(blinkAnim, { toValue: 0, duration: 500, useNativeDriver: true }),
+        Animated.timing(blinkAnim, { toValue: 1, duration: 500, useNativeDriver: true }),
+      ])
+    );
+    if (isFocused) {
+      animation.start();
+    } else {
+      animation.stop();
+      blinkAnim.setValue(0);
+    }
+    return () => animation.stop();
+  }, [blinkAnim, isFocused]);
+
   return (
     <View style={styles.container}>
-      <SerifText style={styles.title}>我可以怎么称呼你？</SerifText>
-      
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.input}
-          value={value}
-          onChangeText={onChangeText}
-          placeholder="Hao"
-          placeholderTextColor={OnboardingColors.textSecondary}
-          selectionColor={OnboardingColors.cursor}
-          autoFocus
-          onSubmitEditing={onSubmitEditing}
-          returnKeyType="done"
-          textAlign="center"
-        />
+      <View style={styles.inputCard}>
+        <View style={styles.inputWrapper}>
+          {/* 显示层：文案 + 跟随的光标 */}
+          <View style={styles.displayLayer}>
+            <Text 
+              style={[
+                styles.displayText, 
+                (!isFocused && !hasInput) && { color: OnboardingColors.textSecondary }
+              ]}
+            >
+              {hasInput ? value : (isFocused ? "" : "Mama")}
+            </Text>
+            {isFocused && (
+              <Animated.View style={[styles.cursorWrapper, { opacity: blinkAnim, marginLeft: 2 }]}>
+                <EnterLightIcon width={3} height={27} />
+              </Animated.View>
+            )}
+          </View>
+
+          {/* 交互层：隐藏的输入框 */}
+          <TextInput
+            style={styles.hiddenInput}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            caretHidden={true}
+            autoCorrect={false}
+            spellCheck={false}
+          />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          onPress={onNext} 
+          disabled={!hasInput}
+          activeOpacity={0.8}
+        >
+          {hasInput ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -34,31 +84,53 @@ export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInpu
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     alignItems: 'center',
-    width: '100%',
+    paddingTop: 20,
   },
-  title: {
-    fontSize: 24,
-    marginBottom: 40,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    width: '100%',
+  inputCard: {
+    width: 335,
+    height: 75,
     backgroundColor: OnboardingColors.cardBackground,
     borderRadius: 20,
-    paddingVertical: 20,
-    paddingHorizontal: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.05,
     shadowRadius: 10,
     elevation: 2,
   },
-  input: {
-    fontSize: 24,
-    fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }),
+  inputWrapper: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  displayLayer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  displayText: {
+    fontSize: 22,
+    fontFamily: Platform.select({ ios: 'STIX Two Text', android: 'serif', default: 'serif' }),
+    fontWeight: '600',
     color: OnboardingColors.textPrimary,
     textAlign: 'center',
-    padding: 0, // remove default padding
   },
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    color: 'transparent', // 文字透明，只负责输入逻辑
+    fontSize: 22,
+    textAlign: 'center',
+  },
+  cursorWrapper: {
+    // 默认居中显示时，光标在左侧
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    alignItems: 'center',
+  }
 });