Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-05-06 13:58:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance domain remaining progress bar color logic

Browse Source
This commit is contained in:
Bot
2026-04-16 12:09:49 +08:00
parent 6398f73f7d
commit cc1678a21e
1 changed files with 2 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DomainStatus.tsx
+2 -17
View File
@@ -5,6 +5,7 @@ import { getDomains, Domain } from '@/api/domain';
import { CalendarDays, DollarSign } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useEffect, useState } from 'react';
import RemainPercentBar from "./RemainPercentBar";
// =======================================================
// 彩色备注标签组件
@@ -98,21 +99,7 @@ const DomainCard = ({ domain }: { domain: Domain }) => {
const billingData = domain.BillingData || {};
const customBackgroundImage = (window as any).CustomBackgroundImage !== "" ? (window as any).CustomBackgroundImage : undefined;
let progressBarColor = 'bg-gray-300';
let progressBarWidth = '100%';
if (expiresIn !== undefined) {
if (expiresIn <= 10) {
progressBarColor = 'bg-red-500';
progressBarWidth = `${Math.max(5, (expiresIn / 10) * 100)}%`;
} else if (expiresIn <= 100) {
const lightness = 50 + (expiresIn - 10) / 90 * 20;
progressBarColor = `bg-[hsl(45,90%,${lightness}%)]`;
progressBarWidth = `${Math.max(5, (expiresIn / 100) * 100)}%`;
} else {
progressBarColor = 'bg-green-500';
}
}
return (
<a href={`https://${domain.Domain}`} target="_blank" rel="noopener noreferrer" className="block h-full">
@@ -136,9 +123,7 @@ const DomainCard = ({ domain }: { domain: Domain }) => {
<span className="truncate">{billingData.renewalPrice || 'N/A'}</span>
</div>
<div className="flex-1">
<div className="w-full bg-muted rounded-full h-1.5 overflow-hidden">
<div className={cn("h-1.5 rounded-full transition-all duration-500", progressBarColor)} style={{ width: progressBarWidth }} />
</div>
<RemainPercentBar value={expiresIn ? Math.max(0, Math.min(100, (expiresIn / 365) * 100)) : 100} className="w-full h-1.5" />
</div>
<span className="font-medium text-muted-foreground w-12 text-right">{expiresIn !== undefined ? `${expiresIn}天` : 'N/A'}</span>
</div>