feat: integrate social buttons in video page

- Add VideoSocialButton to VideoItem component
- Connect like/favorite actions with existing hooks
- Use Zustand store for state management
- Extend templateSocialStore to support favoriteCount
- Update tests for social button integration

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

stores/templateSocialStore.ts

@@ -11,6 +11,9 @@ interface TemplateSocialState {
   // 点赞数量缓存: templateId -> number
   likeCountMap: Record<string, number>
 
+  // 收藏数量缓存: templateId -> number
+  favoriteCountMap: Record<string, number>
+
   // 批量更新点赞状态
   setLikedStates: (states: Record<string, boolean>) => void
 
@@ -20,6 +23,9 @@ interface TemplateSocialState {
   // 批量更新点赞数量
   setLikeCountStates: (states: Record<string, number>) => void
 
+  // 批量更新收藏数量
+  setFavoriteCountStates: (states: Record<string, number>) => void
+
   // 更新单个点赞状态
   setLiked: (templateId: string, liked: boolean) => void
 
@@ -29,6 +35,9 @@ interface TemplateSocialState {
   // 更新单个点赞数量
   setLikeCount: (templateId: string, count: number) => void
 
+  // 更新单个收藏数量
+  setFavoriteCount: (templateId: string, count: number) => void
+
   // 增加点赞数量（乐观更新）
   incrementLikeCount: (templateId: string) => void
 
@@ -44,6 +53,9 @@ interface TemplateSocialState {
   // 获取点赞数量（如果不存在返回 undefined）
   getLikeCount: (templateId: string) => number | undefined
 
+  // 获取收藏数量（如果不存在返回 undefined）
+  getFavoriteCount: (templateId: string) => number | undefined
+
   // 获取点赞状态（如果不存在返回 false）
   isLiked: (templateId: string) => boolean
 
@@ -61,6 +73,7 @@ export const useTemplateSocialStore = create<TemplateSocialState>()(
       likedMap: {},
       favoritedMap: {},
       likeCountMap: {},
+      favoriteCountMap: {},
 
       // Actions
       setLikedStates: (states) => {
@@ -81,6 +94,12 @@ export const useTemplateSocialStore = create<TemplateSocialState>()(
         }))
       },
 
+      setFavoriteCountStates: (states) => {
+        set((state) => ({
+          favoriteCountMap: { ...state.favoriteCountMap, ...states },
+        }))
+      },
+
       setLiked: (templateId, liked) => {
         set((state) => ({
           likedMap: { ...state.likedMap, [templateId]: liked },
@@ -99,6 +118,12 @@ export const useTemplateSocialStore = create<TemplateSocialState>()(
         }))
       },
 
+      setFavoriteCount: (templateId, count) => {
+        set((state) => ({
+          favoriteCountMap: { ...state.favoriteCountMap, [templateId]: count },
+        }))
+      },
+
       incrementLikeCount: (templateId) => {
         set((state) => ({
           likeCountMap: {
@@ -132,6 +157,10 @@ export const useTemplateSocialStore = create<TemplateSocialState>()(
         return get().likeCountMap[templateId]
       },
 
+      getFavoriteCount: (templateId) => {
+        return get().favoriteCountMap[templateId]
+      },
+
       isLiked: (templateId) => {
         return get().likedMap[templateId] || false
       },
@@ -145,6 +174,7 @@ export const useTemplateSocialStore = create<TemplateSocialState>()(
           likedMap: {},
           favoritedMap: {},
           likeCountMap: {},
+          favoriteCountMap: {},
         })
       },
     }),
@@ -171,3 +201,12 @@ export function useTemplateLikeCount(templateId: string | undefined) {
     templateId ? state.likeCountMap[templateId] : undefined
   )
 }
+
+export function useTemplateFavoriteCount(templateId: string | undefined) {
+  return useTemplateSocialStore((state) =>
+    templateId ? state.favoriteCountMap[templateId] : undefined
+  )
+}
+
+// 为了方便使用，导出 templateSocialStore 别名
+export const templateSocialStore = useTemplateSocialStore