feat: support clash meta memory usage display

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

@@ -0,0 +1,80 @@
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { List, Switch } from "@mui/material";
+import { useVerge } from "@/hooks/use-verge";
+import { BaseDialog, DialogRef, Notice } from "@/components/base";
+import { SettingItem } from "./setting-comp";
+import { GuardState } from "./guard-state";
+
+export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
+  const { t } = useTranslation();
+  const { verge, patchVerge, mutateVerge } = useVerge();
+
+  const [open, setOpen] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+  }));
+
+  const onSwitchFormat = (_e: any, value: boolean) => value;
+  const onError = (err: any) => {
+    Notice.error(err.message || err.toString());
+  };
+  const onChangeData = (patch: Partial<IVergeConfig>) => {
+    mutateVerge({ ...verge, ...patch }, false);
+  };
+
+  return (
+    <BaseDialog
+      open={open}
+      title={t("Layout Setting")}
+      contentSx={{ width: 450 }}
+      disableOk
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+    >
+      <List>
+        <SettingItem label={t("Theme Blur")}>
+          <GuardState
+            value={verge?.theme_blur ?? false}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ theme_blur: e })}
+            onGuard={(e) => patchVerge({ theme_blur: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+
+        <SettingItem label={t("Traffic Graph")}>
+          <GuardState
+            value={verge?.traffic_graph ?? true}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ traffic_graph: e })}
+            onGuard={(e) => patchVerge({ traffic_graph: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+
+        <SettingItem label={t("Memory Usage")}>
+          <GuardState
+            value={verge?.enable_memory_usage ?? true}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => onChangeData({ enable_memory_usage: e })}
+            onGuard={(e) => patchVerge({ enable_memory_usage: e })}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </SettingItem>
+      </List>
+    </BaseDialog>
+  );
+});

src/components/setting/mods/setting-comp.tsx

@@ -11,10 +11,11 @@ interface ItemProps {
   label: ReactNode;
   extra?: ReactNode;
   children?: ReactNode;
+  secondary?: ReactNode;
 }
 
 export const SettingItem: React.FC<ItemProps> = (props) => {
-  const { label, extra, children } = props;
+  const { label, extra, children, secondary } = props;
 
   const primary = !extra ? (
     label
@@ -27,7 +28,7 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
 
   return (
     <ListItem sx={{ pt: "5px", pb: "5px" }}>
-      <ListItemText primary={primary} />
+      <ListItemText primary={primary} secondary={secondary} />
       {children}
     </ListItem>
   );

src/components/setting/setting-verge.tsx

@@ -1,12 +1,6 @@
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  IconButton,
-  MenuItem,
-  Select,
-  Switch,
-  Typography,
-} from "@mui/material";
+import { IconButton, MenuItem, Select, Typography } from "@mui/material";
 import { openAppDir, openCoreDir, openLogsDir } from "@/services/cmds";
 import { ArrowForward } from "@mui/icons-material";
 import { useVerge } from "@/hooks/use-verge";
@@ -19,6 +13,7 @@ import { HotkeyViewer } from "./mods/hotkey-viewer";
 import { MiscViewer } from "./mods/misc-viewer";
 import { ThemeViewer } from "./mods/theme-viewer";
 import { GuardState } from "./mods/guard-state";
+import { LayoutViewer } from "./mods/layout-viewer";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -35,6 +30,7 @@ const SettingVerge = ({ onError }: Props) => {
   const hotkeyRef = useRef<DialogRef>(null);
   const miscRef = useRef<DialogRef>(null);
   const themeRef = useRef<DialogRef>(null);
+  const layoutRef = useRef<DialogRef>(null);
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
   const onChangeData = (patch: Partial<IVergeConfig>) => {
@@ -47,6 +43,7 @@ const SettingVerge = ({ onError }: Props) => {
       <ConfigViewer ref={configRef} />
       <HotkeyViewer ref={hotkeyRef} />
       <MiscViewer ref={miscRef} />
+      <LayoutViewer ref={layoutRef} />
 
       <SettingItem label={t("Language")}>
         <GuardState
@@ -75,30 +72,26 @@ const SettingVerge = ({ onError }: Props) => {
         </GuardState>
       </SettingItem>
 
-      <SettingItem label={t("Theme Blur")}>
-        <GuardState
-          value={theme_blur ?? false}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ theme_blur: e })}
-          onGuard={(e) => patchVerge({ theme_blur: e })}
+      <SettingItem label={t("Theme Setting")}>
+        <IconButton
+          color="inherit"
+          size="small"
+          sx={{ my: "2px" }}
+          onClick={() => themeRef.current?.open()}
         >
-          <Switch edge="end" />
-        </GuardState>
+          <ArrowForward />
+        </IconButton>
       </SettingItem>
 
-      <SettingItem label={t("Traffic Graph")}>
-        <GuardState
-          value={traffic_graph ?? true}
-          valueProps="checked"
-          onCatch={onError}
-          onFormat={onSwitchFormat}
-          onChange={(e) => onChangeData({ traffic_graph: e })}
-          onGuard={(e) => patchVerge({ traffic_graph: e })}
+      <SettingItem label={t("Layout Setting")}>
+        <IconButton
+          color="inherit"
+          size="small"
+          sx={{ my: "2px" }}
+          onClick={() => layoutRef.current?.open()}
         >
-          <Switch edge="end" />
-        </GuardState>
+          <ArrowForward />
+        </IconButton>
       </SettingItem>
 
       <SettingItem label={t("Miscellaneous")}>
@@ -112,17 +105,6 @@ const SettingVerge = ({ onError }: Props) => {
         </IconButton>
       </SettingItem>
 
-      <SettingItem label={t("Theme Setting")}>
-        <IconButton
-          color="inherit"
-          size="small"
-          sx={{ my: "2px" }}
-          onClick={() => themeRef.current?.open()}
-        >
-          <ArrowForward />
-        </IconButton>
-      </SettingItem>
-
       <SettingItem label={t("Hotkey Setting")}>
         <IconButton
           color="inherit"