feat: add rustfmt configuration and CI workflow for code formatting

refactor: streamline formatting workflow by removing unused taplo steps and clarifying directory change refactor: remove unnecessary directory change step in formatting workflow
2025-06-06 21:11:14 +08:00
parent 689042df60
commit 09969d95de
89 changed files with 2630 additions and 2008 deletions
--- a/src/components/home/enhanced-traffic-stats.tsx
+++ b/src/components/home/enhanced-traffic-stats.tsx
@@ -66,85 +66,90 @@ const CONNECTIONS_UPDATE_INTERVAL = 5000; // 5秒更新一次连接数据
 const THROTTLE_TRAFFIC_UPDATE = 500; // 500ms节流流量数据更新

 // 统计卡片组件 - 使用memo优化
-const CompactStatCard = memo(({
-  icon,
-  title,
-  value,
-  unit,
-  color,
-  onClick,
-}: StatCardProps) => {
-  const theme = useTheme();
+const CompactStatCard = memo(
+  ({ icon, title, value, unit, color, onClick }: StatCardProps) => {
+    const theme = useTheme();

-  // 获取调色板颜色 - 使用useMemo避免重复计算
-  const colorValue = useMemo(() => {
-    const palette = theme.palette;
-    if (
-      color in palette &&
-      palette[color as keyof typeof palette] &&
-      "main" in (palette[color as keyof typeof palette] as PaletteColor)
-    ) {
-      return (palette[color as keyof typeof palette] as PaletteColor).main;
-    }
-    return palette.primary.main;
-  }, [theme.palette, color]);
+    // 获取调色板颜色 - 使用useMemo避免重复计算
+    const colorValue = useMemo(() => {
+      const palette = theme.palette;
+      if (
+        color in palette &&
+        palette[color as keyof typeof palette] &&
+        "main" in (palette[color as keyof typeof palette] as PaletteColor)
+      ) {
+        return (palette[color as keyof typeof palette] as PaletteColor).main;
+      }
+      return palette.primary.main;
+    }, [theme.palette, color]);

-  return (
-    <Paper
-      elevation={0}
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        borderRadius: 2,
-        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(colorValue, 0.1),
-          border: `1px solid ${alpha(colorValue, 0.3)}`,
-          boxShadow: `0 4px 8px rgba(0,0,0,0.05)`,
-        } : {},
-      }}
-      onClick={onClick}
-    >
-      {/* 图标容器 */}
-      <Grid
-        component="div"
+    return (
+      <Paper
+        elevation={0}
        sx={{
-          mr: 1,
-          ml: "2px",
          display: "flex",
          alignItems: "center",
-          justifyContent: "center",
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          bgcolor: alpha(colorValue, 0.1),
-          color: colorValue,
+          borderRadius: 2,
+          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(colorValue, 0.1),
+                border: `1px solid ${alpha(colorValue, 0.3)}`,
+                boxShadow: `0 4px 8px rgba(0,0,0,0.05)`,
+              }
+            : {},
        }}
+        onClick={onClick}
      >
-        {icon}
-      </Grid>
-
-      {/* 文本内容 */}
-      <Grid component="div" sx={{ flexGrow: 1, minWidth: 0 }}>
-        <Typography variant="caption" color="text.secondary" noWrap>
-          {title}
-        </Typography>
-        <Grid component="div" sx={{ display: "flex", alignItems: "baseline" }}>
-          <Typography variant="body1" fontWeight="bold" noWrap sx={{ mr: 0.5 }}>
-            {value}
-          </Typography>
-          <Typography variant="caption" color="text.secondary">
-            {unit}
-          </Typography>
+        {/* 图标容器 */}
+        <Grid
+          component="div"
+          sx={{
+            mr: 1,
+            ml: "2px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 32,
+            height: 32,
+            borderRadius: "50%",
+            bgcolor: alpha(colorValue, 0.1),
+            color: colorValue,
+          }}
+        >
+          {icon}
        </Grid>
-      </Grid>
-    </Paper>
-  );
-});
+
+        {/* 文本内容 */}
+        <Grid component="div" sx={{ flexGrow: 1, minWidth: 0 }}>
+          <Typography variant="caption" color="text.secondary" noWrap>
+            {title}
+          </Typography>
+          <Grid
+            component="div"
+            sx={{ display: "flex", alignItems: "baseline" }}
+          >
+            <Typography
+              variant="body1"
+              fontWeight="bold"
+              noWrap
+              sx={{ mr: 0.5 }}
+            >
+              {value}
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              {unit}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Paper>
+    );
+  },
+);

 // 添加显示名称
 CompactStatCard.displayName = "CompactStatCard";
@@ -205,25 +210,25 @@ export const EnhancedTrafficStats = () => {
              down: data.down,
              timestamp: now,
            });
-          } catch { }
+          } catch {}
          return;
        }
        lastUpdateRef.current.traffic = now;
        const safeUp = isNaN(data.up) ? 0 : data.up;
        const safeDown = isNaN(data.down) ? 0 : data.down;
        try {
-          setStats(prev => ({
+          setStats((prev) => ({
            ...prev,
-            traffic: { up: safeUp, down: safeDown }
+            traffic: { up: safeUp, down: safeDown },
          }));
-        } catch { }
+        } catch {}
        try {
          trafficRef.current?.appendData({
            up: safeUp,
            down: safeDown,
            timestamp: now,
          });
-        } catch { }
+        } catch {}
      }
    } catch (err) {
      console.error("[Traffic] 解析数据错误:", err, event.data);
@@ -235,12 +240,12 @@ export const EnhancedTrafficStats = () => {
    try {
      const data = JSON.parse(event.data) as MemoryUsage;
      if (data && typeof data.inuse === "number") {
-        setStats(prev => ({
+        setStats((prev) => ({
          ...prev,
          memory: {
            inuse: isNaN(data.inuse) ? 0 : data.inuse,
            oslimit: data.oslimit,
-          }
+          },
        }));
      }
    } catch (err) {
@@ -257,7 +262,7 @@ export const EnhancedTrafficStats = () => {

    // 清理现有连接的函数
    const cleanupSockets = () => {
-      Object.values(socketRefs.current).forEach(socket => {
+      Object.values(socketRefs.current).forEach((socket) => {
        if (socket) {
          socket.close();
        }
@@ -269,40 +274,78 @@ export const EnhancedTrafficStats = () => {
    cleanupSockets();

    // 创建新连接
-    console.log(`[Traffic][${EnhancedTrafficStats.name}] 正在连接: ${server}/traffic`);
-    socketRefs.current.traffic = createAuthSockette(`${server}/traffic`, secret, {
-      onmessage: handleTrafficUpdate,
-      onopen: (event) => {
-        console.log(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接已建立`, event);
+    console.log(
+      `[Traffic][${EnhancedTrafficStats.name}] 正在连接: ${server}/traffic`,
+    );
+    socketRefs.current.traffic = createAuthSockette(
+      `${server}/traffic`,
+      secret,
+      {
+        onmessage: handleTrafficUpdate,
+        onopen: (event) => {
+          console.log(
+            `[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接已建立`,
+            event,
+          );
+        },
+        onerror: (event) => {
+          console.error(
+            `[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`,
+            event,
+          );
+          setStats((prev) => ({ ...prev, traffic: { up: 0, down: 0 } }));
+        },
+        onclose: (event) => {
+          console.log(
+            `[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接关闭`,
+            event.code,
+            event.reason,
+          );
+          if (event.code !== 1000 && event.code !== 1001) {
+            console.warn(
+              `[Traffic][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`,
+            );
+            setStats((prev) => ({ ...prev, traffic: { up: 0, down: 0 } }));
+          }
+        },
      },
-      onerror: (event) => {
-        console.error(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`, event);
-        setStats(prev => ({ ...prev, traffic: { up: 0, down: 0 } }));
-      },
-      onclose: (event) => {
-        console.log(`[Traffic][${EnhancedTrafficStats.name}] WebSocket 连接关闭`, event.code, event.reason);
-        if (event.code !== 1000 && event.code !== 1001) {
-          console.warn(`[Traffic][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`);
-          setStats(prev => ({ ...prev, traffic: { up: 0, down: 0 } }));
-        }
-      },
-    });
+    );

-    console.log(`[Memory][${EnhancedTrafficStats.name}] 正在连接: ${server}/memory`);
+    console.log(
+      `[Memory][${EnhancedTrafficStats.name}] 正在连接: ${server}/memory`,
+    );
    socketRefs.current.memory = createAuthSockette(`${server}/memory`, secret, {
      onmessage: handleMemoryUpdate,
      onopen: (event) => {
-        console.log(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接已建立`, event);
+        console.log(
+          `[Memory][${EnhancedTrafficStats.name}] WebSocket 连接已建立`,
+          event,
+        );
      },
      onerror: (event) => {
-        console.error(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`, event);
-        setStats(prev => ({ ...prev, memory: { inuse: 0, oslimit: undefined } }));
+        console.error(
+          `[Memory][${EnhancedTrafficStats.name}] WebSocket 连接错误或达到最大重试次数`,
+          event,
+        );
+        setStats((prev) => ({
+          ...prev,
+          memory: { inuse: 0, oslimit: undefined },
+        }));
      },
      onclose: (event) => {
-        console.log(`[Memory][${EnhancedTrafficStats.name}] WebSocket 连接关闭`, event.code, event.reason);
+        console.log(
+          `[Memory][${EnhancedTrafficStats.name}] WebSocket 连接关闭`,
+          event.code,
+          event.reason,
+        );
        if (event.code !== 1000 && event.code !== 1001) {
-          console.warn(`[Memory][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`);
-          setStats(prev => ({ ...prev, memory: { inuse: 0, oslimit: undefined } }));
+          console.warn(
+            `[Memory][${EnhancedTrafficStats.name}] 连接非正常关闭，重置状态`,
+          );
+          setStats((prev) => ({
+            ...prev,
+            memory: { inuse: 0, oslimit: undefined },
+          }));
        }
      },
    });
@@ -314,11 +357,11 @@ export const EnhancedTrafficStats = () => {
  useEffect(() => {
    return () => {
      try {
-        Object.values(socketRefs.current).forEach(socket => {
+        Object.values(socketRefs.current).forEach((socket) => {
          if (socket) socket.close();
        });
        socketRefs.current = { traffic: null, memory: null };
-      } catch { }
+      } catch {}
    };
  }, []);

@@ -339,13 +382,25 @@ export const EnhancedTrafficStats = () => {
    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(connections.uploadTotal);
-    const [downloadTotal, downloadTotalUnit] = parseTraffic(connections.downloadTotal);
+    const [uploadTotal, uploadTotalUnit] = parseTraffic(
+      connections.uploadTotal,
+    );
+    const [downloadTotal, downloadTotalUnit] = parseTraffic(
+      connections.downloadTotal,
+    );

    return {
-      up, upUnit, down, downUnit, inuse, inuseUnit,
-      uploadTotal, uploadTotalUnit, downloadTotal, downloadTotalUnit,
-      connectionsCount: connections.count
+      up,
+      upUnit,
+      down,
+      downUnit,
+      inuse,
+      inuseUnit,
+      uploadTotal,
+      uploadTotalUnit,
+      downloadTotal,
+      downloadTotalUnit,
+      connectionsCount: connections.count,
    };
  }, [stats, connections]);

@@ -392,51 +447,54 @@ export const EnhancedTrafficStats = () => {
  }, [trafficGraph, pageVisible, theme.palette.divider, isDebug]);

  // 使用useMemo计算统计卡片配置
-  const statCards = useMemo(() => [
-    {
-      icon: <ArrowUpwardRounded fontSize="small" />,
-      title: t("Upload Speed"),
-      value: parsedData.up,
-      unit: `${parsedData.upUnit}/s`,
-      color: "secondary" as const,
-    },
-    {
-      icon: <ArrowDownwardRounded fontSize="small" />,
-      title: t("Download Speed"),
-      value: parsedData.down,
-      unit: `${parsedData.downUnit}/s`,
-      color: "primary" as const,
-    },
-    {
-      icon: <LinkRounded fontSize="small" />,
-      title: t("Active Connections"),
-      value: parsedData.connectionsCount,
-      unit: "",
-      color: "success" as const,
-    },
-    {
-      icon: <CloudUploadRounded fontSize="small" />,
-      title: t("Uploaded"),
-      value: parsedData.uploadTotal,
-      unit: parsedData.uploadTotalUnit,
-      color: "secondary" as const,
-    },
-    {
-      icon: <CloudDownloadRounded fontSize="small" />,
-      title: t("Downloaded"),
-      value: parsedData.downloadTotal,
-      unit: parsedData.downloadTotalUnit,
-      color: "primary" as const,
-    },
-    {
-      icon: <MemoryRounded fontSize="small" />,
-      title: t("Memory Usage"),
-      value: parsedData.inuse,
-      unit: parsedData.inuseUnit,
-      color: "error" as const,
-      onClick: isDebug ? handleGarbageCollection : undefined,
-    },
-  ], [t, parsedData, isDebug, handleGarbageCollection]);
+  const statCards = useMemo(
+    () => [
+      {
+        icon: <ArrowUpwardRounded fontSize="small" />,
+        title: t("Upload Speed"),
+        value: parsedData.up,
+        unit: `${parsedData.upUnit}/s`,
+        color: "secondary" as const,
+      },
+      {
+        icon: <ArrowDownwardRounded fontSize="small" />,
+        title: t("Download Speed"),
+        value: parsedData.down,
+        unit: `${parsedData.downUnit}/s`,
+        color: "primary" as const,
+      },
+      {
+        icon: <LinkRounded fontSize="small" />,
+        title: t("Active Connections"),
+        value: parsedData.connectionsCount,
+        unit: "",
+        color: "success" as const,
+      },
+      {
+        icon: <CloudUploadRounded fontSize="small" />,
+        title: t("Uploaded"),
+        value: parsedData.uploadTotal,
+        unit: parsedData.uploadTotalUnit,
+        color: "secondary" as const,
+      },
+      {
+        icon: <CloudDownloadRounded fontSize="small" />,
+        title: t("Downloaded"),
+        value: parsedData.downloadTotal,
+        unit: parsedData.downloadTotalUnit,
+        color: "primary" as const,
+      },
+      {
+        icon: <MemoryRounded fontSize="small" />,
+        title: t("Memory Usage"),
+        value: parsedData.inuse,
+        unit: parsedData.inuseUnit,
+        color: "error" as const,
+        onClick: isDebug ? handleGarbageCollection : undefined,
+      },
+    ],
+    [t, parsedData, isDebug, handleGarbageCollection],
+  );

  return (
    <Grid container spacing={1} columns={{ xs: 8, sm: 8, md: 12 }}>