0.0.0.2

app/members/[id]/page.tsx

@@ -8,17 +8,34 @@ import { SiteHeader } from "@/components/site-header"
 import { MemberForm } from "@/components/members/member-form"
 import { Button } from "@/components/ui/button"
 import { ArrowLeft, Edit, Trash, Share2, Printer } from "lucide-react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import type { FamilyMember } from "@/types/family"
+import { db } from "@/lib/db"
 
 export default function MemberProfilePage() {
   const { id } = useParams()
   const { getMember, updateMember, deleteMember } = useFamily()
   const router = useRouter()
   const [isEditing, setIsEditing] = useState(false)
+  const [avatarBlobUrl, setAvatarBlobUrl] = useState<string | undefined>(undefined)
 
   const member = getMember(id as string)
 
+  // Load avatar blob if exists
+  useEffect(() => {
+    if (member?.avatarImageId) {
+      db.images.get(member.avatarImageId).then((image) => {
+        if (image) {
+          const url = URL.createObjectURL(image.blob)
+          setAvatarBlobUrl(url)
+          return () => URL.revokeObjectURL(url)
+        }
+      })
+    } else {
+      setAvatarBlobUrl(undefined)
+    }
+  }, [member?.avatarImageId])
+
   if (!member) {
     return (
       <div className="min-h-screen flex flex-col bg-background">
@@ -47,7 +64,7 @@ export default function MemberProfilePage() {
     return (
       <div className="min-h-screen flex flex-col bg-background">
         <SiteHeader />
-        <div className="container py-8">
+        <div className="container mx-auto py-8">
           <div className="mb-6 flex items-center gap-2">
             <Button variant="ghost" onClick={() => setIsEditing(false)}>
               <ArrowLeft className="mr-2 h-4 w-4" /> 返回
@@ -63,14 +80,14 @@ export default function MemberProfilePage() {
   return (
     <div className="min-h-screen flex flex-col bg-background">
       <SiteHeader />
-      <main className="container py-8 px-4 md:px-6">
+      <main className="container mx-auto py-8 px-4 md:px-6">
         {/* Header Section */}
         <div className="flex flex-col md:flex-row justify-between items-start gap-6 mb-8 border-b border-border pb-8">
           <div className="flex items-start gap-6">
             <div className="h-32 w-32 rounded-lg bg-muted flex items-center justify-center border-2 border-primary/20 overflow-hidden">
-              {member.avatarUrl ? (
+              {avatarBlobUrl || member.avatarUrl ? (
                 <img
-                  src={member.avatarUrl || "/placeholder.svg"}
+                  src={avatarBlobUrl || member.avatarUrl || "/placeholder.svg"}
                   alt={member.fullName}
                   className="h-full w-full object-cover"
                 />