From f8659b5ebc315098eb422c38ec847d11885fd55c Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Wed, 25 Feb 2026 15:01:15 +0800
Subject: [PATCH] style(cards): normalize card list layout and padding across
 pages

---
 app/(account)/notifications/page.tsx | 50 ++++++++++++++++------------
 app/(main)/community/page.tsx        | 12 +++----
 app/(order)/chat/page.tsx            |  8 ++---
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/app/(account)/notifications/page.tsx b/app/(account)/notifications/page.tsx
index cca0ba7..50ad49a 100644
--- a/app/(account)/notifications/page.tsx
+++ b/app/(account)/notifications/page.tsx
@@ -24,26 +24,34 @@ const typeLabels: Record<Notification["type"], string> = {
 function NotificationItem({ notification }: { notification: Notification }) {
   const Icon = typeIcons[notification.type]
   const content = (
-    <Card className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors shadow-none">
-      <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
-        <Icon className="h-4 w-4" />
-      </div>
-      <div className="flex-1 min-w-0">
-        <div className="flex items-center gap-2">
-          <span className="text-sm font-medium">{notification.title}</span>
-          {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
+    <Card className="p-0 hover:bg-muted/50 transition-colors">
+      <CardContent className="flex items-start gap-3 p-4">
+        <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
+          <Icon className="h-4 w-4" />
         </div>
-        <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
-        <p className="text-xs text-muted-foreground mt-1">
-          {new Date(notification.createdAt).toLocaleString("zh-CN")}
-        </p>
-      </div>
-      <Badge variant="outline" className="text-[10px] shrink-0">
-        {typeLabels[notification.type]}
-      </Badge>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium">{notification.title}</span>
+            {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
+          </div>
+          <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
+          <p className="text-xs text-muted-foreground mt-1">
+            {new Date(notification.createdAt).toLocaleString("zh-CN")}
+          </p>
+        </div>
+        <Badge variant="outline" className="text-[10px] shrink-0">
+          {typeLabels[notification.type]}
+        </Badge>
+      </CardContent>
     </Card>
   )
-  return notification.link ? <Link href={notification.link}>{content}</Link> : content
+  return notification.link ? (
+    <Link className="block" href={notification.link}>
+      {content}
+    </Link>
+  ) : (
+    content
+  )
 }
 
 export default function NotificationsPage() {
@@ -75,7 +83,7 @@ export default function NotificationsPage() {
           <TabsTrigger value="system">系统</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="all" className="space-y-3 mt-4">
+        <TabsContent value="all" className="flex flex-col gap-3 mt-4">
           {notifications.length === 0 ? (
             <Card>
               <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -89,7 +97,7 @@ export default function NotificationsPage() {
           )}
         </TabsContent>
 
-        <TabsContent value="order" className="space-y-3 mt-4">
+        <TabsContent value="order" className="flex flex-col gap-3 mt-4">
           {orderNotifs.length === 0 ? (
             <Card>
               <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -101,7 +109,7 @@ export default function NotificationsPage() {
           )}
         </TabsContent>
 
-        <TabsContent value="community" className="space-y-3 mt-4">
+        <TabsContent value="community" className="flex flex-col gap-3 mt-4">
           {communityNotifs.length === 0 ? (
             <Card>
               <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -113,7 +121,7 @@ export default function NotificationsPage() {
           )}
         </TabsContent>
 
-        <TabsContent value="system" className="space-y-3 mt-4">
+        <TabsContent value="system" className="flex flex-col gap-3 mt-4">
           {systemNotifs.length === 0 ? (
             <Card>
               <CardContent className="py-8 text-center text-sm text-muted-foreground">
diff --git a/app/(main)/community/page.tsx b/app/(main)/community/page.tsx
index b09ffff..549d0f6 100644
--- a/app/(main)/community/page.tsx
+++ b/app/(main)/community/page.tsx
@@ -76,7 +76,7 @@ export default function CommunityPage() {
         </div>
       </div>
 
-      <div className="space-y-4">
+      <div className="flex flex-col gap-4">
         {filteredPosts.map((post) =>
           (() => {
             const linkedOrder = post.linkedOrderId
@@ -87,9 +87,9 @@ export default function CommunityPage() {
               : null
 
             return (
-              <Link key={post.id} href={`/post/${post.id}`}>
-                <Card className="hover:shadow-md transition-shadow">
-                  <CardHeader className="pb-3">
+              <Link key={post.id} href={`/post/${post.id}`} className="block">
+                <Card className="hover:shadow-md transition-shadow gap-4">
+                  <CardHeader>
                     <div className="flex items-center gap-3">
                       <Avatar className="h-9 w-9">
                         <AvatarImage src={post.author.avatar} />
@@ -109,7 +109,7 @@ export default function CommunityPage() {
                       </div>
                     </div>
                   </CardHeader>
-                  <CardContent className="pb-3">
+                  <CardContent>
                     <h3 className="font-semibold mb-1">{post.title}</h3>
                     <p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
                     {post.tags.length > 0 && (
@@ -141,7 +141,7 @@ export default function CommunityPage() {
                       </div>
                     )}
                   </CardContent>
-                  <CardFooter className="pt-0 text-sm text-muted-foreground gap-4">
+                  <CardFooter className="text-sm text-muted-foreground gap-4">
                     <span className="flex items-center gap-1">
                       <Heart
                         className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`}
diff --git a/app/(order)/chat/page.tsx b/app/(order)/chat/page.tsx
index a6adec1..e0c4e93 100644
--- a/app/(order)/chat/page.tsx
+++ b/app/(order)/chat/page.tsx
@@ -16,15 +16,15 @@ export default function ChatListPage() {
     <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
       <h1 className="text-2xl font-bold">消息</h1>
 
-      <div className="space-y-4">
+      <div className="flex flex-col gap-3">
         {sessions.map((session) => {
           const other =
             session.participants.find((participant) => participant.id !== userId) ??
             session.participants[0]
           return (
-            <Link key={session.id} href={`/chat/${session.id}`}>
-              <Card>
-                <CardContent className="flex items-center gap-3 py-3">
+            <Link key={session.id} href={`/chat/${session.id}`} className="block">
+              <Card className="p-0 hover:bg-muted/50 transition-colors">
+                <CardContent className="flex items-center gap-3 p-4">
                   <Avatar className="h-10 w-10">
                     <AvatarImage src={other.avatar} />
                     <AvatarFallback>{other.name[0]}</AvatarFallback>