refactor: extract tooltip icon as component

src/components/base/base-tooltip-icon.tsx

@@ -0,0 +1,24 @@
+import {
+  Tooltip,
+  IconButton,
+  IconButtonProps,
+  SvgIconProps,
+} from "@mui/material";
+import { InfoRounded } from "@mui/icons-material";
+
+interface Props extends IconButtonProps {
+  title?: string;
+  icon?: React.ElementType<SvgIconProps>;
+}
+
+export const TooltipIcon: React.FC<Props> = (props: Props) => {
+  const { title = "", icon: Icon = InfoRounded } = props;
+
+  return (
+    <Tooltip title={title} placement="top">
+      <IconButton color="inherit" size="small" {...props}>
+        <Icon fontSize="inherit" style={{ cursor: "pointer", opacity: 0.75 }} />
+      </IconButton>
+    </Tooltip>
+  );
+};

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

@@ -20,6 +20,7 @@ import { Edit } from "@mui/icons-material";
 import { EditorViewer } from "@/components/profile/editor-viewer";
 import { BaseFieldset } from "@/components/base/base-fieldset";
 import getSystem from "@/utils/get-system";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 const DEFAULT_PAC = `function FindProxyForURL(url, host) {
   return "PROXY 127.0.0.1:%mixed-port%; SOCKS5 127.0.0.1:%mixed-port%; DIRECT;";
 }`;
@@ -170,14 +171,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Proxy Guard")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <Tooltip title={t("Proxy Guard Info")}>
+          <TooltipIcon title={t("Proxy Guard Info")} />
-            <IconButton color="inherit" size="small">
-              <InfoRounded
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </Tooltip>
           <Switch
             edge="end"
             disabled={!enabled}

src/components/setting/setting-clash.tsx

@@ -1,16 +1,14 @@
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLockFn } from "ahooks";
 import {
   TextField,
   Select,
   MenuItem,
   Typography,
   IconButton,
-  Tooltip,
 } from "@mui/material";
 
-import { InfoRounded, Settings, Shuffle } from "@mui/icons-material";
+import { Settings, Shuffle } from "@mui/icons-material";
 import { DialogRef, Notice, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { GuardState } from "./mods/guard-state";
@@ -23,6 +21,7 @@ import { invoke_uwp_tool } from "@/services/cmds";
 import getSystem from "@/utils/get-system";
 import { useVerge } from "@/hooks/use-verge";
 import { updateGeoData } from "@/services/api";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 
 const isWIN = getSystem() === "windows";
 
@@ -116,25 +115,19 @@ const SettingClash = ({ onError }: Props) => {
       <SettingItem
         label={t("Port Config")}
         extra={
-          <Tooltip title={t("Random Port")}>
+          <TooltipIcon
-            <IconButton
+            title={t("Random Port")}
-              color={enable_random_port ? "primary" : "inherit"}
+            color={enable_random_port ? "primary" : "inherit"}
-              size="small"
+            icon={Shuffle}
-              onClick={() => {
+            onClick={() => {
-                Notice.success(
+              Notice.success(
-                  t("Restart Application to Apply Modifications"),
+                t("Restart Application to Apply Modifications"),
-                  1000
+                1000
-                );
+              );
-                onChangeVerge({ enable_random_port: !enable_random_port });
+              onChangeVerge({ enable_random_port: !enable_random_port });
-                patchVerge({ enable_random_port: !enable_random_port });
+              patchVerge({ enable_random_port: !enable_random_port });
-              }}
+            }}
-            >
+          />
-              <Shuffle
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </Tooltip>
         }
       >
         <TextField
@@ -160,16 +153,10 @@ const SettingClash = ({ onError }: Props) => {
       <SettingItem
         label={t("Clash Core")}
         extra={
-          <IconButton
+          <TooltipIcon
-            color="inherit"
+            icon={Settings}
-            size="small"
             onClick={() => coreRef.current?.open()}
-          >
+          />
-            <Settings
-              fontSize="inherit"
-              style={{ cursor: "pointer", opacity: 0.75 }}
-            />
-          </IconButton>
         }
       >
         <Typography sx={{ py: "7px", pr: 1 }}>{version}</Typography>
@@ -179,18 +166,7 @@ const SettingClash = ({ onError }: Props) => {
         <SettingItem
           onClick={invoke_uwp_tool}
           label={t("Open UWP tool")}
-          extra={
+          extra={<TooltipIcon title={t("Open UWP tool Info")} />}
-            <>
-              <Tooltip title={t("Open UWP tool Info")} placement="top">
-                <IconButton color="inherit" size="small">
-                  <InfoRounded
-                    fontSize="inherit"
-                    style={{ cursor: "pointer", opacity: 0.75 }}
-                  />
-                </IconButton>
-              </Tooltip>
-            </>
-          }
         />
       )}
 

src/components/setting/setting-system.tsx

@@ -1,8 +1,7 @@
 import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton, Tooltip } from "@mui/material";
+import { PrivacyTipRounded, Settings } from "@mui/icons-material";
-import { PrivacyTipRounded, Settings, InfoRounded } from "@mui/icons-material";
 import { checkService } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
 import { DialogRef, Switch } from "@/components/base";
@@ -11,6 +10,7 @@ import { GuardState } from "./mods/guard-state";
 import { ServiceViewer } from "./mods/service-viewer";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import { TunViewer } from "./mods/tun-viewer";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -54,26 +54,11 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("Tun Mode")}
         extra={
-          <>
+          <TooltipIcon
-            <Tooltip title={t("Tun Mode Info")} placement="top">
+            title={t("Tun Mode Info")}
-              <IconButton color="inherit" size="small">
+            icon={Settings}
-                <InfoRounded
+            onClick={() => tunRef.current?.open()}
-                  fontSize="inherit"
+          />
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-            <IconButton
-              color="inherit"
-              size="small"
-              onClick={() => tunRef.current?.open()}
-            >
-              <Settings
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
-          </>
         }
       >
         <GuardState
@@ -91,16 +76,11 @@ const SettingSystem = ({ onError }: Props) => {
       <SettingItem
         label={t("Service Mode")}
         extra={
-          <IconButton
+          <TooltipIcon
-            color="inherit"
+            title={t("Service Mode Info")}
-            size="small"
+            icon={PrivacyTipRounded}
             onClick={() => serviceRef.current?.open()}
-          >
+          />
-            <PrivacyTipRounded
-              fontSize="inherit"
-              style={{ cursor: "pointer", opacity: 0.75 }}
-            />
-          </IconButton>
         }
       >
         <GuardState
@@ -124,24 +104,11 @@ const SettingSystem = ({ onError }: Props) => {
         label={t("System Proxy")}
         extra={
           <>
-            <Tooltip title={t("System Proxy Info")} placement="top">
+            <TooltipIcon
-              <IconButton color="inherit" size="small">
+              title={t("System Proxy Info")}
-                <InfoRounded
+              icon={Settings}
-                  fontSize="inherit"
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-            <IconButton
-              color="inherit"
-              size="small"
               onClick={() => sysproxyRef.current?.open()}
-            >
+            />
-              <Settings
-                fontSize="inherit"
-                style={{ cursor: "pointer", opacity: 0.75 }}
-              />
-            </IconButton>
           </>
         }
       >
@@ -172,18 +139,7 @@ const SettingSystem = ({ onError }: Props) => {
 
       <SettingItem
         label={t("Silent Start")}
-        extra={
+        extra={<TooltipIcon title={t("Silent Start Info")} />}
-          <>
-            <Tooltip title={t("Silent Start Info")} placement="top">
-              <IconButton color="inherit" size="small">
-                <InfoRounded
-                  fontSize="inherit"
-                  style={{ cursor: "pointer", opacity: 0.75 }}
-                />
-              </IconButton>
-            </Tooltip>
-          </>
-        }
       >
         <GuardState
           value={enable_silent_start ?? false}

src/locales/en.json

@@ -122,6 +122,7 @@
   "DNS Hijack": "DNS Hijack",
   "MTU": "Max Transmission Unit",
   "Service Mode": "Service Mode",
+  "Service Mode Info": "The core launched by the service can obtain corresponding permissions after installation and authorization of the service",
   "Current State": "Current State",
   "pending": "pending",
   "installed": "installed",

src/locales/fa.json

@@ -122,6 +122,7 @@
   "DNS Hijack": "ربایش DNS",
   "MTU": "واحد حداکثر انتقال",
   "Service Mode": "حالت سرویس",
+  "Service Mode Info": "هسته راه اندازی شده توسط سرویس می تواند مجوزهای مربوطه را پس از نصب و مجوز سرویس دریافت کند",
   "Current State": "وضعیت فعلی",
   "pending": "در انتظار",
   "installed": "نصب شده",

src/locales/ru.json

@@ -122,6 +122,7 @@
   "DNS Hijack": "DNS-перехват",
   "MTU": "Максимальная единица передачи",
   "Service Mode": "Режим сервиса",
+  "Service Mode Info": "Ядро, запущенное сервисом, может получить соответствующие разрешения после установки и авторизации сервиса",
   "Current State": "Текущее состояние",
   "pending": "Ожидающий",
   "installed": "Установленный",

src/locales/zh.json

@@ -122,6 +122,7 @@
   "DNS Hijack": "DNS 劫持",
   "MTU": "最大传输单元",
   "Service Mode": "服务模式",
+  "Service Mode Info": "安装并授权服务后，由该服务启动的内核进程可获得相关权限",
   "Current State": "当前状态",
   "pending": "等待中",
   "installed": "已安装",
@@ -133,7 +134,7 @@
   "Uninstall": "卸载",
   "Disable Service Mode": "禁用服务模式",
   "System Proxy": "系统代理",
-  "System Proxy Info": "打开此开关修改操作系统的代理设置，如果开启失败，可手动修改操作系统的代理设置",
+  "System Proxy Info": "修改操作系统的代理设置，如果开启失败，可手动修改操作系统的代理设置",
   "System Proxy Setting": "系统代理设置",
   "Current System Proxy": "当前系统代理",
   "Enable status": "开启状态：",