From 15fd8b17c3d76ad1612e7beeda16c13a827967f1 Mon Sep 17 00:00:00 2001
From: wonfen <eiwonfen@gmail.com>
Date: Sun, 23 Mar 2025 04:54:18 +0800
Subject: [PATCH] perf: improve Clash mode switch responsiveness on home card

---
 UPDATELOG.md                            | 17 ++++----
 src/components/home/clash-mode-card.tsx | 54 ++++++++++---------------
 src/pages/proxies.tsx                   |  6 +++
 3 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/UPDATELOG.md b/UPDATELOG.md
index f962da3b..ef27fc29 100644
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -9,24 +9,27 @@
 2.2.1 相对于 2.2.0(已下架不在提供)
 修复了：
 1. **首页**
-   - 修复 Direct 模式首页无法渲染。
-   - 修复 首页启用轻量模式导致 ClashVergeRev 从托盘退出。
-   - 增加 首页文本过长自动截断
+   - 修复 Direct 模式首页无法渲染
+   - 修复 首页启用轻量模式导致 ClashVergeRev 从托盘退出
    - 修复 系统代理标识判断不准的问题
    - 修复 系统代理地址错误的问题
+   - 代理模式“多余的切换动画”
 2. **系统**
-   - 增加 在 ClashVergeRev 对 Mihomo 进行操作时，总是尝试确保两者运行。
    - 修复 MacOS 无法使用快捷键粘贴/选择/复制订阅地址。
    - 修复 代理端口设置同步问题。
-   - 修复 Linux 无法与 Mihomo 核心 和 ClashVergeRev 服务通信。
-   - 增加 服务器模式下启动mihomo内核的时候查找并停止其他已经存在的内核进程，防止内核假死等问题带来的通信失败。
+   - 修复 Linux 无法与 Mihomo 核心 和 ClashVergeRev 服务通信
 3. **界面**
    - 修复 连接详情卡没有跟随主题色
    
 新增了:
-1. **轻量模式**
+1. **首页**
+   - 首页文本过长自动截断
+2. **轻量模式**
    - 新增托盘进入轻量模式支持
    - 新增进入轻量模式快捷键支持
+3. **系统**
+   - 在 ClashVergeRev 对 Mihomo 进行操作时，总是尝试确保两者运行
+   - 服务器模式下启动mihomo内核的时候查找并停止其他已经存在的内核进程，防止内核假死等问题带来的通信失败
 
 ---
 
diff --git a/src/components/home/clash-mode-card.tsx b/src/components/home/clash-mode-card.tsx
index ea50039e..4030b9d2 100644
--- a/src/components/home/clash-mode-card.tsx
+++ b/src/components/home/clash-mode-card.tsx
@@ -10,7 +10,7 @@ import {
   MultipleStopRounded,
   DirectionsRounded,
 } from "@mui/icons-material";
-import { useState, useEffect, useMemo } from "react";
+import { useMemo } from "react";
 
 export const ClashModeCard = () => {
   const { t } = useTranslation();
@@ -20,21 +20,19 @@ export const ClashModeCard = () => {
   const { data: clashConfig, mutate: mutateClash } = useSWR(
     "getClashConfig",
     getClashConfig,
-    { revalidateOnFocus: false }
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: true,
+      dedupingInterval: 1000,
+      errorRetryInterval: 5000
+    }
   );
 
   // 支持的模式列表
   const modeList = useMemo(() => ["rule", "global", "direct"] as const, []);
 
-  // 本地状态记录当前模式
-  const [localMode, setLocalMode] = useState<string>("rule");
-
-  // 当从API获取到当前模式时更新本地状态
-  useEffect(() => {
-    if (clashConfig?.mode) {
-      setLocalMode(clashConfig.mode.toLowerCase());
-    }
-  }, [clashConfig]);
+  // 直接使用API返回的模式，不维护本地状态
+  const currentMode = clashConfig?.mode?.toLowerCase();
 
   // 模式图标映射
   const modeIcons = useMemo(() => ({
@@ -45,10 +43,7 @@ export const ClashModeCard = () => {
 
   // 切换模式的处理函数
   const onChangeMode = useLockFn(async (mode: string) => {
-    if (mode === localMode) return;
-    
-    setLocalMode(mode);
-    
+    if (mode === currentMode) return;
     if (verge?.auto_close_connection) {
       closeAllConnections();
     }
@@ -58,9 +53,6 @@ export const ClashModeCard = () => {
       mutateClash();
     } catch (error) {
       console.error("Failed to change mode:", error);
-      if (clashConfig?.mode) {
-        setLocalMode(clashConfig.mode.toLowerCase());
-      }
     }
   });
 
@@ -73,8 +65,8 @@ export const ClashModeCard = () => {
     alignItems: "center",
     justifyContent: "center",
     gap: 1,
-    bgcolor: mode === localMode ? "primary.main" : "background.paper",
-    color: mode === localMode ? "primary.contrastText" : "text.primary",
+    bgcolor: mode === currentMode ? "primary.main" : "background.paper",
+    color: mode === currentMode ? "primary.contrastText" : "text.primary",
     borderRadius: 1.5,
     transition: "all 0.2s ease-in-out",
     position: "relative",
@@ -86,7 +78,7 @@ export const ClashModeCard = () => {
     "&:active": {
       transform: "translateY(1px)",
     },
-    "&::after": mode === localMode
+    "&::after": mode === currentMode
       ? {
           content: '""',
           position: "absolute",
@@ -132,7 +124,7 @@ export const ClashModeCard = () => {
         {modeList.map((mode) => (
           <Paper
             key={mode}
-            elevation={mode === localMode ? 2 : 0}
+            elevation={mode === currentMode ? 2 : 0}
             onClick={() => onChangeMode(mode)}
             sx={buttonStyles(mode)}
           >
@@ -141,7 +133,7 @@ export const ClashModeCard = () => {
               variant="body2"
               sx={{
                 textTransform: "capitalize",
-                fontWeight: mode === localMode ? 600 : 400,
+                fontWeight: mode === currentMode ? 600 : 400,
               }}
             >
               {t(mode)}
@@ -161,15 +153,13 @@ export const ClashModeCard = () => {
           overflow: "visible",
         }}
       >
-        <Fade in={true} timeout={200}>
-          <Typography
-            variant="caption"
-            component="div"
-            sx={descriptionStyles}
-          >
-            {t(`${localMode} Mode Description`)}
-          </Typography>
-        </Fade>
+        <Typography
+          variant="caption"
+          component="div"
+          sx={descriptionStyles}
+        >
+          {t(`${currentMode} Mode Description`)}
+        </Typography>
       </Box>
     </Box>
   );
diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
index c8ae7554..59b32a21 100644
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@@ -16,6 +16,12 @@ const ProxyPage = () => {
   const { data: clashConfig, mutate: mutateClash } = useSWR(
     "getClashConfig",
     getClashConfig,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: true,
+      dedupingInterval: 1000,
+      errorRetryInterval: 5000
+    }
   );
 
   const { verge } = useVerge();