style: simplify and improve proxy settings UI

UPDATELOG.md

@@ -1,6 +1,19 @@
 ## v2.4.2
 
-To be done
+### ✨ 新增功能
+
+- 增加托盘节点选择
+
+### 🐞 修复问题
+
+- 修复首页节点切换失效的问题
+- 修复和优化服务检查流程
+- 修复2.4.1引入的订阅地址重定向报错问题
+- 修复 rpm/deb 包名称问题
+
+### 👙 界面样式
+
+- 简化和改进代理设置样式
 
 ## v2.4.1
 

src/components/shared/ProxyControlSwitches.tsx

@@ -8,15 +8,9 @@ import {
   DeleteForeverRounded,
   WarningRounded,
 } from "@mui/icons-material";
-import {
+import { Box, Typography, alpha, useTheme } from "@mui/material";
-  Box,
-  Button,
-  Tooltip,
-  Typography,
-  alpha,
-  useTheme,
-} from "@mui/material";
 import { DialogRef, Switch } from "@/components/base";
+import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { GuardState } from "@/components/setting/mods/guard-state";
 import { SysproxyViewer } from "@/components/setting/mods/sysproxy-viewer";
 import { TunViewer } from "@/components/setting/mods/tun-viewer";
@@ -100,19 +94,6 @@ const ProxyControlSwitches = ({
 
   return (
     <Box sx={{ width: "100%" }}>
-      {label && (
-        <Box
-          sx={{
-            fontSize: "15px",
-            fontWeight: "500",
-            mb: 0.5,
-            display: "none",
-          }}
-        >
-          {label}
-        </Box>
-      )}
-
       {/* 仅显示当前选中的开关 */}
       {isSystemProxyMode && (
         <Box
@@ -131,50 +112,36 @@ const ProxyControlSwitches = ({
         >
           <Box sx={{ display: "flex", alignItems: "center" }}>
             {systemProxyActualState ? (
-              <PlayCircleOutlineRounded
+              <PlayCircleOutlineRounded sx={{ color: "success.main", mr: 1 }} />
-                sx={{ color: "success.main", mr: 1.5, fontSize: 28 }}
-              />
             ) : (
               <PauseCircleOutlineRounded
-                sx={{ color: "text.disabled", mr: 1.5, fontSize: 28 }}
+                sx={{ color: "text.disabled", mr: 1 }}
               />
             )}
 
-            <Box>
+            <Typography
-              <Typography
+              variant="subtitle1"
-                variant="subtitle1"
+              sx={{ fontWeight: 500, fontSize: "15px" }}
-                sx={{ fontWeight: 500, fontSize: "15px" }}
-              >
-                {t("System Proxy")}
-              </Typography>
-            </Box>
-          </Box>
-
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Tooltip title={t("System Proxy Info")} arrow>
-              <Box
-                sx={{
-                  mr: 1,
-                  color: "text.secondary",
-                  "&:hover": { color: "primary.main" },
-                  cursor: "pointer",
-                }}
-                onClick={() => sysproxyRef.current?.open()}
-              >
-                <SettingsRounded fontSize="small" />
-              </Box>
-            </Tooltip>
-
-            <GuardState
-              value={systemProxyActualState}
-              valueProps="checked"
-              onCatch={onError}
-              onFormat={onSwitchFormat}
-              onGuard={(e) => toggleSystemProxy(e)}
             >
-              <Switch edge="end" />
+              {t("System Proxy")}
-            </GuardState>
+            </Typography>
+            <TooltipIcon
+              title={t("System Proxy Info")}
+              icon={SettingsRounded}
+              onClick={() => sysproxyRef.current?.open()}
+              sx={{ ml: 1 }}
+            />
           </Box>
+
+          <GuardState
+            value={systemProxyActualState}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onGuard={(e) => toggleSystemProxy(e)}
+          >
+            <Switch edge="end" />
+          </GuardState>
         </Box>
       )}
 
@@ -196,109 +163,87 @@ const ProxyControlSwitches = ({
         >
           <Box sx={{ display: "flex", alignItems: "center" }}>
             {enable_tun_mode ? (
-              <PlayCircleOutlineRounded
+              <PlayCircleOutlineRounded sx={{ color: "success.main", mr: 1 }} />
-                sx={{ color: "success.main", mr: 1.5, fontSize: 28 }}
-              />
             ) : (
               <PauseCircleOutlineRounded
-                sx={{ color: "text.disabled", mr: 1.5, fontSize: 28 }}
+                sx={{ color: "text.disabled", mr: 1 }}
               />
             )}
 
-            <Box>
+            <Typography
-              <Typography
+              variant="subtitle1"
-                variant="subtitle1"
+              sx={{ fontWeight: 500, fontSize: "15px" }}
-                sx={{ fontWeight: 500, fontSize: "15px" }}
+            >
-              >
+              {t("Tun Mode")}
-                {t("Tun Mode")}
+            </Typography>
-              </Typography>
+            <TooltipIcon
-            </Box>
+              title={t("Tun Mode Info")}
+              icon={SettingsRounded}
+              onClick={() => tunRef.current?.open()}
+              sx={{ ml: 1 }}
+            />
 
             {!isTunAvailable && (
-              <Tooltip
+              <TooltipIcon
                 title={t("TUN requires Service Mode or Admin Mode")}
-                arrow
+                icon={WarningRounded}
-              >
+                sx={{ color: "warning.main", ml: 1 }}
-                <WarningRounded sx={{ color: "warning.main", ml: 1 }} />
+              />
-              </Tooltip>
             )}
-          </Box>
 
-          <Box sx={{ display: "flex", alignItems: "center" }}>
             {!isTunAvailable && (
-              <Tooltip title={t("Install Service")} arrow>
+              <TooltipIcon
-                <Button
+                title={t("Install Service")}
-                  variant="outlined"
+                icon={BuildRounded}
-                  color="primary"
+                color="primary"
-                  size="small"
+                onClick={onInstallService}
-                  onClick={onInstallService}
+                sx={{ ml: 1 }}
-                  sx={{ mr: 1, minWidth: "32px", p: "4px" }}
+              />
-                >
-                  <BuildRounded fontSize="small" />
-                </Button>
-              </Tooltip>
             )}
 
             {isServiceMode && (
-              <Tooltip title={t("Uninstall Service")} arrow>
+              <TooltipIcon
-                <Button
+                title={t("Uninstall Service")}
-                  color="secondary"
+                icon={DeleteForeverRounded}
-                  size="small"
+                color="secondary"
-                  onClick={onUninstallService}
+                onClick={onUninstallService}
-                  sx={{ mr: 1, minWidth: "32px", p: "4px" }}
+                sx={{ ml: 1 }}
-                >
+              />
-                  <DeleteForeverRounded fontSize="small" />
-                </Button>
-              </Tooltip>
             )}
-
-            <Tooltip title={t("Tun Mode Info")} arrow>
-              <Box
-                sx={{
-                  mr: 1,
-                  color: "text.secondary",
-                  "&:hover": { color: "primary.main" },
-                  cursor: "pointer",
-                }}
-                onClick={() => tunRef.current?.open()}
-              >
-                <SettingsRounded fontSize="small" />
-              </Box>
-            </Tooltip>
-
-            <GuardState
-              value={enable_tun_mode ?? false}
-              valueProps="checked"
-              onCatch={onError}
-              onFormat={onSwitchFormat}
-              onChange={(e) => {
-                if (!isTunAvailable) {
-                  showNotice(
-                    "error",
-                    t("TUN requires Service Mode or Admin Mode"),
-                  );
-                  return Promise.reject(
-                    new Error(t("TUN requires Service Mode or Admin Mode")),
-                  );
-                }
-                onChangeData({ enable_tun_mode: e });
-              }}
-              onGuard={(e) => {
-                if (!isTunAvailable) {
-                  showNotice(
-                    "error",
-                    t("TUN requires Service Mode or Admin Mode"),
-                  );
-                  return Promise.reject(
-                    new Error(t("TUN requires Service Mode or Admin Mode")),
-                  );
-                }
-                return patchVerge({ enable_tun_mode: e });
-              }}
-            >
-              <Switch edge="end" disabled={!isTunAvailable} />
-            </GuardState>
           </Box>
+
+          <GuardState
+            value={enable_tun_mode ?? false}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={(e) => {
+              if (!isTunAvailable) {
+                showNotice(
+                  "error",
+                  t("TUN requires Service Mode or Admin Mode"),
+                );
+                return Promise.reject(
+                  new Error(t("TUN requires Service Mode or Admin Mode")),
+                );
+              }
+              onChangeData({ enable_tun_mode: e });
+            }}
+            onGuard={(e) => {
+              if (!isTunAvailable) {
+                showNotice(
+                  "error",
+                  t("TUN requires Service Mode or Admin Mode"),
+                );
+                return Promise.reject(
+                  new Error(t("TUN requires Service Mode or Admin Mode")),
+                );
+              }
+              return patchVerge({ enable_tun_mode: e });
+            }}
+          >
+            <Switch edge="end" disabled={!isTunAvailable} />
+          </GuardState>
         </Box>
       )}