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/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>
-                <input
-                  type="checkbox"
-                  checked={corsConfig.allowPrivateNetwork}
-                  onChange={(e) =>
-                    handleCorsConfigChange(
-                      "allowPrivateNetwork",
-                      e.target.checked,
-                    )
-                  }
-                  id="private-network-toggle"
-                />
-                <span className="slider"></span>
-              </ToggleButton>
+              <Switch
+                edge="end"
+                checked={corsConfig.allowPrivateNetwork}
+                onChange={(e) =>
+                  handleCorsConfigChange(
+                    "allowPrivateNetwork",
+                    e.target.checked,
+                  )
+                }
+              />
             </Box>
           </ListItem>