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,39 +112,26 @@ 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
               variant="subtitle1"
               sx={{ fontWeight: 500, fontSize: "15px" }}
             >
               {t("System Proxy")}
             </Typography>
-            </Box>
+            <TooltipIcon
-          </Box>
+              title={t("System Proxy Info")}
-
+              icon={SettingsRounded}
-          <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()}
-              >
+              sx={{ ml: 1 }}
-                <SettingsRounded fontSize="small" />
+            />
           </Box>
-            </Tooltip>
 
           <GuardState
             value={systemProxyActualState}
@@ -175,7 +143,6 @@ const ProxyControlSwitches = ({
             <Switch edge="end" />
           </GuardState>
         </Box>
-        </Box>
       )}
 
       {isTunMode && (
@@ -196,75 +163,54 @@ 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
               variant="subtitle1"
               sx={{ fontWeight: 500, fontSize: "15px" }}
             >
               {t("Tun Mode")}
             </Typography>
-            </Box>
+            <TooltipIcon
+              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"
-                  size="small"
                 onClick={onInstallService}
-                  sx={{ mr: 1, minWidth: "32px", p: "4px" }}
+                sx={{ ml: 1 }}
-                >
+              />
-                  <BuildRounded fontSize="small" />
-                </Button>
-              </Tooltip>
             )}
 
             {isServiceMode && (
-              <Tooltip title={t("Uninstall Service")} arrow>
+              <TooltipIcon
-                <Button
+                title={t("Uninstall Service")}
+                icon={DeleteForeverRounded}
                 color="secondary"
-                  size="small"
                 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}
@@ -299,7 +245,6 @@ const ProxyControlSwitches = ({
             <Switch edge="end" disabled={!isTunAvailable} />
           </GuardState>
         </Box>
-        </Box>
       )}
 
       {/* 引用对话框组件 */}