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

fix: cycle card grid

Browse Source
This commit is contained in:
hamster1963 2024-12-03 15:04:13 +08:00
parent 20b4f47f63
commit 8811904133
2 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/CycleTransferStats.tsx
View File

@ -14,32 +14,35 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
return ( 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-2 gap-2 md:gap-4">
{Object.entries(cycleStats).map(([cycleId, cycleData]) => { {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
const serverStats = cycleData.server_name if (!cycleData.server_name) {
? Object.entries(cycleData.server_name).map( return null;
([serverId, serverName]) => ({ }
serverId,
serverName,
transfer: cycleData.transfer?.[serverId] || 0,
nextUpdate: cycleData.next_update?.[serverId],
})
)
: [];
if (serverStats.length === 0) { return Object.entries(cycleData.server_name).map(([serverId, serverName]) => {
const transfer = cycleData.transfer?.[serverId] || 0;
const nextUpdate = cycleData.next_update?.[serverId];
if (!transfer && !nextUpdate) {
return null; return null;
} }
return ( return (
<CycleTransferStatsClient <CycleTransferStatsClient
key={cycleId} key={`${cycleId}-${serverId}`}
name={cycleData.name} name={cycleData.name}
from={cycleData.from} from={cycleData.from}
to={cycleData.to} to={cycleData.to}
max={cycleData.max} max={cycleData.max}
serverStats={serverStats} serverStats={[{
serverId,
serverName,
transfer,
nextUpdate: nextUpdate || "",
}]}
className={className} className={className}
/> />
); );
});
})} })}
</section> </section>
); );

18
src/components/CycleTransferStatsClient.tsx
View File

@ -24,17 +24,15 @@ export const CycleTransferStatsClient: React.FC<
return ( return (
<div <div
className={cn( className={cn(
"w-full space-y-2 bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none", "w-full bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
className, className,
)} )}
> >
<div className="space-y-1">
<div className="space-y-2">
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => { {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
const progress = (transfer / max) * 100; const progress = (transfer / max) * 100;
return ( return (
<div key={serverId} className="space-y-2"> <div key={serverId}>
<section className="flex justify-between items-center"> <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]"> <div className="bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
{name} {name}
@ -44,7 +42,8 @@ export const CycleTransferStatsClient: React.FC<
{new Date(to).toLocaleDateString()} {new Date(to).toLocaleDateString()}
</span> </span>
</section> </section>
<section className="flex justify-between items-center">
<section className="flex justify-between items-center mt-2">
<div className="flex gap-1 items-center"> <div className="flex gap-1 items-center">
<CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" /> <CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
<span className="text-sm font-semibold">{serverName}</span> <span className="text-sm font-semibold">{serverName}</span>
@ -62,14 +61,15 @@ export const CycleTransferStatsClient: React.FC<
/> />
</div> </div>
</section> </section>
<div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
<div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5 mt-2">
<div <div
className="bg-green-600 h-2.5 rounded-full" className="bg-green-600 h-2.5 rounded-full"
style={{ width: `${Math.min(progress, 100)}%` }} style={{ width: `${Math.min(progress, 100)}%` }}
/> />
</div> </div>
<section className="flex justify-between items-center"> <section className="flex justify-between items-center mt-2">
<span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium"> <span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
{formatBytes(transfer)} used {formatBytes(transfer)} used
</span> </span>
@ -78,7 +78,7 @@ export const CycleTransferStatsClient: React.FC<
</span> </span>
</section> </section>
<section className="flex justify-between items-center"> <section className="flex justify-between items-center mt-2">
<div className="text-xs text-stone-500 dark:text-stone-400"> <div className="text-xs text-stone-500 dark:text-stone-400">
Next update: {new Date(nextUpdate).toLocaleString()} Next update: {new Date(nextUpdate).toLocaleString()}
</div> </div>
@ -87,8 +87,6 @@ export const CycleTransferStatsClient: React.FC<
); );
})} })}
</div> </div>
</div>
</div>
); );
}; };