perf: optimize reorder performance in BasicPanel

Author: JOYCEQL

src/components/editor/basic/BasicPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { PlusCircle, GripVertical, Trash2, Eye, EyeOff } from "lucide-react";
 import { Reorder, AnimatePresence, motion } from "framer-motion";
 import { useTranslations } from "@/i18n/compat/client";
@@ -18,6 +18,7 @@ interface CustomFieldProps {
   field: CustomFieldType;
   onUpdate: (field: CustomFieldType) => void;
   onDelete: (id: string) => void;
+  onReorderEnd: () => void;
 }
 
 const itemAnimations = {
@@ -31,6 +32,7 @@ const CustomField: React.FC<CustomFieldProps> = ({
   field,
   onUpdate,
   onDelete,
+  onReorderEnd,
 }) => {
   const t = useTranslations("workbench.basicPanel");
 
@@ -39,6 +41,7 @@ const CustomField: React.FC<CustomFieldProps> = ({
       value={field}
       id={field.id}
       className="group touch-none list-none"
+      onDragEnd={onReorderEnd}
     >
       <motion.div
         {...itemAnimations}
@@ -169,15 +172,28 @@ const BasicPanel: React.FC = () => {
       visible: field.visible ?? true,
     }));
   });
+  const basicFieldsRef = useRef(basicFields);
+  const customFieldsRef = useRef(customFields);
   const t = useTranslations("workbench.basicPanel");
 
+  useEffect(() => {
+    basicFieldsRef.current = basicFields;
+  }, [basicFields]);
+
+  useEffect(() => {
+    customFieldsRef.current = customFields;
+  }, [customFields]);
+
   const handleBasicReorder = (newOrder: BasicFieldType[]) => {
+    basicFieldsRef.current = newOrder;
     setBasicFields(newOrder);
+  };
+
+  const commitBasicReorder = useCallback(() => {
     updateBasicInfo({
-      ...basic,
-      fieldOrder: newOrder,
+      fieldOrder: basicFieldsRef.current,
     });
-  };
+  }, [updateBasicInfo]);
 
   const toggleFieldVisibility = (fieldId: string, isVisible: boolean) => {
     const newFields = basicFields.map((field) =>
@@ -245,12 +261,15 @@ const BasicPanel: React.FC = () => {
   };
 
   const handleCustomFieldsReorder = (newOrder: CustomFieldType[]) => {
+    customFieldsRef.current = newOrder;
     setCustomFields(newOrder);
+  };
+
+  const commitCustomFieldsReorder = useCallback(() => {
     updateBasicInfo({
-      ...basic,
-      customFields: newOrder,
+      customFields: customFieldsRef.current,
     });
-  };
+  }, [updateBasicInfo]);
 
   const renderBasicField = (field: BasicFieldType) => {
     const selectedIcon = basic?.icons?.[field.key] || "User";
@@ -262,6 +281,7 @@ const BasicPanel: React.FC = () => {
         key={field.id}
         className="group touch-none list-none"
         dragListener={field.key !== "name" && field.key !== "title"}
+        onDragEnd={commitBasicReorder}
       >
         <motion.div
           {...itemAnimations}
@@ -428,6 +448,7 @@ const BasicPanel: React.FC = () => {
                             field={field}
                             onUpdate={updateCustomField}
                             onDelete={deleteCustomField}
+                            onReorderEnd={commitCustomFieldsReorder}
                           />
                         ))}
                     </Reorder.Group>