feat: Add option to control menu icon

src-tauri/src/config/verge.rs

@@ -42,6 +42,9 @@ pub struct IVerge {
     /// common tray icon
     pub common_tray_icon: Option<bool>,
 
+    /// menu icon
+    pub menu_icon: Option<String>,
+
     /// sysproxy tray icon
     pub sysproxy_tray_icon: Option<bool>,
 
@@ -176,6 +179,7 @@ impl IVerge {
             traffic_graph: Some(true),
             enable_memory_usage: Some(true),
             enable_group_icon: Some(true),
+            menu_icon: Some("monochrome".into()),
             common_tray_icon: Some(false),
             sysproxy_tray_icon: Some(false),
             tun_tray_icon: Some(false),
@@ -221,6 +225,7 @@ impl IVerge {
         patch!(traffic_graph);
         patch!(enable_memory_usage);
         patch!(enable_group_icon);
+        patch!(menu_icon);
         patch!(common_tray_icon);
         patch!(sysproxy_tray_icon);
         patch!(tun_tray_icon);

src/components/layout/layout-item.tsx

@@ -6,15 +6,16 @@ import {
   ListItemIcon,
 } from "@mui/material";
 import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
-
+import { useVerge } from "@/hooks/use-verge";
 interface Props {
   to: string;
   children: string;
-  icon: React.ReactNode;
+  icon: React.ReactNode[];
 }
 export const LayoutItem = (props: Props) => {
   const { to, children, icon } = props;
-
+  const { verge } = useVerge();
+  const { menu_icon } = verge ?? {};
   const resolved = useResolvedPath(to);
   const match = useMatch({ path: resolved.pathname, end: true });
   const navigate = useNavigate();
@@ -27,7 +28,7 @@ export const LayoutItem = (props: Props) => {
           {
             borderRadius: 2,
             marginLeft: 1.25,
-            paddingLeft: 1.5,
+            paddingLeft: 1,
             paddingRight: 1,
             marginRight: 1.25,
             "& .MuiListItemText-primary": {
@@ -51,9 +52,13 @@ export const LayoutItem = (props: Props) => {
         ]}
         onClick={() => navigate(to)}
       >
-        <ListItemIcon>{icon}</ListItemIcon>
+        {menu_icon === "monochrome" && <ListItemIcon>{icon[0]}</ListItemIcon>}
+        {menu_icon === "colorful" && <ListItemIcon>{icon[1]}</ListItemIcon>}
         <ListItemText
-          sx={{ textAlign: "center", marginLeft: "-35px" }}
+          sx={{
+            textAlign: "center",
+            marginLeft: menu_icon === "disable" ? "" : "-35px",
+          }}
           primary={children}
         />
       </ListItemButton>

src/components/setting/mods/layout-viewer.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Button } from "@mui/material";
+import { List, Button, Select, MenuItem } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
 import { SettingItem } from "./setting-comp";
@@ -19,6 +19,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
+  // const { menu_icon } = verge ?? {};
   useEffect(() => {
     initIconPath();
   }, []);
@@ -97,6 +98,22 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
           </GuardState>
         </SettingItem>
 
+        <SettingItem label={t("Menu Icon")}>
+          <GuardState
+            value={verge?.menu_icon ?? "monochrome"}
+            onCatch={onError}
+            onFormat={(e: any) => e.target.value}
+            onChange={(e) => onChangeData({ menu_icon: e })}
+            onGuard={(e) => patchVerge({ menu_icon: e })}
+          >
+            <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
+              <MenuItem value="monochrome">{t("Monochrome")}</MenuItem>
+              <MenuItem value="colorful">{t("Colorful")}</MenuItem>
+              <MenuItem value="disable">{t("Disable")}</MenuItem>
+            </Select>
+          </GuardState>
+        </SettingItem>
+
         <SettingItem label={t("Common Tray Icon")}>
           <GuardState
             value={verge?.common_tray_icon}

src/locales/zh.json

@@ -112,6 +112,9 @@
   "Traffic Graph": "流量图显",
   "Memory Usage": "内存使用",
   "Proxy Group Icon": "代理组图标",
+  "Menu Icon": "菜单图标",
+  "Monochrome": "单色图标",
+  "Colorful": "多色图标",
   "Common Tray Icon": "常规托盘图标",
   "System Proxy Tray Icon": "系统代理托盘图标",
   "Tun Tray Icon": "Tun模式托盘图标",

src/pages/_routers.tsx

@@ -14,47 +14,55 @@ import LogsSvg from "@/assets/image/itemicon/logs.svg?react";
 import TestSvg from "@/assets/image/itemicon/test.svg?react";
 import SettingsSvg from "@/assets/image/itemicon/settings.svg?react";
 
+import WifiRoundedIcon from "@mui/icons-material/WifiRounded";
+import DnsRoundedIcon from "@mui/icons-material/DnsRounded";
+import LanguageRoundedIcon from "@mui/icons-material/LanguageRounded";
+import ForkRightRoundedIcon from "@mui/icons-material/ForkRightRounded";
+import DvrRoundedIcon from "@mui/icons-material/DvrRounded";
+import WifiTetheringRoundedIcon from "@mui/icons-material/WifiTetheringRounded";
+import SettingsRoundedIcon from "@mui/icons-material/SettingsRounded";
+
 export const routers = [
   {
     label: "Label-Proxies",
     link: "/",
-    icon: <ProxiesSvg />,
+    icon: [<WifiRoundedIcon />, <ProxiesSvg />],
     ele: ProxiesPage,
   },
   {
     label: "Label-Profiles",
     link: "/profile",
-    icon: <ProfilesSvg />,
+    icon: [<DnsRoundedIcon />, <ProfilesSvg />],
     ele: ProfilesPage,
   },
   {
     label: "Label-Connections",
     link: "/connections",
-    icon: <ConnectionsSvg />,
+    icon: [<LanguageRoundedIcon />, <ConnectionsSvg />],
     ele: ConnectionsPage,
   },
   {
     label: "Label-Rules",
     link: "/rules",
-    icon: <RulesSvg />,
+    icon: [<ForkRightRoundedIcon />, <RulesSvg />],
     ele: RulesPage,
   },
   {
     label: "Label-Logs",
     link: "/logs",
-    icon: <LogsSvg />,
+    icon: [<DvrRoundedIcon />, <LogsSvg />],
     ele: LogsPage,
   },
   {
     label: "Label-Test",
     link: "/test",
-    icon: <TestSvg />,
+    icon: [<WifiTetheringRoundedIcon />, <TestSvg />],
     ele: TestPage,
   },
   {
     label: "Label-Settings",
     link: "/settings",
-    icon: <SettingsSvg />,
+    icon: [<SettingsRoundedIcon />, <SettingsSvg />],
     ele: SettingsPage,
   },
 ];

src/services/types.d.ts

@@ -202,6 +202,7 @@ interface IVergeConfig {
   traffic_graph?: boolean;
   enable_memory_usage?: boolean;
   enable_group_icon?: boolean;
+  menu_icon?: "monochrome" | "colorful" | "disable";
   common_tray_icon?: boolean;
   sysproxy_tray_icon?: boolean;
   tun_tray_icon?: boolean;