feat: shop management, employee management, and template editor pages

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

@@ -1,8 +1,125 @@
+import { MoreHorizontal, Star, UserPlus } from "lucide-react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { mockPlayers } from "@/lib/mock-data"
+
+const shopPlayers = mockPlayers.filter((p) => p.shopId === "shop1")
+
+const statusLabels: Record<string, string> = {
+  available: "在线",
+  busy: "忙碌",
+  offline: "离线",
+}
+
+const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
+  available: "default",
+  busy: "secondary",
+  offline: "outline",
+}
+
 export default function EmployeesPage() {
   return (
-    <div>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">员工管理</h1>
-      <p className="mt-2 text-muted-foreground">邀请、移除打手，设置抽成</p>
+        <Button>
+          <UserPlus className="mr-1 h-4 w-4" />
+          邀请打手
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-base">签约打手 ({shopPlayers.length})</CardTitle>
+            <Input placeholder="搜索打手..." className="max-w-xs" />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>打手</TableHead>
+                <TableHead>擅长游戏</TableHead>
+                <TableHead>评分</TableHead>
+                <TableHead>完成率</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </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>查看详情</DropdownMenuItem>
+                        <DropdownMenuItem>调整抽成</DropdownMenuItem>
+                        <DropdownMenuItem className="text-destructive">移除打手</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
     </div>
   )
 }

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

@@ -1,8 +1,140 @@
+import { DollarSign, Edit, ExternalLink, ListOrdered, Star, Users } from "lucide-react"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+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-data"
+
 export default function ShopManagementPage() {
+  const shop = mockShops[0]
+
   return (
-    <div>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">店铺管理</h1>
-      <p className="mt-2 text-muted-foreground">店铺信息、活动、订单总览、收入统计</p>
+        <Button variant="outline" size="sm" asChild>
+          <Link href={`/shop/${shop.id}`}>
+            <ExternalLink className="mr-1 h-4 w-4" />
+            查看店铺主页
+          </Link>
+        </Button>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">总订单</CardTitle>
+            <ListOrdered className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{shop.totalOrders}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">评分</CardTitle>
+            <Star className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{shop.rating}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">签约打手</CardTitle>
+            <Users className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{shop.playerCount}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">抽成比例</CardTitle>
+            <DollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {shop.commissionType === "percentage"
+                ? `${shop.commissionValue}%`
+                : `¥${shop.commissionValue}`}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">基本信息</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="shop-name">店铺名称</Label>
+            <Input id="shop-name" defaultValue={shop.name} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="shop-desc">店铺简介</Label>
+            <Textarea id="shop-desc" defaultValue={shop.description} rows={3} />
+          </div>
+          <Button>
+            <Edit className="mr-1 h-4 w-4" />
+            保存修改
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">公告管理</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {shop.announcements.map((announcement) => (
+            <div
+              key={announcement}
+              className="flex items-center justify-between rounded-md border p-3"
+            >
+              <span className="text-sm">{announcement}</span>
+              <Button variant="ghost" size="sm">
+                编辑
+              </Button>
+            </div>
+          ))}
+          <Separator />
+          <Button variant="outline" size="sm">
+            添加公告
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">运营设置</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3 text-sm">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">派单模式</span>
+            <Badge variant="outline">
+              {shop.dispatchMode === "manual" ? "手动派单" : "自动派单"}
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">允许多店挂靠</span>
+            <Badge variant={shop.allowMultiShop ? "default" : "secondary"}>
+              {shop.allowMultiShop ? "是" : "否"}
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">允许独立接单</span>
+            <Badge variant={shop.allowIndependentOrders ? "default" : "secondary"}>
+              {shop.allowIndependentOrders ? "是" : "否"}
+            </Badge>
+          </div>
+        </CardContent>
+      </Card>
     </div>
   )
 }

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

@@ -1,8 +1,95 @@
+"use client"
+
+import { Eye, EyeOff, GripVertical } from "lucide-react"
+import Link from "next/link"
+import { 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-data"
+import type { ShopSection } from "@/lib/types"
+
+const sectionLabels: Record<ShopSection["type"], string> = {
+  banner: "横幅图片",
+  intro: "店铺简介",
+  services: "服务列表",
+  players: "打手展示",
+  announcements: "公告栏",
+  reviews: "评价展示",
+}
+
+const sectionDescriptions: Record<ShopSection["type"], string> = {
+  banner: "店铺顶部的横幅图片",
+  intro: "店铺的文字介绍",
+  services: "展示店铺提供的服务",
+  players: "展示签约打手列表",
+  announcements: "店铺公告和活动信息",
+  reviews: "展示用户评价",
+}
+
 export default function ShopTemplatesPage() {
+  const shop = mockShops[0]
+  const [sections, setSections] = useState<ShopSection[]>(
+    [...shop.templateConfig.sections].sort((a, b) => a.order - b.order),
+  )
+
+  const toggleSection = (type: ShopSection["type"]) => {
+    setSections((prev) => prev.map((s) => (s.type === type ? { ...s, enabled: !s.enabled } : s)))
+  }
+
   return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <div>
-      <h1 className="text-2xl font-bold">店铺模板</h1>
+          <h1 className="text-2xl font-bold">模板编辑</h1>
-      <p className="mt-2 text-muted-foreground">编辑店铺主页模板组件</p>
+          <p className="text-sm text-muted-foreground mt-1">自定义店铺主页的展示内容和顺序</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" asChild>
+            <Link href={`/shop/${shop.id}`}>预览</Link>
+          </Button>
+          <Button>保存模板</Button>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">页面组件</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          {sections.map((section) => (
+            <div key={section.type} className="flex items-center gap-3 rounded-lg border p-3">
+              <GripVertical className="h-4 w-4 text-muted-foreground cursor-grab shrink-0" />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{sectionLabels[section.type]}</span>
+                  {section.enabled ? (
+                    <Eye className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">{sectionDescriptions[section.type]}</p>
+              </div>
+              <Switch
+                checked={section.enabled}
+                onCheckedChange={() => toggleSection(section.type)}
+              />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">提示</CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground space-y-1">
+          <p>拖拽左侧手柄可调整组件顺序（原型演示中暂不支持拖拽）</p>
+          <p>关闭开关可隐藏对应组件，不会删除已有内容</p>
+          <p>保存后立即生效，访客将看到最新的店铺主页</p>
+        </CardContent>
+      </Card>
     </div>
   )
 }