perf: Improve proxy list interaction and UI responsiveness

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;

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,

src/pages/profiles.tsx

@@ -377,7 +377,7 @@ const ProfilePage = () => {
           sx={{
             pl: "10px",
             pr: "10px",
-            height: "calc(100% - 68px)",
+            height: "95%",
             overflowY: "auto",
           }}
         >

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}>