📱 feat(header): add mobile filter skeleton; align mobile tag layout

- Add mobile filter-button placeholder in skeleton when `isMobile` is true
- Plumb `isMobile` from `PricingVendorIntroWithSkeleton` to `PricingVendorIntroSkeleton`
- Rename skeleton key from 'button' to 'copy-button' for consistency
- Neutralize copy-button skeleton color to match input (use neutral palette)
- Keep “Total x models” tag inline with title on mobile; wrap only when space is insufficient
- Mirror the same title+tag layout in the skeleton (flex-row flex-wrap items-center)
- No linter errors introduced

Affected files:
- web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
- web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
- web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
This commit is contained in:
t0ng7u
2025-08-24 10:52:43 +08:00
parent d7c2a9f1b8
commit eedb57b2c6
3 changed files with 15 additions and 7 deletions

View File

@@ -252,11 +252,11 @@ const PricingVendorIntro = memo(({
> >
<div className="relative z-10 h-full flex items-center justify-between p-4"> <div className="relative z-10 h-full flex items-center justify-between p-4">
<div className="flex-1 min-w-0 mr-4"> <div className="flex-1 min-w-0 mr-4">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2"> <div className="flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2">
<h2 className="text-lg sm:text-xl font-bold truncate" style={COMPONENT_STYLES.titleText}> <h2 className="text-lg sm:text-xl font-bold truncate" style={COMPONENT_STYLES.titleText}>
{title} {title}
</h2> </h2>
<Tag style={COMPONENT_STYLES.tag} shape="circle" size="small" className="self-start sm:self-center"> <Tag style={COMPONENT_STYLES.tag} shape="circle" size="small" className="self-center">
{t('共 {{count}} 个模型', { count })} {t('共 {{count}} 个模型', { count })}
</Tag> </Tag>
</div> </div>

View File

@@ -84,9 +84,9 @@ const SKELETON_STYLES = {
border: `1px solid ${THEME_COLORS.neutral.border}` border: `1px solid ${THEME_COLORS.neutral.border}`
}, },
button: { button: {
backgroundColor: THEME_COLORS.allVendors.background, backgroundColor: THEME_COLORS.neutral.background,
borderRadius: 8, borderRadius: 8,
border: `1px solid ${THEME_COLORS.allVendors.border}` border: `1px solid ${THEME_COLORS.neutral.border}`
} }
}; };
@@ -95,7 +95,8 @@ const createSkeletonRect = (style = {}, key = null) => (
); );
const PricingVendorIntroSkeleton = memo(({ const PricingVendorIntroSkeleton = memo(({
isAllVendors = false isAllVendors = false,
isMobile = false
}) => { }) => {
const placeholder = ( const placeholder = (
@@ -107,7 +108,7 @@ const PricingVendorIntroSkeleton = memo(({
> >
<div className="relative z-10 h-full flex items-center justify-between p-4"> <div className="relative z-10 h-full flex items-center justify-between p-4">
<div className="flex-1 min-w-0 mr-4"> <div className="flex-1 min-w-0 mr-4">
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2"> <div className="flex flex-row flex-wrap items-center gap-2 sm:gap-3 mb-2">
{createSkeletonRect({ {createSkeletonRect({
...SKELETON_STYLES.title, ...SKELETON_STYLES.title,
width: isAllVendors ? SIZES.title.width.all : SIZES.title.width.specific, width: isAllVendors ? SIZES.title.width.all : SIZES.title.width.specific,
@@ -158,7 +159,13 @@ const PricingVendorIntroSkeleton = memo(({
...SKELETON_STYLES.button, ...SKELETON_STYLES.button,
width: SIZES.button.width, width: SIZES.button.width,
height: SIZES.button.height height: SIZES.button.height
}, 'button')} }, 'copy-button')}
{isMobile && createSkeletonRect({
...SKELETON_STYLES.button,
width: SIZES.button.width,
height: SIZES.button.height
}, 'filter-button')}
</div> </div>
</Card> </Card>
); );

View File

@@ -33,6 +33,7 @@ const PricingVendorIntroWithSkeleton = memo(({
return ( return (
<PricingVendorIntroSkeleton <PricingVendorIntroSkeleton
isAllVendors={filterVendor === 'all'} isAllVendors={filterVendor === 'all'}
isMobile={restProps.isMobile}
/> />
); );
} }