改页

client/app/(splash)/splash.tsx

@@ -1,12 +1,14 @@
 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 { 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';
 
+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,10 +24,6 @@ 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('/');
     }
   };
@@ -46,29 +44,35 @@ export default function SplashScreen() {
 
   return (
     <View style={styles.container}>
-      <Image
-        source={require('../../assets/images/index/index_flowers.png')}
-        style={styles.image}
-        resizeMode="contain"
-      />
-
-      <View style={styles.contentContainer}>
-        <Text style={styles.title}>{t('consent.title')}</Text>
-        <Text style={styles.subtitle}>{t('consent.subtitle')}</Text>
+      {/* Top Image Area - No white card, placed below SVG */}
+      <View style={styles.imageContainer}>
+        <Image
+          source={require('../../assets/images/index/index_flowers.png')}
+          style={styles.mainImage}
+          resizeMode="contain"
+        />
       </View>
 
+      {/* Background Flower SVG - Placed above the image */}
+      <View style={styles.bgFlowerContainer}>
+        <FlowersBg width={width} height={height * 0.6} />
+      </View>
+
+      {/* Content Area */}
+      <View style={styles.contentContainer}>
+        <Text style={styles.title}>
+          You are perfect.{"\n"}
+          Everything{"\n"}
+          will be better.
+        </Text>
+      </View>
+
+      {/* Bottom Actions */}
       <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.welcomeBtnWrapper}>
+              <WelcomeBtn width={87} height={57} />
             </TouchableOpacity>
 
             <View style={styles.linksContainer}>
@@ -90,74 +94,64 @@ export default function SplashScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#FFF9F0', // 假设的背景色，根据图片调整
+    backgroundColor: '#F5D3B5',
     alignItems: 'center',
   },
-  image: {
-    width: width * 0.8,
+  imageContainer: {
+    marginTop: 60,
+    width: width,
     height: height * 0.5,
-    marginTop: height * 0.1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1, // 放在底层
+  },
+  mainImage: {
+    width: width * 0.85,
+    height: '100%',
+  },
+  bgFlowerContainer: {
+    position: 'absolute',
+    bottom: -height * 0.05, // 向下移动屏幕高度的 5%
+    left: 0,
+    right: 0,
+    zIndex: 2, // 放在图片上层
   },
   contentContainer: {
-    alignItems: 'center',
-    marginTop: 20,
+    marginTop: 40,
     paddingHorizontal: 30,
+    zIndex: 3,
   },
   title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    color: '#4A3427', // 深褐色
-    marginBottom: 10,
+    fontSize: 30,
+    lineHeight: 42,
+    color: '#772F00',
     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: 40,
     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',
+  welcomeBtnWrapper: {
+    marginBottom: 30,
   },
   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,
   },
 });

client/app/index.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useRouter } from 'expo-router';
 
-import { getOnboardingCompleted, getConsentAccepted } from '@/src/storage/appStorage';
+import { getOnboardingCompleted, getConsentAccepted, setOnboardingCompleted } from '@/src/storage/appStorage';
 
 /**
  * 启动分发：根据 consent 和 onboarding 状态跳转
@@ -13,10 +13,19 @@ export default function Index() {
   useEffect(() => {
     let cancelled = false;
     (async () => {
+      // 临时重置引导页状态（开发调试用）
+      await setOnboardingCompleted(false);
+
       // 1. 检查是否同意协议
       const consentAccepted = await getConsentAccepted();
       if (cancelled) return;
 
+      if (!consentAccepted) {
+        router.replace('/(splash)/splash');
+        return;
+      }
+      if (cancelled) return;
+
       if (!consentAccepted) {
         router.replace('/(splash)/splash');
         return;