feat: unify switch component styles and BaseDialog behavior in the UI (#4183)

* feat: unify switch component styles in the UI

* fix: prettier

* feat: unify Item styles

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

@@ -1,4 +1,4 @@
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { showNotice } from "@/services/noticeService";
@@ -12,7 +12,6 @@ import {
   ListItem,
   ListItemText,
   Snackbar,
-  Switch,
   TextField,
   Tooltip,
 } from "@mui/material";

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

@@ -11,13 +11,12 @@ import {
   MenuItem,
   Select,
   styled,
-  Switch,
   TextField,
   Typography,
 } from "@mui/material";
 import { RestartAltRounded } from "@mui/icons-material";
 import { useClash } from "@/hooks/use-clash";
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import yaml from "js-yaml";
 import MonacoEditor from "react-monaco-editor";
 import { useThemeMode } from "@/services/states";
@@ -26,8 +25,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { showNotice } from "@/services/noticeService";
 
 const Item = styled(ListItem)(({ theme }) => ({
-  padding: "8px 0",
+  padding: "5px 2px",
-  borderBottom: `1px solid ${theme.palette.divider}`,
   "& textarea": {
     lineHeight: 1.5,
     fontSize: 14,

src/components/setting/mods/external-controller-cors.tsx

@@ -1,4 +1,4 @@
-import { BaseDialog } from "@/components/base";
+import { BaseDialog, Switch } from "@/components/base";
 import { useClash } from "@/hooks/use-clash";
 import { showNotice } from "@/services/noticeService";
 import { Delete as DeleteIcon } from "@mui/icons-material";
@@ -15,56 +15,6 @@ import { useLockFn, useRequest } from "ahooks";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-// 自定义开关按钮样式
-const ToggleButton = styled("label")`
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #e0e0e0;
-    transition: 0.4s;
-    border-radius: 34px;
-
-    &:before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      left: 4px;
-      bottom: 4px;
-      background-color: white;
-      transition: 0.4s;
-      border-radius: 50%;
-    }
-  }
-
-  input:checked + .slider {
-    background-color: #2196f3;
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(24px);
-  }
-`;
-
 // 定义开发环境的URL列表
 // 这些URL在开发模式下会被自动包含在允许的来源中
 // 在生产环境中，这些URL会被过滤掉
@@ -264,20 +214,16 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
               <span style={{ fontWeight: "normal" }}>
                 {t("Allow private network access")}
               </span>
-              <ToggleButton>
+              <Switch
-                <input
+                edge="end"
-                  type="checkbox"
+                checked={corsConfig.allowPrivateNetwork}
-                  checked={corsConfig.allowPrivateNetwork}
+                onChange={(e) =>
-                  onChange={(e) =>
+                  handleCorsConfigChange(
-                    handleCorsConfigChange(
+                    "allowPrivateNetwork",
-                      "allowPrivateNetwork",
+                    e.target.checked,
-                      e.target.checked,
+                  )
-                    )
+                }
-                  }
+              />
-                  id="private-network-toggle"
-                />
-                <span className="slider"></span>
-              </ToggleButton>
             </Box>
           </ListItem>
 

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

@@ -3,60 +3,10 @@ import { useTranslation } from "react-i18next";
 import { useLockFn } from "ahooks";
 import { styled, Typography } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
-import { BaseDialog, DialogRef } from "@/components/base";
+import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { HotkeyInput } from "./hotkey-input";
 import { showNotice } from "@/services/noticeService";
 
-// 修复后的自定义开关组件
-const ToggleButton = styled("label")`
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #e0e0e0;
-    transition: 0.4s;
-    border-radius: 34px;
-
-    &:before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      left: 4px;
-      bottom: 4px;
-      background-color: white;
-      transition: 0.4s;
-      border-radius: 50%;
-    }
-  }
-
-  input:checked + .slider {
-    background-color: #2196f3;
-  }
-
-  input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(24px);
-  }
-`;
-
 const ItemWrapper = styled("div")`
   display: flex;
   align-items: center;
@@ -147,15 +97,11 @@ export const HotkeyViewer = forwardRef<DialogRef>((props, ref) => {
     >
       <ItemWrapper style={{ marginBottom: 16 }}>
         <Typography>{t("Enable Global Hotkey")}</Typography>
-        <ToggleButton>
+        <Switch
-          <input
+          edge="end"
-            type="checkbox"
+          checked={enableGlobalHotkey}
-            checked={enableGlobalHotkey}
+          onChange={(e) => setEnableHotkey(e.target.checked)}
-            onChange={(e) => setEnableHotkey(e.target.checked)}
+        />
-            id="global-hotkey-toggle"
-          />
-          <span className="slider"></span>
-        </ToggleButton>
       </ItemWrapper>
 
       {HOTKEY_FUNC.map((func) => (

src/components/setting/mods/network-interface-viewer.tsx

@@ -50,6 +50,7 @@ export const NetworkInterfaceViewer = forwardRef<DialogRef>((props, ref) => {
       contentSx={{ width: 450 }}
       disableOk
       cancelBtn={t("Close")}
+      onClose={() => setOpen(false)}
       onCancel={() => setOpen(false)}
     >
       {networkInterfaces.map((item) => (