fix: 修复并适配手机端显示

src/components/sections/StatsBar.tsx

@@ -10,6 +10,7 @@ import { Settings2 } from "lucide-react";
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { formatBytes } from "@/utils";
+import { useIsMobile } from "@/hooks/useMobile";
 
 interface StatsBarProps {
   displayOptions: {
@@ -40,8 +41,115 @@ export const StatsBar = ({
   loading,
   currentTime,
 }: StatsBarProps) => {
+  const isMobile = useIsMobile();
+
+  // 获取已启用的统计项列表
+  const enabledStats = Object.keys(displayOptions).filter(
+    (key) => displayOptions[key as keyof typeof displayOptions]
+  );
+
+  // 渲染统计项
+  const renderStatItem = (key: string) => {
+    switch (key) {
+      case "time":
+        return (
+          displayOptions.time && (
+            <div className="w-full py-1" key="time">
+              <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
+                <label className="text-secondary-foreground text-sm">
+                  当前时间
+                </label>
+                <label className="font-medium -mt-2 text-md">
+                  {currentTime.toLocaleTimeString()}
+                </label>
+              </div>
+            </div>
+          )
+        );
+      case "online":
+        return (
+          displayOptions.online && (
+            <div className="w-full py-1" key="online">
+              <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
+                <label className="text-secondary-foreground text-sm">
+                  当前在线
+                </label>
+                <label className="font-medium -mt-2 text-md">
+                  {loading
+                    ? "..."
+                    : `${stats.onlineCount} / ${stats.totalCount}`}
+                </label>
+              </div>
+            </div>
+          )
+        );
+      case "regions":
+        return (
+          displayOptions.regions && (
+            <div className="w-full py-1" key="regions">
+              <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
+                <label className="text-secondary-foreground text-sm">
+                  点亮地区
+                </label>
+                <label className="font-medium -mt-2 text-md">
+                  {loading ? "..." : stats.uniqueRegions}
+                </label>
+              </div>
+            </div>
+          )
+        );
+      case "traffic":
+        return (
+          displayOptions.traffic && (
+            <div className="w-full py-1" key="traffic">
+              <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
+                <label className="text-secondary-foreground text-sm">
+                  流量概览
+                </label>
+                <div className="font-medium -mt-2 text-md">
+                  {loading ? (
+                    "..."
+                  ) : (
+                    <div className="flex flex-col items-center">
+                      <span>{`↑ ${formatBytes(stats.totalTrafficUp)}`}</span>
+                      <span>{`↓ ${formatBytes(stats.totalTrafficDown)}`}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        );
+      case "speed":
+        return (
+          displayOptions.speed && (
+            <div className="w-full py-1" key="speed">
+              <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
+                <label className="text-secondary-foreground text-sm">
+                  网络速率
+                </label>
+                <div className="font-medium -mt-2 text-md">
+                  {loading ? (
+                    "..."
+                  ) : (
+                    <div className="flex flex-col items-center">
+                      <span>{`↑ ${formatBytes(stats.currentSpeedUp)}/s`}</span>
+                      <span>{`↓ ${formatBytes(
+                        stats.currentSpeedDown
+                      )}/s`}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        );
+      default:
+        return null;
+    }
+  };
   return (
-    <div className="bg-card backdrop-blur-[10px] min-w-[300px] rounded-lg box-border border text-secondary-foreground m-4 px-4 md:text-base text-sm relative flex items-center min-h-[5rem]">
+    <div className="bg-card backdrop-blur-[10px] min-w-[300px] rounded-lg box-border border text-secondary-foreground my-6 mx-4 px-4 md:text-base text-sm relative flex items-center min-h-[5rem]">
       <div className="absolute top-2 right-2">
         <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
@@ -101,85 +209,14 @@ export const StatsBar = ({
         </DropdownMenu>
       </div>
       <div
-        className="grid w-full gap-2 text-center items-center"
+        className="grid w-full gap-2 text-center items-center py-3"
         style={{
-          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gridTemplateColumns: isMobile
+            ? "repeat(2, 1fr)"
+            : "repeat(auto-fit, minmax(180px, 1fr))",
           gridAutoRows: "min-content",
         }}>
-        {displayOptions.time && (
-          <div className="w-full">
-            <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
-              <label className="text-secondary-foreground text-sm">
-                当前时间
-              </label>
-              <label className="font-medium -mt-2 text-md">
-                {currentTime.toLocaleTimeString()}
-              </label>
-            </div>
-          </div>
-        )}
-        {displayOptions.online && (
-          <div className="w-full">
-            <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
-              <label className="text-secondary-foreground text-sm">
-                当前在线
-              </label>
-              <label className="font-medium -mt-2 text-md">
-                {loading ? "..." : `${stats.onlineCount} / ${stats.totalCount}`}
-              </label>
-            </div>
-          </div>
-        )}
-        {displayOptions.regions && (
-          <div className="w-full">
-            <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
-              <label className="text-secondary-foreground text-sm">
-                点亮地区
-              </label>
-              <label className="font-medium -mt-2 text-md">
-                {loading ? "..." : stats.uniqueRegions}
-              </label>
-            </div>
-          </div>
-        )}
-        {displayOptions.traffic && (
-          <div className="w-full">
-            <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
-              <label className="text-secondary-foreground text-sm">
-                流量概览
-              </label>
-              <div className="font-medium -mt-2 text-md">
-                {loading ? (
-                  "..."
-                ) : (
-                  <div className="flex flex-col items-center">
-                    <span>{`↑ ${formatBytes(stats.totalTrafficUp)}`}</span>
-                    <span>{`↓ ${formatBytes(stats.totalTrafficDown)}`}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-        {displayOptions.speed && (
-          <div className="w-full">
-            <div className="rt-Flex rt-r-fd-column rt-r-gap-2">
-              <label className="text-secondary-foreground text-sm">
-                网络速率
-              </label>
-              <div className="font-medium -mt-2 text-md">
-                {loading ? (
-                  "..."
-                ) : (
-                  <div className="flex flex-col items-center">
-                    <span>{`↑ ${formatBytes(stats.currentSpeedUp)}/s`}</span>
-                    <span>{`↓ ${formatBytes(stats.currentSpeedDown)}/s`}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
+        {enabledStats.map((key) => renderStatItem(key))}
       </div>
     </div>
   );