From 6ca686f2c9b7f46433e6036e628e2444c12382d0 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Thu, 29 Jan 2026 16:51:13 +0800
Subject: [PATCH] fix: bug

---
 app/(tabs)/index.tsx   | 34 +++++++++++++++++-----------------
 app/(tabs)/my.tsx      | 16 ++++++++++++++++
 app/templateDetail.tsx | 37 +------------------------------------
 3 files changed, 34 insertions(+), 53 deletions(-)

diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
index 87ebdda..083c942 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -131,18 +131,18 @@ export default function HomeScreen() {
     }, [filteredTemplates, setLikeCountStates])
 
     // 状态判断 - 使用 useMemo 缓存
-    // 统一 loading 状态：只要有任何一个在加载，就显示 loading
-    const isLoading = useMemo(() =>
-        categoriesLoading || templatesLoading,
-        [categoriesLoading, templatesLoading]
+    // 只在首次加载分类时显示 loading，切换分类时不显示 loading（提升体验）
+    const isInitialLoading = useMemo(() =>
+        categoriesLoading || (templatesLoading && filteredTemplates.length === 0),
+        [categoriesLoading, templatesLoading, filteredTemplates.length]
     )
     const showEmptyState = useMemo(() =>
-        !isLoading && categoriesData?.categories?.length === 0,
-        [isLoading, categoriesData?.categories?.length]
+        !isInitialLoading && categoriesData?.categories?.length === 0,
+        [isInitialLoading, categoriesData?.categories?.length]
     )
     const showEmptyTemplates = useMemo(() =>
-        !isLoading && !showEmptyState && filteredTemplates.length === 0,
-        [isLoading, showEmptyState, filteredTemplates.length]
+        !isInitialLoading && !showEmptyState && !templatesLoading && filteredTemplates.length === 0,
+        [isInitialLoading, showEmptyState, templatesLoading, filteredTemplates.length]
     )
 
     const [refreshing, setRefreshing] = useState(false)
@@ -157,10 +157,10 @@ export default function HomeScreen() {
 
     // 加载更多处理
     const handleEndReached = useCallback(() => {
-        if (!loadingMore && hasMore && !isLoading) {
+        if (!loadingMore && hasMore && !templatesLoading) {
             loadMore()
         }
-    }, [loadingMore, hasMore, isLoading, loadMore])
+    }, [loadingMore, hasMore, templatesLoading, loadMore])
 
     // 左右滑动切换分类
     const handleSwipeLeft = useCallback(() => {
@@ -299,7 +299,7 @@ export default function HomeScreen() {
             />
 
             {/* 标签导航 */}
-            {!isLoading && !showEmptyState && (
+            {!isInitialLoading && !showEmptyState && (
                 <View
                     onLayout={(e) => handleTabsLayout(e.nativeEvent.layout.y, e.nativeEvent.layout.height)}
                     style={isSticky ? { opacity: 0, height: tabsHeight } : undefined}
@@ -314,8 +314,8 @@ export default function HomeScreen() {
                 </View>
             )}
 
-            {/* 统一的加载状态 */}
-            {isLoading && <LoadingState />}
+            {/* 统一的加载状态 - 只在首次加载时显示 */}
+            {isInitialLoading && <LoadingState />}
 
             {/* 错误状态 */}
             {categoriesError && (
@@ -335,7 +335,7 @@ export default function HomeScreen() {
     ), [
         activatesData?.activities,
         handleActivityPress,
-        isLoading,
+        isInitialLoading,
         showEmptyState,
         isSticky,
         tabsHeight,
@@ -369,8 +369,8 @@ export default function HomeScreen() {
         [filteredTemplates]
     )
 
-    // 只有在非加载状态且有数据时才显示列表
-    const showTemplateList = !isLoading && !showEmptyState && !showEmptyTemplates
+    // 只有在非首次加载状态且有数据时才显示列表
+    const showTemplateList = !isInitialLoading && !showEmptyState && !showEmptyTemplates
 
     return (
         <SafeAreaView style={styles.container} edges={['top']}>
@@ -386,7 +386,7 @@ export default function HomeScreen() {
             />
 
             {/* 吸顶标签导航 */}
-            {isSticky && !isLoading && !showEmptyState && (
+            {isSticky && !isInitialLoading && !showEmptyState && (
                 <View style={[styles.stickyTabsWrapper, { top: titleBarHeightRef.current + insets.top }]}>
                     <TabNavigation
                         tabs={tabs}
diff --git a/app/(tabs)/my.tsx b/app/(tabs)/my.tsx
index f4e0d95..03b6bc5 100644
--- a/app/(tabs)/my.tsx
+++ b/app/(tabs)/my.tsx
@@ -503,6 +503,14 @@ export default function My() {
                                                 index % 3 !== 2 && styles.galleryItemMarginRight,
                                                 styles.galleryItemMarginBottom,
                                             ]}
+                                            onPress={() => {
+                                                if (item.template?.id) {
+                                                    router.push({
+                                                        pathname: '/templateDetail' as any,
+                                                        params: { id: item.template.id },
+                                                    })
+                                                }
+                                            }}
                                         >
                                             <Image
                                                 source={item.template?.coverImageUrl ? { uri: item.template.coverImageUrl } : require('@/assets/images/membership.png')}
@@ -558,6 +566,14 @@ export default function My() {
                                                 index % 3 !== 2 && styles.galleryItemMarginRight,
                                                 styles.galleryItemMarginBottom,
                                             ]}
+                                            onPress={() => {
+                                                if (item.template?.id) {
+                                                    router.push({
+                                                        pathname: '/templateDetail' as any,
+                                                        params: { id: item.template.id },
+                                                    })
+                                                }
+                                            }}
                                         >
                                             <Image
                                                 source={item.template?.coverImageUrl ? { uri: item.template.coverImageUrl } : require('@/assets/images/membership.png')}
diff --git a/app/templateDetail.tsx b/app/templateDetail.tsx
index bf85fc6..034477f 100644
--- a/app/templateDetail.tsx
+++ b/app/templateDetail.tsx
@@ -17,10 +17,9 @@ import { useTranslation } from 'react-i18next'
 import { LeftArrowIcon } from '@/components/icon'
 import SearchResultsGrid from '@/components/SearchResultsGrid'
 import { DynamicForm, type FormSchema, type DynamicFormRef } from '@/components/DynamicForm'
-import { useTemplateActions, useTemplateDetail, useTemplateGenerations, useTemplateLike, useTemplateFavorite, type TemplateGeneration } from '@/hooks'
+import { useTemplateActions, useTemplateDetail, useTemplateGenerations, type TemplateGeneration } from '@/hooks'
 import Toast from '@/components/ui/Toast'
 import UploadReferenceImageDrawer from '@/components/drawer/UploadReferenceImageDrawer'
-import { SocialActionBar } from '@/components/blocks/ui'
 import { uploadFile } from '@/lib/uploadFile'
 
 const CARD_HEIGHTS = [214, 236, 200, 220, 210, 225]
@@ -34,8 +33,6 @@ export default function TemplateDetailScreen() {
     const { data: templateDetail, loading: templateLoading, error: templateError, execute: loadTemplateDetail } = useTemplateDetail()
     const { generations, loading: generationsLoading, execute: loadGenerations } = useTemplateGenerations()
     const { runTemplate } = useTemplateActions()
-    const { liked, loading: likeLoading, like, unlike, checkLiked } = useTemplateLike(templateId)
-    const { favorited, loading: favoriteLoading, favorite, unfavorite, checkFavorited } = useTemplateFavorite(templateId)
 
     const [formSchema, setFormSchema] = useState<FormSchema | null>(null)
     const [drawerVisible, setDrawerVisible] = useState(false)
@@ -56,14 +53,6 @@ export default function TemplateDetailScreen() {
         }
     }, [templateDetail])
 
-    // Initialize like and favorite status
-    useEffect(() => {
-        if (templateId) {
-            checkLiked()
-            checkFavorited()
-        }
-    }, [templateId, checkLiked, checkFavorited])
-
     const handleStartCreating = useCallback(() => {
         // Navigate to generateVideo page if no form schema
         if (!templateDetail?.formSchema?.startNodes || templateDetail.formSchema.startNodes.length === 0) {
@@ -236,23 +225,6 @@ export default function TemplateDetailScreen() {
                 </View>
             </ScrollView>
 
-            {/* Social Action Bar */}
-            {templateId && (
-                <View style={styles.socialActionBarContainer}>
-                    <SocialActionBar
-                        templateId={templateId}
-                        liked={liked}
-                        favorited={favorited}
-                        loading={likeLoading || favoriteLoading}
-                        onLike={like}
-                        onUnlike={unlike}
-                        onFavorite={favorite}
-                        onUnfavorite={unfavorite}
-                        testID="social-action-bar"
-                    />
-                </View>
-            )}
-
             {/* Upload Drawer - 移到最外层以确保从屏幕底部弹出 */}
             <UploadReferenceImageDrawer
                 visible={drawerVisible}
@@ -365,12 +337,5 @@ const styles = StyleSheet.create({
         color: '#ABABAB',
         fontSize: 12,
     },
-    socialActionBarContainer: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        backgroundColor: 'transparent',
-    },
 })