style(cards): normalize card list layout and padding across pages

This commit is contained in:
zetaloop
2026-02-25 15:01:15 +08:00
parent 0cf2d272c9
commit f8659b5ebc
3 changed files with 39 additions and 31 deletions
+29 -21
View File
@@ -24,26 +24,34 @@ const typeLabels: Record<Notification["type"], string> = {
function NotificationItem({ notification }: { notification: Notification }) { function NotificationItem({ notification }: { notification: Notification }) {
const Icon = typeIcons[notification.type] const Icon = typeIcons[notification.type]
const content = ( const content = (
<Card className="flex items-start gap-3 p-3 hover:bg-muted/50 transition-colors shadow-none"> <Card className="p-0 hover:bg-muted/50 transition-colors">
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5"> <CardContent className="flex items-start gap-3 p-4">
<Icon className="h-4 w-4" /> <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
</div> <Icon className="h-4 w-4" />
<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> </div>
<p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p> <div className="flex-1 min-w-0">
<p className="text-xs text-muted-foreground mt-1"> <div className="flex items-center gap-2">
{new Date(notification.createdAt).toLocaleString("zh-CN")} <span className="text-sm font-medium">{notification.title}</span>
</p> {!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
</div> </div>
<Badge variant="outline" className="text-[10px] shrink-0"> <p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
{typeLabels[notification.type]} <p className="text-xs text-muted-foreground mt-1">
</Badge> {new Date(notification.createdAt).toLocaleString("zh-CN")}
</p>
</div>
<Badge variant="outline" className="text-[10px] shrink-0">
{typeLabels[notification.type]}
</Badge>
</CardContent>
</Card> </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() { export default function NotificationsPage() {
@@ -75,7 +83,7 @@ export default function NotificationsPage() {
<TabsTrigger value="system"></TabsTrigger> <TabsTrigger value="system"></TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="all" className="space-y-3 mt-4"> <TabsContent value="all" className="flex flex-col gap-3 mt-4">
{notifications.length === 0 ? ( {notifications.length === 0 ? (
<Card> <Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -89,7 +97,7 @@ export default function NotificationsPage() {
)} )}
</TabsContent> </TabsContent>
<TabsContent value="order" className="space-y-3 mt-4"> <TabsContent value="order" className="flex flex-col gap-3 mt-4">
{orderNotifs.length === 0 ? ( {orderNotifs.length === 0 ? (
<Card> <Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -101,7 +109,7 @@ export default function NotificationsPage() {
)} )}
</TabsContent> </TabsContent>
<TabsContent value="community" className="space-y-3 mt-4"> <TabsContent value="community" className="flex flex-col gap-3 mt-4">
{communityNotifs.length === 0 ? ( {communityNotifs.length === 0 ? (
<Card> <Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
@@ -113,7 +121,7 @@ export default function NotificationsPage() {
)} )}
</TabsContent> </TabsContent>
<TabsContent value="system" className="space-y-3 mt-4"> <TabsContent value="system" className="flex flex-col gap-3 mt-4">
{systemNotifs.length === 0 ? ( {systemNotifs.length === 0 ? (
<Card> <Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
+6 -6
View File
@@ -76,7 +76,7 @@ export default function CommunityPage() {
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="flex flex-col gap-4">
{filteredPosts.map((post) => {filteredPosts.map((post) =>
(() => { (() => {
const linkedOrder = post.linkedOrderId const linkedOrder = post.linkedOrderId
@@ -87,9 +87,9 @@ export default function CommunityPage() {
: null : null
return ( return (
<Link key={post.id} href={`/post/${post.id}`}> <Link key={post.id} href={`/post/${post.id}`} className="block">
<Card className="hover:shadow-md transition-shadow"> <Card className="hover:shadow-md transition-shadow gap-4">
<CardHeader className="pb-3"> <CardHeader>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Avatar className="h-9 w-9"> <Avatar className="h-9 w-9">
<AvatarImage src={post.author.avatar} /> <AvatarImage src={post.author.avatar} />
@@ -109,7 +109,7 @@ export default function CommunityPage() {
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="pb-3"> <CardContent>
<h3 className="font-semibold mb-1">{post.title}</h3> <h3 className="font-semibold mb-1">{post.title}</h3>
<p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p> <p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
{post.tags.length > 0 && ( {post.tags.length > 0 && (
@@ -141,7 +141,7 @@ export default function CommunityPage() {
</div> </div>
)} )}
</CardContent> </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"> <span className="flex items-center gap-1">
<Heart <Heart
className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`}
+4 -4
View File
@@ -16,15 +16,15 @@ export default function ChatListPage() {
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6"> <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
<h1 className="text-2xl font-bold"></h1> <h1 className="text-2xl font-bold"></h1>
<div className="space-y-4"> <div className="flex flex-col gap-3">
{sessions.map((session) => { {sessions.map((session) => {
const other = const other =
session.participants.find((participant) => participant.id !== userId) ?? session.participants.find((participant) => participant.id !== userId) ??
session.participants[0] session.participants[0]
return ( return (
<Link key={session.id} href={`/chat/${session.id}`}> <Link key={session.id} href={`/chat/${session.id}`} className="block">
<Card> <Card className="p-0 hover:bg-muted/50 transition-colors">
<CardContent className="flex items-center gap-3 py-3"> <CardContent className="flex items-center gap-3 p-4">
<Avatar className="h-10 w-10"> <Avatar className="h-10 w-10">
<AvatarImage src={other.avatar} /> <AvatarImage src={other.avatar} />
<AvatarFallback>{other.name[0]}</AvatarFallback> <AvatarFallback>{other.name[0]}</AvatarFallback>