zetaloop
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
"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>
|
||
<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>
|
||
)
|
||
}
|