+ );
+};
+
+export default PricingCategoryIntro;
\ No newline at end of file
diff --git a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
new file mode 100644
index 00000000..06d029ef
--- /dev/null
+++ b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
@@ -0,0 +1,75 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see .
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Card, Skeleton } from '@douyinfe/semi-ui';
+
+const PricingCategoryIntroSkeleton = ({
+ isAllModels = false
+}) => {
+ const placeholder = (
+
+ );
+
+ return (
+
+ );
+};
+
+export default PricingCategoryIntroSkeleton;
\ No newline at end of file
diff --git a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroWithSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroWithSkeleton.jsx
new file mode 100644
index 00000000..fbb7113a
--- /dev/null
+++ b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroWithSkeleton.jsx
@@ -0,0 +1,54 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see .
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import PricingCategoryIntro from './PricingCategoryIntro';
+import PricingCategoryIntroSkeleton from './PricingCategoryIntroSkeleton';
+import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
+
+const PricingCategoryIntroWithSkeleton = ({
+ loading = false,
+ activeKey,
+ modelCategories,
+ categoryCounts,
+ availableCategories,
+ t
+}) => {
+ const showSkeleton = useMinimumLoadingTime(loading);
+
+ if (showSkeleton) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+export default PricingCategoryIntroWithSkeleton;
\ No newline at end of file
diff --git a/web/src/components/table/model-pricing/layout/PricingSearchBar.jsx b/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
similarity index 80%
rename from web/src/components/table/model-pricing/layout/PricingSearchBar.jsx
rename to web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
index 8b223252..dbdee4f9 100644
--- a/web/src/components/table/model-pricing/layout/PricingSearchBar.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingTopSection.jsx
@@ -20,9 +20,10 @@ For commercial licensing, please contact support@quantumnous.com
import React, { useMemo, useState } from 'react';
import { Input, Button } from '@douyinfe/semi-ui';
import { IconSearch, IconCopy, IconFilter } from '@douyinfe/semi-icons';
-import PricingFilterModal from '../modal/PricingFilterModal';
+import PricingFilterModal from '../../modal/PricingFilterModal';
+import PricingCategoryIntroWithSkeleton from './PricingCategoryIntroWithSkeleton';
-const PricingSearchBar = ({
+const PricingTopSection = ({
selectedRowKeys,
copyText,
handleChange,
@@ -30,6 +31,11 @@ const PricingSearchBar = ({
handleCompositionEnd,
isMobile,
sidebarProps,
+ activeKey,
+ modelCategories,
+ categoryCounts,
+ availableCategories,
+ loading,
t
}) => {
const [showFilterModal, setShowFilterModal] = useState(false);
@@ -76,6 +82,17 @@ const PricingSearchBar = ({
return (
<>
+ {/* 分类介绍区域（含骨架屏） */}
+
+
+ {/* 搜索和操作区域 */}
{SearchAndActions}
{/* 移动端筛选Modal */}
@@ -91,4 +108,4 @@ const PricingSearchBar = ({
);
};
-export default PricingSearchBar;
\ No newline at end of file
+export default PricingTopSection;
\ No newline at end of file
diff --git a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
index ff8459d4..1b1be43c 100644
--- a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
+++ b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
@@ -51,6 +51,8 @@ const PricingFilterModal = ({
setFilterEndpointType,
currentPage,
setCurrentPage,
+ tokenUnit,
+ setTokenUnit,
loading,
...categoryProps
} = sidebarProps;
@@ -68,6 +70,7 @@ const PricingFilterModal = ({
setFilterQuotaType,
setFilterEndpointType,
setCurrentPage,
+ setTokenUnit,
});
const footer = (
@@ -114,6 +117,8 @@ const PricingFilterModal = ({
setShowRatio={setShowRatio}
viewMode={viewMode}
setViewMode={setViewMode}
+ tokenUnit={tokenUnit}
+ setTokenUnit={setTokenUnit}
loading={loading}
t={t}
/>
diff --git a/web/src/components/table/model-pricing/view/PricingCardView.jsx b/web/src/components/table/model-pricing/view/PricingCardView.jsx
deleted file mode 100644
index 4d7c3d3b..00000000
--- a/web/src/components/table/model-pricing/view/PricingCardView.jsx
+++ /dev/null
@@ -1,444 +0,0 @@
-/*
-Copyright (C) 2025 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see .
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-
-import React, { useState, useRef, useEffect } from 'react';
-import { Card, Tag, Tooltip, Checkbox, Empty, Pagination, Button, Skeleton } from '@douyinfe/semi-ui';
-import { IconHelpCircle, IconCopy } from '@douyinfe/semi-icons';
-import { IllustrationNoResult, IllustrationNoResultDark } from '@douyinfe/semi-illustrations';
-import { stringToColor, getModelCategories, calculateModelPrice, formatPriceInfo } from '../../../../helpers';
-
-const PricingCardView = ({
- filteredModels,
- loading,
- rowSelection,
- pageSize,
- setPageSize,
- currentPage,
- setCurrentPage,
- selectedGroup,
- groupRatio,
- copyText,
- setModalImageUrl,
- setIsModalOpenurl,
- currency,
- tokenUnit,
- setTokenUnit,
- displayPrice,
- showRatio,
- t
-}) => {
- const [showSkeleton, setShowSkeleton] = useState(loading);
- const [skeletonCount] = useState(10);
- const loadingStartRef = useRef(Date.now());
-
- useEffect(() => {
- if (loading) {
- loadingStartRef.current = Date.now();
- setShowSkeleton(true);
- } else {
- const elapsed = Date.now() - loadingStartRef.current;
- const remaining = Math.max(0, 1000 - elapsed);
- if (remaining === 0) {
- setShowSkeleton(false);
- } else {
- const timer = setTimeout(() => setShowSkeleton(false), remaining);
- return () => clearTimeout(timer);
- }
- }
- }, [loading]);
-
- // 计算当前页面要显示的数据
- const startIndex = (currentPage - 1) * pageSize;
- const endIndex = startIndex + pageSize;
- const paginatedModels = filteredModels.slice(startIndex, endIndex);
-
- // 渲染骨架屏卡片
- const renderSkeletonCards = () => {
- const placeholder = (
-
- );
-};
-
-export default PricingCardView;
\ No newline at end of file
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
new file mode 100644
index 00000000..13eb5ecc
--- /dev/null
+++ b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
@@ -0,0 +1,137 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see .
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Card, Skeleton } from '@douyinfe/semi-ui';
+
+const PricingCardSkeleton = ({
+ skeletonCount = 10,
+ rowSelection = false,
+ showRatio = false
+}) => {
+ const placeholder = (
+