feat: disableAnimations

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

@@ -51,6 +51,7 @@ const GeneralConfig: React.FC = () => {
     proxyInTray = true,
     disableTray = false,
     disableTrayIconColor = false,
+    disableAnimations = false,
     showFloatingWindow: showFloating = false,
     spinFloatingIcon = true,
     floatingWindowCompatMode = true,
@@ -388,6 +389,15 @@ const GeneralConfig: React.FC = () => {
             }, 1000)}
           />
         </SettingItem>
+        <SettingItem title={t('settings.disableAnimations')} divider>
+          <Switch
+            size="sm"
+            isSelected={disableAnimations}
+            onValueChange={async (v) => {
+              await patchAppConfig({ disableAnimations: v })
+            }}
+          />
+        </SettingItem>
         <SettingItem
           title={t('settings.disableHardwareAcceleration')}
           actions={

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

@@ -36,7 +36,7 @@ interface Props {
 const ConnCard: React.FC<Props> = (props) => {
   const { iconOnly } = props
   const { appConfig } = useAppConfig()
-  const { showTraffic = false, connectionCardStatus = 'col-span-2' } = appConfig || {}
+  const { showTraffic = false, connectionCardStatus = 'col-span-2', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/connections')
@@ -187,7 +187,7 @@ const ConnCard: React.FC<Props> = (props) => {
             ref={setNodeRef}
             {...attributes}
             {...listeners}
-            className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+            className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
           >
             <CardBody className="pb-1 pt-0 px-0">
               <div className="flex justify-between">
@@ -234,7 +234,7 @@ const ConnCard: React.FC<Props> = (props) => {
           ref={setNodeRef}
           {...attributes}
           {...listeners}
-          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
         >
           <CardBody className="pb-1 pt-0 px-0">
             <div className="flex justify-between">

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

@@ -17,7 +17,7 @@ const DNSCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig, patchAppConfig } = useAppConfig()
   const { iconOnly } = props
-  const { dnsCardStatus = 'col-span-1', controlDns = true } = appConfig || {}
+  const { dnsCardStatus = 'col-span-1', controlDns = true, disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/dns')
@@ -78,7 +78,7 @@ const DNSCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -15,7 +15,7 @@ const LogCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { logCardStatus = 'col-span-1' } = appConfig || {}
+  const { logCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/logs')
@@ -65,7 +65,7 @@ const LogCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

src/renderer/src/components/sider/mihomo-core-card.tsx

@@ -19,7 +19,7 @@ interface Props {
 const MihomoCoreCard: React.FC<Props> = (props) => {
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { mihomoCoreCardStatus = 'col-span-2' } = appConfig || {}
+  const { mihomoCoreCardStatus = 'col-span-2', disableAnimations = false } = appConfig || {}
   const { data: version, mutate } = useSWR('mihomoVersion', mihomoVersion)
   const location = useLocation()
   const navigate = useNavigate()
@@ -87,7 +87,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
           ref={setNodeRef}
           {...attributes}
           {...listeners}
-          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
         >
           <CardBody>
             <div
@@ -138,7 +138,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
           ref={setNodeRef}
           {...attributes}
           {...listeners}
-          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
         >
           <CardBody className="pb-1 pt-0 px-0">
             <div className="flex justify-between">

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

@@ -15,7 +15,7 @@ const OverrideCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { overrideCardStatus = 'col-span-1' } = appConfig || {}
+  const { overrideCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/override')
@@ -64,7 +64,7 @@ const OverrideCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -26,7 +26,7 @@ const ProfileCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig, patchAppConfig } = useAppConfig()
   const { iconOnly } = props
-  const { profileCardStatus = 'col-span-2', profileDisplayDate = 'expire' } = appConfig || {}
+  const { profileCardStatus = 'col-span-2', profileDisplayDate = 'expire', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/profiles')
@@ -92,7 +92,7 @@ const ProfileCard: React.FC<Props> = (props) => {
           ref={setNodeRef}
           {...attributes}
           {...listeners}
-          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
         >
           <CardBody className="pb-1">
             <div
@@ -219,7 +219,7 @@ const ProfileCard: React.FC<Props> = (props) => {
           ref={setNodeRef}
           {...attributes}
           {...listeners}
-          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+          className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
         >
           <CardBody className="pb-1 pt-0 px-0">
             <div className="flex justify-between">

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

@@ -16,7 +16,7 @@ const ProxyCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { proxyCardStatus = 'col-span-1' } = appConfig || {}
+  const { proxyCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/proxies')
@@ -67,7 +67,7 @@ const ProxyCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -15,7 +15,7 @@ const ResourceCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { resourceCardStatus = 'col-span-1' } = appConfig || {}
+  const { resourceCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/resources')
@@ -65,7 +65,7 @@ const ResourceCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -16,7 +16,7 @@ const RuleCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { ruleCardStatus = 'col-span-1' } = appConfig || {}
+  const { ruleCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/rules')
@@ -67,7 +67,7 @@ const RuleCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -17,7 +17,7 @@ const SniffCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig, patchAppConfig } = useAppConfig()
   const { iconOnly } = props
-  const { sniffCardStatus = 'col-span-1', controlSniff = true } = appConfig || {}
+  const { sniffCardStatus = 'col-span-1', controlSniff = true, disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/sniffer')
@@ -78,7 +78,7 @@ const SniffCard: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -15,7 +15,7 @@ const SubStoreCard: React.FC<Props> = (props) => {
   const { t } = useTranslation()
   const { appConfig } = useAppConfig()
   const { iconOnly } = props
-  const { substoreCardStatus = 'col-span-1', useSubStore = true } = appConfig || {}
+  const { substoreCardStatus = 'col-span-1', useSubStore = true, disableAnimations = false } = appConfig || {}
   const location = useLocation()
   const navigate = useNavigate()
   const match = location.pathname.includes('/substore')
@@ -66,7 +66,7 @@ const SubStoreCard: React.FC<Props> = (props) => {
         {...attributes}
         {...listeners}
         fullWidth
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -22,7 +22,7 @@ const SysproxySwitcher: React.FC<Props> = (props) => {
   const match = location.pathname.includes('/sysproxy')
   const { appConfig, patchAppConfig } = useAppConfig()
   const { controledMihomoConfig } = useControledMihomoConfig()
-  const { sysProxy, sysproxyCardStatus = 'col-span-1' } = appConfig || {}
+  const { sysProxy, sysproxyCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const { tun } = controledMihomoConfig || {}
   const { enable } = sysProxy || {}
   const {
@@ -93,7 +93,7 @@ const SysproxySwitcher: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

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

@@ -21,7 +21,7 @@ const TunSwitcher: React.FC<Props> = (props) => {
   const navigate = useNavigate()
   const match = location.pathname.includes('/tun') || false
   const { appConfig } = useAppConfig()
-  const { tunCardStatus = 'col-span-1' } = appConfig || {}
+  const { tunCardStatus = 'col-span-1', disableAnimations = false } = appConfig || {}
   const sysProxyEnabled = appConfig?.sysProxy?.enable ?? false
   const { controledMihomoConfig, patchControledMihomoConfig } = useControledMihomoConfig()
   const { tun } = controledMihomoConfig || {}
@@ -127,7 +127,7 @@ const TunSwitcher: React.FC<Props> = (props) => {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? 'scale-[0.97] tap-highlight-transparent' : ''}`}
+        className={`${match ? 'bg-primary' : 'hover:bg-primary/30'} ${isDragging ? `${disableAnimations ? '' : 'scale-[0.95] tap-highlight-transparent'}` : ''}`}
       >
         <CardBody className="pb-1 pt-0 px-0">
           <div className="flex justify-between">

src/renderer/src/locales/en-US.json

@@ -62,6 +62,7 @@
   "settings.disableTray": "Disable Tray Icon",
   "settings.proxyInTray": "Show Proxy Info in Tray Menu",
   "settings.disableTrayIconColor": "Disable Tray Icon Color Changes",
+  "settings.disableAnimations": "Disable Animation Effects",
   "settings.showTraffic_windows": "Show Network Speed in Taskbar",
   "settings.showTraffic_mac": "Show Network Speed in Status Bar",
   "settings.showDockIcon": "Show Dock Icon",

src/renderer/src/locales/fa-IR.json

@@ -59,6 +59,7 @@
   "settings.disableTray": "غیرفعال کردن آیکون سیستم‌تری",
   "settings.proxyInTray": "نمایش اطلاعات پراکسی در منوی سیستم‌تری",
   "settings.disableTrayIconColor": "غیرفعال کردن تغییر رنگ آیکون تری",
+  "settings.disableAnimations": "غیرفعال کردن جلوه‌های انیمیشن",
   "settings.showTraffic_windows": "نمایش سرعت شبکه در نوار وظیفه",
   "settings.showTraffic_mac": "نمایش سرعت شبکه در نوار وضعیت",
   "settings.showDockIcon": "نمایش آیکون Dock",

src/renderer/src/locales/ru-RU.json

@@ -59,6 +59,7 @@
   "settings.disableTray": "Отключить значок в трее",
   "settings.proxyInTray": "Показывать информацию о прокси в трее",
   "settings.disableTrayIconColor": "Отключить смену цвета значка в трее",
+  "settings.disableAnimations": "Отключить анимационные эффекты",
   "settings.showTraffic_windows": "Показывать скорость в панели задач",
   "settings.showTraffic_mac": "Показывать скорость в строке состояния",
   "settings.showDockIcon": "Показывать значок в доке",

src/renderer/src/locales/zh-CN.json

@@ -62,6 +62,7 @@
   "settings.disableTray": "禁用托盘图标",
   "settings.proxyInTray": "在托盘菜单显示代理信息",
   "settings.disableTrayIconColor": "禁用托盘图标颜色变化",
+  "settings.disableAnimations": "禁用动画效果",
   "settings.showTraffic_windows": "在任务栏显示网速",
   "settings.showTraffic_mac": "在状态栏显示网速",
   "settings.showDockIcon": "显示 Dock 图标",

src/shared/types.d.ts

@@ -288,6 +288,7 @@ interface IAppConfig {
   useDockIcon?: boolean
   showTraffic?: boolean
   disableTrayIconColor?: boolean
+  disableAnimations?: boolean
   webdavUrl?: string
   webdavDir?: string
   webdavUsername?: string