diff --git a/hooks/use-template-favorite.ts b/hooks/use-template-favorite.ts index cc7979c..e34e701 100644 --- a/hooks/use-template-favorite.ts +++ b/hooks/use-template-favorite.ts @@ -17,7 +17,6 @@ export const useTemplateFavorite = ( templateId?: string, initialFavorited = false, ) => { - const [favorited, setFavorited] = useState(initialFavorited) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) @@ -29,6 +28,11 @@ export const useTemplateFavorite = ( setLoading(true) setError(null) + // 乐观更新:立即更新状态 + const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0 + templateSocialStore.setFavorited(templateId, true) + templateSocialStore.setFavoriteCount(templateId, currentCount + 1) + const controller = root.get(TemplateSocialController) const params: FavoriteTemplateInput = { templateId, @@ -38,21 +42,21 @@ export const useTemplateFavorite = ( async () => await controller.favorite(params), ) + setLoading(false) + if (error) { + // 回滚乐观更新 + templateSocialStore.setFavorited(templateId, false) + templateSocialStore.setFavoriteCount(templateId, currentCount) setError(error) - setLoading(false) return { data: null, error } } - setFavorited(true) - - // 同步更新 store - templateSocialStore.setFavorited(templateId, true) + // 使用服务器返回的准确数量 if (data?.favoriteCount !== undefined) { templateSocialStore.setFavoriteCount(templateId, data.favoriteCount) } - setLoading(false) return { data, error: null } }, [templateId]) @@ -64,6 +68,11 @@ export const useTemplateFavorite = ( setLoading(true) setError(null) + // 乐观更新:立即更新状态 + const currentCount = templateSocialStore.getFavoriteCount(templateId) ?? 0 + templateSocialStore.setFavorited(templateId, false) + templateSocialStore.setFavoriteCount(templateId, Math.max(0, currentCount - 1)) + const controller = root.get(TemplateSocialController) const params: UnfavoriteTemplateInput = { templateId, @@ -73,21 +82,21 @@ export const useTemplateFavorite = ( async () => await controller.unfavorite(params), ) + setLoading(false) + if (error) { + // 回滚乐观更新 + templateSocialStore.setFavorited(templateId, true) + templateSocialStore.setFavoriteCount(templateId, currentCount) setError(error) - setLoading(false) return { data: null, error } } - setFavorited(false) - - // 同步更新 store - templateSocialStore.setFavorited(templateId, false) + // 使用服务器返回的准确数量 if (data?.favoriteCount !== undefined) { templateSocialStore.setFavoriteCount(templateId, data.favoriteCount) } - setLoading(false) return { data, error: null } }, [templateId]) @@ -108,19 +117,21 @@ export const useTemplateFavorite = ( async () => await controller.checkFavorited(params), ) + setLoading(false) + if (error) { setError(error) - setLoading(false) return { data: null, error } } - setFavorited(data.favorited) - setLoading(false) + if (data?.favorited !== undefined) { + templateSocialStore.setFavorited(templateId, data.favorited) + } + return { data, error: null } }, [templateId]) return { - favorited, loading, error, favorite, diff --git a/hooks/use-template-like.ts b/hooks/use-template-like.ts index 25ec455..a6fb3d1 100644 --- a/hooks/use-template-like.ts +++ b/hooks/use-template-like.ts @@ -7,7 +7,6 @@ import { handleError } from './use-error' import { templateSocialStore } from '@/stores/templateSocialStore' export const useTemplateLike = (templateId?: string) => { - const [liked, setLiked] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) @@ -19,6 +18,11 @@ export const useTemplateLike = (templateId?: string) => { setLoading(true) setError(null) + // 乐观更新:立即更新状态 + const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0 + templateSocialStore.setLiked(templateId, true) + templateSocialStore.setLikeCount(templateId, currentCount + 1) + const social = root.get(TemplateSocialController) const { data, error } = await handleError( async () => await social.like({ templateId }) @@ -27,14 +31,14 @@ export const useTemplateLike = (templateId?: string) => { setLoading(false) if (error) { + // 回滚乐观更新 + templateSocialStore.setLiked(templateId, false) + templateSocialStore.setLikeCount(templateId, currentCount) setError(error) return { error } } - setLiked(true) - - // 同步更新 store - templateSocialStore.setLiked(templateId, true) + // 使用服务器返回的准确数量 if (data?.likeCount !== undefined) { templateSocialStore.setLikeCount(templateId, data.likeCount) } @@ -50,6 +54,11 @@ export const useTemplateLike = (templateId?: string) => { setLoading(true) setError(null) + // 乐观更新:立即更新状态 + const currentCount = templateSocialStore.getLikeCount(templateId) ?? 0 + templateSocialStore.setLiked(templateId, false) + templateSocialStore.setLikeCount(templateId, Math.max(0, currentCount - 1)) + const social = root.get(TemplateSocialController) const { data, error } = await handleError( async () => await social.unlike({ templateId }) @@ -58,14 +67,14 @@ export const useTemplateLike = (templateId?: string) => { setLoading(false) if (error) { + // 回滚乐观更新 + templateSocialStore.setLiked(templateId, true) + templateSocialStore.setLikeCount(templateId, currentCount) setError(error) return { error } } - setLiked(false) - - // 同步更新 store - templateSocialStore.setLiked(templateId, false) + // 使用服务器返回的准确数量 if (data?.likeCount !== undefined) { templateSocialStore.setLikeCount(templateId, data.likeCount) } @@ -93,12 +102,13 @@ export const useTemplateLike = (templateId?: string) => { return { error } } - setLiked(data?.liked || false) + if (data?.liked !== undefined) { + templateSocialStore.setLiked(templateId, data.liked) + } return {} }, [templateId]) return { - liked, loading, error, like,