⚡️ 优化弹出页面重新渲染导致点击后台脚本运行按钮后折叠的问题

Author: CodFrm

src/pages/components/ScriptMenuList/index.tsx

@@ -356,12 +356,18 @@ const ScriptMenuList = React.memo(
 
     ListMenuItem.displayName = "ListMenuItem";
 
+    // 使用 useCallback 来缓存渲染函数，避免每次渲染都创建新的函数实例
+    const renderListItem = useCallback(
+      ({ item, index }: { item: ScriptMenu; index: number }) => (
+        <ListMenuItem key={`${item.uuid}`} item={item} index={index} />
+      ),
+      []
+    );
+
     return (
       <>
         {list.length === 0 && <Empty description={t("no_data")} />}
-        {list.map((item, index) => (
-          <ListMenuItem key={`${item.uuid}`} item={item} index={index} />
-        ))}
+        {list.map((item, index) => renderListItem({ item, index }))}
       </>
     );
   }

src/pages/popup/App.tsx

@@ -202,10 +202,8 @@ function App() {
                   // 检查位置，优化窗口过小，导致弹出菜单显示不全的问题
                   setTimeout(() => {
                     const dropdowns = document.getElementsByClassName("arco-dropdown");
-                    console.log(dropdowns);
                     if (dropdowns.length > 0) {
                       const dropdown = dropdowns[0] as HTMLElement;
-                      console.log(dropdowns, dropdown.style.top);
                       // 如果top是负数修改为0
                       if (parseInt(dropdown.style.top) < 0) {
                         dropdown.style.top = "0px";