731 lines
24 KiB
TypeScript
731 lines
24 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons'
|
|
import type { GetUserFavoritesResponse } from '@repo/sdk'
|
|
import { Block, ConfirmModal, Text, Toast, VideoBox } from '@share/components'
|
|
import Img from '@share/components/Img'
|
|
import { FlashList } from '@shopify/flash-list'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { router } from 'expo-router'
|
|
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import { ActivityIndicator, RefreshControl, TextInput } from 'react-native'
|
|
|
|
import BannerSection from '@/components/BannerSection'
|
|
import { useTemplateActions } from '@/hooks/actions/use-template-actions'
|
|
import { useAuth } from '@/hooks/core/use-auth'
|
|
import { useUserBalance } from '@/hooks/core/use-user-balance'
|
|
import { useTemplates } from '@/hooks/data'
|
|
import { useFavoriteTemplates } from '@/hooks/data/use-favorite-templates'
|
|
import { usePublicTemplates } from '@/hooks/data/use-public-templates'
|
|
import { screenWidth } from '@/utils'
|
|
import { cn } from '@/utils/cn'
|
|
|
|
const BACKGROUND_VIDEOS = [
|
|
'https://cdn.roasmax.cn/material/b46f380532e14cf58dd350dbacc7c34a.mp4',
|
|
'https://cdn.roasmax.cn/material/992e6c5d940c42feb71c27e556b754c0.mp4',
|
|
'https://cdn.roasmax.cn/material/e4947477843f4067be7c37569a33d17b.mp4',
|
|
]
|
|
|
|
const CATEGORY_ID = `cat_iw83x5bg54fmjgvciju`
|
|
|
|
type MediaItem = {
|
|
id: string
|
|
type: 'image' | 'video'
|
|
url: string
|
|
poster?: string
|
|
likeCount: number
|
|
}
|
|
type ActiveTab = 'gen' | '' | 'new' | 'like'
|
|
|
|
type SearchOverlayProps = {
|
|
isOpen: boolean
|
|
searchText?: string
|
|
onChange?: (v: string) => void
|
|
onClose: () => void
|
|
onSearch: (v: string) => void
|
|
}
|
|
const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen, onChange, onClose, onSearch }) {
|
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
|
const [searchText, setSearchText] = useState('')
|
|
const handleTextChange = (text: string) => {
|
|
setSearchText(text)
|
|
onChange && onChange(text)
|
|
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current)
|
|
}
|
|
|
|
timerRef.current = setTimeout(() => {
|
|
onSearch(text)
|
|
}, 2000)
|
|
}
|
|
|
|
useEffect(() => {
|
|
// 删除定时器
|
|
return () => {
|
|
if (timerRef.current) {
|
|
clearTimeout(timerRef.current)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
if (!isOpen) return null
|
|
return (
|
|
<Block className="absolute inset-x-0 top-0 z-50 mt-[24px] flex-row items-center gap-[8px] px-[20px]">
|
|
<Block
|
|
className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]"
|
|
style={{ height: 48, transform: [{ skewX: '-6deg' }] }}
|
|
>
|
|
<Ionicons color="black" name="search" size={20} style={{ marginRight: 8 }} />
|
|
<TextInput
|
|
autoFocus
|
|
placeholder="搜索作品 / 用户..."
|
|
placeholderTextColor="#9CA3AF"
|
|
value={searchText}
|
|
style={{
|
|
flex: 1,
|
|
fontSize: 14,
|
|
fontWeight: 'bold',
|
|
color: 'black',
|
|
}}
|
|
onChangeText={handleTextChange}
|
|
/>
|
|
</Block>
|
|
<Block
|
|
className="items-center justify-center border-[3px] border-black bg-accent shadow-[4px_4px_0px_#000]"
|
|
style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
|
|
onClick={onClose}
|
|
>
|
|
<Ionicons color="black" name="close" size={24} style={{ transform: [{ skewX: '6deg' }] }} />
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type GooActionsProps = {
|
|
gooPoints: number
|
|
onAddGoo: () => void
|
|
onOpenSearch: () => void
|
|
}
|
|
const GooActions = memo<GooActionsProps>(function GooActions({ gooPoints, onAddGoo, onOpenSearch }) {
|
|
return (
|
|
<Block>
|
|
<Block className="mt-[12px] flex-row items-center gap-[8px]">
|
|
<Block
|
|
className="flex-row items-center gap-[4px] rounded-full border-[3px] border-white bg-black px-[12px] py-[8px] shadow-[3px_3px_0px_rgba(0,0,0,0.5)]"
|
|
onClick={onAddGoo}
|
|
>
|
|
<Text className="text-[12px] font-black italic text-accent">{gooPoints} Goo</Text>
|
|
<Ionicons color="#FFE500" name="add" size={12} style={{ fontWeight: 'bold' }} />
|
|
</Block>
|
|
|
|
<Block
|
|
className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
|
|
onClick={onOpenSearch}
|
|
>
|
|
<Ionicons color="black" name="search" size={22} />
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type HeroCircleProps = {
|
|
selectedItem: MediaItem | null
|
|
onQuickGen: () => void
|
|
rightSlot: React.ReactNode
|
|
}
|
|
const HeroCircle = memo<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, rightSlot }) {
|
|
if (!selectedItem) {
|
|
return (
|
|
<Block className="relative z-10 mt-[12px] items-center justify-between">
|
|
<Block className="relative flex-row justify-between">
|
|
<Block className="relative z-10 mt-[20px] size-[224px] items-center justify-center rounded-full border-4 border-black bg-white/20 shadow-deep-black">
|
|
<Text className="text-[14px] font-bold text-white/60">加载中...</Text>
|
|
</Block>
|
|
{rightSlot}
|
|
</Block>
|
|
</Block>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Block className="relative z-10 mt-[12px] items-center justify-between">
|
|
<Block className="relative flex-row justify-between">
|
|
<Block className="relative z-10 mt-[20px] size-[224px] rounded-full border-4 border-black bg-white shadow-deep-black">
|
|
<Block className="relative size-full overflow-hidden rounded-full bg-black">
|
|
{selectedItem.type === 'video' ? (
|
|
<VideoBox style={{ height: 216, width: 216, borderRadius: 108 }} url={selectedItem.url} />
|
|
) : (
|
|
<Img className="size-full" src={selectedItem.url} />
|
|
)}
|
|
|
|
<Block className="absolute inset-0">
|
|
<LinearGradient
|
|
colors={['rgba(255,255,255,0.3)', 'transparent']}
|
|
end={{ x: 1, y: 1 }}
|
|
start={{ x: 0, y: 0 }}
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
borderRadius: 9999,
|
|
}}
|
|
/>
|
|
</Block>
|
|
</Block>
|
|
|
|
<Block className="pointer-events-none absolute inset-0 rounded-full border-2 border-black/10" />
|
|
|
|
<Block className="absolute bottom-[24px] left-[8px] z-20 max-w-[100px] bg-black px-[12px] py-[4px] shadow-small-accent">
|
|
<Text className="font-900 -skew-x-12 text-[10px] italic text-white" ellipsizeMode="tail" numberOfLines={1}>
|
|
{selectedItem?.id}
|
|
</Text>
|
|
</Block>
|
|
|
|
<Block
|
|
className="absolute bottom-[16px] right-0 z-30 -skew-x-6 flex-row items-center gap-[4px] border-[3px] border-black bg-accent px-[16px] py-[6px] shadow-medium-black"
|
|
onClick={onQuickGen}
|
|
>
|
|
<Ionicons color="black" name="flash" size={14} />
|
|
<Text className="font-900 text-[12px] italic text-black">GET 同款</Text>
|
|
</Block>
|
|
</Block>
|
|
|
|
{rightSlot}
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type FilterSectionProps = {
|
|
activeTab: ActiveTab
|
|
onChange: (t: ActiveTab) => void
|
|
}
|
|
const FilterSection = memo<FilterSectionProps>(function FilterSection({ activeTab, onChange }) {
|
|
const tabs = useMemo(
|
|
() => [
|
|
{ label: '最热', state: '' as const },
|
|
{ label: '最新', state: 'new' as const },
|
|
{ label: '喜欢', state: 'like' as const },
|
|
],
|
|
[],
|
|
)
|
|
|
|
return (
|
|
<Block className="mt-[12px] flex-row items-end justify-between">
|
|
<Block className="flex-row gap-[8px]">
|
|
{tabs.map(({ label, state }) => {
|
|
const isActive = activeTab === state
|
|
return (
|
|
<Block
|
|
key={state}
|
|
className={`border-2 border-black px-[16px] py-[4px] ${isActive ? 'bg-accent' : 'bg-white'}`}
|
|
style={{
|
|
transform: [{ skewX: '-6deg' }],
|
|
}}
|
|
onClick={() => onChange(state)}
|
|
>
|
|
<Text className={`text-[10px] font-[900] italic ${isActive ? 'text-black' : 'text-gray-500'}`}>
|
|
{label}
|
|
</Text>
|
|
</Block>
|
|
)
|
|
})}
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
type GridItemProps = {
|
|
item: MediaItem
|
|
isSelected: boolean
|
|
itemWidth: number
|
|
onSelect: () => void
|
|
}
|
|
const GridItem = memo<GridItemProps>(function GridItem({ item, isSelected, itemWidth, onSelect }) {
|
|
// console.log('item-------------', item);
|
|
|
|
return (
|
|
<Block className="relative mb-[12px]" onClick={onSelect}>
|
|
<Block
|
|
className={`relative overflow-hidden border-2 ${isSelected ? 'border-accent' : 'border-black'}`}
|
|
style={{
|
|
transform: [{ skewX: '-6deg' }],
|
|
height: itemWidth,
|
|
width: itemWidth,
|
|
}}
|
|
>
|
|
{/* {item.type === 'video' ? (
|
|
<VideoBox url={item.url} style={{ height: itemWidth, width: itemWidth }} />
|
|
) : (
|
|
<Img src={item.poster} className="h-full w-full" />
|
|
)} */}
|
|
{/* <Img src={item.poster} className="h-full w-full" /> */}
|
|
|
|
<VideoBox style={{ height: itemWidth, width: itemWidth }} url={item.url} />
|
|
|
|
{isSelected && <Block className="absolute inset-0 border-[3px] border-accent" />}
|
|
|
|
<Block
|
|
className={cn(
|
|
'absolute left-[0px] top-[0px] z-[20] border-b-[2px] border-r-[2px] border-black bg-black px-[6px] py-[2px]',
|
|
{
|
|
'bg-accent': isSelected,
|
|
},
|
|
)}
|
|
>
|
|
<Text
|
|
className={cn('font-900 text-[8px] text-white', {
|
|
'text-black': isSelected,
|
|
})}
|
|
>
|
|
{item.id}
|
|
</Text>
|
|
</Block>
|
|
|
|
<Block
|
|
className="absolute inset-x-0 bottom-0 z-20 items-end justify-between p-[4px] pt-[16px]"
|
|
style={{ transform: [{ skewX: '6deg' }] }}
|
|
>
|
|
<LinearGradient
|
|
colors={['rgba(0,0,0,0.8)', 'transparent']}
|
|
end={{ x: 0, y: 0 }}
|
|
start={{ x: 0, y: 1 }}
|
|
style={{
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
}}
|
|
/>
|
|
|
|
<Block className="w-full flex-1 flex-row items-center justify-between px-[4px]">
|
|
<Block className="">
|
|
<Text className="font-900 max-w-[40px] -skew-x-6 text-[7px] italic text-white" numberOfLines={1}>
|
|
{item.id}
|
|
</Text>
|
|
</Block>
|
|
<Block className="-skew-x-6 flex-row items-center gap-[2px]">
|
|
<Ionicons color="#FF0000" name="heart" size={10} />
|
|
<Text className="font-900 text-[8px] italic text-white">{item.likeCount}</Text>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
})
|
|
|
|
/** =========================
|
|
* Entry page
|
|
* ========================= */
|
|
|
|
export default function Sync() {
|
|
const { user, isAuthenticated } = useAuth()
|
|
const { balance, load: loadBalance } = useUserBalance()
|
|
const { data: templatesData, loading: templatesLoading, execute: loadTemplates } = useTemplates()
|
|
const {
|
|
data: publicTemplatesData,
|
|
loading: publicTemplatesLoading,
|
|
execute: loadPublicTemplates,
|
|
} = usePublicTemplates()
|
|
const { data: favoritesData, loading: favoritesLoading, execute: loadFavorites } = useFavoriteTemplates()
|
|
const { runTemplate } = useTemplateActions()
|
|
|
|
const [searchText, setSearchText] = useState('')
|
|
|
|
const [isSearchOpen, setIsSearchOpen] = useState(false)
|
|
const [activeTab, setActiveTab] = useState<ActiveTab>('')
|
|
|
|
const [page, setPage] = useState(1)
|
|
const [hasMore, setHasMore] = useState(true)
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
const [loadingMore, setLoadingMore] = useState(false)
|
|
const [allItems, setAllItems] = useState<MediaItem[]>([])
|
|
const isLoadingRef = useRef(false)
|
|
|
|
const onAddGoo = useCallback(() => {
|
|
router.push('/pointList')
|
|
}, [])
|
|
|
|
const transformTemplateToMediaItem = useCallback((template: any): MediaItem => {
|
|
const isVideo = template.previewUrl?.includes('.mp4')
|
|
return {
|
|
id: template.id,
|
|
type: (isVideo ? 'video' : 'image') as 'video' | 'image',
|
|
url: isVideo ? template.previewUrl : template.coverImageUrl || template.previewUrl,
|
|
poster: isVideo ? template.coverImageUrl : undefined,
|
|
likeCount: template.likeCount || 0,
|
|
}
|
|
}, [])
|
|
|
|
const galleryItems = useMemo<MediaItem[]>(() => allItems, [allItems])
|
|
|
|
const [selectedItem, setSelectedItem] = useState<MediaItem | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (galleryItems.length > 0 && !selectedItem) {
|
|
setSelectedItem(galleryItems[0])
|
|
}
|
|
}, [galleryItems, selectedItem])
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated && user?.id) {
|
|
loadBalance()
|
|
}
|
|
}, [isAuthenticated, user?.id])
|
|
|
|
// Tab 切换时重置并加载数据
|
|
useEffect(() => {
|
|
setPage(1)
|
|
setHasMore(true)
|
|
setAllItems([])
|
|
|
|
const initialLoad = async () => {
|
|
if (isLoadingRef.current) return
|
|
isLoadingRef.current = true
|
|
setRefreshing(true)
|
|
try {
|
|
let newItems: MediaItem[] = []
|
|
const limit = 20
|
|
|
|
if (activeTab === 'like') {
|
|
if (!isAuthenticated) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
const { data, error } = await loadFavorites({ limit, page: 1 })
|
|
if (error || !data?.favorites) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.favorites
|
|
.filter((fav: GetUserFavoritesResponse['favorites'][number]) => fav.template && !fav.template.isDeleted)
|
|
.map((fav: GetUserFavoritesResponse['favorites'][number]) => transformTemplateToMediaItem(fav.template!))
|
|
} else if (activeTab === 'new') {
|
|
if (isAuthenticated) {
|
|
const { data, error } = await loadTemplates({
|
|
limit,
|
|
page: 1,
|
|
sortBy: 'createdAt',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
} else {
|
|
const { data, error } = await loadPublicTemplates({
|
|
limit,
|
|
sortBy: 'createdAt',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
setHasMore(false)
|
|
}
|
|
} else {
|
|
if (isAuthenticated) {
|
|
const { data, error } = await loadTemplates({
|
|
limit,
|
|
page: 1,
|
|
sortBy: 'likeCount',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
} else {
|
|
const { data, error } = await loadPublicTemplates({
|
|
limit,
|
|
sortBy: 'likeCount',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
setHasMore(false)
|
|
}
|
|
}
|
|
|
|
if (newItems.length < limit) {
|
|
setHasMore(false)
|
|
}
|
|
|
|
setAllItems(newItems)
|
|
} catch (error) {
|
|
console.error('Failed to load data:', error)
|
|
setHasMore(false)
|
|
} finally {
|
|
isLoadingRef.current = false
|
|
setRefreshing(false)
|
|
}
|
|
}
|
|
|
|
initialLoad()
|
|
}, [activeTab, isAuthenticated])
|
|
|
|
const loadData = useCallback(
|
|
async (pageNum: number, isRefresh: boolean = false) => {
|
|
if (!isRefresh && !hasMore) return
|
|
if (loadingMore || refreshing || isLoadingRef.current) return
|
|
|
|
isLoadingRef.current = true
|
|
|
|
if (isRefresh) {
|
|
setRefreshing(true)
|
|
} else {
|
|
setLoadingMore(true)
|
|
}
|
|
|
|
try {
|
|
let newItems: MediaItem[] = []
|
|
const limit = 21
|
|
|
|
if (activeTab === 'like') {
|
|
if (!isAuthenticated) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
const { data, error } = await loadFavorites({ limit, page: pageNum })
|
|
if (error || !data?.favorites) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.favorites
|
|
.filter((fav: GetUserFavoritesResponse['favorites'][number]) => fav.template && !fav.template.isDeleted)
|
|
.map((fav: GetUserFavoritesResponse['favorites'][number]) => transformTemplateToMediaItem(fav.template!))
|
|
} else if (activeTab === 'new') {
|
|
if (!isAuthenticated) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
const { data, error } = await loadTemplates({
|
|
limit,
|
|
page: pageNum,
|
|
sortBy: 'createdAt',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
} else {
|
|
if (!isAuthenticated) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
const { data, error } = await loadTemplates({
|
|
limit,
|
|
page: pageNum,
|
|
sortBy: 'likeCount',
|
|
sortOrder: 'desc',
|
|
})
|
|
if (error || !data?.templates) {
|
|
setHasMore(false)
|
|
return
|
|
}
|
|
newItems = data.templates.map(transformTemplateToMediaItem)
|
|
}
|
|
|
|
if (newItems.length < limit) {
|
|
setHasMore(false)
|
|
}
|
|
|
|
if (isRefresh) {
|
|
setAllItems(newItems)
|
|
} else {
|
|
setAllItems((prev) => [...prev, ...newItems])
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load data:', error)
|
|
setHasMore(false)
|
|
} finally {
|
|
isLoadingRef.current = false
|
|
setRefreshing(false)
|
|
setLoadingMore(false)
|
|
}
|
|
},
|
|
[
|
|
activeTab,
|
|
isAuthenticated,
|
|
hasMore,
|
|
loadingMore,
|
|
refreshing,
|
|
loadTemplates,
|
|
loadPublicTemplates,
|
|
loadFavorites,
|
|
transformTemplateToMediaItem,
|
|
],
|
|
)
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
setPage(1)
|
|
setHasMore(true)
|
|
loadData(1, true)
|
|
}, [loadData])
|
|
|
|
const handleLoadMore = useCallback(() => {
|
|
if (!hasMore || loadingMore || refreshing || isLoadingRef.current) return
|
|
const nextPage = page + 1
|
|
setPage(nextPage)
|
|
loadData(nextPage, false)
|
|
}, [page, hasMore, loadingMore, refreshing, loadData])
|
|
|
|
const handleQuickGen = useCallback(async () => {
|
|
if (!isAuthenticated) {
|
|
Toast.show({ title: '请先登录' })
|
|
return
|
|
}
|
|
|
|
if (!selectedItem) {
|
|
Toast.show({ title: '请先选择一个模板' })
|
|
return
|
|
}
|
|
|
|
const cost = 2
|
|
|
|
if (balance < cost) {
|
|
Toast.show({ title: '余额不足，请充值' })
|
|
return
|
|
}
|
|
|
|
Toast.showModal(
|
|
<ConfirmModal
|
|
content={
|
|
<Text className="text-[14px] font-bold leading-relaxed text-gray-800">
|
|
生成同款风格将消耗 <Text className="mx-[4px] text-[20px] font-black italic text-[#e61e25]">{cost} Goo</Text>{' '}
|
|
算力。
|
|
</Text>
|
|
}
|
|
onCancel={() => Toast.hideModal()}
|
|
onConfirm={async () => {
|
|
Toast.hideModal()
|
|
// 要传 扣费返回的凭证
|
|
const { generationId, error } = await runTemplate({
|
|
templateId: selectedItem.id,
|
|
data: {},
|
|
originalUrl: selectedItem.url,
|
|
})
|
|
|
|
if (error || !generationId) {
|
|
Toast.show({ title: error?.message || '生成失败' })
|
|
return
|
|
}
|
|
|
|
Toast.show({ title: '生成成功！' })
|
|
if (user?.id) loadBalance()
|
|
}}
|
|
/>,
|
|
{},
|
|
)
|
|
}, [isAuthenticated, balance, selectedItem, runTemplate, user?.id, loadBalance])
|
|
|
|
const openSearch = useCallback(() => setIsSearchOpen(true), [])
|
|
const closeSearch = useCallback(() => {
|
|
setIsSearchOpen(false)
|
|
setSearchText('')
|
|
}, [])
|
|
|
|
const itemWidth = Math.floor((screenWidth - 24 - 12 * 2) / 3)
|
|
const renderGridItem = useCallback(
|
|
({ item }: { item: MediaItem }) => {
|
|
const isSelected = selectedItem?.id === item.id
|
|
return (
|
|
<GridItem isSelected={isSelected} item={item} itemWidth={itemWidth} onSelect={() => setSelectedItem(item)} />
|
|
)
|
|
},
|
|
[selectedItem?.id],
|
|
)
|
|
|
|
const renderListFooter = useCallback(() => {
|
|
if (!loadingMore) return null
|
|
return (
|
|
<Block className="items-center py-[20px]">
|
|
<ActivityIndicator color="#FFE500" size="small" />
|
|
</Block>
|
|
)
|
|
}, [loadingMore])
|
|
|
|
const renderListEmpty = useCallback(() => {
|
|
if (activeTab === 'like' && !isAuthenticated) {
|
|
return (
|
|
<Block className="mt-[40px] items-center justify-center gap-[16px] py-[60px]">
|
|
<Block className="size-[80px] items-center justify-center rounded-full border-4 border-white/20 bg-white/10">
|
|
<Ionicons color="rgba(255,255,255,0.6)" name="heart-outline" size={40} />
|
|
</Block>
|
|
<Text className="text-[16px] font-bold text-white/80">查看您收藏的模板</Text>
|
|
<Text className="text-[12px] text-white/50">登录后即可查看和管理收藏</Text>
|
|
<Block
|
|
className="mt-[12px] flex-row items-center gap-[8px] border-[3px] border-white bg-accent px-[32px] py-[12px] shadow-[4px_4px_0px_rgba(255,255,255,0.2)]"
|
|
style={{ transform: [{ skewX: '-6deg' }] }}
|
|
onClick={() => router.push('/auth')}
|
|
>
|
|
<Ionicons color="black" name="flash" size={16} style={{ transform: [{ skewX: '6deg' }] }} />
|
|
<Text className="font-900 text-[14px] italic text-black" style={{ transform: [{ skewX: '6deg' }] }}>
|
|
立即登录
|
|
</Text>
|
|
</Block>
|
|
</Block>
|
|
)
|
|
}
|
|
return (
|
|
<Block className="mt-[12px] items-center justify-center py-[40px]">
|
|
<Text className="text-[14px] font-bold text-white/60">暂无内容</Text>
|
|
</Block>
|
|
)
|
|
}, [activeTab, isAuthenticated])
|
|
|
|
const handleSearch = useCallback((text: string) => {
|
|
console.log('Search for:', text)
|
|
// Implement your search logic here
|
|
}, [])
|
|
|
|
return (
|
|
<Block className="relative flex-1 flex-col overflow-visible bg-black px-[12px]">
|
|
<BannerSection />
|
|
|
|
<HeroCircle
|
|
rightSlot={<GooActions gooPoints={balance} onAddGoo={onAddGoo} onOpenSearch={openSearch} />}
|
|
selectedItem={selectedItem}
|
|
onQuickGen={handleQuickGen}
|
|
/>
|
|
|
|
<FilterSection activeTab={activeTab} onChange={setActiveTab} />
|
|
|
|
<FlashList
|
|
contentContainerStyle={{ marginTop: 12, paddingBottom: 200 }}
|
|
data={galleryItems}
|
|
drawDistance={1200}
|
|
// @ts-ignore
|
|
estimatedItemSize={itemWidth}
|
|
extraData={selectedItem?.id}
|
|
keyExtractor={(item) => item.id}
|
|
ListEmptyComponent={renderListEmpty}
|
|
ListFooterComponent={renderListFooter}
|
|
numColumns={3}
|
|
renderItem={renderGridItem}
|
|
showsVerticalScrollIndicator={false}
|
|
refreshControl={
|
|
<RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#FFE500" onRefresh={handleRefresh} />
|
|
}
|
|
onEndReached={handleLoadMore}
|
|
onEndReachedThreshold={0.5}
|
|
/>
|
|
|
|
<SearchOverlay isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} onSearch={handleSearch} />
|
|
</Block>
|
|
)
|
|
}
|