feat(ui): refine public detail pages
This commit is contained in:
zetaloop
@@ -3,6 +3,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { EmptyState } from "@/components/ui/empty-state"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { getShopById, listPlayersByShop, listReviews, listServices } from "@/lib/api"
|
||||
import { getShopSections } from "@/lib/domain/shop-template"
|
||||
@@ -61,8 +62,8 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
<h2 className="text-2xl font-bold">{shop.name}</h2>
|
||||
<p className="text-muted-foreground">{shop.description}</p>
|
||||
<div className="flex flex-wrap gap-4 text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<Star className="w-4 h-4 text-yellow-500 fill-yellow-500" />
|
||||
<div className="flex items-center gap-1 text-warning">
|
||||
<Star className="w-4 h-4 fill-warning" />
|
||||
<span className="font-medium">{shop.rating}</span>
|
||||
<span className="text-muted-foreground">评分</span>
|
||||
</div>
|
||||
@@ -103,7 +104,16 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
)
|
||||
|
||||
case "announcements":
|
||||
if (shop.announcements.length === 0) return null
|
||||
if (shop.announcements.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
key="announcements"
|
||||
title="暂无公告"
|
||||
description="店长还没有发布任何公告内容"
|
||||
icon={Megaphone}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Card key="announcements">
|
||||
<CardHeader>
|
||||
@@ -126,7 +136,16 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
)
|
||||
|
||||
case "services":
|
||||
if (shopServices.length === 0) return null
|
||||
if (shopServices.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
key="services"
|
||||
title="暂无服务"
|
||||
description="这家店铺还没上架任何服务"
|
||||
icon={Gamepad2}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key="services" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
@@ -138,7 +157,9 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
<Card key={service.id} className="flex flex-col h-full">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex justify-between items-start">
|
||||
<Badge variant="outline">{service.gameName}</Badge>
|
||||
<Badge variant="info" className="font-normal">
|
||||
{service.gameName}
|
||||
</Badge>
|
||||
<div className="text-right">
|
||||
<span className="text-lg font-bold text-primary">¥{service.price}</span>
|
||||
<span className="text-xs text-muted-foreground">/{service.unit}</span>
|
||||
@@ -168,7 +189,16 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
)
|
||||
|
||||
case "players":
|
||||
if (shopPlayers.length === 0) return null
|
||||
if (shopPlayers.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
key="players"
|
||||
title="暂无打手"
|
||||
description="这家店目前还没有招募打手"
|
||||
icon={Users}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key="players" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
@@ -188,18 +218,18 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
<span
|
||||
className={`absolute bottom-0 right-0 w-4 h-4 border-2 border-background rounded-full ${
|
||||
player.status === "available"
|
||||
? "bg-green-500"
|
||||
? "bg-success"
|
||||
: player.status === "busy"
|
||||
? "bg-yellow-500"
|
||||
: "bg-gray-500"
|
||||
? "bg-warning"
|
||||
: "bg-neutral"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold">{player.user.nickname}</h4>
|
||||
<div className="flex items-center justify-center gap-1 text-sm text-muted-foreground mt-1">
|
||||
<Star className="w-3 h-3 fill-yellow-500 text-yellow-500" />
|
||||
<span>{player.rating}</span>
|
||||
<Star className="w-3 h-3 fill-warning text-warning" />
|
||||
<span className="text-foreground">{player.rating}</span>
|
||||
<span>•</span>
|
||||
<span>{player.totalOrders}单</span>
|
||||
</div>
|
||||
@@ -220,7 +250,16 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
)
|
||||
|
||||
case "reviews":
|
||||
if (shopReviews.length === 0) return null
|
||||
if (shopReviews.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
key="reviews"
|
||||
title="暂无评价"
|
||||
description="这家店还没收到任何评价"
|
||||
icon={Star}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div key="reviews" className="space-y-4">
|
||||
<h3 className="text-xl font-bold flex items-center gap-2">
|
||||
@@ -246,7 +285,7 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
key={`star-${star}`}
|
||||
className={`w-3 h-3 ${
|
||||
star <= review.rating
|
||||
? "fill-yellow-500 text-yellow-500"
|
||||
? "fill-warning text-warning"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user