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

client/app/(splash)/splash.tsx

@@ -1,12 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, Image, StyleSheet, TouchableOpacity, Dimensions, Platform, Alert } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
+import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Platform, Alert, Image } from 'react-native';
 import { useRouter } from 'expo-router';
 import * as WebBrowser from 'expo-web-browser';
 import { useTranslation } from 'react-i18next';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { setConsentAccepted, getConsentAccepted } from '../../src/storage/appStorage';
 
+// 导入 SVG 组件
+import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
+import WelcomeBtn from '../../assets/images/index/welcome_btn.svg';
+
 const { width, height } = Dimensions.get('window');
 
 export default function SplashScreen() {
@@ -22,18 +25,15 @@ export default function SplashScreen() {
     const accepted = await getConsentAccepted();
     setShowConsent(!accepted);
     if (accepted) {
-        // 如果已经同意过，直接跳转到首页分发
-        // 注意：这里需要与 app/index.tsx 配合，如果 app/index.tsx 已经判断了 consent=true 不会跳过来，
-        // 那么这里其实是防守。
-        // 但如果用户是通过 deep link 或其他方式强制进入 splash，这个逻辑会把他们送走。
-        router.replace('/');
+      router.replace('/');
     }
   };
 
   const handleAgree = async () => {
     await setConsentAccepted(true);
     setShowConsent(false);
-    router.replace('/');
+    // 跳转到 onboarding 流程
+    router.replace('/(onboarding)/onboarding');
   };
 
   const openLink = async (url: string) => {
@@ -44,31 +44,40 @@ export default function SplashScreen() {
     }
   };
 
+  const bgDecorationTop = 363;
+  const bgDecorationHeight = height * 0.6;
+  const contentTop = bgDecorationTop + (bgDecorationHeight * 0.25);
+
   return (
     <View style={styles.container}>
-      <Image
-        source={require('../../assets/images/index/index_flowers.png')}
-        style={styles.image}
-        resizeMode="contain"
-      />
+      {/* 中间的背景装饰 SVG (现在放在上面，作为上层) */}
+      <View style={[styles.bgDecorationContainer, { top: bgDecorationTop }]}>
+        <FlowersBg width={width + 10} height={bgDecorationHeight} />
+      </View>
 
-      <View style={styles.contentContainer}>
-        <Text style={styles.title}>{t('consent.title')}</Text>
-        <Text style={styles.subtitle}>{t('consent.subtitle')}</Text>
+      {/* 顶部的花图片 (现在放在下面，作为下层) */}
+      <View style={styles.topImageContainer}>
+        <Image
+          source={require('../../assets/images/index/index_flowers.png')}
+          style={styles.topImage}
+          resizeMode="contain"
+        />
+      </View>
+
+      {/* 文案内容 */}
+      <View style={[styles.contentContainer, { position: 'absolute', top: contentTop }]}>
+        <Text style={styles.titleText}>
+          You Are Perfect.{"\n"}
+          Everything{"\n"}
+          Will Be Better.
+        </Text>
       </View>
 
       <SafeAreaView style={styles.bottomContainer} edges={['bottom']}>
         {showConsent && (
           <>
-            <TouchableOpacity onPress={handleAgree} activeOpacity={0.8}>
-              <LinearGradient
-                colors={['#F69F7B', '#F99CC0']}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 1, y: 0 }}
-                style={styles.button}
-              >
-                <Text style={styles.buttonText}>{t('consent.agree')}</Text>
-              </LinearGradient>
+            <TouchableOpacity onPress={handleAgree} activeOpacity={0.8} style={styles.buttonWrapper}>
+              <WelcomeBtn width={87} height={57} />
             </TouchableOpacity>
 
             <View style={styles.linksContainer}>
@@ -90,74 +99,57 @@ export default function SplashScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFF9F0', // 假设的背景色，根据图片调整
+    backgroundColor: '#F5D3B5', // 匹配 Figma 背景色
     alignItems: 'center',
   },
-  image: {
-    width: width * 0.8,
-    height: height * 0.5,
-    marginTop: height * 0.1,
+  topImageContainer: {
+    marginTop: 60,
+    zIndex: 1, // 降低层级
+  },
+  topImage: {
+    width: 308,
+    height: 354,
+  },
+  bgDecorationContainer: {
+    position: 'absolute',
+    left: -3,
+    zIndex: 2, // 提高层级，使其覆盖在图片之上
   },
   contentContainer: {
     alignItems: 'center',
-    marginTop: 20,
-    paddingHorizontal: 30,
+    zIndex: 3,
   },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#4A3427', // 深褐色
-    marginBottom: 10,
+  titleText: {
+    fontSize: 30,
+    lineHeight: 42,
+    color: '#772F00', // 匹配 Figma 文字颜色
     textAlign: 'center',
-    fontFamily: Platform.OS === 'ios' ? 'Georgia' : 'serif', // 尝试匹配衬线体
-  },
-  subtitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#4A3427', // 深褐色
-    textAlign: 'center',
-    lineHeight: 24,
-    fontFamily: Platform.OS === 'ios' ? 'Georgia' : 'serif',
+    fontWeight: '600',
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
   },
   bottomContainer: {
     position: 'absolute',
-    bottom: 0,
+    bottom: 60,
     width: '100%',
     alignItems: 'center',
-    paddingBottom: 20,
+    zIndex: 4,
   },
-  button: {
-    width: width * 0.8,
-    paddingVertical: 16,
-    borderRadius: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 20,
-    shadowColor: '#F69F7B',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  buttonText: {
-    color: '#FFF',
-    fontSize: 18,
-    fontWeight: '600',
+  buttonWrapper: {
+    marginBottom: 40,
   },
   linksContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 10,
   },
   linkText: {
     fontSize: 12,
-    color: '#999',
+    color: 'rgba(119, 47, 0, 0.5)', // 使用半透明的文字颜色
     textDecorationLine: 'underline',
   },
   divider: {
     width: 1,
     height: 12,
-    backgroundColor: '#CCC',
+    backgroundColor: 'rgba(119, 47, 0, 0.2)',
     marginHorizontal: 15,
   },
 });