wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixedTopServerName show billingInfo inline

Browse Source
This commit is contained in:
hamster1963 2024-12-24 14:59:17 +08:00
parent 427f1e9d7f
commit 98dcbd506b
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ServerCard.tsx
View File

@ -60,10 +60,22 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div>
<div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs " : "text-sm")}>{name}</p>
<div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
<div
className={cn("hidden lg:block", {
"lg:hidden": fixedTopServerName,
})}
>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
</div>
</section>
<div className="flex items-center gap-2 -mt-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
<div
className={cn("flex items-center gap-2 -mt-2 lg:hidden", {
"lg:flex": fixedTopServerName,
})}
>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
<div className="flex flex-col lg:items-start items-center gap-2">
<section
className={cn("grid grid-cols-5 items-center gap-3", {
@ -159,10 +171,22 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
</div>
<div className="relative flex flex-col">
<p className={cn("break-all font-bold tracking-tight max-w-[108px]", showFlag ? "text-xs" : "text-sm")}>{name}</p>
<div className="hidden lg:block">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
<div
className={cn("hidden lg:block", {
"lg:hidden": fixedTopServerName,
})}
>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
</div>
</section>
<div className="flex items-center gap-2 lg:hidden">{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}</div>
<div
className={cn("flex items-center gap-2 lg:hidden", {
"lg:flex": fixedTopServerName,
})}
>
{parsedData?.billingDataMod && <BillingInfo parsedData={parsedData} />}
</div>
{parsedData?.planDataMod && <PlanInfo parsedData={parsedData} />}
</Card>
)

12
src/components/billingInfo.tsx
View File

@ -35,9 +35,6 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
return daysLeftObject.days >= 0 ? (
<>
<div className={cn("text-[10px] text-muted-foreground")}>
{t("billingInfo.remaining")}: {isNeverExpire ? t("billingInfo.indefinite") : daysLeftObject.days + " " + t("billingInfo.days")}
</div>
{parsedData.billingDataMod.amount && parsedData.billingDataMod.amount !== "0" && parsedData.billingDataMod.amount !== "-1" ? (
<p className={cn("text-[10px] text-muted-foreground ")}>
{t("billingInfo.price")}: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
@ -47,13 +44,13 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
) : parsedData.billingDataMod.amount === "-1" ? (
<p className={cn("text-[10px] text-pink-600 ")}>{t("billingInfo.usage-baseed")}</p>
) : null}
<div className={cn("text-[10px] text-muted-foreground")}>
{t("billingInfo.remaining")}: {isNeverExpire ? t("billingInfo.indefinite") : daysLeftObject.days + " " + t("billingInfo.days")}
</div>
<RemainPercentBar className="mt-0.5" value={daysLeftObject.remainingPercentage * 100} />
</>
) : (
<>
<p className={cn("text-[10px] text-muted-foreground text-red-600")}>
{t("billingInfo.expired")}: {daysLeftObject.days * -1} {t("billingInfo.days")}
</p>
{parsedData.billingDataMod.amount && parsedData.billingDataMod.amount !== "0" && parsedData.billingDataMod.amount !== "-1" ? (
<p className={cn("text-[10px] text-muted-foreground ")}>
{t("billingInfo.price")}: {parsedData.billingDataMod.amount}/{parsedData.billingDataMod.cycle}
@ -63,6 +60,9 @@ export default function BillingInfo({ parsedData }: { parsedData: PublicNoteData
) : parsedData.billingDataMod.amount === "-1" ? (
<p className={cn("text-[10px] text-pink-600 ")}>{t("billingInfo.usage-baseed")}</p>
) : null}
<p className={cn("text-[10px] text-muted-foreground text-red-600")}>
{t("billingInfo.expired")}: {daysLeftObject.days * -1} {t("billingInfo.days")}
</p>
</>
)
}