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

feat(ui): redesign model square pricing page

Browse Source
This commit is contained in:
CaIon
2026-04-30 16:29:32 +08:00
parent 5f86839c7e
commit d2b30dfc95
34 changed files with 2468 additions and 767 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/pricing/components/loading-skeleton.tsx
Vendored
+36 -30
View File
@@ -6,7 +6,7 @@ export interface LoadingSkeletonProps {
}
export function LoadingSkeleton(props: LoadingSkeletonProps) {
const viewMode = props.viewMode ?? VIEW_MODES.LIST
const viewMode = props.viewMode ?? VIEW_MODES.CARD
return (
<div className='space-y-5'>
@@ -19,12 +19,46 @@ export function LoadingSkeleton(props: LoadingSkeletonProps) {
{viewMode === VIEW_MODES.TABLE ? (
<TableContentSkeleton />
) : (
<ListContentSkeleton />
<CardContentSkeleton />
)}
</div>
)
}
function CardContentSkeleton() {
return (
<div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
{Array.from({ length: 9 }).map((_, i) => (
<div key={i} className='rounded-xl border p-5'>
<div className='flex items-start justify-between gap-3'>
<div className='flex min-w-0 items-start gap-3'>
<Skeleton className='size-10 shrink-0 rounded-xl' />
<div className='min-w-0 flex-1 space-y-2'>
<Skeleton className='h-5 w-36' />
<Skeleton className='h-3.5 w-48' />
</div>
</div>
<Skeleton className='h-8 w-16 rounded-md' />
</div>
<div className='mt-4 space-y-2'>
<Skeleton className='h-3.5 w-full' />
<Skeleton className='h-3.5 w-4/5' />
</div>
<div className='mt-4 flex items-center gap-2'>
<Skeleton className='h-4 w-24' />
<Skeleton className='h-4 w-16' />
</div>
<div className='mt-2 flex items-center gap-3'>
<Skeleton className='h-3.5 w-14' />
<Skeleton className='h-3.5 w-14' />
<Skeleton className='h-3.5 w-8' />
</div>
</div>
))}
</div>
)
}
function FilterBarSkeleton() {
return (
<div className='space-y-3'>
@@ -50,34 +84,6 @@ function FilterBarSkeleton() {
)
}
function ListContentSkeleton() {
return (
<div className='overflow-hidden rounded-lg border'>
{Array.from({ length: 8 }).map((_, i) => (
<div
key={i}
className='flex items-start gap-4 border-b px-4 py-3.5 last:border-b-0 sm:px-5 sm:py-4'
>
<Skeleton className='hidden size-5 shrink-0 rounded sm:block' />
<div className='min-w-0 flex-1 space-y-2'>
<Skeleton className='h-5 w-48' />
<div className='flex items-center gap-2'>
<Skeleton className='h-3.5 w-20' />
<Skeleton className='h-3.5 w-24' />
</div>
<Skeleton className='h-3.5 w-full max-w-md' />
</div>
<div className='shrink-0 space-y-1 text-right'>
<Skeleton className='ml-auto h-4 w-20' />
<Skeleton className='ml-auto h-4 w-16' />
<Skeleton className='ml-auto h-4 w-20' />
</div>
</div>
))}
</div>
)
}
function TableContentSkeleton() {
const columns = [
{ width: 200 },