From 48dbf85bcab3f6552509425da38e224fea61ed30 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sat, 1 Feb 2025 19:39:23 +0800
Subject: [PATCH] refactor: improve CycleTransferStats and ServiceTracker UI
 components

---
 src/components/CycleTransferStats.tsx       |  2 +-
 src/components/CycleTransferStatsClient.tsx | 71 ++++++++++-----------
 src/components/ServiceTracker.tsx           |  2 +-
 src/components/ServiceTrackerClient.tsx     | 33 ++++------
 4 files changed, 47 insertions(+), 61 deletions(-)

diff --git a/src/components/CycleTransferStats.tsx b/src/components/CycleTransferStats.tsx
index 814fafb..a1ad817 100644
--- a/src/components/CycleTransferStats.tsx
+++ b/src/components/CycleTransferStats.tsx
@@ -17,7 +17,7 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({ serv
   const serverIdList = serverList.map((server) => server.id.toString())
 
   return (
-    <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
+    <section className="grid grid-cols-1 md:grid-cols-3 gap-3">
       {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
         if (!cycleData.server_name) {
           return null
diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
index 85419ca..476186f 100644
--- a/src/components/CycleTransferStatsClient.tsx
+++ b/src/components/CycleTransferStatsClient.tsx
@@ -1,11 +1,8 @@
 import { formatBytes } from "@/lib/format"
 import { cn } from "@/lib/utils"
-import { CircleStackIcon } from "@heroicons/react/24/outline"
 import React from "react"
 import { useTranslation } from "react-i18next"
 
-import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar"
-
 interface CycleTransferStatsClientProps {
   name: string
   from: string
@@ -26,7 +23,7 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
   return (
     <div
       className={cn(
-        "w-full bg-white px-4 py-3 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
+        "w-full bg-white px-4 py-3.5 rounded-lg border bg-card text-card-foreground hover:shadow-sm transition-all duration-200 dark:shadow-none",
         className,
         {
           "bg-card/70": customBackgroundImage,
@@ -37,43 +34,41 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
         const progress = (transfer / max) * 100
 
         return (
-          <div key={serverId}>
-            <section className="flex justify-between items-center">
-              <div className="bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">{name}</div>
-              <span className="text-stone-600 dark:text-stone-400 text-xs">
-                {new Date(from).toLocaleDateString()} - {new Date(to).toLocaleDateString()}
-              </span>
-            </section>
-
-            <section className="flex justify-between items-center mt-2">
-              <div className="flex gap-1 items-center">
-                <CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
-                <span className="text-sm font-semibold">{serverName}</span>
-              </div>
-              <div className="flex items-center gap-1">
-                <p className="text-xs text-end w-10 font-medium">{progress.toFixed(0)}%</p>
-                <AnimatedCircularProgressBar className="size-4 text-[0px]" max={100} min={0} value={progress} primaryColor="hsl(var(--chart-5))" />
-              </div>
-            </section>
-
-            <div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5 mt-2">
-              <div className="bg-green-600 h-2.5 rounded-full" style={{ width: `${Math.min(progress, 100)}%` }} />
+          <div key={serverId} className="space-y-3">
+            {/* Header */}
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{serverName}</span>
+              <div className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 rounded text-xs font-medium">{name}</div>
             </div>
 
-            <section className="flex justify-between items-center mt-2">
-              <span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
-                {formatBytes(transfer)} {t("cycleTransfer.used")}
-              </span>
-              <span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
-                {formatBytes(max)} {t("cycleTransfer.total")}
-              </span>
-            </section>
-
-            <section className="flex justify-between items-center mt-2">
-              <div className="text-xs text-stone-500 dark:text-stone-400">
-                {t("cycleTransfer.nextUpdate")}: {new Date(nextUpdate).toLocaleString()}
+            {/* Progress Section */}
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-baseline gap-1">
+                  <span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{formatBytes(transfer)}</span>
+                  <span className="text-xs text-neutral-500 dark:text-neutral-400">/ {formatBytes(max)}</span>
+                </div>
+                <span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{progress.toFixed(1)}%</span>
               </div>
-            </section>
+
+              <div className="relative h-1.5">
+                <div className="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full" />
+                <div
+                  className="absolute inset-0 bg-emerald-500 rounded-full transition-all duration-300"
+                  style={{ width: `${Math.min(progress, 100)}%` }}
+                />
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400">
+              <span>
+                {new Date(from).toLocaleDateString()} - {new Date(to).toLocaleDateString()}
+              </span>
+              <span>
+                {t("cycleTransfer.nextUpdate")}: {new Date(nextUpdate).toLocaleString()}
+              </span>
+            </div>
           </div>
         )
       })}
diff --git a/src/components/ServiceTracker.tsx b/src/components/ServiceTracker.tsx
index a49a4d5..2d96695 100644
--- a/src/components/ServiceTracker.tsx
+++ b/src/components/ServiceTracker.tsx
@@ -26,7 +26,7 @@ export function ServiceTracker({ serverList }: { serverList: NezhaServer[] }) {
         completed: up > serviceData.down[index],
         date: new Date(Date.now() - (29 - index) * 24 * 60 * 60 * 1000),
         uptime: dailyUptime,
-        delay: serviceData.delay[index] || 0
+        delay: serviceData.delay[index] || 0,
       }
     })
 
diff --git a/src/components/ServiceTrackerClient.tsx b/src/components/ServiceTrackerClient.tsx
index 47e2fde..b18afaf 100644
--- a/src/components/ServiceTrackerClient.tsx
+++ b/src/components/ServiceTrackerClient.tsx
@@ -1,12 +1,8 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import React from "react"
 import { useTranslation } from "react-i18next"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+
 import { Separator } from "./ui/separator"
 
 interface ServiceTrackerProps {
@@ -60,17 +56,9 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({ days, clas
           <span className="font-medium text-sm">{title}</span>
         </div>
         <div className="flex items-center gap-3">
-          <span className={cn(
-            "font-medium text-sm transition-colors",
-            getDelayColor(avgDelay)
-          )}>
-            {avgDelay.toFixed(0)}ms
-          </span>
+          <span className={cn("font-medium text-sm transition-colors", getDelayColor(avgDelay))}>{avgDelay.toFixed(0)}ms</span>
           <Separator className="h-4" orientation="vertical" />
-          <span className={cn(
-            "font-medium text-sm transition-colors",
-            getUptimeColor(uptime)
-          )}>
+          <span className={cn("font-medium text-sm transition-colors", getUptimeColor(uptime))}>
             {uptime.toFixed(1)}% {t("serviceTracker.uptime")}
           </span>
         </div>
@@ -88,7 +76,7 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({ days, clas
                     "after:absolute after:inset-0 after:rounded-[4px] after:shadow-[inset_0_1px_theme(colors.white/10%)]",
                     day.completed
                       ? "bg-gradient-to-b from-green-500/90 to-green-600 shadow-[0_1px_2px_theme(colors.green.600/30%)]"
-                      : "bg-gradient-to-b from-red-500/80 to-red-600/90 shadow-[0_1px_2px_theme(colors.red.600/30%)]"
+                      : "bg-gradient-to-b from-red-500/80 to-red-600/90 shadow-[0_1px_2px_theme(colors.red.600/30%)]",
                   )}
                 />
               </TooltipTrigger>
@@ -98,13 +86,16 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({ days, clas
                   <div className="space-y-1.5">
                     <div className="flex items-center justify-between gap-3">
                       <span className="text-xs text-muted-foreground">{t("serviceTracker.uptime")}:</span>
-                      <span className={cn("text-xs font-medium", day.uptime > 95 ? "text-green-500" : "text-red-500")}>
-                        {day.uptime.toFixed(1)}%
-                      </span>
+                      <span className={cn("text-xs font-medium", day.uptime > 95 ? "text-green-500" : "text-red-500")}>{day.uptime.toFixed(1)}%</span>
                     </div>
                     <div className="flex items-center justify-between gap-3">
                       <span className="text-xs text-muted-foreground">{t("serviceTracker.delay")}:</span>
-                      <span className={cn("text-xs font-medium", day.delay < 100 ? "text-green-500" : day.delay < 300 ? "text-yellow-500" : "text-red-500")}>
+                      <span
+                        className={cn(
+                          "text-xs font-medium",
+                          day.delay < 100 ? "text-green-500" : day.delay < 300 ? "text-yellow-500" : "text-red-500",
+                        )}
+                      >
                         {day.delay.toFixed(0)}ms
                       </span>
                     </div>