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

client/components/onboarding/OnboardingLayout.tsx

@@ -1,45 +1,61 @@
 import React from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
-import { SerifText } from './SerifText';
-import { NextButton } from './NextButton';
 
 interface OnboardingLayoutProps {
   children: React.ReactNode;
-  onSkip?: () => void;
-  onNext?: () => void;
-  nextEnabled?: boolean;
-  showNextButton?: boolean;
+  title?: string;
+  currentStep: number;
+  totalSteps: number;
+  onSkip: () => void;
+  onBack?: () => void;
+  showBackButton?: boolean;
 }
 
 export function OnboardingLayout({ 
   children, 
+  title,
+  currentStep,
+  totalSteps,
   onSkip, 
-  onNext, 
-  nextEnabled = true,
-  showNextButton = true 
+  onBack,
+  showBackButton = false
 }: OnboardingLayoutProps) {
   return (
     <View style={styles.container}>
       <StatusBar barStyle="dark-content" />
       <SafeAreaView style={styles.safeArea}>
+        {/* Header: Back & Skip */}
         <View style={styles.header}>
-          <View style={styles.spacer} />
-          {onSkip && (
-            <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
-              <SerifText style={styles.skipText}>Skip {'->'}</SerifText>
-            </TouchableOpacity>
-          )}
-        </View>
-        
-        <View style={styles.content}>
-          {children}
+          <View style={styles.headerLeft}>
+            {showBackButton && onBack && (
+              <TouchableOpacity onPress={onBack} style={styles.iconButton}>
+                <Image 
+                  source={require('@/assets/images/icon/back_icon.png')} 
+                  style={styles.backIcon}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
+            <Text style={styles.skipText}>skip</Text>
+            <Image 
+              source={require('@/assets/images/icon/skip_icon.png')} 
+              style={styles.skipIcon}
+            />
+          </TouchableOpacity>
         </View>
 
-        <View style={styles.footer}>
-          {showNextButton && onNext && (
-            <NextButton onPress={onNext} disabled={!nextEnabled} />
-          )}
+        {/* Title & Progress Row */}
+        <View style={styles.titleRow}>
+          <Text style={styles.questionTitle}>{title}</Text>
+          <Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
+        </View>
+        
+        {/* Content */}
+        <View style={styles.content}>
+          {children}
         </View>
       </SafeAreaView>
     </View>
@@ -58,27 +74,60 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
+    paddingHorizontal: 20,
+    height: 44,
   },
-  spacer: {
-    width: 60, // Balance the skip button width approximately
+  headerLeft: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+  },
+  iconButton: {
+    padding: 8,
+  },
+  backIcon: {
+    width: 19,
+    height: 19,
+    resizeMode: 'contain',
   },
   skipButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
     padding: 8,
   },
   skipText: {
-    fontSize: 16,
-    color: OnboardingColors.textPrimary,
+    fontSize: 13,
+    color: OnboardingColors.textMuted,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    marginRight: 4,
+  },
+  skipIcon: {
+    width: 10,
+    height: 4,
+    resizeMode: 'contain',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingHorizontal: 20,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  questionTitle: {
+    fontSize: 22,
+    color: OnboardingColors.questionTitle,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    flex: 1,
+  },
+  progressText: {
+    fontSize: 18,
+    color: OnboardingColors.textProgress,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    marginLeft: 10,
   },
   content: {
     flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 24,
-  },
-  footer: {
-    alignItems: 'center',
-    paddingBottom: 40,
-    minHeight: 100, // Reserve space for button
+    paddingHorizontal: 20,
   },
 });