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

feat(ui): refine order detail pages

Browse Source
This commit is contained in:
zetaloop
2026-04-25 21:23:55 +08:00
parent 8e02c8ca97
commit 8b71e7e70e
3 changed files with 103 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(order)/order/[id]/page.tsx
+34 -16
View File
@@ -1,9 +1,10 @@
"use client"
import OrderActions from "@/components/order-actions"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Separator } from "@/components/ui/separator"
import { StatusBadge } from "@/components/ui/status-badge"
import { getOrderById, listChatSessions, listReviewsByOrder } from "@/lib/api"
import { ORDER_ACCEPT_TIMEOUT_MS, ORDER_CLOSE_TIMEOUT_MS } from "@/lib/config/demo-timers"
import { statusLabels } from "@/lib/constants"
@@ -31,6 +32,19 @@ const disputedStatusSteps: OrderStatus[] = [
const cancelledStatusSteps: OrderStatus[] = ["pending_payment", "pending_accept", "cancelled"]
type OrderStatusBadgeVariant = "success" | "warning" | "info" | "neutral" | "destructive"
const statusVariants: Record<OrderStatus, OrderStatusBadgeVariant> = {
pending_payment: "warning",
pending_accept: "info",
in_progress: "success",
pending_close: "info",
pending_review: "info",
disputed: "destructive",
completed: "success",
cancelled: "neutral",
}
export default function OrderDetailPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = use(params)
const [sessions, setSessions] = useState<Awaited<ReturnType<typeof listChatSessions>>>([])
@@ -114,14 +128,16 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
if (loading) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
<div className="container mx-auto max-w-2xl px-4 py-8">
<EmptyState title="加载中" description="正在读取订单详情..." icon={Clock} />
</div>
)
}
if (!order) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
订单不存在
<div className="container mx-auto max-w-2xl px-4 py-8">
<EmptyState title="订单不存在" description="该订单可能已被删除或暂不可访问。" />
</div>
)
}
@@ -162,10 +178,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold">订单详情</h1>
<Badge variant="outline">{statusLabels[order.status]}</Badge>
<StatusBadge status={statusVariants[order.status]}>
{statusLabels[order.status]}
</StatusBadge>
</div>
<Card className="mb-6">
<Card className="mb-6 border-border/80 shadow-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
{statusSteps.map((step, i) => {
@@ -176,10 +194,10 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
<div
className={`h-8 w-8 rounded-full flex items-center justify-center text-xs font-medium ${
isCurrent
? "bg-primary text-primary-foreground shadow-sm"
? "bg-primary text-primary-foreground"
: isActive
? "bg-primary/20 text-primary"
: "bg-muted text-muted-foreground"
? "border border-primary/30 bg-primary/10 text-primary"
: "border border-border/60 bg-muted/50 text-muted-foreground"
}`}
>
{isActive ? <CheckCircle className="h-4 w-4" /> : i + 1}
@@ -195,12 +213,12 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
</Card>
{timeoutHint && (
<Card className="mb-6">
<Card className="mb-6 border-border/80 shadow-sm">
<CardContent className="py-3 text-sm text-muted-foreground">{timeoutHint}</CardContent>
</Card>
)}
<Card className="mb-6">
<Card className="mb-6 border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">服务信息</CardTitle>
</CardHeader>
@@ -240,7 +258,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
</CardContent>
</Card>
<Card className="mb-6">
<Card className="mb-6 border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">时间线</CardTitle>
</CardHeader>
@@ -252,14 +270,14 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
</div>
{order.acceptedAt && (
<div className="flex items-center gap-2">
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
<CheckCircle className="h-3.5 w-3.5 text-success" />
<span className="text-muted-foreground">接单时间:</span>
{new Date(order.acceptedAt).toLocaleString("zh-CN")}
</div>
)}
{order.completedAt && (
<div className="flex items-center gap-2">
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
<CheckCircle className="h-3.5 w-3.5 text-success" />
<span className="text-muted-foreground">完成时间:</span>
{new Date(order.completedAt).toLocaleString("zh-CN")}
</div>
@@ -268,7 +286,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
</Card>
{reviews.length > 0 && (
<Card className="mb-6">
<Card className="mb-6 border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">评价</CardTitle>
</CardHeader>
@@ -281,7 +299,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
{[1, 2, 3, 4, 5].map((star) => (
<Star
key={`star-${star}`}
className={`h-3.5 w-3.5 ${star <= review.rating ? "fill-yellow-400 text-yellow-400" : "text-muted"}`}
className={`h-3.5 w-3.5 ${star <= review.rating ? "fill-warning text-warning" : "text-muted stroke-muted-foreground"}`}
/>
))}
</div>
app/(order)/order/new/page.tsx
+18 -12
View File
@@ -3,6 +3,7 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
@@ -94,14 +95,16 @@ export default function NewOrderPage() {
if (loading) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState title="加载中" description="正在读取服务信息..." icon={CreditCard} />
</div>
)
}
if (!service || !player) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
服务不存在
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState title="服务不存在" description="该服务可能已下架或暂不可访问。" />
</div>
)
}
@@ -110,12 +113,13 @@ export default function NewOrderPage() {
if (submitted) {
return (
<div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
<CheckCircle className="h-12 w-12 mx-auto text-green-500" />
<h2 className="text-xl font-bold">下单成功</h2>
<p className="text-sm text-muted-foreground">
订单已创建，等待打手接单。你可以在订单列表中查看进度。
</p>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState
title="下单成功"
description="订单已创建，等待打手接单。你可以在订单列表中查看进度。"
icon={CheckCircle}
className="[&>div>svg]:text-success"
action={
<div className="flex gap-2 justify-center">
<Button asChild>
<Link href="/orders">查看订单</Link>
@@ -124,6 +128,8 @@ export default function NewOrderPage() {
<Link href={`/player/${player.id}`}>返回打手主页</Link>
</Button>
</div>
}
/>
</div>
)
}
@@ -141,7 +147,7 @@ export default function NewOrderPage() {
<h1 className="text-2xl font-bold mb-6">确认下单</h1>
<div className="space-y-6">
<Card>
<Card className="border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">服务信息</CardTitle>
</CardHeader>
@@ -181,7 +187,7 @@ export default function NewOrderPage() {
</CardContent>
</Card>
<Card>
<Card className="border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">订单信息</CardTitle>
</CardHeader>
@@ -211,7 +217,7 @@ export default function NewOrderPage() {
</CardContent>
</Card>
<Card>
<Card className="border-border/80 shadow-sm">
<CardHeader>
<CardTitle className="text-base">支付信息</CardTitle>
</CardHeader>
app/(order)/review/[id]/page.tsx
+43 -27
View File
@@ -2,6 +2,7 @@
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { getOrderById, listReviewsByOrder } from "@/lib/api"
@@ -54,14 +55,16 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
if (loading) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">加载中...</div>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState title="加载中" description="正在读取评价信息..." icon={Star} />
</div>
)
}
if (!order) {
return (
<div className="container mx-auto py-8 px-4 text-center text-muted-foreground">
订单不存在
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState title="订单不存在" description="该订单可能已被删除或暂不可访问。" />
</div>
)
}
@@ -71,38 +74,51 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
if (order.status !== "pending_review") {
return (
<div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
<h2 className="text-xl font-bold">当前阶段不可评价</h2>
<p className="text-sm text-muted-foreground">仅待评价状态的订单可以提交评价。</p>
<Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
返回订单详情
</Link>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState
title="当前阶段不可评价"
description="仅待评价状态的订单可以提交评价。"
icon={Star}
action={
<Button variant="outline" asChild>
<Link href={`/order/${id}`}>返回订单详情</Link>
</Button>
}
/>
</div>
)
}
if (hasSubmitted && !isRevealed) {
return (
<div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
<Lock className="h-12 w-12 mx-auto text-muted-foreground" />
<h2 className="text-xl font-bold">评价已提交</h2>
<p className="text-sm text-muted-foreground">等待对方提交评价中</p>
<p className="text-sm text-muted-foreground">双方都提交评价后将同时揭晓</p>
<Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
返回订单详情
</Link>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState
title="评价已提交"
description="等待对方提交评价，双方都提交后将同时揭晓。"
icon={Lock}
action={
<Button variant="outline" asChild>
<Link href={`/order/${id}`}>返回订单详情</Link>
</Button>
}
/>
</div>
)
}
if (hasSubmitted && isRevealed) {
return (
<div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
<h2 className="text-xl font-bold">评价已揭晓</h2>
<p className="text-sm text-muted-foreground">双方评价已同步公开，可在订单详情查看。</p>
<Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
返回订单详情
</Link>
<div className="container mx-auto max-w-lg px-4 py-8">
<EmptyState
title="评价已揭晓"
description="双方评价已同步公开，可在订单详情查看。"
icon={Star}
action={
<Button variant="outline" asChild>
<Link href={`/order/${id}`}>返回订单详情</Link>
</Button>
}
/>
</div>
)
}
@@ -117,7 +133,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
返回订单
</Link>
<Card className="hover:shadow-card-hover">
<Card className="border-border/80 shadow-sm">
<CardHeader>
<CardTitle>评价服务</CardTitle>
<p className="text-sm text-muted-foreground">{order.service.title}</p>
@@ -138,8 +154,8 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
<Star
className={`h-8 w-8 transition-colors ${
star <= (hoverRating || rating)
? "fill-yellow-400 text-yellow-400"
: "text-muted"
? "fill-warning text-warning"
: "text-muted stroke-muted-foreground"
}`}
/>
</button>
@@ -158,7 +174,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
/>
</div>
<div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground flex items-start gap-2">
<div className="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs text-muted-foreground flex items-start gap-2">
<Lock className="h-4 w-4 shrink-0 mt-0.5" />
<span>评价采用密封机制：你的评价将在双方都提交后同时揭晓。</span>
</div>