feat(ui): refine dashboard configuration pages

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

@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { Switch } from "@/components/ui/switch"
 import { updateShopTemplate } from "@/lib/api"
 import { getShopSections } from "@/lib/domain/shop-template"
@@ -9,7 +10,7 @@ import { toApiError } from "@/lib/errors"
 import { useMyShop } from "@/lib/hooks/use-my-shop"
 import { notifyInfo } from "@/lib/toast"
 import type { Shop, ShopSection } from "@/lib/types"
-import { Eye, EyeOff, GripVertical } from "lucide-react"
+import { AlertCircle, Eye, EyeOff, GripVertical } from "lucide-react"
 import Link from "next/link"
 import { type DragEvent, useEffect, useState } from "react"
 
@@ -35,15 +36,27 @@ export default function ShopTemplatesPage() {
   const { shop, setShop, loading, error } = useMyShop()
 
   if (loading) {
-    return <div className="text-sm text-muted-foreground">加载中...</div>
+    return (
+      <div className="container mx-auto max-w-4xl px-4 py-8">
+        <EmptyState title="模板加载中" icon={GripVertical} />
+      </div>
+    )
   }
 
   if (error) {
-    return <div className="text-sm text-muted-foreground">{error}</div>
+    return (
+      <div className="container mx-auto max-w-4xl px-4 py-8">
+        <EmptyState title="模板加载失败" description={error} icon={AlertCircle} />
+      </div>
+    )
   }
 
   if (!shop) {
-    return <div className="text-sm text-muted-foreground">当前账号没有可管理的店铺</div>
+    return (
+      <div className="container mx-auto max-w-4xl px-4 py-8">
+        <EmptyState title="当前账号没有可管理的店铺" icon={GripVertical} />
+      </div>
+    )
   }
 
   return <ShopTemplatesEditor key={shop.id} shop={shop} setShop={setShop} />
@@ -136,7 +149,7 @@ function ShopTemplatesEditor({
   return (
     <div className="container mx-auto max-w-4xl px-4 py-8 space-y-8">
       {showSavedToast ? (
-        <div className="fixed right-6 top-6 z-50 rounded-md border bg-background px-4 py-2 text-sm shadow-md">
+        <div className="fixed right-6 top-6 z-50 rounded-md border border-border/80 bg-background px-4 py-2 text-sm shadow-sm">
           模板已保存
         </div>
       ) : null}
@@ -146,7 +159,7 @@ function ShopTemplatesEditor({
           <p className="text-sm text-muted-foreground mt-1">自定义店铺主页的展示内容和顺序</p>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" asChild>
+          <Button variant="outline" className="border-border/60" asChild>
             <Link href={`/shop/${shop.id}`}>预览</Link>
           </Button>
           <Button
@@ -160,7 +173,7 @@ function ShopTemplatesEditor({
         </div>
       </div>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">页面组件</CardTitle>
         </CardHeader>
@@ -168,7 +181,7 @@ function ShopTemplatesEditor({
           {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" : ""}`}
+              className={`flex items-center gap-3 rounded-lg border border-border/60 p-3 transition-colors ${dragIndex === index ? "opacity-50" : "opacity-100"} ${dropIndex === index ? "border-b-2 border-t-2 border-b-primary border-t-primary" : ""}`}
             >
               <button
                 type="button"
@@ -203,7 +216,7 @@ function ShopTemplatesEditor({
         </CardContent>
       </Card>
 
-      <Card className="hover:shadow-card-hover">
+      <Card className="border-border/80 shadow-sm">
         <CardHeader>
           <CardTitle className="text-base">提示</CardTitle>
         </CardHeader>