feat: dashboard overview, services list, and service publish pages

2026-02-20 15:25:34 +08:00
parent e132ffcefb
commit 8f4e8604d3
3 changed files with 365 additions and 9 deletions
@@ -1,8 +1,83 @@
+import { Edit, Plus, Trash2 } 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 { mockServices } from "@/lib/mock-data"
+
 export default function ServicesPage() {
  return (
-    <div>
-      <h1 className="text-2xl font-bold">服务管理</h1>
-      <p className="mt-2 text-muted-foreground">管理已发布的陪玩服务</p>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">服务管理</h1>
+        <Button asChild>
+          <Link href="/dashboard/services/new">
+            <Plus className="mr-1 h-4 w-4" />
+            发布服务
+          </Link>
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">已发布的服务</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>服务名称</TableHead>
+                <TableHead>游戏</TableHead>
+                <TableHead>价格</TableHead>
+                <TableHead>段位范围</TableHead>
+                <TableHead>可用时间</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {mockServices.map((service) => (
+                <TableRow key={service.id}>
+                  <TableCell className="font-medium">{service.title}</TableCell>
+                  <TableCell>
+                    <Badge variant="secondary">{service.gameName}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    ¥{service.price}/{service.unit}
+                  </TableCell>
+                  <TableCell>{service.rankRange ?? "-"}</TableCell>
+                  <TableCell>
+                    <div className="text-xs text-muted-foreground">
+                      {service.availability.map((a) => (
+                        <div key={a}>{a}</div>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-1">
+                      <Button variant="ghost" size="icon" asChild>
+                        <Link href="/dashboard/services/new">
+                          <Edit className="h-4 w-4" />
+                        </Link>
+                      </Button>
+                      <Button variant="ghost" size="icon">
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
    </div>
  )
 }