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

UPDATELOG.md

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

src/components/home/enhanced-traffic-graph.tsx

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

src/components/setting/mods/dns-viewer.tsx

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

src/locales/en.json

@@ -489,7 +489,7 @@
   "Service Administrator Prompt": "Clash Verge requires administrator privileges to reinstall the system service",
   "DNS Settings": "DNS Settings",
   "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",
   "DNS Listen": "DNS Listen",
   "Enhanced Mode": "Enhanced Mode",