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

2026-01-31 19:02:54 +08:00
parent c4c7d7d251
commit e675cbbbfb
49 changed files with 1536 additions and 522 deletions
--- a/README.md
+++ b/README.md
@@ -3,6 +3,17 @@
 本项目面向宝妈群体，提供情绪价值与正念练习支持。
 客户端采用 React Native + Expo，后端采用 Python + FastAPI，数据库 MySQL，任务调度 Celery，推送/定时等功能完整支持。

+# git提交
+git add .
+git commit -m '备注'
+git push origin
+
+获取最新分支
+git pull
+
+# 创建自己的分支
+git checkout -b 姓名拼写
+
 # 目录结构

 /mindfulness
--- a/client/app/(app)/home.tsx
+++ b/client/app/(app)/home.tsx
@@ -1,8 +1,7 @@
-import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Pressable } from 'react-native';
+import { useEffect, useLayoutEffect, useMemo, useState, useCallback, useRef } from 'react';
+import { StyleSheet, View, Dimensions, Text, Pressable, PanResponder, Animated as RNAnimated } from 'react-native';
 import { useTranslation } from 'react-i18next';
-import { useNavigation } from 'expo-router';
+import { useNavigation, useFocusEffect } from 'expo-router';
 import Animated, {
  Easing,
  runOnJS,
@@ -27,9 +26,10 @@ import ThemeModal from '@/components/home/ThemeModal';

 import ThemeIcon from '@/assets/images/home/theme.svg';
 import MyIcon from '@/assets/images/home/my.svg';
-import LikeOutlineIcon from '@/assets/images/home/like.svg';
 import LikeFilledIcon from '@/assets/images/home/like_filled.svg';
-import HateIcon from '@/assets/images/home/hate.svg';
+import LikeIcon from '@/assets/images/icon/like_icon.svg';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');

 export default function HomeScreen() {
  const { t } = useTranslation();
@@ -44,19 +44,27 @@ export default function HomeScreen() {

  const item = useMemo(() => MOCK_CONTENT[index % MOCK_CONTENT.length], [index]);

-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      const mode = await getThemeMode();
-      const profile = await getUserProfile();
-      if (cancelled) return;
-      setThemeModeState(mode);
-      setProfileName(profile.name);
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+  // 动画相关 Shared Values
+  const translateY = useSharedValue(0);
+  const opacity = useSharedValue(1);
+  const likeScale = useSharedValue(1);
+
+  // 每次进入页面或页面获得焦点时刷新个人信息
+  useFocusEffect(
+    useCallback(() => {
+      let cancelled = false;
+      (async () => {
+        const mode = await getThemeMode();
+        const profile = await getUserProfile();
+        if (cancelled) return;
+        setThemeModeState(mode);
+        setProfileName(profile.name);
+      })();
+      return () => {
+        cancelled = true;
+      };
+    }, [])
+  );

  const backgroundColor = themeMode === 'color' ? '#F3D0E1' : '#F4D6C2';

@@ -83,60 +91,109 @@ export default function HomeScreen() {
    });
  }, [backgroundColor, navigation, t]);

-  const likeScale = useSharedValue(1);
-  const hateScale = useSharedValue(1);
+  const textAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));

  const likeAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: likeScale.value }],
  }));

-  const hateAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: hateScale.value }],
-  }));
+  // 切换到下一条文案的统一动画逻辑
+  const triggerNextContent = useCallback(() => {
+    if (busy) return;
+    setBusy(true);

-  function playLikeAnimationAndThen(next: () => void) {
+    // 1. 当前文案向上移动并消失
+    translateY.value = withTiming(-40, { duration: 300, easing: Easing.out(Easing.quad) });
+    opacity.value = withTiming(0, { duration: 300 }, (finished) => {
+      if (finished) {
+        // 2. 切换数据索引
+        runOnJS(setIndex)(index + 1);
+        runOnJS(setLikeFilled)(false);
+
+        // 3. 准备下一条文案：先瞬移到下方 40pt
+        translateY.value = 40;
+        
+        // 4. 下一条文案向上移动到原位并显现
+        translateY.value = withTiming(0, { duration: 400, easing: Easing.out(Easing.back(1)) });
+        opacity.value = withTiming(1, { duration: 400 }, (finished) => {
+          if (finished) {
+            runOnJS(setBusy)(false);
+          }
+        });
+      }
+    });
+  }, [busy, index, translateY, opacity]);
+
+  const lastTapRef = useRef<number>(0);
+  
+  // 使用 Ref 解决 PanResponder 闭包陷阱，确保手势回调能拿到最新的 state 和 function
+  const handlersRef = useRef({ onPressLike, triggerNextContent });
+  useEffect(() => {
+    handlersRef.current = { onPressLike, triggerNextContent };
+  }, [onPressLike, triggerNextContent]);
+
+  // 使用系统自带的 PanResponder 代替第三方手势库
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true, // 允许开始捕获
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // 只有当垂直滑动距离大于 20 时才接管位移手势
+        return Math.abs(gestureState.dy) > 20;
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const now = Date.now();
+        const DOUBLE_TAP_DELAY = 300;
+
+        // 1. 双击逻辑判定
+        if (now - lastTapRef.current < DOUBLE_TAP_DELAY) {
+          // 判定为双击
+          if (Math.abs(gestureState.dx) < 10 && Math.abs(gestureState.dy) < 10) {
+            runOnJS(handlersRef.current.onPressLike)();
+            lastTapRef.current = 0; // 重置
+            return;
+          }
+        }
+        lastTapRef.current = now;
+
+        // 2. 上滑逻辑判定
+        if (gestureState.dy < -50) { // 上滑超过 50pt
+          runOnJS(handlersRef.current.triggerNextContent)();
+        }
+      },
+    })
+  ).current;
+
+  async function onPressLike() {
+    if (busy) return;
    setLikeFilled(true);
+    
+    // 1. 获取当前日期
+    const now = new Date();
+    const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
+
+    // 2. 保存到收藏夹，包含当前背景信息
+    await addFavorite({
+      id: item.id,
+      date: dateStr,
+      themeMode: themeMode,
+      background: backgroundColor, // 目前存储的是颜色值
+    });
+
+    // 3. 爱心缩放动画
    likeScale.value = withSequence(
-      withTiming(0.92, { duration: 90, easing: Easing.out(Easing.cubic) }),
-      withTiming(1.14, { duration: 120, easing: Easing.out(Easing.cubic) }),
-      withTiming(1, { duration: 140, easing: Easing.out(Easing.cubic) }, (finished) => {
-        if (finished) runOnJS(next)();
+      withTiming(0.8, { duration: 100 }),
+      withTiming(1.2, { duration: 150 }),
+      withTiming(1, { duration: 100 }, (finished) => {
+        if (finished) {
+          runOnJS(triggerNextContent)();
+        }
      })
    );
  }

-  function playHateAnimationAndThen(next: () => void) {
-    hateScale.value = withSequence(
-      withTiming(0.92, { duration: 90, easing: Easing.out(Easing.cubic) }),
-      withTiming(1.06, { duration: 110, easing: Easing.out(Easing.cubic) }),
-      withTiming(1, { duration: 120, easing: Easing.out(Easing.cubic) }, (finished) => {
-        if (finished) runOnJS(next)();
-      })
-    );
-  }
-
-  function onPressLike() {
-    if (busy) return;
-    setBusy(true);
-    playLikeAnimationAndThen(async () => {
-      await setReaction(item.id, 'like');
-      await addFavorite(item.id);
-      setIndex((i) => i + 1);
-      setTimeout(() => setLikeFilled(false), 220);
-      setBusy(false);
-    });
-  }
-
-  function onPressHate() {
-    if (busy) return;
-    setBusy(true);
-    playHateAnimationAndThen(async () => {
-      await setReaction(item.id, 'dislike');
-      setIndex((i) => i + 1);
-      setBusy(false);
-    });
-  }
-
  async function onSelectTheme(next: ThemeMode) {
    setThemeModeState(next);
    await setThemeMode(next);
@@ -144,40 +201,24 @@ export default function HomeScreen() {
  }

  return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <View style={styles.card}>
-        <Animated.Text style={styles.text}>{item.text}</Animated.Text>
-      </View>
+    <View style={[styles.container, { backgroundColor }]} {...panResponder.panHandlers}>
+      <Animated.View style={[styles.card, textAnimatedStyle]}>
+        <Text style={styles.text}>{item.text}</Text>
+      </Animated.View>

      <View style={styles.actions}>
-        <Animated.View style={[styles.reactionButton, hateAnimatedStyle]}>
-          <Pressable
-            onPress={onPressHate}
-            onPressIn={() => (hateScale.value = withTiming(0.92, { duration: 80 }))}
-            onPressOut={() => (hateScale.value = withTiming(1, { duration: 120 }))}
-            accessibilityRole="button"
-            accessibilityLabel={t('home.dislike')}
-            hitSlop={10}
-            style={styles.reactionInner}
-          >
-            <HateIcon width={30} height={30} />
-          </Pressable>
-        </Animated.View>
-
        <Animated.View style={[styles.reactionButton, likeAnimatedStyle]}>
          <Pressable
            onPress={onPressLike}
-            onPressIn={() => (likeScale.value = withTiming(0.92, { duration: 80 }))}
-            onPressOut={() => (likeScale.value = withTiming(1, { duration: 120 }))}
            accessibilityRole="button"
            accessibilityLabel={t('home.like')}
-            hitSlop={10}
+            hitSlop={20}
            style={styles.reactionInner}
          >
            {likeFilled ? (
-              <LikeFilledIcon width={30} height={30} />
+              <LikeFilledIcon width={35} height={36} />
            ) : (
-              <LikeOutlineIcon width={30} height={30} />
+              <LikeIcon width={35} height={36} />
            )}
          </Pressable>
        </Animated.View>
@@ -220,7 +261,7 @@ const styles = StyleSheet.create({
    flex: 1,
    padding: 20,
    justifyContent: 'center',
-    gap: 16,
+    alignItems: 'center',
  },
  headerRight: {
    flexDirection: 'row',
@@ -236,37 +277,31 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
  },
  card: {
-    borderRadius: 16,
-    padding: 20,
-    backgroundColor: 'rgba(255,255,255,0.65)',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#E5E7EB',
+    paddingHorizontal: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  text: {
-    fontSize: 20,
-    lineHeight: 28,
+    fontSize: 22,
+    lineHeight: 32,
    color: '#5E2A28',
    fontWeight: '700',
+    textAlign: 'center',
  },
  actions: {
+    position: 'absolute',
+    bottom: SCREEN_HEIGHT * 0.16,
+    left: 0,
+    right: 0,
    flexDirection: 'row',
-    gap: 12,
    justifyContent: 'center',
  },
  reactionButton: {
-    width: 58,
-    height: 58,
-    borderRadius: 29,
-    backgroundColor: 'rgba(255,255,255,0.75)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  reactionInner: {
-    width: 58,
-    height: 58,
-    borderRadius: 29,
    alignItems: 'center',
    justifyContent: 'center',
  },
 });
-
--- a/client/app/(onboarding)/onboarding.tsx
+++ b/client/app/(onboarding)/onboarding.tsx
@@ -1,66 +1,147 @@
 import { useState } from 'react';
 import { useRouter } from 'expo-router';
+import * as Notifications from 'expo-notifications';
 import { OnboardingLayout } from '@/components/onboarding/OnboardingLayout';
 import { NameInputStep } from '@/components/onboarding/NameInputStep';
-import { IntentSelectionStep } from '@/components/onboarding/IntentSelectionStep';
-import { setOnboardingCompleted, setUserProfile } from '@/src/storage/appStorage';
+import { SelectionStep } from '@/components/onboarding/SelectionStep';
+import { ReminderStep } from '@/components/onboarding/ReminderStep';
+import { setOnboardingCompleted, setUserProfile, setDailyReminderSettings } from '@/src/storage/appStorage';
+
+const STEPS = [
+  { id: 'name', type: 'name', title: '我可以怎么称呼你？' },
+  { 
+    id: 'status', 
+    type: 'selection', 
+    title: '媽媽的狀態？',
+    options: [
+      { id: 'pregnant', label: '懷孕中／準備成為媽媽' },
+      { id: 'has_kids', label: '已經有孩子' },
+      { id: 'no_fill', label: '不想填寫' },
+    ]
+  },
+  { 
+    id: 'emotion', 
+    type: 'selection', 
+    title: '當下情緒狀態？',
+    options: [
+      { id: 'happy', label: '愉悅、滿足' },
+      { id: 'calm', label: '平靜、安穩' },
+      { id: 'stressed', label: '被壓得有點喘不過氣' },
+      { id: 'low', label: '情緒低落' },
+    ]
+  },
+  { 
+    id: 'influence', 
+    type: 'selection', 
+    title: '是什麼影響了你最近的感受？',
+    options: [
+      { id: 'family', label: '家庭與孩子' },
+      { id: 'work', label: '工作或學習' },
+      { id: 'relationship', label: '親密關係' },
+      { id: 'friends', label: '朋友與人際' },
+      { id: 'health', label: '身心健康' },
+    ]
+  },
+  { 
+    id: 'support', 
+    type: 'selection', 
+    title: '最需要什麼支持?',
+    options: [
+      { id: 'emotional', label: '情緒支持' },
+      { id: 'parenting', label: '育兒壓力' },
+      { id: 'self_worth', label: '自我價值' },
+      { id: 'anxiety', label: '焦慮舒緩' },
+      { id: 'balance', label: '休息與平衡' },
+    ]
+  },
+  { id: 'reminder', type: 'reminder', title: '你需要每天几次提醒？' },
+];

 export default function OnboardingScreen() {
  const router = useRouter();
-  const [step, setStep] = useState(0);
+  const [stepIndex, setStepIndex] = useState(0);
  const [name, setName] = useState('');
-  const [intents, setIntents] = useState<string[]>([]);
+  const [selections, setSelections] = useState<Record<string, string[]>>({});
+  const [reminderTimes, setReminderTimes] = useState(3);
+
+  const currentStep = STEPS[stepIndex];

  async function onFinish() {
-    // Save whatever input we have
-    await setUserProfile({ name, intents });
+    // 请求推送权限
+    const { status } = await Notifications.requestPermissionsAsync();
+    const pushEnabled = status === 'granted';
+
+    await setUserProfile({ 
+      name, 
+      intents: Object.values(selections).flat() 
+    });
+    await setDailyReminderSettings({
+      timesPerDay: reminderTimes,
+      pushEnabled: pushEnabled
+    });
    await setOnboardingCompleted(true);
-    router.replace('/(onboarding)/push-prompt');
+    router.replace('/(app)/home');
  }

-  async function onNext() {
-    if (step === 0) {
-      setStep(1);
+  const onNext = () => {
+    if (stepIndex < STEPS.length - 1) {
+      setStepIndex(stepIndex + 1);
    } else {
-      await onFinish();
+      onFinish();
    }
-  }
+  };

-  async function onSkip() {
-    // Skip logic: move to next step regardless of input
-    if (step === 0) {
-      setStep(1);
-    } else {
-      await onFinish();
+  const onBack = () => {
+    if (stepIndex > 0) {
+      setStepIndex(stepIndex - 1);
    }
-  }
+  };

-  // Step 0: Next button requires input
-  // Step 1: Next button always enabled (can proceed with empty selection)
-  const nextEnabled = step === 0 ? name.trim().length > 0 : true;
+  const onSkip = () => {
+    router.replace('/(app)/home');
+  };
+
+  const handleToggleSelection = (id: string) => {
+    setSelections(prev => {
+      const currentIds = prev[currentStep.id] || [];
+      const nextIds = currentIds.includes(id)
+        ? currentIds.filter(i => i !== id)
+        : [...currentIds, id];
+      return { ...prev, [currentStep.id]: nextIds };
+    });
+  };

  return (
    <OnboardingLayout
+      title={currentStep.title}
+      currentStep={stepIndex}
+      totalSteps={STEPS.length - 1}
      onSkip={onSkip}
-      onNext={onNext}
-      nextEnabled={nextEnabled}
+      onBack={onBack}
+      showBackButton={stepIndex > 0}
    >
-      {step === 0 ? (
+      {currentStep.type === 'name' && (
        <NameInputStep
          value={name}
          onChangeText={setName}
-          onSubmitEditing={name.trim().length > 0 ? onNext : undefined}
+          onNext={onNext}
        />
-      ) : (
-        <IntentSelectionStep
-          selectedIds={intents}
-          onToggle={(id) => {
-            setIntents(prev =>
-              prev.includes(id)
-                ? prev.filter(i => i !== id)
-                : [...prev, id]
-            );
-          }}
+      )}
+
+      {currentStep.type === 'selection' && (
+        <SelectionStep
+          options={currentStep.options!}
+          selectedIds={selections[currentStep.id] || []}
+          onToggle={handleToggleSelection}
+          onNext={onNext}
+        />
+      )}
+
+      {currentStep.type === 'reminder' && (
+        <ReminderStep
+          value={reminderTimes}
+          onChange={setReminderTimes}
+          onFinish={onFinish}
        />
      )}
    </OnboardingLayout>
--- a/client/app/(splash)/splash.tsx
+++ b/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,
  },
 });
--- a/client/app/_layout.tsx
+++ b/client/app/_layout.tsx
@@ -3,12 +3,22 @@ import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
+import * as Notifications from 'expo-notifications';
 import { useEffect, useState } from 'react';
 import 'react-native-reanimated';

 import { useColorScheme } from '@/components/useColorScheme';
 import { initI18n } from '@/src/i18n';

+// 配置通知处理方式（即使不发送也建议配置，以确保权限接口正常）
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+
 export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
--- a/client/app/index.tsx
+++ b/client/app/index.tsx
@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useRouter } from 'expo-router';
+import AsyncStorage from '@react-native-async-storage/async-storage';

-import { getOnboardingCompleted, getConsentAccepted } from '@/src/storage/appStorage';
+import { getOnboardingCompleted, getConsentAccepted, setOnboardingCompleted, setConsentAccepted } from '@/src/storage/appStorage';

 /**
 * 启动分发：根据 consent 和 onboarding 状态跳转
@@ -13,8 +14,9 @@ export default function Index() {
  useEffect(() => {
    let cancelled = false;
    (async () => {
-      // 临时重置引导页状态（开发调试用）
-      await setOnboardingCompleted(false);
+      // 【完全重置】：清除本地存储的所有数据（收藏、设置、引导状态等）
+      await AsyncStorage.clear();
+      console.log('AsyncStorage has been cleared.');

      // 1. 检查是否同意协议
      const consentAccepted = await getConsentAccepted();
--- a/client/assets/images/home/Profile/Default_avatar.png
+++ b/client/assets/images/home/Profile/Default_avatar.png
--- a/client/assets/images/home/Profile/Default_avatar.svg
+++ b/client/assets/images/home/Profile/Default_avatar.svg
--- a/client/assets/images/home/Profile/widget/Widget1_en.png
+++ b/client/assets/images/home/Profile/widget/Widget1_en.png
--- a/client/assets/images/home/Profile/widget/Widget1_tw.png
+++ b/client/assets/images/home/Profile/widget/Widget1_tw.png
--- a/client/assets/images/home/Profile/widget/Widget2_en.png
+++ b/client/assets/images/home/Profile/widget/Widget2_en.png
--- a/client/assets/images/home/Profile/widget/Widget2_tw.png
+++ b/client/assets/images/home/Profile/widget/Widget2_tw.png
--- a/client/assets/images/home/Profile/widget/Widget_description1_en.png
+++ b/client/assets/images/home/Profile/widget/Widget_description1_en.png
--- a/client/assets/images/home/Profile/widget/Widget_description1_tw.png
+++ b/client/assets/images/home/Profile/widget/Widget_description1_tw.png
--- a/client/assets/images/home/Profile/widget/Widget_description2_en.png
+++ b/client/assets/images/home/Profile/widget/Widget_description2_en.png
--- a/client/assets/images/home/Profile/widget/Widget_description2_tw.png
+++ b/client/assets/images/home/Profile/widget/Widget_description2_tw.png
--- a/client/assets/images/home/Profile/widget/question_icon.svg
+++ b/client/assets/images/home/Profile/widget/question_icon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.52529 12.1958C8.05105 12.1958 7.62296 11.8613 7.62737 11.3871C7.63044 11.0573 7.68303 10.7472 7.78512 10.4569C7.98347 9.93995 8.27273 9.47781 8.65289 9.0705C9.04959 8.64752 9.47934 8.26371 9.94215 7.91906C10.4215 7.55875 10.876 7.20627 11.3058 6.86162C11.7355 6.51697 12.0909 6.16449 12.3719 5.80418C12.6529 5.4282 12.7934 5.02089 12.7934 4.58225C12.7934 4.03394 12.6529 3.5483 12.3719 3.12533C12.0909 2.70235 11.6777 2.37337 11.1322 2.13838C10.5868 1.88773 9.8843 1.7624 9.02479 1.7624C8.18182 1.7624 7.36364 1.94256 6.57025 2.30287C6.01404 2.54963 5.47478 2.89275 4.95246 3.33224C4.59297 3.63473 4.06302 3.65873 3.7099 3.34884C3.32525 3.01128 3.30306 2.41578 3.69475 2.08642C4.33235 1.55029 5.01812 1.10547 5.75207 0.751958C6.76033 0.250653 7.93388 0 9.27273 0C10.4463 0 11.4545 0.180157 12.2975 0.54047C13.157 0.900783 13.8182 1.40992 14.281 2.06789C14.7603 2.71018 15 3.48564 15 4.39426C15 4.98956 14.8595 5.51436 14.5785 5.96867C14.2975 6.42298 13.9339 6.83812 13.4876 7.2141C13.0579 7.59008 12.6033 7.95822 12.124 8.31854C11.6446 8.66318 11.1983 9.0235 10.7851 9.39948C10.3884 9.77546 10.0826 10.1906 9.86777 10.6449C9.81955 10.7554 9.78061 10.8695 9.75095 10.9874C9.59709 11.5988 9.15576 12.1958 8.52529 12.1958ZM8.77686 18C8.33058 18 7.95041 17.859 7.63636 17.577C7.32231 17.295 7.16529 16.9191 7.16529 16.4491C7.16529 15.9791 7.32231 15.6031 7.63636 15.3211C7.95041 15.0235 8.33058 14.8747 8.77686 14.8747C9.20661 14.8747 9.57851 15.0235 9.89256 15.3211C10.2066 15.6031 10.3636 15.9791 10.3636 16.4491C10.3636 16.9191 10.2066 17.295 9.89256 17.577C9.57851 17.859 9.20661 18 8.77686 18Z" fill="#404040"/>
+</svg>
--- a/client/assets/images/icon/Push_icon.svg
+++ b/client/assets/images/icon/Push_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22.7325C12.5691 22.7303 13.1259 22.5663 13.6053 22.2595C14.0847 21.9527 14.467 21.5159 14.7075 21H9.29246C9.53293 21.5159 9.91518 21.9527 10.3946 22.2595C10.874 22.5663 11.4308 22.7303 12 22.7325ZM21.75 16.7325C20.1075 14.835 19.8 12.9825 19.8 10.7325C19.7892 8.98974 19.1911 7.30149 18.1024 5.94058C17.0137 4.57967 15.4979 3.62559 13.8 3.23252C13.8039 3.16258 13.8039 3.09247 13.8 3.02252C13.8 2.52524 13.6024 2.04833 13.2508 1.6967C12.8992 1.34507 12.4222 1.14752 11.925 1.14752C11.4277 1.14752 10.9508 1.34507 10.5991 1.6967C10.2475 2.04833 10.05 2.52524 10.05 3.02252C10.046 3.09247 10.046 3.16258 10.05 3.23252C8.35205 3.62559 6.83626 4.57967 5.74753 5.94058C4.6588 7.30149 4.06073 8.98974 4.04996 10.7325C4.2115 12.9108 3.51125 15.0654 2.09996 16.7325C1.41746 17.6625 1.83746 19.5 3.31496 19.5H20.685C22.1625 19.5 22.59 17.6625 21.75 16.725V16.7325ZM15.75 13.5H13.5V15.75C13.5 16.1478 13.3419 16.5294 13.0606 16.8107C12.7793 17.092 12.3978 17.25 12 17.25C11.6021 17.25 11.2206 17.092 10.9393 16.8107C10.658 16.5294 10.5 16.1478 10.5 15.75V13.5H8.24996C7.85214 13.5 7.4706 13.342 7.1893 13.0607C6.908 12.7794 6.74996 12.3978 6.74996 12C6.74996 11.6022 6.908 11.2207 7.1893 10.9394C7.4706 10.6581 7.85214 10.5 8.24996 10.5H10.5V8.25002C10.5 7.8522 10.658 7.47067 10.9393 7.18936C11.2206 6.90806 11.6021 6.75002 12 6.75002C12.3978 6.75002 12.7793 6.90806 13.0606 7.18936C13.3419 7.47067 13.5 7.8522 13.5 8.25002V10.5H15.75C16.1478 10.5 16.5293 10.6581 16.8106 10.9394C17.0919 11.2207 17.25 11.6022 17.25 12C17.25 12.3978 17.0919 12.7794 16.8106 13.0607C16.5293 13.342 16.1478 13.5 15.75 13.5Z" fill="#F59250"/>
+</svg>
--- a/client/assets/images/icon/Terms_icon.svg
+++ b/client/assets/images/icon/Terms_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.535 7.5H15.4575C15.681 7.50404 15.8971 7.4196 16.0586 7.26508C16.2201 7.11056 16.3141 6.89847 16.32 6.675V4.9125C16.3102 4.35536 16.1907 3.80561 15.9682 3.29472C15.7457 2.78384 15.4246 2.32185 15.0234 1.93521C14.6221 1.54857 14.1485 1.24487 13.6297 1.0415C13.1109 0.838125 12.5571 0.73907 12 0.750004C10.8773 0.725863 9.79101 1.14831 8.9796 1.92456C8.1682 2.70081 7.69808 3.76738 7.6725 4.89V6.675C7.6784 6.89847 7.77235 7.11056 7.93389 7.26508C8.09544 7.4196 8.31149 7.50404 8.535 7.5ZM12 3C12.2967 3 12.5867 3.08798 12.8334 3.2528C13.08 3.41762 13.2723 3.65189 13.3858 3.92598C13.4994 4.20007 13.5291 4.50167 13.4712 4.79264C13.4133 5.08361 13.2704 5.35089 13.0607 5.56066C12.8509 5.77044 12.5836 5.9133 12.2926 5.97118C12.0017 6.02906 11.7001 5.99935 11.426 5.88582C11.1519 5.77229 10.9176 5.58003 10.7528 5.33336C10.588 5.08669 10.5 4.79668 10.5 4.5C10.5 4.10218 10.658 3.72065 10.9393 3.43934C11.2206 3.15804 11.6022 3 12 3ZM18.96 3.75H17.73C17.7929 4.08894 17.8255 4.43279 17.8275 4.7775V6.615C17.8295 6.92687 17.7699 7.23605 17.6521 7.52484C17.5344 7.81362 17.3608 8.07633 17.1413 8.2979C16.9218 8.51946 16.6608 8.69554 16.3731 8.81602C16.0855 8.9365 15.7769 8.99902 15.465 9H8.535C8.22313 8.99902 7.91453 8.9365 7.62687 8.81602C7.33921 8.69554 7.07816 8.51946 6.85869 8.2979C6.63921 8.07633 6.46562 7.81362 6.34787 7.52484C6.23012 7.23605 6.17052 6.92687 6.1725 6.615V4.7775C6.17451 4.43279 6.20713 4.08894 6.27 3.75H5.04C4.30065 3.75198 3.59216 4.04656 3.06936 4.56936C2.54656 5.09216 2.25198 5.80066 2.25 6.54V20.46C2.25198 21.1993 2.54656 21.9078 3.06936 22.4306C3.59216 22.9534 4.30065 23.248 5.04 23.25H18.96C19.6993 23.248 20.4078 22.9534 20.9306 22.4306C21.4534 21.9078 21.748 21.1993 21.75 20.46V6.54C21.748 5.80066 21.4534 5.09216 20.9306 4.56936C20.4078 4.04656 19.6993 3.75198 18.96 3.75ZM18.345 15.5775L16.095 19.3275C15.995 19.4947 15.8532 19.6331 15.6836 19.7291C15.514 19.8251 15.3224 19.8754 15.1275 19.875H14.9625C14.743 19.8416 14.5383 19.7441 14.3741 19.5946C14.21 19.4451 14.0937 19.2504 14.04 19.035L13.29 15.9825L11.6475 19.26C11.5538 19.4462 11.4102 19.6028 11.2328 19.7121C11.0553 19.8215 10.851 19.8794 10.6425 19.8794C10.434 19.8794 10.2297 19.8215 10.0522 19.7121C9.87476 19.6028 9.73118 19.4462 9.6375 19.26L8.25 16.5L7.8225 17.1375C7.6574 17.3861 7.4003 17.559 7.10774 17.6181C6.81518 17.6772 6.51114 17.6176 6.2625 17.4525C6.01386 17.2874 5.84099 17.0303 5.78191 16.7377C5.72284 16.4452 5.7824 16.1411 5.9475 15.8925L7.4475 13.6425C7.55672 13.4785 7.70712 13.346 7.88364 13.2583C8.06016 13.1707 8.2566 13.131 8.45331 13.1431C8.65001 13.1553 8.84008 13.2189 9.00446 13.3276C9.16885 13.4363 9.3018 13.5863 9.39 13.7625L10.635 16.2525L12.63 12.2625C12.7326 12.0561 12.8961 11.8862 13.0984 11.7757C13.3008 11.6653 13.5321 11.6197 13.7612 11.645C13.9903 11.6704 14.2061 11.7655 14.3794 11.9175C14.5527 12.0696 14.675 12.2711 14.73 12.495L15.57 15.8625L16.425 14.4375C16.5857 14.198 16.8322 14.0294 17.1137 13.9664C17.3952 13.9035 17.6901 13.9511 17.9375 14.0993C18.1849 14.2476 18.3659 14.4852 18.4431 14.763C18.5203 15.0409 18.4879 15.3379 18.3525 15.5925L18.345 15.5775Z" fill="#88D081"/>
+</svg>
--- a/client/assets/images/icon/add_icon.svg
+++ b/client/assets/images/icon/add_icon.svg
@@ -0,0 +1,4 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="23.5" cy="23.5" r="23.5" fill="#F5D3B5"/>
+<path d="M23.5 14.1562C23.9799 14.1563 24.3689 14.5455 24.3691 15.0254V22.6309H31.9746C32.4544 22.6311 32.8437 23.0202 32.8438 23.5C32.8438 23.9799 32.4545 24.3689 31.9746 24.3691H24.3691V31.9746C24.3689 32.4545 23.9799 32.8438 23.5 32.8438C23.0201 32.8437 22.6311 32.4544 22.6309 31.9746V24.3691H15.0254C14.5455 24.3689 14.1562 23.9799 14.1562 23.5C14.1563 23.0202 14.5456 22.6311 15.0254 22.6309H22.6309V15.0254C22.6311 14.5456 23.0201 14.1563 23.5 14.1562Z" fill="#8F521B"/>
+</svg>
--- a/client/assets/images/icon/back_icon.png
+++ b/client/assets/images/icon/back_icon.png
--- a/client/assets/images/icon/btn_Notclicked.svg
+++ b/client/assets/images/icon/btn_Notclicked.svg
@@ -0,0 +1,5 @@
+<svg width="87" height="57" viewBox="0 0 87 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28.5C0 12.7599 12.7599 0 28.5 0H58.5C74.2401 0 87 12.7599 87 28.5C87 44.2401 74.2401 57 58.5 57H28.5C12.7599 57 0 44.2401 0 28.5Z" fill="#F2DDCA"/>
+<path d="M32 29L54 29" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M49 22L55.2929 28.2929C55.6834 28.6834 55.6834 29.3166 55.2929 29.7071L49 36" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/client/assets/images/icon/btn_clicked.svg
+++ b/client/assets/images/icon/btn_clicked.svg
@@ -0,0 +1,11 @@
+<svg width="87" height="57" viewBox="0 0 87 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28.5C0 12.7599 12.7599 0 28.5 0H58.5C74.2401 0 87 12.7599 87 28.5C87 44.2401 74.2401 57 58.5 57H28.5C12.7599 57 0 44.2401 0 28.5Z" fill="url(#paint0_linear_32_2902)"/>
+<path d="M32 29L54 29" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<path d="M49 22L55.2929 28.2929C55.6834 28.6834 55.6834 29.3166 55.2929 29.7071L49 36" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<linearGradient id="paint0_linear_32_2902" x1="0" y1="28.5" x2="87" y2="28.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F69F7B"/>
+<stop offset="1" stop-color="#F99CC0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/client/assets/images/icon/enter_Light_icon.svg
+++ b/client/assets/images/icon/enter_Light_icon.svg
@@ -0,0 +1,3 @@
+<svg width="3" height="27" viewBox="0 0 3 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 1.5L1.5 25.5" stroke="#F89DB4" stroke-width="3" stroke-linecap="round"/>
+</svg>
--- a/client/assets/images/icon/language_icon.svg
+++ b/client/assets/images/icon/language_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.49467 13.5033C8.78067 16.7229 9.77067 19.726 11.428 21.4441L11.9707 22L12.5133 21.4441C14.2073 19.7044 15.19 16.7013 15.4467 13.5033C14.3027 13.5827 13.122 13.626 11.9413 13.626C10.7607 13.626 9.63867 13.5899 8.49467 13.5033ZM15.5933 10.9694C15.5053 7.22276 14.486 3.5483 12.5427 1.58474L12 1L11.4573 1.55586C9.514 3.55552 8.524 7.22276 8.40667 10.9405C10.7955 11.1313 13.1957 11.141 15.586 10.9694H15.5933ZM22.4427 9.52561L22.7873 9.35957C22.4041 7.50584 21.5342 5.78328 20.2643 4.36346C18.9944 2.94363 17.3687 1.87607 15.5493 1.2671C17.1553 3.72155 18.0133 7.16501 18.1307 10.6518C19.614 10.4828 21.0657 10.1086 22.4427 9.54005V9.52561ZM18.0867 13.2362C17.9566 16.2416 17.0777 19.1695 15.5273 21.7618C17.6163 21.0689 19.4457 19.7741 20.7781 18.0454C22.1106 16.3167 22.8847 14.2337 23 12.0667C21.415 12.6465 19.7657 13.0391 18.0867 13.2362ZM1 12.0667C1.11534 14.2337 1.88942 16.3167 3.22187 18.0454C4.55432 19.7741 6.38366 21.0689 8.47267 21.7618C6.92232 19.1695 6.0434 16.2416 5.91333 13.2362C4.23432 13.0391 2.58501 12.6465 1 12.0667ZM5.84 10.6879C5.97933 7.17944 6.86667 3.72877 8.45067 1.2671C6.6331 1.87484 5.00872 2.94021 3.73896 4.35734C2.46919 5.77447 1.59825 7.49403 1.21267 9.34513L1.55733 9.51117C2.93096 10.102 4.38274 10.4982 5.86933 10.6879H5.84Z" fill="#EEB054"/>
+</svg>
--- a/client/assets/images/icon/like_icon.svg
+++ b/client/assets/images/icon/like_icon.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.0879 6C26.9887 6 28.7592 6.93575 30.0762 8.42188C31.3956 9.91097 32.2001 11.89 32.2002 13.8408C32.2002 18.2337 29.1054 22.3696 25.5225 25.499C23.7556 27.0422 21.9254 28.2909 20.4199 29.1494C19.6667 29.5789 19.0062 29.904 18.4863 30.1182C18.2262 30.2253 18.0121 30.3001 17.8467 30.3467C17.6728 30.3956 17.5993 30.4002 17.5996 30.4004C17.5928 30.3997 17.5178 30.3932 17.3525 30.3467C17.1871 30.3001 16.973 30.2253 16.7129 30.1182C16.193 29.904 15.5333 29.5788 14.7803 29.1494C13.2748 28.2909 11.4447 27.0423 9.67773 25.499C6.0947 22.3696 3 18.2338 3 13.8408C3.00008 11.8901 3.80381 9.91108 5.12207 8.42188C6.43787 6.93557 8.20587 6.00033 10.1006 6C11.5129 6.00117 12.8927 6.41742 14.0635 7.19434C14.7589 7.65582 15.3618 8.2322 15.8486 8.89355C16.2951 9.50017 17.0032 9.73135 17.5996 9.73145C18.1961 9.73144 18.905 9.5003 19.3516 8.89355C19.8376 8.23336 20.4389 7.65737 21.1328 7.19629C22.3012 6.4199 23.6779 6.00339 25.0879 6Z" stroke="#5E2A28" stroke-width="2"/>
+</svg>
--- a/client/assets/images/icon/mylike_icon.svg
+++ b/client/assets/images/icon/mylike_icon.svg
@@ -0,0 +1,3 @@
+<svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.38 0C25.4752 0.00420958 23.6144 0.597538 22.0335 1.70479C21.0003 2.42849 20.117 3.35044 19.4272 4.41503C19.0322 5.02468 17.9678 5.02469 17.5728 4.41504C16.8819 3.34867 15.9968 2.42544 14.9614 1.70122C13.3781 0.593805 11.5146 0.00166536 9.60767 0C4.30433 0 0 5.51285 0 11.0514C0 23.1565 16.0333 33 18.5 33C20.9667 33 37 23.1565 37 11.0514C37 5.51285 32.6957 0 27.38 0Z" fill="#FE3C3C" fill-opacity="0.76"/>
+</svg>
--- a/client/assets/images/icon/next_icon.svg
+++ b/client/assets/images/icon/next_icon.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L4.29289 4.29289C4.68342 4.68342 4.68342 5.31658 4.29289 5.70711L1 9" stroke="#C7B4A1" stroke-width="2" stroke-linecap="round"/>
+</svg>
--- a/client/assets/images/icon/privacy_icon.svg
+++ b/client/assets/images/icon/privacy_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.48 5.6925L21.27 4.035L12 0.75L2.73003 4.035L2.52003 5.685C2.44503 6.24 0.915026 19.2525 11.0775 22.935L12 23.25L12.915 22.92C23.0475 19.275 21.555 6.2475 21.48 5.6925ZM17.85 9.1425L12.8925 17.0925L12.825 17.1975C12.5406 17.6509 12.0883 17.9733 11.5669 18.0941C11.0455 18.215 10.4974 18.1245 10.0425 17.8425C9.83101 17.7097 9.64547 17.5394 9.49503 17.34L6.29253 13.0725C6.01107 12.791 5.85294 12.4093 5.85294 12.0112C5.85294 11.6132 6.01107 11.2315 6.29253 10.95C6.57399 10.6685 6.95573 10.5104 7.35378 10.5104C7.75182 10.5104 8.13357 10.6685 8.41503 10.95L10.7625 12.75L15.45 7.3875C15.6936 7.0877 16.0435 6.89345 16.4268 6.84521C16.8101 6.79696 17.1972 6.89845 17.5075 7.12853C17.8178 7.3586 18.0274 7.69953 18.0926 8.08029C18.1578 8.46105 18.0736 8.85228 17.8575 9.1725L17.85 9.1425Z" fill="#879CE7"/>
+</svg>
--- a/client/assets/images/icon/reduce_icon.svg
+++ b/client/assets/images/icon/reduce_icon.svg
@@ -0,0 +1,4 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="23.5" cy="23.5" r="23.5" fill="#F5D3B5"/>
+<path d="M31.9746 22.6309C32.4544 22.6311 32.8437 23.0202 32.8438 23.5C32.8438 23.9799 32.4545 24.3689 31.9746 24.3691H15.0254C14.5455 24.3689 14.1562 23.9799 14.1562 23.5C14.1563 23.0202 14.5456 22.6311 15.0254 22.6309H31.9746Z" fill="#8F521B"/>
+</svg>
--- a/client/assets/images/icon/selected_icon.svg
+++ b/client/assets/images/icon/selected_icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.34273 11.3513C8.03868 11.81 7.74043 12.2721 7.4301 12.7472C7.33503 12.6924 7.25878 12.6515 7.1859 12.6053C6.46053 12.148 5.7395 11.684 5.00979 11.2335C4.19176 10.7281 3.36408 10.2386 2.42298 9.9833C1.52725 9.74047 0.938938 9.90444 0.473698 10.5824C0.296096 10.8411 0.157103 11.1426 0.0721628 11.4446C-0.0759998 11.9701 -0.00843386 12.4745 0.391171 12.8943C2.3197 14.9191 4.2656 16.9271 6.37607 18.7687L6.41256 18.8006C6.69623 19.0482 6.98003 19.296 7.2776 19.526C7.88183 19.9939 8.57921 20.0718 9.30747 19.9468C9.84414 19.8545 10.3417 19.6592 10.7481 19.2799C11.2181 18.8408 11.5632 18.323 11.7915 17.7186C12.1829 16.6809 12.5477 15.6298 13.0072 14.622C14.4999 11.3489 16.2624 8.22294 18.2995 5.25424C21.1869 1.88662 20.2691 -2.14591 16.5163 1.34116C13.3774 4.3416 10.7346 7.74499 8.34273 11.3513Z" fill="#20BD40"/>
+</svg>
--- a/client/assets/images/icon/skip_icon.png
+++ b/client/assets/images/icon/skip_icon.png
--- a/client/assets/images/icon/weight_icon.svg
+++ b/client/assets/images/icon/weight_icon.svg
@@ -0,0 +1,6 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.28564 2.592C3.28564 1.16048 4.44612 0 5.87764 0H16.5581C17.9896 0 19.1501 1.16048 19.1501 2.592V13.2725C19.1501 14.704 17.9896 15.8645 16.5581 15.8645H5.87764C4.44612 15.8645 3.28564 14.704 3.28564 13.2725V2.592Z" fill="#A360F5"/>
+<path d="M22.811 2.592C22.811 1.16048 23.9715 0 25.403 0H36.0835C37.515 0 38.6755 1.16048 38.6755 2.592V13.2725C38.6755 14.704 37.515 15.8645 36.0835 15.8645H25.403C23.9715 15.8645 22.811 14.704 22.811 13.2725V2.592Z" fill="#FB84D3"/>
+<path d="M1.83282 29.2908C0.820581 28.2786 0.820582 26.6374 1.83282 25.6252L9.38505 18.073C10.3973 17.0607 12.0385 17.0607 13.0507 18.073L20.6029 25.6252C21.6152 26.6374 21.6152 28.2786 20.6029 29.2908L13.0507 36.8431C12.0384 37.8553 10.3973 37.8553 9.38505 36.8431L1.83282 29.2908Z" fill="#FB84D3"/>
+<path d="M22.811 22.1182C22.811 20.6867 23.9715 19.5262 25.403 19.5262H36.0835C37.515 19.5262 38.6755 20.6867 38.6755 22.1182V32.7986C38.6755 34.2302 37.515 35.3906 36.0835 35.3906H25.403C23.9715 35.3906 22.811 34.2302 22.811 32.7986V22.1182Z" fill="#FCB473"/>
+</svg>
--- a/client/assets/images/theme/theme_color.png
+++ b/client/assets/images/theme/theme_color.png
--- a/client/assets/images/theme/theme_landscape.png
+++ b/client/assets/images/theme/theme_landscape.png
--- a/client/babel.config.js
+++ b/client/babel.config.js
@@ -1,9 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-    plugins: [
-      ['@babel/plugin-transform-react-jsx', { runtime: 'automatic' }]
-    ]
-  };
-};
--- a/client/components/home/ProfileModal.tsx
+++ b/client/components/home/ProfileModal.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useMemo, useState, useRef, useCallback } from 'react';
+import { Alert, FlatList, Image, Pressable, StyleSheet, Text, View, Platform, Dimensions } from 'react-native';
 import { useTranslation } from 'react-i18next';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Switch } from 'react-native';
@@ -11,6 +11,7 @@ import Animated, {
  SlideInRight,
  SlideOutLeft,
  SlideOutRight,
+  Layout,
 } from 'react-native-reanimated';

 import SheetModal from '@/components/ui/SheetModal';
@@ -20,16 +21,25 @@ import {
  getDailyReminderSettings,
  getFavorites,
  setDailyReminderSettings,
+  removeFavorite,
+  getUserProfile,
  type DailyReminderSettings,
+  type FavoriteItem,
 } from '@/src/storage/appStorage';

-import AvatarIcon from '@/assets/images/home/Profile/Default_avatar.png';
-import MyLikeIcon from '@/assets/images/home/Profile/mylike.svg';
-import SmallComponentIcon from '@/assets/images/home/Profile/small_component.svg';
-import RemindIcon from '@/assets/images/home/Profile/remind.svg';
-import PrivacyIcon from '@/assets/images/home/Profile/privacy Policy.svg';
-import TermsIcon from '@/assets/images/home/Profile/terms_of_use.svg';
-import LanguageIcon from '@/assets/images/home/Profile/language.svg';
+import AvatarIcon from '@/assets/images/home/Profile/Default_avatar.svg';
+import MyLikeIcon from '@/assets/images/icon/mylike_icon.svg';
+import SmallComponentIcon from '@/assets/images/icon/weight_icon.svg';
+import RemindIcon from '@/assets/images/icon/Push_icon.svg';
+import PrivacyIcon from '@/assets/images/icon/privacy_icon.svg';
+import TermsIcon from '@/assets/images/icon/Terms_icon.svg';
+import LanguageIcon from '@/assets/images/icon/language_icon.svg';
+import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
+import QuestionIcon from '@/assets/images/home/Profile/widget/question_icon.svg';
+import * as Notifications from 'expo-notifications';
+import { changeLanguage } from '@/src/i18n';
+
+const { width } = Dimensions.get('window');

 type Props = {
  visible: boolean;
@@ -37,24 +47,38 @@ type Props = {
  onClose: () => void;
 };

-type Page = 'root' | 'favorites' | 'dailyReminder' | 'widget';
+type Page = 'root' | 'favorites' | 'dailyReminder' | 'widget' | 'language' | 'widgetHowTo';
 type NavDirection = 'forward' | 'back';

-export default function ProfileModal({ visible, name, onClose }: Props) {
+export default function ProfileModal({ visible, name: propName, onClose }: Props) {
  const { t } = useTranslation();

  const [page, setPage] = useState<Page>('root');
  const [navDirection, setNavDirection] = useState<NavDirection>('forward');
+  const [currentName, setCurrentName] = useState(propName);
  const isRoot = page === 'root';

-  // 关闭弹窗时重置为首页，避免下次打开停留在二级页
+  // 当弹窗打开时，尝试从存储中获取最新的昵称，确保与 onboarding 同步
  useEffect(() => {
-    if (!visible) {
+    if (visible) {
+      getUserProfile().then(profile => {
+        if (profile.name) {
+          setCurrentName(profile.name);
+        }
+      });
+    } else {
      setNavDirection('back');
      setPage('root');
    }
  }, [visible]);

+  // 同步外部 propName 的变化
+  useEffect(() => {
+    if (propName) {
+      setCurrentName(propName);
+    }
+  }, [propName]);
+
  function go(next: Page, direction: NavDirection) {
    setNavDirection(direction);
    setPage(next);
@@ -79,6 +103,8 @@ export default function ProfileModal({ visible, name, onClose }: Props) {
    if (page === 'favorites') return t('profile.favorites');
    if (page === 'dailyReminder') return t('dailyReminder.title');
    if (page === 'widget') return t('profile.widget');
+    if (page === 'language') return t('profile.language');
+    if (page === 'widgetHowTo') return t('widget.howToTitle');
    return t('profile.title');
  }, [page, t]);

@@ -107,42 +133,46 @@ export default function ProfileModal({ visible, name, onClose }: Props) {
  }, [navDirection]);

  return (
-    <SheetModal visible={visible} title={title} onClose={handleSheetClose}>
-      {!isRoot && (
-        <Pressable
-          onPress={() => go('root', 'back')}
-          hitSlop={8}
-          accessibilityRole="button"
-          accessibilityLabel={t('common.back')}
-          style={styles.backRow}
+    <SheetModal 
+      visible={visible} 
+      title={title} 
+      onClose={handleSheetClose}
+      leftIcon={!isRoot ? require('@/assets/images/icon/back_icon.png') : undefined}
+    >
+      <View style={[styles.pageWrap, !isRoot && { flex: 1 }]}>
+        <Animated.View 
+          key={page}
+          entering={transition.entering}
+          exiting={transition.exiting}
+          style={!isRoot ? { flex: 1 } : undefined}
        >
-          <Text style={styles.backText}>‹ {t('common.back')}</Text>
-        </Pressable>
-      )}
-
-      <Animated.View
-        key={page}
-        entering={transition.entering}
-        exiting={transition.exiting}
-        style={styles.pageWrap}
-      >
-        <Animated.View entering={transition.fadeIn} exiting={transition.fadeOut}>
+          <Animated.View 
+            entering={transition.fadeIn} 
+            exiting={transition.fadeOut}
+            style={!isRoot ? { flex: 1 } : undefined}
+          >
          {page === 'root' ? (
            <RootPage
-              name={name}
+              name={currentName}
              onOpenFavorites={() => go('favorites', 'forward')}
              onOpenWidget={() => go('widget', 'forward')}
              onOpenDailyReminder={() => go('dailyReminder', 'forward')}
+              onOpenLanguage={() => go('language', 'forward')}
            />
          ) : page === 'favorites' ? (
-            <FavoritesPage visible={visible} />
+            <FavoritesPage visible={visible} page={page} />
          ) : page === 'dailyReminder' ? (
            <DailyReminderPage visible={visible} onDone={() => go('root', 'back')} />
+          ) : page === 'language' ? (
+            <LanguagePage />
+          ) : page === 'widgetHowTo' ? (
+            <WidgetHowToPage />
          ) : (
-            <WidgetPage />
+            <WidgetPage onOpenHowTo={() => go('widgetHowTo', 'forward')} />
          )}
+          </Animated.View>
        </Animated.View>
-      </Animated.View>
+      </View>
    </SheetModal>
  );
 }
@@ -156,17 +186,19 @@ function RootPage({
  onOpenFavorites,
  onOpenWidget,
  onOpenDailyReminder,
+  onOpenLanguage,
 }: {
  name?: string;
  onOpenFavorites: () => void;
  onOpenWidget: () => void;
  onOpenDailyReminder: () => void;
+  onOpenLanguage: () => void;
 }) {
  const { t } = useTranslation();
  return (
    <>
      <View style={styles.header}>
-        <Image source={AvatarIcon} style={styles.avatarImage} resizeMode="contain" />
+        <AvatarIcon width={234} height={183} />
        <Text style={styles.name}>{name || 'Hali'}</Text>
      </View>

@@ -198,48 +230,79 @@ function RootPage({
        <ListItem
          icon={<LanguageIcon width={22} height={22} />}
          title={t('profile.language')}
-          onPress={() => toastTodo(t)}
+          onPress={onOpenLanguage}
        />
      </View>
    </>
  );
 }

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

-  // 每次进入该页刷新一次，确保展示最新“喜欢”
  useEffect(() => {
    if (!visible) return;
-    let cancelled = false;
-    (async () => {
-      const list = await getFavorites();
-      if (!cancelled) setIds(list);
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [visible]);
+    refreshFavorites();
+  }, [visible, page]); // 当页面切换回 favorites 时也刷新一次

-  const items = useMemo(() => {
-    const map = new Map(MOCK_CONTENT.map((c) => [c.id, c]));
-    return ids.map((id) => map.get(id)).filter(Boolean) as { id: string; text: string }[];
-  }, [ids]);
+  async function refreshFavorites() {
+    const storedFavs = await getFavorites();
+    const map = new Map(MOCK_CONTENT.map((c) => [c.id, c.text]));
+    
+    const list = storedFavs
+      .map((fav) => ({
+        ...fav,
+        text: map.get(fav.id) || ''
+      }))
+      .filter(item => item.text !== '');
+      
+    setFavorites(list);
+  }
+
+  async function handleRemove(id: string) {
+    // 1. 调用存储层移除收藏
+    await removeFavorite(id);
+    // 2. 更新本地状态
+    setFavorites(prev => prev.filter(item => item.id !== id));
+  }

  return (
    <View style={styles.favContainer}>
-      {items.length === 0 ? (
+      {favorites.length === 0 ? (
        <Text style={styles.favEmpty}>{t('favorites.empty')}</Text>
      ) : (
        <FlatList
-          data={items}
+          data={favorites}
          keyExtractor={(it) => it.id}
          contentContainerStyle={styles.favList}
+          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
-            <View style={styles.favRow}>
-              <Text style={styles.favText}>{item.text}</Text>
-            </View>
+            <Animated.View 
+              entering={FadeIn.duration(300)}
+              exiting={FadeOut.duration(200)}
+              layout={Layout.duration(300).easing(Easing.out(Easing.quad))}
+              style={styles.favCard}
+            >
+              <View style={styles.favLeft}>
+                <Text style={styles.favDate}>{item.date}</Text>
+              </View>
+              <View style={styles.favRight}>
+                <View style={[
+                  styles.favThumb, 
+                  { backgroundColor: item.background } // 动态同步 Home 页的背景
+                ]}>
+                  <Text style={styles.favThumbText} numberOfLines={4}>{item.text}</Text>
+                  <Pressable 
+                    onPress={() => handleRemove(item.id)} 
+                    style={styles.favRemoveBtn}
+                    hitSlop={10}
+                  >
+                    <MyLikeIcon width={37 * 0.7} height={33 * 0.7} />
+                  </Pressable>
+                </View>
+              </View>
+            </Animated.View>
          )}
        />
      )}
@@ -252,16 +315,23 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
  const [loading, setLoading] = useState(false);
  const [timesPerDay, setTimesPerDay] = useState(3);
  const [pushEnabled, setPushEnabled] = useState(false);
+  const [hasSystemPermission, setHasSystemPermission] = useState<boolean | null>(null);

  useEffect(() => {
    let cancelled = false;
    if (!visible) return;
    setLoading(true);
    (async () => {
+      // 1. 获取本地存储设置
      const s = await getDailyReminderSettings();
+      
+      // 【测试模式】：强制模拟无权限状态
+      const granted = false; 
+      
      if (cancelled) return;
      setTimesPerDay(s.timesPerDay);
-      setPushEnabled(s.pushEnabled);
+      setPushEnabled(granted); 
+      setHasSystemPermission(granted);
      setLoading(false);
    })();
    return () => {
@@ -269,6 +339,40 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
    };
  }, [visible]);

+  const handleTogglePush = async (value: boolean) => {
+    if (value) {
+      // 获取当前权限状态
+      const settings = await Notifications.getPermissionsAsync();
+      
+      // 如果已经拒绝，弹窗提示
+      if (settings.status === 'denied') {
+        Alert.alert(
+          t('common.notice'), 
+          "系统权限已被拒绝，请前往手机设置开启通知。"
+        );
+        setPushEnabled(false);
+        return;
+      }
+
+      // 尝试申请权限
+      const { status } = await Notifications.requestPermissionsAsync();
+      
+      // 调试：打印状态
+      console.log('Push Permission Status:', status);
+
+      if (status === 'granted') {
+        setPushEnabled(true);
+        setHasSystemPermission(true);
+      } else {
+        setPushEnabled(false);
+        setHasSystemPermission(false);
+        Alert.alert(t('common.notice'), t('dailyReminder.permissionDenied'));
+      }
+    } else {
+      setPushEnabled(false);
+    }
+  };
+
  function clamp(next: number) {
    return Math.min(10, Math.max(1, next));
  }
@@ -311,15 +415,24 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
        </Pressable>
      </View>

-      <View style={styles.remindRow}>
-        <View style={styles.rowLeft}>
-          <View style={styles.rowIcon}>
-            <RemindIcon width={18} height={18} />
+      {!hasSystemPermission && (
+        <View style={styles.remindRow}>
+          <View style={styles.rowLeft}>
+            <View style={styles.rowIcon}>
+              <RemindIcon width={18} height={18} />
+            </View>
+            <Text style={styles.rowText}>{t('dailyReminder.pushLabel')}</Text>
+          </View>
+          <View style={styles.rowRight}>
+            <Switch 
+              value={pushEnabled} 
+              onValueChange={handleTogglePush}
+              trackColor={{ false: '#D1D1D6', true: '#4CD964' }}
+              ios_backgroundColor="#D1D1D6"
+            />
          </View>
-          <Text style={styles.rowText}>{t('dailyReminder.pushLabel')}</Text>
        </View>
-        <Switch value={pushEnabled} onValueChange={setPushEnabled} />
-      </View>
+      )}

      <Pressable onPress={onOk} disabled={loading} style={styles.okPressable}>
        <LinearGradient
@@ -335,34 +448,150 @@ function DailyReminderPage({ visible, onDone }: { visible: boolean; onDone: () =
  );
 }

-function WidgetPage() {
-  const { t } = useTranslation();
+function WidgetPage({ onOpenHowTo }: { onOpenHowTo: () => void }) {
+  const { t, i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  // 根据语言选择图片
+  const widget1 = currentLang === 'en' 
+    ? require('@/assets/images/home/Profile/widget/Widget1_en.png')
+    : require('@/assets/images/home/Profile/widget/Widget1_tw.png');
+    
+  const widget2 = currentLang === 'en'
+    ? require('@/assets/images/home/Profile/widget/Widget2_en.png')
+    : require('@/assets/images/home/Profile/widget/Widget2_tw.png');
+
  return (
    <View style={styles.widgetContent}>
-      <View style={styles.widgetRow}>
-        <View style={styles.widgetCard}>
-          <View style={[styles.widgetPreviewInner, styles.widgetPreviewLock]}>
-            <Text style={styles.widgetPreviewDate} numberOfLines={1}>
-              {t('widget.previewDate')}
-            </Text>
-            <Text style={styles.widgetPreviewTime} numberOfLines={1}>
-              13:45
-            </Text>
-          </View>
-          <Text style={styles.widgetCardLabel}>{t('widget.lockScreen')}</Text>
-        </View>
+      <Pressable style={styles.questionBtn} onPress={onOpenHowTo}>
+        <QuestionIcon width={19} height={19} />
+      </Pressable>

-        <View style={styles.widgetCard}>
-          <View style={[styles.widgetPreviewInner, styles.widgetPreviewHome]}>
-            <Text style={styles.widgetPreviewQuote} numberOfLines={3}>
-              {t('widget.previewQuote')}
-            </Text>
-          </View>
-          <Text style={styles.widgetCardLabel}>{t('widget.homeScreen')}</Text>
-        </View>
+      <View style={styles.widgetScroll}>
+        <Pressable style={styles.widgetItem} onPress={onOpenHowTo}>
+          <Image source={widget1} style={styles.widgetImg1} resizeMode="contain" />
+          <Text style={styles.widgetLabel}>{t('widget.lockScreen')}</Text>
+        </Pressable>
+
+        <Pressable style={styles.widgetItem} onPress={onOpenHowTo}>
+          <Image source={widget2} style={styles.widgetImg2} resizeMode="contain" />
+          <Text style={styles.widgetLabel}>{t('widget.homeScreen')}</Text>
+        </Pressable>
      </View>
+    </View>
+  );
+}

-      <Text style={styles.widgetDesc}>{t('settings.widgetDesc')}</Text>
+function WidgetHowToPage() {
+  const { t, i18n } = useTranslation();
+  const currentLang = i18n.language;
+  const flatListRef = useRef<FlatList>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isManual, setIsManual] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const images = currentLang === 'en' ? [
+    { id: '1', src: require('@/assets/images/home/Profile/widget/Widget_description1_en.png'), desc: t('widget.howToDesc1') },
+    { id: '2', src: require('@/assets/images/home/Profile/widget/Widget_description2_en.png'), desc: t('widget.howToDesc2') },
+  ] : [
+    { id: '1', src: require('@/assets/images/home/Profile/widget/Widget_description1_tw.png'), desc: t('widget.howToDesc1') },
+    { id: '2', src: require('@/assets/images/home/Profile/widget/Widget_description2_tw.png'), desc: t('widget.howToDesc2') },
+  ];
+
+  const startAutoPlay = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(() => {
+      if (!isManual) {
+        const nextIndex = (activeIndex + 1) % images.length;
+        flatListRef.current?.scrollToIndex({ index: nextIndex, animated: true });
+        setActiveIndex(nextIndex);
+      }
+    }, 3000);
+  }, [activeIndex, isManual, images.length]);
+
+  useEffect(() => {
+    startAutoPlay();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [startAutoPlay]);
+
+  const onScroll = (event: any) => {
+    const x = event.nativeEvent.contentOffset.x;
+    const index = Math.round(x / (width - 32));
+    if (index !== activeIndex) {
+      setActiveIndex(index);
+    }
+  };
+
+  const onScrollBeginDrag = () => {
+    setIsManual(true);
+    if (timerRef.current) clearInterval(timerRef.current);
+  };
+
+  return (
+    <View style={styles.howToPage}>
+      <FlatList
+        ref={flatListRef}
+        data={images}
+        keyExtractor={(item) => item.id}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onScroll={onScroll}
+        onScrollBeginDrag={onScrollBeginDrag}
+        scrollEventThrottle={16}
+        renderItem={({ item }) => (
+          <View style={styles.howToSlide}>
+            <Image source={item.src} style={styles.howToImg} resizeMode="contain" />
+            <Text style={styles.howToDesc}>{item.desc}</Text>
+          </View>
+        )}
+      />
+      
+      <View style={styles.pagination}>
+        {images.map((_, i) => (
+          <View
+            key={i}
+            style={[
+              styles.dot,
+              i === activeIndex ? styles.dotActive : styles.dotInactive
+            ]}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+function LanguagePage() {
+  const { i18n } = useTranslation();
+  const currentLang = i18n.language;
+
+  const languages = [
+    { id: 'zh-TW', label: '繁体' },
+    { id: 'en', label: 'English' },
+  ];
+
+  return (
+    <View style={styles.langPage}>
+      <View style={styles.langList}>
+        {languages.map((lang, index) => (
+          <Pressable
+            key={lang.id}
+            style={[
+              styles.langItem,
+              index < languages.length - 1 && styles.langItemBorder
+            ]}
+            onPress={() => changeLanguage(lang.id as any)}
+          >
+            <Text style={styles.langText}>{lang.label}</Text>
+            {currentLang === lang.id && (
+              <SelectedIcon width={20} height={20} />
+            )}
+          </Pressable>
+        ))}
+      </View>
    </View>
  );
 }
@@ -442,26 +671,31 @@ const styles = StyleSheet.create({
  },
  quickCard: {
    flex: 1,
-    borderRadius: 16,
+    borderRadius: 20,
    padding: 14,
    backgroundColor: 'rgba(244,214,194,0.65)',
+    height: 142,
+    justifyContent: 'space-between',
  },
  quickTitle: {
-    color: '#5E2A28',
-    fontSize: 14,
-    fontWeight: '700',
-    marginBottom: 10,
+    color: '#482A0D',
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  quickIconWrap: { 
+    alignItems: 'flex-end', 
+    justifyContent: 'flex-end', 
+    flex: 1 
  },
-  quickIconWrap: { alignItems: 'center', justifyContent: 'center', flex: 1 },
  list: {
-    borderRadius: 16,
+    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.75)',
    overflow: 'hidden',
    marginBottom: 8,
  },
  item: {
    height: 52,
-    paddingHorizontal: 14,
+    paddingHorizontal: 18,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
@@ -471,55 +705,82 @@ const styles = StyleSheet.create({
  itemLeft: {
    flexDirection: 'row',
    alignItems: 'center',
-    gap: 10,
+    gap: 12,
  },
  itemIcon: {
-    width: 28,
-    height: 28,
-    borderRadius: 10,
-    backgroundColor: 'rgba(244,214,194,0.55)',
+    width: 24,
+    height: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemText: {
-    color: '#5E2A28',
+    color: '#522B09',
    fontSize: 15,
-    fontWeight: '600',
+    fontWeight: '500',
  },
  chevron: {
-    color: 'rgba(94,42,40,0.45)',
+    color: '#C7B4A1',
    fontSize: 20,
    marginTop: -2,
  },

  favContainer: {
-    borderRadius: 16,
-    backgroundColor: 'rgba(255,255,255,0.75)',
-    overflow: 'hidden',
-    marginBottom: 8,
+    flex: 1,
+    minHeight: 500, // 确保容器有足够高度
  },
  favEmpty: {
    color: 'rgba(94,42,40,0.55)',
    fontSize: 15,
    textAlign: 'center',
-    paddingVertical: 26,
-    paddingHorizontal: 14,
+    paddingVertical: 100,
  },
  favList: {
-    paddingBottom: 10,
+    paddingHorizontal: 20,
+    paddingBottom: 80,
  },
-  favRow: {
-    paddingHorizontal: 14,
-    paddingVertical: 14,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(94,42,40,0.10)',
-    backgroundColor: 'rgba(255,255,255,0.15)',
+  favCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 24,
  },
-  favText: {
-    color: '#5E2A28',
+  favLeft: {
+    width: 90,
+  },
+  favDate: {
+    fontSize: 14,
+    color: '#772F00',
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    fontWeight: '600',
+  },
+  favRight: {
+    flex: 1,
+  },
+  favThumb: {
+    backgroundColor: '#FFF4EA',
+    borderRadius: 16,
+    padding: 20,
+    width: width * 0.6,
+    height: 161,
+    justifyContent: 'center',
+    position: 'relative',
+    borderWidth: 1,
+    borderColor: 'rgba(119, 47, 0, 0.05)',
+  },
+  favThumbText: {
    fontSize: 15,
    lineHeight: 22,
-    fontWeight: '600',
+    color: '#5E2A28',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  favRemoveBtn: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    width: 37,
+    height: 33,
+    alignItems: 'center',
+    justifyContent: 'center',
  },

  counter: {
@@ -563,15 +824,22 @@ const styles = StyleSheet.create({
  },
  remindRow: {
    height: 54,
-    borderRadius: 16,
+    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.75)',
    paddingHorizontal: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 18,
+    width: width - 40, // 屏幕宽度减去左右各 20pt
+    alignSelf: 'center',
  },
  rowLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  rowRight: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
  rowIcon: {
    width: 28,
    height: 28,
@@ -587,6 +855,7 @@ const styles = StyleSheet.create({
  },
  okPressable: {
    marginBottom: 6,
+    marginTop: 40, // 增加顶部间距以撑开高度
  },
  okBtn: {
    height: 52,
@@ -602,61 +871,104 @@ const styles = StyleSheet.create({
  },

  widgetContent: {
-    paddingBottom: 18,
-    gap: 14,
-  },
-  widgetRow: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  widgetCard: {
    flex: 1,
-    borderRadius: 16,
-    overflow: 'hidden',
-    backgroundColor: 'rgba(255,255,255,0.75)',
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(94,42,40,0.12)',
+    paddingTop: 10,
  },
-  widgetPreviewInner: {
-    height: 120,
-    padding: 12,
-    justifyContent: 'center',
+  questionBtn: {
+    position: 'absolute',
+    right: 20,
+    top: -34, // 放在标题栏右侧
+    zIndex: 10,
  },
-  widgetPreviewLock: {
-    backgroundColor: 'rgba(244,214,194,0.65)',
+  widgetScroll: {
+    alignItems: 'center',
+    gap: 30,
+    paddingBottom: 40,
  },
-  widgetPreviewHome: {
-    backgroundColor: 'rgba(243,208,225,0.55)',
+  widgetItem: {
+    alignItems: 'center',
+    width: '100%',
  },
-  widgetPreviewDate: {
-    color: 'rgba(94,42,40,0.70)',
-    fontSize: 12,
-    fontWeight: '600',
-    marginBottom: 6,
+  widgetImg1: {
+    width: width * 0.9,
+    height: (width * 0.9) * (156 / 311),
  },
-  widgetPreviewTime: {
-    color: '#ffffff',
-    fontSize: 44,
-    fontWeight: '800',
-    letterSpacing: 1,
+  widgetImg2: {
+    width: width * 0.9,
+    height: (width * 0.9) * (175 / 311),
  },
-  widgetPreviewQuote: {
-    color: '#5E2A28',
-    fontSize: 14,
-    lineHeight: 20,
-    fontWeight: '700',
+  widgetLabel: {
+    marginTop: 12,
+    fontSize: 15,
+    color: 'rgba(94, 42, 40, 0.45)',
+    fontWeight: '500',
  },
-  widgetCardLabel: {
-    paddingVertical: 10,
+  howToPage: {
+    flex: 1,
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  howToSlide: {
+    width: width - 32, // 减去 SheetModal 的 paddingHorizontal: 16 * 2
+    alignItems: 'center',
+  },
+  howToImg: {
+    width: width * 0.9,
+    height: (width * 0.9) * (234 / 326),
+    marginBottom: 40,
+  },
+  howToDesc: {
+    fontSize: 15,
+    lineHeight: 25,
+    color: '#522B09',
    textAlign: 'center',
-    color: '#5E2A28',
-    fontSize: 13,
-    fontWeight: '700',
+    fontWeight: '500',
+    paddingHorizontal: 20,
  },
-  widgetDesc: {
-    color: 'rgba(94,42,40,0.75)',
-    fontSize: 13,
-    lineHeight: 18,
+  pagination: {
+    flexDirection: 'row',
+    position: 'absolute',
+    top: (width * 0.9) * (234 / 326) + 35, // 根据新的图片高度动态计算
+    gap: 8,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  dotActive: {
+    backgroundColor: '#EEB054',
+  },
+  dotInactive: {
+    backgroundColor: 'rgba(238, 176, 84, 0.3)',
+  },
+  langPage: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+  },
+  langList: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 20,
+    overflow: 'hidden',
+    width: width - 40, // 屏幕宽度减去左右各 20pt
+    alignSelf: 'center',
+  },
+  langItem: {
+    height: 62,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+  },
+  langItemBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(94,42,40,0.1)',
+  },
+  langText: {
+    fontSize: 15,
+    color: '#522B09',
+    fontWeight: '500',
+    textTransform: 'capitalize',
  },
 });

--- a/client/components/home/ThemeModal.tsx
+++ b/client/components/home/ThemeModal.tsx
@@ -16,7 +16,7 @@ type Props = {
 export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
  const { t } = useTranslation();
  return (
-    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose}>
+    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={350}>
      <View style={styles.row}>
        <ThemeCard
          title={t('theme.scenery')}
@@ -24,7 +24,7 @@ export default function ThemeModal({ visible, mode, onSelect, onClose }: Props)
          onPress={() => onSelect('scenery')}
        >
          <Image
-            source={require('../../assets/images/index/index_flowers.png')}
+            source={require('../../assets/images/theme/theme_landscape.png')}
            resizeMode="cover"
            style={styles.previewImage}
          />
@@ -35,7 +35,11 @@ export default function ThemeModal({ visible, mode, onSelect, onClose }: Props)
          selected={mode === 'color'}
          onPress={() => onSelect('color')}
        >
-          <View style={styles.colorPreview} />
+          <Image
+            source={require('../../assets/images/theme/theme_color.png')}
+            resizeMode="cover"
+            style={styles.previewImage}
+          />
        </ThemeCard>
      </View>
    </SheetModal>
@@ -56,11 +60,20 @@ function ThemeCard({
  return (
    <Pressable
      onPress={onPress}
-      style={[styles.card, selected ? styles.cardSelected : styles.cardUnselected]}
+      style={styles.cardContainer}
      hitSlop={6}
    >
-      <View style={styles.preview}>{children}</View>
-      <Text style={styles.cardTitle}>{title}</Text>
+      <View style={[styles.previewWrapper, selected && styles.selectedWrapper]}>
+        <View style={styles.previewInner}>
+          {children}
+          {/* 文案展示在图片中心 */}
+          <View style={styles.textOverlay}>
+            <Text style={[styles.overlayTitle, selected && styles.selectedOverlayTitle]}>
+              {title}
+            </Text>
+          </View>
+        </View>
+      </View>
    </Pressable>
  );
 }
@@ -68,43 +81,57 @@ function ThemeCard({
 const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
-    gap: 14,
-    paddingBottom: 18,
+    gap: 30,
+    paddingHorizontal: 10,
+    paddingBottom: 50,
+    paddingTop: 20,
+    justifyContent: 'center',
  },
-  card: {
-    flex: 1,
-    borderRadius: 18,
-    padding: 10,
-    backgroundColor: 'rgba(255,255,255,0.55)',
+  cardContainer: {
+    alignItems: 'center',
+    width: 143,
  },
-  cardSelected: {
-    borderWidth: 2,
-    borderColor: '#F99CC0',
+  previewWrapper: {
+    width: 138,
+    height: 203,
+    borderRadius: 26,
+    padding: 6.5,
+    justifyContent: 'center',
+    alignItems: 'center',
  },
-  cardUnselected: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: 'rgba(94,42,40,0.18)',
+  selectedWrapper: {
+    borderWidth: 4,
+    borderColor: '#E7837A',
+    borderRadius: 26,
  },
-  preview: {
-    height: 96,
-    borderRadius: 14,
+  previewInner: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 21,
    overflow: 'hidden',
-    backgroundColor: '#fff',
-    marginBottom: 10,
+    backgroundColor: '#F5F5F5',
+    position: 'relative',
  },
  previewImage: {
    width: '100%',
    height: '100%',
  },
-  colorPreview: {
-    flex: 1,
-    backgroundColor: '#F3D0E1',
+  textOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.05)', // 轻微遮罩增加文字可读性
  },
-  cardTitle: {
-    color: '#5E2A28',
-    fontSize: 14,
+  overlayTitle: {
+    color: '#FFFFFF',
+    fontSize: 15,
    fontWeight: '700',
    textAlign: 'center',
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 3,
+  },
+  selectedOverlayTitle: {
+    color: '#FFFFFF',
  },
 });
-
--- a/client/components/onboarding/NameInputStep.tsx
+++ b/client/components/onboarding/NameInputStep.tsx
@@ -1,32 +1,82 @@
-import React from 'react';
-import { View, StyleSheet, TextInput, Platform } from 'react-native';
-import { SerifText } from './SerifText';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, TextInput, Platform, Animated, TouchableOpacity, Dimensions, Text } from 'react-native';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
+import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+import EnterLightIcon from '@/assets/images/icon/enter_Light_icon.svg';
+
+const { height } = Dimensions.get('window');

 interface NameInputStepProps {
  value: string;
  onChangeText: (text: string) => void;
-  onSubmitEditing?: () => void;
+  onNext: () => void;
 }

-export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInputStepProps) {
+export function NameInputStep({ value, onChangeText, onNext }: NameInputStepProps) {
+  const [isFocused, setIsFocused] = useState(false);
+  const blinkAnim = useRef(new Animated.Value(1)).current;
+  const hasInput = value.trim().length > 0;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(blinkAnim, { toValue: 0, duration: 500, useNativeDriver: true }),
+        Animated.timing(blinkAnim, { toValue: 1, duration: 500, useNativeDriver: true }),
+      ])
+    );
+    if (isFocused) {
+      animation.start();
+    } else {
+      animation.stop();
+      blinkAnim.setValue(0);
+    }
+    return () => animation.stop();
+  }, [blinkAnim, isFocused]);
+
  return (
    <View style={styles.container}>
-      <SerifText style={styles.title}>我可以怎么称呼你？</SerifText>
-      
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.input}
-          value={value}
-          onChangeText={onChangeText}
-          placeholder="Hao"
-          placeholderTextColor={OnboardingColors.textSecondary}
-          selectionColor={OnboardingColors.cursor}
-          autoFocus
-          onSubmitEditing={onSubmitEditing}
-          returnKeyType="done"
-          textAlign="center"
-        />
+      <View style={styles.inputCard}>
+        <View style={styles.inputWrapper}>
+          {/* 显示层：文案 + 跟随的光标 */}
+          <View style={styles.displayLayer}>
+            <Text 
+              style={[
+                styles.displayText, 
+                (!isFocused && !hasInput) && { color: OnboardingColors.textSecondary }
+              ]}
+            >
+              {hasInput ? value : (isFocused ? "" : "Mama")}
+            </Text>
+            {isFocused && (
+              <Animated.View style={[styles.cursorWrapper, { opacity: blinkAnim, marginLeft: 2 }]}>
+                <EnterLightIcon width={3} height={27} />
+              </Animated.View>
+            )}
+          </View>
+
+          {/* 交互层：隐藏的输入框 */}
+          <TextInput
+            style={styles.hiddenInput}
+            value={value}
+            onChangeText={onChangeText}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            caretHidden={true}
+            autoCorrect={false}
+            spellCheck={false}
+          />
+        </View>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          onPress={onNext} 
+          disabled={!hasInput}
+          activeOpacity={0.8}
+        >
+          {hasInput ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
+        </TouchableOpacity>
      </View>
    </View>
  );
@@ -34,31 +84,53 @@ export function NameInputStep({ value, onChangeText, onSubmitEditing }: NameInpu

 const styles = StyleSheet.create({
  container: {
+    flex: 1,
    alignItems: 'center',
-    width: '100%',
+    paddingTop: 20,
  },
-  title: {
-    fontSize: 24,
-    marginBottom: 40,
-    textAlign: 'center',
-  },
-  inputContainer: {
-    width: '100%',
+  inputCard: {
+    width: 335,
+    height: 75,
    backgroundColor: OnboardingColors.cardBackground,
    borderRadius: 20,
-    paddingVertical: 20,
-    paddingHorizontal: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
  },
-  input: {
-    fontSize: 24,
-    fontFamily: Platform.select({ ios: 'Georgia', android: 'serif', default: 'serif' }),
+  inputWrapper: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  displayLayer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  displayText: {
+    fontSize: 22,
+    fontFamily: Platform.select({ ios: 'STIX Two Text', android: 'serif', default: 'serif' }),
+    fontWeight: '600',
    color: OnboardingColors.textPrimary,
    textAlign: 'center',
-    padding: 0, // remove default padding
  },
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    color: 'transparent', // 文字透明，只负责输入逻辑
+    fontSize: 22,
+    textAlign: 'center',
+  },
+  cursorWrapper: {
+    // 默认居中显示时，光标在左侧
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    alignItems: 'center',
+  }
 });
--- a/client/components/onboarding/OnboardingLayout.tsx
+++ b/client/components/onboarding/OnboardingLayout.tsx
@@ -1,45 +1,61 @@
 import React from 'react';
-import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar } from 'react-native';
+import { View, StyleSheet, SafeAreaView, TouchableOpacity, StatusBar, Text, Image, Platform } from 'react-native';
 import { OnboardingColors } from '@/constants/OnboardingTheme';
-import { SerifText } from './SerifText';
-import { NextButton } from './NextButton';

 interface OnboardingLayoutProps {
  children: React.ReactNode;
-  onSkip?: () => void;
-  onNext?: () => void;
-  nextEnabled?: boolean;
-  showNextButton?: boolean;
+  title?: string;
+  currentStep: number;
+  totalSteps: number;
+  onSkip: () => void;
+  onBack?: () => void;
+  showBackButton?: boolean;
 }

 export function OnboardingLayout({ 
  children, 
+  title,
+  currentStep,
+  totalSteps,
  onSkip, 
-  onNext, 
-  nextEnabled = true,
-  showNextButton = true 
+  onBack,
+  showBackButton = false
 }: OnboardingLayoutProps) {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.safeArea}>
+        {/* Header: Back & Skip */}
        <View style={styles.header}>
-          <View style={styles.spacer} />
-          {onSkip && (
-            <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
-              <SerifText style={styles.skipText}>Skip {'->'}</SerifText>
-            </TouchableOpacity>
-          )}
-        </View>
-        
-        <View style={styles.content}>
-          {children}
+          <View style={styles.headerLeft}>
+            {showBackButton && onBack && (
+              <TouchableOpacity onPress={onBack} style={styles.iconButton}>
+                <Image 
+                  source={require('@/assets/images/icon/back_icon.png')} 
+                  style={styles.backIcon}
+                />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          <TouchableOpacity onPress={onSkip} style={styles.skipButton}>
+            <Text style={styles.skipText}>skip</Text>
+            <Image 
+              source={require('@/assets/images/icon/skip_icon.png')} 
+              style={styles.skipIcon}
+            />
+          </TouchableOpacity>
        </View>

-        <View style={styles.footer}>
-          {showNextButton && onNext && (
-            <NextButton onPress={onNext} disabled={!nextEnabled} />
-          )}
+        {/* Title & Progress Row */}
+        <View style={styles.titleRow}>
+          <Text style={styles.questionTitle}>{title}</Text>
+          <Text style={styles.progressText}>({currentStep}/{totalSteps})</Text>
+        </View>
+        
+        {/* Content */}
+        <View style={styles.content}>
+          {children}
        </View>
      </SafeAreaView>
    </View>
@@ -58,27 +74,60 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
-    paddingHorizontal: 24,
-    paddingVertical: 12,
+    paddingHorizontal: 20,
+    height: 44,
  },
-  spacer: {
-    width: 60, // Balance the skip button width approximately
+  headerLeft: {
+    width: 44,
+    height: 44,
+    justifyContent: 'center',
+  },
+  iconButton: {
+    padding: 8,
+  },
+  backIcon: {
+    width: 19,
+    height: 19,
+    resizeMode: 'contain',
  },
  skipButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
    padding: 8,
  },
  skipText: {
-    fontSize: 16,
-    color: OnboardingColors.textPrimary,
+    fontSize: 13,
+    color: OnboardingColors.textMuted,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    marginRight: 4,
+  },
+  skipIcon: {
+    width: 10,
+    height: 4,
+    resizeMode: 'contain',
+  },
+  titleRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    paddingHorizontal: 20,
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  questionTitle: {
+    fontSize: 22,
+    color: OnboardingColors.questionTitle,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    flex: 1,
+  },
+  progressText: {
+    fontSize: 18,
+    color: OnboardingColors.textProgress,
+    fontFamily: Platform.OS === 'ios' ? 'PingFang TC' : 'sans-serif',
+    marginLeft: 10,
  },
  content: {
    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 24,
-  },
-  footer: {
-    alignItems: 'center',
-    paddingBottom: 40,
-    minHeight: 100, // Reserve space for button
+    paddingHorizontal: 20,
  },
 });
--- a/client/components/onboarding/ReminderStep.tsx
+++ b/client/components/onboarding/ReminderStep.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, Text, Platform, Dimensions } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+import AddIcon from '@/assets/images/icon/add_icon.svg';
+import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
+import BtnClicked from '@/assets/images/icon/btn_clicked.svg';
+
+const { height } = Dimensions.get('window');
+
+interface ReminderStepProps {
+  value: number;
+  onChange: (value: number) => void;
+  onFinish: () => void;
+}
+
+export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
+  const handleReduce = () => {
+    if (value > 1) onChange(value - 1);
+  };
+
+  const handleAdd = () => {
+    if (value < 5) onChange(value + 1);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.counterContainer}>
+        <TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
+          <ReduceIcon width={47} height={47} />
+        </TouchableOpacity>
+
+        <View style={styles.numberWrapper}>
+          <Text style={styles.numberText}>{value}</Text>
+          <Text style={styles.unitText}>次</Text>
+        </View>
+
+        <TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
+          <AddIcon width={47} height={47} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.footer}>
+        <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
+          <BtnClicked width={87} height={57} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    paddingTop: 20,
+  },
+  counterContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginTop: 40,
+  },
+  numberWrapper: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginHorizontal: 40,
+  },
+  numberText: {
+    fontSize: 107,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    fontWeight: '600',
+    color: OnboardingColors.textPrimary,
+    lineHeight: 120,
+  },
+  unitText: {
+    fontSize: 17,
+    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
+    fontWeight: '600',
+    color: OnboardingColors.textPrimary,
+    marginBottom: 20,
+    marginLeft: 4,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    alignItems: 'center',
+  }
+});
--- a/client/components/onboarding/SelectionStep.tsx
+++ b/client/components/onboarding/SelectionStep.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
+import { OnboardingColors } from '@/constants/OnboardingTheme';
+import { SerifText } from './SerifText';
+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';
+
+const { height } = Dimensions.get('window');
+
+interface Option {
+  id: string;
+  label: string;
+}
+
+interface SelectionStepProps {
+  options: Option[];
+  selectedIds: string[];
+  onToggle: (id: string) => void;
+  onNext: () => void;
+}
+
+export function SelectionStep({ options, selectedIds, onToggle, onNext }: SelectionStepProps) {
+  const hasSelection = selectedIds.length > 0;
+
+  return (
+    <View style={styles.container}>
+      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.optionsList}>
+        {options.map((option) => {
+          const isSelected = selectedIds.includes(option.id);
+          return (
+            <TouchableOpacity
+              key={option.id}
+              style={styles.optionCard}
+              onPress={() => onToggle(option.id)}
+              activeOpacity={0.7}
+            >
+              <SerifText style={styles.optionText}>{option.label}</SerifText>
+              {isSelected && (
+                <View style={styles.iconWrapper}>
+                  <SelectedIcon width={20} height={20} />
+                </View>
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+
+      {/* 底部按钮：距离底部 12% 高度 */}
+      <View style={styles.footer}>
+        <TouchableOpacity 
+          onPress={onNext} 
+          disabled={!hasSelection}
+          activeOpacity={0.8}
+        >
+          {hasSelection ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+  },
+  optionsList: {
+    paddingBottom: 150, // 为底部按钮留出空间
+  },
+  optionCard: {
+    width: '100%',
+    height: 75,
+    backgroundColor: OnboardingColors.cardBackground,
+    borderRadius: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  optionText: {
+    fontSize: 18,
+    color: OnboardingColors.textPrimary,
+    fontWeight: '500',
+    flex: 1,
+  },
+  iconWrapper: {
+    marginLeft: 10,
+  },
+  footer: {
+    position: 'absolute',
+    bottom: height * 0.12,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+  }
+});
--- a/client/components/ui/SheetModal.tsx
+++ b/client/components/ui/SheetModal.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+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 { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Animated, {
  Easing,
@@ -9,26 +9,35 @@ import Animated, {
  withTiming,
 } from 'react-native-reanimated';

+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+const FIXED_TOP_GAP = 100; // 统一距离顶部的高度
+
 type Props = {
  visible: boolean;
  title?: string;
  onClose: () => void;
  children: React.ReactNode;
+  leftIcon?: ImageSourcePropType; // 新增：支持自定义左侧图标
+  height?: number; // 新增：支持自定义高度
 };

 /**
 * 通用底部上拉弹窗（Sheet）
 * - 内容区背景色固定：#FAF3EC
- * - 关闭方式：点 X（本期不要求点遮罩关闭）
+ * - 高度固定：默认距离顶部固定间距，也支持传入指定高度
 */
-export default function SheetModal({ visible, title, onClose, children }: Props) {
+export default function SheetModal({ visible, title, onClose, children, leftIcon, height: customHeight }: Props) {
  const insets = useSafeAreaInsets();
  const [mounted, setMounted] = useState(false);
  const progress = useSharedValue(0); // 0: 关闭, 1: 打开
+  const dragY = useSharedValue(0); // 拖拽位移
+
+  const sheetHeight = customHeight || (SCREEN_HEIGHT - FIXED_TOP_GAP);

  useEffect(() => {
    if (visible) {
      setMounted(true);
+      dragY.value = 0;
      progress.value = withTiming(1, { duration: 260, easing: Easing.out(Easing.cubic) });
      return;
    }
@@ -40,46 +49,88 @@ export default function SheetModal({ visible, title, onClose, children }: Props)
        if (finished) runOnJS(setMounted)(false);
      }
    );
-  }, [visible, mounted, progress]);
+  }, [visible, mounted, progress, dragY]);
+
+  // 使用 PanResponder 处理下滑手势
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false, 
+      onMoveShouldSetPanResponder: () => false, // 暂时屏蔽下拉关闭手势，解决滑动冲突
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          dragY.value = gestureState.dy;
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dy > 80 || gestureState.vy > 0.5) {
+          runOnJS(onClose)();
+        } else {
+          dragY.value = withTiming(0, { 
+            duration: 300, 
+            easing: Easing.out(Easing.back(1)) 
+          });
+        }
+      },
+      onPanResponderTerminate: () => {
+        dragY.value = withTiming(0, { duration: 200 });
+      },
+    })
+  ).current;

  const overlayStyle = useAnimatedStyle(() => {
    return { opacity: 0.4 * progress.value };
  });

  const sheetStyle = useAnimatedStyle(() => {
-    const translateY = (1 - progress.value) * 380;
-    return { transform: [{ translateY }] };
+    const baseTranslateY = (1 - progress.value) * sheetHeight; // 基础位移
+    return { 
+      transform: [{ translateY: baseTranslateY + dragY.value }] 
+    };
  });

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

  // 注意：Modal 的 visible 必须为 true 才会渲染，因此用 mounted 保持退场动画
  return (
    <Modal transparent visible={mounted} animationType="none" onRequestClose={onClose}>
      <View style={styles.root}>
-        <Animated.View style={[styles.overlay, overlayStyle]} />
+        <Pressable 
+          style={StyleSheet.absoluteFill} 
+          onPress={onClose}
+        >
+          <Animated.View style={[styles.overlay, overlayStyle]} />
+        </Pressable>

        <Animated.View
+          {...panResponder.panHandlers}
          style={[
            styles.sheet,
            sheetStyle,
            {
+              height: sheetHeight,
              paddingBottom: containerPaddingBottom,
            },
          ]}
        >
+          <View style={styles.handleContainer}>
+            <View style={styles.handle} />
+          </View>
          <View style={styles.header}>
            <Text style={styles.title} numberOfLines={1}>
              {title ?? ''}
            </Text>
            <Pressable
              accessibilityRole="button"
-              accessibilityLabel="关闭"
+              accessibilityLabel={leftIcon ? "返回" : "关闭"}
              onPress={onClose}
              hitSlop={10}
              style={styles.close}
            >
-              <Text style={styles.closeText}>×</Text>
+              {leftIcon ? (
+                <Image source={leftIcon} style={styles.backIcon} />
+              ) : (
+                <Text style={styles.closeText}>×</Text>
+              )}
            </Pressable>
          </View>

@@ -103,9 +154,19 @@ const styles = StyleSheet.create({
    backgroundColor: '#FAF3EC',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
-    paddingTop: 14,
+    paddingTop: 8,
    paddingHorizontal: 16,
  },
+  handleContainer: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 2.5,
+    backgroundColor: 'rgba(94,42,40,0.15)',
+  },
  header: {
    height: 44,
    justifyContent: 'center',
@@ -131,8 +192,13 @@ const styles = StyleSheet.create({
    lineHeight: 28,
    fontWeight: '400',
  },
+  backIcon: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
  body: {
    paddingTop: 10,
+    flex: 1,
  },
 });
-
--- a/client/constants/OnboardingTheme.ts
+++ b/client/constants/OnboardingTheme.ts
@@ -1,9 +1,14 @@
 export const OnboardingColors = {
  background: '#FFF4EA',
-  textPrimary: '#4A3B32',
-  textSecondary: '#8C8C8C',
+  textPrimary: '#772F00',
+  textSecondary: '#DED2CA', // 默认 Mama 字体颜色
+  textMuted: '#A27854',    // Skip 按钮颜色
+  textProgress: '#D4B08E', // (0/5) 颜色
+  questionTitle: '#B8504D', // 问题标题颜色
+  buttonNotClicked: '#F2DDCA',
  buttonStart: '#F69F7B',
  buttonEnd: '#F99CC0',
  cardBackground: '#FFFFFF',
-  cursor: '#F99CC0',
+  cardSelected: '#FFD8E2', // 选中后的背景色
+  cursor: '#F89DB4',
 };
--- a/client/metro.config.js
+++ b/client/metro.config.js
@@ -1,19 +1,20 @@
+// Metro 配置：支持 import 本地 .svg 为 React 组件
+// 说明：Expo SDK 54 + react-native-svg-transformer 的常见配置方式
 const { getDefaultConfig } = require('expo/metro-config');

 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);

-const { transformer, resolver } = config;
-
 config.transformer = {
-  ...transformer,
+  ...config.transformer,
  babelTransformerPath: require.resolve('react-native-svg-transformer'),
 };

 config.resolver = {
-  ...resolver,
-  assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
-  sourceExts: [...resolver.sourceExts, 'svg', 'mjs'],
+  ...config.resolver,
+  assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
+  sourceExts: [...config.resolver.sourceExts, 'svg'],
 };

 module.exports = config;
+
--- a/client/package.json
+++ b/client/package.json
@@ -24,11 +24,11 @@
    "expo-status-bar": "~3.0.9",
    "expo-web-browser": "~15.0.10",
    "i18next": "^25.8.0",
-    "pnpm": "^10.28.2",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-i18next": "^16.5.4",
    "react-native": "0.81.5",
+    "react-native-gesture-handler": "^2.30.0",
    "react-native-reanimated": "~4.1.1",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
@@ -38,7 +38,6 @@
    "react-native-worklets": "0.5.1"
  },
  "devDependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.28.6",
    "@types/react": "~19.1.0",
    "react-test-renderer": "19.1.0",
    "typescript": "~5.9.2"
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -40,7 +40,7 @@ importers:
        version: 0.32.16(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      expo-router:
        specifier: ~6.0.22
-        version: 6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-gesture-handler@2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      expo-splash-screen:
        specifier: ~31.0.13
        version: 31.0.13(expo@54.0.32)
@@ -65,6 +65,9 @@ importers:
      react-native:
        specifier: 0.81.5
        version: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
+      react-native-gesture-handler:
+        specifier: ^2.30.0
+        version: 2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      react-native-reanimated:
        specifier: ~4.1.1
        version: 4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
@@ -87,9 +90,6 @@ importers:
        specifier: 0.5.1
        version: 0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
    devDependencies:
-      '@babel/plugin-transform-react-jsx':
-        specifier: ^7.28.6
-        version: 7.28.6(@babel/core@7.28.6)
      '@types/react':
        specifier: ~19.1.0
        version: 19.1.17
@@ -613,6 +613,10 @@ packages:
    resolution: {integrity: sha512-0ZrskXVEHSWIqZM/sQZ4EV3jZJXRkio/WCxaqKZP1g//CEWEPSfeZFcms4XeKBCHU0ZKnIkdJeU/kF+eRp5lBg==}
    engines: {node: '>=6.9.0'}

+  '@egjs/hammerjs@2.0.17':
+    resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==}
+    engines: {node: '>=0.8.0'}
+
  '@expo/cli@54.0.22':
    resolution: {integrity: sha512-BTH2FCczhJLfj1cpfcKrzhKnvRLTOztgW4bVloKDqH+G3ZSohWLRFNAIz56XtdjPxBbi2/qWhGBAkl7kBon/Jw==}
    hasBin: true
@@ -1243,6 +1247,9 @@ packages:
  '@types/graceful-fs@4.1.9':
    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}

+  '@types/hammerjs@2.0.46':
+    resolution: {integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==}
+
  '@types/istanbul-lib-coverage@2.0.6':
    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}

@@ -2140,6 +2147,9 @@ packages:
  hermes-parser@0.32.0:
    resolution: {integrity: sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw==}

+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
  hosted-git-info@7.0.2:
    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
    engines: {node: ^16.14.0 || >=18.0.0}
@@ -2885,12 +2895,21 @@ packages:
      typescript:
        optional: true

+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
  react-is@18.3.1:
    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}

  react-is@19.2.4:
    resolution: {integrity: sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==}

+  react-native-gesture-handler@2.30.0:
+    resolution: {integrity: sha512-5YsnKHGa0X9C8lb5oCnKm0fLUPM6CRduvUUw2Bav4RIj/C3HcFh4RIUnF8wgG6JQWCL1//gRx4v+LVWgcIQdGA==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
  react-native-is-edge-to-edge@1.2.1:
    resolution: {integrity: sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q==}
    peerDependencies:
@@ -4189,6 +4208,10 @@ snapshots:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.28.5

+  '@egjs/hammerjs@2.0.17':
+    dependencies:
+      '@types/hammerjs': 2.0.46
+
  '@expo/cli@54.0.22(expo-router@6.0.22)(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))':
    dependencies:
      '@0no-co/graphql.web': 1.2.0
@@ -4256,7 +4279,7 @@ snapshots:
      wrap-ansi: 7.0.0
      ws: 8.19.0
    optionalDependencies:
-      expo-router: 6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo-router: 6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-gesture-handler@2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
    transitivePeerDependencies:
      - bufferutil
@@ -5086,6 +5109,8 @@ snapshots:
    dependencies:
      '@types/node': 25.1.0

+  '@types/hammerjs@2.0.46': {}
+
  '@types/istanbul-lib-coverage@2.0.6': {}

  '@types/istanbul-lib-report@3.0.3':
@@ -5802,7 +5827,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  expo-router@6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-router@6.0.22(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.13)(expo-linking@8.0.11)(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native-gesture-handler@2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
    dependencies:
      '@expo/metro-runtime': 6.1.2(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      '@expo/schema-utils': 0.1.8
@@ -5836,6 +5861,7 @@ snapshots:
      vaul: 1.1.2(@types/react@19.1.17)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
    optionalDependencies:
      react-dom: 19.1.0(react@19.1.0)
+      react-native-gesture-handler: 2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      react-native-reanimated: 4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
      react-native-web: 0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
    transitivePeerDependencies:
@@ -6052,6 +6078,10 @@ snapshots:
    dependencies:
      hermes-estree: 0.32.0

+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
  hosted-git-info@7.0.2:
    dependencies:
      lru-cache: 10.4.3
@@ -6867,10 +6897,20 @@ snapshots:
      react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
      typescript: 5.9.3

+  react-is@16.13.1: {}
+
  react-is@18.3.1: {}

  react-is@19.2.4: {}

+  react-native-gesture-handler@2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@egjs/hammerjs': 2.0.17
+      hoist-non-react-statics: 3.3.2
+      invariant: 2.2.4
+      react: 19.1.0
+      react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
+
  react-native-is-edge-to-edge@1.2.1(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
    dependencies:
      react: 19.1.0
--- a/client/src/i18n/locales/zh-CN.json
+++ b/client/src/i18n/locales/zh-CN.json
@@ -3,6 +3,7 @@
    "ok": "确定",
    "cancel": "取消",
    "error": "错误",
+    "notice": "提示",
    "openLinkError": "无法打开链接",
    "back": "返回"
  },
--- a/client/src/storage/appStorage.ts
+++ b/client/src/storage/appStorage.ts
@@ -69,14 +69,29 @@ export async function setReaction(contentId: string, reaction: Reaction): Promis
  await setJson(KEY_CONTENT_REACTIONS, next);
 }

-export async function getFavorites(): Promise<string[]> {
-  return await getJson<string[]>(KEY_FAVORITES_ITEMS, []);
+export type FavoriteItem = {
+  id: string;
+  date: string;
+  themeMode: ThemeMode;
+  background: string; // 颜色值或图片路径
+};
+
+export async function getFavorites(): Promise<FavoriteItem[]> {
+  return await getJson<FavoriteItem[]>(KEY_FAVORITES_ITEMS, []);
 }

-export async function addFavorite(contentId: string): Promise<void> {
+export async function addFavorite(item: FavoriteItem): Promise<void> {
  const list = await getFavorites();
-  if (list.includes(contentId)) return;
-  await setJson(KEY_FAVORITES_ITEMS, [...list, contentId]);
+  if (list.some(i => i.id === item.id)) return;
+  const newList = [item, ...list];
+  console.log('Adding to favorites, new list size:', newList.length);
+  await setJson(KEY_FAVORITES_ITEMS, newList);
+}
+
+export async function removeFavorite(contentId: string): Promise<void> {
+  const list = await getFavorites();
+  const next = list.filter(item => item.id !== contentId);
+  await setJson(KEY_FAVORITES_ITEMS, next);
 }

 export async function getConsentAccepted(): Promise<boolean> {