From 34d45bb3b81ef2f11e8ea9d7bb3b5e2800656015 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Thu, 24 Jul 2025 23:28:55 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=AD=20style(ui):=20Optimize=20style=20?=
 =?UTF-8?q?layout=20and=20improve=20responsive=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/header/PricingCategoryIntro.jsx    | 42 ++++++++++---------
 .../header/PricingCategoryIntroSkeleton.jsx   | 10 ++---
 .../view/card/PricingCardView.jsx             |  2 +-
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
index df1e3c97..47cac58c 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
@@ -104,7 +104,7 @@ const PricingCategoryIntro = ({
         }));
 
       return (
-        <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+        <div className="min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
           <AvatarGroup size="default" overlapFrom='end'>
             {fallbackCategories.map((item) => (
               <Avatar
@@ -122,7 +122,7 @@ const PricingCategoryIntro = ({
     }
 
     return (
-      <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+      <div className="min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
         <AvatarGroup
           maxCount={4}
           size="default"
@@ -162,7 +162,7 @@ const PricingCategoryIntro = ({
 
   // 为具体分类渲染单个图标
   const renderCategoryAvatar = (category) => (
-    <div className="w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center">
+    <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center">
       {category.icon && React.cloneElement(category.icon, { size: 40 })}
     </div>
   );
@@ -171,20 +171,22 @@ const PricingCategoryIntro = ({
   if (activeKey === 'all') {
     return (
       <div className='mb-4'>
-        <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
-          <div className="flex items-start space-x-4">
+        <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
+          <div className="flex items-start space-x-3 md:space-x-4">
             {/* 全部模型的头像组合 */}
-            {renderAllModelsAvatar()}
+            <div className="flex-shrink-0">
+              {renderAllModelsAvatar()}
+            </div>
 
             {/* 分类信息 */}
-            <div className="flex-1">
-              <div className="flex items-center space-x-3 mb-2">
-                <h2 className="text-xl font-bold text-gray-900">{modelCategories.all.label}</h2>
-                <Tag color="white" shape="circle" size="small">
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
+                <h2 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{modelCategories.all.label}</h2>
+                <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
                   {t('共 {{count}} 个模型', { count: modelCount })}
                 </Tag>
               </div>
-              <p className="text-sm text-gray-600 leading-relaxed">
+              <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
                 {getCategoryDescription(activeKey)}
               </p>
             </div>
@@ -202,20 +204,22 @@ const PricingCategoryIntro = ({
 
   return (
     <div className='mb-4'>
-      <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
-        <div className="flex items-start space-x-4">
+      <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
+        <div className="flex items-start space-x-3 md:space-x-4">
           {/* 分类图标 */}
-          {renderCategoryAvatar(currentCategory)}
+          <div className="flex-shrink-0">
+            {renderCategoryAvatar(currentCategory)}
+          </div>
 
           {/* 分类信息 */}
-          <div className="flex-1">
-            <div className="flex items-center space-x-3 mb-2">
-              <h2 className="text-xl font-bold text-gray-900">{currentCategory.label}</h2>
-              <Tag color="white" shape="circle" size="small">
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
+              <h2 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{currentCategory.label}</h2>
+              <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
                 {t('共 {{count}} 个模型', { count: modelCount })}
               </Tag>
             </div>
-            <p className="text-sm text-gray-600 leading-relaxed">
+            <p className="text-xs sm:text-sm text-gray-600 leading-relaxed">
               {getCategoryDescription(activeKey)}
             </p>
           </div>
diff --git a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
index 06d029ef..8ae719df 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
@@ -25,10 +25,10 @@ const PricingCategoryIntroSkeleton = ({
 }) => {
   const placeholder = (
     <div className='mb-4'>
-      <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
-        <div className="flex items-start space-x-4">
+      <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
+        <div className="flex items-start space-x-3 md:space-x-4">
           {/* 分类图标骨架 */}
-          <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+          <div className="flex-shrink-0 min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
             {isAllModels ? (
               <div className="flex items-center">
                 {Array.from({ length: 5 }).map((_, index) => (
@@ -50,8 +50,8 @@ const PricingCategoryIntroSkeleton = ({
           </div>
 
           {/* 分类信息骨架 */}
-          <div className="flex-1">
-            <div className="flex items-center space-x-3 mb-2">
+          <div className="flex-1 min-w-0">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-2">
               <Skeleton.Title active style={{ width: 120, height: 24, marginBottom: 0 }} />
               <Skeleton.Button active size="small" style={{ width: 80, height: 20, borderRadius: 12 }} />
             </div>
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index 29e1786a..e107df79 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -26,7 +26,7 @@ import PricingCardSkeleton from './PricingCardSkeleton';
 import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
 
 const CARD_STYLES = {
-  container: "w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm",
+  container: "w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md",
   icon: "w-8 h-8 flex items-center justify-center",
   selected: "border-blue-500 bg-blue-50",
   default: "border-gray-200 hover:border-gray-300"