feat(services): manage services through backend

app/(dashboard)/dashboard/services/new/page.tsx

@@ -12,13 +12,20 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
-import { getGameById, listGames } from "@/lib/api"
+import {
+  createPlayerService,
+  getGameById,
+  getServiceById,
+  listGames,
+  listPlayers,
+  updatePlayerService,
+} from "@/lib/api"
 import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
+import { toApiError } from "@/lib/errors"
 import { GameIcon } from "@/lib/game-icons"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
 import type { Game, PlayerService } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
-import { usePlayerStore } from "@/store/players"
-import { useServiceStore } from "@/store/services"
 import { useShopStore } from "@/store/shops"
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema"
 import { ArrowLeft } from "lucide-react"
@@ -45,15 +52,14 @@ export default function NewServicePage() {
   const userId = useAuthStore((state) => state.user?.id)
   const currentRole = useAuthStore((state) => state.currentRole)
   const shops = useShopStore((state) => state.shops)
-  const players = usePlayerStore((state) => state.players)
-  const services = useServiceStore((state) => state.services)
-  const createService = useServiceStore((state) => state.createService)
-  const updateService = useServiceStore((state) => state.updateService)
+  const [players, setPlayers] = useState<Awaited<ReturnType<typeof listPlayers>>>([])
+  const [editingService, setEditingService] = useState<PlayerService | undefined>(undefined)
+  const [loadingService, setLoadingService] = useState(Boolean(serviceId))
   const ownerShop = resolveOwnerShop(userId, shops)
   const scopedPlayerIds =
     currentRole === "player"
       ? userId
-        ? [userId]
+        ? players.filter((player) => player.user.id === userId).map((player) => player.id)
         : []
       : currentRole === "owner"
         ? ownerShop
@@ -61,9 +67,6 @@ export default function NewServicePage() {
           : []
         : []
   const scopedPlayerIdSet = new Set(scopedPlayerIds)
-  const editingService = services.find(
-    (service) => service.id === serviceId && scopedPlayerIdSet.has(service.playerId),
-  )
   const targetPlayerId = editingService?.playerId ?? scopedPlayerIds[0]
   const {
     register,
@@ -84,6 +87,42 @@ export default function NewServicePage() {
     },
   })
 
+  useEffect(() => {
+    let cancelled = false
+
+    listPlayers()
+      .then((items) => {
+        if (!cancelled) setPlayers(items)
+      })
+      .catch((error) => {
+        if (!cancelled) notifyInfo(toApiError(error).msg)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!serviceId) return
+    let cancelled = false
+
+    getServiceById(serviceId)
+      .then((service) => {
+        if (!cancelled) setEditingService(service)
+      })
+      .catch((error) => {
+        if (!cancelled) notifyInfo(toApiError(error).msg)
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingService(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [serviceId])
+
   useEffect(() => {
     if (!editingService) return
     setValue("gameId", editingService.gameId)
@@ -117,7 +156,11 @@ export default function NewServicePage() {
     }
   }, [])
 
-  if (serviceId && !editingService) {
+  if (loadingService) {
+    return <div className="text-sm text-muted-foreground">加载中...</div>
+  }
+
+  if (serviceId && (!editingService || !scopedPlayerIdSet.has(editingService.playerId))) {
     return <div className="text-sm text-muted-foreground">服务不存在或当前身份不可编辑</div>
   }
 
@@ -145,9 +188,11 @@ export default function NewServicePage() {
     }
 
     if (editingService) {
-      updateService(editingService.id, payload)
+      await updatePlayerService(editingService.id, payload)
+      notifySuccess("服务已保存")
     } else {
-      createService(payload)
+      await createPlayerService(payload)
+      notifySuccess("服务已发布")
     }
 
     router.push("/dashboard/services")

app/(dashboard)/dashboard/services/page.tsx

@@ -11,37 +11,90 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
+import { deletePlayerService, listPlayers, listServices } from "@/lib/api"
 import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
+import { toApiError } from "@/lib/errors"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
+import type { Player, PlayerService } from "@/lib/types"
 import { useAuthStore } from "@/store/auth"
-import { usePlayerStore } from "@/store/players"
-import { useServiceStore } from "@/store/services"
 import { useShopStore } from "@/store/shops"
 import { Edit, Plus, Trash2 } from "lucide-react"
 import Link from "next/link"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 export default function ServicesPage() {
   const userId = useAuthStore((state) => state.user?.id)
   const currentRole = useAuthStore((state) => state.currentRole)
   const shops = useShopStore((state) => state.shops)
-  const players = usePlayerStore((state) => state.players)
-  const services = useServiceStore((state) => state.services)
-  const deleteService = useServiceStore((state) => state.deleteService)
+  const [players, setPlayers] = useState<Player[]>([])
+  const [services, setServices] = useState<PlayerService[]>([])
+  const [loading, setLoading] = useState(true)
   const ownerShop = resolveOwnerShop(userId, shops)
 
-  const scopedPlayerIds =
-    currentRole === "player"
-      ? userId
-        ? [userId]
-        : []
-      : currentRole === "owner"
-        ? ownerShop
-          ? players.filter((player) => player.shopId === ownerShop.id).map((player) => player.id)
-          : []
-        : []
+  const loadData = useCallback(async () => {
+    try {
+      const [nextPlayers, nextServices] = await Promise.all([listPlayers(), listServices()])
+      setPlayers(nextPlayers)
+      setServices(nextServices)
+    } catch (error) {
+      notifyInfo(toApiError(error).msg)
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    Promise.all([listPlayers(), listServices()])
+      .then(([nextPlayers, nextServices]) => {
+        if (cancelled) return
+        setPlayers(nextPlayers)
+        setServices(nextServices)
+      })
+      .catch((error) => {
+        if (cancelled) return
+        notifyInfo(toApiError(error).msg)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  const scopedPlayerIdSet = useMemo(() => {
+    if (currentRole === "player") {
+      const player = players.find((item) => item.user.id === userId)
+      return new Set(player ? [player.id] : [])
+    }
+
+    if (currentRole === "owner" && ownerShop) {
+      return new Set(
+        players.filter((player) => player.shopId === ownerShop.id).map((player) => player.id),
+      )
+    }
+
+    return new Set<string>()
+  }, [currentRole, ownerShop, players, userId])
 
-  const scopedPlayerIdSet = new Set(scopedPlayerIds)
   const scopedServices = services.filter((service) => scopedPlayerIdSet.has(service.playerId))
 
+  async function handleDelete(service: PlayerService) {
+    if (!scopedPlayerIdSet.has(service.playerId)) return
+
+    try {
+      await deletePlayerService(service.id)
+      notifySuccess("服务已删除")
+      await loadData()
+    } catch (error) {
+      notifyInfo(toApiError(error).msg)
+    }
+  }
+
   return (
     <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
       <div className="flex items-center justify-between">
@@ -71,44 +124,57 @@ export default function ServicesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {scopedServices.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?serviceId=${service.id}`}>
-                          <Edit className="h-4 w-4" />
-                        </Link>
-                      </Button>
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => {
-                          if (!scopedPlayerIdSet.has(service.playerId)) return
-                          deleteService(service.id)
-                        }}
-                      >
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </div>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                    加载中...
                   </TableCell>
                 </TableRow>
-              ))}
+              ) : scopedServices.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                    暂无服务
+                  </TableCell>
+                </TableRow>
+              ) : (
+                scopedServices.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?serviceId=${service.id}`}>
+                            <Edit className="h-4 w-4" />
+                          </Link>
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => {
+                            void handleDelete(service)
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4 text-destructive" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>