0.0.0.4

components/ui/avatar-display.tsx

@@ -3,15 +3,18 @@
 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
   fallbackText?: string
+  gender?: Gender
   className?: string
 }
 
-export function AvatarDisplay({ imageId, fallbackUrl, fallbackText, className }: AvatarDisplayProps) {
+export function AvatarDisplay({ imageId, fallbackUrl, fallbackText, gender, className }: AvatarDisplayProps) {
   const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined)
 
   useEffect(() => {
@@ -28,10 +31,26 @@ export function AvatarDisplay({ imageId, fallbackUrl, fallbackText, className }:
     }
   }, [imageId])
 
+  // 如果有头像，显示头像
+  if (blobUrl) {
+    return (
+      <Avatar className={className}>
+        <AvatarImage src={blobUrl} />
+        <AvatarFallback className="text-lg font-serif bg-muted">{fallbackText}</AvatarFallback>
+      </Avatar>
+    )
+  }
+
+  // 没有头像，显示性别图标
   return (
     <Avatar className={className}>
-      <AvatarImage src={blobUrl || fallbackUrl || "/placeholder.svg"} />
-      <AvatarFallback className="text-lg font-serif bg-muted">{fallbackText}</AvatarFallback>
+      <AvatarFallback className="bg-muted flex items-center justify-center">
+        {gender === 'female' ? (
+          <CircleUserRound className="h-8 w-8 text-pink-400" />
+        ) : (
+          <CircleUser className="h-8 w-8 text-blue-400" />
+        )}
+      </AvatarFallback>
     </Avatar>
   )
 }