aaron/hku-class
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
aaron 2026-04-17 23:24:12 +08:00
parent f707e3ec5c
commit d5f952d40d
1 changed files with 39 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/app/(app)/directory/page.tsx
View File

@ -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>