fix: bug

stores/templateSocialStore.example.ts

@@ -0,0 +1,145 @@
+/**
+ * templateSocialStore 使用示例
+ *
+ * 这个文件展示了如何使用 templateSocialStore 来管理模板的点赞和收藏状态
+ */
+
+import { useTemplateSocialStore } from './templateSocialStore'
+
+// 示例 1: 基本使用
+export function Example1_BasicUsage() {
+  const { isLiked, setLiked } = useTemplateSocialStore()
+
+  const handleToggleLike = (templateId: string) => {
+    const currentState = isLiked(templateId)
+    setLiked(templateId, !currentState)
+  }
+
+  return { handleToggleLike }
+}
+
+// 示例 2: 批量更新状态（例如从 API 获取后）
+export function Example2_BatchUpdate() {
+  const { setLikedStates, setFavoritedStates } = useTemplateSocialStore()
+
+  // 假设从 API 获取了模板列表及其社交状态
+  const updateFromAPI = (apiResponse: {
+    templates: Array<{ id: string; liked: boolean; favorited: boolean }>
+  }) => {
+    const likedStates: Record<string, boolean> = {}
+    const favoritedStates: Record<string, boolean> = {}
+
+    apiResponse.templates.forEach((template) => {
+      likedStates[template.id] = template.liked
+      favoritedStates[template.id] = template.favorited
+    })
+
+    // 批量更新
+    setLikedStates(likedStates)
+    setFavoritedStates(favoritedStates)
+  }
+
+  return { updateFromAPI }
+}
+
+// 示例 3: 在 React 组件中使用
+export function Example3_ComponentUsage() {
+  const templateId = 'template-123'
+
+  // 获取状态和方法
+  const liked = useTemplateSocialStore((state) => state.isLiked(templateId))
+  const favorited = useTemplateSocialStore((state) => state.isFavorited(templateId))
+  const setLiked = useTemplateSocialStore((state) => state.setLiked)
+  const setFavorited = useTemplateSocialStore((state) => state.setFavorited)
+
+  const handleLike = () => {
+    setLiked(templateId, !liked)
+  }
+
+  const handleFavorite = () => {
+    setFavorited(templateId, !favorited)
+  }
+
+  return {
+    liked,
+    favorited,
+    handleLike,
+    handleFavorite,
+  }
+}
+
+// 示例 4: 使用选择器优化性能
+export function Example4_SelectorOptimization() {
+  const templateId = 'template-123'
+
+  // 只订阅需要的状态，避免不必要的重渲染
+  const liked = useTemplateSocialStore((state) => state.likedMap[templateId])
+  const favorited = useTemplateSocialStore((state) => state.favoritedMap[templateId])
+
+  return { liked, favorited }
+}
+
+// 示例 5: 清空状态（例如用户登出时）
+export function Example5_ClearState() {
+  const clear = useTemplateSocialStore((state) => state.clear)
+
+  const handleLogout = () => {
+    // 清空所有社交状态
+    clear()
+    // ... 其他登出逻辑
+  }
+
+  return { handleLogout }
+}
+
+// 示例 6: 结合 API 调用
+export function Example6_WithAPI() {
+  const { setLiked, isLiked } = useTemplateSocialStore()
+
+  const handleLikeWithAPI = async (templateId: string) => {
+    const currentState = isLiked(templateId)
+
+    try {
+      // 乐观更新：立即更新 UI
+      setLiked(templateId, !currentState)
+
+      // 调用 API
+      // await api.likeTemplate(templateId)
+
+      // 如果 API 调用失败，回滚状态
+      // catch (error) {
+      //   setLiked(templateId, currentState)
+      //   throw error
+      // }
+    } catch (error) {
+      console.error('Failed to like template:', error)
+    }
+  }
+
+  return { handleLikeWithAPI }
+}
+
+// 示例 7: 获取所有点赞的模板
+export function Example7_GetAllLiked() {
+  const likedMap = useTemplateSocialStore((state) => state.likedMap)
+
+  const getLikedTemplateIds = (): string[] => {
+    return Object.keys(likedMap).filter((id) => likedMap[id])
+  }
+
+  const likedCount = getLikedTemplateIds().length
+
+  return { getLikedTemplateIds, likedCount }
+}
+
+// 示例 8: 重置特定模板的状态
+export function Example8_ResetTemplate() {
+  const { setLiked, setFavorited } = useTemplateSocialStore()
+
+  const resetTemplateState = (templateId: string) => {
+    setLiked(templateId, false)
+    setFavorited(templateId, false)
+  }
+
+  return { resetTemplateState }
+}