feat: 统一的Hook架构

This commit is contained in:
zdl
2025-10-29 13:15:14 +08:00
parent 173b13bc70
commit 8632e40c94
2 changed files with 103 additions and 3 deletions

View File

@@ -251,6 +251,77 @@ export const useEventDetailEvents = ({ event, navigate } = {}) => {
}); });
}, [track, event]); }, [track, event]);
/**
* 追踪评论点赞/取消点赞
* @param {string} commentId - 评论ID
* @param {boolean} isLiked - 是否点赞
*/
const trackCommentLiked = useCallback((commentId, isLiked) => {
if (!commentId) {
logger.warn('useEventDetailEvents', 'Comment ID is required');
return;
}
track(isLiked ? 'Comment Liked' : 'Comment Unliked', {
comment_id: commentId,
event_id: event?.id,
action: isLiked ? 'like' : 'unlike',
timestamp: new Date().toISOString(),
});
logger.debug('useEventDetailEvents', `${isLiked ? '❤️' : '🤍'} Comment ${isLiked ? 'Liked' : 'Unliked'}`, {
commentId,
eventId: event?.id,
});
}, [track, event]);
/**
* 追踪添加评论
* @param {string} commentId - 评论ID
* @param {number} contentLength - 评论内容长度
*/
const trackCommentAdded = useCallback((commentId, contentLength = 0) => {
if (!event || !event.id) {
logger.warn('useEventDetailEvents', 'Event object is required for comment tracking');
return;
}
track('Comment Added', {
comment_id: commentId,
event_id: event.id,
content_length: contentLength,
timestamp: new Date().toISOString(),
});
logger.debug('useEventDetailEvents', '💬 Comment Added', {
commentId,
eventId: event.id,
contentLength,
});
}, [track, event]);
/**
* 追踪删除评论
* @param {string} commentId - 评论ID
*/
const trackCommentDeleted = useCallback((commentId) => {
if (!commentId) {
logger.warn('useEventDetailEvents', 'Comment ID is required');
return;
}
track('Comment Deleted', {
comment_id: commentId,
event_id: event?.id,
timestamp: new Date().toISOString(),
});
logger.debug('useEventDetailEvents', '🗑️ Comment Deleted', {
commentId,
eventId: event?.id,
});
}, [track, event]);
return { return {
// 页面级事件 // 页面级事件
trackEventAnalysisViewed, trackEventAnalysisViewed,
@@ -264,6 +335,11 @@ export const useEventDetailEvents = ({ event, navigate } = {}) => {
// 用户行为事件 // 用户行为事件
trackEventFavoriteToggled, trackEventFavoriteToggled,
trackEventShared, trackEventShared,
// 社交互动事件
trackCommentLiked,
trackCommentAdded,
trackCommentDeleted,
}; };
}; };

View File

@@ -111,7 +111,7 @@ const StatCard = ({ icon, label, value, color }) => {
}; };
// 帖子组件 // 帖子组件
const PostItem = ({ post, onRefresh }) => { const PostItem = ({ post, onRefresh, eventEvents }) => {
const [showComments, setShowComments] = useState(false); const [showComments, setShowComments] = useState(false);
const [comments, setComments] = useState([]); const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState(''); const [newComment, setNewComment] = useState('');
@@ -146,8 +146,14 @@ const PostItem = ({ post, onRefresh }) => {
try { try {
const result = await eventService.likePost(post.id); const result = await eventService.likePost(post.id);
if (result.success) { if (result.success) {
setLiked(result.liked); const newLikedState = result.liked;
setLiked(newLikedState);
setLikesCount(result.likes_count); setLikesCount(result.likes_count);
// 🎯 追踪评论点赞
if (eventEvents && eventEvents.trackCommentLiked) {
eventEvents.trackCommentLiked(post.id, newLikedState);
}
} }
} catch (error) { } catch (error) {
toast({ toast({
@@ -167,6 +173,14 @@ const PostItem = ({ post, onRefresh }) => {
}); });
if (result.success) { if (result.success) {
// 🎯 追踪添加评论
if (eventEvents && eventEvents.trackCommentAdded) {
eventEvents.trackCommentAdded(
result.data?.id || post.id,
newComment.length
);
}
toast({ toast({
title: '评论发表成功', title: '评论发表成功',
status: 'success', status: 'success',
@@ -193,6 +207,11 @@ const PostItem = ({ post, onRefresh }) => {
try { try {
const result = await eventService.deletePost(post.id); const result = await eventService.deletePost(post.id);
if (result.success) { if (result.success) {
// 🎯 追踪删除评论
if (eventEvents && eventEvents.trackCommentDeleted) {
eventEvents.trackCommentDeleted(post.id);
}
toast({ toast({
title: '删除成功', title: '删除成功',
status: 'success', status: 'success',
@@ -824,7 +843,12 @@ const EventDetail = () => {
</VStack> </VStack>
) : posts.length > 0 ? ( ) : posts.length > 0 ? (
posts.map((post) => ( posts.map((post) => (
<PostItem key={post.id} post={post} onRefresh={loadPosts} /> <PostItem
key={post.id}
post={post}
onRefresh={loadPosts}
eventEvents={eventEvents}
/>
)) ))
) : ( ) : (
<Box <Box