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

♻️ refactor(web): refine data-table cards and pricing page layout

Browse Source 
Replace collapsible card details with always-visible label/value rows, add badge-list full display for cards, and polish pricing/channel toolbars and mobile cards.
This commit is contained in:
t0ng7u
2026-07-11 06:02:16 +08:00
parent 0918bdb49a
commit 9d1ca545e2
68 changed files with 1971 additions and 1840 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/pricing/components/loading-skeleton.tsx
Vendored
+64 -60
View File
@@ -18,28 +18,55 @@ For commercial licensing, please contact support@quantumnous.com
*/
import { Skeleton } from '@/components/ui/skeleton'
import { VIEW_MODES, type ViewMode } from '../constants'
import { DEFAULT_VIEW_MODE, VIEW_MODES, type ViewMode } from '../constants'
const CARD_SKELETONS = [
'card-1',
'card-2',
'card-3',
'card-4',
'card-5',
'card-6',
'card-7',
'card-8',
'card-9',
]
const PRICE_COLUMNS = ['input', 'cached', 'output', 'groups']
const TABLE_ROWS = [
'row-1',
'row-2',
'row-3',
'row-4',
'row-5',
'row-6',
'row-7',
'row-8',
'row-9',
'row-10',
]
const PAGINATION_ITEMS = ['previous', 'page-1', 'page-2', 'next']
export interface LoadingSkeletonProps {
viewMode?: ViewMode
}
export function LoadingSkeleton(props: LoadingSkeletonProps) {
const viewMode = props.viewMode ?? VIEW_MODES.CARD
const viewMode = props.viewMode ?? DEFAULT_VIEW_MODE
return (
<div className='space-y-5'>
<div className='space-y-1.5'>
<Skeleton className='h-8 w-40' />
<Skeleton className='h-4 w-52' />
<div>
<div className='mb-8 max-w-3xl space-y-2'>
<Skeleton className='h-6 w-48' />
<Skeleton className='h-4 w-full max-w-xl' />
</div>
<div className='space-y-4'>
<FilterBarSkeleton />
{viewMode === VIEW_MODES.TABLE ? (
<TableContentSkeleton />
) : (
<CardContentSkeleton />
)}
</div>
<Skeleton className='h-10 w-full rounded-lg' />
<FilterBarSkeleton />
{viewMode === VIEW_MODES.TABLE ? (
<TableContentSkeleton />
) : (
<CardContentSkeleton />
)}
</div>
)
}
@@ -47,11 +74,11 @@ export function LoadingSkeleton(props: LoadingSkeletonProps) {
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'>
{CARD_SKELETONS.map((key) => (
<div key={key} className='rounded-lg border p-4'>
<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' />
<Skeleton className='size-9 shrink-0 rounded-lg' />
<div className='min-w-0 flex-1 space-y-2'>
<Skeleton className='h-5 w-36' />
<Skeleton className='h-3.5 w-48' />
@@ -80,64 +107,41 @@ function CardContentSkeleton() {
function FilterBarSkeleton() {
return (
<div className='space-y-3'>
<div className='flex items-center gap-3'>
<div className='flex flex-1 flex-wrap items-center gap-2'>
{[80, 90, 75, 85, 70].map((width, i) => (
<Skeleton
key={i}
className='h-8 rounded-lg'
style={{ width: `${width}px` }}
/>
))}
</div>
<div className='flex items-center gap-2'>
<Skeleton className='h-8 w-24 rounded-lg' />
<Skeleton className='h-8 w-20 rounded-lg' />
<Skeleton className='h-8 w-24' />
<Skeleton className='h-8 w-20 rounded-lg' />
<div>
<div className='flex flex-col gap-3 sm:flex-row sm:items-center'>
<Skeleton className='h-7 w-full sm:h-8 sm:max-w-sm' />
<div className='flex flex-wrap items-center gap-2 sm:ml-auto'>
<Skeleton className='h-7 w-20 sm:h-8' />
<Skeleton className='h-7 w-24 sm:h-8' />
<Skeleton className='h-7 w-28 sm:h-8' />
<Skeleton className='h-7 w-16 sm:h-8' />
</div>
</div>
<Skeleton className='h-5 w-24' />
<Skeleton className='mt-3 h-4 w-24' />
</div>
)
}
function TableContentSkeleton() {
const columns = [
{ width: 200 },
{ width: 100 },
{ width: 100 },
{ width: 100 },
{ width: 80 },
{ width: 100 },
]
return (
<div className='space-y-4'>
<div className='overflow-hidden rounded-lg border'>
<div className='bg-muted/30 border-b px-4 py-3'>
<div className='flex items-center gap-4'>
{columns.map((col, i) => (
<Skeleton
key={i}
className='h-4'
style={{ width: `${col.width}px` }}
/>
<div className='grid grid-cols-[minmax(200px,2fr)_repeat(3,minmax(100px,1fr))_minmax(120px,1fr)] gap-4'>
<Skeleton className='h-4 w-32' />
{PRICE_COLUMNS.map((column) => (
<Skeleton key={column} className='h-4 w-20' />
))}
</div>
</div>
{Array.from({ length: 10 }).map((_, i) => (
{TABLE_ROWS.map((row) => (
<div
key={i}
className='flex items-center gap-4 border-b px-4 py-3 last:border-b-0'
key={row}
className='grid grid-cols-[minmax(200px,2fr)_repeat(3,minmax(100px,1fr))_minmax(120px,1fr)] gap-4 border-b px-4 py-3 last:border-b-0'
>
{columns.map((col, j) => (
<Skeleton
key={j}
className='h-5'
style={{ width: `${col.width}px` }}
/>
<Skeleton className='h-5 w-40' />
{PRICE_COLUMNS.map((column) => (
<Skeleton key={`${row}-${column}`} className='h-5 w-20' />
))}
</div>
))}
@@ -145,8 +149,8 @@ function TableContentSkeleton() {
<div className='flex items-center justify-between'>
<Skeleton className='h-5 w-32' />
<div className='flex items-center gap-2'>
{Array.from({ length: 4 }).map((_, i) => (
<Skeleton key={i} className='size-8' />
{PAGINATION_ITEMS.map((item) => (
<Skeleton key={item} className='size-8' />
))}
</div>
</div>