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

perf: optimize homepage traffic chart code, refine UI, and complete i18n

Browse Source
This commit is contained in:
wonfen 2025-03-28 05:53:18 +08:00
parent e8e16f7d57
commit b7e01aefb4
4 changed files with 130 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
UPDATELOG.md
View File

@ -14,6 +14,7 @@
#### 新增了： #### 新增了：
- ClashVergeRev 从现在开始不再强依赖系统服务和管理权限 - ClashVergeRev 从现在开始不再强依赖系统服务和管理权限
- 支持根据用户偏好选择Sidecar(用户空间)模式或安装服务
#### 优化了： #### 优化了：
- 重构了后端内核管理逻辑，更轻量化和有效的管理内核，提高了性能和稳定性 - 重构了后端内核管理逻辑，更轻量化和有效的管理内核，提高了性能和稳定性

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

@ -122,7 +122,7 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
// 更新显示数据 // 更新显示数据
const pointsToShow = getMaxPointsByTimeRange(timeRange); const pointsToShow = getMaxPointsByTimeRange(timeRange);
setDisplayData(initialBuffer.slice(-pointsToShow)); setDisplayData(initialBuffer.slice(-pointsToShow));
}, [MAX_BUFFER_SIZE, getMaxPointsByTimeRange, timeRange]); }, [MAX_BUFFER_SIZE, getMaxPointsByTimeRange]);
// 添加数据点方法 // 添加数据点方法
const appendData = useCallback((data: ITrafficItem) => { const appendData = useCallback((data: ITrafficItem) => {
@ -205,7 +205,7 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
// 共享图表配置 // 共享图表配置
const chartConfig = useMemo(() => ({ const chartConfig = useMemo(() => ({
data: displayData, data: displayData,
margin: { top: 10, right: 20, left: 0, bottom: 0 }, margin: { top: 20, right: 10, left: 0, bottom: -10 },
}), [displayData]); }), [displayData]);
// 共享的线条/区域配置 // 共享的线条/区域配置
@ -228,186 +228,138 @@ export const EnhancedTrafficGraph = memo(forwardRef<EnhancedTrafficGraphRef>(
position: "relative", position: "relative",
bgcolor: "action.hover", bgcolor: "action.hover",
borderRadius: 1, borderRadius: 1,
padding: 1,
cursor: "pointer", cursor: "pointer",
}} }}
onClick={toggleStyle} onClick={toggleStyle}
> >
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
{chartStyle === "line" ? ( {/* 根据chartStyle动态选择图表类型 */}
<LineChart {...chartConfig}> {(() => {
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={colors.grid} opacity={0.3} /> // 创建共享的图表组件
<XAxis const commonChartComponents = (
dataKey="name" <>
tick={{ fontSize: 10, fill: colors.text }} <CartesianGrid strokeDasharray="3 3" vertical={false} stroke={colors.grid} opacity={0.3} />
tickLine={{ stroke: colors.grid }} <XAxis
axisLine={{ stroke: colors.grid }} dataKey="name"
interval="preserveStart" tick={{ fontSize: 10, fill: colors.text }}
tickFormatter={formatXLabel} tickLine={{ stroke: colors.grid }}
minTickGap={30} axisLine={{ stroke: colors.grid }}
/> interval="preserveStart"
<YAxis tickFormatter={formatXLabel}
tickFormatter={formatYAxis} minTickGap={30}
tick={{ fontSize: 10, fill: colors.text }} />
tickLine={{ stroke: colors.grid }} <YAxis
axisLine={{ stroke: colors.grid }} tickFormatter={formatYAxis}
width={43} tick={{ fontSize: 10, fill: colors.text }}
domain={[0, "auto"]} tickLine={{ stroke: colors.grid }}
/> axisLine={{ stroke: colors.grid }}
<Tooltip width={44}
formatter={formatTooltip} domain={[0, "auto"]}
labelFormatter={(label) => `${t("Time")}: ${label}`} padding={{ top: 8, bottom: 0 }}
contentStyle={{ />
backgroundColor: colors.tooltip, <Tooltip
borderColor: colors.grid, formatter={formatTooltip}
borderRadius: 4, labelFormatter={(label) => `${t("Time")}: ${label}`}
}} contentStyle={{
itemStyle={{ color: colors.text }} backgroundColor: colors.tooltip,
isAnimationActive={false} borderColor: colors.grid,
/> borderRadius: 4,
<Line }}
type={curveType} itemStyle={{ color: colors.text }}
{...commonLineProps} isAnimationActive={false}
dataKey="up" />
name={t("Upload")}
stroke={colors.up}
/>
<Line
type={curveType}
{...commonLineProps}
dataKey="down"
name={t("Download")}
stroke={colors.down}
/>
{/* 可点击的时间范围标签 */} {/* 可点击的时间范围标签 */}
<text <text
x="1%" x="1%"
y="6%" y="11%"
textAnchor="start" textAnchor="start"
fill={theme.palette.text.secondary} fill={theme.palette.text.secondary}
fontSize={11} fontSize={11}
fontWeight="bold" fontWeight="bold"
onClick={handleTimeRangeClick} onClick={handleTimeRangeClick}
style={{ cursor: "pointer" }} style={{ cursor: "pointer" }}
> >
{getTimeRangeText()} {getTimeRangeText()}
</text> </text>
{/* 上传标签 - 右上角 */} {/* 上传标签 - 右上角 */}
<text <text
x="98%" x="99%"
y="7%" y="11%"
textAnchor="end" textAnchor="end"
fill={colors.up} fill={colors.up}
fontSize={12} fontSize={12}
fontWeight="bold" fontWeight="bold"
> onClick={toggleStyle}
{t("Upload")} style={{ cursor: "pointer" }}
</text> >
{t("Upload")}
</text>
{/* 下载标签 - 右上角下方 */} {/* 下载标签 - 右上角下方 */}
<text <text
x="98%" x="99%"
y="16%" y="19%"
textAnchor="end" textAnchor="end"
fill={colors.down} fill={colors.down}
fontSize={12} fontSize={12}
fontWeight="bold" fontWeight="bold"
> onClick={toggleStyle}
{t("Download")} style={{ cursor: "pointer" }}
</text> >
</LineChart> {t("Download")}
) : ( </text>
<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={43}
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}
/>
{/* 可点击的时间范围标签 */} // 根据chartStyle返回相应的图表类型
<text if (chartStyle === "line") {
x="1%" return (
y="6%" <LineChart {...chartConfig}>
textAnchor="start" {commonChartComponents}
fill={theme.palette.text.secondary} <Line
fontSize={11} type={curveType}
fontWeight="bold" {...commonLineProps}
onClick={handleTimeRangeClick} dataKey="up"
style={{ cursor: "pointer" }} name={t("Upload")}
> stroke={colors.up}
{getTimeRangeText()} />
</text> <Line
type={curveType}
{/* 上传标签 - 右上角 */} {...commonLineProps}
<text dataKey="down"
x="98%" name={t("Download")}
y="7%" stroke={colors.down}
textAnchor="end" />
fill={colors.up} </LineChart>
fontSize={12} );
fontWeight="bold" } else {
> return (
{t("Upload")} <AreaChart {...chartConfig}>
</text> {commonChartComponents}
<Area
{/* 下载标签 - 右上角下方 */} type={curveType}
<text {...commonLineProps}
x="98%" dataKey="up"
y="16%" name={t("Upload")}
textAnchor="end" stroke={colors.up}
fill={colors.down} fill={colors.up}
fontSize={12} fillOpacity={0.2}
fontWeight="bold" />
> <Area
{t("Download")} type={curveType}
</text> {...commonLineProps}
</AreaChart> dataKey="down"
)} name={t("Download")}
stroke={colors.down}
fill={colors.down}
fillOpacity={0.3}
/>
</AreaChart>
);
}
})()}
</ResponsiveContainer> </ResponsiveContainer>
</Box> </Box>
); );

2
src/components/setting/mods/dns-viewer.tsx
View File

@ -576,7 +576,7 @@ export const DnsViewer = forwardRef<DialogRef>((props, ref) => {
open={open} open={open}
title={ title={
<Box display="flex" justifyContent="space-between" alignItems="center"> <Box display="flex" justifyContent="space-between" alignItems="center">
{t("DNS Settings")} {t("DNS Overwrite")}
<Box display="flex" alignItems="center" gap={1}> <Box display="flex" alignItems="center" gap={1}>
<Button <Button
variant="outlined" variant="outlined"

2
src/locales/en.json
View File

@ -489,7 +489,7 @@
"Service Administrator Prompt": "Clash Verge requires administrator privileges to reinstall the system service", "Service Administrator Prompt": "Clash Verge requires administrator privileges to reinstall the system service",
"DNS Settings": "DNS Settings", "DNS Settings": "DNS Settings",
"DNS Overwrite": "DNS Overwrite", "DNS Overwrite": "DNS Overwrite",
"DNS Settings Warning": "If you are not familiar with these settings, please do not modify them and keep DNS Settings enabled", "DNS Settings Warning": "If you are not familiar with these settings, please do not modify them and keep DNS Overwrite enabled",
"Enable DNS": "Enable DNS", "Enable DNS": "Enable DNS",
"DNS Listen": "DNS Listen", "DNS Listen": "DNS Listen",
"Enhanced Mode": "Enhanced Mode", "Enhanced Mode": "Enhanced Mode",