✨ 优化菜单展开项为0时的交互逻辑 #868

Author: CodFrm

src/pages/components/ScriptMenuList/index.tsx

@@ -177,20 +177,24 @@ const ListMenuItem = React.memo(
   ({ item, scriptMenus, menuExpandNum, isBackscript, url, onEnableChange, handleDeleteScript }: ListMenuItemProps) => {
     const { t } = useTranslation();
     const [isEffective, setIsEffective] = useState<boolean | null>(item.isEffective);
-
+    const [isActive, setIsActive] = useState<boolean>(false);
     const [isExpand, setIsExpand] = useState<boolean>(false);
 
     const handleExpandMenu = () => {
       setIsExpand((e) => !e);
     };
 
     const visibleMenus = useMemo(() => {
+      // 当menuExpandNum为0时，跟随 isActive 状态显示全部菜单
       const m = scriptMenus?.group || [];
+      if (menuExpandNum === 0 && isActive) {
+        return m;
+      }
       return m.length > menuExpandNum && !isExpand ? m.slice(0, menuExpandNum) : m;
-    }, [scriptMenus?.group, isExpand, menuExpandNum]);
+    }, [scriptMenus?.group, isExpand, menuExpandNum, isActive]);
 
     const shouldShowMore = useMemo(
-      () => scriptMenus?.group?.length > menuExpandNum,
+      () => menuExpandNum > 0 && scriptMenus?.group?.length > menuExpandNum,
       [scriptMenus?.group, menuExpandNum]
     );
 
@@ -201,7 +205,15 @@ const ListMenuItem = React.memo(
     };
 
     return (
-      <Collapse bordered={false} expandIconPosition="right" key={item.uuid}>
+      <Collapse
+        activeKey={isActive ? item.uuid : undefined}
+        onChange={(_, keys) => {
+          setIsActive(keys.includes(item.uuid));
+        }}
+        bordered={false}
+        expandIconPosition="right"
+        key={item.uuid}
+      >
         <CollapseItem
           header={<CollapseHeader item={item} onEnableChange={onEnableChange} />}
           name={item.uuid}

src/pages/popup/App.tsx

@@ -253,7 +253,7 @@ function App() {
       for (const unhook of unhooks) unhook();
       unhooks.length = 0;
     };
-  }, []);
+  }, [subscribeMessage]);
 
   const { handleEnableScriptChange, handleSettingsClick, handleNotificationClick } = {
     handleEnableScriptChange: (val: boolean) => {