📱 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:
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ const PricingVendorIntroWithSkeleton = memo(({
|
|||||||
return (
|
return (
|
||||||
<PricingVendorIntroSkeleton
|
<PricingVendorIntroSkeleton
|
||||||
isAllVendors={filterVendor === 'all'}
|
isAllVendors={filterVendor === 'all'}
|
||||||
|
isMobile={restProps.isMobile}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user