feat: inline card endDate info

hamster1963 · Dec 2, 2024 · 32e308f · 32e308f
1 parent 91677df
commit 32e308f
Showing 1 changed file with 38 additions and 2 deletions.
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
@@ -1,7 +1,12 @@
 import ServerFlag from "@/components/ServerFlag";
 import ServerUsageBar from "@/components/ServerUsageBar";
 
-import { cn, formatNezhaInfo } from "@/lib/utils";
+import {
+  cn,
+  formatNezhaInfo,
+  getDaysBetweenDates,
+  parsePublicNote,
+} from "@/lib/utils";
 import { NezhaServer } from "@/types/nezha-api";
 import { Card } from "./ui/card";
 import { useNavigate } from "react-router-dom";
@@ -35,10 +40,27 @@ export default function ServerCardInline({
     uptime,
     net_in_transfer,
     net_out_transfer,
+    public_note,
   } = formatNezhaInfo(now, serverInfo);
 
   const showFlag = true;
 
+  const parsedData = parsePublicNote(public_note);
+
+  let daysLeft = 0;
+  let isNeverExpire = false;
+
+  if (parsedData?.billingDataMod?.endDate) {
+    if (parsedData.billingDataMod.endDate.startsWith("0000-00-00")) {
+      isNeverExpire = true;
+    } else {
+      daysLeft = getDaysBetweenDates(
+        parsedData.billingDataMod.endDate,
+        new Date().toISOString(),
+      );
+    }
+  }
+
   return online ? (
     <section>
       <Card
@@ -60,7 +82,7 @@ export default function ServerCardInline({
           >
             {showFlag ? <ServerFlag country_code={country_code} /> : null}
           </div>
-          <div className="relative">
+          <div className="relative flex flex-col">
             <p
               className={cn(
                 "break-all font-bold tracking-tight",
@@ -69,6 +91,20 @@ export default function ServerCardInline({
             >
               {name}
             </p>
+            {parsedData &&
+              (daysLeft >= 0 ? (
+                <p className={cn("text-[10px] text-muted-foreground")}>
+                  剩余时间: {isNeverExpire ? "永久" : daysLeft + "天"}
+                </p>
+              ) : (
+                <p
+                  className={cn(
+                    "text-[10px] text-muted-foreground text-red-600",
+                  )}
+                >
+                  已过期: {daysLeft * -1} 天
+                </p>
+              ))}
           </div>
         </section>
         <div className="flex flex-col gap-2">