From 5f0db18d3a285db685af9caba438b52f650ae11e Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Fri, 29 Aug 2025 17:26:51 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20feat(pricing-header):=20show=20o?=
 =?UTF-8?q?nly=20search/copy/filter=20on=20mobile;=20hide=20vendor=20intro?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mobile (isMobile=true): render SearchActions (search, copy, filter) only; hide vendor intro card
- Keep PricingFilterModal available on mobile for filtering
- Desktop/Non-mobile: unchanged behavior (vendor intro remains visible)
- Improves small-screen UX by reducing visual clutter and prioritizing primary actions

Files:
- web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx

Notes:
- Added `SearchActions` import and conditional rendering
- No breaking changes; no styling changes required
---
 .../layout/header/PricingTopSection.jsx       | 58 ++++++++++++-------
 .../layout/header/PricingVendorIntro.jsx      |  2 +-
 .../header/PricingVendorIntroSkeleton.jsx     |  2 +-
 .../view/card/PricingCardSkeleton.jsx         |  2 +-
 .../view/card/PricingCardView.jsx             |  6 +-
 web/src/helpers/utils.jsx                     | 12 +---
 web/src/index.css                             |  3 +-
 7 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx b/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
index 78d46003..fe842fe3 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
@@ -20,6 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, memo } from 'react';
 import PricingFilterModal from '../../modal/PricingFilterModal';
 import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
+import SearchActions from './SearchActions';
 
 const PricingTopSection = memo(({
   selectedRowKeys,
@@ -40,28 +41,43 @@ const PricingTopSection = memo(({
 
   return (
     <>
-      <PricingVendorIntroWithSkeleton
-        loading={loading}
-        filterVendor={filterVendor}
-        models={filteredModels}
-        allModels={models}
-        t={t}
-        selectedRowKeys={selectedRowKeys}
-        copyText={copyText}
-        handleChange={handleChange}
-        handleCompositionStart={handleCompositionStart}
-        handleCompositionEnd={handleCompositionEnd}
-        isMobile={isMobile}
-        searchValue={searchValue}
-        setShowFilterModal={setShowFilterModal}
-      />
-
-      {isMobile && (
-        <PricingFilterModal
-          visible={showFilterModal}
-          onClose={() => setShowFilterModal(false)}
-          sidebarProps={sidebarProps}
+      {isMobile ? (
+        <>
+          <div className="w-full">
+            <SearchActions
+              selectedRowKeys={selectedRowKeys}
+              copyText={copyText}
+              handleChange={handleChange}
+              handleCompositionStart={handleCompositionStart}
+              handleCompositionEnd={handleCompositionEnd}
+              isMobile={isMobile}
+              searchValue={searchValue}
+              setShowFilterModal={setShowFilterModal}
+              t={t}
+            />
+          </div>
+          <PricingFilterModal
+            visible={showFilterModal}
+            onClose={() => setShowFilterModal(false)}
+            sidebarProps={sidebarProps}
+            t={t}
+          />
+        </>
+      ) : (
+        <PricingVendorIntroWithSkeleton
+          loading={loading}
+          filterVendor={filterVendor}
+          models={filteredModels}
+          allModels={models}
           t={t}
+          selectedRowKeys={selectedRowKeys}
+          copyText={copyText}
+          handleChange={handleChange}
+          handleCompositionStart={handleCompositionStart}
+          handleCompositionEnd={handleCompositionEnd}
+          isMobile={isMobile}
+          searchValue={searchValue}
+          setShowFilterModal={setShowFilterModal}
         />
       )}
     </>
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 deb618b1..2f02bd2b 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
@@ -247,7 +247,7 @@ const PricingVendorIntro = memo(({
     <Card className="!rounded-2xl shadow-sm border-0"
       cover={
         <div
-          className="relative h-32"
+          className="relative h-full"
           style={createCoverStyle(primaryDarkerChannel)}
         >
           <div className="relative z-10 h-full flex items-center justify-between p-4">
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 c0bf25e3..6cc2a51f 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
@@ -103,7 +103,7 @@ const PricingVendorIntroSkeleton = memo(({
     <Card className="!rounded-2xl shadow-sm border-0"
       cover={
         <div
-          className="relative h-32"
+          className="relative h-full"
           style={SKELETON_STYLES.cover(isAllVendors ? THEME_COLORS.allVendors.primary : THEME_COLORS.specific.primary)}
         >
           <div className="relative z-10 h-full flex items-center justify-between p-4">
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
index 6da5be49..c3cb4a31 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
@@ -26,7 +26,7 @@ const PricingCardSkeleton = ({
   showRatio = false
 }) => {
   const placeholder = (
-    <div className="px-2">
+    <div className="px-2 pt-2">
       <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
         {Array.from({ length: skeletonCount }).map((_, index) => (
           <Card
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 24909a5a..f4f4ec04 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -202,7 +202,7 @@ const PricingCardView = ({
   }
 
   return (
-    <div className="px-2">
+    <div className="px-2 pt-2">
       <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
         {paginatedModels.map((model, index) => {
           const modelKey = getModelKey(model);
@@ -278,9 +278,7 @@ const PricingCardView = ({
                 {/* 底部区域 */}
                 <div className="mt-auto">
                   {/* 标签区域 */}
-                  <div className="mb-3">
-                    {renderTags(model)}
-                  </div>
+                  {renderTags(model)}
 
                   {/* 倍率信息（可选） */}
                   {showRatio && (
diff --git a/web/src/helpers/utils.jsx b/web/src/helpers/utils.jsx
index b9d6c8d8..482ed273 100644
--- a/web/src/helpers/utils.jsx
+++ b/web/src/helpers/utils.jsx
@@ -656,22 +656,15 @@ export const calculateModelPrice = ({
 
 // 格式化价格信息（用于卡片视图）
 export const formatPriceInfo = (priceData, t) => {
-  const groupTag = priceData.usedGroup ? (
-    <span style={{ color: 'var(--semi-color-text-1)' }} className="ml-1 text-xs">
-      {t('分组')} {priceData.usedGroup}
-    </span>
-  ) : null;
-
   if (priceData.isPerToken) {
     return (
       <>
         <span style={{ color: 'var(--semi-color-text-1)' }}>
-          {t('提示')} {priceData.inputPrice}/{priceData.unitLabel}
+          {t('输入')} {priceData.inputPrice}/{priceData.unitLabel}
         </span>
         <span style={{ color: 'var(--semi-color-text-1)' }}>
-          {t('补全')} {priceData.completionPrice}/{priceData.unitLabel}
+          {t('输出')} {priceData.completionPrice}/{priceData.unitLabel}
         </span>
-        {groupTag}
       </>
     );
   }
@@ -681,7 +674,6 @@ export const formatPriceInfo = (priceData, t) => {
       <span style={{ color: 'var(--semi-color-text-1)' }}>
         {t('模型价格')} {priceData.price}
       </span>
-      {groupTag}
     </>
   );
 };
diff --git a/web/src/index.css b/web/src/index.css
index ae592cf5..dfff900d 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -775,6 +775,7 @@ html.dark .with-pastel-balls::before {
 }
 
 /* ==================== semi-ui 组件自定义样式 ==================== */
-.semi-card-header {
+.semi-card-header,
+.semi-card-body {
   padding: 10px !important;
 }
\ No newline at end of file