This commit is contained in:
imeepos 2026-01-29 16:51:13 +08:00
parent a087cafc99
commit 6ca686f2c9
3 changed files with 34 additions and 53 deletions

View File

@ -131,18 +131,18 @@ export default function HomeScreen() {
}, [filteredTemplates, setLikeCountStates]) }, [filteredTemplates, setLikeCountStates])
// 状态判断 - 使用 useMemo 缓存 // 状态判断 - 使用 useMemo 缓存
// 统一 loading 状态:只要有任何一个在加载,就显示 loading // 只在首次加载分类时显示 loading切换分类时不显示 loading提升体验
const isLoading = useMemo(() => const isInitialLoading = useMemo(() =>
categoriesLoading || templatesLoading, categoriesLoading || (templatesLoading && filteredTemplates.length === 0),
[categoriesLoading, templatesLoading] [categoriesLoading, templatesLoading, filteredTemplates.length]
) )
const showEmptyState = useMemo(() => const showEmptyState = useMemo(() =>
!isLoading && categoriesData?.categories?.length === 0, !isInitialLoading && categoriesData?.categories?.length === 0,
[isLoading, categoriesData?.categories?.length] [isInitialLoading, categoriesData?.categories?.length]
) )
const showEmptyTemplates = useMemo(() => const showEmptyTemplates = useMemo(() =>
!isLoading && !showEmptyState && filteredTemplates.length === 0, !isInitialLoading && !showEmptyState && !templatesLoading && filteredTemplates.length === 0,
[isLoading, showEmptyState, filteredTemplates.length] [isInitialLoading, showEmptyState, templatesLoading, filteredTemplates.length]
) )
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
@ -157,10 +157,10 @@ export default function HomeScreen() {
// 加载更多处理 // 加载更多处理
const handleEndReached = useCallback(() => { const handleEndReached = useCallback(() => {
if (!loadingMore && hasMore && !isLoading) { if (!loadingMore && hasMore && !templatesLoading) {
loadMore() loadMore()
} }
}, [loadingMore, hasMore, isLoading, loadMore]) }, [loadingMore, hasMore, templatesLoading, loadMore])
// 左右滑动切换分类 // 左右滑动切换分类
const handleSwipeLeft = useCallback(() => { const handleSwipeLeft = useCallback(() => {
@ -299,7 +299,7 @@ export default function HomeScreen() {
/> />
{/* 标签导航 */} {/* 标签导航 */}
{!isLoading && !showEmptyState && ( {!isInitialLoading && !showEmptyState && (
<View <View
onLayout={(e) => handleTabsLayout(e.nativeEvent.layout.y, e.nativeEvent.layout.height)} onLayout={(e) => handleTabsLayout(e.nativeEvent.layout.y, e.nativeEvent.layout.height)}
style={isSticky ? { opacity: 0, height: tabsHeight } : undefined} style={isSticky ? { opacity: 0, height: tabsHeight } : undefined}
@ -314,8 +314,8 @@ export default function HomeScreen() {
</View> </View>
)} )}
{/* 统一的加载状态 */} {/* 统一的加载状态 - 只在首次加载时显示 */}
{isLoading && <LoadingState />} {isInitialLoading && <LoadingState />}
{/* 错误状态 */} {/* 错误状态 */}
{categoriesError && ( {categoriesError && (
@ -335,7 +335,7 @@ export default function HomeScreen() {
), [ ), [
activatesData?.activities, activatesData?.activities,
handleActivityPress, handleActivityPress,
isLoading, isInitialLoading,
showEmptyState, showEmptyState,
isSticky, isSticky,
tabsHeight, tabsHeight,
@ -369,8 +369,8 @@ export default function HomeScreen() {
[filteredTemplates] [filteredTemplates]
) )
// 只有在非加载状态且有数据时才显示列表 // 只有在非首次加载状态且有数据时才显示列表
const showTemplateList = !isLoading && !showEmptyState && !showEmptyTemplates const showTemplateList = !isInitialLoading && !showEmptyState && !showEmptyTemplates
return ( return (
<SafeAreaView style={styles.container} edges={['top']}> <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 }]}> <View style={[styles.stickyTabsWrapper, { top: titleBarHeightRef.current + insets.top }]}>
<TabNavigation <TabNavigation
tabs={tabs} tabs={tabs}

View File

@ -503,6 +503,14 @@ export default function My() {
index % 3 !== 2 && styles.galleryItemMarginRight, index % 3 !== 2 && styles.galleryItemMarginRight,
styles.galleryItemMarginBottom, styles.galleryItemMarginBottom,
]} ]}
onPress={() => {
if (item.template?.id) {
router.push({
pathname: '/templateDetail' as any,
params: { id: item.template.id },
})
}
}}
> >
<Image <Image
source={item.template?.coverImageUrl ? { uri: item.template.coverImageUrl } : require('@/assets/images/membership.png')} 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, index % 3 !== 2 && styles.galleryItemMarginRight,
styles.galleryItemMarginBottom, styles.galleryItemMarginBottom,
]} ]}
onPress={() => {
if (item.template?.id) {
router.push({
pathname: '/templateDetail' as any,
params: { id: item.template.id },
})
}
}}
> >
<Image <Image
source={item.template?.coverImageUrl ? { uri: item.template.coverImageUrl } : require('@/assets/images/membership.png')} source={item.template?.coverImageUrl ? { uri: item.template.coverImageUrl } : require('@/assets/images/membership.png')}

View File

@ -17,10 +17,9 @@ import { useTranslation } from 'react-i18next'
import { LeftArrowIcon } from '@/components/icon' import { LeftArrowIcon } from '@/components/icon'
import SearchResultsGrid from '@/components/SearchResultsGrid' import SearchResultsGrid from '@/components/SearchResultsGrid'
import { DynamicForm, type FormSchema, type DynamicFormRef } from '@/components/DynamicForm' 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 Toast from '@/components/ui/Toast'
import UploadReferenceImageDrawer from '@/components/drawer/UploadReferenceImageDrawer' import UploadReferenceImageDrawer from '@/components/drawer/UploadReferenceImageDrawer'
import { SocialActionBar } from '@/components/blocks/ui'
import { uploadFile } from '@/lib/uploadFile' import { uploadFile } from '@/lib/uploadFile'
const CARD_HEIGHTS = [214, 236, 200, 220, 210, 225] 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 { data: templateDetail, loading: templateLoading, error: templateError, execute: loadTemplateDetail } = useTemplateDetail()
const { generations, loading: generationsLoading, execute: loadGenerations } = useTemplateGenerations() const { generations, loading: generationsLoading, execute: loadGenerations } = useTemplateGenerations()
const { runTemplate } = useTemplateActions() 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 [formSchema, setFormSchema] = useState<FormSchema | null>(null)
const [drawerVisible, setDrawerVisible] = useState(false) const [drawerVisible, setDrawerVisible] = useState(false)
@ -56,14 +53,6 @@ export default function TemplateDetailScreen() {
} }
}, [templateDetail]) }, [templateDetail])
// Initialize like and favorite status
useEffect(() => {
if (templateId) {
checkLiked()
checkFavorited()
}
}, [templateId, checkLiked, checkFavorited])
const handleStartCreating = useCallback(() => { const handleStartCreating = useCallback(() => {
// Navigate to generateVideo page if no form schema // Navigate to generateVideo page if no form schema
if (!templateDetail?.formSchema?.startNodes || templateDetail.formSchema.startNodes.length === 0) { if (!templateDetail?.formSchema?.startNodes || templateDetail.formSchema.startNodes.length === 0) {
@ -236,23 +225,6 @@ export default function TemplateDetailScreen() {
</View> </View>
</ScrollView> </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 - 移到最外层以确保从屏幕底部弹出 */} {/* Upload Drawer - 移到最外层以确保从屏幕底部弹出 */}
<UploadReferenceImageDrawer <UploadReferenceImageDrawer
visible={drawerVisible} visible={drawerVisible}
@ -365,12 +337,5 @@ const styles = StyleSheet.create({
color: '#ABABAB', color: '#ABABAB',
fontSize: 12, fontSize: 12,
}, },
socialActionBarContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'transparent',
},
}) })