onboarding: 选项字体与问题一致、底部间距、提醒页文案与移除底部 Skip

Co-authored-by: Cursor <cursoragent@cursor.com>

client/components/onboarding/IntentSelectionStep.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
 import { useTranslation } from 'react-i18next';
-import { SerifText } from './SerifText';
-import { OnboardingColors } from '@/constants/OnboardingTheme';
+import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
 
 export const INTENTS = [
   { id: 'love', labelKey: 'intent.love', icon: '❤️' },
@@ -20,7 +19,7 @@ export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionSt
   const { t } = useTranslation();
   return (
     <View style={styles.container}>
-      <SerifText style={styles.title}>{t('intent.title')}</SerifText>
+      <Text style={styles.title}>{t('intent.title')}</Text>
       
       <View style={styles.grid}>
         {INTENTS.map((intent) => {
@@ -35,10 +34,10 @@ export function IntentSelectionStep({ selectedIds, onToggle }: IntentSelectionSt
               onPress={() => onToggle(intent.id)}
               activeOpacity={0.7}
             >
-              <SerifText style={styles.icon}>{intent.icon}</SerifText>
-              <SerifText style={[styles.label, isSelected && styles.labelSelected]}>
+              <Text style={styles.icon}>{intent.icon}</Text>
+              <Text style={[styles.label, isSelected && styles.labelSelected]}>
                 {t(intent.labelKey)}
-              </SerifText>
+              </Text>
             </TouchableOpacity>
           );
         })}
@@ -56,6 +55,8 @@ const styles = StyleSheet.create({
     fontSize: 24,
     marginBottom: 40,
     textAlign: 'center',
+    fontFamily: OnboardingFont.question,
+    color: OnboardingColors.textPrimary,
   },
   grid: {
     flexDirection: 'row',
@@ -86,10 +87,12 @@ const styles = StyleSheet.create({
   },
   icon: {
     fontSize: 32,
+    fontFamily: OnboardingFont.question,
   },
   label: {
     fontSize: 18,
     color: OnboardingColors.textPrimary,
+    fontFamily: OnboardingFont.question,
   },
   labelSelected: {
     fontWeight: 'bold',

client/components/onboarding/OnboardingLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
 import { useTranslation } from 'react-i18next';
-import { OnboardingColors } from '@/constants/OnboardingTheme';
+import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
 
 interface OnboardingLayoutProps {
   children: React.ReactNode;
@@ -119,13 +119,13 @@ const styles = StyleSheet.create({
   questionTitle: {
     fontSize: 22,
     color: OnboardingColors.questionTitle,
-    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    fontFamily: OnboardingFont.question,
     flex: 1,
   },
   progressText: {
     fontSize: 18,
     color: OnboardingColors.textProgress,
-    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    fontFamily: OnboardingFont.question,
     marginLeft: 10,
   },
   content: {

client/components/onboarding/ReminderStep.tsx

@@ -11,10 +11,10 @@ interface ReminderStepProps {
   value: number;
   onChange: (value: number) => void;
   onFinish: () => void;
-  onSkip: () => void;
+  onSkip?: () => void;
 }
 
-export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStepProps) {
+export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
 
@@ -48,10 +48,6 @@ export function ReminderStep({ value, onChange, onFinish, onSkip }: ReminderStep
         <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
           <BtnClicked width={87} height={57} />
         </TouchableOpacity>
-
-        <TouchableOpacity onPress={onSkip} activeOpacity={0.8} style={styles.skipBtn}>
-          <Text style={styles.skipText}>{t('onboarding.skip')}</Text>
-        </TouchableOpacity>
       </View>
     </View>
   );
@@ -93,17 +89,5 @@ const styles = StyleSheet.create({
   footer: {
     position: 'absolute',
     alignItems: 'center',
-  }
-  ,
-  skipBtn: {
-    marginTop: 14,
-    paddingVertical: 10,
-    paddingHorizontal: 18,
-  },
-  skipText: {
-    color: OnboardingColors.textPrimary,
-    fontSize: 15,
-    fontWeight: '600',
-    opacity: 0.85,
   },
 });

client/components/onboarding/SelectionStep.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { View, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { OnboardingColors } from '@/constants/OnboardingTheme';
-import { SerifText } from './SerifText';
+import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
 import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
 import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
 import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
@@ -25,7 +24,8 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
   const insets = useSafeAreaInsets();
   const footerBottom = insets.bottom + 16;
   const footerButtonHeight = 57;
-  const footerPaddingBottom = footerBottom + footerButtonHeight + 24;
+  // 底部留白加大，避免最后一项与按钮边框视觉重叠
+  const footerPaddingBottom = footerBottom + footerButtonHeight + 40;
 
   return (
     <View style={styles.container}>
@@ -43,7 +43,7 @@ export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }
               onPress={() => onToggle(option.id)}
               activeOpacity={0.7}
             >
-              <SerifText style={styles.optionText}>{option.label}</SerifText>
+              <Text style={styles.optionText}>{option.label}</Text>
               {isSelected && (
                 <View style={styles.iconWrapper}>
                   <SelectedIcon width={20} height={20} />
@@ -95,6 +95,7 @@ const styles = StyleSheet.create({
     fontSize: 18,
     color: OnboardingColors.textPrimary,
     fontWeight: '500',
+    fontFamily: OnboardingFont.question,
     flex: 1,
   },
   iconWrapper: {