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

2026-02-20 15:29:08 +08:00
parent 8f4e8604d3
commit 6523556d8b
3 changed files with 345 additions and 9 deletions
@@ -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>
-      <h1 className="text-2xl font-bold">店铺模板</h1>
-      <p className="mt-2 text-muted-foreground">编辑店铺主页模板组件</p>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">模板编辑</h1>
+          <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>
  )
 }