Ipad适配问题

2026-03-03 19:55:53 +08:00
parent 0ad21da246
commit d37262876b
20 changed files with 692 additions and 147 deletions
--- a/client/components/home/ProfileModal.tsx
+++ b/client/components/home/ProfileModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react';
-import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View, Platform, Dimensions } from 'react-native';
+import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View, Platform, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Switch } from 'react-native';
@@ -42,8 +42,7 @@ import * as Notifications from 'expo-notifications';
 import { changeLanguage } from '@/src/i18n';
 import { fetchLegalLinks } from '@/src/services/legalApi';
 import { ensurePushTokenRegisteredIfPermitted, setPushPreferences } from '@/src/services/pushApi';
-
-const { width } = Dimensions.get('window');
+import { isIPadLike } from '@/src/utils/device';

 type Props = {
  visible: boolean;
@@ -79,6 +78,12 @@ const NATURE_IMAGES = [

 export default function ProfileModal({ visible, name: propName, onClose }: Props) {
  const { t } = useTranslation();
+  const { width, height } = useWindowDimensions();
+  const isTablet = isIPadLike(width, height);
+  const contentWidth = isTablet ? width - 40 : width - 40;
+  const thumbWidth = isTablet ? Math.min(420, contentWidth - 120) : Math.min(width * 0.6, 300);
+  const widgetImageWidth = isTablet ? Math.min(520, contentWidth - 24) : width * 0.9;
+  const howToSlideWidth = isTablet ? Math.min(640, contentWidth) : width - 32;

  const [page, setPage] = useState<Page>('root');
  const [navDirection, setNavDirection] = useState<NavDirection>('forward');
@@ -192,6 +197,7 @@ export default function ProfileModal({ visible, name: propName, onClose }: Props
          {page === 'root' ? (
            <RootPage
              name={currentName}
+              contentWidth={contentWidth}
              onOpenFavorites={() => go('favorites', 'forward')}
              onOpenWidget={() => go('widget', 'forward')}
              onOpenDailyReminder={() => go('dailyReminder', 'forward')}
@@ -200,15 +206,15 @@ export default function ProfileModal({ visible, name: propName, onClose }: Props
              onOpenTerms={() => openLink(legalLinks.terms)}
            />
          ) : page === 'favorites' ? (
-            <FavoritesPage visible={visible} page={page} />
+            <FavoritesPage visible={visible} page={page} thumbWidth={thumbWidth} contentWidth={contentWidth} />
          ) : page === 'dailyReminder' ? (
-            <DailyReminderPage visible={visible} onDone={() => go('root', 'back')} />
+            <DailyReminderPage visible={visible} onDone={() => go('root', 'back')} contentWidth={contentWidth} />
          ) : page === 'language' ? (
-            <LanguagePage />
+            <LanguagePage contentWidth={contentWidth} />
          ) : page === 'widgetHowTo' ? (
-            <WidgetHowToPage />
+            <WidgetHowToPage howToSlideWidth={howToSlideWidth} widgetImageWidth={widgetImageWidth} />
          ) : (
-            <WidgetPage onOpenHowTo={() => go('widgetHowTo', 'forward')} />
+            <WidgetPage onOpenHowTo={() => go('widgetHowTo', 'forward')} widgetImageWidth={widgetImageWidth} />
          )}
        </Animated.View>
      </View>
@@ -222,6 +228,7 @@ function toastTodo(t: (key: string) => string) {

 function RootPage({
  name,
+  contentWidth,
  onOpenFavorites,
  onOpenWidget,
  onOpenDailyReminder,
@@ -230,6 +237,7 @@ function RootPage({
  onOpenTerms,
 }: {
  name?: string;
+  contentWidth: number;
  onOpenFavorites: () => void;
  onOpenWidget: () => void;
  onOpenDailyReminder: () => void;
@@ -239,7 +247,7 @@ function RootPage({
 }) {
  const { t } = useTranslation();
  return (
-    <>
+    <View style={[styles.sectionWrap, { width: contentWidth }]}>
      <View style={styles.header}>
        <AvatarIcon width={234} height={183} />
        <Text style={styles.name}>{name || 'Hali'}</Text>
@@ -276,11 +284,23 @@ function RootPage({
          onPress={onOpenLanguage}
        />
      </View>
-    </>
+
+      <Text style={styles.versionText}>V1.0.0</Text>
+    </View>
  );
 }

-function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
+function FavoritesPage({
+  visible,
+  page,
+  thumbWidth,
+  contentWidth,
+}: {
+  visible: boolean;
+  page: Page;
+  thumbWidth: number;
+  contentWidth: number;
+}) {
  const { t } = useTranslation();
  const [favorites, setFavorites] = useState<(FavoriteItem & { text: string })[]>([]);

@@ -317,7 +337,7 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
  }

  return (
-    <View style={styles.favContainer}>
+    <View style={[styles.favContainer, { width: contentWidth, alignSelf: 'center' }]}>
      {favorites.length === 0 ? (
        <Text style={styles.favEmpty}>{t('favorites.empty')}</Text>
      ) : (
@@ -339,6 +359,7 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
              <View style={styles.favRight}>
                <View style={[
                  styles.favThumb, 
+                  { width: thumbWidth },
                  item.themeMode === 'scenery' ? {} : { backgroundColor: item.background }
                ]}>
                  {item.themeMode === 'scenery' ? (
@@ -346,7 +367,7 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
                      <Image 
                        source={NATURE_IMAGES[parseInt(item.background)]} 
                        style={{
-                          width: width * 0.6,
+                          width: thumbWidth,
                          height: 800, // 假设原图较高，设置一个较大的高度
                          position: 'absolute',
                          bottom: 0, // 关键：将图片底部对齐容器底部
@@ -378,7 +399,15 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
  );
 }

-function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () => void }) {
+function DailyReminderPage({
+  visible,
+  onDone,
+  contentWidth,
+}: {
+  visible: boolean;
+  onDone: () => void;
+  contentWidth: number;
+}) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [timesPerDay, setTimesPerDay] = useState(3);
@@ -525,7 +554,7 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
        </Pressable>
      </View>

-      <View style={styles.remindRow}>
+      <View style={[styles.remindRow, { width: contentWidth }]}>
        <View style={styles.rowLeft}>
          <View style={styles.rowIcon}>
            <RemindIcon width={18} height={18} />
@@ -556,7 +585,7 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
  );
 }

-function WidgetPage({ onOpenHowTo }: { onOpenHowTo: () => void }) {
+function WidgetPage({ onOpenHowTo, widgetImageWidth }: { onOpenHowTo: () => void; widgetImageWidth: number }) {
  const { t, i18n } = useTranslation();
  const currentLang = i18n.language;
  // 需求：个人主页弹窗「小工具」页暂时隐藏锁屏小工具说明/入口
@@ -580,13 +609,13 @@ function WidgetPage({ onOpenHowTo }: { onOpenHowTo: () => void }) {
      <View style={styles.widgetScroll}>
        {showLockScreenWidget ? (
          <Pressable style={styles.widgetItem} onPress={onOpenHowTo}>
-            <Image source={widget1} style={styles.widgetImg1} resizeMode="contain" />
+            <Image source={widget1} style={[styles.widgetImg1, { width: widgetImageWidth, height: widgetImageWidth * (156 / 311) }]} resizeMode="contain" />
            <Text style={styles.widgetLabel}>{t('widget.lockScreen')}</Text>
          </Pressable>
        ) : null}

        <Pressable style={styles.widgetItem} onPress={onOpenHowTo}>
-          <Image source={widget2} style={styles.widgetImg2} resizeMode="contain" />
+          <Image source={widget2} style={[styles.widgetImg2, { width: widgetImageWidth, height: widgetImageWidth * (175 / 311) }]} resizeMode="contain" />
          <Text style={styles.widgetLabel}>{t('widget.homeScreen')}</Text>
        </Pressable>
      </View>
@@ -594,7 +623,7 @@ function WidgetPage({ onOpenHowTo }: { onOpenHowTo: () => void }) {
  );
 }

-function WidgetHowToPage() {
+function WidgetHowToPage({ howToSlideWidth, widgetImageWidth }: { howToSlideWidth: number; widgetImageWidth: number }) {
  const { t, i18n } = useTranslation();
  const currentLang = i18n.language;
  const flatListRef = useRef<FlatList>(null);
@@ -631,7 +660,7 @@ function WidgetHowToPage() {

  const onScroll = (event: any) => {
    const x = event.nativeEvent.contentOffset.x;
-    const index = Math.round(x / (width - 32));
+    const index = Math.round(x / howToSlideWidth);
    if (index !== activeIndex) {
      setActiveIndex(index);
    }
@@ -655,14 +684,14 @@ function WidgetHowToPage() {
        onScrollBeginDrag={onScrollBeginDrag}
        scrollEventThrottle={16}
        renderItem={({ item }) => (
-          <View style={styles.howToSlide}>
-            <Image source={item.src} style={styles.howToImg} resizeMode="contain" />
+          <View style={[styles.howToSlide, { width: howToSlideWidth }]}>
+            <Image source={item.src} style={[styles.howToImg, { width: widgetImageWidth, height: widgetImageWidth * (234 / 326) }]} resizeMode="contain" />
            <Text style={styles.howToDesc}>{item.desc}</Text>
          </View>
        )}
      />
      
-      <View style={styles.pagination}>
+      <View style={[styles.pagination, { top: widgetImageWidth * (234 / 326) + 35 }]}>
        {images.map((_, i) => (
          <View
            key={i}
@@ -677,7 +706,7 @@ function WidgetHowToPage() {
  );
 }

-function LanguagePage() {
+function LanguagePage({ contentWidth }: { contentWidth: number }) {
  const { t, i18n } = useTranslation();
  const currentLang = i18n.language;

@@ -687,8 +716,8 @@ function LanguagePage() {
  ];

  return (
-    <View style={styles.langPage}>
-      <View style={styles.langList}>
+    <View style={[styles.langPage, { width: contentWidth, alignSelf: 'center' }]}>
+      <View style={[styles.langList, { width: contentWidth }]}>
        {languages.map((lang, index) => (
          <Pressable
            key={lang.id}
@@ -750,6 +779,9 @@ const styles = StyleSheet.create({
  pageWrap: {
    // 给页面切换动画一个稳定的容器，避免布局抖动
  },
+  sectionWrap: {
+    alignSelf: 'center',
+  },
  backRow: {
    alignSelf: 'flex-start',
    paddingVertical: 4,
@@ -806,6 +838,13 @@ const styles = StyleSheet.create({
    overflow: 'hidden',
    marginBottom: 8,
  },
+  versionText: {
+    marginTop: 12,
+    textAlign: 'center',
+    color: 'rgba(94,42,40,0.45)',
+    fontSize: 12,
+    fontWeight: '500',
+  },
  item: {
    height: 52,
    paddingHorizontal: 18,
@@ -848,7 +887,7 @@ const styles = StyleSheet.create({
    paddingVertical: 100,
  },
  favList: {
-    paddingHorizontal: 20,
+    paddingHorizontal: 8,
    paddingBottom: 80,
  },
  favCard: {
@@ -872,7 +911,6 @@ const styles = StyleSheet.create({
    backgroundColor: '#FFF4EA',
    borderRadius: 16,
    padding: 20,
-    width: width * 0.6,
    height: 161,
    justifyContent: 'center',
    position: 'relative',
@@ -945,7 +983,6 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 18,
-    width: width - 40, // 屏幕宽度减去左右各 20pt
    alignSelf: 'center',
  },
  rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
@@ -1004,12 +1041,12 @@ const styles = StyleSheet.create({
    width: '100%',
  },
  widgetImg1: {
-    width: width * 0.9,
-    height: (width * 0.9) * (156 / 311),
+    width: 320,
+    height: 160,
  },
  widgetImg2: {
-    width: width * 0.9,
-    height: (width * 0.9) * (175 / 311),
+    width: 320,
+    height: 176,
  },
  widgetLabel: {
    marginTop: 12,
@@ -1023,12 +1060,12 @@ const styles = StyleSheet.create({
    paddingTop: 20,
  },
  howToSlide: {
-    width: width - 32, // 减去 SheetModal 的 paddingHorizontal: 16 * 2
+    width: 320,
    alignItems: 'center',
  },
  howToImg: {
-    width: width * 0.9,
-    height: (width * 0.9) * (234 / 326),
+    width: 320,
+    height: 230,
    marginBottom: 40,
  },
  howToDesc: {
@@ -1042,7 +1079,7 @@ const styles = StyleSheet.create({
  pagination: {
    flexDirection: 'row',
    position: 'absolute',
-    top: (width * 0.9) * (234 / 326) + 35, // 根据新的图片高度动态计算
+    top: 265,
    gap: 8,
  },
  dot: {
@@ -1064,7 +1101,6 @@ const styles = StyleSheet.create({
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    overflow: 'hidden',
-    width: width - 40, // 屏幕宽度减去左右各 20pt
    alignSelf: 'center',
  },
  langItem: {
--- a/client/components/home/ThemeModal.tsx
+++ b/client/components/home/ThemeModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Image, Pressable, StyleSheet, Text, View, Platform, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';

 import SheetModal from '@/components/ui/SheetModal';
@@ -15,8 +15,11 @@ type Props = {

 export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
  const { t } = useTranslation();
+  const { width, height } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
+
  return (
-    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={360}>
+    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={isTablet ? 560 : 360}>
      <View style={styles.row}>
        <ThemeCard
          title={t('theme.scenery')}
@@ -100,9 +103,9 @@ const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    flexWrap: 'nowrap',
-    gap: 12,
-    paddingHorizontal: 4,
-    paddingBottom: 50,
+    gap: 8,
+    paddingHorizontal: 0,
+    paddingBottom: 22,
    paddingTop: 20,
    justifyContent: 'space-between',
  },
--- a/client/components/onboarding/NameInputStep.tsx
+++ b/client/components/onboarding/NameInputStep.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Text, Keyboard, Pressable } from 'react-native';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Text, Keyboard, Pressable, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
@@ -16,10 +16,13 @@ interface NameInputStepProps {
 export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProps) {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
  const [isFocused, setIsFocused] = useState(false);
  const [keyboardHeight, setKeyboardHeight] = useState(0);
  const blinkAnim = useRef(new Animated.Value(1)).current;
  const hasInput = value.trim().length > 0;
+  const inputCardWidth = isTablet ? Math.min(520, Math.floor(width * 0.72)) : 335;

  useEffect(() => {
    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
@@ -62,7 +65,7 @@ export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProp

  return (
    <Pressable style={styles.container} onPress={Keyboard.dismiss} accessible={false}>
-      <View style={styles.inputCard}>
+      <View style={[styles.inputCard, { width: inputCardWidth }]}>
        <View style={styles.inputWrapper}>
          {/* 显示层：文案 + 跟随的光标 */}
          <View style={styles.displayLayer}>
--- a/client/components/onboarding/OnboardingLayout.tsx
+++ b/client/components/onboarding/OnboardingLayout.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useEffect } from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform, Animated, Easing } from 'react-native';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform, Animated, Easing, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';

@@ -29,6 +29,9 @@ export function OnboardingLayout({
  userName = '',
 }: OnboardingLayoutProps) {
  const { t } = useTranslation();
+  const { width, height } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
+  const contentMaxWidth = isTablet ? 620 : undefined;
  const showGreeting = currentStep === 1 && userName.trim().length > 0;
  const displayName = userName.trim();
  const prevStepRef = useRef(currentStep);
@@ -72,7 +75,7 @@ export function OnboardingLayout({
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
        {/* Header: Back & Skip */}
-        <View style={styles.header}>
+        <View style={[styles.header, contentMaxWidth ? { maxWidth: contentMaxWidth, width: '100%', alignSelf: 'center' } : null]}>
          <View style={styles.headerLeft}>
            {showBackButton && onBack && (
              <TouchableOpacity onPress={onBack} style={styles.iconButton}>
@@ -94,7 +97,7 @@ export function OnboardingLayout({
        </View>

        {/* Title & Progress Row（名字步骤后第一步且名字非空时显示招呼语 + 问题） */}
-        <View style={styles.titleRow}>
+        <View style={[styles.titleRow, contentMaxWidth ? { maxWidth: contentMaxWidth, width: '100%', alignSelf: 'center' } : null]}>
          <View style={styles.titleBlock}>
            {showGreeting && (
              <Text style={styles.greetingText}>{t('onboardingSurvey.greeting', { name: displayName })}</Text>
@@ -108,6 +111,7 @@ export function OnboardingLayout({
        <Animated.View
          style={[
            styles.content,
+            contentMaxWidth ? { maxWidth: contentMaxWidth, width: '100%', alignSelf: 'center' } : null,
            {
              opacity,
              transform: [{ translateX }],
--- a/client/components/onboarding/ReminderStep.tsx
+++ b/client/components/onboarding/ReminderStep.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, Text, Platform, ActivityIndicator } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Platform, ActivityIndicator, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -20,6 +20,9 @@ interface ReminderStepProps {
 export function ReminderStep({ value, onChange, onFinish, loading = false }: ReminderStepProps) {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
+  const contentMaxWidth = isTablet ? 560 : undefined;

  const handleReduce = () => {
    // 本页最小为 1；不接收提醒请使用右上角 Skip
@@ -32,7 +35,7 @@ export function ReminderStep({ value, onChange, onFinish, loading = false }: Rem

  return (
    <View style={styles.container}>
-      <View style={styles.counterContainer}>
+      <View style={[styles.counterContainer, contentMaxWidth ? { maxWidth: contentMaxWidth } : null]}>
        <TouchableOpacity onPress={handleReduce} disabled={loading} activeOpacity={0.7}>
          <ReduceIcon width={47} height={47} />
        </TouchableOpacity>
--- a/client/components/onboarding/SelectionStep.tsx
+++ b/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}
            >
--- a/client/components/ui/SheetModal.tsx
+++ b/client/components/ui/SheetModal.tsx
@@ -1,5 +1,5 @@
 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 { Modal, Pressable, StyleSheet, Text, View, PanResponder, Animated as RNAnimated, Image, ImageSourcePropType, Platform, useWindowDimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
@@ -10,7 +10,6 @@ import Animated, {
  withTiming,
 } from 'react-native-reanimated';

-const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 const FIXED_TOP_GAP = 100; // 统一距离顶部的高度

 type Props = {
@@ -30,11 +29,13 @@ type Props = {
 export default function SheetModal({ visible, title, onClose, children, leftIcon, height: customHeight }: Props) {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const isTablet = Platform.OS === 'ios' && Math.min(windowWidth, windowHeight) >= 768;
  const [mounted, setMounted] = useState(false);
  const progress = useSharedValue(0); // 0: 关闭, 1: 打开
  const dragY = useSharedValue(0); // 拖拽位移

-  const sheetHeight = customHeight || (SCREEN_HEIGHT - FIXED_TOP_GAP);
+  const sheetHeight = customHeight || (isTablet ? Math.min(windowHeight - 72, 760) : (windowHeight - FIXED_TOP_GAP));

  useEffect(() => {
    if (visible) {
@@ -90,7 +91,10 @@ export default function SheetModal({ visible, title, onClose, children, leftIcon
    };
  });

-  const containerPaddingBottom = useMemo(() => Math.max(insets.bottom, 80), [insets.bottom]); // 增加底部间距至 80，约占 350 高度的 22%，确保内容不被截断并留出足够呼吸感
+  const containerPaddingBottom = useMemo(() => {
+    if (customHeight) return Math.max(insets.bottom, 16);
+    return Math.max(insets.bottom, isTablet ? 20 : 80);
+  }, [customHeight, insets.bottom, isTablet]);

  // 注意：Modal 的 visible 必须为 true 才会渲染，因此用 mounted 保持退场动画
  return (
@@ -107,6 +111,7 @@ export default function SheetModal({ visible, title, onClose, children, leftIcon
          {...panResponder.panHandlers}
          style={[
            styles.sheet,
+            isTablet ? styles.sheetTablet : null,
            sheetStyle,
            {
              height: sheetHeight,
@@ -159,6 +164,14 @@ const styles = StyleSheet.create({
    paddingTop: 8,
    paddingHorizontal: 16,
  },
+  sheetTablet: {
+    width: '100%',
+    alignSelf: 'stretch',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
  handleContainer: {
    alignItems: 'center',
    paddingVertical: 8,