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

feat(ui): refine dashboard management pages

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/dashboard/page.tsx
+29 -13
View File
@@ -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>
{recentOrders.length > 0 ? (
<div className="space-y-3">
{recentOrders.map((order) => (
<Link key={order.id} href={`/order/${order.id}`}>
<div className="flex items-center justify-between rounded-md border p-3 hover:bg-muted/50 transition-colors">
<div className="flex items-center justify-between rounded-md border border-border/60 p-3 transition-colors hover:bg-muted/50">
<div className="min-w-0 flex-1">
<p className="text-sm font-medium truncate">{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 items-center gap-3 shrink-0">
<span className="text-sm font-medium">¥{order.totalPrice}</span>
<Badge variant="outline" className="text-xs">
<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]}
</Badge>
</StatusBadge>
</div>
</div>
</Link>
))}
</div>
) : (
<EmptyState title="暂无最近订单" icon={ListOrdered} className="min-h-[180px]" />
)}
</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
+19 -8
View File
@@ -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">
{shopError}
<TableCell colSpan={6} className="py-6">
<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
+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>
)}
app/(dashboard)/dashboard/shop/page.tsx
+31 -14
View File
@@ -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,15 +199,16 @@ 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 ? (
shop.announcements.map((announcement, index) => (
<div
key={announcement}
className="flex items-center justify-between rounded-md border p-3"
className="flex items-center justify-between rounded-md border border-border/60 p-3"
>
<span className="text-sm">{announcement}</span>
<Button
@@ -208,7 +222,10 @@ function ShopManagementContent({
删除
</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>