0.0.8.5

components/ui/avatar-display.tsx

@@ -1,41 +1,22 @@
 "use client"
 
-import { useState, useEffect } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { db } from "@/lib/db"
 import { CircleUser, CircleUserRound } from "lucide-react"
 import type { Gender } from "@/types/family"
 
 interface AvatarDisplayProps {
-  imageId?: string
-  fallbackUrl?: string
+  imageUrl?: string  // 改为 URL
   fallbackText?: string
   gender?: Gender
   className?: string
 }
 
-export function AvatarDisplay({ imageId, fallbackUrl, fallbackText, gender, className }: AvatarDisplayProps) {
-  const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined)
-
-  useEffect(() => {
-    if (imageId) {
-      db.images.get(imageId).then((image) => {
-        if (image) {
-          const url = URL.createObjectURL(image.blob)
-          setBlobUrl(url)
-          return () => URL.revokeObjectURL(url)
-        }
-      })
-    } else {
-      setBlobUrl(undefined)
-    }
-  }, [imageId])
-
-  // 如果有头像，显示头像
-  if (blobUrl) {
+export function AvatarDisplay({ imageUrl, fallbackText, gender, className }: AvatarDisplayProps) {
+  // 如果有头像 URL，显示头像
+  if (imageUrl) {
     return (
       <Avatar className={className}>
-        <AvatarImage src={blobUrl} />
+        <AvatarImage src={imageUrl} />
         <AvatarFallback className="text-lg font-serif bg-muted">{fallbackText}</AvatarFallback>
       </Avatar>
     )