Ipad适配问题

client/components/onboarding/SelectionStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text, Platform, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
 import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
@@ -19,9 +19,12 @@ interface SelectionStepProps {
 }
 
 export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }: SelectionStepProps) {
+  const { width, height } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
+  const maxOptionWidth = isTablet ? 560 : undefined;
   const hasSelection = selectedIds.length > 0;
   const insets = useSafeAreaInsets();
-  const footerBottom = insets.bottom + 16;
+  const footerBottom = insets.bottom + (isTablet ? 38 : 28);
   const footerButtonHeight = 57;
   // 底部留白加大，避免最后一项与按钮边框视觉重叠
   const footerPaddingBottom = footerBottom + footerButtonHeight + 40;
@@ -31,14 +34,24 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
       <ScrollView
         style={styles.scroll}
         showsVerticalScrollIndicator={false}
-        contentContainerStyle={[styles.optionsList, { paddingBottom: footerPaddingBottom }]}
+        contentContainerStyle={[
+          styles.optionsList,
+          {
+            paddingBottom: footerPaddingBottom,
+            alignItems: 'center',
+          },
+        ]}
       >
         {options.map((option) => {
           const isSelected = selectedIds.includes(option.id);
           return (
             <TouchableOpacity
               key={option.id}
-              style={[styles.optionCard, isSelected && styles.optionCardSelected]}
+              style={[
+                styles.optionCard,
+                maxOptionWidth ? { maxWidth: maxOptionWidth } : null,
+                isSelected && styles.optionCardSelected,
+              ]}
               onPress={() => onToggle(option.id)}
               activeOpacity={0.7}
             >