✨ 菜单自动隐藏配置 #269

Author: CodFrm

src/locales/zh-CN/translation.json

@@ -351,5 +351,7 @@
   "guide_setting_sync_content": "脚本同步功能可以方便的将本设备的脚本内容同步至云端，如果有多台设备请勾选同步删除选项，当本设备脚本删除时，会从云端删除对应的脚本，也会将其它设备的脚本删除。",
   "auto": "自动",
   "hide": "隐藏",
-  "resize_column_width": "调整列宽"
+  "resize_column_width": "调整列宽",
+  "collapse": "收起",
+  "expand": "展开"
 }

src/pages/components/ScriptMenuList/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import React, { useEffect, useState } from "react";
 import MessageInternal from "@App/app/message/internal";
 import { MessageSender } from "@App/app/message/message";
@@ -12,6 +13,8 @@ import {
   Switch,
 } from "@arco-design/web-react";
 import {
+  IconCaretDown,
+  IconCaretUp,
   IconDelete,
   IconEdit,
   IconMenu,
@@ -24,6 +27,7 @@ import { SCRIPT_RUN_STATUS_RUNNING } from "@App/app/repo/scripts";
 import { RiPlayFill, RiStopFill } from "react-icons/ri";
 import RuntimeController from "@App/runtime/content/runtime";
 import { useTranslation } from "react-i18next";
+import { SystemConfig } from "@App/pkg/config/config";
 
 const CollapseItem = Collapse.Item;
 
@@ -49,6 +53,10 @@ const ScriptMenuList: React.FC<{
   const message = IoC.instance(MessageInternal) as MessageInternal;
   const scriptCtrl = IoC.instance(ScriptController) as ScriptController;
   const runtimeCtrl = IoC.instance(RuntimeController) as RuntimeController;
+  const systemConfig = IoC.instance(SystemConfig) as SystemConfig;
+  const [expandMenuIndex, setExpandMenuIndex] = useState<{
+    [key: string]: boolean;
+  }>({});
   const { t } = useTranslation();
 
   let url: URL;
@@ -95,10 +103,13 @@ const ScriptMenuList: React.FC<{
     window.close();
   };
   // 监听菜单按键
+
+  // 菜单展开
+
   return (
     <>
       {list.length === 0 && <Empty />}
-      {list.map((item) => (
+      {list.map((item, index) => (
         <Collapse bordered={false} expandIconPosition="right" key={item.id}>
           <CollapseItem
             header={
@@ -246,7 +257,13 @@ const ScriptMenuList: React.FC<{
             className="arco-collapse-item-content-box flex flex-col"
             style={{ padding: "0 0 0 40px" }}
           >
-            {item.menus?.map((menu) => {
+            {/* 判断菜单数量，再判断是否展开 */}
+            {(item.menus && item.menus?.length > systemConfig.menuExpandNum
+              ? expandMenuIndex[index]
+                ? item.menus
+                : item.menus?.slice(0, systemConfig.menuExpandNum)
+              : item.menus
+            )?.map((menu) => {
               if (menu.accessKey) {
                 document.addEventListener("keypress", (e) => {
                   if (e.key.toUpperCase() === menu.accessKey!.toUpperCase()) {
@@ -269,6 +286,24 @@ const ScriptMenuList: React.FC<{
                 </Button>
               );
             })}
+            {item.menus && item.menus?.length > systemConfig.menuExpandNum && (
+              <Button
+                className="text-left"
+                key="expand"
+                type="secondary"
+                icon={
+                  expandMenuIndex[index] ? <IconCaretUp /> : <IconCaretDown />
+                }
+                onClick={() => {
+                  setExpandMenuIndex({
+                    ...expandMenuIndex,
+                    [index]: !expandMenuIndex[index],
+                  });
+                }}
+              >
+                {expandMenuIndex[index] ? t("collapse") : t("expand")}
+              </Button>
+            )}
             {item.hasUserConfig && (
               <Button
                 className="text-left"

src/pages/options/routes/Setting.tsx

@@ -95,6 +95,18 @@ function Setting() {
               ))}
             </Select>
           </Space>
+          <Space>
+            菜单项超过
+            <Input
+              style={{ width: "64px" }}
+              type="number"
+              defaultValue={systemConfig.menuExpandNum.toString()}
+              onChange={(val) => {
+                systemConfig.menuExpandNum = parseInt(val, 10);
+              }}
+            />
+            个时，自动隐藏
+          </Space>
         </Space>
       </Card>
       <Card className="sync" title={t("script_sync")} bordered={false}>

src/pkg/config/config.ts

@@ -271,4 +271,13 @@ export class SystemConfig {
   set scriptListColumnWidth(val: { [key: string]: number }) {
     this.set("script_list_column_width", val);
   }
+
+  // 展开菜单数
+  get menuExpandNum() {
+    return <number>this.cache.get("menu_expand_num") || 5;
+  }
+
+  set menuExpandNum(val: number) {
+    this.set("menu_expand_num", val);
+  }
 }