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

komari-theme.json

@@ -2,7 +2,7 @@
     "name": "Komari Theme PurCart",
     "short": "PurCarte",
     "description": "A frosted glass theme for Komari",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "author": "Montia & Gemini",
     "url": "https://github.com/Montia37/Komari-theme-purcarte",
     "preview": "preview.png",
@@ -62,7 +62,7 @@
             },
             {
                 "key": "enableSearchButton",
-                "name": "启用标题栏按钮",
+                "name": "启用搜索按钮",
                 "type": "switch",
                 "default": true,
                 "help": "启用后默认在标题栏右侧显示搜索按钮"

src/components/sections/Header.tsx

@@ -7,11 +7,18 @@ import {
   Moon,
   Sun,
   CircleUserIcon,
+  Menu,
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useIsMobile } from "@/hooks/useMobile";
 import { useConfigItem } from "@/config";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface HeaderProps {
   viewMode: "grid" | "table";
@@ -55,9 +62,7 @@ export const Header = ({
             {enableLogo && logoUrl && (
               <img src={logoUrl} alt="logo" className="h-8" />
             )}
-            {enableTitle && (
+            {enableTitle && <span>{sitename}</span>}
-              <span className="hidden md:inline">{sitename}</span>
-            )}
           </a>
         </div>
         <div className="flex items-center space-x-2">
@@ -65,73 +70,154 @@ export const Header = ({
             <>
               {isMobile ? (
                 <>
-                  {isSearchOpen && (
+                  <div
-                    <div className="absolute top-full left-0 w-full bg-background/80 backdrop-blur-md p-2 border-b border-border/60 shadow-sm z-10 transition-all duration-300 ease-in-out">
+                    className={`absolute top-full left-0 w-full bg-background/60 backdrop-blur-[10px] p-2 border-b border-border/60 shadow-sm z-10 transform transition-all duration-300 ease-in-out ${
-                      <Input
+                      isSearchOpen
-                        type="search"
+                        ? "opacity-100 translate-y-0"
-                        placeholder="搜索服务器..."
+                        : "opacity-0 -translate-y-4 pointer-events-none"
-                        className="w-full"
+                    }`}>
-                        value={searchTerm}
+                    <Input
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      type="search"
-                          setSearchTerm(e.target.value)
+                      placeholder="搜索服务器..."
-                        }
+                      className="w-full"
-                      />
+                      value={searchTerm}
-                    </div>
+                      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>
+                    <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>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      className="animate-in slide-in-from-top-5 duration-300 bg-background/60 backdrop-blur-[10px] border-border/60 rounded-xl">
+                      <DropdownMenuItem
+                        onClick={() =>
+                          setViewMode(viewMode === "grid" ? "table" : "grid")
+                        }>
+                        {viewMode === "grid" ? (
+                          <Table2 className="size-4 mr-2 text-primary" />
+                        ) : (
+                          <Grid3X3 className="size-4 mr-2 text-primary" />
+                        )}
+                        <span>
+                          {viewMode === "grid" ? "表格视图" : "网格视图"}
+                        </span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={toggleTheme}>
+                        {theme === "dark" ? (
+                          <Sun className="size-4 mr-2 text-primary" />
+                        ) : (
+                          <Moon className="size-4 mr-2 text-primary" />
+                        )}
+                        <span>
+                          {theme === "dark" ? "浅色模式" : "深色模式"}
+                        </span>
+                      </DropdownMenuItem>
+                      {enableAdminButton && (
+                        <DropdownMenuItem asChild>
+                          <a
+                            href="/admin"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center">
+                            <CircleUserIcon className="size-4 mr-2 text-primary" />
+                            <span>管理员</span>
+                          </a>
+                        </DropdownMenuItem>
+                      )}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </>
               ) : (
-                <div
+                <>
-                  className={`flex items-center transition-all duration-300 ease-in-out overflow-hidden ${
+                  <div
-                    isSearchOpen ? "w-48" : "w-0"
+                    className={`flex items-center transition-all duration-300 ease-in-out overflow-hidden transform ${
-                  }`}>
+                      isSearchOpen ? "w-48 opacity-100" : "w-0 opacity-0"
-                  <Input
+                    }`}>
-                    type="search"
+                    <Input
-                    placeholder="搜索服务器..."
+                      type="search"
-                    className={`transition-all duration-300 ease-in-out ${
+                      placeholder="搜索服务器..."
-                      isSearchOpen ? "opacity-100" : "opacity-0"
+                      className={`transition-all duration-300 ease-in-out ${
-                    } ${!isSearchOpen && "invisible"}`}
+                        !isSearchOpen && "invisible"
-                    value={searchTerm}
+                      }`}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      value={searchTerm}
-                      setSearchTerm(e.target.value)
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    }
+                        setSearchTerm(e.target.value)
-                  />
+                      }
-                </div>
+                    />
+                  </div>
+                  {enableSearchButton && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => setIsSearchOpen(!isSearchOpen)}>
+                      <Search className="size-5 text-primary" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() =>
+                      setViewMode(viewMode === "grid" ? "table" : "grid")
+                    }>
+                    {viewMode === "grid" ? (
+                      <Table2 className="size-5 text-primary" />
+                    ) : (
+                      <Grid3X3 className="size-5 text-primary" />
+                    )}
+                  </Button>
+                  <Button variant="ghost" size="icon" onClick={toggleTheme}>
+                    {theme === "dark" ? (
+                      <Sun className="size-5 text-primary" />
+                    ) : (
+                      <Moon className="size-5 text-primary" />
+                    )}
+                  </Button>
+                  {enableAdminButton && (
+                    <a href="/admin" target="_blank" rel="noopener noreferrer">
+                      <Button variant="ghost" size="icon">
+                        <CircleUserIcon className="size-5 text-primary" />
+                      </Button>
+                    </a>
+                  )}
+                </>
               )}
-              {enableSearchButton && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setIsSearchOpen(!isSearchOpen)}>
-                  <Search className="size-5 text-primary" />
-                </Button>
-              )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() =>
-                  setViewMode(viewMode === "grid" ? "table" : "grid")
-                }>
-                {viewMode === "grid" ? (
-                  <Table2 className="size-5 text-primary" />
-                ) : (
-                  <Grid3X3 className="size-5 text-primary" />
-                )}
-              </Button>
             </>
           )}
-          <Button variant="ghost" size="icon" onClick={toggleTheme}>
+          {isInstancePage && (
-            {theme === "dark" ? (
+            <>
-              <Sun className="size-5 text-primary" />
+              <Button variant="ghost" size="icon" onClick={toggleTheme}>
-            ) : (
+                {theme === "dark" ? (
-              <Moon className="size-5 text-primary" />
+                  <Sun className="size-5 text-primary" />
-            )}
+                ) : (
-          </Button>
+                  <Moon className="size-5 text-primary" />
-          {enableAdminButton && (
+                )}
-            <a href="/admin" target="_blank" rel="noopener noreferrer">
-              <Button variant="ghost" size="icon">
-                <CircleUserIcon className="size-5 text-primary" />
               </Button>
-            </a>
+              {enableAdminButton && (
+                <a href="/admin" target="_blank" rel="noopener noreferrer">
+                  <Button variant="ghost" size="icon">
+                    <CircleUserIcon className="size-5 text-primary" />
+                  </Button>
+                </a>
+              )}
+            </>
           )}
         </div>
       </div>

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 && (
+        {enabledStats.map((key) => renderStatItem(key))}
-          <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>
-        )}
       </div>
     </div>
   );