feat: 首页支持风景图与纯色背景随滑动自动切换，优化点赞图标样式与交互

client/components/home/ProfileModal.tsx

@@ -50,6 +50,29 @@ type Props = {
 type Page = 'root' | 'favorites' | 'dailyReminder' | 'widget' | 'language' | 'widgetHowTo';
 type NavDirection = 'forward' | 'back';
 
+const NATURE_IMAGES = [
+  require('@/assets/theme/nature/1.png'),
+  require('@/assets/theme/nature/2.png'),
+  require('@/assets/theme/nature/3.png'),
+  require('@/assets/theme/nature/4.png'),
+  require('@/assets/theme/nature/5.png'),
+  require('@/assets/theme/nature/6.png'),
+  require('@/assets/theme/nature/7.png'),
+  require('@/assets/theme/nature/8.png'),
+  require('@/assets/theme/nature/9.png'),
+  require('@/assets/theme/nature/10.png'),
+  require('@/assets/theme/nature/11.png'),
+  require('@/assets/theme/nature/12.png'),
+  require('@/assets/theme/nature/13.png'),
+  require('@/assets/theme/nature/14.png'),
+  require('@/assets/theme/nature/15.png'),
+  require('@/assets/theme/nature/17.png'),
+  require('@/assets/theme/nature/18.png'),
+  require('@/assets/theme/nature/19.png'),
+  require('@/assets/theme/nature/20.png'),
+  require('@/assets/theme/nature/22.png'),
+];
+
 export default function ProfileModal({ visible, name: propName, onClose }: Props) {
   const { t } = useTranslation();
 
@@ -260,11 +283,11 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
     setFavorites(list);
   }
 
-  async function handleRemove(id: string) {
+  async function handleRemove(favId: string) {
     // 1. 调用存储层移除收藏
-    await removeFavorite(id);
+    await removeFavorite(favId);
     // 2. 更新本地状态
-    setFavorites(prev => prev.filter(item => item.id !== id));
+    setFavorites(prev => prev.filter(item => item.favId !== favId));
   }
 
   return (
@@ -274,7 +297,7 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
       ) : (
         <FlatList
           data={favorites}
-          keyExtractor={(it) => it.id}
+          keyExtractor={(it) => it.favId}
           contentContainerStyle={styles.favList}
           showsVerticalScrollIndicator={false}
           renderItem={({ item }) => (
@@ -290,11 +313,30 @@ function FavoritesPage({ visible, page }: { visible: boolean; page: Page }) {
               <View style={styles.favRight}>
                 <View style={[
                   styles.favThumb, 
-                  { backgroundColor: item.background } // 动态同步 Home 页的背景
+                  item.themeMode === 'scenery' ? {} : { backgroundColor: item.background }
                 ]}>
-                  <Text style={styles.favThumbText} numberOfLines={4}>{item.text}</Text>
+                  {item.themeMode === 'scenery' ? (
+                    <View style={StyleSheet.absoluteFill}>
+                      <Image 
+                        source={NATURE_IMAGES[parseInt(item.background)]} 
+                        style={{
+                          width: width * 0.6,
+                          height: 800, // 假设原图较高，设置一个较大的高度
+                          position: 'absolute',
+                          bottom: 0, // 关键：将图片底部对齐容器底部
+                        }}
+                        resizeMode="cover"
+                      />
+                    </View>
+                  ) : null}
+                  <Text style={[
+                    styles.favThumbText,
+                    item.themeMode === 'scenery' && { color: '#FFFFFF', textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: {width:0, height:1}, textShadowRadius: 3 }
+                  ]} numberOfLines={4}>
+                    {item.text}
+                  </Text>
                   <Pressable 
-                    onPress={() => handleRemove(item.id)} 
+                    onPress={() => handleRemove(item.favId)} 
                     style={styles.favRemoveBtn}
                     hitSlop={10}
                   >
@@ -765,6 +807,7 @@ const styles = StyleSheet.create({
     position: 'relative',
     borderWidth: 1,
     borderColor: 'rgba(119, 47, 0, 0.05)',
+    overflow: 'hidden',
   },
   favThumbText: {
     fontSize: 15,