From d5f952d40d4948999991bf9d52cf4b5d0a6d2bac Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Fri, 17 Apr 2026 23:24:12 +0800
Subject: [PATCH] 11

---
 frontend/src/app/(app)/directory/page.tsx | 64 ++++++++++++++---------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/(app)/directory/page.tsx b/frontend/src/app/(app)/directory/page.tsx
index 906d262..bbe0390 100644
--- a/frontend/src/app/(app)/directory/page.tsx
+++ b/frontend/src/app/(app)/directory/page.tsx
@@ -104,13 +104,13 @@ export default function DirectoryPage() {
         />
       </div>
 
-      {/* Member Grid */}
+      {/* Member List */}
       {loading ? (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
           {[1, 2, 3, 4, 5, 6].map((i) => (
             <Card key={i} className="animate-pulse">
               <CardContent className="p-4">
-                <div className="h-32 bg-gray-200 rounded" />
+                <div className="h-20 bg-gray-200 rounded" />
               </CardContent>
             </Card>
           ))}
@@ -120,34 +120,48 @@ export default function DirectoryPage() {
       ) : members.length === 0 ? (
         <div className="text-center py-12 text-gray-400">没有找到匹配的同学</div>
       ) : (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
           {members.map((member) => (
             <Link key={member.id} href={`/directory/${member.id}`}>
-              <Card className="hover:shadow-md transition-shadow cursor-pointer">
-                <CardContent className="p-4 flex flex-col items-center text-center">
-                  <Avatar className="h-16 w-16 mb-3">
+              <Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
+                <CardContent className="p-4 flex items-start gap-3">
+                  <Avatar className="h-11 w-11 shrink-0">
                     <AvatarImage src={member.avatar_url || undefined} alt={member.name} />
-                    <AvatarFallback className="bg-gray-900 text-white text-xl">
+                    <AvatarFallback className="bg-gray-900 text-white text-base">
                       {member.name[0]}
                     </AvatarFallback>
                   </Avatar>
-                  <p className="font-medium truncate w-full">{member.name}</p>
-                  {member.committee_role && (
-                    <Badge className="mt-0.5 text-xs bg-amber-100 text-amber-800 hover:bg-amber-100 border-amber-200">
-                      {member.committee_role}
-                    </Badge>
-                  )}
-                  {member.company && (
-                    <p className="text-sm text-gray-500 truncate w-full mt-0.5">
-                      {member.company}
-                      {member.position ? ` · ${member.position}` : ""}
-                    </p>
-                  )}
-                  {member.industry && (
-                    <Badge variant="secondary" className="mt-1 text-xs">
-                      {member.industry}
-                    </Badge>
-                  )}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1.5 flex-wrap">
+                      <p className="font-medium">{member.name}</p>
+                      {member.committee_role && (
+                        <Badge className="text-xs bg-amber-100 text-amber-800 hover:bg-amber-100 border-amber-200">
+                          {member.committee_role}
+                        </Badge>
+                      )}
+                      {member.industry && (
+                        <Badge variant="secondary" className="text-xs">
+                          {member.industry}
+                        </Badge>
+                      )}
+                    </div>
+                    {member.company && (
+                      <p className="text-sm text-gray-600 mt-0.5 truncate">
+                        {member.company}
+                        {member.position ? ` · ${member.position}` : ""}
+                      </p>
+                    )}
+                    {member.student_id && (
+                      <p className="text-xs text-gray-400 mt-0.5">
+                        学号: {member.student_id}
+                      </p>
+                    )}
+                    {member.bio && (
+                      <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+                        {member.bio}
+                      </p>
+                    )}
+                  </div>
                 </CardContent>
               </Card>
             </Link>