fix(shop): manage staff through backend

app/(dashboard)/dashboard/shop/employees/page.tsx

@@ -19,13 +19,20 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { resolveOwnerShop } from "@/lib/domain/resolve-current-shop"
-import { useAuthStore } from "@/store/auth"
-import { usePlayerStore } from "@/store/players"
-import { useShopStore } from "@/store/shops"
+import {
+  inviteShopPlayer,
+  listPlayers,
+  listPlayersByShop,
+  listShopInvitations,
+  removeShopPlayer,
+} from "@/lib/api"
+import { toApiError } from "@/lib/errors"
+import { useMyShop } from "@/lib/hooks/use-my-shop"
+import { notifyInfo, notifySuccess } from "@/lib/toast"
+import type { Player } from "@/lib/types"
 import { MoreHorizontal, Star, UserPlus } from "lucide-react"
 import Link from "next/link"
-import { useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 const statusLabels: Record<string, string> = {
   available: "在线",
@@ -41,42 +48,137 @@ const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
 
 export default function EmployeesPage() {
   const [search, setSearch] = useState("")
-  const userId = useAuthStore((state) => state.user?.id)
-  const shops = useShopStore((state) => state.shops)
-  const players = usePlayerStore((state) => state.players)
-  const assignToShop = usePlayerStore((state) => state.assignToShop)
-  const removeFromShop = usePlayerStore((state) => state.removeFromShop)
-  const shop = resolveOwnerShop(userId, shops)
-  const updateShop = useShopStore((state) => state.updateShop)
+  const { shop, loading, error, refreshShop } = useMyShop()
+  const [players, setPlayers] = useState<Player[]>([])
+  const [shopPlayers, setShopPlayers] = useState<Player[]>([])
+  const [pendingPlayerIds, setPendingPlayerIds] = useState<Set<string>>(new Set())
+  const [dataLoading, setDataLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
 
-  const shopPlayers = useMemo(() => {
+  const loadData = useCallback(async () => {
+    if (!shop) return
+
+    setDataLoading(true)
+    try {
+      const [nextPlayers, nextShopPlayers, invitations] = await Promise.all([
+        listPlayers(),
+        listPlayersByShop(shop.id),
+        listShopInvitations(shop.id),
+      ])
+      setPlayers(nextPlayers)
+      setShopPlayers(nextShopPlayers)
+      setPendingPlayerIds(
+        new Set(
+          invitations
+            .filter((invitation) => invitation.status === "pending")
+            .map((invitation) => String(invitation.playerId)),
+        ),
+      )
+    } catch (error) {
+      notifyInfo(toApiError(error).msg)
+    } finally {
+      setDataLoading(false)
+    }
+  }, [shop])
+
+  useEffect(() => {
+    if (!shop) return
+
+    let cancelled = false
+
+    Promise.all([listPlayers(), listPlayersByShop(shop.id), listShopInvitations(shop.id)])
+      .then(([nextPlayers, nextShopPlayers, invitations]) => {
+        if (cancelled) return
+        setPlayers(nextPlayers)
+        setShopPlayers(nextShopPlayers)
+        setPendingPlayerIds(
+          new Set(
+            invitations
+              .filter((invitation) => invitation.status === "pending")
+              .map((invitation) => String(invitation.playerId)),
+          ),
+        )
+      })
+      .catch((error) => {
+        if (cancelled) return
+        notifyInfo(toApiError(error).msg)
+      })
+      .finally(() => {
+        if (cancelled) return
+        setDataLoading(false)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [shop])
+
+  const filteredPlayers = useMemo(() => {
     if (!shop) return []
-    return players.filter(
+    return shopPlayers.filter(
       (player) =>
         player.shopId === shop.id &&
         player.user.nickname.toLowerCase().includes(search.trim().toLowerCase()),
     )
-  }, [players, shop, search])
+  }, [search, shop, shopPlayers])
 
   const inviteCandidate = useMemo(
-    () => (shop ? players.find((player) => player.shopId !== shop.id) : undefined),
-    [players, shop],
+    () =>
+      shop
+        ? players.find((player) => player.shopId !== shop.id && !pendingPlayerIds.has(player.id))
+        : undefined,
+    [pendingPlayerIds, players, shop],
   )
 
+  if (loading) {
+    return <div className="text-sm text-muted-foreground">加载中...</div>
+  }
+
+  if (error) {
+    return <div className="text-sm text-muted-foreground">{error}</div>
+  }
+
   if (!shop) {
     return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
   }
 
+  const handleInvite = async () => {
+    if (!inviteCandidate) return
+
+    setSaving(true)
+    try {
+      await inviteShopPlayer(shop.id, inviteCandidate.id)
+      await loadData()
+      notifySuccess("邀请已发送")
+    } catch (error) {
+      notifyInfo(toApiError(error).msg)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleRemove = async (player: Player) => {
+    setSaving(true)
+    try {
+      await removeShopPlayer(shop.id, player.id)
+      await Promise.all([loadData(), refreshShop()])
+      notifySuccess("打手已移除")
+    } catch (error) {
+      notifyInfo(toApiError(error).msg)
+    } finally {
+      setSaving(false)
+    }
+  }
+
   return (
     <div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">员工管理</h1>
         <Button
           onClick={() => {
-            if (!inviteCandidate) return
-            assignToShop(inviteCandidate.id, shop.id, shop.name)
-            updateShop(shop.id, { playerCount: shop.playerCount + 1 })
+            void handleInvite()
           }}
+          disabled={saving || !inviteCandidate}
         >
           <UserPlus className="mr-1 h-4 w-4" />
           邀请打手
@@ -86,7 +188,7 @@ export default function EmployeesPage() {
       <Card className="hover:shadow-card-hover">
         <CardHeader>
           <div className="flex items-center justify-between">
-            <CardTitle className="text-base">签约打手 ({shopPlayers.length})</CardTitle>
+            <CardTitle className="text-base">签约打手 ({filteredPlayers.length})</CardTitle>
             <Input
               placeholder="搜索打手..."
               className="max-w-xs"
@@ -108,7 +210,20 @@ export default function EmployeesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {shopPlayers.map((player) => (
+              {dataLoading ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                    加载中...
+                  </TableCell>
+                </TableRow>
+              ) : filteredPlayers.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="text-center text-sm text-muted-foreground">
+                    暂无签约打手
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredPlayers.map((player) => (
                   <TableRow key={player.id}>
                     <TableCell>
                       <div className="flex items-center gap-2">
@@ -160,9 +275,9 @@ export default function EmployeesPage() {
                           <DropdownMenuItem
                             className="text-destructive"
                             onClick={() => {
-                            removeFromShop(player.id)
-                            updateShop(shop.id, { playerCount: Math.max(0, shop.playerCount - 1) })
+                              void handleRemove(player)
                             }}
+                            disabled={saving}
                           >
                             移除打手
                           </DropdownMenuItem>
@@ -170,7 +285,8 @@ export default function EmployeesPage() {
                       </DropdownMenu>
                     </TableCell>
                   </TableRow>
-              ))}
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>