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

perf: optimize all home page components

Browse Source
This commit is contained in:
wonfen 2025-03-17 11:47:02 +08:00
parent 6239f81f36
commit 105de99d06
13 changed files with 1612 additions and 1726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/components/home/clash-info-card.tsx
View File

@ -7,47 +7,94 @@ import { EnhancedCard } from "./enhanced-card";
import useSWR from "swr";
import { getRules } from "@/services/api";
import { getAppUptime } from "@/services/cmds";
import { useState } from "react";
import { useMemo } from "react";
// 将毫秒转换为时:分:秒格式的函数
const formatUptime = (uptimeMs: number) => {
const hours = Math.floor(uptimeMs / 3600000);
const minutes = Math.floor((uptimeMs % 3600000) / 60000);
const seconds = Math.floor((uptimeMs % 60000) / 1000);
return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
};
export const ClashInfoCard = () => {
const { t } = useTranslation();
const { clashInfo } = useClashInfo();
const { version: clashVersion } = useClash();
// 计算运行时间
const [uptime, setUptime] = useState("0:00:00");
// 使用SWR定期获取应用运行时间
useSWR(
// 使用SWR获取应用运行时间，降低更新频率
const { data: uptimeMs = 0 } = useSWR(
"appUptime",
async () => {
const uptimeMs = await getAppUptime();
// 将毫秒转换为时:分:秒格式
const hours = Math.floor(uptimeMs / 3600000);
const minutes = Math.floor((uptimeMs % 3600000) / 60000);
const seconds = Math.floor((uptimeMs % 60000) / 1000);
setUptime(
`${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`,
);
return uptimeMs;
},
getAppUptime,
{
refreshInterval: 1000, // 每秒更新一次
refreshInterval: 1000,
revalidateOnFocus: false,
dedupingInterval: 500,
dedupingInterval: 1000,
},
);
// 获取规则数
const { data: rulesData } = useSWR("getRules", getRules, {
fallbackData: [],
suspense: false,
// 使用useMemo缓存格式化后的uptime，避免频繁计算
const uptime = useMemo(() => formatUptime(uptimeMs), [uptimeMs]);
// 获取规则数据，只在组件加载时获取一次
const { data: rules = [] } = useSWR("getRules", getRules, {
revalidateOnFocus: false,
errorRetryCount: 2,
});
// 获取规则数据
const rules = rulesData || [];
// 使用备忘录组件内容，减少重新渲染
const cardContent = useMemo(() => {
if (!clashInfo) return null;
return (
<Stack spacing={1.5}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Core Version")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashVersion || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("System Proxy Address")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashInfo.server || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Mixed Port")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashInfo.mixed_port || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Uptime")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{uptime}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Rules Count")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{rules.length}
</Typography>
</Stack>
</Stack>
);
}, [clashInfo, clashVersion, t, uptime, rules.length]);
return (
<EnhancedCard
@ -56,54 +103,7 @@ export const ClashInfoCard = () => {
iconColor="warning"
action={null}
>
{clashInfo && (
<Stack spacing={1.5}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Core Version")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashVersion || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("System Proxy Address")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashInfo.server || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Mixed Port")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{clashInfo.mixed_port || "-"}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Uptime")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{uptime}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Rules Count")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{rules.length}
</Typography>
</Stack>
</Stack>
)}
{cardContent}
</EnhancedCard>
);
};

216
src/components/home/clash-mode-card.tsx
View File

@ -10,7 +10,7 @@ import {
MultipleStopRounded,
DirectionsRounded,
} from "@mui/icons-material";
import { useState, useEffect } from "react";
import { useState, useEffect, useMemo } from "react";
export const ClashModeCard = () => {
const { t } = useTranslation();
@ -20,15 +20,13 @@ export const ClashModeCard = () => {
const { data: clashConfig, mutate: mutateClash } = useSWR(
"getClashConfig",
getClashConfig,
{
revalidateOnFocus: false,
},
{ revalidateOnFocus: false }
);
// 支持的模式列表 - 添加直连模式
const modeList = ["rule", "global", "direct"];
// 支持的模式列表
const modeList = useMemo(() => ["rule", "global", "direct"] as const, []);
// 本地状态记录当前模式，提供更快的UI响应
// 本地状态记录当前模式
const [localMode, setLocalMode] = useState<string>("rule");
// 当从API获取到当前模式时更新本地状态
@ -38,25 +36,27 @@ export const ClashModeCard = () => {
}
}, [clashConfig]);
// 模式图标映射
const modeIcons = useMemo(() => ({
rule: <MultipleStopRounded fontSize="small" />,
global: <LanguageRounded fontSize="small" />,
direct: <DirectionsRounded fontSize="small" />
}), []);
// 切换模式的处理函数
const onChangeMode = useLockFn(async (mode: string) => {
// 如果已经是当前模式，不做任何操作
if (mode === localMode) return;
// 立即更新本地UI状态
setLocalMode(mode);
// 断开连接（如果启用了设置）
if (verge?.auto_close_connection) {
closeAllConnections();
}
try {
await patchClashMode(mode);
// 成功后刷新数据
mutateClash();
} catch (error) {
// 如果操作失败，恢复之前的状态
console.error("Failed to change mode:", error);
if (clashConfig?.mode) {
setLocalMode(clashConfig.mode.toLowerCase());
@ -64,32 +64,55 @@ export const ClashModeCard = () => {
}
});
// 获取模式对应的图标
const getModeIcon = (mode: string) => {
switch (mode) {
case "rule":
return <MultipleStopRounded fontSize="small" />;
case "global":
return <LanguageRounded fontSize="small" />;
case "direct":
return <DirectionsRounded fontSize="small" />;
default:
return null;
}
};
// 按钮样式
const buttonStyles = (mode: string) => ({
cursor: "pointer",
px: 2,
py: 1.2,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
bgcolor: mode === localMode ? "primary.main" : "background.paper",
color: mode === localMode ? "primary.contrastText" : "text.primary",
borderRadius: 1.5,
transition: "all 0.2s ease-in-out",
position: "relative",
overflow: "visible",
"&:hover": {
transform: "translateY(-1px)",
boxShadow: 1,
},
"&:active": {
transform: "translateY(1px)",
},
"&::after": mode === localMode
? {
content: '""',
position: "absolute",
bottom: -16,
left: "50%",
width: 2,
height: 16,
bgcolor: "primary.main",
transform: "translateX(-50%)",
}
: {},
});
// 获取模式说明文字
const getModeDescription = (mode: string) => {
switch (mode) {
case "rule":
return t("Rule Mode Description");
case "global":
return t("Global Mode Description");
case "direct":
return t("Direct Mode Description");
default:
return "";
}
// 描述样式
const descriptionStyles = {
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
wordBreak: "break-word",
hyphens: "auto",
};
return (
@ -111,44 +134,9 @@ export const ClashModeCard = () => {
key={mode}
elevation={mode === localMode ? 2 : 0}
onClick={() => onChangeMode(mode)}
sx={{
cursor: "pointer",
px: 2,
py: 1.2,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
bgcolor: mode === localMode ? "primary.main" : "background.paper",
color:
mode === localMode ? "primary.contrastText" : "text.primary",
borderRadius: 1.5,
transition: "all 0.2s ease-in-out",
position: "relative",
overflow: "visible",
"&:hover": {
transform: "translateY(-1px)",
boxShadow: 1,
},
"&:active": {
transform: "translateY(1px)",
},
"&::after":
mode === localMode
? {
content: '""',
position: "absolute",
bottom: -16,
left: "50%",
width: 2,
height: 16,
bgcolor: "primary.main",
transform: "translateX(-50%)",
}
: {},
}}
sx={buttonStyles(mode)}
>
{getModeIcon(mode)}
{modeIcons[mode]}
<Typography
variant="body2"
sx={{
@ -173,77 +161,15 @@ export const ClashModeCard = () => {
overflow: "visible",
}}
>
{localMode === "rule" && (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
wordBreak: "break-word",
hyphens: "auto",
}}
>
{getModeDescription("rule")}
</Typography>
</Fade>
)}
{localMode === "global" && (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
wordBreak: "break-word",
hyphens: "auto",
}}
>
{getModeDescription("global")}
</Typography>
</Fade>
)}
{localMode === "direct" && (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
wordBreak: "break-word",
hyphens: "auto",
}}
>
{getModeDescription("direct")}
</Typography>
</Fade>
)}
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={descriptionStyles}
>
{t(`${localMode} Mode Description`)}
</Typography>
</Fade>
</Box>
</Box>
);

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

@ -13,7 +13,7 @@ import {
SelectChangeEvent,
Tooltip,
} from "@mui/material";
import { useEffect, useState } from "react";
import { useEffect, useState, useMemo, useCallback, useRef } from "react";
import {
SignalWifi4Bar as SignalStrong,
SignalWifi3Bar as SignalGood,
@ -45,17 +45,7 @@ interface ProxyOption {
}
// 将delayManager返回的颜色格式转换为MUI Chip组件需要的格式
function convertDelayColor(
delayValue: number,
):
| "default"
| "success"
| "warning"
| "error"
| "primary"
| "secondary"
| "info"
| undefined {
function convertDelayColor(delayValue: number) {
const colorStr = delayManager.formatDelayColor(delayValue);
if (!colorStr) return "default";
@ -63,394 +53,321 @@ function convertDelayColor(
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";
}
}
// 根据延迟值获取合适的WiFi信号图标
function getSignalIcon(delay: number): {
icon: JSX.Element;
text: string;
color: string;
} {
function getSignalIcon(delay: number) {
if (delay < 0)
return {
icon: <SignalNone />,
text: "未测试",
color: "text.secondary",
};
return { icon: <SignalNone />, text: "未测试", color: "text.secondary" };
if (delay >= 10000)
return {
icon: <SignalError />,
text: "超时",
color: "error.main",
};
return { icon: <SignalError />, text: "超时", color: "error.main" };
if (delay >= 500)
return {
icon: <SignalWeak />,
text: "延迟较高",
color: "error.main",
};
return { icon: <SignalWeak />, text: "延迟较高", color: "error.main" };
if (delay >= 300)
return {
icon: <SignalMedium />,
text: "延迟中等",
color: "warning.main",
};
return { icon: <SignalMedium />, text: "延迟中等", color: "warning.main" };
if (delay >= 200)
return {
icon: <SignalGood />,
text: "延迟良好",
color: "info.main",
};
return {
icon: <SignalStrong />,
text: "延迟极佳",
color: "success.main",
return { icon: <SignalGood />, text: "延迟良好", color: "info.main" };
return { icon: <SignalStrong />, text: "延迟极佳", color: "success.main" };
}
// 简单的防抖函数
function debounce(fn: Function, ms = 100) {
let timeoutId: ReturnType<typeof setTimeout>;
return function(this: any, ...args: any[]) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn.apply(this, args), ms);
};
}
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();
// 判断模式
const isGlobalMode = mode === "global";
const isDirectMode = mode === "direct"; // 添加直连模式判断
const isDirectMode = mode === "direct";
// 从本地存储获取初始值，如果是特殊模式或没有存储值则使用默认值
const getSavedGroup = () => {
// 全局模式使用 GLOBAL 组
if (isGlobalMode) {
return "GLOBAL";
}
// 直连模式使用 DIRECT
if (isDirectMode) {
return "DIRECT";
}
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
return savedGroup || primaryGroupName || "GLOBAL";
// 使用 useRef 存储最后一次刷新时间和是否正在刷新
const lastRefreshRef = useRef<number>(0);
const isRefreshingRef = useRef<boolean>(false);
const pendingRefreshRef = useRef<boolean>(false);
// 定义状态类型
type ProxyState = {
proxyData: {
groups: { name: string; now: string; all: string[] }[];
records: Record<string, any>;
globalProxy: string;
directProxy: any;
};
selection: {
group: string;
proxy: string;
};
displayProxy: any;
};
// 状态管理
const [groups, setGroups] = useState<
{ name: string; now: string; all: string[] }[]
>([]);
const [selectedGroup, setSelectedGroup] = useState<string>(getSavedGroup());
const [proxyOptions, setProxyOptions] = useState<ProxyOption[]>([]);
const [selectedProxy, setSelectedProxy] = useState<string>("");
const [displayProxy, setDisplayProxy] = useState<any>(null);
const [records, setRecords] = useState<Record<string, any>>({});
const [globalProxy, setGlobalProxy] = useState<string>(""); // 存储全局代理
const [directProxy, setDirectProxy] = useState<any>(null); // 存储直连代理信息
// 合并状态，减少状态更新次数
const [state, setState] = useState<ProxyState>({
proxyData: {
groups: [],
records: {},
globalProxy: "",
directProxy: null,
},
selection: {
group: "",
proxy: "",
},
displayProxy: null,
});
// 保存选择的代理组到本地存储
useEffect(() => {
// 只有在普通模式下才保存到本地存储
if (selectedGroup && !isGlobalMode && !isDirectMode) {
localStorage.setItem(STORAGE_KEY_GROUP, selectedGroup);
}
}, [selectedGroup, isGlobalMode, isDirectMode]);
// 保存选择的代理节点到本地存储
useEffect(() => {
// 只有在普通模式下才保存到本地存储
if (selectedProxy && !isGlobalMode && !isDirectMode) {
localStorage.setItem(STORAGE_KEY_PROXY, selectedProxy);
}
}, [selectedProxy, isGlobalMode, isDirectMode]);
// 当模式变化时更新选择的组
// 初始化选择的组
useEffect(() => {
// 根据模式确定初始组
if (isGlobalMode) {
setSelectedGroup("GLOBAL");
setState(prev => ({
...prev,
selection: {
...prev.selection,
group: "GLOBAL"
}
}));
} else if (isDirectMode) {
setSelectedGroup("DIRECT");
} else if (primaryGroupName) {
setState(prev => ({
...prev,
selection: {
...prev.selection,
group: "DIRECT"
}
}));
} else {
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
setSelectedGroup(savedGroup || primaryGroupName);
setState(prev => ({
...prev,
selection: {
...prev.selection,
group: savedGroup || primaryGroupName || ""
}
}));
}
}, [isGlobalMode, isDirectMode, primaryGroupName]);
// 获取所有代理组和代理信息
useEffect(() => {
const fetchProxies = async () => {
try {
const data = await getProxies();
// 保存所有节点记录信息，用于显示详细节点信息
setRecords(data.records);
// 检查并存储全局代理信息
if (data.global) {
setGlobalProxy(data.global.now || "");
}
// 查找并存储直连代理信息
if (data.records && data.records["DIRECT"]) {
setDirectProxy(data.records["DIRECT"]);
}
const filteredGroups = data.groups
.filter((g) => g.name !== "DIRECT" && g.name !== "REJECT")
.map((g) => ({
name: g.name,
now: g.now || "",
all: g.all.map((p) => p.name),
}));
setGroups(filteredGroups);
// 直连模式处理
if (isDirectMode) {
// 直连模式下使用 DIRECT 节点
setSelectedGroup("DIRECT");
setSelectedProxy("DIRECT");
if (data.records && data.records["DIRECT"]) {
setDisplayProxy(data.records["DIRECT"]);
}
// 设置仅包含 DIRECT 节点的选项
setProxyOptions([{ name: "DIRECT" }]);
return;
}
// 全局模式处理
if (isGlobalMode) {
// 在全局模式下，使用 GLOBAL 组和 data.global.now 作为选中节点
if (data.global) {
const globalNow = data.global.now || "";
setSelectedGroup("GLOBAL");
setSelectedProxy(globalNow);
if (globalNow && data.records[globalNow]) {
setDisplayProxy(data.records[globalNow]);
}
// 设置全局组的代理选项
const options = data.global.all.map((proxy) => ({
name: proxy.name,
}));
setProxyOptions(options);
}
return;
}
// 以下是普通模式的处理逻辑
let targetGroup = primaryGroupName;
// 非特殊模式下，尝试从本地存储获取上次选择的代理组
const savedGroup = localStorage.getItem(STORAGE_KEY_GROUP);
targetGroup = savedGroup || primaryGroupName;
// 如果目标组在列表中，则选择它
if (targetGroup && filteredGroups.some((g) => g.name === targetGroup)) {
setSelectedGroup(targetGroup);
// 设置该组下的代理选项
const currentGroup = filteredGroups.find(
(g) => g.name === targetGroup,
);
if (currentGroup) {
// 创建代理选项
const options = currentGroup.all.map((proxyName) => {
return { name: proxyName };
});
setProxyOptions(options);
let targetProxy = currentGroup.now;
const savedProxy = localStorage.getItem(STORAGE_KEY_PROXY);
// 如果有保存的代理节点且该节点在当前组中，则选择它
if (savedProxy && currentGroup.all.includes(savedProxy)) {
targetProxy = savedProxy;
}
setSelectedProxy(targetProxy);
if (targetProxy && data.records[targetProxy]) {
setDisplayProxy(data.records[targetProxy]);
}
}
} else if (filteredGroups.length > 0) {
// 否则选择第一个组
setSelectedGroup(filteredGroups[0].name);
// 创建代理选项
const options = filteredGroups[0].all.map((proxyName) => {
return { name: proxyName };
});
setProxyOptions(options);
setSelectedProxy(filteredGroups[0].now);
// 更新显示的代理节点信息
if (filteredGroups[0].now && data.records[filteredGroups[0].now]) {
setDisplayProxy(data.records[filteredGroups[0].now]);
}
}
} catch (error) {
console.error("获取代理信息失败", error);
}
};
fetchProxies();
}, [primaryGroupName, isGlobalMode, isDirectMode]);
// 当选择的组发生变化时更新代理选项
useEffect(() => {
// 如果是特殊模式，已在 fetchProxies 中处理
if (isGlobalMode || isDirectMode) return;
const group = groups.find((g) => g.name === selectedGroup);
if (group && records) {
// 创建代理选项
const options = group.all.map((proxyName) => {
return { name: proxyName };
});
setProxyOptions(options);
let targetProxy = group.now;
const savedProxy = localStorage.getItem(STORAGE_KEY_PROXY);
// 如果保存的代理节点在当前组中，则选择它
if (savedProxy && group.all.includes(savedProxy)) {
targetProxy = savedProxy;
}
setSelectedProxy(targetProxy);
if (targetProxy && records[targetProxy]) {
setDisplayProxy(records[targetProxy]);
}
// 带锁的代理数据获取函数，防止并发请求
const fetchProxyData = useCallback(async (force = false) => {
// 防止重复请求
if (isRefreshingRef.current) {
pendingRefreshRef.current = true;
return;
}
}, [selectedGroup, groups, records, isGlobalMode, isDirectMode]);
// 刷新代理信息
const refreshProxyData = async () => {
// 检查刷新间隔
const now = Date.now();
if (!force && now - lastRefreshRef.current < 1000) {
return;
}
isRefreshingRef.current = true;
lastRefreshRef.current = now;
try {
const data = await getProxies();
// 更新所有代理记录
setRecords(data.records);
// 更新代理组信息
// 过滤和格式化组
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),
}));
setGroups(filteredGroups);
// 使用函数式更新确保状态更新的原子性
setState(prev => {
let newProxy = "";
let newDisplayProxy = null;
let newGroup = prev.selection.group;
// 检查并更新全局代理信息
if (isGlobalMode && data.global) {
const globalNow = data.global.now || "";
setSelectedProxy(globalNow);
// 根据模式确定新代理
if (isDirectMode) {
newGroup = "DIRECT";
newProxy = "DIRECT";
newDisplayProxy = data.records?.DIRECT || null;
} else if (isGlobalMode && data.global) {
newGroup = "GLOBAL";
newProxy = data.global.now || "";
newDisplayProxy = data.records?.[newProxy] || null;
} else {
// 普通模式 - 检查当前选择的组是否存在
const currentGroup = filteredGroups.find(g => g.name === prev.selection.group);
if (globalNow && data.records[globalNow]) {
setDisplayProxy(data.records[globalNow]);
}
// 如果当前组不存在或为空，自动选择第一个组
if (!currentGroup && filteredGroups.length > 0) {
newGroup = filteredGroups[0].name;
const firstGroup = filteredGroups[0];
newProxy = firstGroup.now;
newDisplayProxy = data.records?.[newProxy] || null;
// 更新全局组的代理选项
const options = data.global.all.map((proxy) => ({
name: proxy.name,
}));
setProxyOptions(options);
}
// 更新直连代理信息
else if (isDirectMode && data.records["DIRECT"]) {
setDirectProxy(data.records["DIRECT"]);
setDisplayProxy(data.records["DIRECT"]);
}
// 更新普通模式下当前选中组的信息
else {
const currentGroup = filteredGroups.find(
(g) => g.name === selectedGroup,
);
if (currentGroup) {
// 如果当前选中的代理节点与组中的now不一致，则需要更新
if (currentGroup.now !== selectedProxy) {
setSelectedProxy(currentGroup.now);
if (data.records[currentGroup.now]) {
setDisplayProxy(data.records[currentGroup.now]);
// 保存到本地存储
if (!isGlobalMode && !isDirectMode) {
localStorage.setItem(STORAGE_KEY_GROUP, newGroup);
if (newProxy) {
localStorage.setItem(STORAGE_KEY_PROXY, newProxy);
}
}
} else if (currentGroup) {
// 使用当前组的代理
newProxy = currentGroup.now;
newDisplayProxy = data.records?.[newProxy] || null;
}
// 更新代理选项
const options = currentGroup.all.map((proxyName) => ({
name: proxyName,
}));
setProxyOptions(options);
}
}
// 返回新状态
return {
proxyData: {
groups: filteredGroups,
records: data.records || {},
globalProxy: data.global?.now || "",
directProxy: data.records?.DIRECT || null,
},
selection: {
group: newGroup,
proxy: newProxy
},
displayProxy: newDisplayProxy
};
});
} catch (error) {
console.error("刷新代理信息失败", error);
console.error("获取代理信息失败", error);
} finally {
isRefreshingRef.current = false;
// 处理待处理的刷新请求
if (pendingRefreshRef.current) {
pendingRefreshRef.current = false;
setTimeout(() => fetchProxyData(), 100);
}
}
};
}, [isGlobalMode, isDirectMode]);
// 每隔一段时间刷新代理信息 - 修改为在所有模式下都刷新
// 响应 currentProxy 变化
useEffect(() => {
// 初始刷新一次
refreshProxyData();
if (currentProxy && (!state.displayProxy || currentProxy.name !== state.displayProxy.name)) {
fetchProxyData(true);
}
}, [currentProxy, fetchProxyData, state.displayProxy]);
// 定期刷新所有模式下的代理信息
const refreshInterval = setInterval(refreshProxyData, 2000);
return () => clearInterval(refreshInterval);
}, [isGlobalMode, isDirectMode, selectedGroup]); // 依赖项添加selectedGroup以便在切换组时重新设置定时器
// 平滑的定期刷新，使用固定间隔
useEffect(() => {
fetchProxyData();
const intervalId = setInterval(() => {
fetchProxyData();
}, 3000); // 使用固定的3秒间隔，平衡响应速度和性能
return () => clearInterval(intervalId);
}, [fetchProxyData]);
// 计算要显示的代理选项 - 使用 useMemo 优化
const proxyOptions = useMemo(() => {
if (isDirectMode) {
return [{ name: "DIRECT" }];
}
if (isGlobalMode && state.proxyData.records) {
// 全局模式下的选项
return Object.keys(state.proxyData.records)
.filter(name => name !== "DIRECT" && name !== "REJECT")
.map(name => ({ name }));
}
// 普通模式
const group = state.proxyData.groups.find(g => g.name === state.selection.group);
if (group) {
return group.all.map(name => ({ name }));
}
return [];
}, [isDirectMode, isGlobalMode, state.proxyData, state.selection.group]);
// 使用防抖包装状态更新，避免快速连续更新
const debouncedSetState = useCallback(
debounce((updateFn: (prev: ProxyState) => ProxyState) => {
setState(updateFn);
}, 50),
[]
);
// 处理代理组变更
const handleGroupChange = (event: SelectChangeEvent) => {
// 特殊模式下不允许切换组
const handleGroupChange = useCallback((event: SelectChangeEvent) => {
if (isGlobalMode || isDirectMode) return;
const newGroup = event.target.value;
setSelectedGroup(newGroup);
};
// 保存到本地存储
localStorage.setItem(STORAGE_KEY_GROUP, newGroup);
// 获取该组当前选中的代理
setState(prev => {
const group = prev.proxyData.groups.find(g => g.name === newGroup);
if (group) {
return {
...prev,
selection: {
group: newGroup,
proxy: group.now
},
displayProxy: prev.proxyData.records[group.now] || null
};
}
return {
...prev,
selection: {
...prev.selection,
group: newGroup
}
};
});
}, [isGlobalMode, isDirectMode]);
// 处理代理节点变更
const handleProxyChange = async (event: SelectChangeEvent) => {
// 直连模式下不允许切换节点
const handleProxyChange = useCallback(async (event: SelectChangeEvent) => {
if (isDirectMode) return;
const newProxy = event.target.value;
const previousProxy = selectedProxy; // 保存变更前的代理节点名称
const currentGroup = state.selection.group;
const previousProxy = state.selection.proxy;
setSelectedProxy(newProxy);
// 立即更新UI，优化体验
debouncedSetState((prev: ProxyState) => ({
...prev,
selection: {
...prev.selection,
proxy: newProxy
},
displayProxy: prev.proxyData.records[newProxy] || null
}));
// 更新显示的代理节点信息
if (records[newProxy]) {
setDisplayProxy(records[newProxy]);
// 非特殊模式下保存到本地存储
if (!isGlobalMode && !isDirectMode) {
localStorage.setItem(STORAGE_KEY_PROXY, newProxy);
}
try {
// 更新代理设置
await updateProxy(selectedGroup, newProxy);
await updateProxy(currentGroup, newProxy);
// 添加断开连接逻辑 - 与proxy-groups.tsx中的逻辑相同
// 自动关闭连接设置
if (verge?.auto_close_connection && previousProxy) {
getConnections().then(({ connections }) => {
connections.forEach((conn) => {
connections.forEach(conn => {
if (conn.chains.includes(previousProxy)) {
deleteConnection(conn.id);
}
@ -458,50 +375,43 @@ export const CurrentProxyCard = () => {
});
}
// 刷新代理信息，使用较短的延迟
setTimeout(() => {
refreshProxy();
if (isGlobalMode || isDirectMode) {
refreshProxyData(); // 特殊模式下额外刷新数据
}
}, 300);
fetchProxyData(true);
}, 200);
} catch (error) {
console.error("更新代理失败", error);
}
};
}, [isDirectMode, isGlobalMode, state.proxyData.records, state.selection, verge?.auto_close_connection, refreshProxy, fetchProxyData, debouncedSetState]);
// 导航到代理页面
const goToProxies = () => {
// 修正路由路径，根据_routers.tsx配置，代理页面的路径是"/"
const goToProxies = useCallback(() => {
navigate("/");
};
}, [navigate]);
// 获取要显示的代理节点
const proxyToDisplay = displayProxy || currentProxy;
const proxyToDisplay = state.displayProxy || currentProxy;
// 获取当前节点的延迟
const currentDelay = proxyToDisplay
? delayManager.getDelayFix(proxyToDisplay, selectedGroup)
? delayManager.getDelayFix(proxyToDisplay, state.selection.group)
: -1;
// 获取信号图标
const signalInfo = getSignalIcon(currentDelay);
// 自定义渲染选择框中的值
const renderProxyValue = (selected: string) => {
if (!selected || !records[selected]) return selected;
const renderProxyValue = useCallback((selected: string) => {
if (!selected || !state.proxyData.records[selected]) return selected;
const delayValue = delayManager.getDelayFix(
records[selected],
selectedGroup,
state.proxyData.records[selected],
state.selection.group
);
return (
<Box
sx={{
display: "flex",
justifyContent: "space-between",
}}
>
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
<Typography noWrap>{selected}</Typography>
<Chip
size="small"
@ -510,7 +420,7 @@ export const CurrentProxyCard = () => {
/>
</Box>
);
};
}, [state.proxyData.records, state.selection.group]);
return (
<EnhancedCard
@ -561,48 +471,22 @@ 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>
@ -610,31 +494,22 @@ export const CurrentProxyCard = () => {
{proxyToDisplay && !isDirectMode && (
<Chip
size="small"
label={delayManager.formatDelay(
delayManager.getDelayFix(proxyToDisplay, selectedGroup),
)}
color={convertDelayColor(
delayManager.getDelayFix(proxyToDisplay, selectedGroup),
)}
label={delayManager.formatDelay(currentDelay)}
color={convertDelayColor(currentDelay)}
/>
)}
</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"
value={selectedGroup}
value={state.selection.group}
onChange={handleGroupChange}
label={t("Group")}
disabled={isGlobalMode || isDirectMode} // 特殊模式下禁用选择器
disabled={isGlobalMode || isDirectMode}
>
{groups.map((group) => (
{state.proxyData.groups.map((group) => (
<MenuItem key={group.name} value={group.name}>
{group.name}
</MenuItem>
@ -647,10 +522,10 @@ export const CurrentProxyCard = () => {
<InputLabel id="proxy-select-label">{t("Proxy")}</InputLabel>
<Select
labelId="proxy-select-label"
value={selectedProxy}
value={state.selection.proxy}
onChange={handleProxyChange}
label={t("Proxy")}
disabled={isDirectMode} // 直连模式下禁用选择器
disabled={isDirectMode}
renderValue={renderProxyValue}
MenuProps={{
PaperProps: {
@ -662,8 +537,8 @@ export const CurrentProxyCard = () => {
>
{proxyOptions.map((proxy) => {
const delayValue = delayManager.getDelayFix(
records[proxy.name],
selectedGroup,
state.proxyData.records[proxy.name],
state.selection.group
);
return (
<MenuItem

347
src/components/home/enhanced-traffic-graph.tsx
View File

@ -5,7 +5,6 @@ import {
useEffect,
useCallback,
useMemo,
ReactElement,
useRef,
memo,
} from "react";
@ -44,8 +43,8 @@ type TimeRange = 1 | 5 | 10; // 分钟
type DataPoint = ITrafficItem & { name: string; timestamp: number };
// 控制帧率的工具函数
const FPS_LIMIT = 30; // 限制最高30fps
const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // 每帧最小时间间隔
const FPS_LIMIT = 1; // 限制为1fps，因为数据每秒才更新一次
const FRAME_MIN_TIME = 1000 / FPS_LIMIT; // 每帧最小时间间隔，即1000ms
/**
* 增强型流量图表组件
@ -109,7 +108,7 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
});
}, []);
// 初始化空数据缓冲区
// 初始化数据缓冲区
useEffect(() => {
// 生成10分钟的初始数据点
const now = Date.now();
@ -217,8 +216,9 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
timestamp: timestamp,
};
// 直接更新ref，不触发重渲染
dataBufferRef.current = [...dataBufferRef.current.slice(1), newPoint];
// 更新ref，但保持原数组大小
const newBuffer = [...dataBufferRef.current.slice(1), newPoint];
dataBufferRef.current = newBuffer;
// 使用节流更新显示数据
throttledUpdateData();
@ -264,161 +264,23 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
return t("{{time}} Minutes", { time: timeRange });
}, [timeRange, t]);
// 渲染图表内的标签
const renderInnerLabels = useCallback(() => (
<>
{/* 上传标签 - 右上角 */}
<text
x="98%"
y="7%"
textAnchor="end"
fill={colors.up}
fontSize={12}
fontWeight="bold"
>
{t("Upload")}
</text>
{/* 下载标签 - 右上角下方 */}
<text
x="98%"
y="16%"
textAnchor="end"
fill={colors.down}
fontSize={12}
fontWeight="bold"
>
{t("Download")}
</text>
</>
), [colors.up, colors.down, t]);
// 共享图表配置
const commonProps = useMemo(() => ({
const chartConfig = useMemo(() => ({
data: displayData,
margin: { top: 10, right: 20, left: 0, bottom: 0 },
}), [displayData]);
// 曲线类型 - 使用平滑曲线
const curveType = "basis";
// 共享的线条/区域配置
const commonLineProps = useMemo(() => ({
dot: false,
strokeWidth: 2,
connectNulls: false,
activeDot: { r: 4, strokeWidth: 1 },
isAnimationActive: false, // 禁用动画以减少CPU使用
}), []);
// 共享图表子组件
const commonChildren = useMemo(() => (
<>
<CartesianGrid
strokeDasharray="3 3"
vertical={false}
stroke={colors.grid}
opacity={0.3}
/>
<XAxis
dataKey="name"
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
interval="preserveStart"
tickFormatter={formatXLabel}
minTickGap={timeRange === 1 ? 40 : 80}
tickCount={Math.min(6, timeRange * 2)}
domain={["dataMin", "dataMax"]}
scale="auto"
/>
<YAxis
tickFormatter={formatYAxis}
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
width={40}
domain={[0, "auto"]}
padding={{ top: 10, bottom: 0 }}
/>
<Tooltip
formatter={formatTooltip}
labelFormatter={(label) => `${t("Time")}: ${label}`}
contentStyle={{
backgroundColor: colors.tooltip,
borderColor: colors.grid,
borderRadius: 4,
}}
itemStyle={{ color: colors.text }}
isAnimationActive={false}
/>
{/* 可点击的时间范围标签 */}
<g
className="time-range-selector"
onClick={handleTimeRangeClick}
style={{ cursor: "pointer" }}
>
<text
x="1%"
y="6%"
textAnchor="start"
fill={theme.palette.text.secondary}
fontSize={11}
fontWeight="bold"
>
{getTimeRangeText()}
</text>
</g>
</>
), [colors, formatXLabel, formatYAxis, formatTooltip, timeRange, theme.palette.text.secondary, handleTimeRangeClick, getTimeRangeText, t]);
// 渲染图表 - 线图或面积图
const renderChart = useCallback(() => {
// 共享的线条/区域配置
const commonLineProps = {
dot: false,
strokeWidth: 2,
connectNulls: false,
activeDot: { r: 4, strokeWidth: 1 },
isAnimationActive: false, // 禁用动画以减少CPU使用
};
return chartStyle === "line" ? (
<LineChart {...commonProps}>
{commonChildren}
<Line
type="basis"
{...commonLineProps}
dataKey="up"
name={t("Upload")}
stroke={colors.up}
/>
<Line
type="basis"
{...commonLineProps}
dataKey="down"
name={t("Download")}
stroke={colors.down}
/>
{renderInnerLabels()}
</LineChart>
) : (
<AreaChart {...commonProps}>
{commonChildren}
<Area
type="basis"
{...commonLineProps}
dataKey="up"
name={t("Upload")}
stroke={colors.up}
fill={colors.up}
fillOpacity={0.2}
/>
<Area
type="basis"
{...commonLineProps}
dataKey="down"
name={t("Download")}
stroke={colors.down}
fill={colors.down}
fillOpacity={0.3}
/>
{renderInnerLabels()}
</AreaChart>
);
}, [chartStyle, commonProps, commonChildren, renderInnerLabels, colors, t]);
// 曲线类型 - 使用线性曲线避免错位
const curveType = "monotone";
return (
<Box
@ -434,7 +296,180 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
onClick={toggleStyle}
>
<ResponsiveContainer width="100%" height="100%">
{renderChart()}
{chartStyle === "line" ? (
<LineChart {...chartConfig}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={colors.grid} opacity={0.3} />
<XAxis
dataKey="name"
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
interval="preserveStart"
tickFormatter={formatXLabel}
minTickGap={30}
/>
<YAxis
tickFormatter={formatYAxis}
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
width={40}
domain={[0, "auto"]}
/>
<Tooltip
formatter={formatTooltip}
labelFormatter={(label) => `${t("Time")}: ${label}`}
contentStyle={{
backgroundColor: colors.tooltip,
borderColor: colors.grid,
borderRadius: 4,
}}
itemStyle={{ color: colors.text }}
isAnimationActive={false}
/>
<Line
type={curveType}
{...commonLineProps}
dataKey="up"
name={t("Upload")}
stroke={colors.up}
/>
<Line
type={curveType}
{...commonLineProps}
dataKey="down"
name={t("Download")}
stroke={colors.down}
/>
{/* 可点击的时间范围标签 */}
<text
x="1%"
y="6%"
textAnchor="start"
fill={theme.palette.text.secondary}
fontSize={11}
fontWeight="bold"
onClick={handleTimeRangeClick}
style={{ cursor: "pointer" }}
>
{getTimeRangeText()}
</text>
{/* 上传标签 - 右上角 */}
<text
x="98%"
y="7%"
textAnchor="end"
fill={colors.up}
fontSize={12}
fontWeight="bold"
>
{t("Upload")}
</text>
{/* 下载标签 - 右上角下方 */}
<text
x="98%"
y="16%"
textAnchor="end"
fill={colors.down}
fontSize={12}
fontWeight="bold"
>
{t("Download")}
</text>
</LineChart>
) : (
<AreaChart {...chartConfig}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={colors.grid} opacity={0.3} />
<XAxis
dataKey="name"
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
interval="preserveStart"
tickFormatter={formatXLabel}
minTickGap={30}
/>
<YAxis
tickFormatter={formatYAxis}
tick={{ fontSize: 10, fill: colors.text }}
tickLine={{ stroke: colors.grid }}
axisLine={{ stroke: colors.grid }}
width={40}
domain={[0, "auto"]}
padding={{ top: 10, bottom: 0 }}
/>
<Tooltip
formatter={formatTooltip}
labelFormatter={(label) => `${t("Time")}: ${label}`}
contentStyle={{
backgroundColor: colors.tooltip,
borderColor: colors.grid,
borderRadius: 4,
}}
itemStyle={{ color: colors.text }}
isAnimationActive={false}
/>
<Area
type={curveType}
{...commonLineProps}
dataKey="up"
name={t("Upload")}
stroke={colors.up}
fill={colors.up}
fillOpacity={0.2}
/>
<Area
type={curveType}
{...commonLineProps}
dataKey="down"
name={t("Download")}
stroke={colors.down}
fill={colors.down}
fillOpacity={0.3}
/>
{/* 可点击的时间范围标签 */}
<text
x="1%"
y="6%"
textAnchor="start"
fill={theme.palette.text.secondary}
fontSize={11}
fontWeight="bold"
onClick={handleTimeRangeClick}
style={{ cursor: "pointer" }}
>
{getTimeRangeText()}
</text>
{/* 上传标签 - 右上角 */}
<text
x="98%"
y="7%"
textAnchor="end"
fill={colors.up}
fontSize={12}
fontWeight="bold"
>
{t("Upload")}
</text>
{/* 下载标签 - 右上角下方 */}
<text
x="98%"
y="16%"
textAnchor="end"
fill={colors.down}
fontSize={12}
fontWeight="bold"
>
{t("Download")}
</text>
</AreaChart>
)}
</ResponsiveContainer>
</Box>
);

230
src/components/home/enhanced-traffic-stats.tsx
View File

@ -1,4 +1,4 @@
import { useState, useEffect, useRef, useCallback, memo } from "react";
import { useState, useEffect, useRef, useCallback, memo, useMemo } from "react";
import { useTranslation } from "react-i18next";
import {
Typography,
@ -62,6 +62,7 @@ declare global {
// 控制更新频率
const CONNECTIONS_UPDATE_INTERVAL = 5000; // 5秒更新一次连接数据
const THROTTLE_TRAFFIC_UPDATE = 500; // 500ms节流流量数据更新
// 统计卡片组件 - 使用memo优化
const CompactStatCard = memo(({
@ -74,18 +75,18 @@ const CompactStatCard = memo(({
}: StatCardProps) => {
const theme = useTheme();
// 获取调色板颜色
const getColorFromPalette = (colorName: string) => {
// 获取调色板颜色 - 使用useMemo避免重复计算
const colorValue = useMemo(() => {
const palette = theme.palette;
if (
colorName in palette &&
palette[colorName as keyof typeof palette] &&
"main" in (palette[colorName as keyof typeof palette] as PaletteColor)
color in palette &&
palette[color as keyof typeof palette] &&
"main" in (palette[color as keyof typeof palette] as PaletteColor)
) {
return (palette[colorName as keyof typeof palette] as PaletteColor).main;
return (palette[color as keyof typeof palette] as PaletteColor).main;
}
return palette.primary.main;
};
}, [theme.palette, color]);
return (
<Paper
@ -94,14 +95,14 @@ const CompactStatCard = memo(({
display: "flex",
alignItems: "center",
borderRadius: 2,
bgcolor: alpha(getColorFromPalette(color), 0.05),
border: `1px solid ${alpha(getColorFromPalette(color), 0.15)}`,
bgcolor: alpha(colorValue, 0.05),
border: `1px solid ${alpha(colorValue, 0.15)}`,
padding: "8px",
transition: "all 0.2s ease-in-out",
cursor: onClick ? "pointer" : "default",
"&:hover": onClick ? {
bgcolor: alpha(getColorFromPalette(color), 0.1),
border: `1px solid ${alpha(getColorFromPalette(color), 0.3)}`,
bgcolor: alpha(colorValue, 0.1),
border: `1px solid ${alpha(colorValue, 0.3)}`,
boxShadow: `0 4px 8px rgba(0,0,0,0.05)`,
} : {},
}}
@ -119,8 +120,8 @@ const CompactStatCard = memo(({
width: 32,
height: 32,
borderRadius: "50%",
bgcolor: alpha(getColorFromPalette(color), 0.1),
color: getColorFromPalette(color),
bgcolor: alpha(colorValue, 0.1),
color: colorValue,
}}
>
{icon}
@ -156,24 +157,24 @@ export const EnhancedTrafficStats = () => {
const pageVisible = useVisibility();
const [isDebug, setIsDebug] = useState(false);
// 为流量数据和内存数据准备状态
const [trafficData, setTrafficData] = useState<ITrafficItem>({
up: 0,
down: 0,
});
const [memoryData, setMemoryData] = useState<MemoryUsage>({ inuse: 0 });
const [trafficStats, setTrafficStats] = useState<TrafficStatData>({
uploadTotal: 0,
downloadTotal: 0,
activeConnections: 0,
// 使用单一状态对象减少状态更新次数
const [stats, setStats] = useState({
traffic: { up: 0, down: 0 },
memory: { inuse: 0, oslimit: undefined as number | undefined },
connections: { uploadTotal: 0, downloadTotal: 0, activeConnections: 0 },
});
// 创建一个标记来追踪最后更新时间，用于节流
const lastUpdateRef = useRef({ traffic: 0 });
// 是否显示流量图表
const trafficGraph = verge?.traffic_graph ?? true;
// WebSocket引用
const trafficSocketRef = useRef<ReturnType<typeof createAuthSockette> | null>(null);
const memorySocketRef = useRef<ReturnType<typeof createAuthSockette> | null>(null);
const socketRefs = useRef({
traffic: null as ReturnType<typeof createAuthSockette> | null,
memory: null as ReturnType<typeof createAuthSockette> | null,
});
// 获取连接数据
const fetchConnections = useCallback(async () => {
@ -191,11 +192,14 @@ export const EnhancedTrafficStats = () => {
0,
);
setTrafficStats({
uploadTotal,
downloadTotal,
activeConnections: connections.connections.length,
});
setStats(prev => ({
...prev,
connections: {
uploadTotal,
downloadTotal,
activeConnections: connections.connections.length,
}
}));
}
} catch (err) {
console.error("Failed to fetch connections:", err);
@ -204,11 +208,11 @@ export const EnhancedTrafficStats = () => {
// 定期更新连接数据
useEffect(() => {
if (pageVisible) {
fetchConnections();
const intervalId = setInterval(fetchConnections, CONNECTIONS_UPDATE_INTERVAL);
return () => clearInterval(intervalId);
}
if (!pageVisible) return;
fetchConnections();
const intervalId = setInterval(fetchConnections, CONNECTIONS_UPDATE_INTERVAL);
return () => clearInterval(intervalId);
}, [pageVisible, fetchConnections]);
// 检查是否支持调试
@ -216,7 +220,7 @@ export const EnhancedTrafficStats = () => {
isDebugEnabled().then((flag) => setIsDebug(flag));
}, []);
// 处理流量数据更新
// 处理流量数据更新 - 使用节流控制更新频率
const handleTrafficUpdate = useCallback((event: MessageEvent) => {
try {
const data = JSON.parse(event.data) as ITrafficItem;
@ -225,28 +229,40 @@ export const EnhancedTrafficStats = () => {
typeof data.up === "number" &&
typeof data.down === "number"
) {
// 使用节流控制更新频率
const now = Date.now();
if (now - lastUpdateRef.current.traffic < THROTTLE_TRAFFIC_UPDATE) {
// 如果距离上次更新时间小于阈值，只更新图表不更新状态
if (trafficRef.current) {
trafficRef.current.appendData({
up: data.up,
down: data.down,
timestamp: now,
});
}
return;
}
// 更新最后更新时间
lastUpdateRef.current.traffic = now;
// 验证数据有效性，防止NaN
const safeUp = isNaN(data.up) ? 0 : data.up;
const safeDown = isNaN(data.down) ? 0 : data.down;
setTrafficData({
up: safeUp,
down: safeDown,
});
// 批量更新状态
setStats(prev => ({
...prev,
traffic: { up: safeUp, down: safeDown }
}));
// 更新图表数据
if (trafficRef.current) {
trafficRef.current.appendData({
up: safeUp,
down: safeDown,
timestamp: Date.now(),
timestamp: now,
});
// 清除之前可能存在的动画帧
if (window.animationFrameId) {
cancelAnimationFrame(window.animationFrameId);
window.animationFrameId = undefined;
}
}
}
} catch (err) {
@ -259,74 +275,50 @@ export const EnhancedTrafficStats = () => {
try {
const data = JSON.parse(event.data) as MemoryUsage;
if (data && typeof data.inuse === "number") {
setMemoryData({
inuse: isNaN(data.inuse) ? 0 : data.inuse,
oslimit: data.oslimit,
});
setStats(prev => ({
...prev,
memory: {
inuse: isNaN(data.inuse) ? 0 : data.inuse,
oslimit: data.oslimit,
}
}));
}
} catch (err) {
console.error("[Memory] 解析数据错误:", err);
}
}, []);
// 使用 WebSocket 连接获取流量数据
// 使用 WebSocket 连接获取数据 - 合并流量和内存连接逻辑
useEffect(() => {
if (!clashInfo || !pageVisible) return;
const { server, secret = "" } = clashInfo;
if (!server) return;
// 清理现有连接的函数
const cleanupSockets = () => {
Object.values(socketRefs.current).forEach(socket => {
if (socket) {
socket.close();
}
});
socketRefs.current = { traffic: null, memory: null };
};
// 关闭现有连接
if (trafficSocketRef.current) {
trafficSocketRef.current.close();
}
cleanupSockets();
// 创建新连接
trafficSocketRef.current = createAuthSockette(`${server}/traffic`, secret, {
socketRefs.current.traffic = createAuthSockette(`${server}/traffic`, secret, {
onmessage: handleTrafficUpdate,
});
return () => {
if (trafficSocketRef.current) {
trafficSocketRef.current.close();
trafficSocketRef.current = null;
}
};
}, [clashInfo, pageVisible, handleTrafficUpdate]);
// 使用 WebSocket 连接获取内存数据
useEffect(() => {
if (!clashInfo || !pageVisible) return;
const { server, secret = "" } = clashInfo;
if (!server) return;
// 关闭现有连接
if (memorySocketRef.current) {
memorySocketRef.current.close();
}
// 创建新连接
memorySocketRef.current = createAuthSockette(`${server}/memory`, secret, {
socketRefs.current.memory = createAuthSockette(`${server}/memory`, secret, {
onmessage: handleMemoryUpdate,
});
return () => {
if (memorySocketRef.current) {
memorySocketRef.current.close();
memorySocketRef.current = null;
}
};
}, [clashInfo, pageVisible, handleMemoryUpdate]);
// 解析流量数据
const [up, upUnit] = parseTraffic(trafficData.up);
const [down, downUnit] = parseTraffic(trafficData.down);
const [inuse, inuseUnit] = parseTraffic(memoryData.inuse);
const [uploadTotal, uploadTotalUnit] = parseTraffic(trafficStats.uploadTotal);
const [downloadTotal, downloadTotalUnit] = parseTraffic(
trafficStats.downloadTotal,
);
return cleanupSockets;
}, [clashInfo, pageVisible, handleTrafficUpdate, handleMemoryUpdate]);
// 执行垃圾回收
const handleGarbageCollection = useCallback(async () => {
@ -340,8 +332,22 @@ export const EnhancedTrafficStats = () => {
}
}, [isDebug]);
// 渲染流量图表
const renderTrafficGraph = useCallback(() => {
// 使用useMemo计算解析后的流量数据
const parsedData = useMemo(() => {
const [up, upUnit] = parseTraffic(stats.traffic.up);
const [down, downUnit] = parseTraffic(stats.traffic.down);
const [inuse, inuseUnit] = parseTraffic(stats.memory.inuse);
const [uploadTotal, uploadTotalUnit] = parseTraffic(stats.connections.uploadTotal);
const [downloadTotal, downloadTotalUnit] = parseTraffic(stats.connections.downloadTotal);
return {
up, upUnit, down, downUnit, inuse, inuseUnit,
uploadTotal, uploadTotalUnit, downloadTotal, downloadTotalUnit
};
}, [stats]);
// 渲染流量图表 - 使用useMemo缓存渲染结果
const trafficGraphComponent = useMemo(() => {
if (!trafficGraph || !pageVisible) return null;
return (
@ -382,58 +388,58 @@ export const EnhancedTrafficStats = () => {
);
}, [trafficGraph, pageVisible, theme.palette.divider, isDebug]);
// 统计卡片配置
const statCards = [
// 使用useMemo计算统计卡片配置
const statCards = useMemo(() => [
{
icon: <ArrowUpwardRounded fontSize="small" />,
title: t("Upload Speed"),
value: up,
unit: `${upUnit}/s`,
value: parsedData.up,
unit: `${parsedData.upUnit}/s`,
color: "secondary" as const,
},
{
icon: <ArrowDownwardRounded fontSize="small" />,
title: t("Download Speed"),
value: down,
unit: `${downUnit}/s`,
value: parsedData.down,
unit: `${parsedData.downUnit}/s`,
color: "primary" as const,
},
{
icon: <LinkRounded fontSize="small" />,
title: t("Active Connections"),
value: trafficStats.activeConnections,
value: stats.connections.activeConnections,
unit: "",
color: "success" as const,
},
{
icon: <CloudUploadRounded fontSize="small" />,
title: t("Uploaded"),
value: uploadTotal,
unit: uploadTotalUnit,
value: parsedData.uploadTotal,
unit: parsedData.uploadTotalUnit,
color: "secondary" as const,
},
{
icon: <CloudDownloadRounded fontSize="small" />,
title: t("Downloaded"),
value: downloadTotal,
unit: downloadTotalUnit,
value: parsedData.downloadTotal,
unit: parsedData.downloadTotalUnit,
color: "primary" as const,
},
{
icon: <MemoryRounded fontSize="small" />,
title: t("Memory Usage"),
value: inuse,
unit: inuseUnit,
value: parsedData.inuse,
unit: parsedData.inuseUnit,
color: "error" as const,
onClick: isDebug ? handleGarbageCollection : undefined,
},
];
], [t, parsedData, stats.connections.activeConnections, isDebug, handleGarbageCollection]);
return (
<Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>
<Grid size={12}>
{/* 流量图表区域 */}
{renderTrafficGraph()}
{trafficGraphComponent}
</Grid>
{/* 统计卡片区域 */}
{statCards.map((card, index) => (

420
src/components/home/home-profile-card.tsx
View File

@ -22,7 +22,7 @@ import {
} from "@mui/icons-material";
import dayjs from "dayjs";
import parseTraffic from "@/utils/parse-traffic";
import { useState } from "react";
import { useMemo, useCallback, useState } from "react";
import { openWebUrl, updateProfile } from "@/services/cmds";
import { useLockFn } from "ahooks";
import { Notice } from "@/components/base";
@ -35,16 +35,16 @@ const round = keyframes`
`;
// 辅助函数解析URL和过期时间
function parseUrl(url?: string) {
const parseUrl = (url?: string) => {
if (!url) return "-";
if (url.startsWith("http")) return new URL(url).host;
return "local";
}
};
function parseExpire(expire?: number) {
const parseExpire = (expire?: number) => {
if (!expire) return "-";
return dayjs(expire * 1000).format("YYYY-MM-DD");
}
};
// 使用类型定义，而不是导入
interface ProfileExtra {
@ -64,20 +64,178 @@ export interface ProfileItem {
updated?: number;
extra?: ProfileExtra;
home?: string;
option?: any; // 添加option以兼容原始类型
option?: any;
}
export interface HomeProfileCardProps {
current: ProfileItem | null | undefined;
onProfileUpdated?: () => void;
}
export const HomeProfileCard = ({ current }: HomeProfileCardProps) => {
// 提取独立组件减少主组件复杂度
const ProfileDetails = ({ current, onUpdateProfile, updating }: {
current: ProfileItem;
onUpdateProfile: () => void;
updating: boolean;
}) => {
const { t } = useTranslation();
const theme = useTheme();
const usedTraffic = useMemo(() => {
if (!current.extra) return 0;
return current.extra.upload + current.extra.download;
}, [current.extra]);
const trafficPercentage = useMemo(() => {
if (!current.extra || !current.extra.total) return 1;
return Math.min(
Math.round((usedTraffic * 100) / (current.extra.total + 0.01)) + 1,
100
);
}, [current.extra, usedTraffic]);
return (
<Box>
<Stack spacing={2}>
{current.url && (
<Stack direction="row" alignItems="center" spacing={1}>
<DnsOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("From")}:{" "}
{current.home ? (
<Link
component="button"
fontWeight="medium"
onClick={() => current.home && openWebUrl(current.home)}
sx={{ display: "inline-flex", alignItems: "center" }}
>
{parseUrl(current.url)}
<LaunchOutlined
fontSize="inherit"
sx={{ ml: 0.5, fontSize: "0.8rem", opacity: 0.7 }}
/>
</Link>
) : (
<Box component="span" fontWeight="medium">
{parseUrl(current.url)}
</Box>
)}
</Typography>
</Stack>
)}
{current.updated && (
<Stack direction="row" alignItems="center" spacing={1}>
<UpdateOutlined
fontSize="small"
color="action"
sx={{
cursor: "pointer",
animation: updating ? `${round} 1.5s linear infinite` : "none",
}}
onClick={onUpdateProfile}
/>
<Typography
variant="body2"
color="text.secondary"
sx={{ cursor: "pointer" }}
onClick={onUpdateProfile}
>
{t("Update Time")}:{" "}
<Box component="span" fontWeight="medium">
{dayjs(current.updated * 1000).format("YYYY-MM-DD HH:mm")}
</Box>
</Typography>
</Stack>
)}
{current.extra && (
<>
<Stack direction="row" alignItems="center" spacing={1}>
<SpeedOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("Used / Total")}:{" "}
<Box component="span" fontWeight="medium">
{parseTraffic(usedTraffic)} / {parseTraffic(current.extra.total)}
</Box>
</Typography>
</Stack>
{current.extra.expire > 0 && (
<Stack direction="row" alignItems="center" spacing={1}>
<EventOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("Expire Time")}:{" "}
<Box component="span" fontWeight="medium">
{parseExpire(current.extra.expire)}
</Box>
</Typography>
</Stack>
)}
<Box sx={{ mt: 1 }}>
<Typography
variant="caption"
color="text.secondary"
sx={{ mb: 0.5, display: "block" }}
>
{trafficPercentage}%
</Typography>
<LinearProgress
variant="determinate"
value={trafficPercentage}
sx={{
height: 8,
borderRadius: 4,
backgroundColor: alpha(theme.palette.primary.main, 0.12),
}}
/>
</Box>
</>
)}
</Stack>
</Box>
);
};
// 提取空配置组件
const EmptyProfile = ({ onClick }: { onClick: () => void }) => {
const { t } = useTranslation();
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
py: 2.4,
cursor: "pointer",
"&:hover": { bgcolor: "action.hover" },
borderRadius: 2,
}}
onClick={onClick}
>
<CloudUploadOutlined
sx={{ fontSize: 60, color: "primary.main", mb: 2 }}
/>
<Typography variant="h6" gutterBottom>
{t("Import")} {t("Profiles")}
</Typography>
<Typography variant="body2" color="text.secondary">
{t("Click to import subscription")}
</Typography>
</Box>
);
};
export const HomeProfileCard = ({ current, onProfileUpdated }: HomeProfileCardProps) => {
const { t } = useTranslation();
const navigate = useNavigate();
const theme = useTheme();
// 更新当前订阅
const [updating, setUpdating] = useState(false);
const onUpdateProfile = useLockFn(async () => {
if (!current?.uid) return;
@ -85,6 +243,7 @@ export const HomeProfileCard = ({ current }: HomeProfileCardProps) => {
try {
await updateProfile(current.uid);
Notice.success(t("Update subscription successfully"));
onProfileUpdated?.();
} catch (err: any) {
Notice.error(err?.message || err.toString());
} finally {
@ -93,204 +252,71 @@ export const HomeProfileCard = ({ current }: HomeProfileCardProps) => {
});
// 导航到订阅页面
const goToProfiles = () => {
const goToProfiles = useCallback(() => {
navigate("/profile");
};
}, [navigate]);
// 卡片标题
const cardTitle = useMemo(() => {
if (!current) return t("Profiles");
if (!current.home) return current.name;
return (
<Link
component="button"
variant="h6"
fontWeight="medium"
fontSize={18}
onClick={() => current.home && openWebUrl(current.home)}
sx={{
display: "inline-flex",
alignItems: "center",
color: "inherit",
textDecoration: "none",
}}
>
{current.name}
<LaunchOutlined
fontSize="inherit"
sx={{ ml: 0.5, fontSize: "0.8rem", opacity: 0.7 }}
/>
</Link>
);
}, [current, t]);
// 卡片操作按钮
const cardAction = useMemo(() => {
if (!current) return null;
return (
<Button
variant="outlined"
size="small"
onClick={goToProfiles}
endIcon={<StorageOutlined fontSize="small" />}
sx={{ borderRadius: 1.5 }}
>
{t("Label-Profiles")}
</Button>
);
}, [current, goToProfiles, t]);
return (
<EnhancedCard
title={
current ? (
current.home ? (
<Link
component="button"
variant="h6"
fontWeight="medium"
fontSize={18}
onClick={() => current.home && openWebUrl(current.home)}
sx={{
display: "inline-flex",
alignItems: "center",
color: "inherit",
textDecoration: "none",
}}
>
{current.name}
<LaunchOutlined
fontSize="inherit"
sx={{ ml: 0.5, fontSize: "0.8rem", opacity: 0.7 }}
/>
</Link>
) : (
current.name
)
) : (
t("Profiles")
)
}
title={cardTitle}
icon={<CloudUploadOutlined />}
iconColor="info"
action={
current && (
<Button
variant="outlined"
size="small"
onClick={goToProfiles}
endIcon={<StorageOutlined fontSize="small" />}
sx={{ borderRadius: 1.5 }}
>
{t("Label-Profiles")}
</Button>
)
}
action={cardAction}
>
{current ? (
// 已导入订阅，显示详情
<Box>
<Stack spacing={2}>
{current.url && (
<Stack direction="row" alignItems="center" spacing={1}>
<DnsOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("From")}:{" "}
{current.home ? (
<Link
component="button"
fontWeight="medium"
onClick={() => current.home && openWebUrl(current.home)}
sx={{ display: "inline-flex", alignItems: "center" }}
>
{parseUrl(current.url)}
<LaunchOutlined
fontSize="inherit"
sx={{ ml: 0.5, fontSize: "0.8rem", opacity: 0.7 }}
/>
</Link>
) : (
<Box component="span" fontWeight="medium">
{parseUrl(current.url)}
</Box>
)}
</Typography>
</Stack>
)}
{current.updated && (
<Stack direction="row" alignItems="center" spacing={1}>
<UpdateOutlined
fontSize="small"
color="action"
sx={{
cursor: "pointer",
animation: updating
? `${round} 1.5s linear infinite`
: "none",
}}
onClick={onUpdateProfile}
/>
<Typography
variant="body2"
color="text.secondary"
sx={{ cursor: "pointer" }}
onClick={onUpdateProfile}
>
{t("Update Time")}:{" "}
<Box component="span" fontWeight="medium">
{dayjs(current.updated * 1000).format("YYYY-MM-DD HH:mm")}
</Box>
</Typography>
</Stack>
)}
{current.extra && (
<>
<Stack direction="row" alignItems="center" spacing={1}>
<SpeedOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("Used / Total")}:{" "}
<Box component="span" fontWeight="medium">
{parseTraffic(
current.extra.upload + current.extra.download,
)}{" "}
/ {parseTraffic(current.extra.total)}
</Box>
</Typography>
</Stack>
{current.extra.expire > 0 && (
<Stack direction="row" alignItems="center" spacing={1}>
<EventOutlined fontSize="small" color="action" />
<Typography variant="body2" color="text.secondary">
{t("Expire Time")}:{" "}
<Box component="span" fontWeight="medium">
{parseExpire(current.extra.expire)}
</Box>
</Typography>
</Stack>
)}
<Box sx={{ mt: 1 }}>
<Typography
variant="caption"
color="text.secondary"
sx={{ mb: 0.5, display: "block" }}
>
{Math.min(
Math.round(
((current.extra.download + current.extra.upload) *
100) /
(current.extra.total + 0.01),
) + 1,
100,
)}
%
</Typography>
<LinearProgress
variant="determinate"
value={Math.min(
Math.round(
((current.extra.download + current.extra.upload) *
100) /
(current.extra.total + 0.01),
) + 1,
100,
)}
sx={{
height: 8,
borderRadius: 4,
backgroundColor: alpha(theme.palette.primary.main, 0.12),
}}
/>
</Box>
</>
)}
</Stack>
</Box>
<ProfileDetails
current={current}
onUpdateProfile={onUpdateProfile}
updating={updating}
/>
) : (
// 未导入订阅，显示导入按钮
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
py: 2.4,
cursor: "pointer",
"&:hover": { bgcolor: "action.hover" },
borderRadius: 2,
}}
onClick={goToProfiles}
>
<CloudUploadOutlined
sx={{ fontSize: 60, color: "primary.main", mb: 2 }}
/>
<Typography variant="h6" gutterBottom>
{t("Import")} {t("Profiles")}
</Typography>
<Typography variant="body2" color="text.secondary">
{t("Click to import subscription")}
</Typography>
</Box>
<EmptyProfile onClick={goToProfiles} />
)}
</EnhancedCard>
);

456
src/components/home/ip-info-card.tsx
View File

@ -15,15 +15,50 @@ import {
} from "@mui/icons-material";
import { EnhancedCard } from "./enhanced-card";
import { getIpInfo } from "@/services/api";
import { useState, useEffect, useCallback } from "react";
import { useState, useEffect, useCallback, memo } from "react";
// 定义刷新时间（秒）
const IP_REFRESH_SECONDS = 300;
// 提取InfoItem子组件并使用memo优化
const InfoItem = memo(({ label, value }: { label: string; value: string }) => (
<Box sx={{ mb: 0.7, display: "flex", alignItems: "flex-start" }}>
<Typography
variant="body2"
color="text.secondary"
sx={{ minwidth: 60, mr: 0.5, flexShrink: 0, textAlign: "right" }}
>
{label}:
</Typography>
<Typography
variant="body2"
sx={{
ml: 0.5,
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-word",
whiteSpace: "normal",
flexGrow: 1,
}}
>
{value || "Unknown"}
</Typography>
</Box>
));
// 获取国旗表情
const getCountryFlag = (countryCode: string) => {
if (!countryCode) return "";
const codePoints = countryCode
.toUpperCase()
.split("")
.map((char) => 127397 + char.charCodeAt(0));
return String.fromCodePoint(...codePoints);
};
// IP信息卡片组件
export const IpInfoCard = () => {
const { t } = useTranslation();
const theme = useTheme();
const [ipInfo, setIpInfo] = useState<any>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");
@ -48,250 +83,241 @@ export const IpInfoCard = () => {
// 组件加载时获取IP信息
useEffect(() => {
fetchIpInfo();
}, [fetchIpInfo]);
// 倒计时自动刷新
useEffect(() => {
const timer = setInterval(() => {
setCountdown((prev) => {
if (prev <= 1) {
// 倒计时实现优化，减少不必要的重渲染
let timer: number | null = null;
let currentCount = IP_REFRESH_SECONDS;
// 只在必要时更新状态，减少重渲染次数
const startCountdown = () => {
timer = window.setInterval(() => {
currentCount -= 1;
if (currentCount <= 0) {
fetchIpInfo();
return IP_REFRESH_SECONDS;
currentCount = IP_REFRESH_SECONDS;
}
return prev - 1;
});
}, 1000);
return () => clearInterval(timer);
// 每5秒或倒计时结束时才更新UI
if (currentCount % 5 === 0 || currentCount <= 0) {
setCountdown(currentCount);
}
}, 1000);
};
startCountdown();
return () => {
if (timer) clearInterval(timer);
};
}, [fetchIpInfo]);
// 刷新按钮点击处理
const handleRefresh = () => {
fetchIpInfo();
};
const toggleShowIp = useCallback(() => {
setShowIp(prev => !prev);
}, []);
// 切换显示/隐藏IP
const toggleShowIp = () => {
setShowIp(!showIp);
};
// 获取国旗表情
const getCountryFlag = (countryCode: string) => {
if (!countryCode) return "";
const codePoints = countryCode
.toUpperCase()
.split("")
.map((char) => 127397 + char.charCodeAt(0));
return String.fromCodePoint(...codePoints);
};
// 信息项组件 - 默认不换行，但在需要时可以换行
const InfoItem = ({ label, value }: { label: string; value: string }) => (
<Box sx={{ mb: 0.7, display: "flex", alignItems: "flex-start" }}>
<Typography
variant="body2"
color="text.secondary"
sx={{
minwidth: 60,
mr: 0.5,
flexShrink: 0,
textAlign: "right",
}}
// 渲染加载状态
if (loading) {
return (
<EnhancedCard
title={t("IP Information")}
icon={<LocationOnOutlined />}
iconColor="info"
action={
<IconButton size="small" onClick={fetchIpInfo} disabled={true}>
<RefreshOutlined />
</IconButton>
}
>
{label}:
</Typography>
<Typography
variant="body2"
sx={{
ml: 0.5,
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-word",
whiteSpace: "normal",
flexGrow: 1, // 让内容占用剩余空间
}}
>
{value || t("Unknown")}
</Typography>
</Box>
);
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
<Skeleton variant="text" width="60%" height={32} />
<Skeleton variant="text" width="80%" height={24} />
<Skeleton variant="text" width="70%" height={24} />
<Skeleton variant="text" width="50%" height={24} />
</Box>
</EnhancedCard>
);
}
// 渲染错误状态
if (error) {
return (
<EnhancedCard
title={t("IP Information")}
icon={<LocationOnOutlined />}
iconColor="info"
action={
<IconButton size="small" onClick={fetchIpInfo}>
<RefreshOutlined />
</IconButton>
}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100%",
color: "error.main",
}}
>
<Typography variant="body1" color="error">
{error}
</Typography>
<Button onClick={fetchIpInfo} sx={{ mt: 2 }}>
{t("Retry")}
</Button>
</Box>
</EnhancedCard>
);
}
// 渲染正常数据
return (
<EnhancedCard
title={t("IP Information")}
icon={<LocationOnOutlined />}
iconColor="info"
action={
<IconButton size="small" onClick={handleRefresh} disabled={loading}>
<IconButton size="small" onClick={fetchIpInfo}>
<RefreshOutlined />
</IconButton>
}
>
<Box sx={{ height: "100%", display: "flex", flexDirection: "column" }}>
{loading ? (
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
<Skeleton variant="text" width="60%" height={34} />
<Skeleton variant="text" width="80%" height={24} />
<Skeleton variant="text" width="70%" height={24} />
<Skeleton variant="text" width="50%" height={24} />
</Box>
) : error ? (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100%",
color: "error.main",
}}
>
<Typography variant="body1" color="error">
{error}
</Typography>
<Button onClick={handleRefresh} sx={{ mt: 2 }}>
{t("Retry")}
</Button>
</Box>
) : (
<>
<Box
sx={{
display: "flex",
flexDirection: "row",
flex: 1,
overflow: "hidden",
}}
>
{/* 左侧：国家和IP地址 */}
<Box sx={{ width: "40%", overflow: "hidden" }}>
<Box
sx={{
display: "flex",
flexDirection: "row",
flex: 1,
alignItems: "center",
mb: 1,
overflow: "hidden",
}}
>
{/* 左侧：国家和IP地址 */}
<Box sx={{ width: "40%", overflow: "hidden" }}>
<Box
sx={{
display: "flex",
alignItems: "center",
mb: 1,
overflow: "hidden",
}}
>
<Box
component="span"
sx={{
fontSize: "1.5rem",
mr: 1,
display: "inline-block",
width: 28,
textAlign: "center",
flexShrink: 0,
}}
>
{getCountryFlag(ipInfo?.country_code)}
</Box>
<Typography
variant="subtitle1"
sx={{
fontWeight: "medium",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "100%",
}}
>
{ipInfo?.country || t("Unknown")}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
<Typography
variant="body2"
color="text.secondary"
sx={{ flexShrink: 0 }}
>
{t("IP")}:
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
ml: 1,
overflow: "hidden",
maxWidth: "calc(100% - 30px)",
}}
>
<Typography
variant="body2"
sx={{
fontFamily: "monospace",
fontSize: "0.75rem",
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-all",
}}
>
{showIp ? ipInfo?.ip : "••••••••••"}
</Typography>
<IconButton size="small" onClick={toggleShowIp}>
{showIp ? (
<VisibilityOffOutlined fontSize="small" />
) : (
<VisibilityOutlined fontSize="small" />
)}
</IconButton>
</Box>
</Box>
<InfoItem
label={t("ASN")}
value={ipInfo?.asn ? `AS${ipInfo.asn}` : "N/A"}
/>
</Box>
{/* 右侧：组织、ISP和位置信息 */}
<Box sx={{ width: "60%", overflow: "auto" }}>
<InfoItem label={t("ISP")} value={ipInfo?.isp} />
<InfoItem label={t("ORG")} value={ipInfo?.asn_organization} />
<InfoItem
label={t("Location")}
value={[ipInfo?.city, ipInfo?.region]
.filter(Boolean)
.join(", ")}
/>
<InfoItem label={t("Timezone")} value={ipInfo?.timezone} />
</Box>
</Box>
<Box
sx={{
mt: "auto",
pt: 0.5,
borderTop: 1,
borderColor: "divider",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
opacity: 0.7,
fontSize: "0.7rem",
}}
>
<Typography variant="caption">
{t("Auto refresh")}: {countdown}s
</Typography>
<Typography
variant="caption"
<Box
component="span"
sx={{
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
fontSize: "1.5rem",
mr: 1,
display: "inline-block",
width: 28,
textAlign: "center",
flexShrink: 0,
fontFamily: '"twemoji mozilla", sans-serif',
}}
>
{ipInfo?.country_code}, {ipInfo?.longitude?.toFixed(2)},{" "}
{ipInfo?.latitude?.toFixed(2)}
{getCountryFlag(ipInfo?.country_code)}
</Box>
<Typography
variant="subtitle1"
sx={{
fontWeight: "medium",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "100%",
}}
>
{ipInfo?.country || t("Unknown")}
</Typography>
</Box>
</>
)}
<Box sx={{ display: "flex", alignItems: "center", mb: 1 }}>
<Typography
variant="body2"
color="text.secondary"
sx={{ flexShrink: 0 }}
>
{t("IP")}:
</Typography>
<Box
sx={{
display: "flex",
alignItems: "center",
ml: 1,
overflow: "hidden",
maxWidth: "calc(100% - 30px)",
}}
>
<Typography
variant="body2"
sx={{
fontFamily: "monospace",
fontSize: "0.75rem",
overflow: "hidden",
textOverflow: "ellipsis",
wordBreak: "break-all",
}}
>
{showIp ? ipInfo?.ip : "••••••••••"}
</Typography>
<IconButton size="small" onClick={toggleShowIp}>
{showIp ? (
<VisibilityOffOutlined fontSize="small" />
) : (
<VisibilityOutlined fontSize="small" />
)}
</IconButton>
</Box>
</Box>
<InfoItem
label={t("ASN")}
value={ipInfo?.asn ? `AS${ipInfo.asn}` : "N/A"}
/>
</Box>
{/* 右侧：组织、ISP和位置信息 */}
<Box sx={{ width: "60%", overflow: "auto" }}>
<InfoItem label={t("ISP")} value={ipInfo?.isp} />
<InfoItem label={t("ORG")} value={ipInfo?.asn_organization} />
<InfoItem
label={t("Location")}
value={[ipInfo?.city, ipInfo?.region]
.filter(Boolean)
.join(", ")}
/>
<InfoItem label={t("Timezone")} value={ipInfo?.timezone} />
</Box>
</Box>
<Box
sx={{
mt: "auto",
pt: 0.5,
borderTop: 1,
borderColor: "divider",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
opacity: 0.7,
fontSize: "0.7rem",
}}
>
<Typography variant="caption">
{t("Auto refresh")}: {countdown}s
</Typography>
<Typography
variant="caption"
sx={{
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
}}
>
{ipInfo?.country_code}, {ipInfo?.longitude?.toFixed(2)},{" "}
{ipInfo?.latitude?.toFixed(2)}
</Typography>
</Box>
</Box>
</EnhancedCard>
);

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

@ -7,17 +7,16 @@ import {
Tooltip,
alpha,
useTheme,
Button,
Fade,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useState, useMemo, memo, FC } from "react";
import ProxyControlSwitches from "@/components/shared/ProxyControlSwitches";
import { Notice } from "@/components/base";
import {
LanguageRounded,
ComputerRounded,
TroubleshootRounded,
HelpOutlineRounded,
SvgIconComponent,
} from "@mui/icons-material";
import useSWR from "swr";
import {
@ -26,15 +25,131 @@ import {
getRunningMode,
} from "@/services/cmds";
export const ProxyTunCard = () => {
const LOCAL_STORAGE_TAB_KEY = "clash-verge-proxy-active-tab";
interface TabButtonProps {
isActive: boolean;
onClick: () => void;
icon: SvgIconComponent;
label: string;
hasIndicator?: boolean;
}
// 抽取Tab组件以减少重复代码
const TabButton: FC<TabButtonProps> = memo(({
isActive,
onClick,
icon: Icon,
label,
hasIndicator = false
}) => (
<Paper
elevation={isActive ? 2 : 0}
onClick={onClick}
sx={{
cursor: "pointer",
px: 2,
py: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
bgcolor: isActive ? "primary.main" : "background.paper",
color: isActive ? "primary.contrastText" : "text.primary",
borderRadius: 1.5,
flex: 1,
maxWidth: 160,
transition: "all 0.2s ease-in-out",
position: "relative",
"&:hover": {
transform: "translateY(-1px)",
boxShadow: 1,
},
"&:after": isActive
? {
content: '""',
position: "absolute",
bottom: -9,
left: "50%",
width: 2,
height: 9,
bgcolor: "primary.main",
transform: "translateX(-50%)",
}
: {},
}}
>
<Icon fontSize="small" />
<Typography
variant="body2"
sx={{ fontWeight: isActive ? 600 : 400 }}
>
{label}
</Typography>
{hasIndicator && (
<Box
sx={{
width: 8,
height: 8,
borderRadius: "50%",
bgcolor: isActive ? "#fff" : "success.main",
position: "absolute",
top: 8,
right: 8,
}}
/>
)}
</Paper>
));
interface TabDescriptionProps {
description: string;
tooltipTitle: string;
}
// 抽取描述文本组件
const TabDescription: FC<TabDescriptionProps> = memo(({ description, tooltipTitle }) => (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 0.5,
wordBreak: "break-word",
hyphens: "auto",
}}
>
{description}
<Tooltip title={tooltipTitle}>
<HelpOutlineRounded
sx={{ fontSize: 14, opacity: 0.7, flexShrink: 0 }}
/>
</Tooltip>
</Typography>
</Fade>
));
export const ProxyTunCard: FC = () => {
const { t } = useTranslation();
const theme = useTheme();
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<string>("system");
const [activeTab, setActiveTab] = useState<string>(() =>
localStorage.getItem(LOCAL_STORAGE_TAB_KEY) || "system"
);
// 获取代理状态信息
const { data: sysproxy } = useSWR("getSystemProxy", getSystemProxy);
const { data: autoproxy } = useSWR("getAutotemProxy", getAutotemProxy);
const { data: runningMode } = useSWR("getRunningMode", getRunningMode);
// 是否以sidecar模式运行
@ -42,26 +157,34 @@ export const ProxyTunCard = () => {
// 处理错误
const handleError = (err: Error) => {
setError(err.message);
Notice.error(err.message || err.toString(), 3000);
};
// 用户提示文本
const getTabDescription = (tab: string) => {
switch (tab) {
case "system":
return sysproxy?.enable
? t("System Proxy Enabled")
: t("System Proxy Disabled");
case "tun":
return isSidecarMode
? t("TUN Mode Service Required")
: t("TUN Mode Intercept Info");
default:
return "";
}
// 处理标签切换并保存到localStorage
const handleTabChange = (tab: string) => {
setActiveTab(tab);
localStorage.setItem(LOCAL_STORAGE_TAB_KEY, tab);
};
// 用户提示文本 - 使用useMemo避免重复计算
const tabDescription = useMemo(() => {
if (activeTab === "system") {
return {
text: sysproxy?.enable
? t("System Proxy Enabled")
: t("System Proxy Disabled"),
tooltip: t("System Proxy Info")
};
} else {
return {
text: isSidecarMode
? t("TUN Mode Service Required")
: t("TUN Mode Intercept Info"),
tooltip: t("Tun Mode Info")
};
}
}, [activeTab, sysproxy?.enable, isSidecarMode, t]);
return (
<Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
{/* 选项卡 */}
@ -75,112 +198,19 @@ export const ProxyTunCard = () => {
zIndex: 2,
}}
>
<Paper
elevation={activeTab === "system" ? 2 : 0}
onClick={() => setActiveTab("system")}
sx={{
cursor: "pointer",
px: 2,
py: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
bgcolor:
activeTab === "system" ? "primary.main" : "background.paper",
color:
activeTab === "system" ? "primary.contrastText" : "text.primary",
borderRadius: 1.5,
flex: 1,
maxWidth: 160,
transition: "all 0.2s ease-in-out",
position: "relative",
"&:hover": {
transform: "translateY(-1px)",
boxShadow: 1,
},
"&:after":
activeTab === "system"
? {
content: '""',
position: "absolute",
bottom: -9,
left: "50%",
width: 2,
height: 9,
bgcolor: "primary.main",
transform: "translateX(-50%)",
}
: {},
}}
>
<ComputerRounded fontSize="small" />
<Typography
variant="body2"
sx={{ fontWeight: activeTab === "system" ? 600 : 400 }}
>
{t("System Proxy")}
</Typography>
{sysproxy?.enable && (
<Box
sx={{
width: 8,
height: 8,
borderRadius: "50%",
bgcolor: activeTab === "system" ? "#fff" : "success.main",
position: "absolute",
top: 8,
right: 8,
}}
/>
)}
</Paper>
<Paper
elevation={activeTab === "tun" ? 2 : 0}
onClick={() => setActiveTab("tun")}
sx={{
cursor: "pointer",
px: 2,
py: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 1,
bgcolor: activeTab === "tun" ? "primary.main" : "background.paper",
color:
activeTab === "tun" ? "primary.contrastText" : "text.primary",
borderRadius: 1.5,
flex: 1,
maxWidth: 160,
transition: "all 0.2s ease-in-out",
position: "relative",
"&:hover": {
transform: "translateY(-1px)",
boxShadow: 1,
},
"&:after":
activeTab === "tun"
? {
content: '""',
position: "absolute",
bottom: -9,
left: "50%",
width: 2,
height: 9,
bgcolor: "primary.main",
transform: "translateX(-50%)",
}
: {},
}}
>
<TroubleshootRounded fontSize="small" />
<Typography
variant="body2"
sx={{ fontWeight: activeTab === "tun" ? 600 : 400 }}
>
{t("Tun Mode")}
</Typography>
</Paper>
<TabButton
isActive={activeTab === "system"}
onClick={() => handleTabChange("system")}
icon={ComputerRounded}
label={t("System Proxy")}
hasIndicator={sysproxy?.enable}
/>
<TabButton
isActive={activeTab === "tun"}
onClick={() => handleTabChange("tun")}
icon={TroubleshootRounded}
label={t("Tun Mode")}
/>
</Stack>
{/* 说明文本区域 */}
@ -194,71 +224,10 @@ export const ProxyTunCard = () => {
overflow: "visible",
}}
>
{activeTab === "system" && (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 0.5,
wordBreak: "break-word",
hyphens: "auto",
}}
>
{getTabDescription("system")}
<Tooltip title={t("System Proxy Info")}>
<HelpOutlineRounded
sx={{ fontSize: 14, opacity: 0.7, flexShrink: 0 }}
/>
</Tooltip>
</Typography>
</Fade>
)}
{activeTab === "tun" && (
<Fade in={true} timeout={200}>
<Typography
variant="caption"
component="div"
sx={{
width: "95%",
textAlign: "center",
color: "text.secondary",
p: 0.8,
borderRadius: 1,
borderColor: "primary.main",
borderWidth: 1,
borderStyle: "solid",
backgroundColor: "background.paper",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 0.5,
wordBreak: "break-word",
hyphens: "auto",
}}
>
{getTabDescription("tun")}
<Tooltip title={t("Tun Mode Info")}>
<HelpOutlineRounded
sx={{ fontSize: 14, opacity: 0.7, flexShrink: 0 }}
/>
</Tooltip>
</Typography>
</Fade>
)}
<TabDescription
description={tabDescription.text}
tooltipTitle={tabDescription.tooltip}
/>
</Box>
{/* 控制开关部分 */}

251
src/components/home/system-info-card.tsx
View File

@ -7,7 +7,7 @@ import useSWR from "swr";
import { getRunningMode, getSystemInfo, installService } from "@/services/cmds";
import { useNavigate } from "react-router-dom";
import { version as appVersion } from "@root/package.json";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { check as checkUpdate } from "@tauri-apps/plugin-updater";
import { useLockFn } from "ahooks";
import { Notice } from "@/components/base";
@ -17,99 +17,97 @@ export const SystemInfoCard = () => {
const { verge, patchVerge } = useVerge();
const navigate = useNavigate();
// 系统信息状态
const [systemState, setSystemState] = useState({
osInfo: "",
lastCheckUpdate: "-",
});
// 获取运行模式
const { data: runningMode = "sidecar", mutate: mutateRunningMode } = useSWR(
"getRunningMode",
getRunningMode,
{ suspense: false, revalidateOnFocus: false }
);
// 获取系统信息
const [osInfo, setOsInfo] = useState<string>("");
// 初始化系统信息
useEffect(() => {
// 获取系统信息
getSystemInfo()
.then((info) => {
const lines = info.split("\n");
if (lines.length > 0) {
// 提取系统名称和版本信息
const sysNameLine = lines[0]; // System Name: xxx
const sysVersionLine = lines[1]; // System Version: xxx
const sysName = sysNameLine.split(": ")[1] || "";
const sysVersion = sysVersionLine.split(": ")[1] || "";
setOsInfo(`${sysName} ${sysVersion}`);
const sysName = lines[0].split(": ")[1] || "";
const sysVersion = lines[1].split(": ")[1] || "";
setSystemState(prev => ({ ...prev, osInfo: `${sysName} ${sysVersion}` }));
}
})
.catch((err) => {
console.error("Error getting system info:", err);
});
}, []);
.catch(console.error);
// 获取最后检查更新时间
const [lastCheckUpdate, setLastCheckUpdate] = useState<string>("-");
// 在组件挂载时检查本地存储中的最后更新时间
useEffect(() => {
// 获取最后检查更新时间
const lastCheck = localStorage.getItem("last_check_update");
if (lastCheck) {
try {
const timestamp = parseInt(lastCheck, 10);
if (!isNaN(timestamp)) {
const date = new Date(timestamp);
setLastCheckUpdate(date.toLocaleString());
setSystemState(prev => ({
...prev,
lastCheckUpdate: new Date(timestamp).toLocaleString()
}));
}
} catch (e) {
console.error("Error parsing last check update time", e);
}
} else if (verge?.auto_check_update) {
// 如果启用了自动检查更新但没有最后检查时间记录，则触发一次检查
// 如果启用了自动检查更新但没有记录，设置当前时间并延迟检查
const now = Date.now();
localStorage.setItem("last_check_update", now.toString());
setLastCheckUpdate(new Date(now).toLocaleString());
setSystemState(prev => ({
...prev,
lastCheckUpdate: new Date(now).toLocaleString()
}));
// 延迟执行检查更新，避免在应用启动时立即执行
setTimeout(() => {
checkUpdate().catch((e) => console.error("Error checking update:", e));
if (verge?.auto_check_update) {
checkUpdate().catch(console.error);
}
}, 5000);
}
}, [verge?.auto_check_update]);
// 监听 checkUpdate 调用并更新时间
// 自动检查更新逻辑
useSWR(
"checkUpdate",
verge?.auto_check_update ? "checkUpdate" : null,
async () => {
// 更新最后检查时间
const now = Date.now();
localStorage.setItem("last_check_update", now.toString());
setLastCheckUpdate(new Date(now).toLocaleString());
// 实际执行检查更新
setSystemState(prev => ({
...prev,
lastCheckUpdate: new Date(now).toLocaleString()
}));
return await checkUpdate();
},
{
revalidateOnFocus: false,
refreshInterval: 24 * 60 * 60 * 1000, // 每天检查一次更新
dedupingInterval: 60 * 60 * 1000, // 1小时内不重复检查,
isPaused: () => !(verge?.auto_check_update ?? true), // 根据 auto_check_update 设置决定是否启用
},
refreshInterval: 24 * 60 * 60 * 1000, // 每天检查一次
dedupingInterval: 60 * 60 * 1000, // 1小时内不重复检查
}
);
// 导航到设置页面
const goToSettings = () => {
const goToSettings = useCallback(() => {
navigate("/settings");
};
}, [navigate]);
// 切换自启动状态
const toggleAutoLaunch = async () => {
const toggleAutoLaunch = useCallback(async () => {
if (!verge) return;
try {
if (!verge) return;
// 将当前的启动状态取反
await patchVerge({ enable_auto_launch: !verge.enable_auto_launch });
} catch (err) {
console.error("切换开机自启动状态失败:", err);
}
};
}, [verge, patchVerge]);
// 安装系统服务
const onInstallService = useLockFn(async () => {
@ -117,34 +115,48 @@ export const SystemInfoCard = () => {
Notice.info(t("Installing Service..."), 1000);
await installService();
Notice.success(t("Service Installed Successfully"), 2000);
// 重新获取运行模式
await mutateRunningMode();
} catch (err: any) {
Notice.error(err.message || err.toString(), 3000);
}
});
// 点击运行模式
const handleRunningModeClick = () => {
// 点击运行模式处理
const handleRunningModeClick = useCallback(() => {
if (runningMode === "sidecar") {
onInstallService();
}
};
}, [runningMode, onInstallService]);
// 检查更新
const onCheckUpdate = async () => {
const onCheckUpdate = useLockFn(async () => {
try {
const info = await checkUpdate();
if (!info?.available) {
Notice.success(t("Currently on the Latest Version"));
} else {
Notice.info(t("Update Available"), 2000);
goToSettings(); // 跳转到设置页面查看更新
goToSettings();
}
} catch (err: any) {
Notice.error(err.message || err.toString());
}
};
});
// 是否启用自启动
const autoLaunchEnabled = useMemo(() => verge?.enable_auto_launch || false, [verge]);
// 运行模式样式
const runningModeStyle = useMemo(() => ({
cursor: runningMode === "sidecar" ? "pointer" : "default",
textDecoration: runningMode === "sidecar" ? "underline" : "none",
"&:hover": {
opacity: runningMode === "sidecar" ? 0.7 : 1,
},
}), [runningMode]);
// 只有当verge存在时才渲染内容
if (!verge) return null;
return (
<EnhancedCard
@ -157,84 +169,71 @@ export const SystemInfoCard = () => {
</IconButton>
}
>
{verge && (
<Stack spacing={1.5}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("OS Info")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{osInfo}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Auto Launch")}
</Typography>
<Chip
size="small"
label={verge.enable_auto_launch ? t("Enabled") : t("Disabled")}
color={verge.enable_auto_launch ? "success" : "default"}
variant={verge.enable_auto_launch ? "filled" : "outlined"}
onClick={toggleAutoLaunch}
sx={{ cursor: "pointer" }}
/>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Running Mode")}
</Typography>
<Typography
variant="body2"
fontWeight="medium"
onClick={handleRunningModeClick}
sx={{
cursor: runningMode === "sidecar" ? "pointer" : "default",
textDecoration:
runningMode === "sidecar" ? "underline" : "none",
"&:hover": {
opacity: runningMode === "sidecar" ? 0.7 : 1,
},
}}
>
{runningMode === "service"
? t("Service Mode")
: t("Sidecar Mode")}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Last Check Update")}
</Typography>
<Typography
variant="body2"
fontWeight="medium"
onClick={onCheckUpdate}
sx={{
cursor: "pointer",
textDecoration: "underline",
"&:hover": {
opacity: 0.7,
},
}}
>
{lastCheckUpdate}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Verge Version")}
</Typography>
<Typography variant="body2" fontWeight="medium">
v{appVersion}
</Typography>
</Stack>
<Stack spacing={1.5}>
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("OS Info")}
</Typography>
<Typography variant="body2" fontWeight="medium">
{systemState.osInfo}
</Typography>
</Stack>
)}
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Auto Launch")}
</Typography>
<Chip
size="small"
label={autoLaunchEnabled ? t("Enabled") : t("Disabled")}
color={autoLaunchEnabled ? "success" : "default"}
variant={autoLaunchEnabled ? "filled" : "outlined"}
onClick={toggleAutoLaunch}
sx={{ cursor: "pointer" }}
/>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Running Mode")}
</Typography>
<Typography
variant="body2"
fontWeight="medium"
onClick={handleRunningModeClick}
sx={runningModeStyle}
>
{runningMode === "service" ? t("Service Mode") : t("Sidecar Mode")}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Last Check Update")}
</Typography>
<Typography
variant="body2"
fontWeight="medium"
onClick={onCheckUpdate}
sx={{
cursor: "pointer",
textDecoration: "underline",
"&:hover": { opacity: 0.7 },
}}
>
{systemState.lastCheckUpdate}
</Typography>
</Stack>
<Divider />
<Stack direction="row" justifyContent="space-between">
<Typography variant="body2" color="text.secondary">
{t("Verge Version")}
</Typography>
<Typography variant="body2" fontWeight="medium">
v{appVersion}
</Typography>
</Stack>
</Stack>
</EnhancedCard>
);
};

179
src/components/home/test-card.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from "react";
import { useEffect, useRef, useMemo, useCallback } from "react";
import { useVerge } from "@/hooks/use-verge";
import { Box, IconButton, Tooltip, alpha, styled } from "@mui/material";
import Grid from "@mui/material/Grid2";
@ -40,67 +40,79 @@ const ScrollBox = styled(Box)(({ theme }) => ({
},
}));
// 默认测试列表，移到组件外部避免重复创建
const DEFAULT_TEST_LIST = [
{
uid: nanoid(),
name: "Apple",
url: "https://www.apple.com",
icon: apple,
},
{
uid: nanoid(),
name: "GitHub",
url: "https://www.github.com",
icon: github,
},
{
uid: nanoid(),
name: "Google",
url: "https://www.google.com",
icon: google,
},
{
uid: nanoid(),
name: "Youtube",
url: "https://www.youtube.com",
icon: youtube,
},
];
export const TestCard = () => {
const { t } = useTranslation();
const sensors = useSensors(useSensor(PointerSensor));
const { verge, mutateVerge, patchVerge } = useVerge();
const viewerRef = useRef<TestViewerRef>(null);
// test list
const testList = verge?.test_list ?? [
{
uid: nanoid(),
name: "Apple",
url: "https://www.apple.com",
icon: apple,
},
{
uid: nanoid(),
name: "GitHub",
url: "https://www.github.com",
icon: github,
},
{
uid: nanoid(),
name: "Google",
url: "https://www.google.com",
icon: google,
},
{
uid: nanoid(),
name: "Youtube",
url: "https://www.youtube.com",
icon: youtube,
},
];
// 使用useMemo优化测试列表，避免每次渲染重新计算
const testList = useMemo(() => {
return verge?.test_list ?? DEFAULT_TEST_LIST;
}, [verge?.test_list]);
// 使用useCallback优化函数引用，避免不必要的重新渲染
const onTestListItemChange = useCallback(
(uid: string, patch?: Partial<IVergeTestItem>) => {
if (!patch) {
mutateVerge();
return;
}
const newList = testList.map((x) =>
x.uid === uid ? { ...x, ...patch } : x
);
const onTestListItemChange = (
uid: string,
patch?: Partial<IVergeTestItem>,
) => {
if (patch) {
const newList = testList.map((x) => {
if (x.uid === uid) {
return { ...x, ...patch };
}
return x;
});
mutateVerge({ ...verge, test_list: newList }, false);
} else {
mutateVerge();
}
};
},
[testList, verge, mutateVerge]
);
const onDeleteTestListItem = (uid: string) => {
const newList = testList.filter((x) => x.uid !== uid);
patchVerge({ test_list: newList });
mutateVerge({ ...verge, test_list: newList }, false);
};
const onDeleteTestListItem = useCallback(
(uid: string) => {
const newList = testList.filter((x) => x.uid !== uid);
patchVerge({ test_list: newList });
mutateVerge({ ...verge, test_list: newList }, false);
},
[testList, verge, patchVerge, mutateVerge]
);
const onDragEnd = useCallback(
async (event: DragEndEvent) => {
const { active, over } = event;
if (!over || active.id === over.id) return;
const old_index = testList.findIndex((x) => x.uid === active.id);
const new_index = testList.findIndex((x) => x.uid === over.id);
const onDragEnd = async (event: DragEndEvent) => {
const { active, over } = event;
if (over && active.id !== over.id) {
let old_index = testList.findIndex((x) => x.uid === active.id);
let new_index = testList.findIndex((x) => x.uid === over.id);
if (old_index >= 0 && new_index >= 0) {
const newList = [...testList];
const [removed] = newList.splice(old_index, 1);
@ -109,17 +121,42 @@ export const TestCard = () => {
await mutateVerge({ ...verge, test_list: newList }, false);
await patchVerge({ test_list: newList });
}
}
};
},
[testList, verge, mutateVerge, patchVerge]
);
// 仅在verge首次加载时初始化测试列表
useEffect(() => {
if (!verge) return;
if (!verge?.test_list) {
patchVerge({ test_list: testList });
if (verge && !verge.test_list) {
patchVerge({ test_list: DEFAULT_TEST_LIST });
}
}, [verge]);
}, [verge, patchVerge]);
const viewerRef = useRef<TestViewerRef>(null);
// 使用useMemo优化UI内容，减少渲染计算
const renderTestItems = useMemo(() => (
<Grid container spacing={1} columns={12}>
<SortableContext items={testList.map((x) => x.uid)}>
{testList.map((item) => (
<Grid key={item.uid} size={3}>
<TestItem
id={item.uid}
itemData={item}
onEdit={() => viewerRef.current?.edit(item)}
onDelete={onDeleteTestListItem}
/>
</Grid>
))}
</SortableContext>
</Grid>
), [testList, onDeleteTestListItem]);
const handleTestAll = useCallback(() => {
emit("verge://test-all");
}, []);
const handleCreateTest = useCallback(() => {
viewerRef.current?.create();
}, []);
return (
<EnhancedCard
@ -128,15 +165,12 @@ export const TestCard = () => {
action={
<Box sx={{ display: "flex", gap: 1 }}>
<Tooltip title={t("Test All")} arrow>
<IconButton size="small" onClick={() => emit("verge://test-all")}>
<IconButton size="small" onClick={handleTestAll}>
<NetworkCheck fontSize="small" />
</IconButton>
</Tooltip>
<Tooltip title={t("Create Test")} arrow>
<IconButton
size="small"
onClick={() => viewerRef.current?.create()}
>
<IconButton size="small" onClick={handleCreateTest}>
<Add fontSize="small" />
</IconButton>
</Tooltip>
@ -149,20 +183,7 @@ export const TestCard = () => {
collisionDetection={closestCenter}
onDragEnd={onDragEnd}
>
<Grid container spacing={1} columns={12}>
<SortableContext items={testList.map((x) => x.uid)}>
{testList.map((item) => (
<Grid key={item.uid} size={3}>
<TestItem
id={item.uid}
itemData={item}
onEdit={() => viewerRef.current?.edit(item)}
onDelete={onDeleteTestListItem}
/>
</Grid>
))}
</SortableContext>
</Grid>
{renderTestItems}
</DndContext>
</ScrollBox>

6
src/locales/en.json
View File

@ -207,9 +207,9 @@
"System Proxy Disabled": "System proxy is disabled, it is recommended for most users to turn on this option",
"TUN Mode Service Required": "TUN mode requires service mode, please install the service first",
"TUN Mode Intercept Info": "TUN mode can take over all application traffic, suitable for special applications",
"Rule Mode Description": "Routes traffic according to preset rules, provides flexible proxy strategies",
"Global Mode Description": "All traffic goes through proxy servers, suitable for scenarios requiring global internet access",
"Direct Mode Description": "All traffic doesn't go through proxy nodes, but is forwarded by Clash kernel to target servers, suitable for specific scenarios requiring kernel traffic distribution",
"rule Mode Description": "Routes traffic according to preset rules, provides flexible proxy strategies",
"global Mode Description": "All traffic goes through proxy servers, suitable for scenarios requiring global internet access",
"direct Mode Description": "All traffic doesn't go through proxy nodes, but is forwarded by Clash kernel to target servers, suitable for specific scenarios requiring kernel traffic distribution",
"Stack": "Tun Stack",
"System and Mixed Can Only be Used in Service Mode": "System and Mixed Can Only be Used in Service Mode",
"Device": "Device Name",

6
src/locales/zh.json
View File

@ -207,9 +207,9 @@
"System Proxy Disabled": "系统代理已关闭，建议大多数用户打开此选项",
"TUN Mode Service Required": "TUN模式需要服务模式，请先安装服务",
"TUN Mode Intercept Info": "TUN模式可以接管所有应用流量，适用于特殊应用",
"Rule Mode Description": "基于预设规则智能判断流量走向，提供灵活的代理策略",
"Global Mode Description": "所有流量均通过代理服务器，适用于需要全局科学上网的场景",
"Direct Mode Description": "所有流量不经过代理节点，但经过Clash内核转发连接目标服务器，适用于需要通过内核进行分流的特定场景",
"rule Mode Description": "基于预设规则智能判断流量走向，提供灵活的代理策略",
"global Mode Description": "所有流量均通过代理服务器，适用于需要全局科学上网的场景",
"direct Mode Description": "所有流量不经过代理节点，但经过Clash内核转发连接目标服务器，适用于需要通过内核进行分流的特定场景",
"Stack": "TUN 模式堆栈",
"System and Mixed Can Only be Used in Service Mode": "System 和 Mixed 只能在服务模式下使用",
"Device": "TUN 网卡名称",

7
src/pages/home.tsx
View File

@ -201,7 +201,7 @@ const HomeSettingsDialog = ({
const HomePage = () => {
const { t } = useTranslation();
const { verge } = useVerge();
const { current } = useProfiles();
const { current, mutateProfiles } = useProfiles();
const navigate = useNavigate();
const theme = useTheme();
@ -275,7 +275,10 @@ const HomePage = () => {
{/* 订阅和当前节点部分 */}
{homeCards.profile && (
<Grid size={6}>
<HomeProfileCard current={current} />
<HomeProfileCard
current={current}
onProfileUpdated={mutateProfiles}
/>
</Grid>
)}