From 31ddccd3e173e5a82ab9ba2eb64c31e092405f97 Mon Sep 17 00:00:00 2001
From: wonfen <eiwonfen@gmail.com>
Date: Tue, 18 Feb 2025 05:54:16 +0800
Subject: [PATCH] perf: Improve proxy list interaction and UI responsiveness

---
 src/components/proxy/proxy-render.tsx   |  2 +-
 src/components/proxy/use-render-list.ts | 43 +++++++++++++++++++++++--
 src/pages/profiles.tsx                  |  2 +-
 src/pages/proxies.tsx                   |  2 +-
 4 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx
index 6a8d490a..8ad2514d 100644
--- a/src/components/proxy/proxy-render.tsx
+++ b/src/components/proxy/proxy-render.tsx
@@ -204,7 +204,7 @@ export const ProxyRender = (props: RenderProps) => {
 };
 
 const StyledPrimary = styled("span")`
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.5;
   overflow: hidden;
diff --git a/src/components/proxy/use-render-list.ts b/src/components/proxy/use-render-list.ts
index c62731a7..e2158aed 100644
--- a/src/components/proxy/use-render-list.ts
+++ b/src/components/proxy/use-render-list.ts
@@ -88,7 +88,7 @@ export const useRenderList = (mode: string) => {
     "getProxies",
     fetchProxies,
     {
-      refreshInterval: isUserInteracting.current ? 0 : 2000,
+      refreshInterval: 2000,
       dedupingInterval: 1000,
       revalidateOnFocus: false,
       keepPreviousData: true,
@@ -102,10 +102,18 @@ export const useRenderList = (mode: string) => {
 
             const needUpdate = data.groups.some((group: IProxyGroupItem) => {
               const oldGroup = groupMap.get(group.name);
-              return !oldGroup || oldGroup.now !== group.now;
+              if (!oldGroup) return true;
+
+              return (
+                oldGroup.now !== group.now ||
+                oldGroup.type !== group.type ||
+                JSON.stringify(oldGroup.all) !== JSON.stringify(group.all)
+              );
             });
 
-            if (!needUpdate) return;
+            if (!needUpdate) {
+              return;
+            }
           } catch (e) {
             console.error("Data comparison error:", e);
             return;
@@ -264,6 +272,35 @@ export const useRenderList = (mode: string) => {
     return filteredList;
   }, [headStates, proxiesData, lastValidData, mode, col]);
 
+  // 添加滚动处理
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!isUserInteracting.current) {
+        isUserInteracting.current = true;
+
+        // 清除之前的定时器
+        if (interactionTimer.current) {
+          clearTimeout(interactionTimer.current);
+        }
+
+        // 设置新的定时器，在滚动停止后恢复刷新
+        interactionTimer.current = window.setTimeout(() => {
+          isUserInteracting.current = false;
+          // 手动触发一次更新
+          wrappedMutateProxies();
+        }, 1000) as unknown as number;
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      if (interactionTimer.current) {
+        clearTimeout(interactionTimer.current);
+      }
+    };
+  }, [wrappedMutateProxies]);
+
   return {
     renderList,
     onProxies: wrappedMutateProxies,
diff --git a/src/pages/profiles.tsx b/src/pages/profiles.tsx
index 3b146e79..b933786b 100644
--- a/src/pages/profiles.tsx
+++ b/src/pages/profiles.tsx
@@ -377,7 +377,7 @@ const ProfilePage = () => {
           sx={{
             pl: "10px",
             pr: "10px",
-            height: "calc(100% - 68px)",
+            height: "95%",
             overflowY: "auto",
           }}
         >
diff --git a/src/pages/proxies.tsx b/src/pages/proxies.tsx
index ce9c274b..7028c518 100644
--- a/src/pages/proxies.tsx
+++ b/src/pages/proxies.tsx
@@ -42,7 +42,7 @@ const ProxyPage = () => {
   return (
     <BasePage
       full
-      contentStyle={{ height: "100%" }}
+      contentStyle={{ height: "102%" }}
       title={t("Proxy Groups")}
       header={
         <Box display="flex" alignItems="center" gap={1}>