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 [players, setPlayers] = useState<Awaited<ReturnType<typeof listPlayers>>>([])
-  const services = useServiceStore((state) => state.services)
+  const [editingService, setEditingService] = useState<PlayerService | undefined>(undefined)
-  const createService = useServiceStore((state) => state.createService)
+  const [loadingService, setLoadingService] = useState(Boolean(serviceId))
-  const updateService = useServiceStore((state) => state.updateService)
   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 [players, setPlayers] = useState<Player[]>([])
-  const services = useServiceStore((state) => state.services)
+  const [services, setServices] = useState<PlayerService[]>([])
-  const deleteService = useServiceStore((state) => state.deleteService)
+  const [loading, setLoading] = useState(true)
   const ownerShop = resolveOwnerShop(userId, shops)
 
-  const scopedPlayerIds =
+  const loadData = useCallback(async () => {
-    currentRole === "player"
+    try {
-      ? userId
+      const [nextPlayers, nextServices] = await Promise.all([listPlayers(), listServices()])
-        ? [userId]
+      setPlayers(nextPlayers)
-        : []
+      setServices(nextServices)
-      : currentRole === "owner"
+    } catch (error) {
-        ? ownerShop
+      notifyInfo(toApiError(error).msg)
-          ? players.filter((player) => player.shopId === ownerShop.id).map((player) => player.id)
+    } 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,7 +124,20 @@ export default function ServicesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {scopedServices.map((service) => (
+              {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>
@@ -99,8 +165,7 @@ export default function ServicesPage() {
                           variant="ghost"
                           size="icon"
                           onClick={() => {
-                          if (!scopedPlayerIdSet.has(service.playerId)) return
+                            void handleDelete(service)
-                          deleteService(service.id)
                           }}
                         >
                           <Trash2 className="h-4 w-4 text-destructive" />
@@ -108,7 +173,8 @@ export default function ServicesPage() {
                       </div>
                     </TableCell>
                   </TableRow>
-              ))}
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>

lib/api/index.ts

@@ -13,7 +13,14 @@ export { getOrderById, listOrders, listOrdersByConsumer } from "./orders"
 export { getPlayerById, listPlayers, listPlayersByShop } from "./players"
 export { getPostById, listPosts, listPostsByAuthor, togglePostLike } from "./posts"
 export { listReviews, listReviewsByOrder, listReviewsByTargetUser } from "./reviews"
-export { getServiceById, listServices, listServicesByPlayer } from "./services"
+export {
+  createPlayerService,
+  deletePlayerService,
+  getServiceById,
+  listServices,
+  listServicesByPlayer,
+  updatePlayerService,
+} from "./services"
 export { getShopById, getShopByOwnerId, listShops } from "./shops"
 export {
   getWalletBalance,

lib/api/services.ts

@@ -4,7 +4,7 @@ import type { PlayerService } from "@/lib/types"
 import { httpJson } from "./http"
 
 type Paginated<T> = {
-  items: T[]
+  items: T[] | null
   meta: {
     total: number
     offset: number
@@ -12,10 +12,37 @@ type Paginated<T> = {
   }
 }
 
+function itemsFrom<T>(value: Paginated<T> | T[]): T[] {
+  if (Array.isArray(value)) return value
+  return value.items ?? []
+}
+
+export type ServiceInput = {
+  gameId: string
+  title: string
+  description: string
+  price: number
+  unit: string
+  rankRange?: string
+  availability: string[]
+}
+
+function serviceJson(input: ServiceInput) {
+  return {
+    gameId: Number(input.gameId),
+    title: input.title,
+    description: input.description,
+    price: input.price,
+    unit: input.unit,
+    rankRange: input.rankRange,
+    availability: input.availability,
+  }
+}
+
 export async function listServices(): Promise<PlayerService[]> {
   const res = await httpJson<unknown>("/api/v1/services", { cache: "no-store" })
   if (typeof res === "object" && res !== null && "items" in res) {
-    return (res as Paginated<PlayerService>).items
+    return itemsFrom(res as Paginated<PlayerService>)
   }
   return res as PlayerService[]
 }
@@ -44,7 +71,27 @@ export async function listServicesByPlayer(playerId: string): Promise<PlayerServ
     },
   )
   if (typeof res === "object" && res !== null && "items" in res) {
-    return (res as Paginated<PlayerService>).items
+    return itemsFrom(res as Paginated<PlayerService>)
   }
-  return res as PlayerService[]
+  return itemsFrom(res)
+}
+
+export async function createPlayerService(input: ServiceInput): Promise<PlayerService> {
+  return httpJson<PlayerService>("/api/v1/services", {
+    method: "POST",
+    json: serviceJson(input),
+  })
+}
+
+export async function updatePlayerService(serviceId: string, input: ServiceInput): Promise<void> {
+  await httpJson<unknown>(`/api/v1/services/${encodeURIComponent(serviceId)}`, {
+    method: "PUT",
+    json: serviceJson(input),
+  })
+}
+
+export async function deletePlayerService(serviceId: string): Promise<void> {
+  await httpJson<unknown>(`/api/v1/services/${encodeURIComponent(serviceId)}`, {
+    method: "DELETE",
+  })
 }