From 0c86b807ccd4ffc0782b74cd0297b5366074790a Mon Sep 17 00:00:00 2001 From: keiko233 Date: Wed, 28 Feb 2024 15:52:16 +0800 Subject: [PATCH] feat: add MDYSwitch & replace all Switches with MDYSwitch --- src/components/common/mdy-switch.tsx | 64 +++++++++++++++++++ src/components/profile/profile-viewer.tsx | 6 +- src/components/setting/mods/layout-viewer.tsx | 9 +-- src/components/setting/mods/misc-viewer.tsx | 8 +-- .../setting/mods/sysproxy-viewer.tsx | 4 +- src/components/setting/setting-clash.tsx | 6 +- src/components/setting/setting-system.tsx | 13 ++-- 7 files changed, 88 insertions(+), 22 deletions(-) create mode 100644 src/components/common/mdy-switch.tsx diff --git a/src/components/common/mdy-switch.tsx b/src/components/common/mdy-switch.tsx new file mode 100644 index 0000000000..27d91591c7 --- /dev/null +++ b/src/components/common/mdy-switch.tsx @@ -0,0 +1,64 @@ +import { styled } from "@mui/material/styles"; +import Switch, { SwitchProps } from "@mui/material/Switch"; + +const MDYSwitch = styled((props: SwitchProps) => )( + ({ theme, checked }) => ({ + height: "32px", + padding: 0, + margin: 0, + borderRadius: 24, + "& .MuiSwitch-track": { + borderRadius: 24, + opacity: checked + ? "1 !important" + : theme.palette.mode === "dark" + ? "0.3 !important" + : "0.7 !important", + backgroundColor: checked + ? theme.palette.primary.main + : theme.palette.mode === "dark" + ? theme.palette.grey.A700 + : theme.palette.grey.A200, + "&::before": { + content: '""', + border: `solid 2px ${theme.palette.grey.A700}`, + width: "100%", + height: "100%", + opacity: checked ? 0 : 1, + position: "absolute", + borderRadius: "inherit", + boxSizing: "border-box", + transitionProperty: "opacity, background-color", + transitionTimingFunction: "linear", + transitionDuration: "67ms", + }, + }, + "& .MuiSwitch-switchBase": { + padding: "6px 9px 6px 6px", + }, + "& .MuiSwitch-thumb": { + boxShadow: "none", + width: 16, + height: 16, + margin: 3, + color: checked + ? theme.palette.getContrastText(theme.palette.primary.main) + : theme.palette.mode === "dark" + ? theme.palette.grey.A200 + : theme.palette.grey.A700, + opacity: checked ? 1 : 0.7, + }, + "& .Mui-checked": { + "&.MuiSwitch-switchBase": { + padding: "6px 9px 6px 12px", + }, + "& .MuiSwitch-thumb": { + width: 24, + height: 24, + margin: -2, + }, + }, + }), +); + +export default MDYSwitch; diff --git a/src/components/profile/profile-viewer.tsx b/src/components/profile/profile-viewer.tsx index d6fef050d2..7e3f60f2f5 100644 --- a/src/components/profile/profile-viewer.tsx +++ b/src/components/profile/profile-viewer.tsx @@ -8,7 +8,6 @@ import { InputLabel, MenuItem, Select, - Switch, TextField, styled, } from "@mui/material"; @@ -24,6 +23,7 @@ import { import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import { FileInput } from "./file-input"; +import MDYSwitch from "../common/mdy-switch"; interface Props { onChange: () => void; @@ -259,7 +259,7 @@ export const ProfileViewer = forwardRef( render={({ field }) => ( {t("Use System Proxy")} - + )} /> @@ -270,7 +270,7 @@ export const ProfileViewer = forwardRef( render={({ field }) => ( {t("Use Clash Proxy")} - + )} /> diff --git a/src/components/setting/mods/layout-viewer.tsx b/src/components/setting/mods/layout-viewer.tsx index e7bc45e89a..b66430e45c 100644 --- a/src/components/setting/mods/layout-viewer.tsx +++ b/src/components/setting/mods/layout-viewer.tsx @@ -2,11 +2,12 @@ import { BaseDialog, DialogRef } from "@/components/base"; import { pageTransitionVariants } from "@/components/layout/page-transition"; import { NotificationType, useNotification } from "@/hooks/use-notification"; import { useVerge } from "@/hooks/use-verge"; -import { List, MenuItem, Select, Switch } from "@mui/material"; +import { List, MenuItem, Select } from "@mui/material"; import { forwardRef, useImperativeHandle, useState } from "react"; import { useTranslation } from "react-i18next"; import { GuardState } from "./guard-state"; import { SettingItem } from "./setting-comp"; +import MDYSwitch from "@/components/common/mdy-switch"; export const LayoutViewer = forwardRef((props, ref) => { const { t } = useTranslation(); @@ -51,7 +52,7 @@ export const LayoutViewer = forwardRef((props, ref) => { onChange={(e) => onChangeData({ theme_blur: e })} onGuard={(e) => patchVerge({ theme_blur: e })} > - + @@ -64,7 +65,7 @@ export const LayoutViewer = forwardRef((props, ref) => { onChange={(e) => onChangeData({ traffic_graph: e })} onGuard={(e) => patchVerge({ traffic_graph: e })} > - + @@ -77,7 +78,7 @@ export const LayoutViewer = forwardRef((props, ref) => { onChange={(e) => onChangeData({ enable_memory_usage: e })} onGuard={(e) => patchVerge({ enable_memory_usage: e })} > - + {/* TODO: 将 select 单独开一个 Modal 以符合 Material Design 的设计 */} diff --git a/src/components/setting/mods/misc-viewer.tsx b/src/components/setting/mods/misc-viewer.tsx index 5d1a3c679a..9a18d9c043 100644 --- a/src/components/setting/mods/misc-viewer.tsx +++ b/src/components/setting/mods/misc-viewer.tsx @@ -1,4 +1,5 @@ import { BaseDialog, DialogRef } from "@/components/base"; +import MDYSwitch from "@/components/common/mdy-switch"; import { NotificationType, useNotification } from "@/hooks/use-notification"; import { useVerge } from "@/hooks/use-verge"; import { @@ -7,7 +8,6 @@ import { ListItemText, MenuItem, Select, - Switch, TextField, } from "@mui/material"; import { useLockFn } from "ahooks"; @@ -98,7 +98,7 @@ export const MiscViewer = forwardRef((props, ref) => { - @@ -109,7 +109,7 @@ export const MiscViewer = forwardRef((props, ref) => { - @@ -120,7 +120,7 @@ export const MiscViewer = forwardRef((props, ref) => { - diff --git a/src/components/setting/mods/sysproxy-viewer.tsx b/src/components/setting/mods/sysproxy-viewer.tsx index fc22229644..fa5a092b7d 100644 --- a/src/components/setting/mods/sysproxy-viewer.tsx +++ b/src/components/setting/mods/sysproxy-viewer.tsx @@ -1,4 +1,5 @@ import { BaseDialog, DialogRef } from "@/components/base"; +import MDYSwitch from "@/components/common/mdy-switch"; import { NotificationType, useNotification } from "@/hooks/use-notification"; import { useVerge } from "@/hooks/use-verge"; import { getSystemProxy } from "@/services/cmds"; @@ -8,7 +9,6 @@ import { List, ListItem, ListItemText, - Switch, TextField, Typography, styled, @@ -101,7 +101,7 @@ export const SysproxyViewer = forwardRef((props, ref) => { - { onChange={(e) => onChangeData({ "allow-lan": e })} onGuard={(e) => patchClash({ "allow-lan": e })} > - + @@ -84,7 +84,7 @@ const SettingClash = ({ onError }: Props) => { onChange={(e) => onChangeData({ ipv6: e })} onGuard={(e) => patchClash({ ipv6: e })} > - + diff --git a/src/components/setting/setting-system.tsx b/src/components/setting/setting-system.tsx index d2535f97b5..4897fe50cf 100644 --- a/src/components/setting/setting-system.tsx +++ b/src/components/setting/setting-system.tsx @@ -1,7 +1,7 @@ import useSWR from "swr"; import { useRef } from "react"; import { useTranslation } from "react-i18next"; -import { IconButton, Switch } from "@mui/material"; +import { IconButton } from "@mui/material"; import { ArrowForward, PrivacyTipRounded, Settings } from "@mui/icons-material"; import { checkService } from "@/services/cmds"; import { useVerge } from "@/hooks/use-verge"; @@ -11,6 +11,7 @@ import { GuardState } from "./mods/guard-state"; import { ServiceViewer } from "./mods/service-viewer"; import { SysproxyViewer } from "./mods/sysproxy-viewer"; import getSystem from "@/utils/get-system"; +import MDYSwitch from "../common/mdy-switch"; interface Props { onError?: (err: Error) => void; @@ -66,7 +67,7 @@ const SettingSystem = ({ onError }: Props) => { onChange={(e) => onChangeData({ enable_tun_mode: e })} onGuard={(e) => patchVerge({ enable_tun_mode: e })} > - + @@ -94,7 +95,7 @@ const SettingSystem = ({ onError }: Props) => { onChange={(e) => onChangeData({ enable_service_mode: e })} onGuard={(e) => patchVerge({ enable_service_mode: e })} > - { onChange={(e) => onChangeData({ enable_system_proxy: e })} onGuard={(e) => patchVerge({ enable_system_proxy: e })} > - + @@ -140,7 +141,7 @@ const SettingSystem = ({ onError }: Props) => { onChange={(e) => onChangeData({ enable_auto_launch: e })} onGuard={(e) => patchVerge({ enable_auto_launch: e })} > - + @@ -153,7 +154,7 @@ const SettingSystem = ({ onError }: Props) => { onChange={(e) => onChangeData({ enable_silent_start: e })} onGuard={(e) => patchVerge({ enable_silent_start: e })} > - +