our/clash-proxy
2
0
Fork 0
Code Pull Requests Activity

refactor: proxy control component and system settings UI

Browse Source 
fix: handle tun toggle state after service uninstall
This commit is contained in:
wonfen
2025-08-29 20:46:45 +08:00
Unverified
parent 6eecd70bd5
commit 2080dbdc0f
7 changed files with 117 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
UPDATELOG.md
View File

@@ -19,6 +19,11 @@
- 修复通过托盘重启应用无法恢复
- 修复订阅在某些情况下无法导入
- 修复无法新建订阅时使用远程链接
- 修复卸载服务后的 tun 开关状态问题
### 👙 界面样式
- 统一代理设置样式
### 🗑️ 移除内容

1
src/components/home/proxy-tun-card.tsx
View File

@@ -232,6 +232,7 @@ export const ProxyTunCard: FC = () => {
<ProxyControlSwitches
onError={handleError}
label={activeTab === "system" ? t("System Proxy") : t("Tun Mode")}
noRightPadding={true}
/>
</Box>
</Box>

173
src/components/setting/setting-system.tsx
View File

@@ -1,29 +1,19 @@
import { mutate } from "swr";
import { useRef } from "react";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import {
SettingsRounded,
PlayArrowRounded,
PauseRounded,
WarningRounded,
BuildRounded,
DeleteForeverRounded,
} from "@mui/icons-material";
import { WarningRounded } from "@mui/icons-material";
import { useVerge } from "@/hooks/use-verge";
import { useSystemProxyState } from "@/hooks/use-system-proxy-state";
import { DialogRef, Switch } from "@/components/base";
import { SettingList, SettingItem } from "./mods/setting-comp";
import { GuardState } from "./mods/guard-state";
import { SysproxyViewer } from "./mods/sysproxy-viewer";
import { TunViewer } from "./mods/tun-viewer";
import { TooltipIcon } from "@/components/base/base-tooltip-icon";
import { uninstallService, restartCore, stopCore } from "@/services/cmds";
import { useLockFn } from "ahooks";
import { Button, Tooltip } from "@mui/material";
import { Tooltip } from "@mui/material";
import { useSystemState } from "@/hooks/use-system-state";
import ProxyControlSwitches from "@/components/shared/ProxyControlSwitches";
import { showNotice } from "@/services/noticeService";
import { useServiceInstaller } from "@/hooks/useServiceInstaller";
interface Props {
onError?: (err: Error) => void;
@@ -33,167 +23,30 @@ const SettingSystem = ({ onError }: Props) => {
const { t } = useTranslation();
const { verge, mutateVerge, patchVerge } = useVerge();
const { installServiceAndRestartCore } = useServiceInstaller();
const { actualState: systemProxyActualState, toggleSystemProxy } =
useSystemProxyState();
const { isAdminMode, isServiceMode, mutateRunningMode } = useSystemState();
const { isAdminMode } = useSystemState();
// +++ isTunAvailable 现在使用 SWR 的 isServiceMode
const isTunAvailable = isServiceMode || isAdminMode;
const { enable_auto_launch, enable_silent_start } = verge ?? {};
const sysproxyRef = useRef<DialogRef>(null);
const tunRef = useRef<DialogRef>(null);
const { enable_tun_mode, enable_auto_launch, enable_silent_start } =
verge ?? {};
const onSwitchFormat = (_e: any, value: boolean) => value;
const onSwitchFormat = (
_e: React.ChangeEvent<HTMLInputElement>,
value: boolean,
) => value;
const onChangeData = (patch: Partial<IVergeConfig>) => {
mutateVerge({ ...verge, ...patch }, false);
};
// 抽象服务操作逻辑
const handleServiceOperation = useLockFn(
async ({
beforeMsg,
action,
actionMsg,
successMsg,
}: {
beforeMsg: string;
action: () => Promise<void>;
actionMsg: string;
successMsg: string;
}) => {
try {
showNotice("info", beforeMsg);
await stopCore();
showNotice("info", actionMsg);
await action();
showNotice("success", successMsg);
showNotice("info", t("Restarting Core..."));
await restartCore();
await mutateRunningMode();
} catch (err: any) {
showNotice("error", err.message || err.toString());
try {
showNotice("info", t("Try running core as Sidecar..."));
await restartCore();
await mutateRunningMode();
} catch (e: any) {
showNotice("error", e?.message || e?.toString());
}
}
},
);
// 卸载系统服务
const onUninstallService = () =>
handleServiceOperation({
beforeMsg: t("Stopping Core..."),
action: uninstallService,
actionMsg: t("Uninstalling Service..."),
successMsg: t("Service Uninstalled Successfully"),
});
return (
<SettingList title={t("System Setting")}>
<SysproxyViewer ref={sysproxyRef} />
<TunViewer ref={tunRef} />
<SettingItem
label={t("Tun Mode")}
extra={
<>
<TooltipIcon
title={t("Tun Mode Info")}
icon={SettingsRounded}
onClick={() => tunRef.current?.open()}
/>
{!isTunAvailable && (
<Tooltip title={t("TUN requires Service Mode or Admin Mode")}>
<WarningRounded sx={{ color: "warning.main", mr: 1 }} />
</Tooltip>
)}
{!isServiceMode && !isAdminMode && (
<Tooltip title={t("Install Service")}>
<Button
variant="outlined"
color="primary"
size="small"
onClick={installServiceAndRestartCore}
sx={{ mr: 1, minWidth: "32px", p: "4px" }}
>
<BuildRounded fontSize="small" />
</Button>
</Tooltip>
)}
{isServiceMode && (
<Tooltip title={t("Uninstall Service")}>
<Button
// variant="outlined"
color="secondary"
size="small"
onClick={onUninstallService}
sx={{ mr: 1, minWidth: "32px", p: "4px" }}
>
<DeleteForeverRounded fontSize="small" />
</Button>
</Tooltip>
)}
</>
}
>
<GuardState
value={enable_tun_mode ?? false}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => {
if (!isTunAvailable) return;
onChangeData({ enable_tun_mode: e });
}}
onGuard={(e) => {
if (!isTunAvailable) {
showNotice("error", t("TUN requires Service Mode or Admin Mode"));
return Promise.reject(
new Error(t("TUN requires Service Mode or Admin Mode")),
);
}
return patchVerge({ enable_tun_mode: e });
}}
>
<Switch edge="end" disabled={!isTunAvailable} />
</GuardState>
</SettingItem>
<SettingItem
label={t("System Proxy")}
extra={
<>
<TooltipIcon
title={t("System Proxy Info")}
icon={SettingsRounded}
onClick={() => sysproxyRef.current?.open()}
/>
{systemProxyActualState ? (
<PlayArrowRounded sx={{ color: "success.main", mr: 1 }} />
) : (
<PauseRounded sx={{ color: "error.main", mr: 1 }} />
)}
</>
}
>
<GuardState
value={systemProxyActualState}
valueProps="checked"
onCatch={onError}
onFormat={onSwitchFormat}
onGuard={(e) => toggleSystemProxy(e)}
>
<Switch edge="end" checked={systemProxyActualState} />
</GuardState>
</SettingItem>
<ProxyControlSwitches label={t("Tun Mode")} onError={onError} />
<ProxyControlSwitches label={t("System Proxy")} onError={onError} />
<SettingItem
label={t("Auto Launch")}

75
src/components/shared/ProxyControlSwitches.tsx
View File

@@ -1,10 +1,12 @@
import { useRef } from "react";
import React, { useRef } from "react";
import { useTranslation } from "react-i18next";
import {
SettingsRounded,
PlayCircleOutlineRounded,
PauseCircleOutlineRounded,
BuildRounded,
DeleteForeverRounded,
WarningRounded,
} from "@mui/icons-material";
import {
Box,
@@ -23,17 +25,24 @@ import { useSystemProxyState } from "@/hooks/use-system-proxy-state";
import { useSystemState } from "@/hooks/use-system-state";
import { showNotice } from "@/services/noticeService";
import { useServiceInstaller } from "@/hooks/useServiceInstaller";
import { uninstallService, restartCore, stopCore } from "@/services/cmds";
import { useLockFn } from "ahooks";
interface ProxySwitchProps {
label?: string;
onError?: (err: Error) => void;
noRightPadding?: boolean;
}
/**
* 可复用的代理控制开关组件
* 包含 Tun Mode 和 System Proxy 的开关功能
*/
const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
const ProxyControlSwitches = ({
label,
onError,
noRightPadding = false,
}: ProxySwitchProps) => {
const { t } = useTranslation();
const { verge, mutateVerge, patchVerge } = useVerge();
const theme = useTheme();
@@ -42,7 +51,7 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
const { actualState: systemProxyActualState, toggleSystemProxy } =
useSystemProxyState();
const { isAdminMode, isServiceMode } = useSystemState();
const { isAdminMode, isServiceMode, mutateRunningMode } = useSystemState();
const isTunAvailable = isServiceMode || isAdminMode;
@@ -55,7 +64,10 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
const isSystemProxyMode = label === t("System Proxy") || !label;
const isTunMode = label === t("Tun Mode");
const onSwitchFormat = (_e: any, value: boolean) => value;
const onSwitchFormat = (
_e: React.ChangeEvent<HTMLInputElement>,
value: boolean,
) => value;
const onChangeData = (patch: Partial<IVergeConfig>) => {
mutateVerge({ ...verge, ...patch }, false);
};
@@ -63,8 +75,31 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
// 安装系统服务
const onInstallService = installServiceAndRestartCore;
// 卸载系统服务
const onUninstallService = useLockFn(async () => {
try {
showNotice("info", t("Stopping Core..."));
await stopCore();
showNotice("info", t("Uninstalling Service..."));
await uninstallService();
showNotice("success", t("Service Uninstalled Successfully"));
showNotice("info", t("Restarting Core..."));
await restartCore();
await mutateRunningMode();
} catch (err: unknown) {
showNotice("error", (err as Error).message || err?.toString());
try {
showNotice("info", t("Try running core as Sidecar..."));
await restartCore();
await mutateRunningMode();
} catch (e: unknown) {
showNotice("error", (e as Error)?.message || e?.toString());
}
}
});
return (
<Box>
<Box sx={{ width: "100%" }}>
{label && (
<Box
sx={{
@@ -86,6 +121,7 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
alignItems: "center",
justifyContent: "space-between",
p: 1,
pr: noRightPadding ? 1 : 2,
borderRadius: 1.5,
bgcolor: enable_system_proxy
? alpha(theme.palette.success.main, 0.07)
@@ -111,12 +147,6 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
>
{t("System Proxy")}
</Typography>
{/* <Typography variant="caption" color="text.secondary">
{sysproxy?.enable
? t("Proxy is active")
: t("Enable this for most users")
}
</Typography> */}
</Box>
</Box>
@@ -155,6 +185,7 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
alignItems: "center",
justifyContent: "space-between",
p: 1,
pr: noRightPadding ? 1 : 2,
borderRadius: 1.5,
bgcolor: enable_tun_mode
? alpha(theme.palette.success.main, 0.07)
@@ -182,6 +213,15 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
{t("Tun Mode")}
</Typography>
</Box>
{!isTunAvailable && (
<Tooltip
title={t("TUN requires Service Mode or Admin Mode")}
arrow
>
<WarningRounded sx={{ color: "warning.main", ml: 1 }} />
</Tooltip>
)}
</Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
@@ -199,6 +239,19 @@ const ProxyControlSwitches = ({ label, onError }: ProxySwitchProps) => {
</Tooltip>
)}
{isServiceMode && (
<Tooltip title={t("Uninstall Service")} arrow>
<Button
color="secondary"
size="small"
onClick={onUninstallService}
sx={{ mr: 1, minWidth: "32px", p: "4px" }}
>
<DeleteForeverRounded fontSize="small" />
</Button>
</Tooltip>
)}
<Tooltip title={t("Tun Mode Info")} arrow>
<Box
sx={{

30
src/hooks/use-verge.ts
View File

@@ -1,7 +1,14 @@
import useSWR from "swr";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { getVergeConfig, patchVergeConfig } from "@/services/cmds";
import { useSystemState } from "@/hooks/use-system-state";
import { showNotice } from "@/services/noticeService";
export const useVerge = () => {
const { t } = useTranslation();
const { isAdminMode, isServiceMode } = useSystemState();
const { data: verge, mutate: mutateVerge } = useSWR(
"getVergeConfig",
async () => {
@@ -15,6 +22,29 @@ export const useVerge = () => {
mutateVerge();
};
const isTunAvailable = isServiceMode || isAdminMode;
const { enable_tun_mode } = verge ?? {};
// 当服务不可用且TUN模式开启时自动关闭TUN
useEffect(() => {
if (enable_tun_mode && !isTunAvailable) {
console.log("[useVerge] 检测到服务不可用，自动关闭TUN模式");
patchVergeConfig({ enable_tun_mode: false })
.then(() => {
mutateVerge();
showNotice(
"info",
t("TUN Mode automatically disabled due to service unavailable"),
);
})
.catch((err) => {
console.error("[useVerge] 自动关闭TUN模式失败:", err);
showNotice("error", t("Failed to disable TUN Mode automatically"));
});
}
}, [isTunAvailable, enable_tun_mode, mutateVerge, t]);
return {
verge,
mutateVerge,

2
src/locales/en.json
View File

@@ -210,6 +210,8 @@
"Reset to Default": "Reset to Default",
"Tun Mode Info": "Tun (Virtual NIC) mode: Captures all system traffic, when enabled, there is no need to enable system proxy.",
"TUN requires Service Mode or Admin Mode": "TUN requires Service Mode or Admin Mode",
"TUN Mode automatically disabled due to service unavailable": "TUN Mode automatically disabled due to service unavailable",
"Failed to disable TUN Mode automatically": "Failed to disable TUN Mode automatically",
"System Proxy Enabled": "System proxy is enabled, your applications will access the network through the proxy",
"System Proxy Disabled": "System proxy is disabled, it is recommended for most users to turn on this option",
"TUN Mode Enabled": "TUN mode is enabled, applications will access the network through the virtual network card",

2
src/locales/zh.json
View File

@@ -210,6 +210,8 @@
"Reset to Default": "重置为默认值",
"Tun Mode Info": "TUN（虚拟网卡）模式接管系统所有流量，启用时无须打开系统代理",
"TUN requires Service Mode or Admin Mode": "TUN 模式需要安装服务模式或管理员模式",
"TUN Mode automatically disabled due to service unavailable": "由于服务不可用，TUN 模式已自动关闭",
"Failed to disable TUN Mode automatically": "自动关闭 TUN 模式失败",
"System Proxy Enabled": "系统代理已启用，您的应用将通过代理访问网络",
"System Proxy Disabled": "系统代理已关闭，建议大多数用户打开此选项",
"TUN Mode Enabled": "TUN 模式已启用，应用将通过虚拟网卡访问网络",