From 0f86c4df9e8a5ee790ca8a7909fb570081753875 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Fri, 29 Aug 2025 18:30:21 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20chore:=20Increase=20default=20page?=
 =?UTF-8?q?=20size=20from=2010=20to=20100=20items=20in=20model=20pricing?=
 =?UTF-8?q?=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit updates the default pagination settings across the model pricing
components to improve user experience by reducing the need for frequent
page navigation when browsing large model catalogs.

Changes made:
- Update initial pageSize state from 10 to 100 in useModelPricingData hook
- Set defaultPageSize to 100 in PricingTable pagination configuration
- Increase default skeletonCount from 10 to 100 in PricingCardSkeleton

Files modified:
- web/src/hooks/model-pricing/useModelPricingData.jsx
- web/src/components/table/model-pricing/view/table/PricingTable.jsx
- web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx

This change affects both card and table view modes of the model pricing page,
ensuring consistent pagination behavior across different display formats.
---
 .../table/model-pricing/view/card/PricingCardSkeleton.jsx    | 2 +-
 .../table/model-pricing/view/card/PricingCardView.jsx        | 5 +----
 .../table/model-pricing/view/table/PricingTable.jsx          | 2 +-
 web/src/hooks/model-pricing/useModelPricingData.jsx          | 2 +-
 4 files changed, 4 insertions(+), 7 deletions(-)

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 c3cb4a310..58bcf9e41 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { Card, Skeleton } from '@douyinfe/semi-ui';
 
 const PricingCardSkeleton = ({
-  skeletonCount = 10,
+  skeletonCount = 100,
   rowSelection = false,
   showRatio = false
 }) => {
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 f4f4ec041..9b4702f8b 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -282,10 +282,7 @@ const PricingCardView = ({
 
                   {/* 倍率信息（可选） */}
                   {showRatio && (
-                    <div
-                      className="pt-3 border-t border-dashed"
-                      style={{ borderColor: 'var(--semi-color-border)' }}
-                    >
+                    <div className="pt-3">
                       <div className="flex items-center space-x-1 mb-2">
                         <span className="text-xs font-medium text-gray-700">{t('倍率信息')}</span>
                         <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
diff --git a/web/src/components/table/model-pricing/view/table/PricingTable.jsx b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
index e65b63ea5..6e905e651 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
@@ -114,7 +114,7 @@ const PricingTable = ({
           />
         }
         pagination={{
-          defaultPageSize: 10,
+          defaultPageSize: 100,
           pageSize: pageSize,
           showSizeChanger: true,
           pageSizeOptions: [10, 20, 50, 100],
diff --git a/web/src/hooks/model-pricing/useModelPricingData.jsx b/web/src/hooks/model-pricing/useModelPricingData.jsx
index d03d45cdf..4010cbaa5 100644
--- a/web/src/hooks/model-pricing/useModelPricingData.jsx
+++ b/web/src/hooks/model-pricing/useModelPricingData.jsx
@@ -39,7 +39,7 @@ export const useModelPricingData = () => {
   const [filterEndpointType, setFilterEndpointType] = useState('all'); // 端点类型筛选: 'all' | string
   const [filterVendor, setFilterVendor] = useState('all'); // 供应商筛选: 'all' | 'unknown' | string
   const [filterTag, setFilterTag] = useState('all'); // 模型标签筛选: 'all' | string
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize, setPageSize] = useState(100);
   const [currentPage, setCurrentPage] = useState(1);
   const [currency, setCurrency] = useState('USD');
   const [showWithRecharge, setShowWithRecharge] = useState(false);