rotate the floating window icon based on net speed

src/renderer/src/FloatingApp.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import MihomoIcon from './components/base/mihomo-icon'
 import { calcTraffic } from './utils/calc'
 import { showContextMenu, triggerMainWindow } from './utils/ipc'
@@ -8,13 +8,27 @@ import { useControledMihomoConfig } from './hooks/use-controled-mihomo-config'
 const FloatingApp: React.FC = () => {
   const { appConfig } = useAppConfig()
   const { controledMihomoConfig } = useControledMihomoConfig()
-  const { sysProxy } = appConfig || {}
+  const { sysProxy, spinFloatingIcon = true } = appConfig || {}
   const { tun } = controledMihomoConfig || {}
   const sysProxyEnabled = sysProxy?.enable
   const tunEnabled = tun?.enable
 
   const [upload, setUpload] = useState(0)
   const [download, setDownload] = useState(0)
+  const slowest = 10
+  const fastest = 0.1
+
+  const spinDuration = useMemo(() => {
+    let duration = upload + download === 0 ? slowest : 409600 / (upload + download)
+    if (duration > slowest) {
+      duration = slowest
+    }
+    if (duration < fastest) {
+      duration = fastest
+    }
+    return duration
+  }, [upload, download])
+
   useEffect(() => {
     window.electron.ipcRenderer.on('mihomoTraffic', async (_e, info: IMihomoTrafficInfo) => {
       setUpload(info.up)
@@ -24,6 +38,7 @@ const FloatingApp: React.FC = () => {
       window.electron.ipcRenderer.removeAllListeners('mihomoTraffic')
     }
   }, [])
+
   return (
     <div className="app-drag h-[100vh] w-[100vw] overflow-hidden">
       <div className="floating-bg border-1 border-divider flex rounded-full bg-content1 h-[calc(100%-2px)] w-[calc(100%-2px)]">
@@ -36,6 +51,7 @@ const FloatingApp: React.FC = () => {
             onClick={() => {
               triggerMainWindow()
             }}
+            style={spinFloatingIcon ? { animation: `spin ${spinDuration}s linear infinite` } : {}}
             className={`app-nodrag cursor-pointer floating-thumb ${tunEnabled ? 'bg-secondary' : sysProxyEnabled ? 'bg-primary' : 'bg-default'} hover:opacity-hover rounded-full h-[calc(100%-4px)] aspect-square`}
           >
             <MihomoIcon className="floating-icon text-primary-foreground h-full leading-full text-[22px] mx-auto" />

src/renderer/src/components/settings/general-config.tsx

@@ -43,6 +43,7 @@ const GeneralConfig: React.FC = () => {
     proxyInTray = true,
     disableTray = false,
     showFloatingWindow: showFloating = false,
+    spinFloatingIcon = true,
     useWindowFrame = false,
     autoQuitWithoutCore = false,
     autoQuitWithoutCoreDelay = 60,
@@ -195,6 +196,16 @@ const GeneralConfig: React.FC = () => {
             }}
           />
         </SettingItem>
+        <SettingItem title="根据网速旋转悬浮窗图标" divider>
+          <Switch
+            size="sm"
+            isSelected={spinFloatingIcon}
+            onValueChange={async (v) => {
+              await patchAppConfig({ spinFloatingIcon: v })
+              window.electron.ipcRenderer.send('updateFloatingWindow')
+            }}
+          />
+        </SettingItem>
         {showFloating && (
           <SettingItem title="禁用托盘图标" divider>
             <Switch

src/shared/types.d.ts

@@ -212,6 +212,7 @@ interface IAppConfig {
   proxyCols: 'auto' | '1' | '2' | '3' | '4'
   connectionDirection: 'asc' | 'desc'
   connectionOrderBy: 'time' | 'upload' | 'download' | 'uploadSpeed' | 'downloadSpeed'
+  spinFloatingIcon?: boolean
   disableTray?: boolean
   showFloatingWindow?: boolean
   connectionCardStatus?: CardStatus