0.0.0.2

app/members/page.tsx

@@ -9,6 +9,7 @@ import { Card, CardContent } from "@/components/ui/card"
 import { Search, Plus, Filter } from "lucide-react"
 import Link from "next/link"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { AvatarDisplay } from "@/components/ui/avatar-display"
 
 export default function MembersPage() {
   const { treeData, searchResults, searchMembers } = useFamily()
@@ -17,13 +18,13 @@ export default function MembersPage() {
   const displayMembers = query
     ? searchResults
     : Object.values(treeData.members).sort(
-        (a, b) => a.generation - b.generation || (a.birthDate || "").localeCompare(b.birthDate || ""),
-      )
+      (a, b) => a.generation - b.generation || (a.birthDate || "").localeCompare(b.birthDate || ""),
+    )
 
   return (
     <div className="min-h-screen bg-background flex flex-col font-sans">
       <SiteHeader />
-      <main className="container py-8 px-4 md:px-6 flex-1">
+      <main className="container mx-auto py-8 px-4 md:px-6 flex-1">
         <div className="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
           <h1 className="text-3xl font-serif font-bold">家族成员列表</h1>
           <div className="flex items-center gap-2 w-full md:w-auto">
@@ -57,10 +58,12 @@ export default function MembersPage() {
             <Link href={`/members/${member.id}`} key={member.id}>
               <Card className="hover:border-primary transition-colors cursor-pointer h-full">
                 <CardContent className="p-6 flex items-start gap-4">
-                  <Avatar className="h-16 w-16 border-2 border-border">
-                    <AvatarImage src={member.avatarUrl || "/placeholder.svg"} />
-                    <AvatarFallback className="text-lg font-serif bg-muted">{member.surname}</AvatarFallback>
-                  </Avatar>
+                  <AvatarDisplay
+                    imageId={member.avatarImageId}
+                    fallbackUrl={member.avatarUrl}
+                    fallbackText={member.surname}
+                    className="h-16 w-16 border-2 border-border"
+                  />
                   <div className="flex-1 min-w-0">
                     <div className="flex items-baseline justify-between">
                       <h3 className="text-xl font-bold font-serif truncate">
@@ -80,7 +83,7 @@ export default function MembersPage() {
                     </p>
                     <p className="text-sm text-muted-foreground truncate">{member.ancestralHome || "籍贯未知"}</p>
                     <div className="mt-3 flex flex-wrap gap-1">
-                      {member.lifeStatus === "deceased" && (
+                      {member.deathDate && (
                         <span className="text-[10px] bg-neutral-100 text-neutral-600 px-1.5 py-0.5 rounded border border-neutral-200">
                           已故
                         </span>