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"
+import { usePlayerStore } from "@/store/players"
-
+import { useShopStore } from "@/store/shops"
-const shopPlayers = mockPlayers.filter((p) => p.shopId === "shop1")
 
 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 asChild>
-                        <DropdownMenuItem>调整抽成</DropdownMenuItem>
+                          <Link href={`/player/${player.id}`}>查看详情</Link>
-                        <DropdownMenuItem className="text-destructive">移除打手</DropdownMenuItem>
+                        </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>

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

@@ -1,5 +1,8 @@
+"use client"
+
 import { DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
 import Link from "next/link"
+import { useEffect, useState } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -7,10 +10,20 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 import { Textarea } from "@/components/ui/textarea"
-import { mockShops } from "@/lib/mock"
+import { useShopStore } from "@/store/shops"
 
 export default function ShopManagementPage() {
-  const shop = mockShops[0]
+  const shop = useShopStore((state) => state.shops[0])
+  const updateShop = useShopStore((state) => state.updateShop)
+  const updateAnnouncement = useShopStore((state) => state.updateAnnouncement)
+  const addAnnouncement = useShopStore((state) => state.addAnnouncement)
+  const [name, setName] = useState(shop.name)
+  const [description, setDescription] = useState(shop.description)
+
+  useEffect(() => {
+    setName(shop.name)
+    setDescription(shop.description)
+  }, [shop])
 
   return (
     <div className="space-y-6">
@@ -74,13 +87,25 @@ export default function ShopManagementPage() {
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <Label htmlFor="shop-name">店铺名称</Label>
-            <Input id="shop-name" defaultValue={shop.name} />
+            <Input id="shop-name" value={name} onChange={(event) => setName(event.target.value)} />
           </div>
           <div className="space-y-2">
             <Label htmlFor="shop-desc">店铺简介</Label>
-            <Textarea id="shop-desc" defaultValue={shop.description} rows={3} />
+            <Textarea
+              id="shop-desc"
+              value={description}
+              onChange={(event) => setDescription(event.target.value)}
+              rows={3}
+            />
           </div>
-          <Button>
+          <Button
+            onClick={() =>
+              updateShop(shop.id, {
+                name,
+                description,
+              })
+            }
+          >
             <Edit className="mr-1 h-4 w-4" />
             保存修改
           </Button>
@@ -98,13 +123,35 @@ export default function ShopManagementPage() {
               className="flex items-center justify-between rounded-md border p-3"
             >
               <span className="text-sm">{announcement}</span>
-              <Button variant="ghost" size="sm">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  const next = window.prompt("", announcement)
+                  if (next === null) return
+                  const value = next.trim()
+                  if (!value) return
+                  const index = shop.announcements.findIndex((item) => item === announcement)
+                  if (index < 0) return
+                  updateAnnouncement(shop.id, index, value)
+                }}
+              >
                 编辑
               </Button>
             </div>
           ))}
           <Separator />
-          <Button variant="outline" size="sm">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const next = window.prompt("", "")
+              if (next === null) return
+              const value = next.trim()
+              if (!value) return
+              addAnnouncement(shop.id, value)
+            }}
+          >
             添加公告
           </Button>
         </CardContent>

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

@@ -14,11 +14,12 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
-import { mockShops } from "@/lib/mock"
 import type { Shop } from "@/lib/types"
+import { useShopStore } from "@/store/shops"
 
 export default function ShopRulesPage() {
-  const shop = mockShops[0]
+  const shop = useShopStore((state) => state.shops[0])
+  const updateShop = useShopStore((state) => state.updateShop)
 
   const [allowMultiShop, setAllowMultiShop] = useState(shop.allowMultiShop)
   const [allowIndependentOrders, setAllowIndependentOrders] = useState(shop.allowIndependentOrders)
@@ -27,7 +28,13 @@ export default function ShopRulesPage() {
   const [commissionValue, setCommissionValue] = useState(shop.commissionValue.toString())
 
   const handleSave = () => {
-    alert("设置已保存")
+    updateShop(shop.id, {
+      allowMultiShop,
+      allowIndependentOrders,
+      dispatchMode,
+      commissionType,
+      commissionValue: Number(commissionValue),
+    })
   }
 
   return (

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

@@ -6,8 +6,8 @@ import { type DragEvent, useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Switch } from "@/components/ui/switch"
-import { mockShops } from "@/lib/mock"
 import type { ShopSection } from "@/lib/types"
+import { useShopStore } from "@/store/shops"
 
 const sectionLabels: Record<ShopSection["type"], string> = {
   banner: "横幅图片",
@@ -28,7 +28,8 @@ const sectionDescriptions: Record<ShopSection["type"], string> = {
 }
 
 export default function ShopTemplatesPage() {
-  const shop = mockShops[0]
+  const shop = useShopStore((state) => state.shops[0])
+  const updateTemplateSections = useShopStore((state) => state.updateTemplateSections)
   const [sections, setSections] = useState<ShopSection[]>(
     [...shop.templateConfig.sections].sort((a, b) => a.order - b.order),
   )
@@ -50,6 +51,10 @@ export default function ShopTemplatesPage() {
     }
   }, [showSavedToast])
 
+  useEffect(() => {
+    setSections([...shop.templateConfig.sections].sort((a, b) => a.order - b.order))
+  }, [shop])
+
   const toggleSection = (type: ShopSection["type"]) => {
     setSections((prev) => prev.map((s) => (s.type === type ? { ...s, enabled: !s.enabled } : s)))
   }
@@ -91,6 +96,7 @@ export default function ShopTemplatesPage() {
   }
 
   const handleSaveTemplate = () => {
+    updateTemplateSections(shop.id, sections)
     setShowSavedToast(true)
   }
 

store/players.ts

@@ -0,0 +1,25 @@
+import { create } from "zustand"
+import { mockPlayers } from "@/lib/mock"
+import type { Player } from "@/lib/types"
+
+interface PlayerState {
+  players: Player[]
+  assignToShop: (playerId: string, shopId: string, shopName: string) => void
+  removeFromShop: (playerId: string) => void
+}
+
+export const usePlayerStore = create<PlayerState>((set) => ({
+  players: mockPlayers,
+  assignToShop: (playerId, shopId, shopName) =>
+    set((state) => ({
+      players: state.players.map((player) =>
+        player.id === playerId ? { ...player, shopId, shopName } : player,
+      ),
+    })),
+  removeFromShop: (playerId) =>
+    set((state) => ({
+      players: state.players.map((player) =>
+        player.id === playerId ? { ...player, shopId: undefined, shopName: undefined } : player,
+      ),
+    })),
+}))

store/shops.ts

@@ -0,0 +1,57 @@
+import { create } from "zustand"
+import { mockShops } from "@/lib/mock"
+import type { Shop, ShopSection } from "@/lib/types"
+
+interface ShopState {
+  shops: Shop[]
+  updateShop: (shopId: string, patch: Partial<Omit<Shop, "id" | "owner">>) => void
+  updateTemplateSections: (shopId: string, sections: ShopSection[]) => void
+  updateAnnouncement: (shopId: string, index: number, announcement: string) => void
+  addAnnouncement: (shopId: string, announcement: string) => void
+}
+
+export const useShopStore = create<ShopState>((set) => ({
+  shops: mockShops,
+  updateShop: (shopId, patch) =>
+    set((state) => ({
+      shops: state.shops.map((shop) => (shop.id === shopId ? { ...shop, ...patch } : shop)),
+    })),
+  updateTemplateSections: (shopId, sections) =>
+    set((state) => ({
+      shops: state.shops.map((shop) =>
+        shop.id === shopId
+          ? {
+              ...shop,
+              templateConfig: {
+                ...shop.templateConfig,
+                sections,
+              },
+            }
+          : shop,
+      ),
+    })),
+  updateAnnouncement: (shopId, index, announcement) =>
+    set((state) => ({
+      shops: state.shops.map((shop) =>
+        shop.id === shopId
+          ? {
+              ...shop,
+              announcements: shop.announcements.map((item, currentIndex) =>
+                currentIndex === index ? announcement : item,
+              ),
+            }
+          : shop,
+      ),
+    })),
+  addAnnouncement: (shopId, announcement) =>
+    set((state) => ({
+      shops: state.shops.map((shop) =>
+        shop.id === shopId
+          ? {
+              ...shop,
+              announcements: [...shop.announcements, announcement],
+            }
+          : shop,
+      ),
+    })),
+}))