From 039903c8c28dbd13c80dea2c4f7546bb1e64d305 Mon Sep 17 00:00:00 2001
From: JOYCEQL <1449239013@qq.com>
Date: Wed, 20 Nov 2024 23:10:26 +0800
Subject: [PATCH] style: editor basicPanel

---
 .../components/editor/basic/BasicPanel.tsx    | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/apps/fronted/src/components/editor/basic/BasicPanel.tsx b/apps/fronted/src/components/editor/basic/BasicPanel.tsx
index 0194117..21aba7f 100644
--- a/apps/fronted/src/components/editor/basic/BasicPanel.tsx
+++ b/apps/fronted/src/components/editor/basic/BasicPanel.tsx
@@ -34,9 +34,9 @@ interface CustomFieldProps {
 }
 
 const itemAnimations = {
-  initial: { opacity: 0, y: 20 },
+  initial: { opacity: 0, y: 0 },
   animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: -20 },
+  exit: { opacity: 0, y: 0 },
   transition: { type: "spring", stiffness: 500, damping: 50, mass: 1 }
 };
 
@@ -226,25 +226,28 @@ const BasicPanel: React.FC = () => {
         <motion.div
           {...itemAnimations}
           className={cn(
-            "grid grid-cols-[auto_auto_1fr_auto] gap-3 items-center p-3",
-            "bg-white dark:bg-neutral-800 rounded-xl",
-            "border border-neutral-100 dark:border-neutral-700",
+            "flex items-center gap-4 p-4",
+            "bg-white dark:bg-neutral-900",
+            "rounded-lg shadow-sm",
+            "border border-neutral-200 dark:border-neutral-800",
             "transition-all duration-200",
-            "hover:border-neutral-200 dark:hover:border-neutral-600",
-            !field.visible && "opacity-60"
+            "hover:shadow-md hover:border-neutral-300 dark:hover:border-neutral-700",
+            !field.visible && "opacity-75"
           )}
         >
-          <div className="flex items-center justify-center">
+          {/* Drag Handle */}
+          <div className="shrink-0">
             <GripVertical
               className={cn(
-                "w-4 h-4 cursor-grab active:cursor-grabbing",
-                "text-neutral-300 dark:text-neutral-500",
-                "transition-colors duration-200",
-                "group-hover:text-neutral-400 dark:group-hover:text-neutral-400"
+                "w-5 h-5 cursor-grab active:cursor-grabbing",
+                "text-neutral-400 dark:text-neutral-600",
+                "hover:text-neutral-600 dark:hover:text-neutral-400",
+                "transition-colors duration-200"
               )}
             />
           </div>
-          <div className="flex items-center justify-center">
+
+          <div className="shrink-0">
             <IconSelector
               value={selectedIcon}
               onChange={(value) => {
@@ -259,11 +262,9 @@ const BasicPanel: React.FC = () => {
               theme={theme}
             />
           </div>
-          <div className="space-y-1.5">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-neutral-700 dark:text-neutral-200">
-                {field.label}
-              </span>
+          <div className="flex-1 min-w-0">
+            <div className="mb-2 text-sm font-medium text-neutral-700 dark:text-neutral-200">
+              {field.label}
             </div>
             <Field
               label=""
@@ -278,16 +279,21 @@ const BasicPanel: React.FC = () => {
               type={field.type}
             />
           </div>
+
           <Button
             variant="ghost"
             size="sm"
-            className="h-6 px-2"
+            className={cn(
+              "shrink-0 h-8 px-2",
+              "text-neutral-500 dark:text-neutral-400",
+              "hover:text-neutral-700 dark:hover:text-neutral-200"
+            )}
             onClick={() => toggleFieldVisibility(field.id, !field.visible)}
           >
             {field.visible ? (
-              <Eye className="w-4 h-4 cursor-pointer" />
+              <Eye className="w-4 h-4" />
             ) : (
-              <EyeOff className="w-4 h-4 cursor-pointer" />
+              <EyeOff className="w-4 h-4" />
             )}
           </Button>
         </motion.div>
@@ -296,11 +302,11 @@ const BasicPanel: React.FC = () => {
   };
 
   return (
-    <div className="space-y-6 p-6">
+    <motion.div className="space-y-6 p-6" {...itemAnimations}>
       <motion.div
-        initial={{ opacity: 0, y: 20 }}
+        initial={{ opacity: 0, y: 0 }}
         animate={{ opacity: 1, y: 0 }}
-        className="bg-white dark:bg-neutral-800 rounded-xl p-3 border border-neutral-100 dark:border-neutral-700"
+        className="bg-white dark:bg-neutral-900 rounded-xl p-3 border border-neutral-100 dark:border-neutral-700"
       >
         <PhotoUpload theme={theme} />
       </motion.div>
@@ -368,7 +374,7 @@ const BasicPanel: React.FC = () => {
           </motion.div>
         </motion.div>
       </motion.div>
-    </div>
+    </motion.div>
   );
 };