feat: add shop dashboard order overview, income stats, and rule settings pages

2026-02-20 23:04:38 +08:00
parent 1362a29755
commit 7e632ce092
4 changed files with 386 additions and 1 deletions
@@ -0,0 +1,117 @@
+import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { statusLabels } from "@/lib/constants"
+import { mockOrders } from "@/lib/mock-data"
+
+export default function ShopOrdersPage() {
+  const totalOrders = mockOrders.length
+  const activeOrders = mockOrders.filter((o) =>
+    [
+      "pending_payment",
+      "pending_accept",
+      "in_progress",
+      "pending_close",
+      "pending_review",
+    ].includes(o.status),
+  ).length
+  const completedOrders = mockOrders.filter((o) => o.status === "completed").length
+  const disputedOrders = mockOrders.filter((o) => o.status === "disputed").length
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">订单总览</h1>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <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" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalOrders}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">进行中</CardTitle>
+            <Clock className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{activeOrders}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">已完成</CardTitle>
+            <CheckCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{completedOrders}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">争议订单</CardTitle>
+            <AlertCircle className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{disputedOrders}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>订单列表</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>服务名称</TableHead>
+                <TableHead>客户</TableHead>
+                <TableHead>打手</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>金额</TableHead>
+                <TableHead>创建时间</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {mockOrders.map((order) => (
+                <TableRow key={order.id}>
+                  <TableCell className="font-medium">{order.service.title}</TableCell>
+                  <TableCell>{order.consumerName}</TableCell>
+                  <TableCell>{order.playerName}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{statusLabels[order.status]}</Badge>
+                  </TableCell>
+                  <TableCell>¥{order.totalPrice}</TableCell>
+                  <TableCell>{new Date(order.createdAt).toLocaleDateString()}</TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" asChild>
+                      <Link href={`/order/${order.id}`}>查看</Link>
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}