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

client/components/home/ThemeModal.tsx

@@ -16,7 +16,7 @@ type Props = {
 export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
   const { t } = useTranslation();
   return (
-    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose}>
+    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={350}>
       <View style={styles.row}>
         <ThemeCard
           title={t('theme.scenery')}
@@ -24,7 +24,7 @@ export default function ThemeModal({ visible, mode, onSelect, onClose }: Props)
           onPress={() => onSelect('scenery')}
         >
           <Image
-            source={require('../../assets/images/index/index_flowers.png')}
+            source={require('../../assets/images/theme/theme_landscape.png')}
             resizeMode="cover"
             style={styles.previewImage}
           />
@@ -35,7 +35,11 @@ export default function ThemeModal({ visible, mode, onSelect, onClose }: Props)
           selected={mode === 'color'}
           onPress={() => onSelect('color')}
         >
-          <View style={styles.colorPreview} />
+          <Image
+            source={require('../../assets/images/theme/theme_color.png')}
+            resizeMode="cover"
+            style={styles.previewImage}
+          />
         </ThemeCard>
       </View>
     </SheetModal>
@@ -56,11 +60,20 @@ function ThemeCard({
   return (
     <Pressable
       onPress={onPress}
-      style={[styles.card, selected ? styles.cardSelected : styles.cardUnselected]}
+      style={styles.cardContainer}
       hitSlop={6}
     >
-      <View style={styles.preview}>{children}</View>
-      <Text style={styles.cardTitle}>{title}</Text>
+      <View style={[styles.previewWrapper, selected && styles.selectedWrapper]}>
+        <View style={styles.previewInner}>
+          {children}
+          {/* 文案展示在图片中心 */}
+          <View style={styles.textOverlay}>
+            <Text style={[styles.overlayTitle, selected && styles.selectedOverlayTitle]}>
+              {title}
+            </Text>
+          </View>
+        </View>
+      </View>
     </Pressable>
   );
 }
@@ -68,43 +81,57 @@ function ThemeCard({
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
-    gap: 14,
-    paddingBottom: 18,
+    gap: 30,
+    paddingHorizontal: 10,
+    paddingBottom: 50,
+    paddingTop: 20,
+    justifyContent: 'center',
   },
-  card: {
-    flex: 1,
-    borderRadius: 18,
-    padding: 10,
-    backgroundColor: 'rgba(255,255,255,0.55)',
+  cardContainer: {
+    alignItems: 'center',
+    width: 143,
   },
-  cardSelected: {
-    borderWidth: 2,
-    borderColor: '#F99CC0',
+  previewWrapper: {
+    width: 138,
+    height: 203,
+    borderRadius: 26,
+    padding: 6.5,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  cardUnselected: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(94,42,40,0.18)',
+  selectedWrapper: {
+    borderWidth: 4,
+    borderColor: '#E7837A',
+    borderRadius: 26,
   },
-  preview: {
-    height: 96,
-    borderRadius: 14,
+  previewInner: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 21,
     overflow: 'hidden',
-    backgroundColor: '#fff',
-    marginBottom: 10,
+    backgroundColor: '#F5F5F5',
+    position: 'relative',
   },
   previewImage: {
     width: '100%',
     height: '100%',
   },
-  colorPreview: {
-    flex: 1,
-    backgroundColor: '#F3D0E1',
+  textOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.05)', // 轻微遮罩增加文字可读性
   },
-  cardTitle: {
-    color: '#5E2A28',
-    fontSize: 14,
+  overlayTitle: {
+    color: '#FFFFFF',
+    fontSize: 15,
     fontWeight: '700',
     textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 3,
+  },
+  selectedOverlayTitle: {
+    color: '#FFFFFF',
   },
 });
-