chore: debug 面板优化(不要触发其他 modal 的 closeOnOutside & 限制 logs 条数太多了性能不可预期) (

#11311)
baidu · Dec 3, 2024 · 80a8fa7 · 80a8fa7
1 parent 955d135
commit 80a8fa7
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/packages/amis-core/src/utils/debug.tsx b/packages/amis-core/src/utils/debug.tsx
@@ -181,7 +181,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     }
   }
 
-  const panelRef = useRef(null);
+  const panelRef = useRef<HTMLDivElement>(null);
 
   const [isResizing, setResizing] = useState(false);
 
@@ -220,6 +220,19 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     };
   }, [isResizing]);
 
+  // 避免触发 modal 的 closeOnOutside 逻辑
+  useEffect(() => {
+    const handlePanelMouseUp = (e: Event) => {
+      e.preventDefault();
+    };
+
+    panelRef.current!.addEventListener('mouseup', handlePanelMouseUp);
+
+    return () => {
+      panelRef.current!.removeEventListener('mouseup', handlePanelMouseUp);
+    };
+  }, []);
+
   const handleInputKeyUp = React.useCallback((e: React.KeyboardEvent<any>) => {
     if (e.key === 'Enter') {
       const input = e.target as HTMLInputElement;
@@ -290,7 +303,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
                 store.tab = 'log';
               }}
             >
-              Log
+              Log({store.logs.length})
             </button>
             <button
               className={cx({active: store.tab === 'inspect'})}
@@ -609,6 +622,10 @@ export function debug(cat: Category, msg: string, ext?: any) {
     ext: ext
   };
   store.logs.push(log);
+  // 不要超过 200 条，担心性能问题
+  if (store.logs.length > 200) {
+    store.logs.splice(0, store.logs.length - 200);
+  }
 }
 
 /**