From 36c6f0ca8da4693c5472104fec3ca3e443abff83 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 25 Jul 2025 17:57:33 +0800 Subject: [PATCH] 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 --- .../setting/mods/controller-viewer.tsx | 3 +- src/components/setting/mods/dns-viewer.tsx | 6 +- .../setting/mods/external-controller-cors.tsx | 76 +++---------------- src/components/setting/mods/hotkey-viewer.tsx | 66 ++-------------- .../setting/mods/network-interface-viewer.tsx | 1 + 5 files changed, 21 insertions(+), 131 deletions(-) diff --git a/src/components/setting/mods/controller-viewer.tsx b/src/components/setting/mods/controller-viewer.tsx index 3e493047..ced6e69f 100644 --- a/src/components/setting/mods/controller-viewer.tsx +++ b/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"; diff --git a/src/components/setting/mods/dns-viewer.tsx b/src/components/setting/mods/dns-viewer.tsx index 55c9270b..d7298e4f 100644 --- a/src/components/setting/mods/dns-viewer.tsx +++ b/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", - borderBottom: `1px solid ${theme.palette.divider}`, + padding: "5px 2px", "& textarea": { lineHeight: 1.5, fontSize: 14, diff --git a/src/components/setting/mods/external-controller-cors.tsx b/src/components/setting/mods/external-controller-cors.tsx index 05718012..3d9391e5 100644 --- a/src/components/setting/mods/external-controller-cors.tsx +++ b/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( {t("Allow private network access")} - - - handleCorsConfigChange( - "allowPrivateNetwork", - e.target.checked, - ) - } - id="private-network-toggle" - /> - - + + handleCorsConfigChange( + "allowPrivateNetwork", + e.target.checked, + ) + } + /> diff --git a/src/components/setting/mods/hotkey-viewer.tsx b/src/components/setting/mods/hotkey-viewer.tsx index 29ae13e3..d1603cbb 100644 --- a/src/components/setting/mods/hotkey-viewer.tsx +++ b/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((props, ref) => { > {t("Enable Global Hotkey")} - - setEnableHotkey(e.target.checked)} - id="global-hotkey-toggle" - /> - - + setEnableHotkey(e.target.checked)} + /> {HOTKEY_FUNC.map((func) => ( diff --git a/src/components/setting/mods/network-interface-viewer.tsx b/src/components/setting/mods/network-interface-viewer.tsx index 5ebce65e..772b93c7 100644 --- a/src/components/setting/mods/network-interface-viewer.tsx +++ b/src/components/setting/mods/network-interface-viewer.tsx @@ -50,6 +50,7 @@ export const NetworkInterfaceViewer = forwardRef((props, ref) => { contentSx={{ width: 450 }} disableOk cancelBtn={t("Close")} + onClose={() => setOpen(false)} onCancel={() => setOpen(false)} > {networkInterfaces.map((item) => (