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">
app/(main)/community/page.tsx
+6 -6
View File
@@ -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" : ""}`}
app/(order)/chat/page.tsx
+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">
<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>