feat(ui): refine dashboard management pages

This commit is contained in:
zetaloop
2026-04-25 21:45:32 +08:00
parent 1ee512940e
commit 14f6f5509a
4 changed files with 146 additions and 78 deletions
+42 -18
View File
@@ -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>
)}