feat: 秒开

app/(tabs)/_layout.tsx

@@ -4,6 +4,7 @@ import { requestNotificationPermission } from '@/components/owner/utils';
 import TabBarBackground from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
+import { prefetchChats } from '@/lib/prefetch';
 import { fetchApi } from '@/lib/server-api-util';
 import * as Notifications from 'expo-notifications';
 import { Tabs } from 'expo-router';
@@ -163,6 +164,10 @@ export default function TabLayout() {
     };
   }, [token]); // 添加token作为依赖
 
+  useEffect(() => {
+    prefetchChats().catch(console.error);
+  }, []);
+
   return (
     <Tabs
       screenOptions={{

app/(tabs)/memo-list.tsx

@@ -1,340 +1,361 @@
-import ChatSvg from "@/assets/icons/svg/chat.svg";
+import { Asset } from 'expo-asset';
-import UploaderProgress from "@/components/file-upload/upload-progress/uploader-progress";
+import { useRouter } from 'expo-router';
-import AskNavbar from "@/components/layout/ask";
+import * as SplashScreen from 'expo-splash-screen';
-import { useUploadManager } from "@/hooks/useUploadManager";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { fetchApi } from "@/lib/server-api-util";
+import { FlatList, InteractionManager, PixelRatio, Platform, RefreshControl, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useAppSelector } from "@/store";
-import { Chat } from "@/types/ask";
-import { router, useFocusEffect } from "expo-router";
-import React from 'react';
-import { FlatList, Platform, RefreshControl, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-const MemoList = () => {
+// 懒加载组件
-    const insets = useSafeAreaInsets();
+const ChatSvg = React.lazy(() => import('@/assets/icons/svg/chat.svg'));
-    const uploadSessionStartTime = useAppSelector((state) => state.appState.uploadSessionStartTime);
+const AskNavbar = React.lazy(() => import('@/components/layout/ask'));
+const UploaderProgress = React.lazy(() => import('@/components/file-upload/upload-progress/uploader-progress'));
+const SkeletonItem = React.lazy(() => import('@/components/memo/SkeletonItem'));
+const ErrorBoundary = React.lazy(() => import('@/components/common/ErrorBoundary'));
 
-    // 历史消息
+// 类型定义
-    const [historyList, setHistoryList] = React.useState<Chat[]>([]);
+import { useUploadManager } from '@/hooks/useUploadManager';
-    // 刷新状态
+import { getCachedData, prefetchChatDetail, prefetchChats } from '@/lib/prefetch';
-    const [refreshing, setRefreshing] = React.useState(false);
+import { fetchApi } from '@/lib/server-api-util';
+import { Chat } from '@/types/ask';
+import { useTranslation } from 'react-i18next';
 
-    // 获取历史消息
+// 预加载资源
-    const getHistoryList = async () => {
+const preloadAssets = async () => {
-        try {
+    try {
-            setRefreshing(true);
+        await Asset.loadAsync([
-            const res = await fetchApi<Chat[]>(`/chats`);
+            require('@/assets/icons/svg/chat.svg'),
-            setHistoryList(res);
+        ]);
-        } catch (error) {
+    } catch (error) {
-            console.error('Failed to fetch history:', error);
+        // console.error('资源预加载失败:', error);
-        } finally {
-            setRefreshing(false);
-        }
     }
+};
 
-    // 获取对话历史消息
+// 骨架屏占位
-    const getChatHistory = async (id: string) => {
+const SkeletonList = () => (
-        // 跳转到聊天页面，并携带参数
+    <View style={styles.skeletonContainer}>
+        {Array(5).fill(0).map((_, index) => (
+            <React.Suspense key={`skeleton-${index}`} fallback={null}>
+                <SkeletonItem />
+            </React.Suspense>
+        ))}
+    </View>
+);
+
+const MemoList = () => {
+    const router = useRouter();
+    const insets = useSafeAreaInsets();
+    const [isMounted, setIsMounted] = useState(false);
+    const [historyList, setHistoryList] = useState<Chat[]>([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const flatListRef = useRef<FlatList>(null);
+    const { t } = useTranslation();
+
+    // 从缓存或API获取数据
+    const fetchHistoryList = useCallback(async (forceRefresh = false) => {
+        try {
+            setIsLoading(true);
+
+            // 先检查缓存
+            const cachedData = getCachedData<Chat[]>('/chats');
+            if (cachedData && !forceRefresh) {
+                setHistoryList(cachedData);
+            }
+
+            // 总是从服务器获取最新数据
+            const data = await fetchApi<Chat[]>('/chats');
+            setHistoryList(data);
+
+            // 预加载第一个聊天的详情
+            if (data.length > 0) {
+                InteractionManager.runAfterInteractions(() => {
+                    prefetchChatDetail(data[0].session_id).catch(console.error);
+                });
+            }
+
+            return data;
+        } catch (error) {
+            console.error('获取历史记录失败:', error);
+            throw error;
+        } finally {
+            setIsLoading(false);
+            setIsRefreshing(false);
+        }
+    }, []);
+
+    // 处理下拉刷新
+    const handleRefresh = useCallback(() => {
+        if (isRefreshing) return;
+
+        setIsRefreshing(true);
+        fetchHistoryList(true).finally(() => {
+            setIsRefreshing(false);
+        });
+    }, [fetchHistoryList, isRefreshing]);
+
+    // 处理聊天项点击
+    const handleMemoPress = useCallback((item: Chat) => {
         router.push({
             pathname: '/ask',
-            params: {
+            params: { sessionId: item.session_id },
-                sessionId: id,
-            }
         });
+    }, [router]);
 
-    }
+    // 初始加载和预加载
+    useEffect(() => {
+        let isActive = true;
 
-    const handleMemoPress = (item: Chat) => {
+        const initialize = async () => {
-        getChatHistory(item.session_id)
+            try {
-    }
+                // 并行预加载资源和数据
+                await Promise.all([
+                    preloadAssets(),
+                    prefetchChats().then((data) => {
+                        if (isActive && data) {
+                            setHistoryList(data as Chat[]);
+                        }
+                    }),
+                ]);
 
-    useFocusEffect(
+                // 主数据加载
-        React.useCallback(() => {
+                await fetchHistoryList();
-            getHistoryList()
+            } catch (error) {
-        }, [])
+                console.error('初始化失败:', error);
-    );
+            } finally {
+                if (isActive) {
+                    setIsMounted(true);
+                    // 延迟隐藏启动画面
+                    setTimeout(SplashScreen.hideAsync, 500);
+                }
+            }
+        };
 
+        initialize();
 
-    const { progressInfo, uploadSessionStartTime: uploadSessionStartTimeFromHook } = useUploadManager();
+        return () => {
+            isActive = false;
+        };
+    }, [fetchHistoryList]);
 
-    const renderHeader = () => (
+    // 渲染列表项
-        <>
+    const renderItem = useCallback(({ item }: { item: Chat }) => (
-            {/* {process.env.NODE_ENV === 'development' && <TouchableOpacity
+        <TouchableOpacity
-                className='mt-2 bg-red-500 items-center h-10 justify-center'
+            style={styles.memoItem}
-                onPress={() => router.push('/debug')}
+            onPress={() => handleMemoPress(item)}
-            >
+            activeOpacity={0.7}
-                <Text className="text-white">
+        >
-                    进入db调试页面
+            <View className="w-[3rem] h-[3rem] z-1">
-                </Text>
+                <React.Suspense fallback={<View style={styles.placeholderIcon} />}>
-            </TouchableOpacity>} */}
+                    <ChatSvg
-
+                        width="100%"
-            {/* 顶部标题和上传按钮 */}
+                        height="100%"
-            <View style={styles.header}>
+                        preserveAspectRatio="xMidYMid meet"
-                <Text style={styles.title}>Memo List</Text>
-            </View>
-
-            {/* 上传进度展示区域 */}
-            {uploadSessionStartTime && progressInfo.total > 0 && (
-                <View className="h-10 mt-6 mb-2 mx-4">
-                    <UploaderProgress
-                        imageUrl={progressInfo.image}
-                        uploadedCount={progressInfo.completed}
-                        totalCount={progressInfo.total}
                     />
-                </View>
+                </React.Suspense>
-            )}
+            </View>
-        </>
+            <View style={styles.memoContent}>
-    );
+                <Text
+                    style={styles.memoTitle}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                >
+                    {item.title || t('ask:ask.unNamed')}
+                </Text>
+                <Text
+                    style={styles.memoSubtitle}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                >
+                    {item.latest_message?.content?.text || t('ask:ask.noMessage')}
+                </Text>
+            </View>
+        </TouchableOpacity>
+    ), [handleMemoPress]);
+
+    // 渲染列表头部
+    const renderHeader = useCallback(() => (
+        <View style={styles.headerContainer}>
+            <Text style={[styles.title, { paddingTop: insets.top + 10 }]}>
+                {t('ask:ask.memoList')}
+            </Text>
+
+            {/* 上传进度 */}
+            <React.Suspense fallback={null}>
+                <UploadProgressSection />
+            </React.Suspense>
+        </View>
+    ), [insets.top]);
+
+    // 上传进度组件
+    const UploadProgressSection = () => {
+        const { progressInfo, uploadSessionStartTime } = useUploadManager();
+
+        if (!uploadSessionStartTime || progressInfo.total <= 0) {
+            return null;
+        }
+
+        return (
+            <View className="h-10 mt-2 mb-2 mx-4">
+                <UploaderProgress
+                    imageUrl={progressInfo.image}
+                    uploadedCount={progressInfo.completed}
+                    totalCount={progressInfo.total}
+                />
+            </View>
+        );
+    };
+
+    // 空状态
+    const renderEmptyComponent = useCallback(() => (
+        <View style={styles.emptyContainer}>
+            <Text style={styles.emptyText}>{t('ask:ask.noChat')}</Text>
+            <TouchableOpacity
+                style={styles.refreshButton}
+                onPress={handleRefresh}
+                disabled={isRefreshing}
+            >
+                <Text style={styles.refreshText}>
+                    {isRefreshing ? t('ask:ask.loading') : t('ask:ask.refresh')}
+                </Text>
+            </TouchableOpacity>
+        </View>
+    ), [handleRefresh, isRefreshing]);
+
+    // 如果组件未完全加载，显示骨架屏
+    if (!isMounted) {
+        return (
+            <View style={[styles.container, { paddingTop: insets.top }]}>
+                <SkeletonList />
+            </View>
+        );
+    }
 
     return (
-        <View style={[styles.container, { paddingTop: insets.top }]}>
+        <ErrorBoundary>
-            {/* <View className="w-full h-full">
+            <View style={[styles.container, { paddingTop: insets.top }]}>
-                <AutoUploadScreen />
+                <FlatList
-            </View> */}
+                    ref={flatListRef}
+                    data={historyList}
+                    renderItem={renderItem}
+                    keyExtractor={(item) => item.session_id}
+                    ListHeaderComponent={renderHeader}
+                    ListEmptyComponent={!isLoading ? renderEmptyComponent : null}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isRefreshing}
+                            onRefresh={handleRefresh}
+                            colors={['#FFB645']}
+                            tintColor="#FFB645"
+                            progressBackgroundColor="#ffffff"
+                        />
+                    }
+                    initialNumToRender={10}
+                    maxToRenderPerBatch={5}
+                    updateCellsBatchingPeriod={50}
+                    windowSize={11} // 5 screens in each direction (5 + 1 + 5)
+                    removeClippedSubviews={Platform.OS === 'android'}
+                    getItemLayout={(data, index) => ({
+                        length: 80,
+                        offset: 80 * index,
+                        index,
+                    })}
+                    contentContainerStyle={styles.listContent}
+                    ItemSeparatorComponent={() => <View style={styles.separator} />}
+                />
 
-            {/* 历史对话 */}
+                {/* 底部导航栏 */}
-            <FlatList
+                <React.Suspense fallback={null}>
-                ListHeaderComponent={renderHeader}
+                    <AskNavbar />
-                data={historyList}
+                </React.Suspense>
-                keyExtractor={(item) => item.session_id}
+            </View>
-                // 下拉刷新
+        </ErrorBoundary>
-                refreshControl={
-                    <RefreshControl
-                        refreshing={refreshing}
-                        onRefresh={getHistoryList}
-                        colors={['#FFB645']} // Android
-                        tintColor="#FFB645" // iOS
-                    />
-                }
-                ItemSeparatorComponent={() => (
-                    <View style={styles.separator} />
-                )}
-                getItemLayout={(data, index) => (
-                    { length: 80, offset: 80 * index, index }
-                )}
-                renderItem={({ item }) => (
-                    <TouchableOpacity
-                        style={styles.memoItem}
-                        onPress={() => handleMemoPress(item)}
-                    >
-                        <View className="w-[3rem] h-[3rem] z-1">
-                            <ChatSvg
-                                width="100%"
-                                height="100%"
-                                preserveAspectRatio="xMidYMid meet"
-                            />
-                        </View>
-                        <View style={styles.memoContent}>
-                            <Text
-                                style={styles.memoTitle}
-                                numberOfLines={1}
-                                ellipsizeMode="tail"
-                            >
-                                {item.title || 'memo list 历史消息'}
-                            </Text>
-                            <Text
-                                style={styles.memoTitle}
-                                numberOfLines={1}
-                                ellipsizeMode="tail"
-                            >
-                                {item.latest_message?.content?.text || 'memo list 历史消息'}
-                            </Text>
-                        </View>
-                    </TouchableOpacity>
-                )}
-            />
-            {/* 底部导航栏 */}
-            <AskNavbar />
-        </View>
     );
 };
 
+// 使用React.memo优化组件
+const MemoizedMemoList = React.memo(MemoList);
+
+export default MemoizedMemoList;
+
 const styles = StyleSheet.create({
-    separator: {
-        height: 1,
-        backgroundColor: '#f0f0f0',
-        marginLeft: 60, // 与头像对齐
-    },
     container: {
         flex: 1,
-        backgroundColor: 'white',
+        backgroundColor: '#fff',
     },
-    header: {
+    headerContainer: {
-        flexDirection: 'row',
+        paddingBottom: 16,
-        alignItems: 'center',
+        backgroundColor: '#fff',
-        justifyContent: 'center',
-        padding: 16,
     },
     title: {
-        fontSize: 24,
+        fontSize: 20,
         fontWeight: 'bold',
         color: '#4C320C',
+        textAlign: 'center',
+        marginBottom: 16,
     },
-    uploadButton: {
+    listContent: {
-        padding: 8,
+        paddingBottom: Platform.select({
+            ios: 30,
+            android: 20,
+        }),
     },
-    searchContainer: {
+    skeletonContainer: {
-        flexDirection: 'row',
+        flex: 1,
-        alignItems: 'center',
+        backgroundColor: '#fff',
-        backgroundColor: '#FFF',
+        paddingTop: 20,
-        borderRadius: 20,
-        marginHorizontal: 16,
-        paddingHorizontal: 16,
-        height: 48,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 2,
-    },
-    searchIcon: {
-        marginRight: 8,
     },
     memoItem: {
         flexDirection: 'row',
-        borderRadius: 0, // 移除圆角
-        padding: 16,
-        marginBottom: 0, // 移除底部边距
         alignItems: 'center',
-        gap: 16,
+        padding: 16,
-        backgroundColor: 'white',
+        backgroundColor: '#fff',
     },
-    avatar: {
+    placeholderIcon: {
-        width: 60,
+        width: 48,
-        height: 60,
+        height: 48,
-        borderRadius: 30,
+        backgroundColor: '#f0f0f0',
-        marginRight: 16,
+        borderRadius: 24,
     },
     memoContent: {
         flex: 1,
         marginLeft: 12,
-        gap: 6,
         justifyContent: 'center',
-        minWidth: 0, // 这行很重要，确保文本容器可以收缩到比内容更小
     },
     memoTitle: {
-        fontSize: 16,
+        fontSize: 14,
         fontWeight: '500',
-        color: '#333',
+        color: '#4C320C',
-        flex: 1,  // 或者 flexShrink: 1
+        marginBottom: 4,
-        marginLeft: 12,
     },
     memoSubtitle: {
-        fontSize: 14,
+        fontSize: 12,
-        color: '#666',
+        color: '#AC7E35',
     },
-    tabBar: {
+    separator: {
-        flexDirection: 'row',
+        height: 1 / PixelRatio.get(),
-        justifyContent: 'space-around',
+        backgroundColor: '#f0f0f0',
-        alignItems: 'center',
+        marginLeft: 60,
-        backgroundColor: '#FFF',
-        borderTopWidth: 1,
-        borderTopColor: '#EEE',
-        paddingVertical: 12,
     },
-    tabBarSvg: {
+    emptyContainer: {
-        color: 'red',
-    },
-    tabItem: {
         flex: 1,
-        alignItems: 'center',
-    },
-    tabCenter: {
-        width: 60,
-        height: 60,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    centerTabIcon: {
-        width: 50,
-        height: 50,
-        borderRadius: 25,
-        backgroundColor: '#FF9500',
         justifyContent: 'center',
         alignItems: 'center',
-        marginTop: -30,
+        padding: 40,
     },
-    centerTabImage: {
+    emptyText: {
-        width: 40,
+        fontSize: 16,
-        height: 40,
+        color: '#999',
+        marginBottom: 20,
+    },
+    refreshButton: {
+        backgroundColor: '#FFB645',
+        paddingHorizontal: 24,
+        paddingVertical: 10,
         borderRadius: 20,
     },
-    // 在 tabBarContainer 样式中添加
+    refreshText: {
-    tabBarContainer: {
+        color: '#fff',
-        position: 'relative',
+        fontSize: 14,
-        paddingBottom: 0,
+        fontWeight: '500',
-        overflow: 'visible',
-        marginTop: 10, // 添加一些上边距
     },
-    tabBarContent: {
+});
-        flexDirection: 'row',
-        justifyContent: 'space-around',
-        alignItems: 'center',
-        height: 60,
-        position: 'relative',
-        backgroundColor: 'rgba(255, 255, 255, 0.7)', // 半透明白色背景
-        borderRadius: 30, // 圆角
-        marginHorizontal: 16, // 左右边距
-        // 添加边框效果
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.8)',
-        // 添加阴影
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0, 0, 0, 0.1)',
-                shadowOffset: { width: 0, height: 2 },
-                shadowOpacity: 0.8,
-                shadowRadius: 4,
-            },
-            android: {
-                elevation: 8,
-            },
-        }),
-    },
-    // 移除之前的 tabBarBackground 样式
-    // 修改 centerTabShadow 样式
-    centerTabShadow: {
-        position: 'absolute',
-        bottom: 15,
-        width: 60,
-        height: 60,
-        borderRadius: 30,
-        backgroundColor: 'white',
-        ...Platform.select({
-            ios: {
-                shadowColor: 'rgba(0, 0, 0, 0.2)',
-                shadowOffset: { width: 0, height: 4 },
-                shadowOpacity: 0.3,
-                shadowRadius: 6,
-            },
-            android: {
-                elevation: 10,
-            },
-        }),
-    },
-    centerTabContainer: {
-        flex: 1,
-        alignItems: 'center',
-        position: 'relative',
-        height: '100%',
-    },
-    centerTabButton: {
-        width: '100%',
-        height: '100%',
-        borderRadius: 30,
-        backgroundColor: '#FF9500',
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    notificationDot: {
-        position: 'absolute',
-        top: -2,
-        right: -4,
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-        backgroundColor: '#FF3B30',
-    },
-});
-
-export default MemoList;

components/common/ErrorBoundary.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+    }
+
+    handleRetry = () => {
+        this.setState({ hasError: false, error: undefined });
+    };
+
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            return (
+                <View style={styles.container}>
+                    <Text style={styles.title}>出错了</Text>
+                    <Text style={styles.error}>
+                        {this.state.error?.message || '发生了一些问题'}
+                    </Text>
+                    <TouchableOpacity style={styles.retryButton} onPress={this.handleRetry}>
+                        <Text style={styles.retryText}>重试</Text>
+                    </TouchableOpacity>
+                </View>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        backgroundColor: '#fff',
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+        marginBottom: 10,
+        color: '#333',
+    },
+    error: {
+        color: '#ff4d4f',
+        marginBottom: 20,
+        textAlign: 'center',
+    },
+    retryButton: {
+        backgroundColor: '#1890ff',
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: 4,
+    },
+    retryText: {
+        color: '#fff',
+        fontSize: 16,
+    },
+});
+
+export default ErrorBoundary;

components/memo/SkeletonItem.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+const SkeletonItem = () => {
+    return (
+        <View style={styles.container}>
+            <View style={styles.avatar} />
+            <View style={styles.content}>
+                <View style={styles.title} />
+                <View style={styles.subtitle} />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        backgroundColor: '#fff',
+    },
+    avatar: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: '#f0f0f0',
+    },
+    content: {
+        flex: 1,
+        marginLeft: 12,
+        justifyContent: 'center',
+    },
+    title: {
+        height: 16,
+        width: '60%',
+        backgroundColor: '#f0f0f0',
+        marginBottom: 8,
+        borderRadius: 4,
+    },
+    subtitle: {
+        height: 14,
+        width: '80%',
+        backgroundColor: '#f5f5f5',
+        borderRadius: 4,
+    },
+});
+
+export default React.memo(SkeletonItem);

i18n/locales/en/ask.json

@@ -5,6 +5,12 @@
         "ready": "Ready to wake up your memories?",
         "justAsk": "Just ask MeMo, let me bring them back to life!",
         "selectPhoto": "Select Photo",
-        "continueAsking": "Continue Asking"
+        "continueAsking": "Continue Asking",
+        "unNamed": "UnNamed",
+        "noMessage": "No Message",
+        "memoList": "Memo List",
+        "noChat": "No Chat",
+        "loading": "Loading...",
+        "refresh": "Refresh"
     }
 }

i18n/locales/zh/ask.json

@@ -5,6 +5,12 @@
         "ready": "Ready to wake up your memories?",
         "justAsk": "Just ask MeMo, let me bring them back to life!",
         "selectPhoto": "Select Photo",
-        "continueAsking": "Continue Asking"
+        "continueAsking": "Continue Asking",
+        "unNamed": "未命名对话",
+        "noMessage": "暂无消息",
+        "memoList": "对话记录",
+        "noChat": "暂无对话记录",
+        "loading": "加载中...",
+        "refresh": "刷新"
     }
 }

lib/prefetch.ts

@@ -0,0 +1,76 @@
+import { fetchApi } from './server-api-util';
+
+// 全局缓存对象
+const cache: Record<string, { data: any; timestamp: number }> = {};
+const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存时间
+
+/**
+ * 预取数据并缓存
+ * @param url API地址
+ * @param forceRefresh 是否强制刷新缓存
+ * @returns 返回Promise，解析为获取到的数据
+ */
+export const prefetchData = async <T>(url: string, forceRefresh = false): Promise<T> => {
+    const now = Date.now();
+
+    // 检查缓存是否存在且未过期
+    if (!forceRefresh && cache[url] && (now - cache[url].timestamp < CACHE_DURATION)) {
+        return cache[url].data as T;
+    }
+
+    try {
+        const data = await fetchApi<T>(url);
+        // 缓存数据
+        cache[url] = {
+            data,
+            timestamp: now,
+        };
+        return data;
+    } catch (error) {
+        console.error(`Prefetch failed for ${url}:`, error);
+        // 如果缓存中有旧数据，返回旧数据
+        if (cache[url]) {
+            return cache[url].data as T;
+        }
+        throw error;
+    }
+};
+
+/**
+ * 预取聊天列表
+ */
+export const prefetchChats = async () => {
+    return prefetchData<Array<{ session_id: string; title: string; latest_message?: any }>>('/chats');
+};
+
+/**
+ * 预取单个聊天详情
+ */
+export const prefetchChatDetail = async (sessionId: string) => {
+    return prefetchData(`/chats/${sessionId}/message-history`);
+};
+
+/**
+ * 清除指定URL的缓存
+ */
+export const clearCache = (url?: string) => {
+    if (url) {
+        delete cache[url];
+    } else {
+        // 清除所有缓存
+        Object.keys(cache).forEach(key => {
+            delete cache[key];
+        });
+    }
+};
+
+/**
+ * 获取缓存数据
+ */
+export const getCachedData = <T>(url: string): T | null => {
+    const cached = cache[url];
+    if (cached && (Date.now() - cached.timestamp < CACHE_DURATION)) {
+        return cached.data as T;
+    }
+    return null;
+};