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

client/components/ui/SheetModal.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { Modal, Pressable, StyleSheet, Text, View, PanResponder, Animated as RNAnimated, Dimensions, Image, ImageSourcePropType } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
   Easing,
@@ -9,26 +9,35 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+const FIXED_TOP_GAP = 100; // 统一距离顶部的高度
+
 type Props = {
   visible: boolean;
   title?: string;
   onClose: () => void;
   children: React.ReactNode;
+  leftIcon?: ImageSourcePropType; // 新增：支持自定义左侧图标
+  height?: number; // 新增：支持自定义高度
 };
 
 /**
  * 通用底部上拉弹窗（Sheet）
  * - 内容区背景色固定：#FAF3EC
- * - 关闭方式：点 X（本期不要求点遮罩关闭）
+ * - 高度固定：默认距离顶部固定间距，也支持传入指定高度
  */
-export default function SheetModal({ visible, title, onClose, children }: Props) {
+export default function SheetModal({ visible, title, onClose, children, leftIcon, height: customHeight }: Props) {
   const insets = useSafeAreaInsets();
   const [mounted, setMounted] = useState(false);
   const progress = useSharedValue(0); // 0: 关闭, 1: 打开
+  const dragY = useSharedValue(0); // 拖拽位移
+
+  const sheetHeight = customHeight || (SCREEN_HEIGHT - FIXED_TOP_GAP);
 
   useEffect(() => {
     if (visible) {
       setMounted(true);
+      dragY.value = 0;
       progress.value = withTiming(1, { duration: 260, easing: Easing.out(Easing.cubic) });
       return;
     }
@@ -40,46 +49,88 @@ export default function SheetModal({ visible, title, onClose, children }: Props)
         if (finished) runOnJS(setMounted)(false);
       }
     );
-  }, [visible, mounted, progress]);
+  }, [visible, mounted, progress, dragY]);
+
+  // 使用 PanResponder 处理下滑手势
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false, 
+      onMoveShouldSetPanResponder: () => false, // 暂时屏蔽下拉关闭手势，解决滑动冲突
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          dragY.value = gestureState.dy;
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 80 || gestureState.vy > 0.5) {
+          runOnJS(onClose)();
+        } else {
+          dragY.value = withTiming(0, { 
+            duration: 300, 
+            easing: Easing.out(Easing.back(1)) 
+          });
+        }
+      },
+      onPanResponderTerminate: () => {
+        dragY.value = withTiming(0, { duration: 200 });
+      },
+    })
+  ).current;
 
   const overlayStyle = useAnimatedStyle(() => {
     return { opacity: 0.4 * progress.value };
   });
 
   const sheetStyle = useAnimatedStyle(() => {
-    const translateY = (1 - progress.value) * 380;
-    return { transform: [{ translateY }] };
+    const baseTranslateY = (1 - progress.value) * sheetHeight; // 基础位移
+    return { 
+      transform: [{ translateY: baseTranslateY + dragY.value }] 
+    };
   });
 
-  const containerPaddingBottom = useMemo(() => Math.max(insets.bottom, 12), [insets.bottom]);
+  const containerPaddingBottom = useMemo(() => Math.max(insets.bottom, 80), [insets.bottom]); // 增加底部间距至 80，约占 350 高度的 22%，确保内容不被截断并留出足够呼吸感
 
   // 注意：Modal 的 visible 必须为 true 才会渲染，因此用 mounted 保持退场动画
   return (
     <Modal transparent visible={mounted} animationType="none" onRequestClose={onClose}>
       <View style={styles.root}>
-        <Animated.View style={[styles.overlay, overlayStyle]} />
+        <Pressable 
+          style={StyleSheet.absoluteFill} 
+          onPress={onClose}
+        >
+          <Animated.View style={[styles.overlay, overlayStyle]} />
+        </Pressable>
 
         <Animated.View
+          {...panResponder.panHandlers}
           style={[
             styles.sheet,
             sheetStyle,
             {
+              height: sheetHeight,
               paddingBottom: containerPaddingBottom,
             },
           ]}
         >
+          <View style={styles.handleContainer}>
+            <View style={styles.handle} />
+          </View>
           <View style={styles.header}>
             <Text style={styles.title} numberOfLines={1}>
               {title ?? ''}
             </Text>
             <Pressable
               accessibilityRole="button"
-              accessibilityLabel="关闭"
+              accessibilityLabel={leftIcon ? "返回" : "关闭"}
               onPress={onClose}
               hitSlop={10}
               style={styles.close}
             >
-              <Text style={styles.closeText}>×</Text>
+              {leftIcon ? (
+                <Image source={leftIcon} style={styles.backIcon} />
+              ) : (
+                <Text style={styles.closeText}>×</Text>
+              )}
             </Pressable>
           </View>
 
@@ -103,9 +154,19 @@ const styles = StyleSheet.create({
     backgroundColor: '#FAF3EC',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
-    paddingTop: 14,
+    paddingTop: 8,
     paddingHorizontal: 16,
   },
+  handleContainer: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 2.5,
+    backgroundColor: 'rgba(94,42,40,0.15)',
+  },
   header: {
     height: 44,
     justifyContent: 'center',
@@ -131,8 +192,13 @@ const styles = StyleSheet.create({
     lineHeight: 28,
     fontWeight: '400',
   },
+  backIcon: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
   body: {
     paddingTop: 10,
+    flex: 1,
   },
 });
-