freedakgmail
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
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()
|
|
}
|