0.0.0.4

hooks/use-avatar-cache.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { db } from '@/lib/db'
+
+// 全局图片缓存
+const avatarCache = new Map<string, string>()
+
+export function useAvatarCache(avatarImageId?: string) {
+  const [avatarUrl, setAvatarUrl] = useState<string | undefined>(
+    avatarImageId ? avatarCache.get(avatarImageId) : undefined
+  )
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!avatarImageId) {
+      setAvatarUrl(undefined)
+      return
+    }
+
+    // 如果缓存中已存在，直接使用
+    const cached = avatarCache.get(avatarImageId)
+    if (cached) {
+      setAvatarUrl(cached)
+      return
+    }
+
+    // 从数据库加载
+    let isMounted = true
+    setIsLoading(true)
+
+    db.images
+      .get(avatarImageId)
+      .then((image) => {
+        if (image && isMounted) {
+          const url = URL.createObjectURL(image.blob)
+          avatarCache.set(avatarImageId, url)
+          setAvatarUrl(url)
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to load avatar:', error)
+      })
+      .finally(() => {
+        if (isMounted) {
+          setIsLoading(false)
+        }
+      })
+
+    return () => {
+      isMounted = false
+    }
+  }, [avatarImageId])
+
+  return { avatarUrl, isLoading }
+}
+
+// 清理缓存的工具函数（可选）
+export function clearAvatarCache() {
+  avatarCache.forEach((url) => URL.revokeObjectURL(url))
+  avatarCache.clear()
+}