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

Revert "refactor: profile switch (#5197)"

Browse Source 
This reverts commit c2dcd86722.
This commit is contained in:
Tunglies
2025-10-30 18:11:04 +08:00
Unverified
parent 928f226d10
commit a869dbb441
36 changed files with 1257 additions and 5894 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
src/components/proxy/provider-button.tsx
View File

@@ -1,7 +1,6 @@
import { RefreshRounded, StorageOutlined } from "@mui/icons-material";
import {
Box,
Chip,
Button,
Dialog,
DialogActions,
@@ -19,7 +18,7 @@ import {
} from "@mui/material";
import { useLockFn } from "ahooks";
import dayjs from "dayjs";
import { useMemo, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { updateProxyProvider } from "tauri-plugin-mihomo-api";
@@ -49,61 +48,29 @@ const parseExpire = (expire?: number) => {
export const ProviderButton = () => {
const { t } = useTranslation();
const [open, setOpen] = useState(false);
const {
proxyProviders,
proxyHydration,
refreshProxy,
refreshProxyProviders,
} = useAppData();
const isHydrating = proxyHydration !== "live";
const { proxyProviders, refreshProxy, refreshProxyProviders } = useAppData();
const [updating, setUpdating] = useState<Record<string, boolean>>({});
// 检查是否有提供者
const hasProviders = Object.keys(proxyProviders || {}).length > 0;
// Hydration hint badge keeps users aware of sync state
const hydrationChip = useMemo(() => {
if (proxyHydration === "live") return null;
return (
<Chip
size="small"
color={proxyHydration === "snapshot" ? "warning" : "info"}
label={
proxyHydration === "snapshot"
? t("Snapshot data")
: t("Proxy data is syncing, please wait")
}
sx={{ fontWeight: 500 }}
/>
);
}, [proxyHydration, t]);
// 更新单个代理提供者
const updateProvider = useLockFn(async (name: string) => {
if (isHydrating) {
showNotice("info", t("Proxy data is syncing, please wait"));
return;
}
try {
// 设置更新状态
setUpdating((prev) => ({ ...prev, [name]: true }));
await updateProxyProvider(name);
await refreshProxyProviders();
// 刷新数据
await refreshProxy();
showNotice(
"success",
t("Provider {{name}} updated successfully", { name }),
);
await refreshProxyProviders();
showNotice("success", `${name} 更新成功`);
} catch (err: any) {
showNotice(
"error",
t("Provider {{name}} update failed: {{message}}", {
name,
message: err?.message || err.toString(),
}),
`${name} 更新失败: ${err?.message || err.toString()}`,
);
} finally {
// 清除更新状态
@@ -113,16 +80,11 @@ export const ProviderButton = () => {
// 更新所有代理提供者
const updateAllProviders = useLockFn(async () => {
if (isHydrating) {
showNotice("info", t("Proxy data is syncing, please wait"));
return;
}
try {
// 获取所有provider的名称
const allProviders = Object.keys(proxyProviders || {});
if (allProviders.length === 0) {
showNotice("info", t("No providers to update"));
showNotice("info", "没有可更新的代理提供者");
return;
}
@@ -148,67 +110,54 @@ export const ProviderButton = () => {
}
}
await refreshProxyProviders();
// 刷新数据
await refreshProxy();
showNotice("success", t("All providers updated successfully"));
await refreshProxyProviders();
showNotice("success", "全部代理提供者更新成功");
} catch (err: any) {
showNotice(
"error",
t("Failed to update providers: {{message}}", {
message: err?.message || err.toString(),
}),
);
showNotice("error", `更新失败: ${err?.message || err.toString()}`);
} finally {
// 清除所有更新状态
setUpdating({});
}
});
const handleClose = () => setOpen(false);
const handleClose = () => {
setOpen(false);
};
if (!hasProviders) return null;
return (
<>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mr: 1 }}>
<Button
variant="outlined"
size="small"
startIcon={<StorageOutlined />}
onClick={() => setOpen(true)}
disabled={isHydrating}
title={
isHydrating ? t("Proxy data is syncing, please wait") : undefined
}
>
{t("Proxy Provider")}
</Button>
{hydrationChip}
</Box>
<Button
variant="outlined"
size="small"
startIcon={<StorageOutlined />}
onClick={() => setOpen(true)}
sx={{ mr: 1 }}
>
{t("Proxy Provider")}
</Button>
<Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
<DialogTitle>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
}}
display="flex"
justifyContent="space-between"
alignItems="center"
>
<Typography variant="h6">{t("Proxy Provider")}</Typography>
<Button
variant="contained"
size="small"
onClick={updateAllProviders}
disabled={isHydrating}
title={
isHydrating
? t("Proxy data is syncing, please wait")
: undefined
}
>
{t("Update All")}
</Button>
<Box>
<Button
variant="contained"
size="small"
onClick={updateAllProviders}
>
{t("Update All")}
</Button>
</Box>
</Box>
</DialogTitle>
@@ -217,63 +166,54 @@ export const ProviderButton = () => {
{Object.entries(proxyProviders || {})
.sort()
.map(([key, item]) => {
if (!item) return null;
const time = dayjs(item.updatedAt);
const provider = item;
const time = dayjs(provider.updatedAt);
const isUpdating = updating[key];
const sub = item.subscriptionInfo;
const hasSubInfo = Boolean(sub);
const upload = sub?.Upload ?? 0;
const download = sub?.Download ?? 0;
const total = sub?.Total ?? 0;
const expire = sub?.Expire ?? 0;
// 订阅信息
const sub = provider.subscriptionInfo;
const hasSubInfo = !!sub;
const upload = sub?.Upload || 0;
const download = sub?.Download || 0;
const total = sub?.Total || 0;
const expire = sub?.Expire || 0;
// 流量使用进度
const progress =
total > 0
? Math.min(
Math.round(((download + upload) * 100) / total) + 1,
100,
Math.max(0, ((upload + download) / total) * 100),
)
: 0;
return (
<ListItem
key={key}
secondaryAction={
<Box
sx={{
width: 40,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<IconButton
size="small"
color="primary"
onClick={() => updateProvider(key)}
disabled={isUpdating || isHydrating}
sx={{
animation: isUpdating
? "spin 1s linear infinite"
: "none",
"@keyframes spin": {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
}}
title={t("Update Provider") as string}
>
<RefreshRounded />
</IconButton>
</Box>
}
sx={{
mb: 1,
borderRadius: 1,
border: "1px solid",
borderColor: alpha("#ccc", 0.4),
backgroundColor: alpha("#fff", 0.02),
}}
sx={[
{
p: 0,
mb: "8px",
borderRadius: 2,
overflow: "hidden",
transition: "all 0.2s",
},
({ palette: { mode, primary } }) => {
const bgcolor =
mode === "light" ? "#ffffff" : "#24252f";
const hoverColor =
mode === "light"
? alpha(primary.main, 0.1)
: alpha(primary.main, 0.2);
return {
backgroundColor: bgcolor,
"&:hover": {
backgroundColor: hoverColor,
},
};
},
]}
>
<ListItemText
sx={{ px: 2, py: 1 }}
@@ -283,7 +223,6 @@ export const ProviderButton = () => {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: 1,
}}
>
<Typography
@@ -293,12 +232,12 @@ export const ProviderButton = () => {
title={key}
sx={{ display: "flex", alignItems: "center" }}
>
<span style={{ marginRight: 8 }}>{key}</span>
<span style={{ marginRight: "8px" }}>{key}</span>
<TypeBox component="span">
{item.proxies.length}
{provider.proxies.length}
</TypeBox>
<TypeBox component="span">
{item.vehicleType}
{provider.vehicleType}
</TypeBox>
</Typography>
@@ -313,39 +252,72 @@ export const ProviderButton = () => {
</Box>
}
secondary={
hasSubInfo ? (
<>
<Box
sx={{
mb: 1,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<span title={t("Used / Total") as string}>
{parseTraffic(upload + download)} /{" "}
{parseTraffic(total)}
</span>
<span title={t("Expire Time") as string}>
{parseExpire(expire)}
</span>
</Box>
<>
{/* 订阅信息 */}
{hasSubInfo && (
<>
<Box
sx={{
mb: 1,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<span title={t("Used / Total") as string}>
{parseTraffic(upload + download)} /{" "}
{parseTraffic(total)}
</span>
<span title={t("Expire Time") as string}>
{parseExpire(expire)}
</span>
</Box>
<LinearProgress
variant="determinate"
value={progress}
sx={{
height: 6,
borderRadius: 3,
opacity: total > 0 ? 1 : 0,
}}
/>
</>
) : null
{/* 进度条 */}
<LinearProgress
variant="determinate"
value={progress}
sx={{
height: 6,
borderRadius: 3,
opacity: total > 0 ? 1 : 0,
}}
/>
</>
)}
</>
}
/>
<Divider orientation="vertical" flexItem />
<Box
sx={{
width: 40,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<IconButton
size="small"
color="primary"
onClick={() => {
updateProvider(key);
}}
disabled={isUpdating}
sx={{
animation: isUpdating
? "spin 1s linear infinite"
: "none",
"@keyframes spin": {
"0%": { transform: "rotate(0deg)" },
"100%": { transform: "rotate(360deg)" },
},
}}
title={t("Update Provider") as string}
>
<RefreshRounded />
</IconButton>
</Box>
</ListItem>
);
})}

122
src/components/proxy/proxy-groups.tsx
View File

@@ -61,17 +61,10 @@ export const ProxyGroups = (props: Props) => {
}>({ open: false, message: "" });
const { verge } = useVerge();
const {
proxies: proxiesData,
proxyHydration,
proxyTargetProfileId,
proxyDisplayProfileId,
isProxyRefreshPending,
} = useAppData();
const { proxies: proxiesData } = useAppData();
const groups = proxiesData?.groups;
const availableGroups = useMemo(() => groups ?? [], [groups]);
const showHydrationOverlay = isProxyRefreshPending;
const pendingProfileSwitch = proxyTargetProfileId !== proxyDisplayProfileId;
const defaultRuleGroup = useMemo(() => {
if (isChainMode && mode === "rule" && availableGroups.length > 0) {
return availableGroups[0].name;
@@ -83,35 +76,6 @@ export const ProxyGroups = (props: Props) => {
() => selectedGroup ?? defaultRuleGroup,
[selectedGroup, defaultRuleGroup],
);
const hydrationChip = useMemo(() => {
if (proxyHydration === "live") return null;
const label =
proxyHydration === "snapshot" ? t("Snapshot data") : t("Syncing...");
return (
<Chip
size="small"
color={proxyHydration === "snapshot" ? "warning" : "info"}
label={label}
sx={{ fontWeight: 500, height: 22 }}
/>
);
}, [proxyHydration, t]);
const overlayMessage = useMemo(() => {
if (!showHydrationOverlay) return null;
if (pendingProfileSwitch) {
return t("Loading proxy data for the selected profile...");
}
if (proxyHydration === "snapshot") {
return t("Preparing proxy snapshot...");
}
return t("Syncing proxy data...");
}, [showHydrationOverlay, pendingProfileSwitch, proxyHydration, t]);
const { renderList, onProxies, onHeadState } = useRenderList(
mode,
@@ -129,7 +93,7 @@ export const ProxyGroups = (props: Props) => {
[renderList],
);
// 系统代理选择
// 统代理选择
const { handleProxyGroupChange } = useProxySelection({
onSuccess: () => {
onProxies();
@@ -342,7 +306,12 @@ export const ProxyGroups = (props: Props) => {
try {
await Promise.race([
delayManager.checkListDelay(names, groupName, timeout),
delayGroup(groupName, url, timeout),
delayGroup(groupName, url, timeout).then((result) => {
console.log(
`[ProxyGroups] getGroupProxyDelays返回结果数量:`,
Object.keys(result || {}).length,
);
}), // 查询group delays 将清除fixed(不关注调用结果)
]);
console.log(`[ProxyGroups] 延迟测试完成，组: ${groupName}`);
} catch (error) {
@@ -407,11 +376,6 @@ export const ProxyGroups = (props: Props) => {
}
if (isChainMode) {
const chainVirtuosoHeight =
mode === "rule" && proxyGroupNames.length > 0
? "calc(100% - 80px)"
: "calc(100% - 14px)";
// 获取所有代理组
const proxyGroups = proxiesData?.groups || [];
@@ -490,7 +454,10 @@ export const ProxyGroups = (props: Props) => {
<Virtuoso
ref={virtuosoRef}
style={{
height: chainVirtuosoHeight,
height:
mode === "rule" && proxyGroups.length > 0
? "calc(100% - 80px)" // 只有标题的高度
: "calc(100% - 14px)",
}}
totalCount={renderList.length}
increaseViewportBy={{ top: 200, bottom: 200 }}
@@ -581,9 +548,7 @@ export const ProxyGroups = (props: Props) => {
{group.name}
</Typography>
<Typography variant="caption" color="text.secondary">
{`${t("Group Type")}: ${group.type} · ${t("Proxy Count")}: ${
Array.isArray(group.all) ? group.all.length : 0
}`}
{group.type} · {group.all.length} 节点
</Typography>
</Box>
</MenuItem>
@@ -591,7 +556,7 @@ export const ProxyGroups = (props: Props) => {
{availableGroups.length === 0 && (
<MenuItem disabled>
<Typography variant="body2" color="text.secondary">
{t("Empty")}
暂无可用代理组
</Typography>
</MenuItem>
)}
@@ -602,29 +567,9 @@ export const ProxyGroups = (props: Props) => {
return (
<div
style={{
position: "relative",
height: "100%",
willChange: "transform",
opacity: showHydrationOverlay ? 0.45 : 1,
transition: "opacity 120ms ease",
}}
style={{ position: "relative", height: "100%", willChange: "transform" }}
>
{hydrationChip && (
<Box
sx={{
position: "absolute",
top: 8,
right: 16,
zIndex: 2,
display: "flex",
alignItems: "center",
gap: 8,
}}
>
{hydrationChip}
</Box>
)}
{/* 代理组导航栏 */}
{mode === "rule" && (
<ProxyGroupNavigator
proxyGroupNames={proxyGroupNames}
@@ -663,39 +608,6 @@ export const ProxyGroups = (props: Props) => {
)}
/>
<ScrollTopButton show={showScrollTop} onClick={scrollToTop} />
{showHydrationOverlay && overlayMessage && (
<Box
sx={{
position: "absolute",
inset: 0,
zIndex: 3,
display: "flex",
alignItems: "center",
justifyContent: "center",
pointerEvents: "auto",
cursor: "wait",
backgroundColor: "rgba(8, 8, 8, 0.12)",
}}
>
<Box
sx={{
px: 2.5,
py: 1.5,
borderRadius: 1,
bgcolor: "background.paper",
boxShadow: 3,
}}
>
<Typography
variant="body2"
color="text.secondary"
sx={{ fontWeight: 500 }}
>
{overlayMessage}
</Typography>
</Box>
</Box>
)}
</div>
);
};

89
src/components/proxy/use-render-list.ts
View File

@@ -14,13 +14,50 @@ import {
} from "./use-head-state";
import { useWindowWidth } from "./use-window-width";
type RenderGroup = IProxyGroupItem;
// 定义代理项接口
interface IProxyItem {
name: string;
type: string;
udp: boolean;
xudp: boolean;
tfo: boolean;
mptcp: boolean;
smux: boolean;
history: {
time: string;
delay: number;
}[];
provider?: string;
testUrl?: string;
[key: string]: any; // 添加索引签名以适应其他可能的属性
}
// 代理组类型
type ProxyGroup = {
name: string;
type: string;
udp: boolean;
xudp: boolean;
tfo: boolean;
mptcp: boolean;
smux: boolean;
history: {
time: string;
delay: number;
}[];
now: string;
all: IProxyItem[];
hidden?: boolean;
icon?: string;
testUrl?: string;
provider?: string;
};
export interface IRenderItem {
// 组 | head | item | empty | item col
type: 0 | 1 | 2 | 3 | 4;
key: string;
group: RenderGroup;
group: ProxyGroup;
proxy?: IProxyItem;
col?: number;
proxyCol?: IProxyItem[];
@@ -62,7 +99,7 @@ export const useRenderList = (
selectedGroup?: string | null,
) => {
// 使用全局数据提供者
const { proxies: proxiesData, proxyHydration, refreshProxy } = useAppData();
const { proxies: proxiesData, refreshProxy } = useAppData();
const { verge } = useVerge();
const { width } = useWindowWidth();
const [headStates, setHeadState] = useHeadStateNew();
@@ -86,29 +123,17 @@ export const useRenderList = (
// 确保代理数据加载
useEffect(() => {
if (!proxiesData || proxyHydration !== "live") return;
if (!proxiesData) return;
const { groups, proxies } = proxiesData;
if (
(mode === "rule" && !groups.length) ||
(mode === "global" && proxies.length < 2)
) {
const handle = setTimeout(() => {
void refreshProxy().catch(() => {});
}, 500);
const handle = setTimeout(() => refreshProxy(), 500);
return () => clearTimeout(handle);
}
}, [proxiesData, proxyHydration, mode, refreshProxy]);
useEffect(() => {
if (proxyHydration !== "snapshot") return;
const handle = setTimeout(() => {
void refreshProxy().catch(() => {});
}, 1800);
return () => clearTimeout(handle);
}, [proxyHydration, refreshProxy]);
}, [proxiesData, mode, refreshProxy]);
// 链式代理模式节点自动计算延迟
useEffect(() => {
@@ -122,7 +147,7 @@ export const useRenderList = (
// 设置组监听器，当有延迟更新时自动刷新
const groupListener = () => {
console.log("[ChainMode] 延迟更新，刷新UI");
void refreshProxy().catch(() => {});
refreshProxy();
};
delayManager.setGroupListener("chain-mode", groupListener);
@@ -163,12 +188,9 @@ export const useRenderList = (
// 链式代理模式下，显示代理组和其节点
if (isChainMode && runtimeConfig && mode === "rule") {
// 使用正常的规则模式代理组
const chainGroups = proxiesData.groups ?? [];
const allGroups = chainGroups.length
? chainGroups
: proxiesData.global
? [proxiesData.global]
: [];
const allGroups = proxiesData.groups.length
? proxiesData.groups
: [proxiesData.global!];
// 如果选择了特定代理组，只显示该组的节点
if (selectedGroup) {
@@ -260,7 +282,7 @@ export const useRenderList = (
});
// 创建一个虚拟的组来容纳所有节点
const virtualGroup: RenderGroup = {
const virtualGroup: ProxyGroup = {
name: "All Proxies",
type: "Selector",
udp: false,
@@ -318,7 +340,7 @@ export const useRenderList = (
});
// 创建一个虚拟的组来容纳所有节点
const virtualGroup: RenderGroup = {
const virtualGroup: ProxyGroup = {
name: "All Proxies",
type: "Selector",
udp: false,
@@ -358,15 +380,12 @@ export const useRenderList = (
// 正常模式的渲染逻辑
const useRule = mode === "rule" || mode === "script";
const renderGroups = (() => {
const groups = proxiesData.groups ?? [];
if (useRule && groups.length) {
return groups;
}
return proxiesData.global ? [proxiesData.global] : groups;
})();
const renderGroups =
useRule && proxiesData.groups.length
? proxiesData.groups
: [proxiesData.global!];
const retList = renderGroups.flatMap((group: RenderGroup) => {
const retList = renderGroups.flatMap((group: ProxyGroup) => {
const headState = headStates[group.name] || DEFAULT_STATE;
const ret: IRenderItem[] = [
{