From b10f40195a07f394fc6574c37852931d18be0af3 Mon Sep 17 00:00:00 2001
From: Montia37 <MTChaoyi@outlook.com>
Date: Fri, 5 Sep 2025 17:37:39 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=B0=83=E6=95=B4=E8=B4=9F=E8=BD=BD?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E6=97=B6=E9=97=B4=E8=B7=A8=E5=BA=A6=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=BA=E5=BB=B6=E8=BF=9F=E5=9B=BE=E8=A1=A8=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E6=98=BE=E7=A4=BA=E5=85=A8=E9=83=A8=E7=9A=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useLoadCharts.ts       |  2 +-
 src/pages/instance/PingChart.tsx | 33 ++++++++++++++++++++++++++++++--
 src/pages/instance/index.tsx     |  2 +-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useLoadCharts.ts b/src/hooks/useLoadCharts.ts
index be30529..55c9da5 100644
--- a/src/hooks/useLoadCharts.ts
+++ b/src/hooks/useLoadCharts.ts
@@ -118,7 +118,7 @@ export const useLoadCharts = (node: NodeData | null, hours: number) => {
     }));
 
     let filledData;
-    if (hours === 1) {
+    if (hours <= 4) {
       filledData = fillMissingTimePoints(
         stringifiedData,
         minute,
diff --git a/src/pages/instance/PingChart.tsx b/src/pages/instance/PingChart.tsx
index 7ca7d8f..6b3a3be 100644
--- a/src/pages/instance/PingChart.tsx
+++ b/src/pages/instance/PingChart.tsx
@@ -1,4 +1,7 @@
 import { memo, useState, useMemo, useCallback, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/useMobile";
+import { Eye, EyeOff } from "lucide-react";
 import {
   LineChart,
   Line,
@@ -35,6 +38,7 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
     useConfigItem("enableConnectBreaks")
   );
   const maxPointsToRender = useConfigItem("pingChartMaxPoints") || 0; // 0表示不限制
+  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (pingHistory?.tasks) {
@@ -143,6 +147,15 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
     );
   };
 
+  const handleToggleAll = () => {
+    if (!pingHistory?.tasks) return;
+    if (visiblePingTasks.length === pingHistory.tasks.length) {
+      setVisiblePingTasks([]);
+    } else {
+      setVisiblePingTasks(pingHistory.tasks.map((t) => t.id));
+    }
+  };
+
   const sortedTasks = useMemo(() => {
     if (!pingHistory?.tasks) return [];
     return [...pingHistory.tasks].sort((a, b) => a.name.localeCompare(b.name));
@@ -259,8 +272,8 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
 
       <Card>
         <CardHeader>
-          <div className="flex justify-between items-start">
-            <div className="flex items-center gap-4">
+          <div className="flex justify-between items-center flex-wrap">
+            <div className="flex gap-4 flex-wrap">
               <div className="flex items-center space-x-2">
                 <Switch
                   id="peak-shaving"
@@ -294,6 +307,22 @@ const PingChart = memo(({ node, hours }: PingChartProps) => {
                 </Tips>
               </div>
             </div>
+            <div className={isMobile ? "w-full mt-2" : ""}>
+              <Button variant="secondary" onClick={handleToggleAll} size="sm">
+                {pingHistory?.tasks &&
+                visiblePingTasks.length === pingHistory.tasks.length ? (
+                  <>
+                    <EyeOff size={16} />
+                    隐藏全部
+                  </>
+                ) : (
+                  <>
+                    <Eye size={16} />
+                    显示全部
+                  </>
+                )}
+              </Button>
+            </div>
           </div>
         </CardHeader>
         <CardContent className="pt-0">
diff --git a/src/pages/instance/index.tsx b/src/pages/instance/index.tsx
index b59d124..214a5a6 100644
--- a/src/pages/instance/index.tsx
+++ b/src/pages/instance/index.tsx
@@ -39,7 +39,7 @@ const InstancePage = () => {
     return [
       { label: "实时", hours: 0 },
       { label: "1小时", hours: 1 },
-      { label: "6小时", hours: 6 },
+      { label: "4小时", hours: 4 },
       { label: "1天", hours: 24 },
       { label: "7天", hours: 168 },
       { label: "30天", hours: 720 },