juwan/juwan-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: connect dashboard shop pages to mutable state

Browse Source
This commit is contained in:
zetaloop
2026-02-21 15:49:42 +08:00
parent 94b96ac577
commit 6469811382
6 changed files with 210 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/dashboard/shop/employees/page.tsx
+56 -8
View File
@@ -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>
app/(dashboard)/dashboard/shop/page.tsx
+54 -7
View File
@@ -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
+10 -3
View File
@@ -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
+8 -2
View File
@@ -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
+25
View File
@@ -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
+57
View File
@@ -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,
),
})),
}))