adjust style

src/renderer/src/App.tsx

@@ -5,7 +5,6 @@ import OutboundModeSwitcher from '@renderer/components/sider/outbound-mode-switc
 import SysproxySwitcher from '@renderer/components/sider/sysproxy-switcher'
 import TunSwitcher from '@renderer/components/sider/tun-switcher'
 import { Button, Divider } from '@nextui-org/react'
-import { BsFillPinFill } from 'react-icons/bs'
 import { IoSettings } from 'react-icons/io5'
 import routes from '@renderer/routes'
 import {
@@ -29,7 +28,7 @@ import MihomoCoreCard from '@renderer/components/sider/mihomo-core-card'
 import ResourceCard from '@renderer/components/sider/resource-card'
 import UpdaterButton from '@renderer/components/updater/updater-button'
 import { useAppConfig } from './hooks/use-app-config'
-import { isAlwaysOnTop, setAlwaysOnTop, setNativeTheme, setTitleBarOverlay } from './utils/ipc'
+import { setNativeTheme, setTitleBarOverlay } from './utils/ipc'
 import { platform } from './utils/init'
 import { TitleBarOverlayOptions } from 'electron'
 
@@ -57,16 +56,11 @@ const App: React.FC = () => {
   } = appConfig || {}
   const [order, setOrder] = useState(siderOrder)
   const sensors = useSensors(useSensor(PointerSensor))
-  const [onTop, setOnTop] = useState(false)
   const { setTheme, systemTheme } = useTheme()
   const navigate = useNavigate()
   const location = useLocation()
   const page = useRoutes(routes)
 
-  const updateAlwaysOnTop = async (): Promise<void> => {
-    setOnTop(await isAlwaysOnTop())
-  }
-
   useEffect(() => {
     setOrder(siderOrder)
   }, [siderOrder])
@@ -147,33 +141,18 @@ const App: React.FC = () => {
               Mihomo Party
             </h3>
             <UpdaterButton />
-            <div className="flex gap-2">
+            <Button
-              <Button
+              size="sm"
-                size="sm"
+              className="app-nodrag"
-                className="app-nodrag"
+              isIconOnly
-                isIconOnly
+              color={location.pathname.includes('/settings') ? 'primary' : 'default'}
-                color={onTop ? 'primary' : 'default'}
+              variant={location.pathname.includes('/settings') ? 'solid' : 'light'}
-                variant={onTop ? 'solid' : 'light'}
+              onPress={() => {
-                onPress={async () => {
+                navigate('/settings')
-                  await setAlwaysOnTop(!onTop)
+              }}
-                  await updateAlwaysOnTop()
+              startContent={<IoSettings className="text-[20px]" />}
-                }}
+            />
-                startContent={<BsFillPinFill className="text-[20px]" />}
-              />
-              <Button
-                size="sm"
-                className="app-nodrag"
-                isIconOnly
-                color={location.pathname.includes('/settings') ? 'primary' : 'default'}
-                variant={location.pathname.includes('/settings') ? 'solid' : 'light'}
-                onPress={() => {
-                  navigate('/settings')
-                }}
-                startContent={<IoSettings className="text-[20px]" />}
-              />
-            </div>
           </div>
-          {/* <Divider /> */}
         </div>
         <div className="mt-2 mx-2">
           <OutboundModeSwitcher />

src/renderer/src/components/base/base-page.tsx

@@ -1,18 +1,27 @@
-import { Divider } from '@nextui-org/react'
+import { Button, Divider } from '@nextui-org/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import { platform } from '@renderer/utils/init'
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { isAlwaysOnTop, setAlwaysOnTop } from '@renderer/utils/ipc'
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { RiPushpin2Fill, RiPushpin2Line } from 'react-icons/ri'
 interface Props {
   title?: React.ReactNode
   header?: React.ReactNode
   children?: React.ReactNode
   contentClassName?: string
 }
+let saveOnTop = false
 
 const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const { appConfig } = useAppConfig()
   const { useWindowFrame = true } = appConfig || {}
   const [overlayWidth, setOverlayWidth] = React.useState(0)
+  const [onTop, setOnTop] = useState(saveOnTop)
+
+  const updateAlwaysOnTop = async (): Promise<void> => {
+    setOnTop(await isAlwaysOnTop())
+    saveOnTop = await isAlwaysOnTop()
+  }
 
   useEffect(() => {
     if (platform !== 'darwin' && !useWindowFrame) {
@@ -36,8 +45,27 @@ const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
       <div className="sticky top-0 z-40 h-[49px] w-full bg-background">
         <div className="app-drag p-2 flex justify-between h-[48px]">
           <div className="title h-full text-lg leading-[32px]">{props.title}</div>
-          <div style={{ marginRight: overlayWidth }} className="header flex gap-2 h-full">
+          <div style={{ marginRight: overlayWidth }} className="header flex gap-1 h-full">
             {props.header}
+            <Button
+              size="sm"
+              className="app-nodrag"
+              isIconOnly
+              title="窗口置顶"
+              variant="light"
+              color={onTop ? 'primary' : 'default'}
+              onPress={async () => {
+                await setAlwaysOnTop(!onTop)
+                await updateAlwaysOnTop()
+              }}
+              startContent={
+                onTop ? (
+                  <RiPushpin2Fill className="text-lg" />
+                ) : (
+                  <RiPushpin2Line className="text-lg" />
+                )
+              }
+            />
           </div>
         </div>
 

src/renderer/src/pages/connections.tsx

@@ -6,12 +6,13 @@ import {
   stopMihomoConnections
 } from '@renderer/utils/ipc'
 import { useEffect, useMemo, useState } from 'react'
-import { Button, Divider, Input, Select, SelectItem } from '@nextui-org/react'
+import { Badge, Button, Divider, Input, Select, SelectItem } from '@nextui-org/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import ConnectionItem from '@renderer/components/connections/connection-item'
 import { Virtuoso } from 'react-virtuoso'
 import dayjs from 'dayjs'
 import ConnectionDetailModal from '@renderer/components/connections/connection-detail-modal'
+import { CgClose } from 'react-icons/cg'
 
 let preData: IMihomoConnectionDetail[] = []
 
@@ -95,28 +96,32 @@ const Connections: React.FC = () => {
         <div className="flex">
           <div className="flex items-center">
             <span className="mx-1 text-gray-400">
-              下载: {calcTraffic(connectionsInfo?.downloadTotal ?? 0)}{' '}
+              ↑ {calcTraffic(connectionsInfo?.downloadTotal ?? 0)}{' '}
             </span>
             <span className="mx-1 text-gray-400">
-              上传: {calcTraffic(connectionsInfo?.uploadTotal ?? 0)}{' '}
+              ↓ {calcTraffic(connectionsInfo?.uploadTotal ?? 0)}{' '}
             </span>
           </div>
-          <Button
+          <Badge color="primary" variant="flat" content={`${filteredConnections.length}`}>
-            className="app-nodrag ml-1"
+            <Button
-            size="sm"
+              className="app-nodrag ml-1"
-            color="primary"
+              title="关闭全部连接"
-            onPress={() => {
+              isIconOnly
-              if (filter === '') {
+              size="sm"
-                mihomoCloseAllConnections()
+              variant="light"
-              } else {
+              onPress={() => {
-                filteredConnections.forEach((conn) => {
+                if (filter === '') {
-                  mihomoCloseConnection(conn.id)
+                  mihomoCloseAllConnections()
-                })
+                } else {
-              }
+                  filteredConnections.forEach((conn) => {
-            }}
+                    mihomoCloseConnection(conn.id)
-          >
+                  })
-            关闭所有连接({filteredConnections.length})
+                }
-          </Button>
+              }}
+            >
+              <CgClose className="text-lg" />
+            </Button>
+          </Badge>
         </div>
       }
     >

src/renderer/src/pages/override.tsx

@@ -23,6 +23,8 @@ import { SortableContext } from '@dnd-kit/sortable'
 import { useOverrideConfig } from '@renderer/hooks/use-override-config'
 import OverrideItem from '@renderer/components/override/override-item'
 import { FaPlus } from 'react-icons/fa6'
+import { HiOutlineDocumentText } from 'react-icons/hi'
+import { RiArchiveLine } from 'react-icons/ri'
 
 const Override: React.FC = () => {
   const {
@@ -124,21 +126,27 @@ const Override: React.FC = () => {
         <>
           <Button
             size="sm"
+            variant="light"
+            title="使用文档"
+            isIconOnly
             className="app-nodrag"
             onPress={() => {
               open('https://mihomo.party/guides/function/override/yaml/')
             }}
           >
-            使用文档
+            <HiOutlineDocumentText className="text-lg" />
           </Button>
           <Button
             className="app-nodrag"
+            title="常用覆写仓库"
+            isIconOnly
+            variant="light"
             size="sm"
             onPress={() => {
               open('https://github.com/pompurin404/override-hub')
             }}
           >
-            常用覆写仓库
+            <RiArchiveLine className="text-lg" />
           </Button>
         </>
       }

src/renderer/src/pages/profiles.tsx

@@ -24,6 +24,7 @@ import {
 } from '@dnd-kit/core'
 import { SortableContext } from '@dnd-kit/sortable'
 import { FaPlus } from 'react-icons/fa6'
+import { IoMdRefresh } from 'react-icons/io'
 
 const Profiles: React.FC = () => {
   const {
@@ -114,6 +115,7 @@ const Profiles: React.FC = () => {
         <>
           <Button
             size="sm"
+            variant="light"
             className="app-nodrag"
             onPress={async () => {
               open('https://mihomo.party/ads/airport/')
@@ -123,9 +125,10 @@ const Profiles: React.FC = () => {
           </Button>
           <Button
             size="sm"
+            title="更新全部订阅"
             className="app-nodrag"
-            color="primary"
+            variant="light"
-            isLoading={updating}
+            isIconOnly
             onPress={async () => {
               setUpdating(true)
               for (const item of items) {
@@ -140,7 +143,7 @@ const Profiles: React.FC = () => {
               setUpdating(false)
             }}
           >
-            更新全部订阅
+            <IoMdRefresh className={`text-lg ${updating ? 'animate-spin' : ''}`} />
           </Button>
         </>
       }

src/renderer/src/pages/proxies.tsx

@@ -8,7 +8,6 @@ import {
   mihomoProxyDelay
 } from '@renderer/utils/ipc'
 import { CgDetailsLess, CgDetailsMore } from 'react-icons/cg'
-import { FaBoltLightning } from 'react-icons/fa6'
 import { TbCircleLetterD } from 'react-icons/tb'
 import { FaLocationCrosshairs } from 'react-icons/fa6'
 import { RxLetterCaseCapitalize } from 'react-icons/rx'
@@ -113,6 +112,7 @@ const Proxies: React.FC = () => {
           <Button
             size="sm"
             isIconOnly
+            variant="light"
             className="app-nodrag"
             onPress={() => {
               patchAppConfig({
@@ -126,16 +126,17 @@ const Proxies: React.FC = () => {
             }}
           >
             {proxyDisplayOrder === 'default' ? (
-              <TbCircleLetterD size={20} title="默认" />
+              <TbCircleLetterD className="text-lg" title="默认" />
             ) : proxyDisplayOrder === 'delay' ? (
-              <FaBoltLightning size={20} title="延迟" />
+              <MdOutlineSpeed className="text-lg" title="延迟" />
             ) : (
-              <RxLetterCaseCapitalize size={20} title="名称" />
+              <RxLetterCaseCapitalize className="text-lg" title="名称" />
             )}
           </Button>
           <Button
             size="sm"
             isIconOnly
+            variant="light"
             className="app-nodrag"
             onPress={() => {
               patchAppConfig({
@@ -143,10 +144,10 @@ const Proxies: React.FC = () => {
               })
             }}
           >
-            {proxyDisplayMode === 'simple' ? (
+            {proxyDisplayMode === 'full' ? (
-              <CgDetailsMore size={20} title="详细信息" />
+              <CgDetailsMore className="text-lg" title="详细信息" />
             ) : (
-              <CgDetailsLess size={20} title="简洁信息" />
+              <CgDetailsLess className="text-lg" title="简洁信息" />
             )}
           </Button>
         </>

src/renderer/src/pages/settings.tsx

@@ -17,6 +17,7 @@ const Settings: React.FC = () => {
           <Button
             isIconOnly
             size="sm"
+            variant="light"
             title="官方文档"
             className="app-nodrag"
             onPress={() => {
@@ -28,6 +29,7 @@ const Settings: React.FC = () => {
           <Button
             isIconOnly
             size="sm"
+            variant="light"
             className="app-nodrag"
             title="GitHub仓库"
             onPress={() => {

src/renderer/src/pages/syspeoxy.tsx

@@ -57,8 +57,8 @@ function FindProxyForURL(url, host) {
 const Sysproxy: React.FC = () => {
   const { appConfig, patchAppConfig } = useAppConfig()
   const { sysProxy } = appConfig || ({ sysProxy: { enable: false } } as IAppConfig)
-
+  const [changed, setChanged] = useState(false)
-  const [values, setValues] = useState({
+  const [values, originSetValues] = useState({
     enable: sysProxy.enable,
     host: sysProxy.host ?? '',
     bypass: sysProxy.bypass ?? defaultBypass,
@@ -66,6 +66,11 @@ const Sysproxy: React.FC = () => {
     pacScript: sysProxy.pacScript ?? defaultPacScript
   })
 
+  const setValues = (v: typeof values): void => {
+    originSetValues(v)
+    setChanged(true)
+  }
+
   const [openPacEditor, setOpenPacEditor] = useState(false)
 
   const handleBypassChange = (value: string, index: number): void => {
@@ -90,6 +95,7 @@ const Sysproxy: React.FC = () => {
     try {
       await triggerSysProxy(true)
       await patchAppConfig({ sysProxy: { enable: true } })
+      setChanged(false)
     } catch (e) {
       alert(e)
       await patchAppConfig({ sysProxy: { enable: false } })
@@ -100,9 +106,11 @@ const Sysproxy: React.FC = () => {
     <BasePage
       title="系统代理设置"
       header={
-        <Button className="app-nodrag" size="sm" color="primary" onPress={onSave}>
+        changed && (
-          保存
+          <Button color="primary" className="app-nodrag" size="sm" onPress={onSave}>
-        </Button>
+            保存
+          </Button>
+        )
       }
     >
       {openPacEditor && (

src/renderer/src/pages/tun.tsx

@@ -23,8 +23,8 @@ const Tun: React.FC = () => {
     'strict-route': strictRoute = false,
     mtu = 1500
   } = tun || {}
-
+  const [changed, setChanged] = useState(false)
-  const [values, setValues] = useState({
+  const [values, originSetValues] = useState({
     device,
     stack,
     autoRoute,
@@ -34,10 +34,15 @@ const Tun: React.FC = () => {
     strictRoute,
     mtu
   })
+  const setValues = (v: typeof values): void => {
+    originSetValues(v)
+    setChanged(true)
+  }
 
   const onSave = async (patch: Partial<IMihomoConfig>): Promise<void> => {
     await patchControledMihomoConfig(patch)
     await restartCore()
+    setChanged(false)
   }
 
   return (
@@ -60,27 +65,29 @@ const Tun: React.FC = () => {
       <BasePage
         title="Tun 设置"
         header={
-          <Button
+          changed && (
-            size="sm"
+            <Button
-            className="app-nodrag"
+              size="sm"
-            color="primary"
+              className="app-nodrag"
-            onPress={() =>
+              color="primary"
-              onSave({
+              onPress={() =>
-                tun: {
+                onSave({
-                  device: values.device,
+                  tun: {
-                  stack: values.stack,
+                    device: values.device,
-                  'auto-route': values.autoRoute,
+                    stack: values.stack,
-                  'auto-redirect': values.autoRedirect,
+                    'auto-route': values.autoRoute,
-                  'auto-detect-interface': values.autoDetectInterface,
+                    'auto-redirect': values.autoRedirect,
-                  'dns-hijack': values.dnsHijack,
+                    'auto-detect-interface': values.autoDetectInterface,
-                  'strict-route': values.strictRoute,
+                    'dns-hijack': values.dnsHijack,
-                  mtu: values.mtu
+                    'strict-route': values.strictRoute,
-                }
+                    mtu: values.mtu
-              })
+                  }
-            }
+                })
-          >
+              }
-            保存
+            >
-          </Button>
+              保存
+            </Button>
+          )
         }
       >
         <SettingCard>