feat: enable show or hide traffic graph

src-tauri/src/core/verge.rs

@@ -13,6 +13,9 @@ pub struct VergeConfig {
   /// maybe be able to set the alpha
   pub theme_blur: Option<bool>,
 
+  /// enable traffic graph default is true
+  pub traffic_graph: Option<bool>,
+
   /// can the app auto startup
   pub enable_auto_launch: Option<bool>,
 
@@ -195,6 +198,9 @@ impl Verge {
     if patch.theme_blur.is_some() {
       self.config.theme_blur = patch.theme_blur;
     }
+    if patch.traffic_graph.is_some() {
+      self.config.traffic_graph = patch.traffic_graph;
+    }
 
     // should update system startup
     if patch.enable_auto_launch.is_some() {

src-tauri/src/utils/tmpl.rs

@@ -22,6 +22,8 @@ items: ~
 pub const VERGE_CONFIG: &[u8] = b"# Defaulf Config For Clash Verge
 
 theme_mode: light
+theme_blur: false
+traffic_graph: true
 enable_self_startup: false
 enable_system_proxy: false
 system_proxy_bypass: localhost;127.*;10.*;192.168.*;<local>

src/components/layout/layout-traffic.tsx

@@ -1,9 +1,11 @@
+import useSWR from "swr";
 import { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { Box, Typography } from "@mui/material";
 import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
-import { getInfomation } from "../../services/api";
 import { ApiType } from "../../services/types";
+import { getInfomation } from "../../services/api";
+import { getVergeConfig } from "../../services/cmds";
 import { atomClashPort } from "../../states/setting";
 import parseTraffic from "../../utils/parse-traffic";
 import useTrafficGraph from "./use-traffic-graph";
@@ -13,6 +15,10 @@ const LayoutTraffic = () => {
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
   const { canvasRef, appendData, toggleStyle } = useTrafficGraph();
 
+  // whether hide traffic graph
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
+  const trafficGraph = data?.traffic_graph ?? true;
+
   useEffect(() => {
     let ws: WebSocket | null = null;
 
@@ -49,10 +55,12 @@ const LayoutTraffic = () => {
 
   return (
     <Box data-windrag width="110px" position="relative" onClick={toggleStyle}>
-      <canvas
+      {trafficGraph && (
-        ref={canvasRef}
+        <canvas
-        style={{ width: "100%", height: 60, marginBottom: 6 }}
+          ref={canvasRef}
-      />
+          style={{ width: "100%", height: 60, marginBottom: 6 }}
+        />
+      )}
 
       <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
         <ArrowUpward

src/components/layout/use-traffic-graph.ts

@@ -26,6 +26,9 @@ export default function useTrafficGraph() {
 
   const drawGraph = () => {
     const canvas = canvasRef.current!;
+
+    if (!canvas) return;
+
     const context = canvas.getContext("2d")!;
     const width = canvas.width;
     const height = canvas.height;

src/components/setting/setting-verge.tsx

@@ -6,12 +6,12 @@ import {
   openLogsDir,
   patchVergeConfig,
 } from "../../services/cmds";
+import { ArrowForward } from "@mui/icons-material";
 import { SettingList, SettingItem } from "./setting";
 import { CmdType } from "../../services/types";
 import { version } from "../../../package.json";
-import GuardState from "./guard-state";
 import PaletteSwitch from "./palette-switch";
-import { ArrowForward } from "@mui/icons-material";
+import GuardState from "./guard-state";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -21,7 +21,7 @@ const SettingVerge = ({ onError }: Props) => {
   const { mutate } = useSWRConfig();
   const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
 
-  const { theme_mode: mode = "light", theme_blur: blur = false } =
+  const { theme_mode = "light", theme_blur = false, traffic_graph } =
     vergeConfig ?? {};
 
   const onSwitchFormat = (_e: any, value: boolean) => value;
@@ -34,7 +34,7 @@ const SettingVerge = ({ onError }: Props) => {
       <SettingItem>
         <ListItemText primary="Theme Mode" />
         <GuardState
-          value={mode === "dark"}
+          value={theme_mode === "dark"}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -50,7 +50,7 @@ const SettingVerge = ({ onError }: Props) => {
       <SettingItem>
         <ListItemText primary="Theme Blur" />
         <GuardState
-          value={blur}
+          value={theme_blur}
           valueProps="checked"
           onCatch={onError}
           onFormat={onSwitchFormat}
@@ -62,15 +62,22 @@ const SettingVerge = ({ onError }: Props) => {
       </SettingItem>
 
       <SettingItem>
-        <ListItemText primary="Open App Dir" />
+        <ListItemText primary="Traffic Graph" />
-        <IconButton
+        <GuardState
-          color="inherit"
+          value={traffic_graph ?? true}
-          size="small"
+          valueProps="checked"
-          onClick={() => {
+          onCatch={onError}
-            console.log("click");
+          onFormat={onSwitchFormat}
-            openAppDir().then(console.log).catch(console.log);
+          onChange={(e) => onChangeData({ traffic_graph: e })}
-          }}
+          onGuard={(e) => patchVergeConfig({ traffic_graph: e })}
         >
+          <Switch edge="end" />
+        </GuardState>
+      </SettingItem>
+
+      <SettingItem>
+        <ListItemText primary="Open App Dir" />
+        <IconButton color="inherit" size="small" onClick={openAppDir}>
           <ArrowForward />
         </IconButton>
       </SettingItem>

src/pages/_layout.tsx

@@ -1,14 +1,12 @@
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
 import { useEffect, useMemo } from "react";
 import { Route, Routes } from "react-router-dom";
-import { useRecoilState } from "recoil";
 import { alpha, createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
-import { atomPaletteMode, atomThemeBlur } from "../states/setting";
-import { getVergeConfig } from "../services/cmds";
-import { getAxios } from "../services/api";
 import { routers } from "./_routers";
+import { getAxios } from "../services/api";
+import { getVergeConfig } from "../services/cmds";
 import LogoSvg from "../assets/image/logo.svg";
 import LayoutItem from "../components/layout/layout-item";
 import LayoutControl from "../components/layout/layout-control";
@@ -17,9 +15,10 @@ import UpdateButton from "../components/layout/update-button";
 
 const Layout = () => {
   const { mutate } = useSWRConfig();
-  const [mode, setMode] = useRecoilState(atomPaletteMode);
+  const { data } = useSWR("getVergeConfig", getVergeConfig);
-  const [blur, setBlur] = useRecoilState(atomThemeBlur);
+
-  const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+  const blur = !!data?.theme_blur;
+  const mode = data?.theme_mode ?? "light";
 
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
@@ -36,12 +35,6 @@ const Layout = () => {
     });
   }, []);
 
-  useEffect(() => {
-    if (!vergeConfig) return;
-    setBlur(!!vergeConfig.theme_blur);
-    setMode(vergeConfig.theme_mode ?? "light");
-  }, [vergeConfig]);
-
   const theme = useMemo(() => {
     // const background = mode === "light" ? "#f5f5f5" : "#000";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";

src/services/types.ts

@@ -112,6 +112,7 @@ export namespace CmdType {
   export interface VergeConfig {
     theme_mode?: "light" | "dark";
     theme_blur?: boolean;
+    traffic_graph?: boolean;
     enable_auto_launch?: boolean;
     enable_system_proxy?: boolean;
     system_proxy_bypass?: string;

src/states/setting.ts

@@ -1,15 +1,5 @@
 import { atom } from "recoil";
 
-export const atomPaletteMode = atom<"light" | "dark">({
-  key: "atomPaletteMode",
-  default: "light",
-});
-
-export const atomThemeBlur = atom<boolean>({
-  key: "atomThemeBlur",
-  default: false,
-});
-
 export const atomClashPort = atom<number>({
   key: "atomClashPort",
   default: 0,