feat(ui): refine dashboard management pages

2026-04-25 21:45:32 +08:00
parent 1ee512940e
commit 14f6f5509a
4 changed files with 146 additions and 78 deletions
@@ -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">
-                    {loadError}
+                  <TableCell colSpan={4} className="py-6">
+                    <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>
              )}
@@ -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) => (
-            <div
-              key={announcement}
-              className="flex items-center justify-between rounded-md border p-3"
-            >
-              <span className="text-sm">{announcement}</span>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  void handleDeleteAnnouncement(index)
-                }}
-                disabled={saving}
+          {shop.announcements.length > 0 ? (
+            shop.announcements.map((announcement, index) => (
+              <div
+                key={announcement}
+                className="flex items-center justify-between rounded-md border border-border/60 p-3"
              >
-                删除
-              </Button>
-            </div>
-          ))}
+                <span className="text-sm">{announcement}</span>
+                <Button
+                  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>