feat: connect dashboard shop pages to mutable state

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

@@ -1,4 +1,8 @@
+"use client"
+
 import { MoreHorizontal, Star, UserPlus } from "lucide-react"
+import Link from "next/link"
+import { useMemo, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -18,9 +22,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { mockPlayers } from "@/lib/mock"
-
-const shopPlayers = mockPlayers.filter((p) => p.shopId === "shop1")
+import { usePlayerStore } from "@/store/players"
+import { useShopStore } from "@/store/shops"
 
 const statusLabels: Record<string, string> = {
   available: "在线",
@@ -35,11 +38,39 @@ const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
 }
 
 export default function EmployeesPage() {
+  const [search, setSearch] = useState("")
+  const players = usePlayerStore((state) => state.players)
+  const assignToShop = usePlayerStore((state) => state.assignToShop)
+  const removeFromShop = usePlayerStore((state) => state.removeFromShop)
+  const shop = useShopStore((state) => state.shops[0])
+  const updateShop = useShopStore((state) => state.updateShop)
+
+  const shopPlayers = useMemo(
+    () =>
+      players.filter(
+        (player) =>
+          player.shopId === shop.id &&
+          player.user.nickname.toLowerCase().includes(search.trim().toLowerCase()),
+      ),
+    [players, shop.id, search],
+  )
+
+  const inviteCandidate = useMemo(
+    () => players.find((player) => player.shopId !== shop.id),
+    [players, shop.id],
+  )
+
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">员工管理</h1>
-        <Button>
+        <Button
+          onClick={() => {
+            if (!inviteCandidate) return
+            assignToShop(inviteCandidate.id, shop.id, shop.name)
+            updateShop(shop.id, { playerCount: shop.playerCount + 1 })
+          }}
+        >
           <UserPlus className="mr-1 h-4 w-4" />
           邀请打手
         </Button>
@@ -49,7 +80,12 @@ export default function EmployeesPage() {
         <CardHeader>
           <div className="flex items-center justify-between">
             <CardTitle className="text-base">签约打手 ({shopPlayers.length})</CardTitle>
-            <Input placeholder="搜索打手..." className="max-w-xs" />
+            <Input
+              placeholder="搜索打手..."
+              className="max-w-xs"
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+            />
           </div>
         </CardHeader>
         <CardContent>
@@ -108,9 +144,21 @@ export default function EmployeesPage() {
                         </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
-                        <DropdownMenuItem>查看详情</DropdownMenuItem>
-                        <DropdownMenuItem>调整抽成</DropdownMenuItem>
-                        <DropdownMenuItem className="text-destructive">移除打手</DropdownMenuItem>
+                        <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>
                   </TableCell>