f

app.json

@@ -46,17 +46,7 @@
     "plugins": [
       "expo-router",
       "expo-secure-store",
-      [
-        "expo-font",
-        {
-          "fonts": [
-            "./assets/fonts/Quicksand.otf",
-            "./assets/fonts/SF-Pro.otf",
-            "./assets/fonts/Inter-Regular.otf"
-          ]
-        }
-      ],
-      [
+      [ 
         "expo-background-task",
         {
           "minimumInterval": 15

app/(tabs)/_layout.tsx

@@ -1,4 +1,3 @@
-import { HapticTab } from '@/components/HapticTab';
 import AskNavbar from '@/components/layout/ask';
 import { TabBarIcon } from '@/components/navigation/TabBarIcon';
 import { requestNotificationPermission } from '@/components/owner/utils';
@@ -9,16 +8,13 @@ import { prefetchChats } from '@/lib/prefetch';
 import { fetchApi } from '@/lib/server-api-util';
 import { webSocketManager, WebSocketStatus } from '@/lib/websocket-util';
 import { TransitionPresets } from '@react-navigation/bottom-tabs';
-import { useFonts } from 'expo-font';
 import * as Notifications from 'expo-notifications';
 import { Tabs } from 'expo-router';
 import * as SecureStore from 'expo-secure-store';
-import * as SplashScreen from 'expo-splash-screen';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Platform } from 'react-native';
 
-SplashScreen.preventAutoHideAsync();
 interface PollingData {
   title: string;
   id: string;
@@ -58,19 +54,6 @@ export default function TabLayout() {
     });
   };
 
-  // 加载字体
-  const [loaded, error] = useFonts({
-    quicksand: require('@/assets/fonts/Quicksand.otf'),
-    sfPro: require('@/assets/fonts/SF-Pro.otf'),
-    inter: require('@/assets/fonts/Inter-Regular.otf'),
-  });
-
-  useEffect(() => {
-    if (loaded || error) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded, error]);
-
   // 监听通知点击事件
   useEffect(() => {
     const notificationListener = Notifications.addNotificationResponseReceivedListener(response => {
@@ -204,28 +187,13 @@ export default function TabLayout() {
   return (
     <>
       <Tabs
-        screenOptions={{
-          tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-          headerShown: false,
-          tabBarButton: HapticTab,
-          tabBarBackground: TabBarBackground,
-          tabBarStyle: Platform.select({
-            ios: {
-              // Use a transparent background on iOS to show the blur effect
-              position: 'absolute',
-            },
-            default: {},
-          }),
-        }}
+        tabBar={props => <AskNavbar {...props} wsStatus={wsStatus} />}
       >
         {/* 落地页 */}
         <Tabs.Screen
           name="index"
           options={{
-            title: 'Memo',
-            tabBarButton: () => null, // 隐藏底部标签栏
-            headerShown: false, // 隐藏导航栏
-            tabBarStyle: { display: 'none' } // 确保在标签栏中不显示
+            href: null,
           }}
         />
         {/* 登录 */}
@@ -276,10 +244,7 @@ export default function TabLayout() {
         <Tabs.Screen
           name="ask"
           options={{
-            title: 'ask',
-            tabBarButton: () => null, // 隐藏底部标签栏
-            headerShown: false, // 隐藏导航栏
-            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            href: null,
             ...TransitionPresets.ShiftTransition,
           }}
         />
@@ -287,10 +252,7 @@ export default function TabLayout() {
         <Tabs.Screen
           name="memo-list"
           options={{
-            title: 'memo-list',
-            tabBarButton: () => null, // 隐藏底部标签栏
-            headerShown: false, // 隐藏导航栏
-            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            href: null,
             ...TransitionPresets.ShiftTransition,
           }}
         />
@@ -298,10 +260,7 @@ export default function TabLayout() {
         <Tabs.Screen
           name="owner"
           options={{
-            title: 'owner',
-            tabBarButton: () => null, // 隐藏底部标签栏
-            headerShown: false, // 隐藏导航栏
-            tabBarStyle: { display: 'none' }, // 确保在标签栏中不显示
+            href: null,
             ...TransitionPresets.ShiftTransition,
           }}
         />
@@ -393,7 +352,6 @@ export default function TabLayout() {
           }}
         />
       </Tabs >
-      <AskNavbar wsStatus={wsStatus} />
     </>
   );
 }

app/(tabs)/ask.tsx

@@ -1,12 +1,9 @@
 import ReturnArrow from "@/assets/icons/svg/returnArrow.svg";
-import Chat from "@/components/ask/chat";
 import AskHello from "@/components/ask/hello";
-import SendMessage from "@/components/ask/send";
 import { ThemedText } from "@/components/ThemedText";
 import { fetchApi } from "@/lib/server-api-util";
-import { getWebSocketErrorMessage, webSocketManager, WsMessage } from "@/lib/websocket-util";
-import { Assistant, Message } from "@/types/ask";
-import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { Message } from "@/types/ask";
+import { useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from "react-i18next";
 import {
@@ -25,6 +22,7 @@ import { runOnJS } from 'react-native-reanimated';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function AskScreen() {
+    const router = useRouter();
     const insets = useSafeAreaInsets();
 
     const chatListRef = useRef<FlatList>(null);
@@ -57,7 +55,6 @@ export default function AskScreen() {
             if (translationX > threshold) {
                 // 从左向右滑动，跳转页面
                 runOnJS(router.replace)("/memo-list");
-                runOnJS(setConversationId)("")
             }
         })
         .minPointers(1)
@@ -100,88 +97,88 @@ export default function AskScreen() {
 
     useFocusEffect(
         useCallback(() => {
-            webSocketManager.connect();
+            // webSocketManager.connect();
 
-            const handleChatStream = (message: WsMessage) => {
-                if (message.type === 'ChatStream') {
-                    setUserMessages(prevMessages => {
-                        const newMessages = [...prevMessages];
-                        const lastMessage = newMessages[newMessages.length - 1];
+            //         const handleChatStream = (message: WsMessage) => {
+            //             if (message.type === 'ChatStream') {
+            //                 setUserMessages(prevMessages => {
+            //                     const newMessages = [...prevMessages];
+            //                     const lastMessage = newMessages[newMessages.length - 1];
 
-                        if (lastMessage && lastMessage.role === Assistant) {
-                            if (typeof lastMessage.content === 'string') {
-                                if (lastMessage.content === 'keepSearchIng') {
-                                    // 第一次收到流式消息，替换占位符
-                                    lastMessage.content = message.chunk;
-                                } else {
-                                    // 持续追加流式消息
-                                    lastMessage.content += message.chunk;
-                                }
-                            } else {
-                                // 如果 content 是数组，则更新第一个 text 部分
-                                const textPart = lastMessage.content.find(p => p.type === 'text');
-                                if (textPart) {
-                                    textPart.text = (textPart.text || '') + message.chunk;
-                                }
-                            }
-                        }
-                        return newMessages;
-                    });
-                }
-            };
+            //                     if (lastMessage && lastMessage.role === Assistant) {
+            //                         if (typeof lastMessage.content === 'string') {
+            //                             if (lastMessage.content === 'keepSearchIng') {
+            //                                 // 第一次收到流式消息，替换占位符
+            //                                 lastMessage.content = message.chunk;
+            //                             } else {
+            //                                 // 持续追加流式消息
+            //                                 lastMessage.content += message.chunk;
+            //                             }
+            //                         } else {
+            //                             // 如果 content 是数组，则更新第一个 text 部分
+            //                             const textPart = lastMessage.content.find(p => p.type === 'text');
+            //                             if (textPart) {
+            //                                 textPart.text = (textPart.text || '') + message.chunk;
+            //                             }
+            //                         }
+            //                     }
+            //                     return newMessages;
+            //                 });
+            //             }
+            //         };
 
-            const handleChatStreamEnd = (message: WsMessage) => {
-                if (message.type === 'ChatStreamEnd') {
-                    setUserMessages(prevMessages => {
-                        const newMessages = [...prevMessages];
-                        const lastMessage = newMessages[newMessages.length - 1];
-                        if (lastMessage && lastMessage.role === Assistant) {
-                            // 使用最终消息替换流式消息，确保 message.message 存在
-                            if (message.message) {
-                                newMessages[newMessages.length - 1] = message.message as Message;
-                            } else {
-                                // 如果最终消息为空，则移除 'keepSearchIng' 占位符
-                                return prevMessages.filter(m => !(typeof m.content === 'string' && m.content === 'keepSearchIng'));
-                            }
-                        }
-                        return newMessages;
-                    });
-                }
-            };
+            //         const handleChatStreamEnd = (message: WsMessage) => {
+            //             if (message.type === 'ChatStreamEnd') {
+            //                 setUserMessages(prevMessages => {
+            //                     const newMessages = [...prevMessages];
+            //                     const lastMessage = newMessages[newMessages.length - 1];
+            //                     if (lastMessage && lastMessage.role === Assistant) {
+            //                         // 使用最终消息替换流式消息，确保 message.message 存在
+            //                         if (message.message) {
+            //                             newMessages[newMessages.length - 1] = message.message as Message;
+            //                         } else {
+            //                             // 如果最终消息为空，则移除 'keepSearchIng' 占位符
+            //                             return prevMessages.filter(m => !(typeof m.content === 'string' && m.content === 'keepSearchIng'));
+            //                         }
+            //                     }
+            //                     return newMessages;
+            //                 });
+            //             }
+            //         };
 
-            const handleError = (message: WsMessage) => {
-                if (message.type === 'Error') {
-                    console.log(`WebSocket Error: ${message.code} - ${message.message}`);
-                    // 可以在这里添加错误提示，例如替换最后一条消息为错误信息
-                    setUserMessages(prev => {
-                        // 创建新的数组和新的消息对象
-                        return prev.map((msg, index) => {
-                            if (index === prev.length - 1 &&
-                                typeof msg.content === 'string' &&
-                                msg.content === 'keepSearchIng') {
-                                // 返回新的消息对象
-                                return {
-                                    ...msg,
-                                    content: getWebSocketErrorMessage(message.code, t)
-                                };
-                            }
-                            return msg;
-                        });
-                    });
-                }
-            };
+            //         const handleError = (message: WsMessage) => {
+            //             if (message.type === 'Error') {
+            //                 console.log(`WebSocket Error: ${message.code} - ${message.message}`);
+            //                 // 可以在这里添加错误提示，例如替换最后一条消息为错误信息
+            //                 setUserMessages(prev => {
+            //                     // 创建新的数组和新的消息对象
+            //                     return prev.map((msg, index) => {
+            //                         if (index === prev.length - 1 &&
+            //                             typeof msg.content === 'string' &&
+            //                             msg.content === 'keepSearchIng') {
+            //                             // 返回新的消息对象
+            //                             return {
+            //                                 ...msg,
+            //                                 content: getWebSocketErrorMessage(message.code, t)
+            //                             };
+            //                         }
+            //                         return msg;
+            //                     });
+            //                 });
+            //             }
+            //         };
 
-            webSocketManager.subscribe('ChatStream', handleChatStream);
-            webSocketManager.subscribe('ChatStreamEnd', handleChatStreamEnd);
-            webSocketManager.subscribe('Error', handleError);
+            //         webSocketManager.subscribe('ChatStream', handleChatStream);
+            //         webSocketManager.subscribe('ChatStreamEnd', handleChatStreamEnd);
+            //         webSocketManager.subscribe('Error', handleError);
 
-            return () => {
-                webSocketManager.unsubscribe('ChatStream', handleChatStream);
-                webSocketManager.unsubscribe('ChatStreamEnd', handleChatStreamEnd);
-                webSocketManager.unsubscribe('Error', handleError);
-                // 可以在这里选择断开连接，或者保持连接以加快下次进入页面的速度
-                // webSocketManager.disconnect();
-            };
+            //         return () => {
+            //             webSocketManager.unsubscribe('ChatStream', handleChatStream);
+            //             webSocketManager.unsubscribe('ChatStreamEnd', handleChatStreamEnd);
+            //             webSocketManager.unsubscribe('Error', handleError);
+            //             // 可以在这里选择断开连接，或者保持连接以加快下次进入页面的速度
+            //             // webSocketManager.disconnect();
+            //         };
         }, [])
     );
 
@@ -197,7 +194,7 @@ export default function AskScreen() {
             setIsHello(true);
             setConversationId(null);
         }
-    }, [sessionId, newSession]);
+    }, [sessionId, newSession])
 
     useEffect(() => {
         if (isHello) {
@@ -235,24 +232,6 @@ export default function AskScreen() {
         }
     }, [isHello, fadeAnim, fadeAnimChat]);
 
-    useEffect(() => {
-        if (!isHello) {
-            // 不再自动关闭键盘，让用户手动控制
-            // 这里可以添加其他需要在隐藏hello界面时执行的逻辑
-            scrollToEnd(false);
-        }
-    }, [isHello]);
-
-    useFocusEffect(
-        useCallback(() => {
-            Keyboard.dismiss();
-            if (!sessionId) {
-                setIsHello(true);
-                setUserMessages([])
-            }
-        }, [sessionId, Keyboard])
-    );
-
     return (
         <GestureDetector gesture={gesture}>
             <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
@@ -270,7 +249,9 @@ export default function AskScreen() {
                                 console.log('失去焦点失败:', error);
                             }
                             Keyboard.dismiss();
-                            router.push('/memo-list');
+                            setTimeout(() => {
+                                router.replace('/memo-list');
+                            }, 100);
                         }}
                     >
                         <ReturnArrow />
@@ -305,17 +286,17 @@ export default function AskScreen() {
                             }
                         ]}
                     >
-                        <Chat
-                            ref={chatListRef}
-                            userMessages={userMessages}
-                            sessionId={sessionId}
-                            setSelectedImages={setSelectedImages}
-                            selectedImages={selectedImages}
-                            style={styles.chatContainer}
-                            contentContainerStyle={styles.chatContentContainer}
-                            showsVerticalScrollIndicator={false}
-                            onContentSizeChange={() => scrollToEnd()}
-                        />
+                        {/* <Chat
+                        ref={chatListRef}
+                        userMessages={userMessages}
+                        sessionId={sessionId}
+                        setSelectedImages={setSelectedImages}
+                        selectedImages={selectedImages}
+                        style={styles.chatContainer}
+                        contentContainerStyle={styles.chatContentContainer}
+                        showsVerticalScrollIndicator={false}
+                        onContentSizeChange={() => scrollToEnd()}
+                    /> */}
                     </Animated.View>
                 </View>
 
@@ -324,19 +305,18 @@ export default function AskScreen() {
                     behavior={Platform.OS === "ios" ? "padding" : "height"}
                     keyboardVerticalOffset={0} >
                     <View style={styles.inputContainer} key={conversationId}>
-                        <SendMessage
+                        {/* <SendMessage
                             setIsHello={setIsHello}
                             conversationId={conversationId}
                             setConversationId={setConversationId}
                             setUserMessages={setUserMessages}
                             selectedImages={selectedImages}
                             setSelectedImages={setSelectedImages}
-                            isHello={isHello}
-                        />
+                        /> */}
                     </View>
                 </KeyboardAvoidingView>
             </View >
-        </GestureDetector>
+        </GestureDetector >
     );
 }
 

app/(tabs)/index.tsx

@@ -1,183 +1,291 @@
-import { Fonts } from '@/constants/Fonts';
 import { checkAuthStatus } from '@/lib/auth';
 import { useRouter } from 'expo-router';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import Animated, {
-    interpolate,
-    useAnimatedStyle,
-    useSharedValue,
-    withDelay,
-    withRepeat,
-    withSequence,
-    withTiming
-} from 'react-native-reanimated';
+import { Animated, Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-// Worklet function for animations
-const runShakeAnimation = (value: Animated.SharedValue<number>) => {
-    'worklet';
-    return withRepeat(
-        withSequence(
-            withTiming(1, { duration: 300 }),
-            withTiming(-1, { duration: 300 }),
-            withTiming(1, { duration: 300 }),
-            withTiming(-1, { duration: 300 }),
-            withTiming(0, { duration: 200 }),
-            withDelay(1000, withTiming(0, { duration: 0 }))
-        ),
-        -1
-    );
-};
-
-const runWaveAnimation = (value: Animated.SharedValue<number>) => {
-    'worklet';
-    return withRepeat(
-        withSequence(
-            withTiming(1, { duration: 500 }),
-            withTiming(-1, { duration: 500 }),
-            withTiming(0, { duration: 500 }),
-            withDelay(1000, withTiming(0, { duration: 0 }))
-        ),
-        -1
-    );
-};
-
 export default function HomeScreen() {
     const router = useRouter();
     const { t } = useTranslation();
     const insets = useSafeAreaInsets();
-    const [isLoading, setIsLoading] = React.useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // 获取屏幕宽度
     const screenWidth = Dimensions.get('window').width;
 
-    // Animation values
-    const fadeAnim = useSharedValue(0);
-    const shakeAnim = useSharedValue(0);
-    const waveAnim = useSharedValue(0);
-    const buttonShakeAnim = useSharedValue(0);
-    const fadeInAnim = useSharedValue(0);
-    const descriptionAnim = useSharedValue(0);
-    const textAnimations = {
-        line1: useSharedValue(0),
-        line2: useSharedValue(0),
-        line3: useSharedValue(0),
-        subtitle: useSharedValue(0),
+    // 动画值
+    const fadeAnim = useRef(new Animated.Value(0)).current; // IP图标的淡入动画
+    const shakeAnim = useRef(new Animated.Value(0)).current; // IP图标的摇晃动画
+    const animationRef = useRef<Animated.CompositeAnimation | null>(null); // 动画引用
+    const descriptionAnim = useRef(new Animated.Value(0)).current; // 描述文本的淡入动画
+    const buttonAnim = useRef(new Animated.Value(0)).current; // 按钮的淡入动画
+    const buttonShakeAnim = useRef(new Animated.Value(0)).current; // 按钮的摇晃动画
+    const buttonLoopAnim = useRef<Animated.CompositeAnimation | null>(null); // 按钮循环动画引用
+    const fadeInAnim = useRef(new Animated.Value(0)).current;
+
+    // 文本行动画值
+    const [textAnimations] = useState(() => ({
+        line1: new Animated.Value(0), // 第一行文本动画
+        line2: new Animated.Value(0), // 第二行文本动画
+        line3: new Animated.Value(0), // 第三行文本动画
+        subtitle: new Animated.Value(0), // 副标题动画
+    }));
+
+    // 添加挥手动画值
+    const waveAnim = useRef(new Animated.Value(0)).current;
+
+    // 启动IP图标摇晃动画
+    const startShaking = () => {
+        // 停止任何正在进行的动画
+        if (animationRef.current) {
+            animationRef.current.stop();
+        }
+
+        // 创建动画序列
+        const sequence = Animated.sequence([
+            // 第一次左右摇晃
+            Animated.timing(shakeAnim, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shakeAnim, {
+                toValue: -1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            // 第二次左右摇晃
+            Animated.timing(shakeAnim, {
+                toValue: 1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            Animated.timing(shakeAnim, {
+                toValue: -1,
+                duration: 300,
+                useNativeDriver: true,
+            }),
+            // 回到中心位置
+            Animated.timing(shakeAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            // 1秒延迟
+            Animated.delay(1000),
+        ]);
+
+        // 循环播放动画序列
+        animationRef.current = Animated.loop(sequence);
+        animationRef.current.start();
     };
 
-    // Animation styles
-    const ipAnimatedStyle = useAnimatedStyle(() => ({
-        opacity: fadeAnim.value,
-        transform: [
-            { translateX: interpolate(shakeAnim.value, [-1, 1], [-2, 2]) },
-            { rotate: `${interpolate(shakeAnim.value, [-1, 1], [-2, 2])}deg` },
-        ],
-    }));
+    // 启动文本动画
+    const startTextAnimations = () => {
+        // 按顺序延迟启动每行文本动画
+        return new Promise<void>((resolve) => {
+            Animated.stagger(300, [
+                Animated.timing(textAnimations.line1, {
+                    toValue: 1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(textAnimations.line2, {
+                    toValue: 1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(textAnimations.line3, {
+                    toValue: 1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(textAnimations.subtitle, {
+                    toValue: 1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+            ]).start(() => resolve());
+        });
+    };
 
-    const waveAnimatedStyle = useAnimatedStyle(() => ({
-        transform: [
-            { rotate: `${interpolate(waveAnim.value, [-1, 0, 1], [-15, 0, 15])}deg` },
-        ],
-    }));
+    // 启动描述文本动画
+    const startDescriptionAnimation = () => {
+        // IP图标显示后淡入描述文本
+        return new Promise<void>((resolve) => {
+            Animated.sequence([
+                Animated.delay(200), // IP图标显示后延迟200ms
+                Animated.timing(descriptionAnim, {
+                    toValue: 1,
+                    duration: 800,
+                    useNativeDriver: true,
+                })
+            ]).start(() => resolve());
+        });
+    };
+    // 启动欢迎语动画
+    const startWelcomeAnimation = () => {
+        // IP图标显示后淡入描述文本
+        return new Promise<void>((resolve) => {
+            Animated.sequence([
+                Animated.delay(200), // IP图标显示后延迟200ms
+                Animated.timing(fadeInAnim, {
+                    toValue: 1,
+                    duration: 800,
+                    useNativeDriver: true,
+                })
+            ]).start(() => resolve());
+        });
+    };
 
-    const buttonStyle = useAnimatedStyle(() => ({
-        opacity: fadeInAnim.value,
-        transform: [
-            { translateY: interpolate(fadeInAnim.value, [0, 1], [20, 0]) },
-            { translateX: interpolate(buttonShakeAnim.value, [-1, 0, 1], [-5, 0, 5]) }
-        ]
-    }));
+    // 启动按钮动画
+    const startButtonAnimation = () => {
+        // 首先淡入按钮
+        Animated.sequence([
+            Animated.timing(buttonAnim, {
+                toValue: 1,
+                duration: 800,
+                useNativeDriver: true,
+            })
+        ]).start(() => {
+            // 淡入完成后开始循环摇晃动画
+            startButtonShakeLoop();
+        });
+    };
 
-    const welcomeStyle = useAnimatedStyle(() => ({
-        opacity: fadeInAnim.value,
-        transform: [{ translateY: interpolate(fadeInAnim.value, [0, 1], [20, 0]) }]
-    }));
+    // 启动按钮循环摇晃动画
+    const startButtonShakeLoop = () => {
+        // 停止任何正在进行的动画
+        if (buttonLoopAnim.current) {
+            buttonLoopAnim.current.stop();
+        }
 
-    const descriptionStyle = useAnimatedStyle(() => ({
-        opacity: descriptionAnim.value,
-        transform: [{ translateY: interpolate(descriptionAnim.value, [0, 1], [20, 0]) }]
-    }));
+        // 创建摇晃动画序列
+        const shakeSequence = Animated.sequence([
+            // 向右摇晃
+            Animated.timing(buttonShakeAnim, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            // 向左摇晃
+            Animated.timing(buttonShakeAnim, {
+                toValue: -1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            // 再次向右摇晃
+            Animated.timing(buttonShakeAnim, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            // 回到中心位置
+            Animated.timing(buttonShakeAnim, {
+                toValue: 0,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            // 暂停3秒
+            Animated.delay(3000)
+        ]);
 
-    const textLine1Style = useAnimatedStyle(() => ({
-        opacity: textAnimations.line1.value,
-        transform: [{ translateY: interpolate(textAnimations.line1.value, [0, 1], [10, 0]) }]
-    }));
+        // 循环播放动画序列
+        buttonLoopAnim.current = Animated.loop(shakeSequence);
+        buttonLoopAnim.current.start();
+    };
 
-    const textLine2Style = useAnimatedStyle(() => ({
-        opacity: textAnimations.line2.value,
-        transform: [{ translateY: interpolate(textAnimations.line2.value, [0, 1], [10, 0]) }]
-    }));
+    // 启动挥手动画
+    const startWaveAnimation = () => {
+        // 创建循环动画：左右摇摆
+        Animated.loop(
+            Animated.sequence([
+                Animated.timing(waveAnim, {
+                    toValue: 1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(waveAnim, {
+                    toValue: -1,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(waveAnim, {
+                    toValue: 0,
+                    duration: 500,
+                    useNativeDriver: true,
+                }),
+                Animated.delay(1000), // 暂停1秒
+            ])
+        ).start();
+    };
 
-    const textLine3Style = useAnimatedStyle(() => ({
-        opacity: textAnimations.line3.value,
-        transform: [{ translateY: interpolate(textAnimations.line3.value, [0, 1], [10, 0]) }]
-    }));
-
-    const subtitleStyle = useAnimatedStyle(() => ({
-        opacity: textAnimations.subtitle.value,
-        transform: [{ translateY: interpolate(textAnimations.subtitle.value, [0, 1], [10, 0]) }]
-    }));
-
-    // Start animations
+    // 组件挂载时启动动画
     useEffect(() => {
         setIsLoading(true);
-
         checkAuthStatus(router, () => {
-            router.replace('/ask');
+            router.replace('/memo-list')
         }, false).then(() => {
             setIsLoading(false);
         }).catch(() => {
             setIsLoading(false);
         });
-
-        // Start fade in animation
-        fadeAnim.value = withTiming(1, { duration: 1000 }, () => {
-            // Start shake animation
-            shakeAnim.value = runShakeAnimation(shakeAnim);
-
-            // Start text animations with delays
-            textAnimations.line1.value = withDelay(0, withTiming(1, { duration: 500 }));
-            textAnimations.line2.value = withDelay(300, withTiming(1, { duration: 500 }));
-            textAnimations.line3.value = withDelay(600, withTiming(1, { duration: 500 }));
-            textAnimations.subtitle.value = withDelay(900, withTiming(1, { duration: 500 }));
-
-            // Start welcome animation
-            fadeInAnim.value = withDelay(200, withTiming(1, { duration: 800 }));
-
-            // Start description animation
-            descriptionAnim.value = withDelay(200, withTiming(1, { duration: 800 }));
-
-            // Start button animation
-            fadeInAnim.value = withDelay(200, withTiming(1, { duration: 800 }, () => {
-                // Start button shake animation
-                buttonShakeAnim.value = withRepeat(
-                    withSequence(
-                        withTiming(1, { duration: 100 }),
-                        withTiming(-1, { duration: 100 }),
-                        withTiming(1, { duration: 100 }),
-                        withTiming(0, { duration: 100 }),
-                        withDelay(3000, withTiming(0, { duration: 0 }))
-                    ),
-                    -1
-                );
-            }));
-
-            // Start wave animation
-            waveAnim.value = runWaveAnimation(waveAnim);
+        // IP图标的淡入动画
+        Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+        }).start(() => {
+            // 淡入完成后开始摇晃动画
+            startShaking();
+            // IP显示后开始文本动画
+            startTextAnimations()
+                .then(() => startWelcomeAnimation())
+                .then(() => startDescriptionAnimation())
+                .then(() => startButtonAnimation())
+                .catch(console.error);
+            // 启动挥手动画
+            startWaveAnimation();
         });
 
-        // Cleanup
+        // 组件卸载时清理动画
         return () => {
-            fadeAnim.value = 0;
-            shakeAnim.value = 0;
-            waveAnim.value = 0;
-            buttonShakeAnim.value = 0;
-            fadeInAnim.value = 0;
-            descriptionAnim.value = 0;
-            Object.values(textAnimations).forEach(anim => anim.value = 0);
+            if (buttonLoopAnim.current) {
+                buttonLoopAnim.current.stop();
+            }
+            if (animationRef.current) {
+                animationRef.current.stop();
+            }
         };
+
     }, []);
 
+    // 动画样式
+    const animatedStyle = {
+        opacity: fadeAnim,
+        transform: [
+            {
+                translateX: shakeAnim.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: [-2, 2],
+                })
+            },
+            {
+                rotate: shakeAnim.interpolate({
+                    inputRange: [-1, 1],
+                    outputRange: ['-2deg', '2deg'],
+                }),
+            },
+        ],
+    };
+
+    // 旋转动画插值
+    const rotate = waveAnim.interpolate({
+        inputRange: [-1, 0, 1],
+        outputRange: ['-15deg', '0deg', '15deg'],
+    });
+
     if (isLoading) {
         return (
             <View style={styles.loadingContainer}>
@@ -189,27 +297,86 @@ export default function HomeScreen() {
     return (
         <View style={styles.container}>
             <View style={[styles.contentContainer, { paddingTop: insets.top + 16 }]}>
+                {/* 标题区域 */}
                 <View style={styles.headerContainer}>
-                    <Animated.Text style={[styles.titleText, textLine1Style]}>
+                    <Animated.Text
+                        style={[
+                            styles.titleText,
+                            {
+                                opacity: textAnimations.line1, transform: [{
+                                    translateY: textAnimations.line1.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [10, 0]
+                                    })
+                                }]
+                            }
+                        ]}
+                    >
                         {t('auth.welcomeAwaken.awaken', { ns: 'login' })}
                     </Animated.Text>
-                    <Animated.Text style={[styles.titleText, textLine2Style]}>
+                    <Animated.Text
+                        style={[
+                            styles.titleText,
+                            {
+                                opacity: textAnimations.line2, transform: [{
+                                    translateY: textAnimations.line2.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [10, 0]
+                                    })
+                                }]
+                            }
+                        ]}
+                    >
                         {t('auth.welcomeAwaken.your', { ns: 'login' })}
                     </Animated.Text>
-                    <Animated.Text style={[styles.titleText, textLine3Style]}>
+                    <Animated.Text
+                        style={[
+                            styles.titleText,
+                            {
+                                opacity: textAnimations.line3, transform: [{
+                                    translateY: textAnimations.line3.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [10, 0]
+                                    })
+                                }]
+                            }
+                        ]}
+                    >
                         {t('auth.welcomeAwaken.pm', { ns: 'login' })}
                     </Animated.Text>
-                    <Animated.Text style={[styles.subtitleText, subtitleStyle]}>
+                    <Animated.Text
+                        style={[
+                            styles.subtitleText,
+                            {
+                                opacity: textAnimations.subtitle,
+                                transform: [{
+                                    translateY: textAnimations.subtitle.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [10, 0]
+                                    })
+                                }]
+                            }
+                        ]}
+                    >
                         {t('auth.welcomeAwaken.slogan', { ns: 'login' })}
                     </Animated.Text>
                 </View>
-
+                {/* 欢迎语 */}
                 <View style={{ alignItems: 'flex-end' }}>
-                    <Animated.View style={[{
-                        height: screenWidth * 0.3,
-                        width: screenWidth * 0.3,
-                        marginTop: -screenWidth * 0.08,
-                    }, welcomeStyle]}>
+                    <Animated.View
+                        style={[{
+                            height: screenWidth * 0.3,
+                            width: screenWidth * 0.3,
+                            marginTop: -screenWidth * 0.08,
+                            opacity: fadeInAnim,
+                            transform: [{
+                                translateY: fadeInAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0]
+                                })
+                            }]
+                        }]}
+                    >
                         <Image
                             source={require('@/assets/images/png/icon/think.png')}
                             style={{
@@ -221,25 +388,62 @@ export default function HomeScreen() {
                     </Animated.View>
                 </View>
 
+                {/* Animated IP */}
                 <View style={styles.ipContainer}>
-                    <Animated.View style={[styles.ipWrapper, waveAnimatedStyle]}>
+                    <Animated.View style={[styles.ipWrapper, { transform: [{ rotate }] }]}>
                         <Image
                             source={require('@/assets/images/png/icon/ip.png')}
-                            style={{ width: screenWidth * 0.9, marginBottom: -screenWidth * 0.18, marginTop: -screenWidth * 0.22 }}
+                            style={{ width: screenWidth * 0.9, marginBottom: - screenWidth * 0.18, marginTop: -screenWidth * 0.22 }}
                         />
                     </Animated.View>
                 </View>
 
-                <Animated.Text style={[styles.descriptionText, descriptionStyle]}>
+                {/* 介绍文本 */}
+                <Animated.Text
+                    style={[
+                        styles.descriptionText,
+                        {
+                            opacity: descriptionAnim,
+                            transform: [{
+                                translateY: descriptionAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0]
+                                })
+                            }]
+                        }
+                    ]}
+                >
                     {t('auth.welcomeAwaken.gallery', { ns: 'login' })}
                     {"\n"}
                     {t('auth.welcomeAwaken.back', { ns: 'login' })}
                 </Animated.Text>
 
-                <Animated.View style={[{ alignItems: "center" }, buttonStyle]}>
+                {/* 唤醒按钮 */}
+                <Animated.View
+                    style={{
+                        alignItems: "center",
+                        opacity: buttonAnim,
+                        transform: [
+                            {
+                                translateY: buttonAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [20, 0]
+                                })
+                            },
+                            {
+                                translateX: buttonShakeAnim.interpolate({
+                                    inputRange: [-1, 0, 1],
+                                    outputRange: [-5, 0, 5]
+                                })
+                            }
+                        ]
+                    }}
+                >
                     <TouchableOpacity
                         style={styles.awakenButton}
-                        onPress={() => router.push('/login')}
+                        onPress={async () => {
+                            router.push('/login');
+                        }}
                         activeOpacity={0.8}
                     >
                         <Text style={styles.buttonText}>
@@ -256,7 +460,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#FFB645',
-        fontFamily: 'english'
     },
     loadingContainer: {
         flex: 1,
@@ -281,19 +484,17 @@ const styles = StyleSheet.create({
     },
     titleText: {
         color: '#FFFFFF',
-        fontSize: 32,
+        fontSize: 30,
         fontWeight: 'bold',
         marginBottom: 12,
         textAlign: 'left',
         lineHeight: 36,
-        fontFamily: Fonts['quicksand']
     },
     subtitleText: {
         color: 'rgba(255, 255, 255, 0.85)',
         fontSize: 16,
         textAlign: 'left',
         lineHeight: 24,
-        fontFamily: Fonts['inter']
     },
     ipContainer: {
         alignItems: 'center',
@@ -312,12 +513,11 @@ const styles = StyleSheet.create({
         opacity: 0.9,
         paddingHorizontal: 40,
         marginTop: -16,
-        fontFamily: Fonts['inter']
     },
     awakenButton: {
         backgroundColor: '#FFFFFF',
         borderRadius: 28,
-        paddingVertical: 20,
+        paddingVertical: 16,
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.1,
@@ -331,6 +531,5 @@ const styles = StyleSheet.create({
         color: '#4C320C',
         fontWeight: 'bold',
         fontSize: 18,
-        fontFamily: Fonts['quicksand']
     },
 });

app/(tabs)/login.tsx

@@ -74,16 +74,16 @@ const LoginScreen = () => {
                 keyboardShouldPersistTaps="handled"
                 bounces={false}
             >
-                <ThemedView className="flex-1 justify-end" bgColor="bgPrimary">
-                    <View style={{ width: "100%", alignItems: "center", marginTop: insets.top + 8, opacity: keyboardOffset === 0 ? 1 : 0 }}>
-                        <ThemedText size="xl" weight="bold" color="textWhite">{t('login:auth.login.titleText')}</ThemedText>
+                <ThemedView className="flex-1 bg-bgPrimary justify-end">
+                    <View style={{ width: "100%", alignItems: "center", marginTop: insets.top + 8 }}>
+                        <ThemedText style={{ fontSize: 20, fontWeight: 'bold', color: "#fff" }}>Awake your Memo</ThemedText>
                     </View>
                     <View className="flex-1">
                         <View
                             className="absolute left-1/2 z-10"
                             style={{
                                 top: containerHeight > 0 ? windowHeight - containerHeight - 210 + statusBarHeight - insets.top - 28 : 0,
-                                transform: [{ translateX: -200 }, { translateY: keyboardOffset > 0 ? -keyboardOffset + statusBarHeight : -keyboardOffset }]
+                                transform: [{ translateX: -200 }, { translateY: keyboardOffset > 0 ? -keyboardOffset + statusBarHeight - insets.top - 28 : -keyboardOffset }]
                             }}
                         >
                             {
@@ -98,15 +98,14 @@ const LoginScreen = () => {
                             className="absolute left-1/2 z-[1000] -translate-x-[39.5px] -translate-y-[4px]"
                             style={{
                                 top: containerHeight > 0 ? windowHeight - containerHeight - 1 + statusBarHeight - insets.top - 30 : 0,
-                                transform: [{ translateX: -39.5 }, { translateY: keyboardOffset > 0 ? -4 - keyboardOffset + statusBarHeight : -4 - keyboardOffset }]
+                                transform: [{ translateX: -39.5 }, { translateY: keyboardOffset > 0 ? -4 - keyboardOffset + statusBarHeight - insets.top - 30 : -4 - keyboardOffset }]
                             }}
                         >
                             <Handers />
                         </View>
                     </View>
                     <ThemedView
-                        className="w-full pt-4 px-6 relative z-20 shadow-lg pb-5"
-                        bgColor="textWhite"
+                        className="w-full bg-white pt-4 px-6 relative z-20 shadow-lg pb-5"
                         style={{
                             borderTopLeftRadius: 50,
                             borderTopRightRadius: 50,
@@ -121,7 +120,7 @@ const LoginScreen = () => {
                     >
                         {/* 错误提示 */}
                         <View className={`${error !== "123" ? 'opacity-100' : 'opacity-0'} w-full flex justify-center items-center text-primary-500 text-sm`}>
-                            <ThemedText size='xxs' color='bgSecondary' type='inter'>
+                            <ThemedText className="text-sm !text-textPrimary">
                                 {error}
                             </ThemedText>
                         </View>
@@ -162,22 +161,22 @@ const LoginScreen = () => {
                             return components[status as keyof typeof components] || components.login;
                         })()}
 
-                        <View style={{ width: "100%", alignItems: "center", }}>
+                        <View style={{ width: "100%", alignItems: "center", marginTop: 16 }}>
                             {status == 'login' || !status &&
                                 <View className="flex-row justify-center mt-2 flex-wrap w-[85%] items-center">
-                                    <ThemedText color='bgPrimary' size='xxs' type='inter'>
+                                    <ThemedText style={{ fontSize: 11, color: "#FFB645" }}>
                                         {status === 'login' || !status ? t('auth.agree.logintext', { ns: 'login' }) : t('auth.agree.singupText', { ns: 'login' })}
                                     </ThemedText>
                                     <TouchableOpacity onPress={() => { setModalVisible(true); setModalType('terms') }}>
-                                        <ThemedText color='bgPrimary' size='xxs' type='inter' style={{ textDecorationLine: 'underline' }}>
+                                        <ThemedText style={{ fontSize: 11, color: "#FFB645", textDecorationLine: 'underline' }}>
                                             {t('auth.agree.terms', { ns: 'login' })}
                                         </ThemedText>
                                     </TouchableOpacity>
-                                    <ThemedText color='bgPrimary' size='xxs' type='inter' className='flex-wrap'>
+                                    <ThemedText style={{ fontSize: 11, color: "#FFB645", flexWrap: 'wrap' }}>
                                         {t('auth.agree.join', { ns: 'login' })}
                                     </ThemedText>
                                     <TouchableOpacity onPress={() => { setModalVisible(true); setModalType('privacy') }}>
-                                        <ThemedText color='bgPrimary' size='xxs' type='inter' className='flex-wrap' style={{ textDecorationLine: 'underline' }}>
+                                        <ThemedText style={{ fontSize: 11, color: "#FFB645", textDecorationLine: 'underline' }}>
                                             {t('auth.agree.privacyPolicy', { ns: 'login' })}
                                         </ThemedText>
                                     </TouchableOpacity>

app/(tabs)/memo-list.tsx

@@ -13,9 +13,8 @@ import UploaderProgress from '@/components/file-upload/upload-progress/uploader-
 import SkeletonItem from '@/components/memo/SkeletonItem';
 
 // 类型定义
-import { Fonts } from '@/constants/Fonts';
 import { useUploadManager } from '@/hooks/useUploadManager';
-import { getCachedData, prefetchChatDetail, prefetchChats } from '@/lib/prefetch';
+import { getCachedData, prefetchChatDetail } from '@/lib/prefetch';
 import { fetchApi } from '@/lib/server-api-util';
 import { Chat, getMessageText } from '@/types/ask';
 import { useTranslation } from 'react-i18next';
@@ -106,18 +105,11 @@ const MemoList = () => {
 
         const initialize = async () => {
             try {
-                // 并行预加载资源和数据
+                // 并行预加载资源和主数据
                 await Promise.all([
                     preloadAssets(),
-                    prefetchChats().then((data) => {
-                        if (isActive && data) {
-                            setHistoryList(data as Chat[]);
-                        }
-                    }),
+                    fetchHistoryList()
                 ]);
-
-                // 主数据加载
-                await fetchHistoryList();
             } catch (error) {
                 console.error('初始化失败:', error);
             } finally {
@@ -228,7 +220,7 @@ const MemoList = () => {
 
     return (
         <ErrorBoundary>
-            <View style={[styles.container, { paddingTop: insets.top + 8 }]}>
+            <View style={[styles.container, { paddingTop: insets.top }]}>
                 <FlatList
                     ref={flatListRef}
                     data={historyList}
@@ -274,7 +266,7 @@ const styles = StyleSheet.create({
         backgroundColor: '#fff',
     },
     headerContainer: {
-        paddingBottom: 8,
+        paddingBottom: 16,
         backgroundColor: '#fff',
     },
     title: {
@@ -282,8 +274,7 @@ const styles = StyleSheet.create({
         fontWeight: 'bold',
         color: '#4C320C',
         textAlign: 'center',
-        marginBottom: 8,
-        fontFamily: Fonts["quicksand"]
+        marginBottom: 16,
     },
     listContent: {
         paddingBottom: Platform.select({
@@ -316,15 +307,13 @@ const styles = StyleSheet.create({
     },
     memoTitle: {
         fontSize: 16,
-        fontWeight: 'bold',
+        fontWeight: '500',
         color: '#4C320C',
         marginBottom: 4,
-        fontFamily: Fonts['sfPro']
     },
     memoSubtitle: {
         fontSize: 14,
         color: '#AC7E35',
-        fontFamily: Fonts['inter']
     },
     separator: {
         height: 1 / PixelRatio.get(),

app/(tabs)/owner.tsx

@@ -13,14 +13,13 @@ import { CountData, UserInfoDetails } from '@/types/user';
 import { useFocusEffect, useRouter } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dimensions, FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function OwnerPage() {
     const insets = useSafeAreaInsets();
     const { t } = useTranslation();
     const router = useRouter();
-    const width = Dimensions.get("window").width;
 
     // 添加页面挂载状态
     const [isMounted, setIsMounted] = useState(false);
@@ -120,17 +119,17 @@ export default function OwnerPage() {
                         <UserInfo userInfo={userInfoDetails} />
 
                         {/* 会员卡 */}
-                        <MemberCard pro={userInfoDetails?.membership_level} points={userInfoDetails?.remain_points} />
+                        <MemberCard pro={userInfoDetails?.membership_level} />
 
                         {/* 分类 */}
-                        <View style={{ marginHorizontal: -16, marginBottom: -width * 0.26 }}>
+                        <View style={{ marginHorizontal: -16, marginBottom: -16 }}>
                             <CarouselComponent data={userInfoDetails?.material_counter} />
                         </View>
 
                         {/* 作品数据 */}
                         <View className='flex flex-row justify-between gap-[1rem]'>
-                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={16} height={16} />} number={userInfoDetails.stories_count} />
-                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={16} height={16} />} number={userInfoDetails.conversations_count} />
+                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={30} height={30} />} number={userInfoDetails.stories_count} />
+                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={30} height={30} />} number={userInfoDetails.conversations_count} />
                         </View>
 
                         {/* 排行榜 */}

app/(tabs)/rights.tsx

@@ -37,10 +37,9 @@ export default function Rights() {
         requestProducts,
         ErrorCode
     } = useIAP();
-    const { points, pro } = useLocalSearchParams<{
+    const { pro } = useLocalSearchParams<{
         credit: string;
-        points: string;
-        pro: string
+        pro: string;
     }>();
     // 用户勾选协议
     const [agree, setAgree] = useState<boolean>(false);
@@ -216,9 +215,9 @@ export default function Rights() {
                 {/* 会员卡 */}
                 <View style={styles.card}>
                     {userType === 'normal' ? (
-                        <Image source={require('@/assets/images/png/owner/normal.png')} style={{ height: 150, objectFit: 'cover', width: '100%', borderRadius: 32 }} />
+                        <Image source={require('@/assets/images/png/owner/normal.png')} style={{ height: 150, objectFit: 'cover', width: '100%' }} />
                     ) : (
-                        <Image source={require('@/assets/images/png/owner/pro.png')} style={{ height: 150, objectFit: 'cover', width: '100%', borderRadius: 32 }} />
+                        <Image source={require('@/assets/images/png/owner/pro.png')} style={{ height: 150, objectFit: 'cover', width: '100%' }} />
                     )}
                     <View style={styles.cardContent}>
                         <View style={styles.cardinfo}>
@@ -227,7 +226,7 @@ export default function Rights() {
                             </ThemedText>
                             <View style={styles.cardPoints}>
                                 <StarSvg />
-                                <ThemedText style={styles.cardPointsText}>{points}</ThemedText>
+                                <ThemedText style={styles.cardPointsText}>{pro}</ThemedText>
                             </View>
                         </View>
                     </View>
@@ -267,6 +266,8 @@ export default function Rights() {
                 padding: 16,
                 paddingBottom: 32,
                 backgroundColor: '#fff',
+                borderTopWidth: 1,
+                borderTopColor: '#eee',
                 position: 'absolute',
                 bottom: 0,
                 left: 0,
@@ -302,8 +303,8 @@ export default function Rights() {
                     }}
                     activeOpacity={0.8}
                 >
-                    <ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 18 }}>
-                        {t('rights.subscribe', { ns: 'personal' })} {payType?.split('_')[payType?.split('_')?.length - 1]}
+                    <ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 14 }}>
+                        {t('rights.subscribe', { ns: 'personal' })}
                     </ThemedText>
                 </TouchableOpacity>
 
@@ -364,8 +365,8 @@ const styles = StyleSheet.create({
     },
     goPay: {
         backgroundColor: '#E2793F',
-        borderRadius: 32,
-        paddingVertical: 16,
+        borderRadius: 24,
+        paddingVertical: 10,
         display: "flex",
         alignItems: "center",
         width: "100%",
@@ -378,9 +379,9 @@ const styles = StyleSheet.create({
         marginBottom: 16
     },
     switchButtonItem: {
-        width: "47%",
+        width: "48%",
         borderRadius: 24,
-        paddingVertical: 8,
+        paddingVertical: 6,
         display: "flex",
         alignItems: "center",
         borderWidth: 1
@@ -389,7 +390,7 @@ const styles = StyleSheet.create({
         marginHorizontal: 16,
         marginVertical: 16,
         padding: 16,
-        borderRadius: 32,
+        borderRadius: 12,
         backgroundColor: '#fff',
         shadowColor: '#000',
         shadowOffset: {
@@ -420,7 +421,7 @@ const styles = StyleSheet.create({
         marginHorizontal: 16,
         marginVertical: 16,
         backgroundColor: '#FFB645',
-        borderRadius: 32,
+        borderRadius: 12,
     },
     cardContent: {
         position: 'absolute',
@@ -439,7 +440,7 @@ const styles = StyleSheet.create({
         fontWeight: '700',
         color: '#E2793F',
         backgroundColor: '#fff',
-        paddingHorizontal: 16,
+        paddingHorizontal: 8,
         paddingVertical: 2,
         borderRadius: 20,
         textAlign: 'center',
@@ -449,12 +450,12 @@ const styles = StyleSheet.create({
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8
+        gap: 4
     },
     cardPointsText: {
         fontSize: 32,
         fontWeight: '700',
         color: '#4C320C',
-        lineHeight: 36
+        lineHeight: 32
     }
 });

app/(tabs)/setting.tsx

@@ -11,7 +11,7 @@ import { checkNotificationPermission, getLocationPermission, getPermissions, req
 import { ThemedText } from '@/components/ThemedText';
 import { useAuth } from '@/contexts/auth-context';
 import { fetchApi } from '@/lib/server-api-util';
-import { Address, User } from '@/types/user';
+import { Address, User, UserInfoDetails } from '@/types/user';
 import * as Location from 'expo-location';
 import { useFocusEffect, useRouter } from 'expo-router';
 import * as SecureStore from 'expo-secure-store';
@@ -20,7 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { Linking, Platform, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const Setting = () => {
+const Setting = (props: { userInfo: UserInfoDetails }) => {
     const [userInfo, setUserInfo] = useState<User | null>(null);
 
     const getUserInfo = async () => {
@@ -210,7 +210,7 @@ const Setting = () => {
     }, [])
 
     return (
-        <View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom, backgroundColor: '#fff' }}>
+        <View style={{ flex: 1, paddingTop: insets.top, marginBottom: insets.bottom }}>
             <Pressable
                 style={styles.centeredView}
             >
@@ -221,7 +221,7 @@ const Setting = () => {
                         <TouchableOpacity onPress={() => { router.push('/owner') }}>
                             <ReturnArrowSvg />
                         </TouchableOpacity>
-                        <ThemedText style={styles.modalTitle} >{t('generalSetting.allTitle', { ns: 'personal' })}</ThemedText>
+                        <Text style={styles.modalTitle}>{t('generalSetting.allTitle', { ns: 'personal' })}</Text>
                         <Text style={{ opacity: 0 }}>×</Text>
                     </View>
                     <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>
@@ -269,11 +269,11 @@ const Setting = () => {
                         </View> */}
                         {/* 权限信息 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('permission.permissionManagement', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 {/* 相册权限 */}
                                 <View style={styles.item}>
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('permission.galleryAccess', { ns: 'personal' })}</ThemedText>
                                     <CustomSwitch
                                         isEnabled={albumEnabled}
                                         toggleSwitch={toggleAlbum}
@@ -284,7 +284,7 @@ const Setting = () => {
                                 {/* 位置权限 */}
                                 <View style={styles.item}>
                                     <View>
-                                        <ThemedText style={styles.itemText} type="sfPro">{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
+                                        <ThemedText style={styles.itemText}>{t('permission.locationPermission', { ns: 'personal' })}</ThemedText>
                                     </View>
                                     <CustomSwitch
                                         isEnabled={locationEnabled}
@@ -294,7 +294,7 @@ const Setting = () => {
                                 <Divider />
                                 <View style={styles.item}>
                                     <View>
-                                        <ThemedText style={styles.itemText} type="sfPro">{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
+                                        <ThemedText style={styles.itemText}>{t('permission.pushNotification', { ns: 'personal' })}</ThemedText>
                                     </View>
                                     <CustomSwitch
                                         isEnabled={notificationsEnabled}
@@ -335,62 +335,62 @@ const Setting = () => {
                         </View> */}
                         {/* 协议 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('lcenses.title', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('lcenses.title', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('privacy'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.privacyPolicy', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('terms'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.applyPermission', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('user'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.userAgreement', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setModalType('ai'); setPrivacyModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.aiPolicy', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={styles.item} onPress={() => { setLcensesModalVisible(true) }} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.qualification', { ns: 'personal' })}</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                                 <Divider />
                                 <TouchableOpacity style={[styles.item, { display: language == "en" ? 'none' : 'flex' }]} onPress={() => Linking.openURL("https://beian.miit.gov.cn/")} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('lcenses.ICP', { ns: 'personal' })}沪ICP备2025133004号-2A</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('lcenses.ICP', { ns: 'personal' })}沪ICP备2025133004号-2A</ThemedText>
                                     <RightArrowSvg />
                                 </TouchableOpacity>
                             </View>
                         </View>
                         {/* 其他信息 */}
                         <View style={{ marginTop: 16 }}>
-                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ marginLeft: 16, marginVertical: 8, color: '#AC7E35', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.otherInformation', { ns: 'personal' })}</ThemedText>
                             <View style={styles.content}>
                                 <TouchableOpacity style={styles.item} onPress={() => Linking.openURL("https://work.weixin.qq.com/kfid/kfca0ac87f4e05e8bfd")} >
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('generalSetting.contactUs', { ns: 'personal' })}</ThemedText>
                                     {/* <RightArrowSvg /> */}
                                 </TouchableOpacity>
                                 <Divider />
                                 <View style={styles.item}>
-                                    <ThemedText style={styles.itemText} type="sfPro">{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
+                                    <ThemedText style={styles.itemText}>{t('generalSetting.version', { ns: 'personal' })}</ThemedText>
                                     <ThemedText style={styles.itemText}>{"0.5.0"}</ThemedText>
                                 </View>
                             </View>
                         </View>
                         {/* 退出 */}
                         <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={handleLogout}>
-                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.logout', { ns: 'personal' })}</ThemedText>
                             <LogoutSvg />
                         </TouchableOpacity>
                         {/* 注销账号 */}
                         <TouchableOpacity style={[styles.premium, { marginVertical: 8 }]} onPress={() => setDeleteModalVisible(true)}>
-                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }} type="sfPro">{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
+                            <ThemedText style={{ color: '#E2793F', fontSize: 14, fontWeight: '600' }}>{t('generalSetting.deleteAccount', { ns: 'personal' })}</ThemedText>
                             <DeleteSvg />
                         </TouchableOpacity>
                     </ScrollView>
@@ -405,11 +405,14 @@ const Setting = () => {
 
 const styles = StyleSheet.create({
     centeredView: {
-        flex: 1
+        flex: 1,
+        justifyContent: 'flex-end',
+        backgroundColor: 'rgba(0,0,0,0.5)',
     },
     modalView: {
         width: '100%',
         height: '100%',
+        backgroundColor: 'white',
         paddingHorizontal: 16,
     },
     modalHeader: {
@@ -437,8 +440,7 @@ const styles = StyleSheet.create({
     },
     premium: {
         backgroundColor: "#FAF9F6",
-        paddingHorizontal: 16,
-        paddingVertical: 20,
+        padding: 16,
         borderRadius: 24,
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -450,11 +452,11 @@ const styles = StyleSheet.create({
         gap: 4,
         backgroundColor: '#FAF9F6',
         borderRadius: 24,
-        padding: 8
+        paddingVertical: 8
     },
     item: {
         paddingHorizontal: 16,
-        paddingVertical: 12,
+        paddingVertical: 8,
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',

app/(tabs)/top.tsx

@@ -1,5 +1,4 @@
-import DownSvg from '@/assets/icons/svg/down.svg';
-import PlaceSvg from '@/assets/icons/svg/place.svg';
+import ArrowSvg from '@/assets/icons/svg/arrow.svg';
 import ReturnArrowSvg from '@/assets/icons/svg/returnArrow.svg';
 import { CascaderItem } from '@/components/cascader';
 import ClassifyModal from '@/components/owner/classify';
@@ -15,7 +14,7 @@ import { GroupedData, RankingItem, TargetItem } from '@/types/user';
 import { useRouter } from "expo-router";
 import * as SecureStore from 'expo-secure-store';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, LayoutChangeEvent, Platform, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { LayoutChangeEvent, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 interface LocationData {
     id: number;
@@ -26,14 +25,6 @@ interface LocationData {
 export default function OwnerPage() {
     const insets = useSafeAreaInsets();
     const router = useRouter();
-    const HOT_CITIES = [
-        ['北京', '上海', '广州', '深圳'],
-        ['杭州', '成都', '乌鲁木齐', '武汉'],
-        ['西安', '重庆', '西宁', '哈尔滨'],
-        ['长沙', '南宁', '贵阳', '昆明']
-    ];
-    // 位置搜索数据
-    const [locationSearch, setLocationSearch] = useState('');
     // 位置弹窗
     const [locationModalVisible, setLocationModalVisible] = useState(false);
     // 分类弹窗
@@ -170,62 +161,36 @@ export default function OwnerPage() {
         };
     }, [fetchLocationData]);
 
-    useEffect(() => {
-        // console.log(locationData);
-
-    }, [locationSearch])
-
     return (
-        <TouchableWithoutFeedback onPress={() => {
-            Keyboard.dismiss();
-        }}>
-            <View style={[styles.container, { paddingTop: insets.top }]}>
-                {/* 导航栏 */}
-                <View
-                    style={styles.header}
-                    ref={podiumRef}
-                    onLayout={onPodiumLayout}
-                >
-                    <TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}>
-                        <ReturnArrowSvg />
-                    </TouchableOpacity>
-                    <ThemedText style={styles.headerTitle} onPress={() => { setClassifyModalVisible(true) }}>
-                        {selectedClassify?.length > 0 ? selectedClassify[selectedClassify?.length - 1].name : "分类"}
+        <View style={[styles.container, { paddingTop: insets.top }]}>
+            {/* 导航栏 */}
+            <View
+                style={styles.header}
+                ref={podiumRef}
+                onLayout={onPodiumLayout}
+            >
+                <TouchableOpacity onPress={() => { router.push('/owner') }} style={{ padding: 16 }}>
+                    <ReturnArrowSvg />
+                </TouchableOpacity>
+                <ThemedText style={styles.headerTitle}>
+                    Top Memory Makers
+                </ThemedText>
+                <ThemedText className='opacity-0'>123</ThemedText>
+            </View>
+            <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 16, marginHorizontal: 16 }}>
+                <TouchableOpacity onPress={() => { setLocationModalVisible(true) }} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    <ThemedText style={{ color: selectedLocation?.length > 0 ? '#FFB645' : '#4C320C' }}>
+                        {selectedLocation?.length > 0 ? selectedLocation[selectedLocation?.length - 1].name : "地区"}
                     </ThemedText>
-                    <ThemedText className='opacity-0'>123</ThemedText>
-                </View>
-                <View style={{ display: 'flex', flexDirection: 'column', gap: 16, marginHorizontal: 16, paddingHorizontal: 32 }}>
-                    <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: "space-between", gap: 16 }}>
-                        <TouchableOpacity onPress={() => { setLocationModalVisible(true) }} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                            <PlaceSvg />
-                            <ThemedText style={{ color: selectedLocation?.length > 0 ? '#FFB645' : '#4C320C' }}>
-                                {selectedLocation?.length > 0 ? selectedLocation[selectedLocation?.length - 1].name : "地区"}
-                            </ThemedText>
-                            <DownSvg />
-                            {/* {
+                    {
                         selectedLocation?.length > 0
                             ?
                             <ArrowSvg style={{ transform: [{ rotate: '90deg' }], width: 12, height: 12 }} />
                             :
                             <ReturnArrowSvg style={{ transform: [{ rotate: '270deg' }], width: 12, height: 12 }} />
-                    } */}
-
-                        </TouchableOpacity>
-                        {/* <View style={styles.searchContainer}>
-                            <View style={styles.searchIcon}>
-                                <SearchSvg width={12} height={12} />
-                            </View>
-                            <TextInput
-                                style={styles.input}
-                                onChangeText={setLocationSearch}
-                                value={locationSearch}
-                                placeholder="输入城市名进行搜索"
-                                onEndEditing={(text) => {
-                                    setLocationSearch(text.nativeEvent.text)
-                                }}
-                            />
-                        </View> */}
-                        {/* <TouchableOpacity onPress={() => { setClassifyModalVisible(true) }} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                    }
+                </TouchableOpacity>
+                <TouchableOpacity onPress={() => { setClassifyModalVisible(true) }} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                     <ThemedText style={{ color: selectedClassify?.length > 0 ? '#FFB645' : '#4C320C' }}>
                         {selectedClassify?.length > 0 ? selectedClassify[selectedClassify?.length - 1].name : "分类"}
                     </ThemedText>
@@ -235,56 +200,30 @@ export default function OwnerPage() {
                         :
                         <ReturnArrowSvg style={{ transform: [{ rotate: '270deg' }], width: 12, height: 12 }} />
                     }
-                </TouchableOpacity> */}
-
-                    </View>
-                    {/* 热门城市 */}
-                    {/* <View style={styles.hotCity}>
-                        <ThemedText size="base" color="textSecondary" style={{ marginBottom: 16 }}>热门城市</ThemedText>
-                        {HOT_CITIES.map((row, rowIndex) => (
-                            <View
-                                key={`row-${rowIndex}`}
-                                style={[styles.cityRow, rowIndex === HOT_CITIES.length - 1 && { marginBottom: 0 }]}
-                            >
-                                {row.map((city, cityIndex) => (
-                                    <ThemedText
-                                        key={`${city}-${cityIndex}`}
-                                        style={styles.item}
-                                        onPress={() => {
-                                            setLocationSearch(city);
-                                        }}
-                                    >
-                                        {city}
-                                    </ThemedText>
-                                ))}
-                            </View>
-                        ))}
-                    </View> */}
-                </View>
-
-                {/* 颁奖台 */}
-                <PodiumComponent data={ranking} />
-                {/* 排名区域 */}
-                <RankList data={ranking} />
-
-                {/* 地区选择弹窗 */}
-                <LocationModal
-                    modalVisible={locationModalVisible}
-                    setModalVisible={setLocationModalVisible}
-                    podiumPosition={podiumPosition}
-                    handleChange={handleLocationChange}
-                    data={locationData}
-                />
-                {/* 分类选择弹窗 */}
-                <ClassifyModal
-                    data={classify}
-                    modalVisible={classifyModalVisible}
-                    setModalVisible={setClassifyModalVisible}
-                    podiumPosition={podiumPosition}
-                    handleChange={handleClassifyChange}
-                />
+                </TouchableOpacity>
             </View>
-        </TouchableWithoutFeedback>
+            {/* 颁奖台 */}
+            <PodiumComponent data={ranking} />
+            {/* 排名区域 */}
+            <RankList data={ranking} />
+
+            {/* 地区选择弹窗 */}
+            <LocationModal
+                modalVisible={locationModalVisible}
+                setModalVisible={setLocationModalVisible}
+                podiumPosition={podiumPosition}
+                handleChange={handleLocationChange}
+                data={locationData}
+            />
+            {/* 分类选择弹窗 */}
+            <ClassifyModal
+                data={classify}
+                modalVisible={classifyModalVisible}
+                setModalVisible={setClassifyModalVisible}
+                podiumPosition={podiumPosition}
+                handleChange={handleClassifyChange}
+            />
+        </View>
     );
 }
 
@@ -304,46 +243,5 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: '700',
         color: '#4C320C',
-    },
-    searchContainer: {
-        position: 'relative',
-        flex: 1,
-    },
-    input: {
-        backgroundColor: '#D9D9D9',
-        borderRadius: 24,
-        paddingLeft: 40, // 给图标留出空间
-        paddingVertical: 8,
-        paddingRight: 16,
-        fontSize: 14,
-        lineHeight: 16,
-    },
-    searchIcon: {
-        position: 'absolute',
-        left: 20,
-        top: '50%',
-        zIndex: 10,
-        transform: [{ translateY: -6 }]
-    },
-    item: {
-        paddingVertical: 8,
-        borderRadius: 12,
-        fontSize: 14,
-        backgroundColor: '#D9D9D9',
-        width: '23%',
-        textAlign: 'center',
-        color: "#4C320C"
-    },
-    hotCity: {
-        backgroundColor: "#FBFBFB",
-        padding: 16,
-        borderRadius: 24
-    },
-    cityRow: {
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-        marginBottom: 16
     }
 });

assets/icons/svg/down.svg

@@ -1,3 +0,0 @@
-<svg width="11" height="10" viewBox="0 0 11 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.67965 8.83066C5.21851 9.764 6.56567 9.764 7.10453 8.83066L10.7418 2.53066C11.2807 1.59733 10.6071 0.430664 9.5294 0.430664H2.25478C1.17706 0.430664 0.503487 1.59733 1.04235 2.53066L4.67965 8.83066Z" fill="#635848"/>
-</svg>

assets/icons/svg/place.svg

@@ -1,4 +0,0 @@
-<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.69653 1.76888C5.6629 0.626328 8.07989 0.646298 10.0278 1.82119C11.9566 3.02 13.1288 5.15954 13.1179 7.46108C13.073 9.74752 11.816 11.8968 10.2448 13.5583C9.33792 14.5215 8.32342 15.3733 7.22203 16.0962C7.10859 16.1618 6.98434 16.2057 6.8554 16.2258C6.73131 16.2205 6.61045 16.1838 6.50374 16.1191C4.82225 15.0329 3.34707 13.6464 2.14917 12.0263C1.1468 10.674 0.577319 9.04019 0.518067 7.34676C0.516766 5.0408 1.73016 2.91142 3.69653 1.76888ZM4.83313 8.30119C5.1639 9.11664 5.94465 9.64854 6.81083 9.64855C7.37828 9.65262 7.92375 9.42533 8.32571 9.01731C8.72767 8.6093 8.95272 8.05446 8.95071 7.47643C8.95374 6.59412 8.4343 5.79697 7.63492 5.45718C6.83555 5.1174 5.91392 5.302 5.30037 5.9248C4.68682 6.5476 4.50236 7.48574 4.83313 8.30119Z" fill="#E2793F"/>
-<ellipse opacity="0.4" cx="6.81738" cy="18.026" rx="4.5" ry="0.9" fill="#E2793F"/>
-</svg>

assets/icons/svg/search.svg

@@ -1,3 +0,0 @@
-<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.61478 9.40119C6.08057 9.40119 6.5418 9.30411 6.97213 9.1155C7.40246 8.92689 7.79347 8.65043 8.12283 8.30192C8.45219 7.95341 8.71346 7.53967 8.89171 7.08432C9.06996 6.62897 9.1617 6.14092 9.1617 5.64805C9.1617 5.15518 9.06996 4.66714 8.89171 4.21179C8.71346 3.75644 8.45219 3.34269 8.12283 2.99418C7.79347 2.64567 7.40246 2.36922 6.97213 2.18061C6.5418 1.99199 6.08057 1.89492 5.61478 1.89492C4.67408 1.89492 3.7719 2.29033 3.10673 2.99418C2.44155 3.69803 2.06786 4.65266 2.06786 5.64805C2.06786 6.64345 2.44155 7.59807 3.10673 8.30192C3.7719 9.00577 4.67408 9.40119 5.61478 9.40119ZM9.35087 8.71687L11.4672 10.9562C11.5236 11.014 11.5686 11.083 11.5995 11.1594C11.6305 11.2357 11.6467 11.3178 11.6473 11.4009C11.648 11.4839 11.633 11.5663 11.6032 11.6431C11.5734 11.72 11.5295 11.7898 11.4739 11.8485C11.4184 11.9072 11.3523 11.9536 11.2797 11.985C11.207 12.0164 11.1292 12.0321 11.0507 12.0314C10.9722 12.0306 10.8946 12.0133 10.8225 11.9804C10.7504 11.9476 10.6852 11.8999 10.6307 11.8401L8.51439 9.60073C7.56409 10.3813 6.36838 10.7493 5.17068 10.6298C3.97298 10.5104 2.86332 9.91244 2.06759 8.95773C1.27187 8.00303 0.849896 6.76333 0.887577 5.491C0.925257 4.21867 1.41976 3.00936 2.27042 2.10925C3.12107 1.20914 4.26394 0.685884 5.46636 0.646012C6.66877 0.606141 7.84036 1.05265 8.74261 1.89463C9.64486 2.73662 10.2099 3.9108 10.3228 5.17813C10.4357 6.44547 10.0879 7.71069 9.35028 8.71624L9.35087 8.71687Z" fill="#7C7C7C"/>
-</svg>

components/ThemedText.tsx

@@ -1,79 +1,31 @@
-import { StyleProp, StyleSheet, Text, TextStyle, type TextProps } from 'react-native';
+import { StyleSheet, Text, type TextProps } from 'react-native';
 
-import { Colors } from '@/constants/Colors';
-import { FontColor, Fonts, FontSize, FontWeight } from '@/constants/Fonts';
 import { useThemeColor } from '@/hooks/useThemeColor';
 
-export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;
-export type ColorValue = `#${string}` | `rgb(${string})` | `rgba(${string})` | string;
-
 export type ThemedTextProps = TextProps & {
   lightColor?: string;
   darkColor?: string;
-  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link' | 'sfPro' | 'inter';
-  weight?: FontWeight;
-  size?: FontSize;
-  radius?: FontSize
-  color?: ThemeColor | FontColor | ColorValue;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
-export function isFontColorKey(key: string): key is FontColor {
-  return ['bgPrimary', 'bgSecondary', 'textPrimary', 'textSecondary', 'textThird', 'textWhite'].includes(key);
-}
-
 export function ThemedText({
   style,
   lightColor,
   darkColor,
   type = 'default',
-  weight = 'regular',
-  size,
-  radius,
-  color,
   ...rest
 }: ThemedTextProps) {
-
-  const themeColor = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
-
-  const textColor = (() => {
-    if (!color) return themeColor;
-
-    // 检查是否是主题颜色
-    const themeColors = Object.keys(Colors.light) as ThemeColor[];
-    if (themeColors.includes(color as ThemeColor)) {
-      return useThemeColor({ light: lightColor, dark: darkColor }, color as ThemeColor);
-    }
-
-    // 检查是否是 Fonts 中定义的颜色
-    if (isFontColorKey(color)) {
-      return Fonts[color as FontColor];
-    }
-
-    // 返回自定义颜色值
-    return color;
-  })();
-
-
-  const baseStyle: StyleProp<TextStyle> = {
-    fontFamily: Fonts.quicksand,
-    color: textColor,
-    fontWeight: Number(Fonts[weight as keyof typeof Fonts]) as TextStyle['fontWeight'],
-  };
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
 
   return (
     <Text
       style={[
-        baseStyle,
+        { color },
         type === 'default' ? styles.default : undefined,
         type === 'title' ? styles.title : undefined,
         type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
         type === 'subtitle' ? styles.subtitle : undefined,
         type === 'link' ? styles.link : undefined,
-        type === 'sfPro' ? styles.sfPro : undefined,
-        type === 'inter' ? styles.inter : undefined,
-        size && { fontSize: Number(Fonts[size as keyof typeof Fonts]) },
-        weight && { fontWeight: Number(Fonts[weight as keyof typeof Fonts]) as TextStyle['fontWeight'] },
-        color && { color: textColor },
         style,
       ]}
       {...rest}
@@ -83,41 +35,26 @@ export function ThemedText({
 
 const styles = StyleSheet.create({
   default: {
-    fontSize: Number(Fonts.base),
+    fontSize: 16,
     lineHeight: 24,
-    fontFamily: Fonts.quicksand,
   },
   defaultSemiBold: {
-    fontSize: Number(Fonts.base),
+    fontSize: 16,
     lineHeight: 24,
     fontWeight: '600',
   },
   title: {
-    fontSize: Fonts['2xl'],
-    fontWeight: '700',
+    fontSize: 32,
+    fontWeight: 'bold',
     lineHeight: 32,
   },
   subtitle: {
-    fontSize: Fonts.lg,
-    fontWeight: '600',
-    lineHeight: 28,
+    fontSize: 20,
+    fontWeight: 'bold',
   },
   link: {
-    fontSize: Fonts.sm,
-    lineHeight: 20,
+    lineHeight: 30,
+    fontSize: 16,
     color: '#0a7ea4',
-    textDecorationLine: 'underline',
-  },
-  sfPro: {
-    fontSize: Number(Fonts.base),
-    lineHeight: 24,
-    fontWeight: '600',
-    fontFamily: Fonts.sfPro,
-  },
-  inter: {
-    fontSize: Number(Fonts.base),
-    lineHeight: 24,
-    fontWeight: '600',
-    fontFamily: Fonts.inter,
   },
 });

components/ThemedView.tsx

@@ -1,32 +1,9 @@
-import { Colors } from '@/constants/Colors';
-import { FontColor, Fonts } from '@/constants/Fonts';
-import { useThemeColor } from '@/hooks/useThemeColor';
 import { View, type ViewProps } from 'react-native';
-import { ColorValue, isFontColorKey, ThemeColor } from './ThemedText';
 
 type ThemedViewProps = ViewProps & {
   className?: string;
-  bgColor?: FontColor | ColorValue | string;
 };
 
-export function ThemedView({ className, style, bgColor, ...props }: ThemedViewProps) {
-  const themeColor = useThemeColor({ light: bgColor, dark: bgColor }, 'background');
-
-  const bgColorValue = (() => {
-    if (!bgColor) return themeColor;
-
-    // 检查是否是主题颜色
-    const themeColors = Object.keys(Colors.light) as ThemeColor[];
-    if (themeColors.includes(bgColor as ThemeColor)) {
-      return useThemeColor({ light: bgColor, dark: bgColor }, bgColor as ThemeColor);
-    }
-    // 检查是否是 Fonts 中定义的颜色
-    if (isFontColorKey(bgColor)) {
-      return Fonts[bgColor];
-    }
-    // 返回自定义颜色值
-    return bgColor;
-  })();
-
-  return <View className={className} style={[{ backgroundColor: bgColorValue }, style]} {...props} />;
+export function ThemedView({ className, style, ...props }: ThemedViewProps) {
+  return <View className={className} style={style} {...props} />;
 }

components/ask/chat.tsx

@@ -1,11 +1,9 @@
 import { ContentPart, Message } from '@/types/ask';
-import { useFocusEffect } from 'expo-router';
 import React, { Dispatch, ForwardedRef, forwardRef, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
     FlatList,
     FlatListProps,
-    Keyboard,
     SafeAreaView,
     View
 } from 'react-native';
@@ -54,13 +52,6 @@ function ChatComponent(
         }
     }, [userMessages.length]);
 
-    useFocusEffect(
-        useCallback(() => {
-            Keyboard.dismiss();
-        }, [Keyboard, sessionId])
-    );
-
-
     const renderMessageItem = useCallback(({ item, index }: { item: Message, index: number }) => {
         const itemStyle = index === 0 ? { marginTop: 16, marginHorizontal: 16 } : { marginHorizontal: 16 };
         return (

components/ask/hello.tsx

@@ -1,10 +1,9 @@
 import { ThemedText } from "@/components/ThemedText";
-import { Fonts } from "@/constants/Fonts";
 import { webSocketManager } from "@/lib/websocket-util";
 import { Message } from "@/types/ask";
-import { Dispatch, SetStateAction } from "react";
+import { Dispatch, SetStateAction, useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Dimensions, Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Image, ScrollView, StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import { createNewConversation } from "./utils";
 
 interface AskHelloProps {
@@ -14,39 +13,63 @@ interface AskHelloProps {
 }
 export default function AskHello({ setUserMessages, setConversationId, setIsHello }: AskHelloProps) {
     const { t } = useTranslation();
-    const width = Dimensions.get('window').width;
-    const height = Dimensions.get('window').height;
+    const { width, height } = useWindowDimensions();
 
-    const handleCase = async (text: string) => {
-        setIsHello(false);
-        setUserMessages([
-            {
-                id: Math.random().toString(36).substring(2, 9),
-                content: text,
-                role: 'user',
-                timestamp: new Date().toISOString()
-            },
-            {
-                id: Math.random().toString(36).substring(2, 9),
-                content: "keepSearchIng",
-                role: 'assistant',
-                timestamp: new Date().toISOString()
+    const inFlightRef = useRef(false);
+
+    const handleCase = useCallback(async (text: string) => {
+        if (inFlightRef.current) return;
+        inFlightRef.current = true;
+        try {
+            // UI
+            setIsHello(false);
+            setUserMessages([
+                {
+                    id: Math.random().toString(36).substring(2, 9),
+                    content: text,
+                    role: 'user',
+                    timestamp: new Date().toISOString()
+                },
+                {
+                    id: Math.random().toString(36).substring(2, 9),
+                    content: "keepSearchIng",
+                    role: 'assistant',
+                    timestamp: new Date().toISOString()
+                }
+            ]);
+
+            const sessionId = await createNewConversation(text);
+            if (!sessionId) {
+                console.error("Failed to create a new conversation.");
+
+                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
+                return;
             }
-        ]);
 
-        const sessionId = await createNewConversation(text);
-        if (sessionId) {
             setConversationId(sessionId);
-            webSocketManager.send({
-                type: 'Chat',
-                session_id: sessionId,
-                message: text
-            });
-        } else {
-            console.error("Failed to create a new conversation.");
+            try {
+                if (webSocketManager && typeof (webSocketManager as any).send === 'function') {
+                    (webSocketManager as any).send({
+                        type: 'Chat',
+                        session_id: sessionId,
+                        message: text
+                    });
+                } else {
+                    throw new Error('WebSocket manager is not ready');
+                }
+            } catch (wsErr) {
+                console.error('WebSocket send failed:', wsErr);
+                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
+            }
+        } catch (err) {
+            console.error('handleCase failed:', err);
+
             setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
+        } finally {
+            inFlightRef.current = false;
         }
-    }
+    }, [setConversationId, setIsHello, setUserMessages]);
+
     return (
         <View className="flex-1 bg-white w-full">
             <ScrollView
@@ -59,13 +82,15 @@ export default function AskHello({ setUserMessages, setConversationId, setIsHell
                 keyboardShouldPersistTaps="handled"
             >
                 <View className="items-center">
-                    <ThemedText style={{ textAlign: 'center', lineHeight: 40, }} size="title" weight="bold">
+                    <ThemedText style={{ fontSize: 32, fontWeight: 'bold', textAlign: 'center', lineHeight: 40, }}>
                         {t('ask.hi', { ns: 'ask' })}
                         {"\n"}
                         {t('ask.iAmMemo', { ns: 'ask' })}
                     </ThemedText>
-                    <Image source={require('@/assets/images/png/icon/ip.png')} style={{ width: width * 0.4, height: height * 0.25 }} />
-                    <ThemedText className="text-center -mt-10" size='base' color="textPrimary" type="sfPro" weight="medium">
+                    <View>
+                        <Image source={require('@/assets/images/png/icon/ip.png')} style={{ width: width * 0.5, height: height * 0.3 }} />
+                    </View>
+                    <ThemedText className="!text-textPrimary text-center -mt-10" style={{ fontSize: 16 }}>
                         {t('ask.ready', { ns: 'ask' })}
                         {"\n"}
                         {t('ask.justAsk', { ns: 'ask' })}
@@ -95,7 +120,7 @@ export default function AskHello({ setUserMessages, setConversationId, setIsHell
                     </View>
                 </View>
             </ScrollView>
-        </View>
+        </View >
     );
 }
 
@@ -105,20 +130,18 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         flexWrap: 'wrap',
         justifyContent: 'center',
-        gap: 8,
         width: '100%',
         marginTop: 16
     },
     case: {
         borderWidth: 1,
-        borderColor: Fonts["textPrimary"],
+        borderColor: "#AC7E35",
         borderRadius: 10,
         paddingHorizontal: 8,
-        paddingVertical: 2,
+        marginHorizontal: 4,
+        marginVertical: 4,
         width: 'auto',
-        fontSize: Fonts["sm"],
-        color: Fonts["textSecondary"],
-        fontFamily: Fonts["sfPro"]
-
+        fontSize: 14,
+        color: "#4C320C"
     }
 })

components/ask/send.tsx

@@ -12,7 +12,6 @@ import {
     View
 } from 'react-native';
 
-import { Fonts } from '@/constants/Fonts';
 import { webSocketManager, WsMessage } from '@/lib/websocket-util';
 import { Message } from '@/types/ask';
 import { useTranslation } from 'react-i18next';
@@ -26,12 +25,11 @@ interface Props {
     setConversationId: (conversationId: string) => void,
     selectedImages: string[];
     setSelectedImages: Dispatch<SetStateAction<string[]>>;
-    isHello: boolean;
 }
 const RENDER_INTERVAL = 50; // 渲染间隔，单位毫秒
 
 export default function SendMessage(props: Props) {
-    const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages, isHello } = props;
+    const { setIsHello, conversationId, setUserMessages, setConversationId, selectedImages, setSelectedImages } = props;
 
     const { t } = useTranslation()
 
@@ -191,33 +189,32 @@ export default function SendMessage(props: Props) {
             }
             ]));
             let currentSessionId = conversationId;
-            console.log("currentSessionIdcurrentSessionId", currentSessionId);
-
             // 如果没有对话ID，先创建一个新对话
             if (!currentSessionId) {
-                const newCurrentSessionId = await createNewConversation(text);
-                if (newCurrentSessionId) {
-                    setConversationId(newCurrentSessionId);
-                } else {
-                    console.error("无法获取 session_id，消息发送失败1。");
-                    setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
-                }
+                currentSessionId = await createNewConversation(text);
+                setConversationId(currentSessionId);
+                webSocketManager.send({
+                    type: 'Chat',
+                    session_id: currentSessionId,
+                    message: text,
+                    image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
+                });
+                setSelectedImages([]);
             }
 
             // 通过 WebSocket 发送消息
             if (currentSessionId) {
-                try {
-                    webSocketManager.send({
-                        type: 'Chat',
-                        session_id: currentSessionId,
-                        message: text,
-                        image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
-                    });
-                    setSelectedImages([]);
-                } catch (error) {
-                    console.error("无法获取 session_id，消息发送失败2。", error);
-                    setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
-                }
+                webSocketManager.send({
+                    type: 'Chat',
+                    session_id: currentSessionId,
+                    message: text,
+                    image_material_ids: selectedImages.length > 0 ? selectedImages : undefined,
+                });
+                setSelectedImages([]);
+            } else {
+                console.error("无法获取 session_id，消息发送失败。");
+                // 可以在这里处理错误，例如显示一个提示
+                setUserMessages(prev => prev.filter(item => item.content !== 'keepSearchIng'));
             }
             // 将输入框清空
             setInputValue('');
@@ -246,20 +243,19 @@ export default function SendMessage(props: Props) {
     return (
         <View style={styles.container}>
             <View className="relative w-full">
-                <ScrollView horizontal={true} style={{ display: isHello ? 'flex' : 'none' }}>
+                <ScrollView horizontal={true}>
                     <TouchableOpacity style={[styles.button, { borderColor: '#FFB645' }]} onPress={() => handleQuitly('search')}>
                         <SunSvg width={18} height={18} />
-                        <ThemedText type="sfPro" size="sm" weight='regular' color='textSecondary'>{t("ask:ask.search")}</ThemedText>
-                    </TouchableOpacity>
-                    <TouchableOpacity style={[styles.button, { borderColor: '#E2793F' }]} onPress={() => handleQuitly('video')}>
+                        <ThemedText>{t("ask:ask.search")}</ThemedText>
+                    </TouchableOpacity><TouchableOpacity style={[styles.button, { borderColor: '#E2793F' }]} onPress={() => handleQuitly('video')}>
                         <VideoSvg width={18} height={18} />
-                        <ThemedText type="sfPro" size="sm" weight='regular' color='textSecondary'>{t("ask:ask.video")}</ThemedText>
+                        <ThemedText>{t("ask:ask.video")}</ThemedText>
                     </TouchableOpacity>
                 </ScrollView>
                 <TextInput
                     style={styles.input}
                     placeholder="Ask MeMo Anything..."
-                    placeholderTextColor={Fonts["textPrimary"]}
+                    placeholderTextColor="#999"
                     value={inputValue}
                     onChangeText={(text: string) => {
                         setInputValue(text);
@@ -273,7 +269,7 @@ export default function SendMessage(props: Props) {
                     style={{
                         position: 'absolute',
                         right: 6,
-                        bottom: 9
+                        bottom: 6
                     }}
                 >
                     <SendSvg />
@@ -290,35 +286,28 @@ const styles = StyleSheet.create({
         margin: 5,
         borderRadius: 25,
         alignItems: 'center',
-        borderWidth: 1,
+        borderWidth: 2,
         display: 'flex',
         flexDirection: 'row',
         gap: 5,
+        // backgroundColor: '#F8F8F8'
     },
     container: {
         justifyContent: 'center',
         backgroundColor: '#transparent',
     },
     input: {
-        color: Fonts["textPrimary"],
+        // borderColor: '#d9d9d9',
         borderColor: '#AC7E35',
         borderWidth: 1,
-        borderRadius: 28,
+        // borderRadius: 18,
+        borderRadius: 25,
         paddingHorizontal: 20,
-        paddingVertical: 16,
+        paddingVertical: 13,
         lineHeight: 20,
         fontSize: 16,
-        width: '100%',
-        paddingRight: 50,
-        backgroundColor: '#fff',
-        shadowColor: '#000',
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.15,
-        shadowRadius: 3.84,
-        elevation: 5,
+        width: '100%', // 确保输入框宽度撑满
+        paddingRight: 50
     },
     voiceButton: {
         padding: 8,

components/cascader.tsx

@@ -72,7 +72,7 @@ const CascaderComponent: React.FC<CascaderProps> = ({
     // 渲染某一级选项
     const renderLevel = (items: CascaderItem[], level: number) => {
         return (
-            <View style={[styles.levelContainer]}>
+            <View style={[styles.levelContainer, { width: columnWidth }]}>
                 {items.map((item, index) => {
                     const isActive = selectedItems[level]?.name === item.name;
                     return (
@@ -95,7 +95,6 @@ const CascaderComponent: React.FC<CascaderProps> = ({
                                             textStyle,
                                             isActive && [styles.activeText, activeTextStyle]
                                         ]}
-                                        type='sfPro'
                                     >
                                         {item.name}
                                     </ThemedText>
@@ -113,46 +112,27 @@ const CascaderComponent: React.FC<CascaderProps> = ({
 
     // 渲染所有级联列
     const renderColumns = () => {
-        const totalLevels = allLevelsData.length;
-        return allLevelsData.map((items, level) => {
-            // 计算每列的宽度
-            let width;
-            if (totalLevels === 1) {
-                width = '100%'; // 只有一级时占满全部宽度
-            } else if (totalLevels === 2) {
-                width = level === 0 ? '40%' : '60%'; // 两级时第一级40%，第二级60%
-            } else {
-                // 三级或以上时，前两级各占30%，其余级别平分剩余40%
-                if (level < 2) {
-                    width = '30%';
-                } else {
-                    const remainingLevels = totalLevels - 2;
-                    width = remainingLevels > 0 ? `${40 / remainingLevels}%` : '40%';
-                }
-            }
-
-            return (
-                <View
-                    key={`column-${level}`}
-                    style={[
-                        styles.column,
-                        { width },
-                        showDivider && level < totalLevels - 1 && [
-                            styles.columnWithDivider,
-                            { borderRightColor: dividerColor }
-                        ]
-                    ]}
+        return allLevelsData.map((items, level) => (
+            <View
+                key={`column-${level}`}
+                style={[
+                    styles.column,
+                    { width: columnWidth },
+                    showDivider && level < allLevelsData.length - 1 && [
+                        styles.columnWithDivider,
+                        { borderRightColor: dividerColor }
+                    ]
+                ]}
+            >
+                <ScrollView
+                    style={{ flex: 1 }}
+                    showsVerticalScrollIndicator={true}
+                    contentContainerStyle={{ paddingBottom: 20 }}
                 >
-                    <ScrollView
-                        style={{ flex: 1 }}
-                        showsVerticalScrollIndicator={true}
-                        contentContainerStyle={{ paddingBottom: 20 }}
-                    >
-                        {renderLevel(items, level)}
-                    </ScrollView>
-                </View>
-            );
-        });
+                    {renderLevel(items, level)}
+                </ScrollView>
+            </View>
+        ));
     };
 
     // 自定义显示内容
@@ -186,17 +166,15 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: '#fff',
-        height: 300,
+        height: 300, // Set a fixed height for the container
     },
     scrollContent: {
         flexGrow: 1,
         height: '100%',
-        flexDirection: 'row',
     },
     column: {
         height: '100%',
         maxHeight: '100%',
-        flexShrink: 0,
     },
     columnWithDivider: {
         borderRightWidth: 1,

components/chat/message-item/MessageBubble.tsx

@@ -26,7 +26,7 @@ const MessageBubble = ({
 }: MessageBubbleProps) => {
     return (
         <View
-            className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble  rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-3xl' : '!rounded-3xl'} px-3`}
+            className={`${isUser ? '!bg-bgPrimary ml-10 rounded-full' : '!bg-aiBubble  rounded-2xl'} border-0 ${!isUser && isMessageContainMedia(item) ? '!rounded-t-3xl !rounded-b-2xl' : '!rounded-3xl'} px-3`}
             style={{ marginRight: getMessageText(item) == "keepSearchIng" ? 0 : isUser ? 0 : 10 }}
         >
             <MessageContent

components/chat/message-item/message-item.tsx

@@ -3,11 +3,9 @@ import { ContentPart, Message, User } from "@/types/ask";
 import { TFunction } from "i18next";
 import React from 'react';
 import {
-    StyleSheet,
     View
 } from 'react-native';
 
-import { Fonts } from "@/constants/Fonts";
 import MessageRow from './MessageRow';
 
 interface RenderMessageProps {
@@ -42,40 +40,23 @@ const MessageItem = ({ setCancel, cancel = true, t, insets, item, sessionId, set
                     setSelectedImages={setSelectedImages}
                     setModalDetailsVisible={setModalDetailsVisible}
                 />
-                {/* {item.content instanceof Array && item.content.filter((media: ContentPart) => media.type !== 'text').length > 0 && (
-                    <View style={styles.tips}>
-                        <TouchableOpacity style={[styles.tip, { borderRadius: 16 }]} onPress={() => {
-
-                        }}>
-                            <ThemedText style={styles.tipText}>Help me create a warm, cozy video.</ThemedText>
-                        </TouchableOpacity>
-                        <TouchableOpacity style={[styles.tip, { borderTopLeftRadius: 16, borderTopRightRadius: 16, borderBottomLeftRadius: 24, borderBottomRightRadius: 24 }]}>
-                            <ThemedText style={styles.tipText}>Help me find materials for subsequent operations.</ThemedText>
-                        </TouchableOpacity>
+                {/* {item.askAgain && item.askAgain.length > 0 && (
+                    <View className={`mr-10`}>
+                        {item.askAgain.map((suggestion, index, array) => (
+                            <TouchableOpacity
+                                key={suggestion.id}
+                                className={`bg-yellow-50 rounded-xl px-4 py-2 border border-yellow-200 border-0 mb-2 ${index === array.length - 1 ? 'mb-0 rounded-b-3xl rounded-t-2xl' : 'rounded-2xl'}`}
+                            >
+                                <Text className="text-gray-700">{suggestion.text}</Text>
+                            </TouchableOpacity>
+                        ))}
                     </View>
                 )} */}
+
             </View>
         </View>
     );
 };
 
-const styles = StyleSheet.create({
-    tips: {
-        flexDirection: 'column',
-        gap: 5,
-        marginRight: 10,
-    },
-    tip: {
-        backgroundColor: '#FFF8DE',
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-    },
-    tipText: {
-        color: '#4C320C',
-        fontSize: 14,
-        fontFamily: Fonts['inter']
-    }
-});
-
 export default React.memo(MessageItem);
 

components/layout/ask.tsx

@@ -3,8 +3,9 @@ import ChatNotInSvg from "@/assets/icons/svg/chatNotIn.svg";
 import PersonInSvg from "@/assets/icons/svg/personIn.svg";
 import PersonNotInSvg from "@/assets/icons/svg/personNotIn.svg";
 import { WebSocketStatus } from "@/lib/websocket-util";
-import { router, usePathname } from "expo-router";
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { router } from "expo-router";
+import React, { useMemo } from 'react';
 import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
 import Svg, { Circle, Ellipse, G, Mask, Path, Rect } from "react-native-svg";
 
@@ -42,14 +43,15 @@ const CenterButtonSvg = React.memo(() => (
     </Svg>
 ));
 
-interface AskNavbarProps {
+type AskNavbarProps = BottomTabBarProps & {
     wsStatus: WebSocketStatus;
-}
+};
 
-const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
+const AskNavbar = ({ state, descriptors, navigation, wsStatus }: AskNavbarProps) => {
     // 获取设备尺寸
     const { width } = useMemo(() => Dimensions.get('window'), []);
-    const pathname = usePathname();
+    const { routes, index } = state;
+    const currentRouteName = routes[index].name;
 
     const statusColor = useMemo(() => {
         switch (wsStatus) {
@@ -64,34 +66,6 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
         }
     }, [wsStatus]);
 
-    // 预加载目标页面
-    useEffect(() => {
-        const preloadPages = async () => {
-            try {
-                await Promise.all([
-                    router.prefetch('/memo-list'),
-                    router.prefetch('/ask'),
-                    router.prefetch('/owner')
-                ]);
-            } catch (error) {
-                console.warn('预加载页面失败:', error);
-            }
-        };
-        preloadPages();
-    }, []);
-
-    // 使用 useCallback 缓存导航函数
-    const navigateTo = useCallback((route: string) => {
-        if (route === '/ask') {
-            router.push({
-                pathname: '/ask',
-                params: { newSession: "true" }
-            });
-        } else {
-            router.push(route as any);
-        }
-    }, []);
-
     // 使用 useMemo 缓存样式对象
     const styles = useMemo(() => StyleSheet.create({
         container: {
@@ -116,18 +90,18 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
             bottom: 0,
             left: 0,
             right: 0,
-            height: 80,
+            height: 80, // Set a fixed height for the navbar
             flexDirection: 'row',
             justifyContent: 'space-between',
             alignItems: 'center',
             paddingHorizontal: 32,
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent', // Make sure it's transparent
         },
         centerButton: {
             position: 'absolute',
-            left: '50%',
-            top: -30,
-            transform: [{ translateX: -17 }],
+            left: width / 2,
+            top: -30,  // Adjust this value to move the button up or down
+            marginLeft: -42.5,  // Half of the button width (85/2)
             width: 85,
             height: 85,
             justifyContent: 'center',
@@ -143,8 +117,8 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
         },
         statusIndicator: {
             position: 'absolute',
-            top: 3,
-            right: 20,
+            top: 15,
+            right: 15,
             width: 10,
             height: 10,
             borderRadius: 5,
@@ -156,27 +130,27 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
     }), [width, statusColor]);
 
     // 如果当前路径是ask页面，则不渲染导航栏
-    if (pathname != '/memo-list' && pathname != '/owner') {
+    if (currentRouteName !== 'memo-list' && currentRouteName !== 'owner') {
         return null;
     }
 
     return (
         <View style={styles.container}>
-            <Image source={require('@/assets/images/png/owner/ask.png')} style={{ width: "100%" }} />
+            <Image source={require('@/assets/images/png/owner/ask.png')} style={{ width: width * 1.18, height: 100, resizeMode: 'cover', marginLeft: -width * 0.07 }} />
             <View style={styles.navContainer}>
                 <TouchableOpacity
-                    onPress={() => navigateTo('/memo-list')}
+                    onPress={() => navigation.navigate('memo-list')}
                     style={[styles.navButton, { alignItems: "flex-start", paddingLeft: 16 }]}
                 >
                     <TabIcon
-                        isActive={pathname === "/memo-list"}
+                        isActive={currentRouteName === "memo-list"}
                         ActiveIcon={ChatInSvg}
                         InactiveIcon={ChatNotInSvg}
                     />
                 </TouchableOpacity>
 
                 <TouchableOpacity
-                    onPress={() => navigateTo('/ask')}
+                    onPress={() => router.push({ pathname: '/ask', params: { newSession: "true" } })}
                     style={styles.centerButton}
                 >
                     <View style={styles.statusIndicator} />
@@ -184,11 +158,11 @@ const AskNavbar = ({ wsStatus }: AskNavbarProps) => {
                 </TouchableOpacity>
 
                 <TouchableOpacity
-                    onPress={() => navigateTo('/owner')}
+                    onPress={() => navigation.navigate('owner')}
                     style={styles.navButton}
                 >
                     <TabIcon
-                        isActive={pathname === "/owner"}
+                        isActive={currentRouteName === "owner"}
                         ActiveIcon={PersonInSvg}
                         InactiveIcon={PersonNotInSvg}
                     />

components/login/code.tsx

@@ -115,13 +115,13 @@ const Code = ({ phone }: CodeProps) => {
         <View style={styles.container}>
             <View style={styles.contentContainer}>
                 <View style={styles.headerContainer}>
-                    <ThemedText style={styles.title} color="textSecondary" size="xl" weight="bold">
+                    <ThemedText style={styles.title}>
                         {t("auth.telLogin.codeTitle", { ns: 'login' })}
                     </ThemedText>
-                    <ThemedText style={styles.subtitle} type="sfPro" color="textPrimary" size="sm">
+                    <ThemedText style={styles.subtitle}>
                         {t("auth.telLogin.secondTitle", { ns: 'login' })}
                     </ThemedText>
-                    <ThemedText color="bgSecondary" size="sm" weight="bold">
+                    <ThemedText style={styles.phoneNumber}>
                         {phone}
                     </ThemedText>
                 </View>
@@ -144,13 +144,13 @@ const Code = ({ phone }: CodeProps) => {
                 />
                 <View style={[styles.errorContainer, { opacity: error ? 1 : 0 }]}>
                     <Error />
-                    <ThemedText style={styles.errorText} size="xxs" color="bgSecondary" type="inter">
+                    <ThemedText style={styles.errorText}>
                         {error}
                     </ThemedText>
                 </View>
 
                 <View style={styles.footerContainer}>
-                    <ThemedText size="sm" color="textPrimary" type="sfPro">
+                    <ThemedText style={styles.footerText}>
                         {t("auth.telLogin.sendAgain", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
@@ -158,16 +158,10 @@ const Code = ({ phone }: CodeProps) => {
                             sendVerificationCode()
                         }
                     }}>
-                        <ThemedText
-                            style={[
-                                styles.resendText,
-                                countdown > 0 && styles.disabledResendText
-                            ]}
-                            size="sm"
-                            color="bgSecondary"
-                            type="inter"
-                            weight="bold"
-                        >
+                        <ThemedText style={[
+                            styles.resendText,
+                            countdown > 0 && styles.disabledResendText
+                        ]}>
                             {countdown > 0 ? `${countdown}s${t("auth.telLogin.resend", { ns: 'login' })}` : t("auth.telLogin.resend", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
@@ -191,13 +185,23 @@ const styles = StyleSheet.create({
         marginBottom: 16,
     },
     title: {
+        fontSize: 24,
+        fontWeight: '600',
         marginBottom: 8,
         paddingTop: 4,
+        color: '#111827',
     },
     subtitle: {
+        fontSize: 16,
+        color: '#4B5563',
         textAlign: 'center',
         marginBottom: 4,
     },
+    phoneNumber: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#E2793F',
+    },
     otpContainer: {
         width: '100%',
         height: 80,
@@ -224,6 +228,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     errorText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: '#E2793F',
         marginLeft: 8,
     },
     footerContainer: {
@@ -231,7 +238,12 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         marginTop: 8,
     },
+    footerText: {
+        color: '#6B7280',
+    },
     resendText: {
+        color: '#E2793F',
+        fontWeight: '500',
         marginLeft: 4,
     },
     disabledResendText: {

components/login/forgetPwd.tsx

@@ -1,12 +1,9 @@
-import { Fonts } from "@/constants/Fonts";
 import { fetchApi } from "@/lib/server-api-util";
 import { User } from "@/types/user";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
 import { ThemedText } from "../ThemedText";
-import Button from "./ui/Button";
-import TextInput from "./ui/TextInput";
 
 interface LoginProps {
     setIsSignUp?: (isSignUp: string) => void;
@@ -72,29 +69,45 @@ const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
 
     return (
         <View style={styles.container}>
-            {/* 邮箱 */}
-            <TextInput
-                label={t('auth.forgetPwd.title', { ns: 'login' })}
-                placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
-                onChangeText={setEmail}
-                autoCapitalize="none"
-                value={email}
-            />
-            {/* 发送邮箱 */}
-            <Button
-                isLoading={isDisabled || loading}
-                handleLogin={handleSubmit}
-                text={isDisabled
-                    ? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
-                    : t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
-            />
+            <View style={styles.inputContainer}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.forgetPwd.title', { ns: 'login' })}
+                </ThemedText>
+                <TextInput
+                    style={styles.textInput}
+                    placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
+                    placeholderTextColor="#ccc"
+                    value={email}
+                    onChangeText={setEmail}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                />
+            </View>
+
+            <TouchableOpacity
+                style={[
+                    styles.submitButton,
+                    (isDisabled || loading) && styles.disabledButton
+                ]}
+                onPress={handleSubmit}
+                disabled={isDisabled || loading}
+            >
+                {loading ? (
+                    <ActivityIndicator color="#fff" />
+                ) : (
+                    <ThemedText style={styles.buttonText}>
+                        {isDisabled
+                            ? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
+                            : t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
+                    </ThemedText>
+                )}
+            </TouchableOpacity>
 
-            {/* 返回登录 */}
             <TouchableOpacity
                 style={styles.backButton}
                 onPress={handleBackToLogin}
             >
-                <ThemedText type='inter' color="bgSecondary" size="sm">
+                <ThemedText style={styles.backButtonText}>
                     {t('auth.forgetPwd.goback', { ns: 'login' })}
                 </ThemedText>
             </TouchableOpacity>
@@ -110,24 +123,16 @@ const styles = StyleSheet.create({
         marginBottom: 20,
     },
     inputLabel: {
-        fontSize: Fonts['base'],
-        color: Fonts['textPrimary'],
-        fontWeight: Fonts['bold'],
-        fontFamily: Fonts['sfPro'],
+        fontSize: 16,
+        color: '#1F2937',
         marginBottom: 8,
         marginLeft: 8,
     },
     textInput: {
-        borderRadius: Fonts['xs'],
-        paddingHorizontal: Fonts['base'],
-        paddingVertical: Fonts['xs'],
-        fontSize: Fonts['sm'],
-        lineHeight: Fonts['base'],
-        textAlignVertical: 'center',
-        backgroundColor: Fonts['bgInput'],
-        color: Fonts['textSecondary'],
-        fontFamily: Fonts['inter'],
-        paddingRight: Fonts['5xl'],
+        borderRadius: 12,
+        padding: 12,
+        fontSize: 16,
+        backgroundColor: '#FFF8DE',
     },
     submitButton: {
         width: '100%',
@@ -146,7 +151,11 @@ const styles = StyleSheet.create({
     backButton: {
         alignSelf: 'center',
         marginTop: 24,
-    }
+    },
+    backButtonText: {
+        color: '#1F2937',
+        fontSize: 14,
+    },
 });
 
 export default ForgetPwd;

components/login/login.tsx

@@ -1,15 +1,14 @@
-import { Fonts } from "@/constants/Fonts";
+import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
 import { useAuth } from "../../contexts/auth-context";
 import { fetchApi } from "../../lib/server-api-util";
 import { User } from "../../types/user";
 import { ThemedText } from "../ThemedText";
-import Button from "./ui/Button";
-import TextInput from "./ui/TextInput";
 
+const REMEMBER_ACCOUNT_KEY = 'fairclip_remembered_account';
 interface LoginProps {
     updateUrlParam: (status: string, value: string) => void;
     setError: (error: string) => void;
@@ -23,6 +22,7 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
     const [isLoading, setIsLoading] = useState(false);
     const [email, setEmail] = useState('');
     const [password, setPassword] = useState('');
+    const [rememberMe, setRememberMe] = useState(false);
 
     const handleLogin = async () => {
         if (!email) {
@@ -69,61 +69,75 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
 
     return (
         <View style={styles.container}>
+            <View style={[styles.inputContainer, { marginBottom: 20 }]}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.login.email', { ns: 'login' })}
+                </ThemedText>
+                <TextInput
+                    style={styles.textInput}
+                    placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
+                    placeholderTextColor="#ccc"
+                    value={email}
+                    onChangeText={(text) => {
+                        setEmail(text);
+                        setError('123');
+                    }}
+                    autoCapitalize="none"
+                />
+            </View>
 
-            {/* 邮箱 */}
-            <TextInput
-                label={t('auth.login.email', { ns: 'login' })}
-                placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
-                onChangeText={(text) => {
-                    setEmail(text);
-                    setError('123');
-                }}
-                autoCapitalize="none"
-                value={email}
-            />
+            <View style={styles.inputContainer}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.login.password', { ns: 'login' })}
+                </ThemedText>
+                <View style={styles.passwordInputContainer}>
+                    <TextInput
+                        style={[styles.textInput, { paddingRight: 48 }]}
+                        placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
+                        placeholderTextColor="#ccc"
+                        value={password}
+                        onChangeText={(text) => {
+                            setPassword(text);
+                            setError('123');
+                        }}
+                        secureTextEntry={!showPassword}
+                    />
+                    <TouchableOpacity
+                        style={styles.eyeIcon}
+                        onPress={() => setShowPassword(!showPassword)}
+                    >
+                        <Ionicons
+                            name={showPassword ? 'eye' : 'eye-off'}
+                            size={20}
+                            color="#666"
+                        />
+                    </TouchableOpacity>
+                </View>
+            </View>
 
-            {/* 密码 */}
-            <TextInput
-                label={t('auth.login.password', { ns: 'login' })}
-                placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
-                onChangeText={(text) => {
-                    setPassword(text);
-                    setError('123');
-                }}
-                autoCapitalize="none"
-                value={password}
-                type="password"
-                setShowPassword={setShowPassword}
-                showPassword={showPassword}
-                containerStyle={{ marginBottom: 0 }}
-            />
-
-            {/* 忘记密码 */}
             <TouchableOpacity
                 style={styles.forgotPassword}
                 onPress={handleForgotPassword}
             >
-                <ThemedText style={styles.forgotPasswordText} color="textPrimary" type="inter">
+                <ThemedText style={styles.forgotPasswordText}>
                     {t('auth.login.forgotPassword', { ns: 'login' })}
                 </ThemedText>
             </TouchableOpacity>
 
-            {/* 登录按钮 */}
-            <Button isLoading={isLoading} handleLogin={handleLogin} text={t('auth.login.loginButton', { ns: 'login' })} />
-
-            {/* 注册 */}
-            <View style={styles.signupContainer}>
-                <ThemedText style={styles.signupText} type="sfPro">
-                    {t('auth.login.signUpMessage', { ns: 'login' })}
-                </ThemedText>
-                <TouchableOpacity onPress={handleSignUp}>
-                    <ThemedText style={styles.signupLink} type="sfPro">
-                        {t('auth.login.signUp', { ns: 'login' })}
+            <TouchableOpacity
+                style={[styles.loginButton, isLoading && { opacity: 0.7 }]}
+                onPress={handleLogin}
+                disabled={isLoading}
+            >
+                {isLoading ? (
+                    <ActivityIndicator color="#fff" />
+                ) : (
+                    <ThemedText style={styles.loginButtonText}>
+                        {t('auth.login.loginButton', { ns: 'login' })}
                     </ThemedText>
-                </TouchableOpacity>
-            </View>
+                )}
+            </TouchableOpacity>
 
-            {/* 第三方登录 */}
             <View style={{ width: "100%", alignItems: "center", opacity: 0 }}>
                 <View style={styles.loginTypeContainer}>
                     <ThemedText>
@@ -136,6 +150,17 @@ const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: Logi
                     </View>
                 </View>
             </View>
+
+            <View style={styles.signupContainer}>
+                <ThemedText style={styles.signupText}>
+                    {t('auth.login.signUpMessage', { ns: 'login' })}
+                </ThemedText>
+                <TouchableOpacity onPress={handleSignUp}>
+                    <ThemedText style={styles.signupLink}>
+                        {t('auth.login.signUp', { ns: 'login' })}
+                    </ThemedText>
+                </TouchableOpacity>
+            </View>
         </View>
     );
 };
@@ -154,8 +179,8 @@ const styles = StyleSheet.create({
     },
     loginType: {
         borderRadius: 12,
-        width: 42,
-        height: 42,
+        width: 54,
+        height: 54,
         textAlign: 'center',
         backgroundColor: '#FADBA1'
     },
@@ -163,24 +188,19 @@ const styles = StyleSheet.create({
         marginBottom: 20,
     },
     inputLabel: {
-        fontSize: Fonts['base'],
-        color: Fonts['textPrimary'],
-        fontWeight: Fonts['bold'],
-        fontFamily: Fonts['sfPro'],
+        fontSize: 16,
+        color: '#AC7E35',
+        fontWeight: '600',
         marginBottom: 8,
         marginLeft: 8,
     },
     textInput: {
-        borderRadius: Fonts['xs'],
-        paddingHorizontal: Fonts['base'],
-        paddingVertical: Fonts['xs'],
-        fontSize: Fonts['sm'],
-        lineHeight: Fonts['base'],
+        borderRadius: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        fontSize: 14,
         textAlignVertical: 'center',
-        backgroundColor: Fonts['bgInput'],
-        color: Fonts['textSecondary'],
-        fontFamily: Fonts['inter'],
-        paddingRight: Fonts['5xl'],
+        backgroundColor: '#FFF8DE'
     },
     passwordInputContainer: {
         position: 'relative',
@@ -218,11 +238,11 @@ const styles = StyleSheet.create({
     },
     signupText: {
         color: '#AC7E35',
-        fontSize: Fonts['sm'],
+        fontSize: 17,
     },
     signupLink: {
         color: '#E2793F',
-        fontSize: Fonts['sm'],
+        fontSize: 17,
         fontWeight: '600',
         marginLeft: 4,
         textDecorationLine: 'underline',

components/login/phone.tsx

@@ -1,9 +1,9 @@
+import { fetchApi } from "@/lib/server-api-util";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
+import { ThemedText } from "../ThemedText";
 import { Steps } from "./phoneLogin";
-import Button from "./ui/Button";
-import TextInput from "./ui/TextInput";
 
 interface LoginProps {
     setSteps: (steps: Steps) => void;
@@ -18,30 +18,67 @@ const Phone = ({ setSteps, setPhone, phone, updateUrlParam }: LoginProps) => {
     const [error, setError] = useState<string>('');
 
     const sendVerificationCode = async () => {
-        setSteps('code')
-        updateUrlParam("status", "code");
-        return
+        if (!/^1[3-9]\d{9}$/.test(phone)) {
+            setError(t("auth.telLogin.phoneInvalid", { ns: 'login' }));
+            return;
+        }
+
+        try {
+            setIsLoading(true);
+
+            await fetchApi(`/iam/veritification-code`, {
+                method: 'POST',
+                body: JSON.stringify({ phone: phone }),
+            })
+            setSteps('code')
+            updateUrlParam("status", "code");
+            setIsLoading(false);
+        } catch (error) {
+            setPhone("")
+            setIsLoading(false);
+            // console.error(t("auth.telLogin.sendCodeError", { ns: 'login' }), error);
+        }
     };
 
     return <View>
         {/* 手机号输入框 */}
         <View className="mb-5">
+            <View className="w-full flex flex-row justify-between">
+                <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
+                    {t('auth.telLogin.title', { ns: 'login' })}
+                </ThemedText>
+                <ThemedText className="text-sm !text-textPrimary mb-2 ml-2">
+                    {error}
+                </ThemedText>
+            </View>
             <TextInput
-                label={t('auth.telLogin.title', { ns: 'login' })}
+                className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
                 placeholder={t('auth.telLogin.phoneRequired', { ns: 'login' })}
+                placeholderTextColor="#ccc"
+                value={phone}
                 onChangeText={(text) => {
                     setPhone(text);
                     setError('');
                 }}
                 keyboardType="email-address"
                 autoCapitalize="none"
-                value={phone}
-                error={error}
             />
         </View>
 
         {/* 发送验证码 */}
-        <Button isLoading={isLoading} handleLogin={sendVerificationCode} text={t('auth.telLogin.sendCode', { ns: 'login' })} />
+        <TouchableOpacity
+            className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''}`}
+            onPress={sendVerificationCode}
+            disabled={isLoading}
+        >
+            {isLoading ? (
+                <ActivityIndicator color="#fff" />
+            ) : (
+                <ThemedText className="!text-white font-semibold">
+                    {t('auth.telLogin.sendCode', { ns: 'login' })}
+                </ThemedText>
+            )}
+        </TouchableOpacity>
     </View>
 }
 

components/login/phoneLogin.tsx

@@ -15,9 +15,7 @@ const PhoneLogin = ({ updateUrlParam }: LoginProps) => {
 
     return <View>
         {
-            steps === "phone"
-                ? <Phone setSteps={setSteps} setPhone={setPhone} phone={phone} updateUrlParam={updateUrlParam} />
-                : <Code phone={phone} />
+            steps === "phone" ? <Phone setSteps={setSteps} setPhone={setPhone} phone={phone} updateUrlParam={updateUrlParam} /> : <Code phone={phone} />
         }
     </View>
 }

components/login/signUp.tsx

@@ -1,16 +1,13 @@
-import { Fonts } from "@/constants/Fonts";
 import { Ionicons } from "@expo/vector-icons";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useEffect, useState } from 'react';
 import { useTranslation } from "react-i18next";
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { useAuth } from "../../contexts/auth-context";
 import { fetchApi } from "../../lib/server-api-util";
 import { User } from "../../types/user";
 import { ThemedText } from "../ThemedText";
 import PrivacyModal from "../owner/qualification/privacy";
-import Button from "./ui/Button";
-import TextInput from "./ui/TextInput";
 
 interface LoginProps {
     updateUrlParam: (status: string, value: string) => void;
@@ -149,53 +146,100 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
     return (
         <View style={styles.container}>
             {/* 邮箱输入 */}
-            <TextInput
-                label={t('auth.login.email', { ns: 'login' })}
-                placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
-                onChangeText={(text) => {
-                    setEmail(text);
-                    setError('123');
-                }}
-                autoCapitalize="none"
-                keyboardType="email-address"
-                value={email}
-            />
+            <View style={styles.inputContainer}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.login.email', { ns: 'login' })}
+                </ThemedText>
+                <View style={styles.inputWrapper}>
+                    <TextInput
+                        style={styles.textInput}
+                        placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
+                        placeholderTextColor="#ccc"
+                        value={email}
+                        onChangeText={(value) => {
+                            setEmail(value)
+                            setError('123')
+                        }}
+                        keyboardType="email-address"
+                        autoCapitalize="none"
+                    />
+                </View>
+            </View>
 
             {/* 密码输入 */}
-            <TextInput
-                label={t('auth.login.password', { ns: 'login' })}
-                placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
-                autoCapitalize="none"
-                value={password}
-                onChangeText={(value) => {
-                    handlePasswordChange(value)
-                    setError('123')
-                }}
-                secureTextEntry={!showPassword}
-                type="password"
-                setShowPassword={setShowPassword}
-                showPassword={showPassword}
-            />
+            <View style={styles.inputContainer}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.login.password', { ns: 'login' })}
+                </ThemedText>
+                <View style={styles.passwordInputContainer}>
+                    <TextInput
+                        style={[styles.textInput, { flex: 1 }]}
+                        placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
+                        placeholderTextColor="#ccc"
+                        value={password}
+                        onChangeText={(value) => {
+                            handlePasswordChange(value)
+                            setError('123')
+                        }}
+                        secureTextEntry={!showPassword}
+                    />
+                    <TouchableOpacity
+                        onPress={() => setShowPassword(!showPassword)}
+                        style={styles.eyeIcon}
+                    >
+                        <Ionicons
+                            name={showPassword ? 'eye' : 'eye-off'}
+                            size={20}
+                            color="#666"
+                        />
+                    </TouchableOpacity>
+                </View>
+            </View>
 
             {/* 确认密码 */}
-            <TextInput
-                label={t('auth.signup.confirmPassword', { ns: 'login' })}
-                placeholder={t('auth.signup.confirmPasswordPlaceholder', { ns: 'login' })}
-                autoCapitalize="none"
-                value={confirmPassword}
-                onChangeText={(value) => {
-                    handleConfirmPasswordChange(value)
-                    setError('123')
-                }}
-                secureTextEntry={!showSecondPassword}
-                type="password"
-                setShowPassword={setShowSecondPassword}
-                showPassword={showSecondPassword}
-            />
+            <View style={[styles.inputContainer, { marginBottom: 24 }]}>
+                <ThemedText style={styles.inputLabel}>
+                    {t('auth.signup.confirmPassword', { ns: 'login' })}
+                </ThemedText>
+                <View style={styles.passwordInputContainer}>
+                    <TextInput
+                        style={[styles.textInput, { flex: 1 }]}
+                        placeholder={t('auth.signup.confirmPasswordPlaceholder', { ns: 'login' })}
+                        placeholderTextColor="#ccc"
+                        value={confirmPassword}
+                        onChangeText={(value) => {
+                            handleConfirmPasswordChange(value)
+                            setError('123')
+                        }}
+                        secureTextEntry={!showSecondPassword}
+                    />
+                    <TouchableOpacity
+                        onPress={() => setShowSecondPassword(!showSecondPassword)}
+                        style={styles.eyeIcon}
+                    >
+                        <Ionicons
+                            name={showSecondPassword ? 'eye' : 'eye-off'}
+                            size={20}
+                            color="#666"
+                        />
+                    </TouchableOpacity>
+                </View>
+            </View>
 
             {/* 注册按钮 */}
-            <Button isLoading={loading} handleLogin={handleSubmit} text={t("auth.signup.signupButton", { ns: 'login' })} />
-
+            <TouchableOpacity
+                style={[styles.signupButton, loading && { opacity: 0.7 }]}
+                onPress={handleSubmit}
+                disabled={loading}
+            >
+                {loading ? (
+                    <ActivityIndicator color="#fff" />
+                ) : (
+                    <ThemedText style={styles.signupButtonText}>
+                        {t("auth.signup.signupButton", { ns: 'login' })}
+                    </ThemedText>
+                )}
+            </TouchableOpacity>
             <View style={styles.termsContainer}>
                 <TouchableOpacity
                     onPress={() => {
@@ -215,68 +259,68 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                     ]}
                 >
                     {checked && (
-                        <Ionicons name="checkmark" size={14} color={Fonts['textSecondary']} />
+                        <Ionicons name="checkmark" size={14} color="white" />
                     )}
                 </TouchableOpacity>
                 <View style={styles.termsTextContainer}>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.agree", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
                         setModalType('terms');
                         setPrivacyModalVisible(true);
                     }}>
-                        <ThemedText style={styles.termsLink} type="sfPro">
+                        <ThemedText style={styles.termsLink}>
                             {t("auth.telLogin.terms", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.and", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
                         setModalType('privacy');
                         setPrivacyModalVisible(true);
                     }}>
-                        <ThemedText style={styles.termsLink} type="sfPro">
+                        <ThemedText style={styles.termsLink}>
                             {t("auth.telLogin.privacyPolicy", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.and", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
                         setModalType('user');
                         setPrivacyModalVisible(true);
                     }}>
-                        <ThemedText style={styles.termsLink} type="sfPro">
+                        <ThemedText style={styles.termsLink}>
                             {t("auth.telLogin.userAgreement", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.and", { ns: 'login' })}
                     </ThemedText>
                     <TouchableOpacity onPress={() => {
                         setModalType('ai');
                         setPrivacyModalVisible(true);
                     }}>
-                        <ThemedText style={styles.termsLink} type="sfPro">
+                        <ThemedText style={styles.termsLink}>
                             {t("auth.telLogin.aiAgreement", { ns: 'login' })}
                         </ThemedText>
                     </TouchableOpacity>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.agreement", { ns: 'login' })}
                     </ThemedText>
-                    <ThemedText style={styles.termsLink} type="sfPro">
+                    <ThemedText style={styles.termsLink}>
                         {t("common.name")}
                     </ThemedText>
-                    <ThemedText style={styles.termsText} type="sfPro">
+                    <ThemedText style={styles.termsText}>
                         {t("auth.telLogin.getPhone", { ns: 'login' })}
                     </ThemedText>
                 </View>
             </View>
             {/* 已有账号 */}
-            <View style={styles.loginContainer} >
-                <ThemedText type="sfPro" color="textPrimary" size="sm">
+            <View style={styles.loginContainer}>
+                <ThemedText style={styles.loginText}>
                     {t("auth.signup.haveAccount", { ns: 'login' })}
                 </ThemedText>
                 <TouchableOpacity
@@ -284,7 +328,7 @@ const SignUp = ({ updateUrlParam, setError, setShowPassword, showPassword, setSh
                         updateUrlParam("status", "login");
                     }}
                 >
-                    <ThemedText type="sfPro" color="bgSecondary" weight="bold" size="sm">
+                    <ThemedText style={styles.loginLink}>
                         {t("auth.signup.login", { ns: 'login' })}
                     </ThemedText>
                 </TouchableOpacity>
@@ -351,17 +395,17 @@ const styles = StyleSheet.create({
     checkbox: {
         width: 20,
         height: 20,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: Fonts['textPrimary'],
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: '#E5E7EB',
         justifyContent: 'center',
         alignItems: 'center',
         marginRight: 8,
         marginTop: 2,
     },
     checkboxChecked: {
-        backgroundColor: Fonts["bgCheck"],
-        borderColor: Fonts['bgCheck'],
+        backgroundColor: '#E2793F',
+        borderColor: '#E2793F',
     },
     termsTextContainer: {
         flexDirection: 'row',
@@ -370,20 +414,29 @@ const styles = StyleSheet.create({
     },
     termsText: {
         fontSize: 14,
-        color: Fonts["textPrimary"],
+        color: '#1F2937',
         lineHeight: 20,
     },
     termsLink: {
         fontSize: 14,
-        color: Fonts['bgSecondary'],
-        lineHeight: 20
+        color: '#E2793F',
+        lineHeight: 20,
     },
     loginContainer: {
         flexDirection: 'row',
         justifyContent: 'center',
         marginTop: 24,
-        gap: 4,
-    }
+    },
+    loginText: {
+        fontSize: 14,
+        color: '#1F2937',
+    },
+    loginLink: {
+        color: '#E2793F',
+        fontSize: 14,
+        fontWeight: '600',
+        marginLeft: 4,
+    },
 });
 
 export default SignUp;

components/login/ui/Button.tsx

@@ -1,37 +0,0 @@
-import { ThemedText } from "@/components/ThemedText";
-import { ActivityIndicator, StyleSheet, TouchableOpacity, ViewStyle } from "react-native";
-
-interface ButtonProps {
-    isLoading?: boolean;
-    handleLogin?: () => void;
-    text: string;
-    containerStyle?: ViewStyle;
-}
-const Button = ({ isLoading, handleLogin, text, containerStyle }: ButtonProps) => {
-    return <TouchableOpacity
-        style={[styles.loginButton, isLoading && { opacity: 0.7 }, containerStyle]}
-        onPress={handleLogin}
-        disabled={isLoading}
-    >
-        {isLoading ? (
-            <ActivityIndicator color="#fff" />
-        ) : (
-            <ThemedText type="sfPro" size="lg" weight="bold" color="textWhite">
-                {text}
-            </ThemedText>
-        )}
-    </TouchableOpacity>
-}
-
-const styles = StyleSheet.create({
-    loginButton: {
-        width: '100%',
-        backgroundColor: '#E2793F',
-        borderRadius: 28,
-        padding: 16,
-        alignItems: 'center',
-        marginBottom: 24,
-    },
-})
-
-export default Button

components/login/ui/TextInput.tsx

@@ -1,122 +0,0 @@
-import { ThemedText } from "@/components/ThemedText";
-import { Fonts } from "@/constants/Fonts";
-import { Ionicons } from "@expo/vector-icons";
-import { TextInput as RNTextInput, TextInputProps as RNTextInputProps, StyleProp, StyleSheet, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native";
-
-interface CustomTextInputProps {
-    label: string;
-    placeholder: string;
-    value: string;
-    onChangeText: (text: string) => void;
-    showPassword?: boolean;
-    setShowPassword?: (showPassword: boolean) => void;
-    setError?: (error: string) => void;
-    type?: 'default' | 'password';
-    containerStyle?: StyleProp<ViewStyle>;
-    style?: StyleProp<TextStyle>;
-    error?: string;
-}
-
-type TextInputProps = RNTextInputProps & CustomTextInputProps;
-
-const TextInput = ({
-    type = 'default',
-    label,
-    placeholder,
-    value,
-    onChangeText,
-    setError,
-    showPassword,
-    setShowPassword,
-    error,
-    style,
-    containerStyle,
-    ...props
-}: TextInputProps) => {
-
-    return (
-        <View style={[styles.inputContainer, containerStyle]}>
-            <View className="w-full flex flex-row justify-between">
-                <ThemedText style={styles.inputLabel}>
-                    {label}
-                </ThemedText>
-                {
-                    error &&
-                    <ThemedText color="bgSecondary" size="xxs">
-                        {error}
-                    </ThemedText>
-                }
-            </View>
-
-            <View style={styles.inputTextContainer}>
-                <RNTextInput
-                    style={[styles.textInput, style]}
-                    placeholder={placeholder}
-                    placeholderTextColor={Fonts['placeholderTextColor']}
-                    value={value}
-                    onChangeText={onChangeText}
-                    secureTextEntry={type === 'password' ? !showPassword : undefined}
-                    {...props}
-                />
-                {
-                    type === 'password' &&
-                    <TouchableOpacity
-                        style={styles.eyeIcon}
-                        onPress={() => {
-                            if (setShowPassword) {
-                                setShowPassword(!showPassword);
-                            }
-                        }}
-                    >
-                        <Ionicons
-                            name={showPassword ? 'eye' : 'eye-off'}
-                            size={20}
-                            color="#666"
-                        />
-                    </TouchableOpacity>
-                }
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    inputContainer: {
-        marginBottom: 20,
-    },
-    inputLabel: {
-        fontSize: Fonts['sm'],
-        color: Fonts['textPrimary'],
-        fontWeight: Fonts['bold'],
-        fontFamily: Fonts['sfPro'],
-        marginBottom: 8,
-        marginLeft: 8,
-    },
-    textInput: {
-        borderRadius: Fonts['xs'],
-        paddingHorizontal: Fonts['base'],
-        paddingVertical: Fonts['sm'],
-        fontSize: Fonts['sm'],
-        lineHeight: Fonts['base'],
-        textAlignVertical: 'center',
-        backgroundColor: Fonts['bgInput'],
-        color: Fonts['textSecondary'],
-        fontFamily: Fonts['inter'],
-        paddingRight: 48, // Make space for the eye icon
-    },
-    inputTextContainer: {
-        position: 'relative',
-    },
-    eyeIcon: {
-        position: 'absolute',
-        right: 12,
-        top: '50%',
-        transform: [{ translateY: -10 }], // Half of the icon's height (20/2 = 10)
-        height: 20,
-        width: 20,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-})
-
-export default TextInput;

components/owner/carousel.tsx

@@ -22,7 +22,6 @@ const width = Dimensions.get("window").width;
 
 function CarouselComponent(props: Props) {
     const { data } = props;
-    const [currentIndex, setCurrentIndex] = React.useState(0);
     const [carouselDataValue, setCarouselDataValue] = React.useState<CarouselData[]>([]);
     const dataHandle = () => {
         const carouselData = { ...data?.category_count, total_count: data?.total_count }
@@ -45,7 +44,7 @@ function CarouselComponent(props: Props) {
     }
 
     const totleItem = (data: UserCountData) => {
-        return <View style={[styles.container, { width: width * 0.7 }]}>
+        return <View style={styles.container}>
             {Object?.entries(data)?.filter(([key]) => key !== 'cover_url')?.map((item, index) => (
                 <View style={styles.item} key={index}>
                     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: "75%", overflow: 'hidden' }}>
@@ -69,41 +68,37 @@ function CarouselComponent(props: Props) {
     }, [data]);
 
     return (
-        <View
-            style={{
-                flex: 1
-            }}>
+        <View style={{ flex: 1 }}>
             <Carousel
                 width={width}
-                height={width}
+                height={width * 0.75}
                 data={carouselDataValue || []}
                 mode="parallax"
-                onSnapToItem={(index) => setCurrentIndex(index)}
-                defaultIndex={
-                    carouselDataValue?.length
-                        ? Math.max(0, Math.min(
-                            carouselDataValue.length - 1,
-                            carouselDataValue.findIndex((item) => item?.key === 'total_count') - 1
-                        ))
-                        : 0
-                }
+                // defaultIndex={
+                //     carouselDataValue?.length
+                //         ? Math.max(0, Math.min(
+                //             carouselDataValue.length - 1,
+                //             carouselDataValue.findIndex((item) => item?.key === 'total_count') - 1
+                //         ))
+                //         : 0
+                // }
                 modeConfig={{
                     parallaxScrollingScale: 1,
-                    parallaxScrollingOffset: 130,
+                    parallaxScrollingOffset: 150,
                     parallaxAdjacentItemScale: 0.7
                 }}
                 renderItem={({ item, index }) => {
                     const style: ViewStyle = {
                         width: width,
-                        height: width * 0.7,
-                        alignItems: "center"
+                        height: width * 0.8,
+                        alignItems: "center",
                     };
                     return (
-                        <View key={index} style={[style]}>
+                        <View key={index} style={style}>
                             {item?.key === 'total_count' ? (
                                 totleItem(item.value)
                             ) : (
-                                <View>
+                                <View style={{ flex: 1, width: width * 0.65 }}>
                                     {CategoryComponent({
                                         title: item?.key,
                                         data: [
@@ -112,7 +107,6 @@ function CarouselComponent(props: Props) {
                                             { title: 'Length', number: formatDuration(item?.value?.video_length || 0) }
                                         ],
                                         bgSvg: item?.value?.cover_url,
-                                        width: width
                                     })}
                                 </View>
                             )}
@@ -130,13 +124,13 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         backgroundColor: '#fff',
         borderRadius: 32,
-        padding: 6
+        padding: 4
     },
     container: {
         backgroundColor: "#FFB645",
         paddingVertical: 8,
-        paddingLeft: 32,
-        borderRadius: 32,
+        paddingHorizontal: 16,
+        borderRadius: 16,
         display: "flex",
         flexDirection: "column",
         position: 'relative',
@@ -163,10 +157,10 @@ const styles = StyleSheet.create({
     number: {
         color: "#fff",
         fontWeight: "700",
-        fontSize: 28,
-        lineHeight: 30,
+        fontSize: 26,
         textAlign: 'left',
-        flex: 1
+        flex: 1,
+        paddingTop: 8
     }
 })
 

components/owner/category.tsx

@@ -6,45 +6,16 @@ import VideoTotalSvg from "@/assets/icons/svg/videoTotalWhite.svg";
 import { BlurView } from "expo-blur";
 import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { ThemedText } from "../ThemedText";
-
 interface CategoryProps {
     title: string;
-    data: { title: string, number: { s: number, m: number, h: number } | number }[];
+    data: { title: string, number: string | number }[];
     bgSvg: string | null;
     style?: StyleProp<ViewStyle>;
-    width: number;
 }
 
-const TimeUnit = ({ value, unit }: { value: number; unit: string }) => (
-    value > 0 && (
-        <>
-            <ThemedText style={styles.itemNumber}>{value}</ThemedText>
-            <ThemedText style={[styles.itemNumber, { fontSize: 10 }]}>{unit}</ThemedText>
-        </>
-    )
-);
-
-const CategoryComponent = ({ title, data, bgSvg, style, width }: CategoryProps) => {
-    const renderTimeDisplay = (time: { s: number; m: number; h: number }) => {
-        const { h, m, s } = time;
-        const showSeconds = s > 0 || (s === 0 && m === 0 && h === 0);
-
-        return (
-            <ThemedText style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 2 }}>
-                <TimeUnit value={h} unit="h" />
-                <TimeUnit value={m} unit="m" />
-                {showSeconds && (
-                    <>
-                        <ThemedText style={styles.itemNumber}>{s}</ThemedText>
-                        <ThemedText style={[styles.itemNumber, { fontSize: 10 }]}>s</ThemedText>
-                    </>
-                )}
-            </ThemedText>
-        );
-    };
-
+const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
     return (
-        <View style={[styles.container, style, { width: width * 0.73 }]}>
+        <View style={[styles.container, style]}>
             <View style={styles.backgroundContainer}>
                 <Image
                     source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')}
@@ -67,19 +38,7 @@ const CategoryComponent = ({ title, data, bgSvg, style, width }: CategoryProps)
                             </View>
                             <ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
                         </View>
-                        <View style={{ alignSelf: 'flex-start', flex: 1 }}>
-                            {item?.title === "Length" ? (
-                                typeof item.number === 'object' ? (
-                                    renderTimeDisplay(item.number)
-                                ) : (
-                                    <ThemedText style={[styles.itemNumber]}>{item.number}</ThemedText>
-                                )
-                            ) : (
-                                <ThemedText style={[styles.itemNumber]}>
-                                    {typeof item.number === 'number' ? item.number : 0}
-                                </ThemedText>
-                            )}
-                        </View>
+                        <ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
                     </View>
                 ))}
                 <View style={styles.titleContent}>
@@ -109,8 +68,7 @@ const styles = StyleSheet.create({
         backdropFilter: 'blur(5px)',
     },
     content: {
-        padding: 32,
-        paddingRight: 16,
+        padding: 16,
         justifyContent: "space-between",
         flex: 1
     },
@@ -120,7 +78,6 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         position: 'relative',
         width: '100%',
-        paddingVertical: 4
     },
     title: {
         color: 'white',
@@ -138,7 +95,7 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingVertical: 16,
+        paddingVertical: 8,
         width: '100%',
     },
     itemTitle: {
@@ -151,10 +108,11 @@ const styles = StyleSheet.create({
     itemNumber: {
         color: 'white',
         fontSize: 28,
-        lineHeight: 30,
         fontWeight: '700',
         textAlign: 'left',
+        marginLeft: 8,
         flex: 1,
+        paddingTop: 8
     }
 });
 

components/owner/classify.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Modal from 'react-native-modal';
 import Cascader, { CascaderItem } from '../cascader';
-import { ThemedText } from '../ThemedText';
 
 interface ClassifyModalProps {
     modalVisible: boolean;
@@ -40,9 +39,9 @@ const ClassifyModal = (props: ClassifyModalProps) => {
             <View style={styles.modalView}>
                 <View style={styles.modalHeader}>
                     <Text style={{ opacity: 0 }}>Settings</Text>
-                    <ThemedText style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</ThemedText>
+                    <Text style={styles.modalTitle}>{t('generalSetting.classify', { ns: 'personal' })}</Text>
                     <TouchableOpacity onPress={() => setModalVisible(false)}>
-                        <ThemedText style={styles.closeButton}>×</ThemedText>
+                        <Text style={styles.closeButton}>×</Text>
                     </TouchableOpacity>
                 </View>
                 <ScrollView style={styles.modalContent} showsVerticalScrollIndicator={false}>

components/owner/createCount.tsx

@@ -20,10 +20,12 @@ const CreateCountComponent = React.memo((props: CreateCountProps) => {
     return (
         <View style={containerStyle}>
             <View style={styles.header}>
-                <ThemedText type="sfPro" weight="bold" color="textSecondary" size="xxs" style={{ lineHeight: 16 }}>{props.title}</ThemedText>
-                {props.icon}
+                <View className="mt-1">
+                    {props.icon}
+                </View>
+                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
             </View>
-            <ThemedText weight="bold" color="textSecondary" size="title" style={{ lineHeight: 36, textAlign: "right" }}>{props.number}</ThemedText>
+            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
         </View>
     );
 });
@@ -33,12 +35,11 @@ const styles = StyleSheet.create({
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        // alignItems: "center",
+        alignItems: "center",
         justifyContent: "center",
         gap: 8,
         backgroundColor: "#FAF9F6",
-        paddingVertical: 16,
-        paddingRight: 16,
+        padding: 16,
         borderRadius: 12,
         shadowColor: "#000",
         shadowOffset: {
@@ -50,12 +51,12 @@ const styles = StyleSheet.create({
         // elevation: 1,
     },
     header: {
-        width: "90%",
+        width: "100%",
         display: "flex",
         flexDirection: "row",
-        paddingHorizontal: 16,
-        alignItems: "flex-start",
-        gap: 4,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
     },
     title: {
         fontSize: 20,

components/owner/podium.tsx

@@ -36,7 +36,6 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={1}
                         ellipsizeMode="tail"
                         style={styles.title}
-                        type="inter"
                     >
                         {data[1]?.user_nick_name}
                     </ThemedText>
@@ -66,7 +65,6 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={2}
                         ellipsizeMode="tail"
                         style={styles.title}
-                        type="inter"
                     >
                         {data[0]?.user_nick_name}
                     </ThemedText>
@@ -96,7 +94,6 @@ const PodiumComponent = ({ data }: IPodium) => {
                         numberOfLines={1}
                         ellipsizeMode="tail"
                         style={styles.title}
-                        type="inter"
                     >
                         {data[2]?.user_nick_name}
                     </ThemedText>

components/owner/qualification/lcenses.tsx

@@ -43,9 +43,10 @@ const styles = StyleSheet.create({
     },
     modalView: {
         width: '100%',
-        height: '50%',
+        height: '40%',
         backgroundColor: 'white',
-        borderRadius: 26,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
     },
     modalHeader: {
         flexDirection: 'row',

components/owner/qualification/privacy.tsx

@@ -126,8 +126,8 @@ const styles = StyleSheet.create({
         width: '100%',
         height: '80%',
         backgroundColor: 'white',
-        borderTopLeftRadius: 26,
-        borderTopRightRadius: 26,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
         paddingHorizontal: 16,
     },
     modalHeader: {

components/owner/rankList.tsx

@@ -15,9 +15,9 @@ const RankList = (props: IRankList) => {
             contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }}
         >
             <View style={styles.item}>
-                <ThemedText style={styles.headerText} type="sfPro">Rank</ThemedText>
-                <ThemedText style={styles.headerText} type="sfPro">Username</ThemedText>
-                <ThemedText style={styles.headerText} type="sfPro">Profile</ThemedText>
+                <ThemedText style={styles.headerText}>Rank</ThemedText>
+                <ThemedText style={styles.headerText}>Username</ThemedText>
+                <ThemedText style={styles.headerText}>Profile</ThemedText>
             </View>
             {props.data?.filter((item, index) => index > 2).map((item, index) => (
                 <View
@@ -35,8 +35,8 @@ const RankList = (props: IRankList) => {
                             <OwnerSvg width="100%" height="100%" />
                         </View>
                     )}
-                    <ThemedText style={styles.itemRank} type="sfPro">{index + 1}</ThemedText>
-                    <ThemedText style={styles.itemName} type="inter">{item.user_nick_name}</ThemedText>
+                    <ThemedText style={styles.itemRank}>{index + 1}</ThemedText>
+                    <ThemedText style={styles.itemName}>{item.user_nick_name}</ThemedText>
                     <View style={{ opacity: index == 1 ? 0 : 1 }}>
                         {(() => {
                             const [imageError, setImageError] = useState(false);
@@ -66,9 +66,9 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
     },
     headerText: {
-        fontSize: 12,
+        fontSize: 14,
         color: "#4C320C",
-        fontWeight: "500"
+        fontWeight: "600"
     },
     item: {
         flexDirection: 'row',
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
         fontWeight: "700"
     },
     itemName: {
-        fontSize: 12,
+        fontSize: 14,
         color: "#AC7E35",
     },
     self: {

components/owner/rights/memberCard.tsx

@@ -1,24 +1,21 @@
+import MemberBgSvg from '@/assets/icons/svg/memberBg.svg';
 import ProTextSvg from '@/assets/icons/svg/proText.svg';
 import GradientText from '@/components/textLinear';
+import { ThemedText } from '@/components/ThemedText';
 import { useRouter } from 'expo-router';
 import { useTranslation } from "react-i18next";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import CardBg from './cardBg';
 import IpSvg from './ipSvg';
 
-const MemberCard = ({ pro, points }: { pro: string, points: number }) => {
+const MemberCard = ({ pro }: { pro: string }) => {
     const { t } = useTranslation();
+    const proPng = require("@/assets/images/png/owner/pro.png");
     const width = Dimensions.get("window").width;
     const router = useRouter();
 
     return (
-        <TouchableOpacity style={[styles.container]} onPress={() => router.push({
-            pathname: '/rights',
-            params: {
-                points: points,
-                pro: pro
-            }
-        })}>
+        <TouchableOpacity style={[styles.container]} onPress={() => router.push("/rights")}>
             {/* 背景图 */}
             <View style={[styles.cardBg, { opacity: pro === "pro" ? 1 : 0.5 }]}>
                 <CardBg pro={pro} date={"2025-09-05"} />
@@ -32,20 +29,20 @@ const MemberCard = ({ pro, points }: { pro: string, points: number }) => {
                 <IpSvg pro={pro} />
             </View>
             {/* 会员标识 */}
-            {/* <View style={[styles.memberContainer, { left: width * 0.25, top: width * 0.1, opacity: 1 }]}>
+            <View style={[styles.memberContainer, { left: width * 0.25, top: width * 0.1, opacity: 1 }]}>
                 <MemberBgSvg />
                 <ThemedText style={{ fontSize: 12, color: "#2D3D60", position: "absolute", left: 0, top: 0, bottom: 0, right: 0, textAlign: "center", textAlignVertical: "center" }}>{t("personal:member.goPremium")}</ThemedText>
-            </View> */}
+            </View>
             {/* 解锁更多魔法 */}
-            <View style={{ position: "absolute", bottom: width * 0.05, left: -width * 0.12, opacity: pro === "pro" ? 1 : 0.5, flexWrap: "wrap" }}>
+            <View style={{ position: "absolute", bottom: width * 0.02, left: -width * 0.01, opacity: pro === "pro" ? 1 : 0.5, width: width * 0.1, flexWrap: "wrap" }}>
                 <GradientText
                     text={t("personal:member.unlock")}
+                    width={width * 0.4}
                     fontSize={16}
                     lineHeight={1.5}
                     color={[
-                        { offset: "0%", color: "#D0BFB0" },
-                        { offset: "32.89%", color: "#FFE57D" },
-                        { offset: "81.1%", color: "#FFFFFF" }
+                        { offset: "0%", color: "#FF512F" },
+                        { offset: "100%", color: "#F09819" }
                     ]}
                 />
             </View>

components/owner/rights/normal.tsx

@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
     goPro: {
         backgroundColor: '#E2793F',
         borderRadius: 24,
-        paddingVertical: 12,
+        paddingVertical: 6,
         display: "flex",
         alignItems: "center",
         width: "100%",

components/owner/rights/premium.tsx

@@ -64,10 +64,10 @@ const Premium = (props: Props) => {
                                 </ThemedText>
                                 <BlackStarSvg />
                             </View>
-                            <ThemedText style={[styles.titleText, { fontSize: 16, marginTop: item?.product_code === bestValue ? 0 : -10 }]}>
+                            <ThemedText style={[styles.titleText, { fontSize: 16 }]}>
                                 {item.product_code?.split('_')[item.product_code?.split('_')?.length - 1]}
                             </ThemedText>
-                            <ThemedText style={[styles.titleText, { fontSize: 32, lineHeight: 32, paddingVertical: item?.product_code === bestValue ? 0 : 5 }]}>
+                            <ThemedText style={[styles.titleText, { fontSize: 32, lineHeight: 32 }]}>
                                 $ {(Number(item.unit_price.amount) - Number(item.discount_amount.amount)).toFixed(2)}
                             </ThemedText>
                             <View style={{ flexDirection: 'row', alignItems: 'center' }}>

components/owner/userInfo.tsx

@@ -79,11 +79,11 @@ const UserInfo = (props: UserInfoProps) => {
     return (
         <View style={styles.container}>
             <View style={styles.info}>
-                <ThemedText style={styles.nickname} type="sfPro">{userInfo?.nickname}</ThemedText>
-                <ThemedText style={styles.userId} type="inter">{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText>
+                <ThemedText style={styles.nickname}>{userInfo?.nickname}</ThemedText>
+                <ThemedText style={styles.userId}>{t('generalSetting.userId', { ns: 'personal' })}{userInfo?.user_id}</ThemedText>
                 <View style={styles.location}>
                     <LocationSvg />
-                    <ThemedText style={styles.userId} type="inter">
+                    <ThemedText style={styles.userId}>
                         {currentLocation?.country}-{currentLocation?.city}-{currentLocation?.district}
                     </ThemedText>
                     <TouchableOpacity

components/owner/userName.tsx

@@ -5,7 +5,7 @@ import { ThemedText } from '@/components/ThemedText';
 import { UserInfoDetails } from '@/types/user';
 import { useRouter } from 'expo-router';
 import { useState } from 'react';
-import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Image, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 import CopyButton from '../copy';
 
 export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
@@ -14,7 +14,7 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
     const router = useRouter();
 
     return (
-        <View style={styles.container}>
+        <View className='flex flex-row justify-between items-center mt-[1rem] gap-[1rem] w-full'>
             {/* 头像 */}
             <View className='w-auto'>
                 {userInfo?.user_info?.avatar_file_url && !imageError ? (
@@ -30,34 +30,45 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                 )}
             </View>
             {/* 用户名 */}
-            <View className='flex flex-col w-[60%]'>
+            <View className='flex flex-col w-[75%] gap-1'>
                 <View className='flex flex-row items-center justify-between w-full'>
-                    <View className='flex flex-row items-center gap-2 w-full justify-between'>
-                        <View style={{ width: "100%", flexDirection: "row", alignItems: "center", gap: 2 }}>
-                            <ThemedText
-                                style={{ maxWidth: "90%", lineHeight: 30 }}
-                                weight='bold'
-                                color='textSecondary'
-                                size='3xl'
-                                numberOfLines={1}
-                                ellipsizeMode="tail"
-
-                            >
-                                {userInfo?.user_info?.nickname}
-                            </ThemedText>
+                    <View className='flex flex-row items-center gap-2 w-full'>
+                        <ThemedText
+                            className='max-w-[80%] !text-textSecondary !font-semibold !text-2xl'
+                            numberOfLines={1}         // 限制为1行
+                            ellipsizeMode="tail"
+                        >
+                            {userInfo?.user_info?.nickname}
+                        </ThemedText>
+                        <ScrollView
+                            className='max-w-[20%]'
+                            horizontal // 水平滚动
+                            showsHorizontalScrollIndicator={false} // 隐藏滚动条
+                            contentContainerStyle={{
+                                flexDirection: 'row',
+                                gap: 8, // 间距，
+                                alignItems: 'center',
+                            }}
+                        >
                             {
-                                userInfo?.membership_level && (
+                                userInfo?.medal_infos?.map((item, index) => (
                                     <Image
-                                        source={require('@/assets/images/png/owner/proIcon.png')}
+                                        key={index}
+                                        source={{ uri: item.url }}
                                         style={{ width: 24, height: 24 }}
                                     />
-                                )
+                                ))
                             }
+                        </ScrollView>
+
+                        <View className='flex flex-row items-center gap-2 border border-bgPrimary px-2 py-1 rounded-full'>
+                            <StarSvg />
+                            <ThemedText style={{ color: 'bgPrimary', fontSize: 14, fontWeight: '700' }}>{userInfo?.remain_points}</ThemedText>
                         </View>
                     </View>
                 </View>
                 <View className='flex flex-row items-center justify-between w-full'>
-                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 2, maxWidth: '100%' }}>
+                    <View style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 2, maxWidth: '80%' }}>
                         <ThemedText
                             style={{
                                 color: '#AC7E35',
@@ -66,7 +77,6 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                                 flexShrink: 1,
                                 flexGrow: 0,
                             }}
-                            type="inter"
                             numberOfLines={1}
                             ellipsizeMode="tail"
                         >
@@ -74,57 +84,23 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                         </ThemedText>
                         <CopyButton textToCopy={userInfo?.user_info?.user_id || ""} />
                     </View>
-                </View>
-            </View>
-            <View style={{ flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
-                <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 8,
-                    borderWidth: 1,
-                    borderColor: '#FFB645',
-                    paddingHorizontal: 8,
-                    paddingVertical: 4,
-                    borderRadius: 16,
-                }}>
-                    <StarSvg />
-                    <ThemedText
-                        style={{
-                            color: '#4C320C',
-                            fontSize: 14,
-                            fontWeight: '700',
-                            maxWidth: 40,
-                            lineHeight: 20
+                    <TouchableOpacity
+                        onPress={() => {
+                            router.push('/setting');
                         }}
-                        type="inter"
-                        numberOfLines={1}
-                        ellipsizeMode="tail"
+                        activeOpacity={0.7}
+                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+                        style={styles.text}
                     >
-                        {userInfo?.remain_points}
-                    </ThemedText>
+                        <SettingSvg />
+                    </TouchableOpacity>
                 </View>
-                <TouchableOpacity
-                    onPress={() => {
-                        router.push('/setting');
-                    }}
-                    activeOpacity={0.7}
-                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                    style={styles.text}
-                >
-                    <SettingSvg />
-                </TouchableOpacity>
             </View>
         </View >
     );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "flex-end",
-        justifyContent: "space-between",
-        width: "100%",
-    },
     text: {
         fontSize: 12,
         fontWeight: '700',

components/ui/TabBarBackground.tsx

@@ -1,5 +1,10 @@
+import React from 'react';
+import { View } from 'react-native';
+
 // This is a shim for web and Android where the tab bar is generally opaque.
-export default undefined;
+export default function TabBarBackground() {
+  return <View style={{ flex: 1, backgroundColor: 'transparent' }} />;
+}
 
 export function useBottomTabOverflow() {
   return 0;

components/ui/button/stepButton.tsx

@@ -20,7 +20,7 @@ const StepButton = (props: Props) => {
             {isLoading ? (
                 <ActivityIndicator color="#fff" />
             ) : (
-                <ThemedText style={[styles.buttonText, { color: color ? color : '#FFFFFF' }]} size='lg' weight='bold'>
+                <ThemedText style={[styles.buttonText, { color: color ? color : '#FFFFFF' }]}>
                     {text}
                 </ThemedText>
             )}

components/user-message.tsx/done.tsx

@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
         zIndex: 99,
     },
     title: {
-        fontSize: 32,
+        fontSize: 36,
         lineHeight: 40,
         color: '#FFFFFF',
         textAlign: 'center',

components/user-message.tsx/look.tsx

@@ -29,7 +29,7 @@ export default function Look(props: Props) {
                 <ThemedText style={styles.title}>
                     {t('auth.userMessage.look', { ns: 'login' })}
                 </ThemedText>
-                <ThemedText style={styles.subtitle} type="inter" size="sm" weight="regular">
+                <ThemedText style={styles.subtitle}>
                     {t('auth.userMessage.avatarText', { ns: 'login' })}
                     {"\n"}
                     {t('auth.userMessage.avatorText2', { ns: 'login' })}
@@ -55,7 +55,7 @@ export default function Look(props: Props) {
                     children={
                         <View style={styles.uploadButton}>
                             <ChoicePhoto />
-                            <ThemedText style={styles.uploadButtonText} type="sfPro" size="sm" weight="semiBold">
+                            <ThemedText style={styles.uploadButtonText}>
                                 {t('auth.userMessage.choosePhoto', { ns: 'login' })}
                             </ThemedText>
                         </View>
@@ -78,7 +78,7 @@ export default function Look(props: Props) {
                     color="#4C320C"
                 />
             </View>
-        </View >
+        </View>
     );
 }
 
@@ -123,7 +123,9 @@ const styles = StyleSheet.create({
         gap: 8,
     },
     uploadButtonText: {
-        color: '#4C320C'
+        color: '#4C320C',
+        fontSize: 14,
+        fontWeight: '600',
     },
     footer: {
         width: '100%',

components/user-message.tsx/userName.tsx

@@ -39,11 +39,11 @@ export default function UserName(props: Props) {
                 <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
                     <View style={styles.contentContainer}>
                         <View style={styles.titleContainer}>
-                            <ThemedText style={styles.titleText} color="textSecondary" size='xl' weight='bold'>{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
+                            <ThemedText style={styles.titleText}>{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
                         </View>
                         <View style={styles.inputWrapper}>
                             <View style={styles.labelContainer}>
-                                <ThemedText style={styles.labelText} color="textPrimary" type='sfPro' size='sm' weight='bold'>{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
+                                <ThemedText style={styles.labelText}>{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
                                 <ThemedText style={styles.errorText}>{error}</ThemedText>
                             </View>
                             <TextInput
@@ -98,6 +98,9 @@ const styles = StyleSheet.create({
         fontSize: 20,
     },
     titleText: {
+        color: '#4C320C',
+        fontWeight: '600',
+        fontSize: 20,
         marginBottom: 16,
     },
     inputWrapper: {

components/utils/time.ts

@@ -3,9 +3,9 @@
  * @param seconds 总秒数
  * @returns 格式化后的时间字符串
  */
-export function formatDuration(seconds: number): { s: number, m: number, h: number } {
+export function formatDuration(seconds: number): string {
     if (seconds < 60) {
-        return { s: seconds, m: 0, h: 0 };
+        return `${seconds}s`;
     }
 
     const minutes = Math.floor(seconds / 60);
@@ -13,16 +13,16 @@ export function formatDuration(seconds: number): { s: number, m: number, h: numb
 
     if (minutes < 60) {
         return remainingSeconds > 0
-            ? { s: remainingSeconds, m: minutes, h: 0 }
-            : { s: 0, m: minutes, h: 0 };
+            ? `${minutes}min${remainingSeconds}s`
+            : `${minutes}min`;
     }
 
     const hours = Math.floor(minutes / 60);
     const remainingMinutes = minutes % 60;
 
     if (remainingMinutes === 0) {
-        return { s: 0, m: 0, h: hours };
+        return `${hours}h`;
     }
 
-    return { s: seconds, m: minutes, h: hours };
+    return `${hours}h${remainingMinutes}min`;
 }

constants/Fonts.ts

@@ -1,43 +0,0 @@
-export const Fonts = {
-    // Font family
-    quicksand: 'quicksand',
-    sfPro: 'sfPro',
-    inter: 'inter',
-
-    // Font weights
-    regular: '400',
-    medium: '500',
-    semiBold: '600',
-    bold: '700',
-    extraBold: '800',
-
-    // Font sizes
-    xxs: 11,
-    xs: 12,
-    sm: 14,
-    base: 16,
-    lg: 18,
-    xl: 20,
-    '2xl': 24,
-    '3xl': 30,
-    '4xl': 36,
-    '5xl': 48,
-    "title": 32,
-
-    // color
-    bgPrimary: '#FFB645',
-    bgSecondary: '#E2793F',
-    bgCheck: "#FADBA1",
-    bgInput: '#FFF8DE',
-    textPrimary: '#AC7E35',
-    textSecondary: '#4C320C',
-    textThird: '#7F786F',
-    textWhite: "#FFFFFF",
-    placeholderTextColor: "#ccc",
-
-} as const;
-
-export type FontWeight = keyof Omit<typeof Fonts, 'quicksand' | 'sfPro' | 'inter' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'>;
-export type FontSize = "xxs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "title";
-export type FontColor = 'bgPrimary' | 'bgSecondary' | 'textPrimary' | 'textSecondary' | 'textThird' | 'textWhite';
-

i18n/locales/en/login.json

@@ -67,8 +67,7 @@
       "accountPlaceholder": "Enter your account or email",
       "signUpMessage": "Don’t have an account?",
       "signUp": "Sign up",
-      "phoneLogin": "Phone Login",
-      "titleText": "Awake your Memo"
+      "phoneLogin": "Phone Login"
     },
     "agree": {
       "logintext": "By logging in, you agree to our",

i18n/locales/en/personal.json

@@ -74,7 +74,7 @@
         "confirm": "Confirm",
         "location": "Location",
         "rank": "Top Memory Makers",
-        "userId": "User ID : ",
+        "userId": "User ID",
         "usedStorage": "Storage Used",
         "remainingPoints": "Points Remaining",
         "totalVideo": "Total Videos",
@@ -128,6 +128,6 @@
     },
     "member": {
         "goPremium": "Go Premium",
-        "unlock": "解锁更多记忆魔法"
+        "unlock": "Unlock more memory magic"
     }
 }

i18n/locales/zh/login.json

@@ -67,8 +67,7 @@
       "accountPlaceholder": "请输入您的账号或邮箱",
       "signUpMessage": "还没有账号？",
       "signUp": "注册",
-      "phoneLogin": "手机号登录",
-      "titleText": "Awake your Memo"
+      "phoneLogin": "手机号登录"
     },
     "agree": {
       "logintext": "登录即表示您同意我们的",

lib/websocket-util.ts

@@ -34,8 +34,6 @@ class WebSocketManager {
     private readonly reconnectInterval = 1000; // 初始重连间隔为1秒
     private pingIntervalId: ReturnType<typeof setInterval> | null = null;
     private readonly pingInterval = 30000; // 30秒发送一次心跳
-    private isConnecting = false; // 防止并发重复连接
-    private connectTimeoutId: ReturnType<typeof setTimeout> | null = null; // 连接超时
 
     constructor() {
         // 这是一个单例类，连接通过调用 connect() 方法来启动
@@ -53,91 +51,66 @@ class WebSocketManager {
      * 会自动获取并使用存储的认证 token。
      */
     public async connect() {
-        // 已连或正在连，直接返回（基于状态的幂等）
-        if (this.status === 'connected' || this.status === 'connecting' || this.isConnecting) {
-            return;
+        if (this.ws && (this.status === 'connected' || this.status === 'connecting')) {
+            if (this.status === 'connected' || this.status === 'connecting') {
+                return;
+            }
         }
 
-        this.isConnecting = true;
         this.setStatus('connecting');
 
         let token = "";
-        try {
-            if (Platform.OS === 'web') {
-                token = localStorage.getItem('token') || "";
-            } else {
-                token = await SecureStore.getItemAsync('token') || "";
-            }
-        } catch (e) {
-            console.error('WebSocket: 获取 token 失败:', e);
+        if (Platform.OS === 'web') {
+            token = localStorage.getItem('token') || "";
+        } else {
+            token = await SecureStore.getItemAsync('token') || "";
         }
 
         if (!token) {
             console.error('WebSocket: 未找到认证 token，无法连接。');
-            this.isConnecting = false;
             this.setStatus('disconnected');
             return;
+        } else {
+            console.log('WebSocket: 认证 token:', token);
         }
 
-        const url = `${WEBSOCKET_ENDPOINT}?token=${encodeURIComponent(token)}`;
-        console.log('WebSocket: 开始连接到服务器');
-        const ws = new WebSocket(url);
-        this.ws = ws;
+        const url = `${WEBSOCKET_ENDPOINT}?token=${token}`;
+        console.log('WebSocket: 连接 URL:', url);
+        this.ws = new WebSocket(url);
 
-        // 连接超时（15s）
-        if (this.connectTimeoutId) {
-            clearTimeout(this.connectTimeoutId);
-            this.connectTimeoutId = null;
-        }
-        this.connectTimeoutId = setTimeout(() => {
-            if (this.ws === ws && ws.readyState !== WebSocket.OPEN) {
-                try { ws.close(); } catch { /* noop */ }
-            }
-        }, 15000);
-
-        ws.onopen = () => {
-            if (this.connectTimeoutId) {
-                clearTimeout(this.connectTimeoutId);
-                this.connectTimeoutId = null;
-            }
+        this.ws.onopen = () => {
             console.log('WebSocket connected');
             this.setStatus('connected');
             this.reconnectAttempts = 0; // 重置重连尝试次数
-            this.isConnecting = false;
             this.startPing();
         };
 
-        ws.onmessage = (event) => {
+        this.ws.onmessage = (event) => {
             try {
                 const message: WsMessage = JSON.parse(event.data);
+                // console.log('WebSocket received message:', message)
+                // 根据消息类型分发
                 const eventListeners = this.messageListeners.get(message.type);
                 if (eventListeners) {
                     eventListeners.forEach(callback => callback(message));
                 }
+                // 可以在这里处理通用的消息，比如 Pong
+                if (message.type === 'Pong') {
+                    // console.log('Received Pong');
+                }
             } catch (error) {
                 console.error('处理 WebSocket 消息失败:', error);
             }
         };
 
-        ws.onerror = (error) => {
-            if (this.connectTimeoutId) {
-                clearTimeout(this.connectTimeoutId);
-                this.connectTimeoutId = null;
-            }
+        this.ws.onerror = (error) => {
             console.error('WebSocket 发生错误:', error);
-            this.stopPing();
-            this.isConnecting = false;
         };
 
-        ws.onclose = () => {
-            if (this.connectTimeoutId) {
-                clearTimeout(this.connectTimeoutId);
-                this.connectTimeoutId = null;
-            }
+        this.ws.onclose = () => {
             console.log('WebSocket disconnected');
             this.ws = null;
             this.stopPing();
-            this.isConnecting = false;
             // 只有在不是手动断开连接时才重连
             if (this.status !== 'disconnected') {
                 this.setStatus('reconnecting');
@@ -168,8 +141,8 @@ class WebSocketManager {
      * @param message 要发送的消息对象，必须包含 type 字段。
      */
     public send(message: WsMessage) {
-        if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-            console.error('WebSocket 未连接或未就绪，无法发送消息。');
+        if (this.status !== 'connected' || !this.ws) {
+            console.error('WebSocket 未连接，无法发送消息。');
             return;
         }
         this.ws.send(JSON.stringify(message));