diff --git a/src-tauri/src/core/verge.rs b/src-tauri/src/core/verge.rs
index 1bb0b9d24b8b6e4b281faab0b7195766abfa2581..b3ed0d9f878242050ea39396a8e0636f052c132f 100644
--- a/src-tauri/src/core/verge.rs
+++ b/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() {
diff --git a/src-tauri/src/utils/tmpl.rs b/src-tauri/src/utils/tmpl.rs
index 8759c249e8520b0ebccac6fb8662c6bf59985904..c04c1c0af12040d543aa2b3d2845a5625bf75c2e 100644
--- a/src-tauri/src/utils/tmpl.rs
+++ b/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>
diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index 8e16f35d7d56866a2240f67f09377c529bccb650..e7a7efb74c3db2826337bae45645015446bed220 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/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
- ref={canvasRef}
- style={{ width: "100%", height: 60, marginBottom: 6 }}
- />
+ {trafficGraph && (
+ <canvas
+ ref={canvasRef}
+ style={{ width: "100%", height: 60, marginBottom: 6 }}
+ />
+ )}
<Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
<ArrowUpward
diff --git a/src/components/layout/use-traffic-graph.ts b/src/components/layout/use-traffic-graph.ts
index 187851d9f0838f187ebb06e6d02a1a9d8dac37b3..ad897835ac1ed5c44aaff82b4fe9350071e49677 100644
--- a/src/components/layout/use-traffic-graph.ts
+++ b/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;
diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx
index fab9847f62b14ac06975b0074853238f9d9ebb82..d71d55b365f4eec92b5388d8b6db721c962ade08 100644
--- a/src/components/setting/setting-verge.tsx
+++ b/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" />
- <IconButton
- color="inherit"
- size="small"
- onClick={() => {
- console.log("click");
- openAppDir().then(console.log).catch(console.log);
- }}
+ <ListItemText primary="Traffic Graph" />
+ <GuardState
+ value={traffic_graph ?? true}
+ valueProps="checked"
+ onCatch={onError}
+ onFormat={onSwitchFormat}
+ 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>
diff --git a/src/pages/_layout.tsx b/src/pages/_layout.tsx
index 4970de5f3857ae07668c2946b298082d0dc2a246..777ab54083bbb29a47fa76fae5c9294d8f81127d 100644
--- a/src/pages/_layout.tsx
+++ b/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 [blur, setBlur] = useRecoilState(atomThemeBlur);
- const { data: vergeConfig } = useSWR("getVergeConfig", getVergeConfig);
+ const { data } = 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";
diff --git a/src/services/types.ts b/src/services/types.ts
index 2216cd7eaab70483d7b10818c3efaea92d4c0b77..10d9381080188af00c2b0091b8116ab360d4638e 100644
--- a/src/services/types.ts
+++ b/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;
diff --git a/src/states/setting.ts b/src/states/setting.ts
index 65095e54165b2090c7afa8405b4a720998d358d8..a135de0c7af57322c508c41ce304a0ab875c5ecd 100644
--- a/src/states/setting.ts
+++ b/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,