fix: resolve system proxy status detection and display inconsistency

- Fixed getSystemProxyActualState logic to properly check actual system status
- Unified system proxy state display across all components
- Replaced systemProxyIndicator with actualState for consistent UI display
- Updated components: setting-system, ProxyControlSwitches, proxy-tun-card
- Added entry to v2.4.0 changelog

src/components/home/proxy-tun-card.tsx

@@ -146,7 +146,7 @@ export const ProxyTunCard: FC = () => {
 
   const { verge } = useVerge();
   const { isAdminMode } = useSystemState();
-  const { indicator: systemProxyIndicator } = useSystemProxyState();
+  const { actualState: systemProxyActualState } = useSystemProxyState();
 
   const { enable_tun_mode } = verge ?? {};
 
@@ -182,7 +182,7 @@ export const ProxyTunCard: FC = () => {
   const tabDescription = useMemo(() => {
     if (activeTab === "system") {
       return {
-        text: systemProxyIndicator
+        text: systemProxyActualState
           ? t("System Proxy Enabled")
           : t("System Proxy Disabled"),
         tooltip: t("System Proxy Info"),
@@ -197,7 +197,7 @@ export const ProxyTunCard: FC = () => {
         tooltip: t("TUN Mode Intercept Info"),
       };
     }
-  }, [activeTab, systemProxyIndicator, enable_tun_mode, isTunAvailable, t]);
+  }, [activeTab, systemProxyActualState, enable_tun_mode, isTunAvailable, t]);
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
@@ -216,7 +216,7 @@ export const ProxyTunCard: FC = () => {
           onClick={() => handleTabChange("system")}
           icon={ComputerRounded}
           label={t("System Proxy")}
-          hasIndicator={systemProxyIndicator}
+          hasIndicator={systemProxyActualState}
         />
         <TabButton
           isActive={activeTab === "tun"}

src/components/setting/setting-system.tsx

@@ -34,11 +34,8 @@ const SettingSystem = ({ onError }: Props) => {
 
   const { verge, mutateVerge, patchVerge } = useVerge();
   const { installServiceAndRestartCore } = useServiceInstaller();
-  const {
-    actualState: systemProxyActualState,
-    indicator: systemProxyIndicator,
-    toggleSystemProxy,
-  } = useSystemProxyState();
+  const { actualState: systemProxyActualState, toggleSystemProxy } =
+    useSystemProxyState();
 
   const { isAdminMode, isServiceMode, mutateRunningMode } = useSystemState();
 
@@ -179,7 +176,7 @@ const SettingSystem = ({ onError }: Props) => {
               icon={SettingsRounded}
               onClick={() => sysproxyRef.current?.open()}
             />
-            {systemProxyIndicator ? (
+            {systemProxyActualState ? (
               <PlayArrowRounded sx={{ color: "success.main", mr: 1 }} />
             ) : (
               <PauseRounded sx={{ color: "error.main", mr: 1 }} />

src/components/shared/ProxyControlSwitches.tsx

@@ -40,11 +40,8 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
   const theme = useTheme();
   const { installServiceAndRestartCore } = useServiceInstaller();
 
-  const {
-    actualState: systemProxyActualState,
-    indicator: systemProxyIndicator,
-    toggleSystemProxy,
-  } = useSystemProxyState();
+  const { actualState: systemProxyActualState, toggleSystemProxy } =
+    useSystemProxyState();
 
   const { data: runningMode } = useSWR("getRunningMode", getRunningMode);
 
@@ -99,7 +96,7 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center" }}>
-            {systemProxyIndicator ? (
+            {systemProxyActualState ? (
               <PlayCircleOutlineRounded
                 sx={{ color: "success.main", mr: 1.5, fontSize: 28 }}
               />