0.0.0.4

app/members/page.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState, useMemo, useEffect } from "react"
 import { SiteHeader } from "@/components/site-header"
 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"
@@ -16,9 +17,19 @@ import { Badge } from "@/components/ui/badge"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 
 export default function MembersPage() {
-  const { treeData, searchMembers } = useFamily()
+  const { treeData, searchMembers, setHighlightedMemberId } = useFamily()
+  const router = useRouter()
   const [query, setQuery] = useState("")
   const [showFilters, setShowFilters] = useState(false)
+  
+  // 从 URL 参数读取搜索关键词
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+    const searchParam = params.get('search')
+    if (searchParam) {
+      setQuery(searchParam)
+    }
+  }, [])
 
   // Filter States
   const [selectedSurname, setSelectedSurname] = useState<string>("all")
@@ -100,6 +111,27 @@ export default function MembersPage() {
     // Sort
     return result.sort((a, b) => a.generation - b.generation || (a.birthDate || "").localeCompare(b.birthDate || ""))
   }, [allMembers, query, selectedSurname, selectedHome, statusFilter, generationRange])
+  
+  // 按世代分组
+  const membersByGeneration = useMemo(() => {
+    const groups = new Map<number, typeof filteredMembers>()
+    
+    filteredMembers.forEach(member => {
+      const gen = member.generation
+      if (!groups.has(gen)) {
+        groups.set(gen, [])
+      }
+      groups.get(gen)!.push(member)
+    })
+    
+    // 转换为数组并排序
+    return Array.from(groups.entries())
+      .sort((a, b) => a[0] - b[0])
+      .map(([generation, members]) => ({
+        generation,
+        members
+      }))
+  }, [filteredMembers])
 
   const clearFilters = () => {
     setSelectedSurname("all")
@@ -233,62 +265,87 @@ export default function MembersPage() {
           )}
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {filteredMembers.length === 0 ? (
-            <div className="col-span-full text-center py-12 text-muted-foreground">
-              没有找到匹配的成员。
-            </div>
-          ) : (
-            filteredMembers.map((member) => (
-              <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">
-                    <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">
-                          {member.fullName}
-                          {member.courtesyName && (
-                            <span className="text-sm font-normal text-muted-foreground ml-2">
-                              字 {member.courtesyName}
-                            </span>
-                          )}
-                        </h3>
-                        <span className="text-xs font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground whitespace-nowrap">
-                          {member.generation}世
-                        </span>
-                      </div>
-                      <p className="text-sm text-muted-foreground mt-1 truncate">
-                        {member.generationName ? `字辈: ${member.generationName}` : "未录入字辈"}
-                      </p>
-                      <p className="text-sm text-muted-foreground truncate">{member.ancestralHome || "籍贯未知"}</p>
-                      <div className="mt-3 flex flex-wrap gap-1">
-                        {member.deathDate && (
-                          <span className="text-[10px] bg-neutral-100 text-neutral-600 px-1.5 py-0.5 rounded border border-neutral-200">
-                            已故
-                          </span>
-                        )}
-                        {member.tags?.map((tag) => (
-                          <span
-                            key={tag}
-                            className="text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded border border-primary/20"
-                          >
-                            {tag}
-                          </span>
-                        ))}
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </Link>
-            ))
-          )}
-        </div>
+        {filteredMembers.length === 0 ? (
+          <div className="text-center py-12 text-muted-foreground">
+            没有找到匹配的成员。
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {membersByGeneration.map(({ generation, members }) => (
+              <div key={generation}>
+                <div className="flex items-center gap-3 mb-4">
+                  <h2 className="text-xl font-serif font-bold text-foreground">第 {generation} 世</h2>
+                  <span className="text-sm text-muted-foreground">共 {members.length} 人</span>
+                  <div className="flex-1 h-px bg-border"></div>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  {members.map((member) => (
+                    <div key={member.id} className="relative group">
+                      <Link href={`/members/${member.id}`}>
+                        <Card className="hover:border-primary transition-colors cursor-pointer h-full">
+                        <CardContent className="p-3 flex items-start gap-2.5">
+                          <AvatarDisplay
+                            imageId={member.avatarImageId}
+                            fallbackUrl={member.avatarUrl}
+                            fallbackText={member.surname}
+                            gender={member.gender}
+                            className="h-10 w-10 border border-border"
+                          />
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-baseline justify-between gap-1.5">
+                              <h3 className="text-base font-bold font-serif truncate">
+                                {member.fullName}
+                                {member.courtesyName && (
+                                  <span className="text-[11px] font-normal text-muted-foreground ml-1">
+                                    字 {member.courtesyName}
+                                  </span>
+                                )}
+                              </h3>
+                            </div>
+                            <p className="text-[11px] text-muted-foreground mt-0.5 truncate">
+                              {member.generationName ? `字辈: ${member.generationName}` : "未录入字辈"}
+                            </p>
+                            <p className="text-[11px] text-muted-foreground truncate">{member.ancestralHome || "籍贯未知"}</p>
+                            {(member.deathDate || member.tags?.length) && (
+                              <div className="mt-1.5 flex flex-wrap gap-1">
+                                {member.deathDate && (
+                                  <span className="text-[9px] bg-neutral-100 text-neutral-600 px-1 py-0.5 rounded border border-neutral-200">
+                                    已故
+                                  </span>
+                                )}
+                                {member.tags?.map((tag) => (
+                                  <span
+                                    key={tag}
+                                    className="text-[9px] bg-primary/10 text-primary px-1 py-0.5 rounded border border-primary/20"
+                                  >
+                                    {tag}
+                                  </span>
+                                ))}
+                              </div>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-6 w-6 p-0"
+                      onClick={() => {
+                        setHighlightedMemberId(member.id)
+                        router.push('/tree')
+                      }}
+                      title="在族谱图中定位"
+                    >
+                      <Search className="h-3 w-3" />
+                    </Button>
+                  </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
       </main>
     </div>
   )