juwan/juwan-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/(account)/notifications/page.tsx
+29 -21
View File
@@ -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">