mirror of
https://github.com/clash-verge-rev/clash-verge-rev
synced 2025-05-05 12:53:44 +08:00
fix: homepage proxy card handle direct mode
This commit is contained in:
Tunglies
parent
edb9ccdca9
commit
106861f761
@ -53,11 +53,16 @@ function convertDelayColor(delayValue: number) {
|
|||||||
const mainColor = colorStr.split(".")[0];
|
const mainColor = colorStr.split(".")[0];
|
||||||
|
|
||||||
switch (mainColor) {
|
switch (mainColor) {
|
||||||
case "success": return "success";
|
case "success":
|
||||||
case "warning": return "warning";
|
return "success";
|
||||||
case "error": return "error";
|
case "warning":
|
||||||
case "primary": return "primary";
|
return "warning";
|
||||||
default: return "default";
|
case "error":
|
||||||
|
return "error";
|
||||||
|
case "primary":
|
||||||
|
return "primary";
|
||||||
|
default:
|
||||||
|
return "default";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -87,7 +92,8 @@ function debounce(fn: Function, ms = 100) {
|
|||||||
|
|
||||||
export const CurrentProxyCard = () => {
|
export const CurrentProxyCard = () => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { currentProxy, primaryGroupName, mode, refreshProxy } = useCurrentProxy();
|
const { currentProxy, primaryGroupName, mode, refreshProxy } =
|
||||||
|
useCurrentProxy();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { verge } = useVerge();
|
const { verge } = useVerge();
|
||||||
@ -135,35 +141,36 @@ export const CurrentProxyCard = () => {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 根据模式确定初始组
|
// 根据模式确定初始组
|
||||||
if (isGlobalMode) {
|
if (isGlobalMode) {
|
||||||
setState(prev => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
...prev.selection,
|
...prev.selection,
|
||||||
group: "GLOBAL"
|
group: "GLOBAL",
|
||||||
}
|
},
|
||||||
}));
|
}));
|
||||||
} else if (isDirectMode) {
|
} else if (isDirectMode) {
|
||||||
setState(prev => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
...prev.selection,
|
...prev.selection,
|
||||||
group: "DIRECT"
|
group: "DIRECT",
|
||||||
}
|
},
|
||||||
}));
|
}));
|
||||||
} else {
|
} else {
|
||||||
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
|
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
|
||||||
setState(prev => ({
|
setState((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
...prev.selection,
|
...prev.selection,
|
||||||
group: savedGroup || primaryGroupName || ""
|
group: savedGroup || primaryGroupName || "",
|
||||||
}
|
},
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
}, [isGlobalMode, isDirectMode, primaryGroupName]);
|
}, [isGlobalMode, isDirectMode, primaryGroupName]);
|
||||||
|
|
||||||
// 带锁的代理数据获取函数，防止并发请求
|
// 带锁的代理数据获取函数，防止并发请求
|
||||||
const fetchProxyData = useCallback(async (force = false) => {
|
const fetchProxyData = useCallback(
|
||||||
|
async (force = false) => {
|
||||||
// 防止重复请求
|
// 防止重复请求
|
||||||
if (isRefreshingRef.current) {
|
if (isRefreshingRef.current) {
|
||||||
pendingRefreshRef.current = true;
|
pendingRefreshRef.current = true;
|
||||||
@ -184,15 +191,15 @@ export const CurrentProxyCard = () => {
|
|||||||
|
|
||||||
// 过滤和格式化组
|
// 过滤和格式化组
|
||||||
const filteredGroups = data.groups
|
const filteredGroups = data.groups
|
||||||
.filter(g => g.name !== "DIRECT" && g.name !== "REJECT")
|
.filter((g) => g.name !== "DIRECT" && g.name !== "REJECT")
|
||||||
.map(g => ({
|
.map((g) => ({
|
||||||
name: g.name,
|
name: g.name,
|
||||||
now: g.now || "",
|
now: g.now || "",
|
||||||
all: g.all.map(p => p.name),
|
all: g.all.map((p) => p.name),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 使用函数式更新确保状态更新的原子性
|
// 使用函数式更新确保状态更新的原子性
|
||||||
setState(prev => {
|
setState((prev) => {
|
||||||
let newProxy = "";
|
let newProxy = "";
|
||||||
let newDisplayProxy = null;
|
let newDisplayProxy = null;
|
||||||
let newGroup = prev.selection.group;
|
let newGroup = prev.selection.group;
|
||||||
@ -208,7 +215,9 @@ export const CurrentProxyCard = () => {
|
|||||||
newDisplayProxy = data.records?.[newProxy] || null;
|
newDisplayProxy = data.records?.[newProxy] || null;
|
||||||
} else {
|
} else {
|
||||||
// 普通模式 - 检查当前选择的组是否存在
|
// 普通模式 - 检查当前选择的组是否存在
|
||||||
const currentGroup = filteredGroups.find(g => g.name === prev.selection.group);
|
const currentGroup = filteredGroups.find(
|
||||||
|
(g) => g.name === prev.selection.group,
|
||||||
|
);
|
||||||
|
|
||||||
// 如果当前组不存在或为空，自动选择第一个组
|
// 如果当前组不存在或为空，自动选择第一个组
|
||||||
if (!currentGroup && filteredGroups.length > 0) {
|
if (!currentGroup && filteredGroups.length > 0) {
|
||||||
@ -241,9 +250,9 @@ export const CurrentProxyCard = () => {
|
|||||||
},
|
},
|
||||||
selection: {
|
selection: {
|
||||||
group: newGroup,
|
group: newGroup,
|
||||||
proxy: newProxy
|
proxy: newProxy,
|
||||||
},
|
},
|
||||||
displayProxy: newDisplayProxy
|
displayProxy: newDisplayProxy,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@ -257,11 +266,16 @@ export const CurrentProxyCard = () => {
|
|||||||
setTimeout(() => fetchProxyData(), 100);
|
setTimeout(() => fetchProxyData(), 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [isGlobalMode, isDirectMode]);
|
},
|
||||||
|
[isGlobalMode, isDirectMode],
|
||||||
|
);
|
||||||
|
|
||||||
// 响应 currentProxy 变化
|
// 响应 currentProxy 变化
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentProxy && (!state.displayProxy || currentProxy.name !== state.displayProxy.name)) {
|
if (
|
||||||
|
currentProxy &&
|
||||||
|
(!state.displayProxy || currentProxy.name !== state.displayProxy.name)
|
||||||
|
) {
|
||||||
fetchProxyData(true);
|
fetchProxyData(true);
|
||||||
}
|
}
|
||||||
}, [currentProxy, fetchProxyData, state.displayProxy]);
|
}, [currentProxy, fetchProxyData, state.displayProxy]);
|
||||||
@ -285,14 +299,16 @@ export const CurrentProxyCard = () => {
|
|||||||
if (isGlobalMode && state.proxyData.records) {
|
if (isGlobalMode && state.proxyData.records) {
|
||||||
// 全局模式下的选项
|
// 全局模式下的选项
|
||||||
return Object.keys(state.proxyData.records)
|
return Object.keys(state.proxyData.records)
|
||||||
.filter(name => name !== "DIRECT" && name !== "REJECT")
|
.filter((name) => name !== "DIRECT" && name !== "REJECT")
|
||||||
.map(name => ({ name }));
|
.map((name) => ({ name }));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 普通模式
|
// 普通模式
|
||||||
const group = state.proxyData.groups.find(g => g.name === state.selection.group);
|
const group = state.proxyData.groups.find(
|
||||||
|
(g) => g.name === state.selection.group,
|
||||||
|
);
|
||||||
if (group) {
|
if (group) {
|
||||||
return group.all.map(name => ({ name }));
|
return group.all.map((name) => ({ name }));
|
||||||
}
|
}
|
||||||
return [];
|
return [];
|
||||||
}, [isDirectMode, isGlobalMode, state.proxyData, state.selection.group]);
|
}, [isDirectMode, isGlobalMode, state.proxyData, state.selection.group]);
|
||||||
@ -302,11 +318,12 @@ export const CurrentProxyCard = () => {
|
|||||||
debounce((updateFn: (prev: ProxyState) => ProxyState) => {
|
debounce((updateFn: (prev: ProxyState) => ProxyState) => {
|
||||||
setState(updateFn);
|
setState(updateFn);
|
||||||
}, 50),
|
}, 50),
|
||||||
[]
|
[],
|
||||||
);
|
);
|
||||||
|
|
||||||
// 处理代理组变更
|
// 处理代理组变更
|
||||||
const handleGroupChange = useCallback((event: SelectChangeEvent) => {
|
const handleGroupChange = useCallback(
|
||||||
|
(event: SelectChangeEvent) => {
|
||||||
if (isGlobalMode || isDirectMode) return;
|
if (isGlobalMode || isDirectMode) return;
|
||||||
|
|
||||||
const newGroup = event.target.value;
|
const newGroup = event.target.value;
|
||||||
@ -315,30 +332,33 @@ export const CurrentProxyCard = () => {
|
|||||||
localStorage.setItem(STORAGE_KEY_GROUP, newGroup);
|
localStorage.setItem(STORAGE_KEY_GROUP, newGroup);
|
||||||
|
|
||||||
// 获取该组当前选中的代理
|
// 获取该组当前选中的代理
|
||||||
setState(prev => {
|
setState((prev) => {
|
||||||
const group = prev.proxyData.groups.find(g => g.name === newGroup);
|
const group = prev.proxyData.groups.find((g) => g.name === newGroup);
|
||||||
if (group) {
|
if (group) {
|
||||||
return {
|
return {
|
||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
group: newGroup,
|
group: newGroup,
|
||||||
proxy: group.now
|
proxy: group.now,
|
||||||
},
|
},
|
||||||
displayProxy: prev.proxyData.records[group.now] || null
|
displayProxy: prev.proxyData.records[group.now] || null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
...prev.selection,
|
...prev.selection,
|
||||||
group: newGroup
|
group: newGroup,
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}, [isGlobalMode, isDirectMode]);
|
},
|
||||||
|
[isGlobalMode, isDirectMode],
|
||||||
|
);
|
||||||
|
|
||||||
// 处理代理节点变更
|
// 处理代理节点变更
|
||||||
const handleProxyChange = useCallback(async (event: SelectChangeEvent) => {
|
const handleProxyChange = useCallback(
|
||||||
|
async (event: SelectChangeEvent) => {
|
||||||
if (isDirectMode) return;
|
if (isDirectMode) return;
|
||||||
|
|
||||||
const newProxy = event.target.value;
|
const newProxy = event.target.value;
|
||||||
@ -350,9 +370,9 @@ export const CurrentProxyCard = () => {
|
|||||||
...prev,
|
...prev,
|
||||||
selection: {
|
selection: {
|
||||||
...prev.selection,
|
...prev.selection,
|
||||||
proxy: newProxy
|
proxy: newProxy,
|
||||||
},
|
},
|
||||||
displayProxy: prev.proxyData.records[newProxy] || null
|
displayProxy: prev.proxyData.records[newProxy] || null,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// 非特殊模式下保存到本地存储
|
// 非特殊模式下保存到本地存储
|
||||||
@ -367,7 +387,7 @@ export const CurrentProxyCard = () => {
|
|||||||
// 自动关闭连接设置
|
// 自动关闭连接设置
|
||||||
if (verge?.auto_close_connection && previousProxy) {
|
if (verge?.auto_close_connection && previousProxy) {
|
||||||
getConnections().then(({ connections }) => {
|
getConnections().then(({ connections }) => {
|
||||||
connections.forEach(conn => {
|
connections.forEach((conn) => {
|
||||||
if (conn.chains.includes(previousProxy)) {
|
if (conn.chains.includes(previousProxy)) {
|
||||||
deleteConnection(conn.id);
|
deleteConnection(conn.id);
|
||||||
}
|
}
|
||||||
@ -383,7 +403,18 @@ export const CurrentProxyCard = () => {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("更新代理失败", error);
|
console.error("更新代理失败", error);
|
||||||
}
|
}
|
||||||
}, [isDirectMode, isGlobalMode, state.proxyData.records, state.selection, verge?.auto_close_connection, refreshProxy, fetchProxyData, debouncedSetState]);
|
},
|
||||||
|
[
|
||||||
|
isDirectMode,
|
||||||
|
isGlobalMode,
|
||||||
|
state.proxyData.records,
|
||||||
|
state.selection,
|
||||||
|
verge?.auto_close_connection,
|
||||||
|
refreshProxy,
|
||||||
|
fetchProxyData,
|
||||||
|
debouncedSetState,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
// 导航到代理页面
|
// 导航到代理页面
|
||||||
const goToProxies = useCallback(() => {
|
const goToProxies = useCallback(() => {
|
||||||
@ -402,12 +433,13 @@ export const CurrentProxyCard = () => {
|
|||||||
const signalInfo = getSignalIcon(currentDelay);
|
const signalInfo = getSignalIcon(currentDelay);
|
||||||
|
|
||||||
// 自定义渲染选择框中的值
|
// 自定义渲染选择框中的值
|
||||||
const renderProxyValue = useCallback((selected: string) => {
|
const renderProxyValue = useCallback(
|
||||||
|
(selected: string) => {
|
||||||
if (!selected || !state.proxyData.records[selected]) return selected;
|
if (!selected || !state.proxyData.records[selected]) return selected;
|
||||||
|
|
||||||
const delayValue = delayManager.getDelayFix(
|
const delayValue = delayManager.getDelayFix(
|
||||||
state.proxyData.records[selected],
|
state.proxyData.records[selected],
|
||||||
state.selection.group
|
state.selection.group,
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -420,7 +452,9 @@ export const CurrentProxyCard = () => {
|
|||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}, [state.proxyData.records, state.selection.group]);
|
},
|
||||||
|
[state.proxyData.records, state.selection.group],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<EnhancedCard
|
<EnhancedCard
|
||||||
@ -471,22 +505,48 @@ export const CurrentProxyCard = () => {
|
|||||||
{proxyToDisplay.name}
|
{proxyToDisplay.name}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Box sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
|
<Box
|
||||||
<Typography variant="caption" color="text.secondary" sx={{ mr: 1 }}>
|
sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="caption"
|
||||||
|
color="text.secondary"
|
||||||
|
sx={{ mr: 1 }}
|
||||||
|
>
|
||||||
{proxyToDisplay.type}
|
{proxyToDisplay.type}
|
||||||
</Typography>
|
</Typography>
|
||||||
{isGlobalMode && (
|
{isGlobalMode && (
|
||||||
<Chip size="small" label={t("Global Mode")} color="primary" sx={{ mr: 0.5 }} />
|
<Chip
|
||||||
|
size="small"
|
||||||
|
label={t("Global Mode")}
|
||||||
|
color="primary"
|
||||||
|
sx={{ mr: 0.5 }}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{isDirectMode && (
|
{isDirectMode && (
|
||||||
<Chip size="small" label={t("Direct Mode")} color="success" sx={{ mr: 0.5 }} />
|
<Chip
|
||||||
|
size="small"
|
||||||
|
label={t("Direct Mode")}
|
||||||
|
color="success"
|
||||||
|
sx={{ mr: 0.5 }}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
{/* 节点特性 */}
|
{/* 节点特性 */}
|
||||||
{proxyToDisplay.udp && <Chip size="small" label="UDP" variant="outlined" />}
|
{proxyToDisplay.udp && (
|
||||||
{proxyToDisplay.tfo && <Chip size="small" label="TFO" variant="outlined" />}
|
<Chip size="small" label="UDP" variant="outlined" />
|
||||||
{proxyToDisplay.xudp && <Chip size="small" label="XUDP" variant="outlined" />}
|
)}
|
||||||
{proxyToDisplay.mptcp && <Chip size="small" label="MPTCP" variant="outlined" />}
|
{proxyToDisplay.tfo && (
|
||||||
{proxyToDisplay.smux && <Chip size="small" label="SMUX" variant="outlined" />}
|
<Chip size="small" label="TFO" variant="outlined" />
|
||||||
|
)}
|
||||||
|
{proxyToDisplay.xudp && (
|
||||||
|
<Chip size="small" label="XUDP" variant="outlined" />
|
||||||
|
)}
|
||||||
|
{proxyToDisplay.mptcp && (
|
||||||
|
<Chip size="small" label="MPTCP" variant="outlined" />
|
||||||
|
)}
|
||||||
|
{proxyToDisplay.smux && (
|
||||||
|
<Chip size="small" label="SMUX" variant="outlined" />
|
||||||
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@ -500,7 +560,12 @@ export const CurrentProxyCard = () => {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
{/* 代理组选择器 */}
|
{/* 代理组选择器 */}
|
||||||
<FormControl fullWidth variant="outlined" size="small" sx={{ mb: 1.5 }}>
|
<FormControl
|
||||||
|
fullWidth
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
sx={{ mb: 1.5 }}
|
||||||
|
>
|
||||||
<InputLabel id="proxy-group-select-label">{t("Group")}</InputLabel>
|
<InputLabel id="proxy-group-select-label">{t("Group")}</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
labelId="proxy-group-select-label"
|
labelId="proxy-group-select-label"
|
||||||
@ -535,10 +600,12 @@ export const CurrentProxyCard = () => {
|
|||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{proxyOptions.map((proxy) => {
|
{isDirectMode
|
||||||
|
? null
|
||||||
|
: proxyOptions.map((proxy) => {
|
||||||
const delayValue = delayManager.getDelayFix(
|
const delayValue = delayManager.getDelayFix(
|
||||||
state.proxyData.records[proxy.name],
|
state.proxyData.records[proxy.name],
|
||||||
state.selection.group
|
state.selection.group,
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
<MenuItem
|
<MenuItem
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user