fix: sync notification and shop dashboard state
This commit is contained in:
zetaloop
@@ -8,7 +8,7 @@ import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
|
||||
import { roleLabels } from "@/lib/constants"
|
||||
import { mockGames, mockPosts } from "@/lib/mock"
|
||||
import { mockGames, mockOrders, mockPlayers, mockPosts } from "@/lib/mock"
|
||||
|
||||
export default function CommunityPage() {
|
||||
const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
|
||||
@@ -74,61 +74,87 @@ export default function CommunityPage() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{filteredPosts.map((post) => (
|
||||
<Link key={post.id} href={`/post/${post.id}`}>
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={post.author.avatar} />
|
||||
<AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{post.author.nickname}</span>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{roleLabels[post.authorRole]}
|
||||
</Badge>
|
||||
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
||||
{filteredPosts.map((post) =>
|
||||
(() => {
|
||||
const linkedOrder = post.linkedOrderId
|
||||
? mockOrders.find((order) => order.id === post.linkedOrderId)
|
||||
: null
|
||||
const linkedPlayer = linkedOrder
|
||||
? mockPlayers.find((player) => player.id === linkedOrder.playerId)
|
||||
: null
|
||||
|
||||
return (
|
||||
<Link key={post.id} href={`/post/${post.id}`}>
|
||||
<Card className="hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={post.author.avatar} />
|
||||
<AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{post.author.nickname}</span>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{roleLabels[post.authorRole]}
|
||||
</Badge>
|
||||
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(post.createdAt).toLocaleDateString("zh-CN")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(post.createdAt).toLocaleDateString("zh-CN")}
|
||||
</CardHeader>
|
||||
<CardContent className="pb-3">
|
||||
<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 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{post.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{post.linkedOrderId && (
|
||||
<div className="mt-2 rounded border bg-muted/30 px-3 py-2 text-xs text-muted-foreground space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<ClipboardList className="h-3.5 w-3.5" />
|
||||
关联订单秀单
|
||||
</div>
|
||||
{linkedOrder && (
|
||||
<div className="pl-5">
|
||||
<p>
|
||||
{linkedOrder.service.gameName} · {linkedOrder.service.title}
|
||||
</p>
|
||||
<p>
|
||||
{linkedOrder.playerName}
|
||||
{linkedPlayer ? ` · ${linkedPlayer.rating}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-0 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" : ""}`}
|
||||
/>
|
||||
{post.likeCount}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="pb-3">
|
||||
<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 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{post.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{post.linkedOrderId && (
|
||||
<div className="mt-2 rounded border bg-muted/30 px-3 py-2 text-xs text-muted-foreground flex items-center gap-1.5">
|
||||
<ClipboardList className="h-3.5 w-3.5" />
|
||||
关联订单秀单
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="pt-0 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" : ""}`} />
|
||||
{post.likeCount}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
{post.commentCount}
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
{post.commentCount}
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
})(),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user