From eedb57b2c6e0994ab617ac212887a9d4e4a6bb77 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Sun, 24 Aug 2025 10:52:43 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20feat(header):=20add=20mobile=20f?=
 =?UTF-8?q?ilter=20skeleton;=20align=20mobile=20tag=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../layout/header/PricingVendorIntro.jsx        |  4 ++--
 .../header/PricingVendorIntroSkeleton.jsx       | 17 ++++++++++++-----
 .../header/PricingVendorIntroWithSkeleton.jsx   |  1 +
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx b/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
index ee7695fe..deb618b1 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
@@ -252,11 +252,11 @@ const PricingVendorIntro = memo(({
         >
           <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 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}>
                   {title}
                 </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 })}
                 </Tag>
               </div>
diff --git a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
index 411b8642..c0bf25e3 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
@@ -84,9 +84,9 @@ const SKELETON_STYLES = {
     border: `1px solid ${THEME_COLORS.neutral.border}`
   },
   button: {
-    backgroundColor: THEME_COLORS.allVendors.background,
+    backgroundColor: THEME_COLORS.neutral.background,
     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(({
-  isAllVendors = false
+  isAllVendors = false,
+  isMobile = false
 }) => {
 
   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="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({
                   ...SKELETON_STYLES.title,
                   width: isAllVendors ? SIZES.title.width.all : SIZES.title.width.specific,
@@ -158,7 +159,13 @@ const PricingVendorIntroSkeleton = memo(({
           ...SKELETON_STYLES.button,
           width: SIZES.button.width,
           height: SIZES.button.height
-        }, 'button')}
+        }, 'copy-button')}
+
+        {isMobile && createSkeletonRect({
+          ...SKELETON_STYLES.button,
+          width: SIZES.button.width,
+          height: SIZES.button.height
+        }, 'filter-button')}
       </div>
     </Card>
   );
diff --git a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
index 15b3392b..0a64416b 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx
@@ -33,6 +33,7 @@ const PricingVendorIntroWithSkeleton = memo(({
     return (
       <PricingVendorIntroSkeleton
         isAllVendors={filterVendor === 'all'}
+        isMobile={restProps.isMobile}
       />
     );
   }