refactor: proxy components

src/components/proxy/proxy-chain.tsx

@@ -31,7 +31,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import useSWR from "swr";
 import {
@@ -196,9 +196,10 @@ export const ProxyChain = ({
   const theme = useTheme();
   const { t } = useTranslation();
   const { proxies } = useAppData();
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [isConnecting, setIsConnecting] = useState(false);
-  const [isConnected, setIsConnected] = useState(false);
+  const markUnsavedChanges = useCallback(() => {
+    onMarkUnsavedChanges?.();
+  }, [onMarkUnsavedChanges]);
 
   // 获取当前代理信息以检查连接状态
   const { data: currentProxies, mutate: mutateProxies } = useSWR(
@@ -211,52 +212,26 @@ export const ProxyChain = ({
     },
   );
 
-  // 检查连接状态
-  useEffect(() => {
+  const isConnected = useMemo(() => {
     if (!currentProxies || proxyChain.length < 2) {
-      setIsConnected(false);
-      return;
+      return false;
     }
 
-    // 获取用户配置的最后一个节点
     const lastNode = proxyChain[proxyChain.length - 1];
 
-    // 根据模式确定要检查的代理组和当前选中的代理
     if (mode === "global") {
-      // 全局模式：检查 global 对象
-      if (!currentProxies.global || !currentProxies.global.now) {
-        setIsConnected(false);
-        return;
-      }
-
-      // 检查当前选中的代理是否是配置的最后一个节点
-      if (currentProxies.global.now === lastNode.name) {
-        setIsConnected(true);
-      } else {
-        setIsConnected(false);
-      }
-    } else {
-      // 规则模式：检查指定的代理组
-      if (!selectedGroup) {
-        setIsConnected(false);
-        return;
-      }
-
-      const proxyChainGroup = currentProxies.groups.find(
-        (group) => group.name === selectedGroup,
-      );
-      if (!proxyChainGroup || !proxyChainGroup.now) {
-        setIsConnected(false);
-        return;
-      }
-
-      // 检查当前选中的代理是否是配置的最后一个节点
-      if (proxyChainGroup.now === lastNode.name) {
-        setIsConnected(true);
-      } else {
-        setIsConnected(false);
-      }
+      return currentProxies.global?.now === lastNode.name;
     }
+
+    if (!selectedGroup || !Array.isArray(currentProxies.groups)) {
+      return false;
+    }
+
+    const proxyChainGroup = currentProxies.groups.find(
+      (group) => group.name === selectedGroup,
+    );
+
+    return proxyChainGroup?.now === lastNode.name;
   }, [currentProxies, proxyChain, mode, selectedGroup]);
 
   // 监听链的变化，但排除从配置加载的情况
@@ -267,10 +242,10 @@ export const ProxyChain = ({
       chainLengthRef.current !== proxyChain.length &&
       chainLengthRef.current !== 0
     ) {
-      setHasUnsavedChanges(true);
+      markUnsavedChanges();
     }
     chainLengthRef.current = proxyChain.length;
-  }, [proxyChain.length]);
+  }, [proxyChain.length, markUnsavedChanges]);
 
   const sensors = useSensors(
     useSensor(PointerSensor),
@@ -288,26 +263,21 @@ export const ProxyChain = ({
         const newIndex = proxyChain.findIndex((item) => item.id === over?.id);
 
         onUpdateChain(arrayMove(proxyChain, oldIndex, newIndex));
-        setHasUnsavedChanges(true);
+        markUnsavedChanges();
       }
     },
-    [proxyChain, onUpdateChain],
+    [proxyChain, onUpdateChain, markUnsavedChanges],
   );
 
   const handleRemoveProxy = useCallback(
     (id: string) => {
       const newChain = proxyChain.filter((item) => item.id !== id);
       onUpdateChain(newChain);
-      setHasUnsavedChanges(true);
+      markUnsavedChanges();
     },
-    [proxyChain, onUpdateChain],
+    [proxyChain, onUpdateChain, markUnsavedChanges],
   );
 
-  const handleClearAll = useCallback(() => {
-    onUpdateChain([]);
-    setHasUnsavedChanges(true);
-  }, [onUpdateChain]);
-
   const handleConnect = useCallback(async () => {
     if (isConnected) {
       // 如果已连接，则断开连接
@@ -327,10 +297,6 @@ export const ProxyChain = ({
 
         // 清空链式代理配置UI
         // onUpdateChain([]);
-        // setHasUnsavedChanges(false);
-
-        // 强制更新连接状态
-        setIsConnected(false);
       } catch (error) {
         console.error("Failed to disconnect from proxy chain:", error);
         alert(t("Failed to disconnect from proxy chain") || "断开链式代理失败");
@@ -372,9 +338,6 @@ export const ProxyChain = ({
 
       // 刷新代理信息以更新连接状态
       mutateProxies();
-
-      // 清除未保存标记
-      setHasUnsavedChanges(false);
       console.log("Successfully connected to proxy chain");
     } catch (error) {
       console.error("Failed to connect to proxy chain:", error);
@@ -411,7 +374,6 @@ export const ProxyChain = ({
                   delay: undefined,
                 })) || [];
               onUpdateChain(chainItems);
-              setHasUnsavedChanges(false);
             } catch (parseError) {
               console.error("Failed to parse YAML:", parseError);
               onUpdateChain([]);
@@ -435,7 +397,6 @@ export const ProxyChain = ({
                   delay: undefined,
                 })) || [];
               onUpdateChain(chainItems);
-              setHasUnsavedChanges(false);
             } catch (jsonError) {
               console.error("Failed to parse as JSON either:", jsonError);
               onUpdateChain([]);
@@ -448,7 +409,6 @@ export const ProxyChain = ({
     } else if (chainConfigData === "") {
       // Empty string means no proxies available, show empty state
       onUpdateChain([]);
-      setHasUnsavedChanges(false);
     }
   }, [chainConfigData, onUpdateChain]);
 
@@ -519,7 +479,6 @@ export const ProxyChain = ({
               onClick={() => {
                 updateProxyChainConfigInRuntime(null);
                 onUpdateChain([]);
-                setHasUnsavedChanges(false);
               }}
               sx={{
                 color: theme.palette.error.main,