refactor border switch

src/renderer/src/components/base/border-swtich.tsx

@@ -5,8 +5,8 @@ interface SiderSwitchProps extends SwitchProps {
   isShowBorder?: boolean
 }
 
-const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
-  const { isShowBorder = false, isSelected, classNames, ...switchProps } = props
+const BorderSwitch: React.FC<SiderSwitchProps> = (props) => {
+  const { isShowBorder = false, classNames, ...switchProps } = props
 
   return (
     <Switch
@@ -14,7 +14,7 @@ const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
         wrapper: cn('border-2', {
           'border-transparent': !isShowBorder
         }),
-        thumb: cn('absolute z-4', { 'transform -translate-x-[2px]': isSelected }),
+        thumb: cn('absolute z-4', 'transform -translate-x-[2px]'),
         ...classNames
       }}
       size="sm"
@@ -23,4 +23,4 @@ const SiderSwitch: React.FC<SiderSwitchProps> = (props) => {
   )
 }
 
-export default SiderSwitch
+export default BorderSwitch

src/renderer/src/components/sider/index.ts

@@ -1 +0,0 @@
-export { default as SiderSwitch } from './sider-swtich'

src/renderer/src/components/sider/override-card.tsx

@@ -1,8 +1,8 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import React, { useState } from 'react'
 import { MdFormatOverline } from 'react-icons/md'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { SiderSwitch } from './index'
 
 const OverrideCard: React.FC = () => {
   const navigate = useNavigate()
@@ -26,7 +26,7 @@ const OverrideCard: React.FC = () => {
           >
             <MdFormatOverline color="default" className="text-[24px]" />
           </Button>
-          <SiderSwitch
+          <BorderSwitch
             isShowBorder={match && enable}
             isSelected={enable}
             onValueChange={setEnable}

src/renderer/src/components/sider/sysproxy-switcher.tsx

@@ -1,10 +1,10 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useAppConfig } from '@renderer/hooks/use-config'
+import { triggerSysProxy } from '@renderer/utils/ipc'
 import { AiOutlineGlobal } from 'react-icons/ai'
 import React from 'react'
-import { triggerSysProxy } from '@renderer/utils/ipc'
-import { SiderSwitch } from './index'
 
 const SysproxySwitcher: React.FC = () => {
   const navigate = useNavigate()
@@ -35,7 +35,7 @@ const SysproxySwitcher: React.FC = () => {
           >
             <AiOutlineGlobal color="default" className="text-[24px]" />
           </Button>
-          <SiderSwitch
+          <BorderSwitch
             isShowBorder={match && enable}
             isSelected={enable}
             onValueChange={onChange}

src/renderer/src/components/sider/tun-switcher.tsx

@@ -1,10 +1,10 @@
 import { Button, Card, CardBody, CardFooter } from '@nextui-org/react'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
+import BorderSwitch from '@renderer/components/base/border-swtich'
 import { TbDeviceIpadHorizontalBolt } from 'react-icons/tb'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { patchMihomoConfig } from '@renderer/utils/ipc'
 import React from 'react'
-import { SiderSwitch } from './index'
 
 const TunSwitcher: React.FC = () => {
   const navigate = useNavigate()
@@ -15,6 +15,7 @@ const TunSwitcher: React.FC = () => {
   const { tun } = controledMihomoConfig || {}
   const { enable } = tun || {}
 
+  console.log('controledMihomoConfig', controledMihomoConfig)
   const onChange = async (enable: boolean): Promise<void> => {
     await patchControledMihomoConfig({ tun: { enable } })
     await patchMihomoConfig({ tun: { enable } })
@@ -36,7 +37,7 @@ const TunSwitcher: React.FC = () => {
           >
             <TbDeviceIpadHorizontalBolt color="default" className="text-[24px] font-bold" />
           </Button>
-          <SiderSwitch
+          <BorderSwitch
             isShowBorder={match && enable}
             isSelected={enable}
             onValueChange={onChange}