双端适配，web端的修改父容器和接口

src/screens/profile/AccountSecurityScreen.tsx

@@ -10,8 +10,11 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
-import { Text, ResponsiveContainer } from '../../components/common';
-import { useResponsive } from '../../hooks';
+import { Text } from '../../components/common';
+import { useResponsive, useResponsiveSpacing } from '../../hooks';
+
+// 内容最大宽度
+const CONTENT_MAX_WIDTH = 720;
 import { authService, resolveAuthApiError } from '../../services/authService';
 import { showPrompt } from '../../services/promptService';
 import { useAuthStore } from '../../stores';
@@ -340,15 +343,13 @@ export const AccountSecurityScreen: React.FC = () => {
     </>
   );
 
+  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
+
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      {isWideScreen ? (
-        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>{content}</ScrollView>
-        </ResponsiveContainer>
-      ) : (
-        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>{content}</ScrollView>
-      )}
+      <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding }]}>
+        {content}
+      </ScrollView>
     </SafeAreaView>
   );
 };
@@ -380,6 +381,9 @@ function createAccountSecurityStyles(colors: AppColors) {
       marginHorizontal: spacing.lg,
       borderRadius: borderRadius.lg,
       padding: spacing.md,
+      maxWidth: CONTENT_MAX_WIDTH,
+      alignSelf: 'center',
+      width: '100%',
     },
     statusRow: {
       flexDirection: 'row',

src/screens/profile/EditProfileScreen.tsx

@@ -31,9 +31,12 @@ import {
   type AppColors,
 } from '../../theme';
 import { useAuthStore } from '../../stores';
-import { Avatar, Button, Text, ResponsiveContainer } from '../../components/common';
+import { Avatar, Button, Text } from '../../components/common';
 import { authService, uploadService } from '../../services';
-import { useResponsive } from '../../hooks';
+import { useResponsive, useResponsiveSpacing } from '../../hooks';
+
+// 内容最大宽度
+const CONTENT_MAX_WIDTH = 720;
 
 function createEditProfileStyles(colors: AppColors) {
   return StyleSheet.create({
@@ -210,6 +213,9 @@ function createEditProfileStyles(colors: AppColors) {
     shadowOpacity: 0.05,
     shadowRadius: 8,
     elevation: 2,
+    maxWidth: CONTENT_MAX_WIDTH,
+    alignSelf: 'center',
+    width: '100%',
   },
   sectionTitle: {
     marginBottom: spacing.lg,
@@ -357,6 +363,7 @@ export const EditProfileScreen: React.FC = () => {
   const navigation = useNavigation();
   const { currentUser, updateUser } = useAuthStore();
   const { isWideScreen, isMobile, width } = useResponsive();
+  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
   const insets = useSafeAreaInsets();
 
   const [nickname, setNickname] = useState(currentUser?.nickname || '');
@@ -793,23 +800,12 @@ export const EditProfileScreen: React.FC = () => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.keyboardView}
       >
-        {isWideScreen ? (
-          <ResponsiveContainer maxWidth={800}>
-            <ScrollView
-              contentContainerStyle={styles.scrollContent}
-              showsVerticalScrollIndicator={false}
-            >
-              {renderFormContent()}
-            </ScrollView>
-          </ResponsiveContainer>
-        ) : (
-          <ScrollView
-            contentContainerStyle={styles.scrollContent}
-            showsVerticalScrollIndicator={false}
-          >
-            {renderFormContent()}
-          </ScrollView>
-        )}
+        <ScrollView
+          contentContainerStyle={[styles.scrollContent, { paddingHorizontal: responsivePadding }]}
+          showsVerticalScrollIndicator={false}
+        >
+          {renderFormContent()}
+        </ScrollView>
       </KeyboardAvoidingView>
     </SafeAreaView>
   );

src/screens/profile/NotificationSettingsScreen.tsx

@@ -14,14 +14,17 @@ import {
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { spacing, borderRadius, useAppColors, type AppColors } from '../../theme';
-import { Text, ResponsiveContainer } from '../../components/common';
+import { Text } from '../../components/common';
 import {
   loadNotificationPreferences,
   setPushNotificationsPreference,
   setSoundPreference,
   setVibrationPreference,
 } from '../../services/notificationPreferences';
-import { useResponsive } from '../../hooks';
+import { useResponsive, useResponsiveSpacing } from '../../hooks';
+
+// 内容最大宽度
+const CONTENT_MAX_WIDTH = 720;
 
 interface NotificationSettingItem {
   key: string;
@@ -168,19 +171,13 @@ export const NotificationSettingsScreen: React.FC = () => {
     </>
   );
 
+  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
+
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      {isWideScreen ? (
-        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-            {renderContent()}
-          </ScrollView>
-        </ResponsiveContainer>
-      ) : (
-        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-          {renderContent()}
-        </ScrollView>
-      )}
+      <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding }]}>
+        {renderContent()}
+      </ScrollView>
     </SafeAreaView>
   );
 };
@@ -212,6 +209,9 @@ function createNotificationSettingsStyles(colors: AppColors) {
       marginHorizontal: spacing.lg,
       borderRadius: borderRadius.lg,
       overflow: 'hidden',
+      maxWidth: CONTENT_MAX_WIDTH,
+      alignSelf: 'center',
+      width: '100%',
     },
     settingItem: {
       flexDirection: 'row',

src/screens/profile/SettingsScreen.tsx

@@ -27,10 +27,13 @@ import {
   type AppColors,
 } from '../../theme';
 import { useAuthStore } from '../../stores';
-import { Text, ResponsiveContainer } from '../../components/common';
-import { useResponsive } from '../../hooks';
+import { Text } from '../../components/common';
+import { useResponsive, useResponsiveSpacing } from '../../hooks';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+// 设置卡片最大宽度
+const SETTINGS_CARD_MAX_WIDTH = 720;
+
 import * as hrefs from '../../navigation/hrefs';
 
 interface SettingsItem {
@@ -84,6 +87,9 @@ function createSettingsStyles(colors: AppColors) {
     },
     groupContainer: {
       marginBottom: spacing.lg,
+      maxWidth: SETTINGS_CARD_MAX_WIDTH,
+      alignSelf: 'center',
+      width: '100%',
     },
     groupHeader: {
       flexDirection: 'row',
@@ -154,6 +160,9 @@ function createSettingsStyles(colors: AppColors) {
       paddingVertical: spacing.md,
       borderRadius: borderRadius.lg,
       gap: spacing.sm,
+      maxWidth: SETTINGS_CARD_MAX_WIDTH,
+      alignSelf: 'center',
+      width: '100%',
     },
     logoutText: {
       fontWeight: '500',
@@ -172,9 +181,9 @@ function createSettingsStyles(colors: AppColors) {
 export const SettingsScreen: React.FC = () => {
   const router = useRouter();
   const { logout } = useAuthStore();
-  const { isWideScreen } = useResponsive();
   const insets = useSafeAreaInsets();
   const { isMobile } = useResponsive();
+  const responsivePadding = useResponsiveSpacing({ xs: 8, sm: 12, md: 16, lg: 24, xl: 32 });
   const colors = useAppColors();
   const styles = useMemo(() => createSettingsStyles(colors), [colors]);
   const themePreference = useThemePreference();
@@ -355,17 +364,9 @@ export const SettingsScreen: React.FC = () => {
 
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      {isWideScreen ? (
-        <ResponsiveContainer maxWidth={800}>
-          <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-            {renderContent()}
-          </ScrollView>
-        </ResponsiveContainer>
-      ) : (
-        <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset }]}>
-          {renderContent()}
-        </ScrollView>
-      )}
+      <ScrollView contentContainerStyle={[styles.scrollContent, { paddingBottom: scrollBottomInset, paddingHorizontal: responsivePadding }]}>
+        {renderContent()}
+      </ScrollView>
     </SafeAreaView>
   );
 };