feat: doc reference link on settings header

clash-verge-rev · May 14, 2024 · c3d22c5 · c3d22c5
1 parent e72f4a1
commit c3d22c5
Showing 1 changed file with 24 additions and 12 deletions.
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -1,15 +1,14 @@
-import { Box, Grid, IconButton, Paper } from "@mui/material";
+import { Box, ButtonGroup, Grid, IconButton } from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
-import { GitHub } from "@mui/icons-material";
+import { GitHub, HelpOutlineSharp } from "@mui/icons-material";
 import { openWebUrl } from "@/services/cmds";
 import SettingVerge from "@/components/setting/setting-verge";
 import SettingClash from "@/components/setting/setting-clash";
 import SettingSystem from "@/components/setting/setting-system";
 import { atomThemeMode } from "@/services/states";
 import { useRecoilState } from "recoil";
-import { useCustomTheme } from "@/components/layout/use-custom-theme";
 
 const SettingPage = () => {
   const { t } = useTranslation();
@@ -22,22 +21,35 @@ const SettingPage = () => {
     return openWebUrl("https://github.com/clash-verge-rev/clash-verge-rev");
   });
 
+  const toGithubDoc = useLockFn(() => {
+    return openWebUrl("https://clash-verge-rev.github.io/guide/log.html");
+  });
+
   const [mode] = useRecoilState(atomThemeMode);
   const isDark = mode === "light" ? false : true;
-  const { theme } = useCustomTheme();
 
   return (
     <BasePage
       title={t("Settings")}
       header={
-        <IconButton
-          size="medium"
-          color="inherit"
-          title="@clash-verge-rev/clash-verge-rev"
-          onClick={toGithubRepo}
-        >
-          <GitHub fontSize="inherit" />
-        </IconButton>
+        <ButtonGroup variant="contained" aria-label="Basic button group">
+          <IconButton
+            size="medium"
+            color="inherit"
+            title="@clash-verge-rev/clash-verge-rev.github.io"
+            onClick={toGithubDoc}
+          >
+            <HelpOutlineSharp fontSize="inherit" />
+          </IconButton>
+          <IconButton
+            size="medium"
+            color="inherit"
+            title="@clash-verge-rev/clash-verge-rev"
+            onClick={toGithubRepo}
+          >
+            <GitHub fontSize="inherit" />
+          </IconButton>
+        </ButtonGroup>
       }
     >
       <Grid container spacing={{ xs: 1.5, lg: 1.5 }}>