fix: bug

app/templateDetail.tsx

@@ -17,9 +17,10 @@ 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, type TemplateGeneration } from '@/hooks'
+import { useTemplateActions, useTemplateDetail, useTemplateGenerations, useTemplateLike, useTemplateFavorite, 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]
@@ -33,6 +34,8 @@ 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)
@@ -53,6 +56,14 @@ 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) {
@@ -225,6 +236,23 @@ 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}
@@ -267,7 +295,7 @@ const styles = StyleSheet.create({
         flex: 1,
     },
     scrollContent: {
-        paddingBottom: 20,
+        paddingBottom: 80,
     },
     titleSection: {
         paddingHorizontal: 12,
@@ -337,5 +365,12 @@ const styles = StyleSheet.create({
         color: '#ABABAB',
         fontSize: 12,
     },
+    socialActionBarContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: 'transparent',
+    },
 })