From 657c02a49f4421f44637b9851ec977a42bb82476 Mon Sep 17 00:00:00 2001
From: Montia37 <MTChaoyi@outlook.com>
Date: Sun, 7 Sep 2025 15:54:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D4=E5=B0=8F=E6=97=B6?=
 =?UTF-8?q?=E8=B4=9F=E8=BD=BD=E5=9B=BE=E8=A1=A8=E6=95=B0=E6=8D=AE=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E5=92=8C=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/Header.tsx  | 60 +++++++++++++++++------------
 src/components/ui/dropdown-menu.css | 29 ++++++++++++++
 src/components/ui/dropdown-menu.tsx | 24 +++++++-----
 src/hooks/useLoadCharts.ts          |  9 ++++-
 4 files changed, 86 insertions(+), 36 deletions(-)
 create mode 100644 src/components/ui/dropdown-menu.css

diff --git a/src/components/sections/Header.tsx b/src/components/sections/Header.tsx
index d1b1b1c..a6b8365 100644
--- a/src/components/sections/Header.tsx
+++ b/src/components/sections/Header.tsx
@@ -70,43 +70,49 @@ export const Header = ({
             <>
               {isMobile ? (
                 <>
-                  <div
-                    className={`absolute top-full left-0 w-full purcarte-blur p-2 border-b border-border shadow-sm z-10 transform transition-all duration-300 ease-in-out ${
-                      isSearchOpen
-                        ? "opacity-100 translate-y-0"
-                        : "opacity-0 -translate-y-4 pointer-events-none"
-                    }`}>
-                    <Input
-                      type="search"
-                      placeholder="搜索服务器..."
-                      className="w-full"
-                      value={searchTerm}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        setSearchTerm(e.target.value)
-                      }
-                    />
-                  </div>
                   {enableSearchButton && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => setIsSearchOpen(!isSearchOpen)}>
-                      <Search className="size-5 text-primary" />
-                    </Button>
+                    <DropdownMenu modal={false}>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="relative group">
+                          <Search className="size-5 text-primary" />
+                          {searchTerm && (
+                            <span className="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-primary transform -translate-x-1/2"></span>
+                          )}
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        align="end"
+                        className="purcarte-blur border-border rounded-xl w-48">
+                        <div className="p-2">
+                          <Input
+                            type="search"
+                            placeholder="搜索服务器..."
+                            className="w-full"
+                            value={searchTerm}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>
+                            ) => setSearchTerm(e.target.value)}
+                          />
+                        </div>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
                   )}
-                  <DropdownMenu>
+                  <DropdownMenu modal={false}>
                     <DropdownMenuTrigger asChild>
                       <Button
                         variant="ghost"
                         size="icon"
                         className="relative group">
                         <Menu className="size-5 text-primary transition-transform duration-300 group-data-[state=open]:rotate-180" />
-                        <span className="absolute -bottom-1 left-1/2 w-1.5 h-1.5 rounded-full bg-primary transform -translate-x-1/2 scale-0 transition-transform duration-300 group-data-[state=open]:scale-100"></span>
+                        <span className="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-primary transform -translate-x-1/2 scale-0 transition-transform duration-300 group-data-[state=open]:scale-100"></span>
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
                       align="end"
-                      className="animate-in slide-in-from-top-5 duration-300 purcarte-blur border-border rounded-xl">
+                      className="purcarte-blur border-border rounded-xl">
                       <DropdownMenuItem
                         onClick={() =>
                           setViewMode(viewMode === "grid" ? "table" : "grid")
@@ -167,8 +173,12 @@ export const Header = ({
                     <Button
                       variant="ghost"
                       size="icon"
+                      className="relative group"
                       onClick={() => setIsSearchOpen(!isSearchOpen)}>
                       <Search className="size-5 text-primary" />
+                      {searchTerm && (
+                        <span className="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-primary transform -translate-x-1/2"></span>
+                      )}
                     </Button>
                   )}
                   <Button
diff --git a/src/components/ui/dropdown-menu.css b/src/components/ui/dropdown-menu.css
new file mode 100644
index 0000000..e5500e0
--- /dev/null
+++ b/src/components/ui/dropdown-menu.css
@@ -0,0 +1,29 @@
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}
+
+[role="menu"][data-state="open"] {
+  animation: slideDownAndFade 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+[role="menu"][data-state="closed"] {
+  animation: slideUpAndFade 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index a3f23b6..551eaff 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,5 +1,7 @@
 import * as React from "react";
+import "./dropdown-menu.css";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Theme } from "@radix-ui/themes";
 import { DotFilledIcon } from "@radix-ui/react-icons";
 
 import { cn } from "@/utils";
@@ -43,7 +45,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
       className
     )}
     {...props}
@@ -57,15 +59,17 @@ const DropdownMenuContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
+    <Theme>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </Theme>
   </DropdownMenuPrimitive.Portal>
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
diff --git a/src/hooks/useLoadCharts.ts b/src/hooks/useLoadCharts.ts
index 55c9da5..f0a79f3 100644
--- a/src/hooks/useLoadCharts.ts
+++ b/src/hooks/useLoadCharts.ts
@@ -118,13 +118,20 @@ export const useLoadCharts = (node: NodeData | null, hours: number) => {
     }));
 
     let filledData;
-    if (hours <= 4) {
+    if (hours === 1) {
       filledData = fillMissingTimePoints(
         stringifiedData,
         minute,
         hour,
         minute * 2
       );
+    } else if (hours === 4) {
+      filledData = fillMissingTimePoints(
+        stringifiedData,
+        minute,
+        hour * 4,
+        minute * 2
+      );
     } else {
       const interval = hours > 120 ? hour : minute * 15;
       const maxGap = interval * 2;