Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): improve mobile responsive layouts

Browse Source
This commit is contained in:
CaIon
2026-04-30 19:53:02 +08:00
parent aa730395f1
commit d46df94f05
84 changed files with 1174 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/dashboard/components/ui/panel-wrapper.tsx
Vendored
+6 -6
View File
@@ -20,10 +20,10 @@ export function PanelWrapper(props: PanelWrapperProps) {
if (props.loading) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
<div className='text-sm font-semibold'>{props.title}</div>
</div>
<div className='p-4 sm:p-5'>
<div className='p-3 sm:p-5'>
<Skeleton className={`w-full ${height}`} />
</div>
</div>
@@ -33,7 +33,7 @@ export function PanelWrapper(props: PanelWrapperProps) {
if (props.empty) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
<div className='text-sm font-semibold'>{props.title}</div>
</div>
<div
@@ -47,9 +47,9 @@ export function PanelWrapper(props: PanelWrapperProps) {
return (
<div className='overflow-hidden rounded-lg border'>
<div className='border-b px-4 py-3 sm:px-5'>
<div className='border-b px-3 py-2.5 sm:px-5 sm:py-3'>
{props.headerActions ? (
<div className='flex items-center justify-between'>
<div className='flex items-center justify-between gap-2'>
<div className='text-sm font-semibold'>{props.title}</div>
{props.headerActions}
</div>
@@ -57,7 +57,7 @@ export function PanelWrapper(props: PanelWrapperProps) {
<div className='text-sm font-semibold'>{props.title}</div>
)}
</div>
<div className='p-4 sm:p-5'>{props.children}</div>
<div className='p-3 sm:p-5'>{props.children}</div>
</div>
)
}
web/default/src/features/dashboard/components/ui/stat-card.tsx
Vendored
+12 -10
View File
@@ -15,13 +15,15 @@ export function StatCard(props: StatCardProps) {
const Icon = props.icon
return (
<div className='group flex flex-col gap-1.5 py-3'>
<div className='flex items-center justify-between'>
<div className='text-muted-foreground flex items-center gap-2 text-xs font-medium tracking-wider uppercase'>
<Icon className='text-muted-foreground/60 size-3.5' />
{props.title}
<div className='group flex flex-col gap-1'>
<div className='flex items-start justify-between gap-1'>
<div className='text-muted-foreground flex items-center gap-1.5 text-xs font-medium tracking-wider uppercase sm:gap-2'>
<Icon className='text-muted-foreground/60 size-3.5 shrink-0' />
<span className='line-clamp-2 leading-snug'>{props.title}</span>
</div>
{props.action}
{props.action && (
<div className='shrink-0'>{props.action}</div>
)}
</div>
{props.loading ? (
@@ -31,19 +33,19 @@ export function StatCard(props: StatCardProps) {
</div>
) : props.error ? (
<>
<div className='text-muted-foreground font-mono text-2xl font-bold tracking-tight tabular-nums'>
<div className='text-muted-foreground mt-0.5 font-mono text-base font-bold tracking-tight break-all tabular-nums sm:text-2xl'>
--
</div>
<p className='text-muted-foreground/60 text-xs'>
<p className='text-muted-foreground/60 hidden text-xs md:block'>
{props.description}
</p>
</>
) : (
<>
<div className='text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums'>
<div className='text-foreground mt-0.5 font-mono text-base font-bold tracking-tight break-all tabular-nums sm:text-2xl'>
{props.value}
</div>
<p className='text-muted-foreground/60 text-xs'>
<p className='text-muted-foreground/60 hidden text-xs md:block'>
{props.description}
</p>
</>