feat: 添加磨砂玻璃效果自定义配置及相关样式支持

src/components/sections/Footer.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 const Footer: React.FC = () => {
   return (
-    <footer className="fixed shadow-inner bottom-0 left-0 right-0 p-2 text-center bg-white/10 dark:bg-gray-800/10 backdrop-blur-md border-t border-white/20 dark:border-white/10 z-50">
-      <p className="flex justify-center text-sm text-gray-700 dark:text-gray-200 text-shadow-lg whitespace-pre">
+    <footer className="fixed inset-shadow-sm bottom-0 left-0 right-0 p-2 text-center purcarte-blur z-50">
+      <p className="flex justify-center text-sm text-second-foreground text-shadow-lg whitespace-pre">
         Powered by{" "}
         <a
           href="https://github.com/komari-monitor/komari"

src/components/sections/Header.tsx

@@ -55,7 +55,7 @@ export const Header = ({
   }, [sitename]);
 
   return (
-    <header className="bg-background/60 backdrop-blur-[10px] border-b border-border/60 sticky top-0 flex items-center justify-center shadow-sm z-10">
+    <header className="purcarte-blur border-b border-border sticky top-0 flex items-center justify-center shadow-sm z-10">
       <div className="w-[90%] max-w-screen-2xl px-4 py-2 flex items-center justify-between">
         <div className="flex items-center text-shadow-lg text-accent-foreground">
           <a href="/" className="flex items-center gap-2 text-2xl font-bold">
@@ -71,7 +71,7 @@ export const Header = ({
               {isMobile ? (
                 <>
                   <div
-                    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 ${
+                    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"
@@ -106,7 +106,7 @@ export const Header = ({
                     </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">
+                      className="animate-in slide-in-from-top-5 duration-300 purcarte-blur border-border rounded-xl">
                       <DropdownMenuItem
                         onClick={() =>
                           setViewMode(viewMode === "grid" ? "table" : "grid")
@@ -216,7 +216,7 @@ export const Header = ({
                   </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">
+                    className="animate-in slide-in-from-top-5 duration-300 purcarte-blur border-border rounded-xl">
                     <DropdownMenuItem onClick={toggleTheme}>
                       {theme === "dark" ? (
                         <Sun className="size-4 mr-2 text-primary" />

src/components/sections/NodeCard.tsx

@@ -16,9 +16,10 @@ import { CircleProgress } from "../ui/circle-progress";
 
 interface NodeCardProps {
   node: NodeWithStatus;
+  enableSwap: boolean | undefined;
 }
 
-export const NodeCard = ({ node }: NodeCardProps) => {
+export const NodeCard = ({ node, enableSwap }: NodeCardProps) => {
   const {
     stats,
     isOnline,
@@ -40,7 +41,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
 
   return (
     <Card
-      className={`flex flex-col mx-auto bg-card backdrop-blur-xs w-full min-w-[280px] max-w-sm ${
+      className={`flex flex-col mx-auto purcarte-blur w-full min-w-[280px] max-w-sm ${
         isOnline
           ? ""
           : "striped-bg-red-translucent-diagonal ring-2 ring-red-500/50"
@@ -104,7 +105,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
             <span className="w-12 text-right">{memUsage.toFixed(0)}%</span>
           </div>
         </div>
-        {node.swap_total > 0 ? (
+        {enableSwap && (
           <div className="flex items-center justify-between">
             <span className="text-secondary-foreground">SWAP</span>
             <div className="w-3/4 flex items-center gap-2">
@@ -112,15 +113,11 @@ export const NodeCard = ({ node }: NodeCardProps) => {
                 value={swapUsage}
                 className={getProgressBarClass(swapUsage)}
               />
-              <span className="w-12 text-right">{swapUsage.toFixed(0)}%</span>
-            </div>
-          </div>
-        ) : (
-          <div className="flex items-center justify-between">
-            <span className="text-secondary-foreground">SWAP</span>
-            <div className="w-3/4 flex items-center gap-2">
-              <ProgressBar value={0} />
-              <span className="w-12 text-right">OFF</span>
+              {node.swap_total > 0 ? (
+                <span className="w-12 text-right">{swapUsage.toFixed(0)}%</span>
+              ) : (
+                <span className="w-12 text-right">OFF</span>
+              )}
             </div>
           </div>
         )}
@@ -188,7 +185,7 @@ export const NodeCard = ({ node }: NodeCardProps) => {
             <div className="flex items-center gap-1">{expired_at}</div>
           </div>
           <div className="border-l border-border/60 mx-2"></div>
-          <div className="flex justify-start w-full">
+          <div className="flex justify-end w-full">
             <span className="text-secondary-foreground">在线：</span>
             <span>
               {isOnline && stats ? formatUptime(stats.uptime) : "离线"}

src/components/sections/NodeListHeader.tsx

@@ -1,10 +1,16 @@
-export const NodeListHeader = () => {
+interface NodeListHeaderProps {
+  enableSwap: boolean | undefined;
+}
+
+export const NodeListHeader = ({ enableSwap }: NodeListHeaderProps) => {
+  const gridCols = enableSwap ? "grid-cols-10" : "grid-cols-9";
   return (
-    <div className="text-primary font-bold grid grid-cols-10 text-center shadow-md gap-4 p-2 items-center rounded-lg bg-card/50 transition-colors duration-200">
+    <div
+      className={`text-primary font-bold grid ${gridCols} text-center shadow-md gap-4 p-2 items-center rounded-lg bg-card transition-colors duration-200`}>
       <div className="col-span-2">节点名称</div>
       <div className="col-span-1">CPU</div>
       <div className="col-span-1">内存</div>
-      <div className="col-span-1">SWAP</div>
+      {enableSwap && <div className="col-span-1">SWAP</div>}
       <div className="col-span-1">硬盘</div>
       <div className="col-span-1">网络</div>
       <div className="col-span-2">流量</div>

src/components/sections/NodeListItem.tsx

@@ -9,9 +9,10 @@ import { CircleProgress } from "../ui/circle-progress";
 
 interface NodeListItemProps {
   node: NodeWithStatus;
+  enableSwap: boolean | undefined;
 }
 
-export const NodeListItem = ({ node }: NodeListItemProps) => {
+export const NodeListItem = ({ node, enableSwap }: NodeListItemProps) => {
   const {
     stats,
     isOnline,
@@ -25,9 +26,11 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
     trafficPercentage,
   } = useNodeCommons(node);
 
+  const gridCols = enableSwap ? "grid-cols-10" : "grid-cols-9";
+
   return (
     <div
-      className={`grid grid-cols-10 text-center shadow-md gap-4 p-2 text-nowrap items-center rounded-lg ${
+      className={`grid ${gridCols} text-center shadow-md gap-4 p-2 text-nowrap items-center rounded-lg ${
         isOnline
           ? ""
           : "striped-bg-red-translucent-diagonal ring-2 ring-red-500/50"
@@ -39,53 +42,56 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
             <div className="text-base font-bold">{node.name}</div>
             <Tag className="text-xs" tags={tagList} />
             <div className="flex text-xs">
-              <div className="flex">
-                <span className="text-secondary-foreground">到期：</span>
-                <div className="flex items-center gap-1">{expired_at}</div>
-              </div>
-              <div className="border-l border-border/60 mx-2"></div>
-              <div className="flex">
-                <span className="text-secondary-foreground">在线：</span>
-                <span>
-                  {isOnline && stats ? formatUptime(stats.uptime) : "离线"}
-                </span>
-              </div>
+              <span className="text-secondary-foreground">到期：</span>
+              <div className="flex items-center gap-1">{expired_at}</div>
+            </div>
+            <div className="flex text-xs">
+              <span className="text-secondary-foreground">在线：</span>
+              <span>
+                {isOnline && stats ? formatUptime(stats.uptime) : "离线"}
+              </span>
             </div>
           </div>
         </Link>
       </div>
-      <div className="col-span-1">
-        <div className="gap-1 flex items-center justify-center whitespace-nowrap">
-          <CpuIcon className="inline-block size-4 flex-shrink-0 text-blue-600" />
-          {node.cpu_cores} Cores
-        </div>
-        <div className="mt-1">
-          {isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}
+      <div className="col-span-1 flex items-center text-left">
+        <CpuIcon className="inline-block size-5 flex-shrink-0 text-blue-600" />
+        <div className="ml-1 w-full items-center justify-center">
+          <div>{node.cpu_cores} Cores</div>
+          <div>{isOnline ? `${cpuUsage.toFixed(1)}%` : "N/A"}</div>
         </div>
       </div>
-      <div className="col-span-1">
-        <div className="gap-1 flex items-center justify-center whitespace-nowrap">
-          <MemoryStickIcon className="inline-block size-4 flex-shrink-0 text-green-600" />
-          {formatBytes(node.mem_total)}
-        </div>
-        <div className="mt-1">
-          {isOnline ? `${memUsage.toFixed(1)}%` : "N/A"}
+      <div className="col-span-1 flex items-center text-left">
+        <MemoryStickIcon className="inline-block size-5 flex-shrink-0 text-green-600" />
+        <div className="ml-1 w-full items-center justify-center">
+          <div>{formatBytes(node.mem_total)}</div>
+          <div className="mt-1">
+            {isOnline ? `${memUsage.toFixed(1)}%` : "N/A"}
+          </div>
         </div>
       </div>
-      {node.swap_total > 0 ? (
-        <div className="col-span-1">
-          {isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"}
+      {enableSwap && (
+        <div className="col-span-1 flex items-center text-left">
+          <MemoryStickIcon className="inline-block size-5 flex-shrink-0 text-purple-600" />
+          {node.swap_total > 0 ? (
+            <div className="ml-1 w-full items-center justify-center">
+              <div>{formatBytes(node.swap_total)}</div>
+              <div className="mt-1">
+                {isOnline ? `${swapUsage.toFixed(1)}%` : "N/A"}
+              </div>
+            </div>
+          ) : (
+            <div className="ml-1 w-full item-center justify-center">OFF</div>
+          )}
         </div>
-      ) : (
-        <div className="col-span-1 text-secondary-foreground">OFF</div>
       )}
-      <div className="col-span-1">
-        <div className="gap-1 flex items-center justify-center whitespace-nowrap">
-          <HardDriveIcon className="inline-block size-4 flex-shrink-0 text-red-600" />
-          {formatBytes(node.disk_total)}
-        </div>
-        <div className="mt-1">
-          {isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"}
+      <div className="col-span-1 flex items-center text-left">
+        <HardDriveIcon className="inline-block size-5 flex-shrink-0 text-red-600" />
+        <div className="ml-1 w-full items-center justify-center">
+          <div>{formatBytes(node.disk_total)}</div>
+          <div className="mt-1">
+            {isOnline ? `${diskUsage.toFixed(1)}%` : "N/A"}
+          </div>
         </div>
       </div>
       <div className="col-span-1">
@@ -95,7 +101,7 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
       <div className="col-span-2">
         <div className="flex items-center justify-around">
           {node.traffic_limit !== 0 && isOnline && stats && (
-            <div className="flex items-center justify-center w-1/4">
+            <div className="flex items-center justify-center w-1/3">
               <CircleProgress
                 value={trafficPercentage}
                 maxValue={100}
@@ -106,14 +112,12 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
             </div>
           )}
           <div
-            className={node.traffic_limit !== 0 ? "w-3/4 text-left" : "w-full"}>
+            className={node.traffic_limit !== 0 ? "w-2/3 text-left" : "w-full"}>
             <div>
-              <span>
-                ↑ {stats ? formatBytes(stats.network.totalUp) : "N/A"}
-              </span>
-              <span className="ml-2">
+              <div>↑ {stats ? formatBytes(stats.network.totalUp) : "N/A"}</div>
+              <div>
                 ↓ {stats ? formatBytes(stats.network.totalDown) : "N/A"}
-              </span>
+              </div>
             </div>
             {node.traffic_limit !== 0 && isOnline && stats && (
               <div>
@@ -127,7 +131,9 @@ export const NodeListItem = ({ node }: NodeListItemProps) => {
         </div>
       </div>
       <div className="col-span-1">
-        <span>{load}</span>
+        {load.split("|").map((item, index) => (
+          <div key={index}>{item.trim()}</div>
+        ))}
       </div>
     </div>
   );

src/components/sections/StatsBar.tsx

@@ -149,7 +149,7 @@ export const StatsBar = ({
     }
   };
   return (
-    <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="purcarte-blur min-w-[300px] rounded-lg text-secondary-foreground my-6 mx-4 px-4 box-border border border-border text-sm relative flex items-center min-h-[5rem]">
       <div className="absolute top-2 right-2">
         <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>

src/components/ui/button.tsx

@@ -10,15 +10,15 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary/60 text-primary-foreground shadow-xs hover:bg-primary/80",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive/60 text-white shadow-xs hover:bg-destructive/80 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background/60 shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary/60 text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card backdrop-blur-xs text-card-foreground shadow",
+      "rounded-xl purcarte-blur text-card-foreground shadow-sm box-border border border-border",
       className
     )}
     {...props}

src/components/ui/dropdown-menu.tsx

@@ -43,7 +43,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md 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 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}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md 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 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}

src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--accent-track) data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

src/components/ui/tips.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Info } from "lucide-react";
+import { Popover, Dialog } from "@radix-ui/themes";
+import { useIsMobile } from "@/hooks/useMobile";
+
+interface TipsProps {
+  size?: string;
+  color?: string;
+  children?: React.ReactNode;
+  trigger?: React.ReactNode;
+  mode?: "popup" | "dialog" | "auto";
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
+  size = "16",
+  color = "gray",
+  trigger,
+  children,
+  side = "bottom",
+  mode = "popup",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useIsMobile();
+
+  // determine whether to render a Dialog instead of a Popover
+  const isDialog = mode === "dialog" || (mode === "auto" && isMobile);
+
+  const handleInteraction = () => {
+    // toggle when using Dialog (click) or on mobile (click)
+    if (isDialog || isMobile) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <div className="relative inline-block" {...props}>
+      {isDialog ? (
+        <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+          <Dialog.Trigger>
+            <div
+              className={`flex items-center justify-center rounded-full font-bold cursor-pointer `}
+              onClick={handleInteraction}>
+              {trigger ?? <Info color={color} size={size} />}
+            </div>
+          </Dialog.Trigger>
+          <Dialog.Content>
+            <div className="flex flex-col gap-2">
+              {/* <label className="text-xl font-bold">Tips</label> */}
+              <div>{children}</div>
+            </div>
+          </Dialog.Content>
+        </Dialog.Root>
+      ) : (
+        <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+          <Popover.Trigger>
+            <div
+              className={`flex items-center justify-center rounded-full font-bold cursor-pointer `}
+              onClick={isMobile ? handleInteraction : undefined}
+              onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
+              onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}>
+              {trigger ?? <Info color={color} size={size} />}
+            </div>
+          </Popover.Trigger>
+          <Popover.Content
+            side={side}
+            sideOffset={5}
+            onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
+            onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}
+            className="purcarte-blur border border-border shadow-md rounded-md z-50 text-muted-foreground"
+            style={{
+              minWidth: isMobile ? "12rem" : "16rem",
+              maxWidth: isMobile ? "80vw" : "16rem",
+              backgroundColor: "var(--card)",
+            }}>
+            <div className="relative text-sm">{children}</div>
+          </Popover.Content>
+        </Popover.Root>
+      )}
+    </div>
+  );
+};
+
+export default Tips;

src/components/ui/tooltip.tsx

@@ -28,7 +28,7 @@ export const CustomTooltip = ({
 
   if (active && payload && payload.length) {
     return (
-      <div className="bg-background/80 p-3 border rounded-lg shadow-lg max-w-xs">
+      <div className="bg-background/80 p-3 border border-border rounded-lg shadow-lg max-w-xs">
         <p className="text-xs font-medium text-muted-foreground mb-2">
           {labelFormatter
             ? labelFormatter(label)