From 2bab7275698ac0f61f0147fcf3e58383cbda049f Mon Sep 17 00:00:00 2001
From: yoan <536464346@qq.com>
Date: Sun, 20 Oct 2024 17:15:20 +0800
Subject: [PATCH] add remaining days

---
 ui/src/lib/time.ts            | 11 +++++++++++
 ui/src/pages/domains/Home.tsx |  5 +++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/ui/src/lib/time.ts b/ui/src/lib/time.ts
index fd77b7ba..27bcb552 100644
--- a/ui/src/lib/time.ts
+++ b/ui/src/lib/time.ts
@@ -21,6 +21,16 @@ export const getDate = (zuluTime: string) => {
   return time.split(" ")[0];
 };
 
+export const getLeftDays = (zuluTime: string) => {
+  const time = convertZulu2Beijing(zuluTime);
+  const date = time.split(" ")[0];
+  const now = new Date();
+  const target = new Date(date);
+  const diff = target.getTime() - now.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  return days;
+};
+
 export function getTimeBefore(days: number): string {
   // 获取当前时间
   const currentDate = new Date();
@@ -66,3 +76,4 @@ export function getTimeAfter(days: number): string {
 
   return formattedDate;
 }
+
diff --git a/ui/src/pages/domains/Home.tsx b/ui/src/pages/domains/Home.tsx
index f59ed7b9..4e66714c 100644
--- a/ui/src/pages/domains/Home.tsx
+++ b/ui/src/pages/domains/Home.tsx
@@ -26,7 +26,7 @@ import { Toaster } from "@/components/ui/toaster";
 import { Tooltip, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/components/ui/use-toast";
 import { CustomFile, saveFiles2ZIP } from "@/lib/file";
-import { convertZulu2Beijing, getDate } from "@/lib/time";
+import { convertZulu2Beijing, getDate, getLeftDays } from "@/lib/time";
 import { Domain } from "@/domain/domain";
 import { list, remove, save, subscribeId, unsubscribeId } from "@/repository/domains";
 
@@ -213,7 +213,7 @@ const Home = () => {
                   <div>
                     {domain.expiredAt ? (
                       <>
-                        <div>{t("domain.props.expiry.date1", { date: 90 })}</div>
+                        <div>{t("domain.props.expiry.date1", { date: `${getLeftDays(domain.expiredAt)}/90` })}</div>
                         <div>
                           {t("domain.props.expiry.date2", {
                             date: getDate(domain.expiredAt),
@@ -340,3 +340,4 @@ const Home = () => {
 };
 
 export default Home;
+