feat(ui): refine dashboard management pages

app/(dashboard)/dashboard/page.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-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 { Progress } from "@/components/ui/progress"
+import { StatusBadge, type StatusBadgeProps } from "@/components/ui/status-badge"
 import { listOrders, listPlayers, listServices, listShops } from "@/lib/api"
 import { statusLabels } from "@/lib/constants"
 import type { Player, PlayerService, Shop } from "@/lib/types"
@@ -12,6 +13,17 @@ import { CheckCircle, Clock, DollarSign, ListOrdered, Star, TrendingUp, Users }
 import Link from "next/link"
 import { useEffect, useState } from "react"
 
+const orderStatusVariants: Record<string, StatusBadgeProps["status"]> = {
+  pending_payment: "warning",
+  pending_accept: "info",
+  in_progress: "success",
+  pending_close: "info",
+  pending_review: "info",
+  disputed: "destructive",
+  completed: "success",
+  cancelled: "neutral",
+}
+
 function getOrderRole(role: "consumer" | "player" | "owner" | "admin") {
   if (role === "consumer" || role === "player" || role === "owner") {
     return role
@@ -87,7 +99,7 @@ export default function DashboardPage() {
       <h1 className="text-2xl font-bold">概览</h1>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">总订单</CardTitle>
             <ListOrdered className="h-4 w-4 text-muted-foreground" />
@@ -96,7 +108,7 @@ export default function DashboardPage() {
             <div className="text-2xl font-bold">{totalOrders}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">评分</CardTitle>
             <Star className="h-4 w-4 text-muted-foreground" />
@@ -105,7 +117,7 @@ export default function DashboardPage() {
             <div className="text-2xl font-bold">{rating}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">{isOwner ? "签约打手" : "完成率"}</CardTitle>
             {isOwner ? (
@@ -125,7 +137,7 @@ export default function DashboardPage() {
             )}
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">{isOwner ? "本月收入" : "服务数"}</CardTitle>
             {isOwner ? (
@@ -140,7 +152,7 @@ export default function DashboardPage() {
         </Card>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader className="flex flex-row items-center justify-between">
           <CardTitle className="text-base">最近订单</CardTitle>
           <Button variant="ghost" size="sm" asChild>
@@ -148,29 +160,33 @@ export default function DashboardPage() {
           </Button>
         </CardHeader>
         <CardContent>
-          <div className="space-y-3">
+          {recentOrders.length > 0 ? (
-            {recentOrders.map((order) => (
+            <div className="space-y-3">
-              <Link key={order.id} href={`/order/${order.id}`}>
+              {recentOrders.map((order) => (
-                <div className="flex items-center justify-between rounded-md border p-3 hover:bg-muted/50 transition-colors">
+                <Link key={order.id} href={`/order/${order.id}`}>
-                  <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between rounded-md border border-border/60 p-3 transition-colors hover:bg-muted/50">
-                    <p className="text-sm font-medium truncate">{order.service.title}</p>
+                    <div className="min-w-0 flex-1">
-                    <p className="text-xs text-muted-foreground">{order.service.title}</p>
+                      <p className="truncate text-sm font-medium">{order.service.title}</p>
+                      <p className="text-xs text-muted-foreground">{order.service.title}</p>
+                    </div>
+                    <div className="flex shrink-0 items-center gap-3">
+                      <span className="text-sm font-medium tabular-nums">¥{order.totalPrice}</span>
+                      <StatusBadge status={orderStatusVariants[order.status] ?? "neutral"}>
+                        {statusLabels[order.status]}
+                      </StatusBadge>
+                    </div>
                   </div>
-                  <div className="flex items-center gap-3 shrink-0">
+                </Link>
-                    <span className="text-sm font-medium">¥{order.totalPrice}</span>
+              ))}
-                    <Badge variant="outline" className="text-xs">
+            </div>
-                      {statusLabels[order.status]}
+          ) : (
-                    </Badge>
+            <EmptyState title="暂无最近订单" icon={ListOrdered} className="min-h-[180px]" />
-                  </div>
+          )}
-                </div>
-              </Link>
-            ))}
-          </div>
         </CardContent>
       </Card>
 
       {!isOwner && (
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader>
             <CardTitle className="text-base">快捷操作</CardTitle>
           </CardHeader>

app/(dashboard)/dashboard/services/page.tsx

@@ -3,6 +3,7 @@
 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 {
   Table,
   TableBody,
@@ -17,7 +18,7 @@ import { useMyShop } from "@/lib/hooks/use-my-shop"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { Player, PlayerService } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
-import { Edit, Plus, Trash2 } from "lucide-react"
+import { AlertCircle, Edit, Plus, Trash2 } from "lucide-react"
 import Link from "next/link"
 import { useCallback, useEffect, useMemo, useState } from "react"
 
@@ -109,7 +110,7 @@ export default function ServicesPage() {
         </Button>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">已发布的服务</CardTitle>
         </CardHeader>
@@ -128,20 +129,30 @@ export default function ServicesPage() {
             <TableBody>
               {loading || (currentRole === "owner" && shopLoading) ? (
                 <TableRow>
-                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                  <TableCell colSpan={6} className="py-6">
-                    加载中...
+                    <EmptyState title="服务加载中" className="min-h-[180px]" />
                   </TableCell>
                 </TableRow>
               ) : currentRole === "owner" && shopError ? (
                 <TableRow>
-                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                  <TableCell colSpan={6} className="py-6">
-                    {shopError}
+                    <EmptyState
+                      title="店铺信息加载失败"
+                      description={shopError}
+                      icon={AlertCircle}
+                      className="min-h-[180px]"
+                    />
                   </TableCell>
                 </TableRow>
               ) : scopedServices.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                  <TableCell colSpan={6} className="py-6">
-                    暂无服务
+                    <EmptyState
+                      title="暂无服务"
+                      description="发布服务后会出现在这里。"
+                      icon={Plus}
+                      className="min-h-[180px] border-dashed"
+                    />
                   </TableCell>
                 </TableRow>
               ) : (

app/(dashboard)/dashboard/shop/income/page.tsx

@@ -2,6 +2,7 @@
 
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import {
   Table,
   TableBody,
@@ -16,7 +17,7 @@ import { listWalletTransactions } from "@/lib/api/transactions"
 import { toApiError } from "@/lib/errors"
 import { useMyShop } from "@/lib/hooks/use-my-shop"
 import type { WalletTransaction } from "@/lib/types"
-import { ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
+import { AlertCircle, ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
 import { useEffect, useState } from "react"
 
 const emptyStats: ShopIncomeStats = {
@@ -67,15 +68,27 @@ export default function ShopIncomePage() {
   }, [shop])
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">加载中...</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="收入信息加载中" icon={CreditCard} />
+      </div>
+    )
   }
 
   if (error) {
-    return <div className="text-sm text-muted-foreground">{error}</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="收入信息加载失败" description={error} icon={AlertCircle} />
+      </div>
+    )
   }
 
   if (!shop) {
-    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="当前账号没有可管理的店铺" icon={CreditCard} />
+      </div>
+    )
   }
 
   const relatedTransactions = transactions.filter(
@@ -87,7 +100,7 @@ export default function ShopIncomePage() {
       <h1 className="text-2xl font-bold">收入统计</h1>
 
       <div className="grid gap-4 sm:grid-cols-3">
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">本月收入</CardTitle>
             <DollarSign className="h-4 w-4 text-muted-foreground" />
@@ -96,7 +109,7 @@ export default function ShopIncomePage() {
             <div className="text-2xl font-bold">¥{stats.monthlyIncome}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">待结算</CardTitle>
             <CreditCard className="h-4 w-4 text-muted-foreground" />
@@ -105,7 +118,7 @@ export default function ShopIncomePage() {
             <div className="text-2xl font-bold">¥{stats.pendingSettlement}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">累计提现</CardTitle>
             <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
@@ -116,7 +129,7 @@ export default function ShopIncomePage() {
         </Card>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle>交易明细</CardTitle>
         </CardHeader>
@@ -133,14 +146,19 @@ export default function ShopIncomePage() {
             <TableBody>
               {isLoading ? (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">
+                  <TableCell colSpan={4} className="py-6">
-                    加载中...
+                    <EmptyState title="交易加载中" icon={CreditCard} className="min-h-[180px]" />
                   </TableCell>
                 </TableRow>
               ) : loadError ? (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-center py-8 text-destructive text-sm">
+                  <TableCell colSpan={4} className="py-6">
-                    {loadError}
+                    <EmptyState
+                      title="交易加载失败"
+                      description={loadError}
+                      icon={AlertCircle}
+                      className="min-h-[180px]"
+                    />
                   </TableCell>
                 </TableRow>
               ) : relatedTransactions.length > 0 ? (
@@ -149,11 +167,11 @@ export default function ShopIncomePage() {
                     <TableCell>
                       <div className="flex items-center gap-2">
                         {Number(transaction.amount) > 0 ? (
-                          <ArrowDownLeft className="h-4 w-4 text-green-500" />
+                          <ArrowDownLeft className="h-4 w-4 text-success" />
                         ) : (
-                          <ArrowUpRight className="h-4 w-4 text-red-500" />
+                          <ArrowUpRight className="h-4 w-4 text-destructive" />
                         )}
-                        <Badge variant={Number(transaction.amount) > 0 ? "default" : "secondary"}>
+                        <Badge variant={Number(transaction.amount) > 0 ? "success" : "destructive"}>
                           {transaction.type === "topup"
                             ? "充值"
                             : transaction.type === "payment"
@@ -168,7 +186,9 @@ export default function ShopIncomePage() {
                     </TableCell>
                     <TableCell>{transaction.description}</TableCell>
                     <TableCell
-                      className={Number(transaction.amount) > 0 ? "text-green-600" : "text-red-600"}
+                      className={
+                        Number(transaction.amount) > 0 ? "text-success" : "text-destructive"
+                      }
                     >
                       {Number(transaction.amount) > 0 ? "+" : ""}
                       {transaction.amount}
@@ -178,8 +198,12 @@ export default function ShopIncomePage() {
                 ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground text-sm">
+                  <TableCell colSpan={4} className="py-6">
-                    暂无交易记录
+                    <EmptyState
+                      title="暂无交易记录"
+                      icon={CreditCard}
+                      className="min-h-[180px] border-dashed"
+                    />
                   </TableCell>
                 </TableRow>
               )}

app/(dashboard)/dashboard/shop/page.tsx

@@ -3,6 +3,7 @@
 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 { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
@@ -12,7 +13,7 @@ import { toApiError } from "@/lib/errors"
 import { useMyShop } from "@/lib/hooks/use-my-shop"
 import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { Shop } from "@/lib/types"
-import { DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
+import { AlertCircle, DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
 import Link from "next/link"
 import { useState } from "react"
 
@@ -20,15 +21,27 @@ export default function ShopManagementPage() {
   const { shop, setShop, loading, error, refreshShop } = useMyShop()
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">加载中...</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="店铺信息加载中" icon={ListOrdered} />
+      </div>
+    )
   }
 
   if (error) {
-    return <div className="text-sm text-muted-foreground">{error}</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="店铺信息加载失败" description={error} icon={AlertCircle} />
+      </div>
+    )
   }
 
   if (!shop) {
-    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
+    return (
+      <div className="container mx-auto max-w-6xl px-4 py-8">
+        <EmptyState title="当前账号没有可管理的店铺" icon={ListOrdered} />
+      </div>
+    )
   }
 
   return (
@@ -114,7 +127,7 @@ function ShopManagementContent({
       </div>
 
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">总订单</CardTitle>
             <ListOrdered className="h-4 w-4 text-muted-foreground" />
@@ -123,7 +136,7 @@ function ShopManagementContent({
             <div className="text-2xl font-bold">{shop.totalOrders}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">评分</CardTitle>
             <Star className="h-4 w-4 text-muted-foreground" />
@@ -132,7 +145,7 @@ function ShopManagementContent({
             <div className="text-2xl font-bold">{shop.rating}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">签约打手</CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
@@ -141,7 +154,7 @@ function ShopManagementContent({
             <div className="text-2xl font-bold">{shop.playerCount}</div>
           </CardContent>
         </Card>
-        <Card className="hover:shadow-card-hover">
+        <Card className="border-border/80 shadow-sm">
           <CardHeader className="flex flex-row items-center justify-between pb-2">
             <CardTitle className="text-sm font-medium">抽成比例</CardTitle>
             <DollarSign className="h-4 w-4 text-muted-foreground" />
@@ -156,7 +169,7 @@ function ShopManagementContent({
         </Card>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">基本信息</CardTitle>
         </CardHeader>
@@ -186,29 +199,33 @@ function ShopManagementContent({
         </CardContent>
       </Card>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">公告管理</CardTitle>
         </CardHeader>
         <CardContent className="space-y-3">
-          {shop.announcements.map((announcement, index) => (
+          {shop.announcements.length > 0 ? (
-            <div
+            shop.announcements.map((announcement, index) => (
-              key={announcement}
+              <div
-              className="flex items-center justify-between rounded-md border p-3"
+                key={announcement}
-            >
+                className="flex items-center justify-between rounded-md border border-border/60 p-3"
-              <span className="text-sm">{announcement}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  void handleDeleteAnnouncement(index)
-                }}
-                disabled={saving}
               >
-                删除
+                <span className="text-sm">{announcement}</span>
-              </Button>
+                <Button
-            </div>
+                  variant="ghost"
-          ))}
+                  size="sm"
+                  onClick={() => {
+                    void handleDeleteAnnouncement(index)
+                  }}
+                  disabled={saving}
+                >
+                  删除
+                </Button>
+              </div>
+            ))
+          ) : (
+            <EmptyState title="暂无公告" className="min-h-[180px] border-dashed" />
+          )}
           <Separator />
           <Button
             variant="outline"
@@ -223,7 +240,7 @@ function ShopManagementContent({
         </CardContent>
       </Card>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">运营设置</CardTitle>
         </CardHeader>