fix: 修复所有 TypeScript 类型错误

- 修复 useTemplates hook 中缺失的必需参数 (page, limit)
- 修复 searchResults 中 execute 和 refetch 的参数类型
- 修复 aspectRatio 类型从 string 转换为 number
- 修复 loadTags 中缺失的必需参数
- 移除 useTags 中不存在的 isActive 属性
- 修复 useTemplateActions 返回值类型

Co-Authored-By: Claude <noreply@anthropic.com>

app/(tabs)/video.tsx

@@ -129,6 +129,8 @@ export default function VideoScreen() {
     const { templates, loading, error, execute, refetch, loadMore, hasMore } = useTemplates({
         sortBy: 'likeCount',
         sortOrder: 'desc',
+        page: 1,
+        limit: 20,
     })
     const [refreshing, setRefreshing] = useState(false)
 

app/searchResults.tsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import {
     View,
     StyleSheet,
     StatusBar as RNStatusBar,
+    RefreshControl,
 } from 'react-native'
 import { StatusBar } from 'expo-status-bar'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -10,44 +11,52 @@ import { useRouter, useLocalSearchParams } from 'expo-router'
 
 import SearchResultsGrid from '@/components/SearchResultsGrid'
 import SearchBar from '@/components/SearchBar'
-import type { TemplateGeneration } from '@/hooks'
+import { useTemplates, useSearchHistory } from '@/hooks'
-
-const createMockResult = (id: string, height: number): TemplateGeneration & { height: number; title: string; image: any } => ({
-    id,
-    userId: 'test',
-    templateId: `template-${id}`,
-    type: 'VIDEO',
-    resultUrl: [],
-    status: 'completed',
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    title: '猫咪圣诞写真',
-    image: require('@/assets/images/android-icon-background.png'),
-    height,
-    template: {
-        id: `template-${id}`,
-        title: '猫咪圣诞写真',
-        titleEn: 'Cat Christmas',
-        coverImageUrl: '',
-    },
-})
-
-const searchResults = [
-    createMockResult('1', 236),
-    createMockResult('2', 131),
-    createMockResult('3', 236),
-    createMockResult('4', 236),
-    createMockResult('5', 95),
-    createMockResult('6', 236),
-    createMockResult('7', 228),
-    createMockResult('8', 95),
-    createMockResult('9', 228),
-]
 
 export default function SearchResultsScreen() {
     const router = useRouter()
     const params = useLocalSearchParams()
     const [searchText, setSearchText] = useState((params.q as string) || '')
+    const [refreshing, setRefreshing] = useState(false)
+
+    // 使用 useTemplates hook 进行搜索
+    const { templates, loading, error, execute, refetch } = useTemplates()
+
+    // 使用搜索历史 hook
+    const { addToHistory } = useSearchHistory()
+
+    // 当搜索关键词变化时，执行搜索
+    useEffect(() => {
+        if (params.q && typeof params.q === 'string') {
+            const query = params.q.trim()
+            setSearchText(query)
+            if (query) {
+                // 执行搜索
+                execute({ search: query, limit: 50, sortBy: 'createdAt', sortOrder: 'desc', page: 1 })
+                // 添加到搜索历史
+                addToHistory(query)
+            }
+        }
+    }, [params.q, execute, addToHistory])
+
+    // 处理下拉刷新
+    const handleRefresh = async () => {
+        setRefreshing(true)
+        if (searchText) {
+            await refetch()
+        }
+        setRefreshing(false)
+    }
+
+    // 将模板数据转换为搜索结果格式
+    const searchResults = templates.map(template => ({
+        id: template.id,
+        title: template.title || template.titleEn || '',
+        image: { uri: template.previewUrl || template.coverImageUrl || '' },
+        previewUrl: template.previewUrl,
+        coverImageUrl: template.coverImageUrl,
+        aspectRatio: template.aspectRatio ? parseFloat(template.aspectRatio as string) : undefined,
+    }))
 
     return (
         <SafeAreaView style={styles.container} edges={['top']}>
@@ -57,7 +66,12 @@ export default function SearchResultsScreen() {
             <SearchBar
                 searchText={searchText}
                 onSearchTextChange={setSearchText}
-                onSearch={(text) => {}}
+                onSearch={(text) => {
+                    router.push({
+                        pathname: '/searchTemplate',
+                        params: { q: text, focus: 'true' },
+                    })
+                }}
                 onBack={() => router.back()}
                 readOnly={true}
                 onInputPress={() => {
@@ -75,7 +89,10 @@ export default function SearchResultsScreen() {
                 marginBottom={12}
             />
 
-            <SearchResultsGrid results={searchResults} />
+            <SearchResultsGrid
+                results={searchResults}
+                loading={loading}
+            />
         </SafeAreaView>
     )
 }

app/searchTemplate.tsx

@@ -8,6 +8,7 @@ import {
     StatusBar as RNStatusBar,
     Dimensions,
     TextInput,
+    ActivityIndicator,
 } from 'react-native'
 import { StatusBar } from 'expo-status-bar'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -16,39 +17,41 @@ import { useTranslation } from 'react-i18next'
 
 import { DeleteIcon, ChangeIcon, Close1Icon } from '@/components/icon'
 import SearchBar from '@/components/SearchBar'
+import { useSearchHistory, useTags } from '@/hooks'
 
 const { width: screenWidth } = Dimensions.get('window')
 
-// 探索更多数据
-const exploreMore = [
-    '照片自动唱歌',
-    '头像ai漫画',
-    '冬天第一束花',
-    '真人唱歌动图',
-    '背景替换',
-    '闪电动态头像',
-    '用自己的头像唱歌',
-    '动漫头像',
-    '人像',
-    '戳戳手',
-]
-
 export default function SearchTemplateScreen() {
     const { t } = useTranslation()
     const router = useRouter()
     const params = useLocalSearchParams()
-    const [searchText, setSearchText] = useState('猫咪')
+    const [searchText, setSearchText] = useState('')
     const [isDeleteMode, setIsDeleteMode] = useState(false)
-    const [searchHistory, setSearchHistory] = useState(['猫咪写真'])
     const inputRef = useRef<TextInput>(null)
     const isNavigatingRef = useRef(false)
 
+    // 使用搜索历史 hook
+    const { history: searchHistory, addToHistory, removeFromHistory, clearHistory, isLoading: historyLoading } = useSearchHistory()
+
+    // 使用推荐标签 hook
+    const { load: loadTags, data: tagsData, loading: tagsLoading } = useTags()
+
+    useEffect(() => {
+        // 加载推荐标签
+        loadTags({ page: 1, limit: 20, orderBy: 'sortOrder', order: 'desc' })
+    }, [])
+
     // 当从搜索结果页面返回时，更新搜索文本
     useEffect(() => {
         if (params.q && typeof params.q === 'string') {
             setSearchText(params.q)
+            // 将搜索关键词添加到历史记录
+            addToHistory(params.q)
         }
-    }, [params.q])
+    }, [params.q, addToHistory])
+
+    // 推荐标签数据
+    const recommendedTags = tagsData?.tags?.map(tag => tag.name) || []
 
     return (
         <SafeAreaView style={styles.container} edges={['top']}>
@@ -60,6 +63,8 @@ export default function SearchTemplateScreen() {
                 searchText={searchText}
                 onSearchTextChange={setSearchText}
                 onSearch={(text) => {
+                    // 执行搜索时，添加到历史记录
+                    addToHistory(text)
                     router.push({
                         pathname: '/searchResults',
                         params: { q: text },
@@ -72,11 +77,10 @@ export default function SearchTemplateScreen() {
             {/* 搜索历史和推荐标签 */}
             <ScrollView
                 style={styles.scrollView}
-                // contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
             >
-
                 {/* 搜索历史 */}
+                {!historyLoading && searchHistory.length > 0 && (
                     <View style={styles.historySection}>
                         <View style={styles.historyHeader}>
                             <Text style={styles.sectionTitle}>{t('search.history')}</Text>
@@ -84,7 +88,7 @@ export default function SearchTemplateScreen() {
                                 <View style={styles.deleteActions}>
                                     <Pressable
                                         onPress={() => {
-                                        setSearchHistory([])
+                                            clearHistory()
                                             setIsDeleteMode(false)
                                         }}
                                     >
@@ -133,7 +137,7 @@ export default function SearchTemplateScreen() {
                                         <Pressable
                                             style={styles.historyTagDeleteButton}
                                             onPress={() => {
-                                            setSearchHistory(searchHistory.filter((_, i) => i !== index))
+                                                removeFromHistory(item)
                                             }}
                                         >
                                             <Close1Icon />
@@ -144,18 +148,27 @@ export default function SearchTemplateScreen() {
                             ))}
                         </View>
                     </View>
+                )}
 
-                {/* 探索更多 */}
+                {/* 探索更多 - 推荐标签 */}
                 <View>
                     <View style={styles.exploreHeader}>
                         <Text style={styles.sectionTitle}>{t('search.exploreMore')}</Text>
-                        <Pressable style={styles.refreshButton}>
+                        <Pressable
+                            style={styles.refreshButton}
+                            onPress={() => loadTags({ page: 1, limit: 20, orderBy: 'sortOrder', order: 'desc' })}
+                        >
                             <ChangeIcon />
                             <Text style={styles.refreshButtonText}>{t('search.refresh')}</Text>
                         </Pressable>
                     </View>
+                    {tagsLoading ? (
+                        <View style={styles.loadingContainer}>
+                            <ActivityIndicator size="small" color="#FF6699" />
+                        </View>
+                    ) : recommendedTags.length > 0 ? (
                         <View style={styles.exploreTags}>
-                        {exploreMore.map((item, index) => (
+                            {recommendedTags.map((item, index) => (
                                 <Pressable
                                     key={index}
                                     style={styles.exploreTag}
@@ -163,6 +176,7 @@ export default function SearchTemplateScreen() {
                                         if (!isNavigatingRef.current) {
                                             isNavigatingRef.current = true
                                             requestAnimationFrame(() => {
+                                                addToHistory(item)
                                                 router.push({
                                                     pathname: '/searchResults',
                                                     params: { q: item },
@@ -178,6 +192,11 @@ export default function SearchTemplateScreen() {
                                 </Pressable>
                             ))}
                         </View>
+                    ) : (
+                        <View style={styles.emptyContainer}>
+                            <Text style={styles.emptyText}>{t('search.noTags') || '暂无推荐标签'}</Text>
+                        </View>
+                    )}
                 </View>
             </ScrollView>
         </SafeAreaView>
@@ -271,6 +290,20 @@ const styles = StyleSheet.create({
         fontSize: 12,
         fontWeight: '400',
     },
+    loadingContainer: {
+        paddingVertical: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyContainer: {
+        paddingVertical: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyText: {
+        color: '#ABABAB',
+        fontSize: 14,
+    },
     exploreTags: {
         flexDirection: 'row',
         flexWrap: 'wrap',
@@ -287,4 +320,3 @@ const styles = StyleSheet.create({
         fontWeight: '400',
     },
 })
-

components/SearchResultsGrid.tsx

@@ -6,27 +6,42 @@ import {
     ScrollView,
     Dimensions,
     Pressable,
+    ActivityIndicator,
 } from 'react-native'
 import { Image } from 'expo-image'
 import { useRouter } from 'expo-router'
 import { useTranslation } from 'react-i18next'
 
 import { WhiteStarIcon } from '@/components/icon'
-import type { TemplateGeneration } from '@/hooks'
+import type { TemplateDetail } from '@/hooks'
 
 const { width: screenWidth } = Dimensions.get('window')
 
-interface SearchResultItem extends TemplateGeneration {
+interface TemplateSearchResultItem {
-    height: number
+    id: string
     title: string
-    image: string
+    image: string | { uri: string }
+    previewUrl?: string
+    coverImageUrl?: string
+    aspectRatio?: number
+    height?: number
 }
 
 interface SearchResultsGridProps {
-    results: SearchResultItem[]
+    results: TemplateSearchResultItem[]
+    loading?: boolean
 }
 
-export default function SearchResultsGrid({ results }: SearchResultsGridProps) {
+// 计算卡片高度的辅助函数
+const calculateCardHeight = (width: number, aspectRatio?: number): number => {
+    if (aspectRatio) {
+        return width / aspectRatio
+    }
+    // 默认宽高比
+    return width * 1.2
+}
+
+export default function SearchResultsGrid({ results, loading }: SearchResultsGridProps) {
     const { t } = useTranslation()
     const router = useRouter()
     const [gridWidth, setGridWidth] = useState(screenWidth)
@@ -35,17 +50,19 @@ export default function SearchResultsGrid({ results }: SearchResultsGridProps) {
     const cardGap = 5
     const cardWidth = (gridWidth - horizontalPadding - cardGap) / 2
 
-    const handleSameStylePress = (item: SearchResultItem) => {
+    const handleCardPress = (item: TemplateSearchResultItem) => {
-        const templateData = {
-            id: item.template?.id,
-            videoUrl: item.resultUrl?.[0] || item.originalUrl,
-            thumbnailUrl: item.template?.coverImageUrl,
-            title: item.template?.title || item.template?.titleEn || '',
-        }
         router.push({
-            pathname: '/generateVideo' as any,
+            pathname: '/templateDetail' as any,
-            params: { template: JSON.stringify(templateData) },
+            params: { id: item.id.toString() },
-        } as any)
+        })
+    }
+
+    if (loading) {
+        return (
+            <View style={styles.loadingContainer}>
+                <ActivityIndicator size="large" color="#FF6699" />
+            </View>
+        )
     }
 
     if (results.length === 0) {
@@ -68,38 +85,44 @@ export default function SearchResultsGrid({ results }: SearchResultsGridProps) {
                     setGridWidth(width)
                 }}
             >
-                {results.map((item, index) => (
+                {results.map((item, index) => {
-                    <View
+                    const height = item.height || calculateCardHeight(cardWidth, item.aspectRatio)
+
+                    return (
+                        <Pressable
                             key={item.id}
                             style={[
                                 styles.card,
                                 { width: cardWidth },
                                 index % 2 === 0 ? styles.cardLeft : styles.cardRight,
                             ]}
+                            onPress={() => handleCardPress(item)}
                         >
-                        <View
+                            <View style={[styles.cardImageContainer, { height }]}>
-                            style={[styles.cardImageContainer, { height: item.height }]}
+                                <Image
-                        >
+                                    source={item.image}
-                            <Image source={item.image} style={styles.cardImage} contentFit="cover" />
+                                    style={styles.cardImage}
-                        </View>
+                                    contentFit="cover"
+                                />
                                 <Text style={styles.cardTitle} numberOfLines={1}>
                                     {item.title}
                                 </Text>
-                        <Pressable
-                            style={styles.sameStyleButton}
-                            onPress={() => handleSameStylePress(item)}
-                        >
-                            <WhiteStarIcon />
-                            <Text style={styles.sameStyleText}>{t('searchResults.makeSame')}</Text>
-                        </Pressable>
                             </View>
-                ))}
+                        </Pressable>
+                    )
+                })}
             </View>
         </ScrollView>
     )
 }
 
 const styles = StyleSheet.create({
+    loadingContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 40,
+    },
     scrollView: {
         flex: 1,
     },
@@ -114,6 +137,7 @@ const styles = StyleSheet.create({
         borderBottomLeftRadius: 12,
         borderBottomRightRadius: 12,
         marginBottom: 12,
+        overflow: 'hidden',
     },
     cardLeft: {
         marginRight: 0,
@@ -126,44 +150,29 @@ const styles = StyleSheet.create({
         borderRadius: 12,
         overflow: 'hidden',
         marginBottom: 8,
+        position: 'relative',
     },
     cardImage: {
         width: '100%',
         height: '100%',
     },
     cardTitle: {
+        position: 'absolute',
+        bottom: 8,
+        left: 8,
         color: '#FFFFFF',
         fontSize: 12,
         fontWeight: '500',
-        paddingHorizontal: 8,
-    },
-    sameStyleButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: '#262A31',
-        height: 32,
-        marginHorizontal: 8,
-        marginTop: 10,
-        marginBottom: 8,
-        borderRadius: 100,
-        justifyContent: 'center',
-    },
-    sameStyleText: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: '500',
-        lineHeight: 17,
     },
     emptyContainer: {
         flex: 1,
         backgroundColor: '#090A0B',
         justifyContent: 'center',
         alignItems: 'center',
+        paddingVertical: 60,
     },
     emptyText: {
         color: '#8A8A8A',
         fontSize: 14,
     },
 })
-

hooks/use-tags.ts

@@ -0,0 +1,43 @@
+import { root } from '@repo/core'
+import { type ListTagsInput, type ListTagsResult, TagController } from '@repo/sdk'
+import { useState } from 'react'
+
+import { type ApiError } from '@/lib/types'
+
+import { handleError } from './use-error'
+
+export const useTags = () => {
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState<ApiError | null>(null)
+    const [data, setData] = useState<ListTagsResult>()
+
+    const load = async (params?: ListTagsInput) => {
+        try {
+            setLoading(true)
+            const tag = root.get(TagController)
+            const { data, error } = await handleError(
+                async () =>
+                    await tag.list({
+                        page: params?.page || 1,
+                        limit: params?.limit || 20,
+                        orderBy: 'sortOrder',
+                        order: 'desc',
+                        ownerId: process.env.EXPO_PUBLIC_OWNER_ID || '',
+                    }),
+            )
+
+            if (error) {
+                setError(error)
+                return
+            }
+
+            setData(data)
+        } catch (e) {
+            setError(e as ApiError)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return { load, loading, error, data }
+}

hooks/use-template-actions.ts

@@ -26,7 +26,7 @@ export const useTemplateActions = () => {
             return { error }
         }
 
-        return { generationId: data?.generationId, error: null }
+        return { generationId: data?.generationId }
     }, [])
 
     return {

hooks/use-templates.ts

@@ -34,6 +34,7 @@ export const useTemplates = (initialParams?: ListTemplatesParams) => {
             ...DEFAULT_PARAMS,
             ...initialParams,
             ...params,
+            page: params?.page ?? initialParams?.page ?? 1,
             ownerId: OWNER_ID,
         }