0.3.1.2

app/members/page.tsx

@@ -6,7 +6,7 @@ import { useFamily } from "@/context/family-context"
 import { useRouter } from "next/navigation"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
+import { ChineseCard, ChineseCardContent } from "@/components/ui/chinese-card"
 import { Search, Plus, Filter, X, Users, User } from "lucide-react"
 import Link from "next/link"
 import { AvatarDisplay } from "@/components/ui/avatar-display"
@@ -90,15 +90,22 @@ const MemberCard = memo(function MemberCard({
   const father = member.fatherId ? allMembers.find(m => m.id === member.fatherId) : null
   const mother = member.motherId ? allMembers.find(m => m.id === member.motherId) : null
   
+  // 判断是否已故
+  const isDead = !!member.deathDate
+  
+  // 根据在世/已故状态设置卡片样式
+  // 优先级：始祖 > 已故 > 在世
+  const cardStyle = isFounder
+    ? '!border-2 !border-amber-400 !bg-amber-50/30 dark:!bg-amber-900/20 shadow-md' // 始祖：金色边框（优先级最高）
+    : isDead
+      ? '!border-2 !border-gray-400 dark:!border-gray-600 !bg-gray-50/50 dark:!bg-gray-900/30' // 已故：灰色深边框
+      : '!border-2 !border-amber-300/70 !bg-card dark:!border-amber-600/50' // 在世：浅金色边框
+  
   return (
     <div className="relative group">
       <Link href={`/members/${member.id}${typeof window !== 'undefined' ? window.location.search : ''}`}>
-        <Card className={`hover:border-primary transition-colors cursor-pointer h-full ${
-          isSpouse 
-            ? 'bg-pink-50/50 dark:bg-pink-950/20 border-pink-200/50 dark:border-pink-800/30' 
-            : 'bg-blue-50/50 dark:bg-blue-950/20 border-blue-200/50 dark:border-blue-800/30'
-        }`}>
-          <CardContent className="px-3 py-2 flex items-center gap-5">
+        <ChineseCard variant="default" className={`hover:shadow-lg transition-all cursor-pointer h-full ${cardStyle}`}>
+          <ChineseCardContent className="px-4 py-3 flex items-center gap-5">
             <div className="relative flex-shrink-0">
               <AvatarDisplay
                 imageUrl={member.avatarUrl}
@@ -225,8 +232,8 @@ const MemberCard = memo(function MemberCard({
                 </div>
               )}
             </div>
-          </CardContent>
-        </Card>
+          </ChineseCardContent>
+        </ChineseCard>
       </Link>
       <Button
         size="sm"