feat: connect dashboard shop pages to mutable state

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>