From 943b2da25ca54acadcb598ca0b0757752dca580c Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Fri, 20 Feb 2026 22:43:20 +0800
Subject: [PATCH] feat: implement drag-and-drop sorting and save handler for
 shop templates

---
 .../dashboard/shop/templates/page.tsx         | 108 +++++++++++++++---
 1 file changed, 92 insertions(+), 16 deletions(-)

diff --git a/app/(dashboard)/dashboard/shop/templates/page.tsx b/app/(dashboard)/dashboard/shop/templates/page.tsx
index 7082e93..0564cd2 100644
--- a/app/(dashboard)/dashboard/shop/templates/page.tsx
+++ b/app/(dashboard)/dashboard/shop/templates/page.tsx
@@ -2,7 +2,7 @@
 
 import { Eye, EyeOff, GripVertical } from "lucide-react"
 import Link from "next/link"
-import { useState } from "react"
+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"
@@ -32,13 +32,75 @@ export default function ShopTemplatesPage() {
   const [sections, setSections] = useState<ShopSection[]>(
     [...shop.templateConfig.sections].sort((a, b) => a.order - b.order),
   )
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dropIndex, setDropIndex] = useState<number | null>(null)
+  const [showSavedToast, setShowSavedToast] = useState(false)
+
+  useEffect(() => {
+    if (!showSavedToast) {
+      return
+    }
+
+    const timer = window.setTimeout(() => {
+      setShowSavedToast(false)
+    }, 2000)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [showSavedToast])
 
   const toggleSection = (type: ShopSection["type"]) => {
     setSections((prev) => prev.map((s) => (s.type === type ? { ...s, enabled: !s.enabled } : s)))
   }
 
+  const handleDragStart = (index: number) => {
+    setDragIndex(index)
+  }
+
+  const handleDragOver = (event: DragEvent<HTMLElement>, index: number) => {
+    event.preventDefault()
+    if (dragIndex === null || dragIndex === index) {
+      setDropIndex(null)
+      return
+    }
+    setDropIndex(index)
+  }
+
+  const handleDrop = (event: DragEvent<HTMLElement>, index: number) => {
+    event.preventDefault()
+    if (dragIndex === null || dragIndex === index) {
+      setDropIndex(null)
+      return
+    }
+
+    setSections((prev) => {
+      const next = [...prev]
+      const [draggedSection] = next.splice(dragIndex, 1)
+      next.splice(index, 0, draggedSection)
+      return next.map((section, order) => ({ ...section, order }))
+    })
+
+    setDragIndex(null)
+    setDropIndex(null)
+  }
+
+  const handleDragEnd = () => {
+    setDragIndex(null)
+    setDropIndex(null)
+  }
+
+  const handleSaveTemplate = () => {
+    setShowSavedToast(true)
+  }
+
   return (
     <div className="space-y-6">
+      {showSavedToast ? (
+        <div className="fixed right-6 top-6 z-50 rounded-md border bg-background px-4 py-2 text-sm shadow-md">
+          模板已保存
+        </div>
+      ) : null}
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold">模板编辑</h1>
@@ -48,7 +110,7 @@ export default function ShopTemplatesPage() {
           <Button variant="outline" asChild>
             <Link href={`/shop/${shop.id}`}>预览</Link>
           </Button>
-          <Button>保存模板</Button>
+          <Button onClick={handleSaveTemplate}>保存模板</Button>
         </div>
       </div>
 
@@ -57,20 +119,35 @@ export default function ShopTemplatesPage() {
           <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" />
-                  )}
+          {sections.map((section, index) => (
+            <div
+              key={section.type}
+              className={`flex items-center gap-3 rounded-lg border p-3 transition-colors ${dragIndex === index ? "opacity-50" : "opacity-100"} ${dropIndex === index ? "border-t-2 border-b-2 border-t-primary border-b-primary" : ""}`}
+            >
+              <button
+                type="button"
+                draggable
+                onDragStart={() => handleDragStart(index)}
+                onDragOver={(event) => handleDragOver(event, index)}
+                onDrop={(event) => handleDrop(event, index)}
+                onDragEnd={handleDragEnd}
+                className="flex flex-1 min-w-0 items-center gap-3 text-left"
+              >
+                <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>
-                <p className="text-xs text-muted-foreground">{sectionDescriptions[section.type]}</p>
-              </div>
+              </button>
               <Switch
                 checked={section.enabled}
                 onCheckedChange={() => toggleSection(section.type)}
@@ -85,7 +162,6 @@ export default function ShopTemplatesPage() {
           <CardTitle className="text-base">提示</CardTitle>
         </CardHeader>
         <CardContent className="text-sm text-muted-foreground space-y-1">
-          <p>拖拽左侧手柄可调整组件顺序</p>
           <p>关闭开关可隐藏对应组件，不会删除已有内容</p>
           <p>保存后立即生效，访客将看到最新的店铺主页</p>
         </CardContent>