shkong/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev synced 2025-05-05 04:43:44 +08:00
Code Packages Projects Releases Activity

fix: homepage proxy card handle direct mode

Browse Source
This commit is contained in:
Tunglies 2025-03-20 21:51:12 +08:00
parent 108840c4be
commit a06597a3a6
1 changed files with 315 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/home/current-proxy-card.tsx
View File

@ -53,11 +53,16 @@ function convertDelayColor(delayValue: number) {
const mainColor = colorStr.split(".")[0];
switch (mainColor) {
case "success": return "success";
case "warning": return "warning";
case "error": return "error";
case "primary": return "primary";
default: return "default";
case "success":
return "success";
case "warning":
return "warning";
case "error":
return "error";
case "primary":
return "primary";
default:
return "default";
}
}
@ -87,7 +92,8 @@ function debounce(fn: Function, ms = 100) {
export const CurrentProxyCard = () => {
const { t } = useTranslation();
const { currentProxy, primaryGroupName, mode, refreshProxy } = useCurrentProxy();
const { currentProxy, primaryGroupName, mode, refreshProxy } =
useCurrentProxy();
const navigate = useNavigate();
const theme = useTheme();
const { verge } = useVerge();
@ -135,35 +141,36 @@ export const CurrentProxyCard = () => {
useEffect(() => {
// 根据模式确定初始组
if (isGlobalMode) {
setState(prev => ({
setState((prev) => ({
...prev,
selection: {
...prev.selection,
group: "GLOBAL"
}
group: "GLOBAL",
},
}));
} else if (isDirectMode) {
setState(prev => ({
setState((prev) => ({
...prev,
selection: {
...prev.selection,
group: "DIRECT"
}
group: "DIRECT",
},
}));
} else {
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
setState(prev => ({
setState((prev) => ({
...prev,
selection: {
...prev.selection,
group: savedGroup || primaryGroupName || ""
}
group: savedGroup || primaryGroupName || "",
},
}));
}
}, [isGlobalMode, isDirectMode, primaryGroupName]);
// 带锁的代理数据获取函数，防止并发请求
const fetchProxyData = useCallback(async (force = false) => {
const fetchProxyData = useCallback(
async (force = false) => {
// 防止重复请求
if (isRefreshingRef.current) {
pendingRefreshRef.current = true;
@ -184,15 +191,15 @@ export const CurrentProxyCard = () => {
// 过滤和格式化组
const filteredGroups = data.groups
.filter(g => g.name !== "DIRECT" && g.name !== "REJECT")
.map(g => ({
.filter((g) => g.name !== "DIRECT" && g.name !== "REJECT")
.map((g) => ({
name: g.name,
now: g.now || "",
all: g.all.map(p => p.name),
all: g.all.map((p) => p.name),
}));
// 使用函数式更新确保状态更新的原子性
setState(prev => {
setState((prev) => {
let newProxy = "";
let newDisplayProxy = null;
let newGroup = prev.selection.group;
@ -208,7 +215,9 @@ export const CurrentProxyCard = () => {
newDisplayProxy = data.records?.[newProxy] || null;
} 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) {
@ -241,9 +250,9 @@ export const CurrentProxyCard = () => {
},
selection: {
group: newGroup,
proxy: newProxy
proxy: newProxy,
},
displayProxy: newDisplayProxy
displayProxy: newDisplayProxy,
};
});
} catch (error) {
@ -257,11 +266,16 @@ export const CurrentProxyCard = () => {
setTimeout(() => fetchProxyData(), 100);
}
}
}, [isGlobalMode, isDirectMode]);
},
[isGlobalMode, isDirectMode],
);
// 响应 currentProxy 变化
useEffect(() => {
if (currentProxy && (!state.displayProxy || currentProxy.name !== state.displayProxy.name)) {
if (
currentProxy &&
(!state.displayProxy || currentProxy.name !== state.displayProxy.name)
) {
fetchProxyData(true);
}
}, [currentProxy, fetchProxyData, state.displayProxy]);
@ -285,14 +299,16 @@ export const CurrentProxyCard = () => {
if (isGlobalMode && state.proxyData.records) {
// 全局模式下的选项
return Object.keys(state.proxyData.records)
.filter(name => name !== "DIRECT" && name !== "REJECT")
.map(name => ({ name }));
.filter((name) => name !== "DIRECT" && name !== "REJECT")
.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) {
return group.all.map(name => ({ name }));
return group.all.map((name) => ({ name }));
}
return [];
}, [isDirectMode, isGlobalMode, state.proxyData, state.selection.group]);
@ -302,11 +318,12 @@ export const CurrentProxyCard = () => {
debounce((updateFn: (prev: ProxyState) => ProxyState) => {
setState(updateFn);
}, 50),
[]
[],
);
// 处理代理组变更
const handleGroupChange = useCallback((event: SelectChangeEvent) => {
const handleGroupChange = useCallback(
(event: SelectChangeEvent) => {
if (isGlobalMode || isDirectMode) return;
const newGroup = event.target.value;
@ -315,30 +332,33 @@ export const CurrentProxyCard = () => {
localStorage.setItem(STORAGE_KEY_GROUP, newGroup);
// 获取该组当前选中的代理
setState(prev => {
const group = prev.proxyData.groups.find(g => g.name === newGroup);
setState((prev) => {
const group = prev.proxyData.groups.find((g) => g.name === newGroup);
if (group) {
return {
...prev,
selection: {
group: newGroup,
proxy: group.now
proxy: group.now,
},
displayProxy: prev.proxyData.records[group.now] || null
displayProxy: prev.proxyData.records[group.now] || null,
};
}
return {
...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;
const newProxy = event.target.value;
@ -350,9 +370,9 @@ export const CurrentProxyCard = () => {
...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) {
getConnections().then(({ connections }) => {
connections.forEach(conn => {
connections.forEach((conn) => {
if (conn.chains.includes(previousProxy)) {
deleteConnection(conn.id);
}
@ -383,7 +403,18 @@ export const CurrentProxyCard = () => {
} catch (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(() => {
@ -402,12 +433,13 @@ export const CurrentProxyCard = () => {
const signalInfo = getSignalIcon(currentDelay);
// 自定义渲染选择框中的值
const renderProxyValue = useCallback((selected: string) => {
const renderProxyValue = useCallback(
(selected: string) => {
if (!selected || !state.proxyData.records[selected]) return selected;
const delayValue = delayManager.getDelayFix(
state.proxyData.records[selected],
state.selection.group
state.selection.group,
);
return (
@ -420,7 +452,9 @@ export const CurrentProxyCard = () => {
/>
</Box>
);
}, [state.proxyData.records, state.selection.group]);
},
[state.proxyData.records, state.selection.group],
);
return (
<EnhancedCard
@ -471,22 +505,48 @@ export const CurrentProxyCard = () => {
{proxyToDisplay.name}
</Typography>
<Box sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
<Typography variant="caption" color="text.secondary" sx={{ mr: 1 }}>
<Box
sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}
>
<Typography
variant="caption"
color="text.secondary"
sx={{ mr: 1 }}
>
{proxyToDisplay.type}
</Typography>
{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 && (
<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.tfo && <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" />}
{proxyToDisplay.udp && (
<Chip size="small" label="UDP" variant="outlined" />
)}
{proxyToDisplay.tfo && (
<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>
@ -500,7 +560,12 @@ export const CurrentProxyCard = () => {
)}
</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>
<Select
labelId="proxy-group-select-label"
@ -535,10 +600,12 @@ export const CurrentProxyCard = () => {
},
}}
>
{proxyOptions.map((proxy) => {
{isDirectMode
? null
: proxyOptions.map((proxy) => {
const delayValue = delayManager.getDelayFix(
state.proxyData.records[proxy.name],
state.selection.group
state.selection.group,
);
return (
<MenuItem