admin/CLICD
1
0
Fork 0
mirror of https://github.com/MengMengCode/CLICD.git synced 2026-08-07 22:24:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化UI

Browse Source
This commit is contained in:
MengMengCode
2026-06-10 01:14:51 +08:00
parent a45e063fc2
commit 0b052f2217
3 changed files with 56 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Routing.tsx
+12 -10
View File
@@ -187,9 +187,9 @@ export default function Routing() {
</div>
<div className="grid gap-4 md:grid-cols-3">
<CapacityCard title={text.nat4Ports} icon={<Network className="h-5 w-5" />} remaining={routing?.nat4.remaining || '0'} total={routing?.nat4.total || '0'} used={routing?.nat4.used || 0} label={text.remainingTotal} usedLabel={text.used} />
<CapacityCard title={text.publicIPv4} icon={<Globe2 className="h-5 w-5" />} remaining={routing?.ipv4.remaining || '0'} total={routing?.ipv4.total || '0'} used={routing?.ipv4.used || 0} label={formatPoolCount(publicIPv4s.length, language)} usedLabel={text.used} />
<CapacityCard title="IPv6" icon={<Router className="h-5 w-5" />} remaining={formatCapacity(routing?.ipv6.remaining || '0', language)} total={formatCapacity(routing?.ipv6.total || '0', language)} used={routing?.ipv6.used || 0} label={formatDetectedPrefixCount(ipv6Prefixes.length, language)} usedLabel={text.used} />
<CapacityCard title={text.nat4Ports} watermark="NAT4" remaining={routing?.nat4.remaining || '0'} total={routing?.nat4.total || '0'} used={routing?.nat4.used || 0} label={text.remainingTotal} usedLabel={text.used} />
<CapacityCard title={text.publicIPv4} watermark="IPv4" remaining={routing?.ipv4.remaining || '0'} total={routing?.ipv4.total || '0'} used={routing?.ipv4.used || 0} label={formatPoolCount(publicIPv4s.length, language)} usedLabel={text.used} />
<CapacityCard title="IPv6" watermark="IPv6" remaining={formatCapacity(routing?.ipv6.remaining || '0', language)} total={formatCapacity(routing?.ipv6.total || '0', language)} used={routing?.ipv6.used || 0} label={formatDetectedPrefixCount(ipv6Prefixes.length, language)} usedLabel={text.used} />
</div>
<Panel
@@ -525,9 +525,9 @@ function Pagination({ page, totalPages, totalItems, pageSize, onPageChange, lang
)
}
function CapacityCard({ title, icon, remaining, total, used, label, usedLabel }: {
function CapacityCard({ title, watermark, remaining, total, used, label, usedLabel }: {
title: string
icon: ReactNode
watermark: string
remaining: string
total: string
used: number
@@ -535,8 +535,11 @@ function CapacityCard({ title, icon, remaining, total, used, label, usedLabel }:
usedLabel: string
}) {
return (
<div className="rounded-lg border border-gray-200 bg-white p-4">
<div className="flex items-center justify-between gap-3">
<div className="relative overflow-hidden rounded-lg border border-gray-200 bg-white p-4">
<div className="pointer-events-none absolute bottom-1 right-3 select-none bg-gradient-to-br from-black via-gray-600 to-gray-300 bg-clip-text text-[44px] font-black italic tracking-wide text-transparent opacity-25 -skew-x-12">
{watermark}
</div>
<div className="relative z-10">
<div>
<div className="text-sm font-medium text-gray-700">{title}</div>
<div className="mt-2 flex items-end gap-2">
@@ -544,10 +547,9 @@ function CapacityCard({ title, icon, remaining, total, used, label, usedLabel }:
<span className="pb-1 text-sm text-gray-400">/ {total}</span>
</div>
</div>
<div className="flex h-10 w-10 items-center justify-center rounded-md bg-gray-100 text-gray-700">{icon}</div>
</div>
<div className="mt-3 text-xs text-gray-500">{label}</div>
<div className="mt-1 text-xs text-gray-400">{usedLabel} {used}</div>
<div className="relative z-10 mt-3 text-xs text-gray-500">{label}</div>
<div className="relative z-10 mt-1 text-xs text-gray-400">{usedLabel} {used}</div>
</div>
)
}