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,69 +210,83 @@ export default function EmployeesPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {shopPlayers.map((player) => (
-                <TableRow key={player.id}>
-                  <TableCell>
-                    <div className="flex items-center gap-2">
-                      <Avatar className="h-8 w-8">
-                        <AvatarImage src={player.user.avatar} />
-                        <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
-                      </Avatar>
-                      <div>
-                        <p className="text-sm font-medium">{player.user.nickname}</p>
-                        <p className="text-xs text-muted-foreground">{player.totalOrders} 单</p>
-                      </div>
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex gap-1 flex-wrap">
-                      {player.games.map((game) => (
-                        <Badge key={game} variant="secondary" className="text-xs">
-                          {game}
-                        </Badge>
-                      ))}
-                    </div>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-1">
-                      <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
-                      {player.rating}
-                    </div>
-                  </TableCell>
-                  <TableCell>{(player.completionRate * 100).toFixed(0)}%</TableCell>
-                  <TableCell>
-                    <Badge variant={statusVariants[player.status]}>
-                      {statusLabels[player.status]}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-right">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="icon">
-                          <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem asChild>
-                          <Link href={`/player/${player.id}`}>查看详情</Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem asChild>
-                          <Link href="/dashboard/shop/rules">调整抽成</Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          className="text-destructive"
-                          onClick={() => {
-                            removeFromShop(player.id)
-                            updateShop(shop.id, { playerCount: Math.max(0, shop.playerCount - 1) })
-                          }}
-                        >
-                          移除打手
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+              {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">
+                        <Avatar className="h-8 w-8">
+                          <AvatarImage src={player.user.avatar} />
+                          <AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <p className="text-sm font-medium">{player.user.nickname}</p>
+                          <p className="text-xs text-muted-foreground">{player.totalOrders} 单</p>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex gap-1 flex-wrap">
+                        {player.games.map((game) => (
+                          <Badge key={game} variant="secondary" className="text-xs">
+                            {game}
+                          </Badge>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-1">
+                        <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
+                        {player.rating}
+                      </div>
+                    </TableCell>
+                    <TableCell>{(player.completionRate * 100).toFixed(0)}%</TableCell>
+                    <TableCell>
+                      <Badge variant={statusVariants[player.status]}>
+                        {statusLabels[player.status]}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                            <Link href={`/player/${player.id}`}>查看详情</Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem asChild>
+                            <Link href="/dashboard/shop/rules">调整抽成</Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            className="text-destructive"
+                            onClick={() => {
+                              void handleRemove(player)
+                            }}
+                            disabled={saving}
+                          >
+                            移除打手
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
             </TableBody>
           </Table>
         </CardContent>