♻️ Refactor: Move token unit toggle from table header to filter settings

- Remove K/M switch from model price column header in pricing table - Add "Display in K units" option to pricing display settings panel - Update parameter passing for tokenUnit and setTokenUnit across components: - PricingDisplaySettings: Add tokenUnit toggle functionality - PricingSidebar: Pass tokenUnit props to display settings - PricingFilterModal: Include tokenUnit in mobile filter modal - Enhance resetPricingFilters utility to reset token unit to default 'M' - Clean up PricingTableColumns by removing unused setTokenUnit parameter - Add English translation for "按K显示单位" as "Display in K units" This change improves UX by consolidating all display-related controls in the filter settings panel, making the interface more organized and the token unit setting more discoverable alongside other display options. Affected components: - PricingTableColumns.js - PricingDisplaySettings.jsx - PricingSidebar.jsx - PricingFilterModal.jsx - PricingTable.jsx - utils.js (resetPricingFilters) - en.json (translations)
2025-07-24 17:10:08 +08:00
parent e417c269eb
commit 1880164e29
24 changed files with 963 additions and 559 deletions
--- a/web/src/components/common/ui/CardTable.js
+++ b/web/src/components/common/ui/CardTable.js
@@ -23,6 +23,7 @@ import { Table, Card, Skeleton, Pagination, Empty, Button, Collapsible } from '@
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';

 /**
 * CardTable 响应式表格组件
@@ -40,25 +41,8 @@ const CardTable = ({
 }) => {
  const isMobile = useIsMobile();
  const { t } = useTranslation();
-
-  const [showSkeleton, setShowSkeleton] = useState(loading);
-  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 showSkeleton = useMinimumLoadingTime(loading);

  const getRowKey = (record, index) => {
    if (typeof rowKey === 'function') return rowKey(record);
--- a/web/src/components/common/ui/SelectableButtonGroup.jsx
+++ b/web/src/components/common/ui/SelectableButtonGroup.jsx
@@ -17,8 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
 import { Divider, Button, Tag, Row, Col, Collapsible, Checkbox, Skeleton } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';

@@ -49,32 +50,15 @@ const SelectableButtonGroup = ({
  loading = false
 }) => {
  const [isOpen, setIsOpen] = useState(false);
-  const [showSkeleton, setShowSkeleton] = useState(loading);
  const [skeletonCount] = useState(6);
  const isMobile = useIsMobile();
  const perRow = 3;
  const maxVisibleRows = Math.max(1, Math.floor(collapseHeight / 32)); // Approx row height 32
  const needCollapse = collapsible && items.length > perRow * maxVisibleRows;
-  const loadingStartRef = useRef(Date.now());
+  const showSkeleton = useMinimumLoadingTime(loading);

  const contentRef = useRef(null);

-  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 maskStyle = isOpen
    ? {}
    : {
@@ -110,7 +94,7 @@ const SelectableButtonGroup = ({
          <Col
            {...(isMobile
              ? { span: 12 }
-              : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+              : { span: 8 }
            )}
            key={index}
          >
@@ -158,7 +142,7 @@ const SelectableButtonGroup = ({
            <Col
              {...(isMobile
                ? { span: 12 }
-                : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+                : { span: 8 }
              )}
              key={item.value}
            >
@@ -197,7 +181,7 @@ const SelectableButtonGroup = ({
          <Col
            {...(isMobile
              ? { span: 12 }
-              : { xs: 24, sm: 24, md: 24, lg: 12, xl: 8 }
+              : { span: 8 }
            )}
            key={item.value}
          >
--- a/web/src/components/layout/HeaderBar.js
+++ b/web/src/components/layout/HeaderBar.js
@@ -52,6 +52,7 @@ import {
 import { StatusContext } from '../../context/Status/index.js';
 import { useIsMobile } from '../../hooks/common/useIsMobile.js';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed.js';
+import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime.js';

 const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const { t, i18n } = useTranslation();
@@ -59,7 +60,6 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const [statusState, statusDispatch] = useContext(StatusContext);
  const isMobile = useIsMobile();
  const [collapsed, toggleCollapsed] = useSidebarCollapsed();
-  const [isLoading, setIsLoading] = useState(true);
  const [logoLoaded, setLogoLoaded] = useState(false);
  let navigate = useNavigate();
  const [currentLang, setCurrentLang] = useState(i18n.language);
@@ -67,7 +67,9 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const location = useLocation();
  const [noticeVisible, setNoticeVisible] = useState(false);
  const [unreadCount, setUnreadCount] = useState(0);
-  const loadingStartRef = useRef(Date.now());
+
+  const loading = statusState?.status === undefined;
+  const isLoading = useMinimumLoadingTime(loading);

  const systemName = getSystemName();
  const logo = getLogo();
@@ -128,7 +130,7 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
      to: '/console',
    },
    {
-      text: t('定价'),
+      text: t('模型广场'),
      itemKey: 'pricing',
      to: '/pricing',
    },
@@ -216,17 +218,6 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
    };
  }, [i18n]);

-  useEffect(() => {
-    if (statusState?.status !== undefined) {
-      const elapsed = Date.now() - loadingStartRef.current;
-      const remaining = Math.max(0, 1000 - elapsed);
-      const timer = setTimeout(() => {
-        setIsLoading(false);
-      }, remaining);
-      return () => clearTimeout(timer);
-    }
-  }, [statusState?.status]);
-
  useEffect(() => {
    setLogoLoaded(false);
    if (!logo) return;
--- a/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
+++ b/web/src/components/table/model-pricing/filter/PricingDisplaySettings.jsx
@@ -31,6 +31,8 @@ const PricingDisplaySettings = ({
  setShowRatio,
  viewMode,
  setViewMode,
+  tokenUnit,
+  setTokenUnit,
  loading = false,
  t
 }) => {
@@ -56,6 +58,10 @@ const PricingDisplaySettings = ({
    {
      value: 'tableView',
      label: t('表格视图')
+    },
+    {
+      value: 'tokenUnit',
+      label: t('按K显示单位')
    }
  ];

@@ -75,6 +81,9 @@ const PricingDisplaySettings = ({
      case 'tableView':
        setViewMode(viewMode === 'table' ? 'card' : 'table');
        break;
+      case 'tokenUnit':
+        setTokenUnit(tokenUnit === 'K' ? 'M' : 'K');
+        break;
    }
  };

@@ -83,6 +92,7 @@ const PricingDisplaySettings = ({
    if (showWithRecharge) activeValues.push('recharge');
    if (showRatio) activeValues.push('ratio');
    if (viewMode === 'table') activeValues.push('tableView');
+    if (tokenUnit === 'K') activeValues.push('tokenUnit');
    return activeValues;
  };

--- a/web/src/components/table/model-pricing/layout/PricingPage.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingPage.jsx
@@ -20,7 +20,7 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Layout, ImagePreview } from '@douyinfe/semi-ui';
 import PricingSidebar from './PricingSidebar';
-import PricingContent from './PricingContent';
+import PricingContent from './content/PricingContent';
 import { useModelPricingData } from '../../../../hooks/model-pricing/useModelPricingData';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';

--- a/web/src/components/table/model-pricing/layout/PricingSidebar.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingSidebar.jsx
@@ -45,6 +45,8 @@ const PricingSidebar = ({
  setFilterEndpointType,
  currentPage,
  setCurrentPage,
+  tokenUnit,
+  setTokenUnit,
  loading,
  t,
  ...categoryProps
@@ -63,6 +65,7 @@ const PricingSidebar = ({
      setFilterQuotaType,
      setFilterEndpointType,
      setCurrentPage,
+      setTokenUnit,
    });

  return (
@@ -90,6 +93,8 @@ const PricingSidebar = ({
        setShowRatio={setShowRatio}
        viewMode={viewMode}
        setViewMode={setViewMode}
+        tokenUnit={tokenUnit}
+        setTokenUnit={setTokenUnit}
        loading={loading}
        t={t}
      />
--- a/web/src/components/table/model-pricing/layout/content/PricingContent.jsx
+++ b/web/src/components/table/model-pricing/layout/content/PricingContent.jsx
@@ -18,15 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React from 'react';
-import PricingSearchBar from './PricingSearchBar';
+import PricingTopSection from '../header/PricingTopSection';
 import PricingView from './PricingView';

 const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
  return (
    <div className={isMobile ? "pricing-content-mobile" : "pricing-scroll-hide"}>
-      {/* 固定的搜索和操作区域 */}
+      {/* 固定的顶部区域（分类介绍 + 搜索和操作） */}
      <div className="pricing-search-header">
-        <PricingSearchBar {...props} isMobile={isMobile} sidebarProps={sidebarProps} />
+        <PricingTopSection {...props} isMobile={isMobile} sidebarProps={sidebarProps} />
      </div>

      {/* 可滚动的内容区域 */}
--- a/web/src/components/table/model-pricing/layout/content/PricingView.jsx
+++ b/web/src/components/table/model-pricing/layout/content/PricingView.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React from 'react';
-import PricingTable from '../view/PricingTable';
-import PricingCardView from '../view/PricingCardView';
+import PricingTable from '../../view/table/PricingTable';
+import PricingCardView from '../../view/card/PricingCardView';

 const PricingView = ({
  viewMode = 'table',
--- a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx
@@ -0,0 +1,228 @@
+/*
+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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useState, useEffect } from 'react';
+import { Card, Tag, Avatar, AvatarGroup } from '@douyinfe/semi-ui';
+
+const PricingCategoryIntro = ({
+  activeKey,
+  modelCategories,
+  categoryCounts,
+  availableCategories,
+  t
+}) => {
+  // 轮播动效状态（只对全部模型生效）
+  const [currentOffset, setCurrentOffset] = useState(0);
+
+  // 获取除了 'all' 之外的可用分类
+  const validCategories = (availableCategories || []).filter(key => key !== 'all');
+
+  // 设置轮播定时器（只对全部模型且有足够头像时生效）
+  useEffect(() => {
+    if (activeKey !== 'all' || validCategories.length <= 3) {
+      setCurrentOffset(0); // 重置偏移
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCurrentOffset(prev => (prev + 1) % validCategories.length);
+    }, 2000); // 每2秒切换一次
+
+    return () => clearInterval(interval);
+  }, [activeKey, validCategories.length]);
+
+  // 如果没有有效的分类键或分类数据，不显示
+  if (!activeKey || !modelCategories) {
+    return null;
+  }
+
+  const modelCount = categoryCounts[activeKey] || 0;
+
+  // 获取分类描述信息
+  const getCategoryDescription = (categoryKey) => {
+    const descriptions = {
+      all: t('查看所有可用的AI模型，包括文本生成、图像处理、音频转换等多种类型的模型。'),
+      openai: t('令牌分发介绍：SSVIP 为纯OpenAI官方。SVIP 为纯Azure。Default 为Azure 消费。VIP为近似的复数。VVIP为近似的书发。'),
+      anthropic: t('Anthropic Claude系列模型，以安全性和可靠性著称，擅长对话、分析和创作任务。'),
+      gemini: t('Google Gemini系列模型，具备强大的多模态能力，支持文本、图像和代码理解。'),
+      moonshot: t('月之暗面Moonshot系列模型，专注于长文本处理和深度理解能力。'),
+      zhipu: t('智谱AI ChatGLM系列模型，在中文理解和生成方面表现优秀。'),
+      qwen: t('阿里云通义千问系列模型，覆盖多个领域的智能问答和内容生成。'),
+      deepseek: t('DeepSeek系列模型，在代码生成和数学推理方面具有出色表现。'),
+      minimax: t('MiniMax ABAB系列模型，专注于对话和内容创作的AI助手。'),
+      baidu: t('百度文心一言系列模型，在中文自然语言处理方面具有强大能力。'),
+      xunfei: t('科大讯飞星火系列模型，在语音识别和自然语言理解方面领先。'),
+      midjourney: t('Midjourney图像生成模型，专业的AI艺术创作和图像生成服务。'),
+      tencent: t('腾讯混元系列模型，提供全面的AI能力和企业级服务。'),
+      cohere: t('Cohere Command系列模型，专注于企业级自然语言处理应用。'),
+      cloudflare: t('Cloudflare Workers AI模型，提供边缘计算和高性能AI服务。'),
+      ai360: t('360智脑系列模型，在安全和智能助手方面具有独特优势。'),
+      yi: t('零一万物Yi系列模型，提供高质量的多语言理解和生成能力。'),
+      jina: t('Jina AI模型，专注于嵌入和向量搜索的AI解决方案。'),
+      mistral: t('Mistral AI系列模型，欧洲领先的开源大语言模型。'),
+      xai: t('xAI Grok系列模型，具有独特的幽默感和实时信息处理能力。'),
+      llama: t('Meta Llama系列模型，开源的大语言模型，在各种任务中表现优秀。'),
+      doubao: t('字节跳动豆包系列模型，在内容创作和智能对话方面表现出色。'),
+    };
+    return descriptions[categoryKey] || t('该分类包含多种AI模型，适用于不同的应用场景。');
+  };
+
+  // 为全部模型创建特殊的头像组合
+  const renderAllModelsAvatar = () => {
+    // 重新排列数组，让当前偏移量的头像在第一位
+    const rotatedCategories = validCategories.length > 3 ? [
+      ...validCategories.slice(currentOffset),
+      ...validCategories.slice(0, currentOffset)
+    ] : validCategories;
+
+    // 如果没有有效分类，使用模型分类名称的前两个字符
+    if (validCategories.length === 0) {
+      // 获取所有分类（除了 'all'）的名称前两个字符
+      const fallbackCategories = Object.entries(modelCategories)
+        .filter(([key]) => key !== 'all')
+        .slice(0, 3)
+        .map(([key, category]) => ({
+          key,
+          label: category.label,
+          text: category.label.slice(0, 2) || key.slice(0, 2).toUpperCase()
+        }));
+
+      return (
+        <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+          <AvatarGroup size="default" overlapFrom='end'>
+            {fallbackCategories.map((item) => (
+              <Avatar
+                key={item.key}
+                size="default"
+                color="transparent"
+                alt={item.label}
+              >
+                {item.text}
+              </Avatar>
+            ))}
+          </AvatarGroup>
+        </div>
+      );
+    }
+
+    return (
+      <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+        <AvatarGroup
+          maxCount={4}
+          size="default"
+          overlapFrom='end'
+          key={currentOffset}
+          renderMore={(restNumber) => (
+            <Avatar
+              size="default"
+              style={{ backgroundColor: 'transparent', color: 'var(--semi-color-text-0)' }}
+              alt={`${restNumber} more categories`}
+            >
+              {`+${restNumber}`}
+            </Avatar>
+          )}
+        >
+          {rotatedCategories.map((categoryKey) => {
+            const category = modelCategories[categoryKey];
+
+            return (
+              <Avatar
+                key={categoryKey}
+                size="default"
+                color="transparent"
+                alt={category?.label || categoryKey}
+              >
+                {category?.icon ?
+                  React.cloneElement(category.icon, { size: 20 }) :
+                  (category?.label?.charAt(0) || categoryKey.charAt(0).toUpperCase())
+                }
+              </Avatar>
+            );
+          })}
+        </AvatarGroup>
+      </div>
+    );
+  };
+
+  // 为具体分类渲染单个图标
+  const renderCategoryAvatar = (category) => (
+    <div className="w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center">
+      {category.icon && React.cloneElement(category.icon, { size: 40 })}
+    </div>
+  );
+
+  // 如果是全部模型分类
+  if (activeKey === 'all') {
+    return (
+      <div className='mb-4'>
+        <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
+          <div className="flex items-start space-x-4">
+            {/* 全部模型的头像组合 */}
+            {renderAllModelsAvatar()}
+
+            {/* 分类信息 */}
+            <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">
+                  {t('共 {{count}} 个模型', { count: modelCount })}
+                </Tag>
+              </div>
+              <p className="text-sm text-gray-600 leading-relaxed">
+                {getCategoryDescription(activeKey)}
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // 具体分类
+  const currentCategory = modelCategories[activeKey];
+  if (!currentCategory) {
+    return null;
+  }
+
+  return (
+    <div className='mb-4'>
+      <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
+        <div className="flex items-start space-x-4">
+          {/* 分类图标 */}
+          {renderCategoryAvatar(currentCategory)}
+
+          {/* 分类信息 */}
+          <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">
+                {t('共 {{count}} 个模型', { count: modelCount })}
+              </Tag>
+            </div>
+            <p className="text-sm text-gray-600 leading-relaxed">
+              {getCategoryDescription(activeKey)}
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default PricingCategoryIntro; 
--- a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroSkeleton.jsx
+++ 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 <https://www.gnu.org/licenses/>.
+
+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 = (
+    <div className='mb-4'>
+      <Card className="!rounded-2xl" bodyStyle={{ padding: '24px' }}>
+        <div className="flex items-start space-x-4">
+          {/* 分类图标骨架 */}
+          <div className="min-w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center px-2">
+            {isAllModels ? (
+              <div className="flex items-center">
+                {Array.from({ length: 5 }).map((_, index) => (
+                  <Skeleton.Avatar
+                    key={index}
+                    active
+                    size="default"
+                    style={{
+                      width: 40,
+                      height: 40,
+                      marginRight: index < 4 ? -10 : 0,
+                    }}
+                  />
+                ))}
+              </div>
+            ) : (
+              <Skeleton.Avatar active size="large" style={{ width: 40, height: 40, borderRadius: 8 }} />
+            )}
+          </div>
+
+          {/* 分类信息骨架 */}
+          <div className="flex-1">
+            <div className="flex items-center space-x-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>
+            <Skeleton.Paragraph
+              active
+              rows={2}
+              style={{ marginBottom: 0 }}
+              title={false}
+            />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+
+  return (
+    <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
+  );
+};
+
+export default PricingCategoryIntroSkeleton; 
--- a/web/src/components/table/model-pricing/layout/header/PricingCategoryIntroWithSkeleton.jsx
+++ 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 <https://www.gnu.org/licenses/>.
+
+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 (
+      <PricingCategoryIntroSkeleton
+        isAllModels={activeKey === 'all'}
+      />
+    );
+  }
+
+  return (
+    <PricingCategoryIntro
+      activeKey={activeKey}
+      modelCategories={modelCategories}
+      categoryCounts={categoryCounts}
+      availableCategories={availableCategories}
+      t={t}
+    />
+  );
+};
+
+export default PricingCategoryIntroWithSkeleton; 
--- a/web/src/components/table/model-pricing/layout/header/PricingTopSection.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 (
    <>
+      {/* 分类介绍区域（含骨架屏） */}
+      <PricingCategoryIntroWithSkeleton
+        loading={loading}
+        activeKey={activeKey}
+        modelCategories={modelCategories}
+        categoryCounts={categoryCounts}
+        availableCategories={availableCategories}
+        t={t}
+      />
+
+      {/* 搜索和操作区域 */}
      {SearchAndActions}

      {/* 移动端筛选Modal */}
@@ -91,4 +108,4 @@ const PricingSearchBar = ({
  );
 };

-export default PricingSearchBar; 
+export default PricingTopSection; 
--- 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}
        />
--- a/web/src/components/table/model-pricing/view/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/PricingCardView.jsx
@@ -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 <https://www.gnu.org/licenses/>.
-
-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 = (
-      <div className="p-4">
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {Array.from({ length: skeletonCount }).map((_, index) => (
-            <Card
-              key={index}
-              className="!rounded-2xl border border-gray-200"
-              bodyStyle={{ padding: '24px' }}
-            >
-              {/* 头部：图标 + 模型名称 + 操作按钮 */}
-              <div className="flex items-start justify-between mb-3">
-                <div className="flex items-center space-x-3 flex-1 min-w-0">
-                  {/* 模型图标骨架 */}
-                  <div className="w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm">
-                    <Skeleton.Avatar
-                      size="large"
-                      style={{ width: 48, height: 48, borderRadius: 16 }}
-                    />
-                  </div>
-                  {/* 模型名称骨架 */}
-                  <div className="flex-1 min-w-0">
-                    <Skeleton.Title
-                      style={{
-                        width: `${120 + (index % 3) * 30}px`,
-                        height: 20,
-                        marginBottom: 0
-                      }}
-                    />
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2 ml-3">
-                  {/* 操作按钮骨架 */}
-                  <Skeleton.Button size="small" style={{ width: 16, height: 16 }} />
-                  {rowSelection && (
-                    <Skeleton.Button size="small" style={{ width: 16, height: 16 }} />
-                  )}
-                </div>
-              </div>
-
-              {/* 价格信息骨架 */}
-              <div className="mb-3">
-                <Skeleton.Title
-                  style={{
-                    width: `${180 + (index % 4) * 20}px`,
-                    height: 16,
-                    marginBottom: 0
-                  }}
-                />
-              </div>
-
-              {/* 模型描述骨架 */}
-              <div className="mb-4">
-                <Skeleton.Paragraph
-                  rows={2}
-                  style={{ marginBottom: 0 }}
-                  title={false}
-                />
-              </div>
-
-              {/* 标签区域骨架 */}
-              <div className="flex flex-wrap gap-2 mb-4">
-                {Array.from({ length: 3 + (index % 2) }).map((_, tagIndex) => (
-                  <Skeleton.Button
-                    key={tagIndex}
-                    size="small"
-                    style={{
-                      width: `${40 + (tagIndex % 3) * 15}px`,
-                      height: 24,
-                      borderRadius: 12
-                    }}
-                  />
-                ))}
-              </div>
-
-              {/* 倍率信息骨架（可选） */}
-              {showRatio && (
-                <div className="mt-4 pt-3 border-t border-gray-100">
-                  <div className="flex items-center space-x-1 mb-2">
-                    <Skeleton.Title
-                      style={{ width: 60, height: 12, marginBottom: 0 }}
-                    />
-                    <Skeleton.Button size="small" style={{ width: 14, height: 14 }} />
-                  </div>
-                  <div className="grid grid-cols-3 gap-2">
-                    {Array.from({ length: 3 }).map((_, ratioIndex) => (
-                      <Skeleton.Title
-                        key={ratioIndex}
-                        style={{ width: '100%', height: 12, marginBottom: 0 }}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )}
-            </Card>
-          ))}
-        </div>
-
-        {/* 分页骨架 */}
-        <div className="flex justify-center mt-6 pt-4 border-t pricing-pagination-divider">
-          <Skeleton.Button style={{ width: 300, height: 32 }} />
-        </div>
-      </div>
-    );
-
-    return (
-      <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
-    );
-  };
-
-  // 获取模型图标
-  const getModelIcon = (modelName) => {
-    const categories = getModelCategories(t);
-    let icon = null;
-
-    // 遍历分类，找到匹配的模型图标
-    for (const [key, category] of Object.entries(categories)) {
-      if (key !== 'all' && category.filter({ model_name: modelName })) {
-        icon = category.icon;
-        break;
-      }
-    }
-
-    // 如果找到了匹配的图标，返回包装后的图标
-    if (icon) {
-      return (
-        <div className="w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm">
-          <div className="w-8 h-8 flex items-center justify-center">
-            {React.cloneElement(icon, { size: 32 })}
-          </div>
-        </div>
-      );
-    }
-
-    // 默认图标（如果没有匹配到任何分类）
-    return (
-      <div className="w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm">
-        {/* 默认的螺旋图案 */}
-        <svg width="24" height="24" viewBox="0 0 24 24" className="text-gray-600">
-          <path
-            d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C7.6 4 4 7.6 4 12S7.6 20 12 20 20 16.4 20 12 16.4 4 12 4M12 6C15.3 6 18 8.7 18 12S15.3 18 12 18 6 15.3 6 12 8.7 6 12 6M12 8C10.9 8 10 8.9 10 10S10.9 12 12 12 14 11.1 14 10 13.1 8 12 8Z"
-            fill="currentColor"
-            opacity="0.6"
-          />
-        </svg>
-      </div>
-    );
-  };
-
-  // 获取模型描述
-  const getModelDescription = (modelName) => {
-    // 根据模型名称返回描述，这里可以扩展
-    if (modelName.includes('gpt-3.5-turbo')) {
-      return t('该模型目前指向gpt-35-turbo-0125模型，综合能力强，过去使用最广泛的文本模型。');
-    }
-    if (modelName.includes('gpt-4')) {
-      return t('更强大的GPT-4模型，具有更好的推理能力和更准确的输出。');
-    }
-    if (modelName.includes('claude')) {
-      return t('Anthropic开发的Claude模型，以安全性和有用性著称。');
-    }
-    return t('高性能AI模型，适用于各种文本生成和理解任务。');
-  };
-
-  // 渲染价格信息
-  const renderPriceInfo = (record) => {
-    const priceData = calculateModelPrice({
-      record,
-      selectedGroup,
-      groupRatio,
-      tokenUnit,
-      displayPrice,
-      currency,
-      precision: 4
-    });
-    return formatPriceInfo(priceData, t);
-  };
-
-  // 渲染标签
-  const renderTags = (record) => {
-    const tags = [];
-
-    // 计费类型标签
-    if (record.quota_type === 1) {
-      tags.push(
-        <Tag shape='circle' key="billing" color='teal' size='small'>
-          {t('按次计费')}
-        </Tag>
-      );
-    } else {
-      tags.push(
-        <Tag shape='circle' key="billing" color='violet' size='small'>
-          {t('按量计费')}
-        </Tag>
-      );
-    }
-
-    // 热度标签（示例）
-    if (record.model_name.includes('gpt-3.5-turbo') || record.model_name.includes('gpt-4')) {
-      tags.push(
-        <Tag shape='circle' key="hot" color='red' size='small'>
-          {t('热')}
-        </Tag>
-      );
-    }
-
-    // 端点类型标签
-    if (record.supported_endpoint_types && record.supported_endpoint_types.length > 0) {
-      record.supported_endpoint_types.slice(0, 2).forEach((endpoint, index) => {
-        tags.push(
-          <Tag shape='circle' key={`endpoint-${index}`} color={stringToColor(endpoint)} size='small'>
-            {endpoint}
-          </Tag>
-        );
-      });
-    }
-
-    // 上下文长度标签（示例）
-    if (record.model_name.includes('16k')) {
-      tags.push(<Tag shape='circle' key="context" color='blue' size='small'>16K</Tag>);
-    } else if (record.model_name.includes('32k')) {
-      tags.push(<Tag shape='circle' key="context" color='blue' size='small'>32K</Tag>);
-    } else {
-      tags.push(<Tag shape='circle' key="context" color='blue' size='small'>4K</Tag>);
-    }
-
-    return tags;
-  };
-
-  // 显示骨架屏
-  if (showSkeleton) {
-    return renderSkeletonCards();
-  }
-
-  if (!filteredModels || filteredModels.length === 0) {
-    return (
-      <div className="flex justify-center items-center py-20">
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
-          description={t('搜索无结果')}
-        />
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-        {paginatedModels.map((model, index) => {
-          const isSelected = rowSelection?.selectedRowKeys?.includes(model.id);
-
-          return (
-            <Card
-              key={model.id || index}
-              className={`!rounded-2xl transition-all duration-200 hover:shadow-lg border ${isSelected
-                ? 'border-blue-500 bg-blue-50'
-                : 'border-gray-200 hover:border-gray-300'
-                }`}
-              bodyStyle={{ padding: '24px' }}
-            >
-              {/* 头部：图标 + 模型名称 + 操作按钮 */}
-              <div className="flex items-start justify-between mb-3">
-                <div className="flex items-center space-x-3 flex-1 min-w-0">
-                  {getModelIcon(model.model_name)}
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-xl font-bold text-gray-900 truncate">
-                      {model.model_name}
-                    </h3>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2 ml-3">
-                  {/* 复制按钮 */}
-                  <Button
-                    size="small"
-                    type="tertiary"
-                    icon={<IconCopy />}
-                    onClick={() => copyText(model.model_name)}
-                  />
-
-                  {/* 选择框 */}
-                  {rowSelection && (
-                    <Checkbox
-                      checked={isSelected}
-                      onChange={(checked) => {
-                        if (checked) {
-                          rowSelection.onSelect(model, true);
-                        } else {
-                          rowSelection.onSelect(model, false);
-                        }
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-
-              {/* 价格信息 */}
-              <div className="mb-3">
-                <div className="text-gray-700 text-base font-medium">
-                  {renderPriceInfo(model)}
-                </div>
-              </div>
-
-              {/* 模型描述 */}
-              <div className="mb-4">
-                <p className="text-gray-500 text-sm leading-relaxed">
-                  {getModelDescription(model.model_name)}
-                </p>
-              </div>
-
-              {/* 标签区域 */}
-              <div className="flex flex-wrap gap-2">
-                {renderTags(model)}
-              </div>
-
-              {/* 倍率信息（可选） */}
-              {showRatio && (
-                <div className="mt-4 pt-3 border-t border-gray-100">
-                  <div className="flex items-center space-x-1 mb-2">
-                    <span className="text-xs font-medium text-gray-700">{t('倍率信息')}</span>
-                    <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
-                      <IconHelpCircle
-                        className="text-blue-500 cursor-pointer"
-                        size="small"
-                        onClick={() => {
-                          setModalImageUrl('/ratio.png');
-                          setIsModalOpenurl(true);
-                        }}
-                      />
-                    </Tooltip>
-                  </div>
-                  <div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
-                    <div>
-                      {t('模型')}: {model.quota_type === 0 ? model.model_ratio : t('无')}
-                    </div>
-                    <div>
-                      {t('补全')}: {model.quota_type === 0 ? parseFloat(model.completion_ratio.toFixed(3)) : t('无')}
-                    </div>
-                    <div>
-                      {t('分组')}: {groupRatio[selectedGroup]}
-                    </div>
-                  </div>
-                </div>
-              )}
-            </Card>
-          );
-        })}
-      </div>
-
-      {/* 分页 */}
-      {filteredModels.length > 0 && (
-        <div className="flex justify-center mt-6 pt-4 border-t pricing-pagination-divider">
-          <Pagination
-            currentPage={currentPage}
-            pageSize={pageSize}
-            total={filteredModels.length}
-            showSizeChanger={true}
-            pageSizeOptions={[10, 20, 50, 100]}
-            onPageChange={(page) => setCurrentPage(page)}
-            onPageSizeChange={(size) => {
-              setPageSize(size);
-              setCurrentPage(1);
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default PricingCardView; 
--- a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
+++ 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 <https://www.gnu.org/licenses/>.
+
+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 = (
+    <div className="p-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: skeletonCount }).map((_, index) => (
+          <Card
+            key={index}
+            className="!rounded-2xl border border-gray-200"
+            bodyStyle={{ padding: '24px' }}
+          >
+            {/* 头部：图标 + 模型名称 + 操作按钮 */}
+            <div className="flex items-start justify-between mb-3">
+              <div className="flex items-start space-x-3 flex-1 min-w-0">
+                {/* 模型图标骨架 */}
+                <div className="w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm">
+                  <Skeleton.Avatar
+                    size="large"
+                    style={{ width: 48, height: 48, borderRadius: 16 }}
+                  />
+                </div>
+                {/* 模型名称和价格区域 */}
+                <div className="flex-1 min-w-0">
+                  {/* 模型名称骨架 */}
+                  <Skeleton.Title
+                    style={{
+                      width: `${120 + (index % 3) * 30}px`,
+                      height: 20,
+                      marginBottom: 8
+                    }}
+                  />
+                  {/* 价格信息骨架 */}
+                  <Skeleton.Title
+                    style={{
+                      width: `${160 + (index % 4) * 20}px`,
+                      height: 20,
+                      marginBottom: 0
+                    }}
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-2 ml-3">
+                {/* 复制按钮骨架 */}
+                <Skeleton.Button size="small" style={{ width: 16, height: 16, borderRadius: 4 }} />
+                {/* 勾选框骨架 */}
+                {rowSelection && (
+                  <Skeleton.Button size="small" style={{ width: 16, height: 16, borderRadius: 2 }} />
+                )}
+              </div>
+            </div>
+
+            {/* 模型描述骨架 */}
+            <div className="mb-4">
+              <Skeleton.Paragraph
+                rows={2}
+                style={{ marginBottom: 0 }}
+                title={false}
+              />
+            </div>
+
+            {/* 标签区域骨架 */}
+            <div className="flex flex-wrap gap-2">
+              {Array.from({ length: 2 + (index % 3) }).map((_, tagIndex) => (
+                <Skeleton.Button
+                  key={tagIndex}
+                  size="small"
+                  style={{
+                    width: 64,
+                    height: 20,
+                    borderRadius: 10
+                  }}
+                />
+              ))}
+            </div>
+
+            {/* 倍率信息骨架（可选） */}
+            {showRatio && (
+              <div className="mt-4 pt-3 border-t border-gray-100">
+                <div className="flex items-center space-x-1 mb-2">
+                  <Skeleton.Title
+                    style={{ width: 60, height: 12, marginBottom: 0 }}
+                  />
+                  <Skeleton.Button size="small" style={{ width: 14, height: 14, borderRadius: 7 }} />
+                </div>
+                <div className="grid grid-cols-3 gap-2">
+                  {Array.from({ length: 3 }).map((_, ratioIndex) => (
+                    <Skeleton.Title
+                      key={ratioIndex}
+                      style={{ width: '100%', height: 12, marginBottom: 0 }}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </Card>
+        ))}
+      </div>
+
+      {/* 分页骨架 */}
+      <div className="flex justify-center mt-6 pt-4 border-t pricing-pagination-divider">
+        <Skeleton.Button style={{ width: 300, height: 32 }} />
+      </div>
+    </div>
+  );
+
+  return (
+    <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
+  );
+};
+
+export default PricingCardSkeleton; 
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -0,0 +1,321 @@
+/*
+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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Card, Tag, Tooltip, Checkbox, Empty, Pagination, Button, Avatar } 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';
+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",
+  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"
+};
+
+const PricingCardView = ({
+  filteredModels,
+  loading,
+  rowSelection,
+  pageSize,
+  setPageSize,
+  currentPage,
+  setCurrentPage,
+  selectedGroup,
+  groupRatio,
+  copyText,
+  setModalImageUrl,
+  setIsModalOpenurl,
+  currency,
+  tokenUnit,
+  displayPrice,
+  showRatio,
+  t,
+  selectedRowKeys = [],
+  setSelectedRowKeys,
+  activeKey,
+  availableCategories,
+}) => {
+  const showSkeleton = useMinimumLoadingTime(loading);
+
+  const startIndex = (currentPage - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  const paginatedModels = filteredModels.slice(startIndex, endIndex);
+
+  const getModelKey = (model) => model.key ?? model.model_name ?? model.id;
+
+  const handleCheckboxChange = (model, checked) => {
+    if (!setSelectedRowKeys) return;
+    const modelKey = getModelKey(model);
+    const newKeys = checked
+      ? Array.from(new Set([...selectedRowKeys, modelKey]))
+      : selectedRowKeys.filter((key) => key !== modelKey);
+    setSelectedRowKeys(newKeys);
+    rowSelection?.onChange?.(newKeys, null);
+  };
+
+  // 获取模型图标
+  const getModelIcon = (modelName) => {
+    const categories = getModelCategories(t);
+    let icon = null;
+
+    // 遍历分类，找到匹配的模型图标
+    for (const [key, category] of Object.entries(categories)) {
+      if (key !== 'all' && category.filter({ model_name: modelName })) {
+        icon = category.icon;
+        break;
+      }
+    }
+
+    // 如果找到了匹配的图标，返回包装后的图标
+    if (icon) {
+      return (
+        <div className={CARD_STYLES.container}>
+          <div className={CARD_STYLES.icon}>
+            {React.cloneElement(icon, { size: 32 })}
+          </div>
+        </div>
+      );
+    }
+
+    const avatarText = modelName.slice(0, 2).toUpperCase();
+    return (
+      <div className={CARD_STYLES.container}>
+        <Avatar
+          size="large"
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: 16,
+            fontSize: 16,
+            fontWeight: 'bold'
+          }}
+        >
+          {avatarText}
+        </Avatar>
+      </div>
+    );
+  };
+
+  // 获取模型描述
+  const getModelDescription = (modelName) => {
+    return t('高性能AI模型，适用于各种文本生成和理解任务。');
+  };
+
+  // 渲染价格信息
+  const renderPriceInfo = (record) => {
+    const priceData = calculateModelPrice({
+      record,
+      selectedGroup,
+      groupRatio,
+      tokenUnit,
+      displayPrice,
+      currency
+    });
+    return formatPriceInfo(priceData, t);
+  };
+
+  // 渲染标签
+  const renderTags = (record) => {
+    const tags = [];
+
+    // 计费类型标签
+    const billingType = record.quota_type === 1 ? 'teal' : 'violet';
+    const billingText = record.quota_type === 1 ? t('按次计费') : t('按量计费');
+    tags.push(
+      <Tag shape='circle' key="billing" color={billingType} size='small'>
+        {billingText}
+      </Tag>
+    );
+
+    // 热门模型标签
+    if (record.model_name.includes('gpt')) {
+      tags.push(
+        <Tag shape='circle' key="hot" color='red' size='small'>
+          {t('热')}
+        </Tag>
+      );
+    }
+
+    // 端点类型标签
+    if (record.supported_endpoint_types?.length > 0) {
+      record.supported_endpoint_types.slice(0, 2).forEach((endpoint, index) => {
+        tags.push(
+          <Tag shape='circle' key={`endpoint-${index}`} color={stringToColor(endpoint)} size='small'>
+            {endpoint}
+          </Tag>
+        );
+      });
+    }
+
+    // 上下文长度标签
+    const contextMatch = record.model_name.match(/(\d+)k/i);
+    const contextSize = contextMatch ? contextMatch[1] + 'K' : '4K';
+    tags.push(
+      <Tag shape='circle' key="context" color='blue' size='small'>
+        {contextSize}
+      </Tag>
+    );
+
+    return tags;
+  };
+
+  // 显示骨架屏
+  if (showSkeleton) {
+    return (
+      <PricingCardSkeleton
+        rowSelection={!!rowSelection}
+        showRatio={showRatio}
+      />
+    );
+  }
+
+  if (!filteredModels || filteredModels.length === 0) {
+    return (
+      <div className="flex justify-center items-center py-20">
+        <Empty
+          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
+          darkModeImage={<IllustrationNoResultDark style={{ width: 150, height: 150 }} />}
+          description={t('搜索无结果')}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {paginatedModels.map((model, index) => {
+          const modelKey = getModelKey(model);
+          const isSelected = selectedRowKeys.includes(modelKey);
+
+          return (
+            <Card
+              key={modelKey || index}
+              className={`!rounded-2xl transition-all duration-200 hover:shadow-lg border ${isSelected ? CARD_STYLES.selected : CARD_STYLES.default
+                }`}
+              bodyStyle={{ padding: '24px' }}
+            >
+              {/* 头部：图标 + 模型名称 + 操作按钮 */}
+              <div className="flex items-start justify-between mb-3">
+                <div className="flex items-start space-x-3 flex-1 min-w-0">
+                  {getModelIcon(model.model_name)}
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-lg font-bold text-gray-900 truncate">
+                      {model.model_name}
+                    </h3>
+                    <div className="flex items-center gap-3 text-xs mt-1">
+                      {renderPriceInfo(model)}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center space-x-2 ml-3">
+                  {/* 复制按钮 */}
+                  <Button
+                    size="small"
+                    type="tertiary"
+                    icon={<IconCopy />}
+                    onClick={() => copyText(model.model_name)}
+                  />
+
+                  {/* 选择框 */}
+                  {rowSelection && (
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={(e) => handleCheckboxChange(model, e.target.checked)}
+                    />
+                  )}
+                </div>
+              </div>
+
+              {/* 模型描述 */}
+              <div className="mb-4">
+                <p
+                  className="text-xs line-clamp-2 leading-relaxed"
+                  style={{ color: 'var(--semi-color-text-2)' }}
+                >
+                  {getModelDescription(model.model_name)}
+                </p>
+              </div>
+
+              {/* 标签区域 */}
+              <div className="flex flex-wrap gap-2">
+                {renderTags(model)}
+              </div>
+
+              {/* 倍率信息（可选） */}
+              {showRatio && (
+                <div className="mt-4 pt-3 border-t border-gray-100">
+                  <div className="flex items-center space-x-1 mb-2">
+                    <span className="text-xs font-medium text-gray-700">{t('倍率信息')}</span>
+                    <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
+                      <IconHelpCircle
+                        className="text-blue-500 cursor-pointer"
+                        size="small"
+                        onClick={() => {
+                          setModalImageUrl('/ratio.png');
+                          setIsModalOpenurl(true);
+                        }}
+                      />
+                    </Tooltip>
+                  </div>
+                  <div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
+                    <div>
+                      {t('模型')}: {model.quota_type === 0 ? model.model_ratio : t('无')}
+                    </div>
+                    <div>
+                      {t('补全')}: {model.quota_type === 0 ? parseFloat(model.completion_ratio.toFixed(3)) : t('无')}
+                    </div>
+                    <div>
+                      {t('分组')}: {groupRatio[selectedGroup]}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* 分页 */}
+      {filteredModels.length > 0 && (
+        <div className="flex justify-center mt-6 pt-4 border-t pricing-pagination-divider">
+          <Pagination
+            currentPage={currentPage}
+            pageSize={pageSize}
+            total={filteredModels.length}
+            showSizeChanger={true}
+            pageSizeOptions={[10, 20, 50, 100]}
+            onPageChange={(page) => setCurrentPage(page)}
+            onPageSizeChange={(size) => {
+              setPageSize(size);
+              setCurrentPage(1);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PricingCardView; 
--- a/web/src/components/table/model-pricing/view/table/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
@@ -56,7 +56,6 @@ const PricingTable = ({
      setIsModalOpenurl,
      currency,
      tokenUnit,
-      setTokenUnit,
      displayPrice,
      showRatio,
    });
@@ -69,7 +68,6 @@ const PricingTable = ({
    setIsModalOpenurl,
    currency,
    tokenUnit,
-    setTokenUnit,
    displayPrice,
    showRatio,
  ]);
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
@@ -18,9 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React from 'react';
-import { Tag, Space, Tooltip, Switch } from '@douyinfe/semi-ui';
+import { Tag, Space, Tooltip } from '@douyinfe/semi-ui';
 import { IconHelpCircle } from '@douyinfe/semi-icons';
-import { renderModelTag, stringToColor, calculateModelPrice } from '../../../../helpers';
+import { renderModelTag, stringToColor, calculateModelPrice } from '../../../../../helpers';

 function renderQuotaType(type, t) {
  switch (type) {
@@ -69,7 +69,6 @@ export const getPricingTableColumns = ({
  setIsModalOpenurl,
  currency,
  tokenUnit,
-  setTokenUnit,
  displayPrice,
  showRatio,
 }) => {
@@ -144,18 +143,7 @@ export const getPricingTableColumns = ({
  };

  const priceColumn = {
-    title: (
-      <div className="flex items-center space-x-2">
-        <span>{t('模型价格')}</span>
-        {/* 计费单位切换 */}
-        <Switch
-          checked={tokenUnit === 'K'}
-          onChange={(checked) => setTokenUnit(checked ? 'K' : 'M')}
-          checkedText="K"
-          uncheckedText="M"
-        />
-      </div>
-    ),
+    title: t('模型价格'),
    dataIndex: 'model_price',
    render: (text, record, index) => {
      const priceData = calculateModelPrice({
--- a/web/src/components/table/usage-logs/UsageLogsActions.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsActions.jsx
@@ -17,10 +17,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { Tag, Space, Skeleton } from '@douyinfe/semi-ui';
 import { renderQuota } from '../../../helpers';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
+import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';

 const LogsActions = ({
  stat,
@@ -30,27 +31,9 @@ const LogsActions = ({
  setCompactMode,
  t,
 }) => {
-  const [showSkeleton, setShowSkeleton] = useState(loadingStat);
+  const showSkeleton = useMinimumLoadingTime(loadingStat);
  const needSkeleton = !showStat || showSkeleton;
-  const loadingStartRef = useRef(Date.now());

-  useEffect(() => {
-    if (loadingStat) {
-      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);
-      }
-    }
-  }, [loadingStat]);
-
-  // Skeleton placeholder layout (three tag-size blocks)
  const placeholder = (
    <Space>
      <Skeleton.Title style={{ width: 108, height: 21, borderRadius: 6 }} />
--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -612,12 +612,25 @@ export const calculateModelPrice = ({
  }
 };

-// 格式化价格信息为字符串（用于卡片视图）
+// 格式化价格信息（用于卡片视图）
 export const formatPriceInfo = (priceData, t) => {
  if (priceData.isPerToken) {
-    return `${t('输入')} ${priceData.inputPrice}/${priceData.unitLabel} ${t('输出')} ${priceData.completionPrice}/${priceData.unitLabel}`;
+    return (
+      <>
+        <span style={{ color: 'var(--semi-color-text-1)' }}>
+          {t('提示')} {priceData.inputPrice}/{priceData.unitLabel}
+        </span>
+        <span style={{ color: 'var(--semi-color-text-1)' }}>
+          {t('补全')} {priceData.completionPrice}/{priceData.unitLabel}
+        </span>
+      </>
+    );
  } else {
-    return `${t('模型价格')} ${priceData.price}`;
+    return (
+      <span style={{ color: 'var(--semi-color-text-1)' }}>
+        {t('模型价格')} {priceData.price}
+      </span>
+    );
  }
 };

@@ -684,6 +697,7 @@ export const resetPricingFilters = ({
  setFilterQuotaType,
  setFilterEndpointType,
  setCurrentPage,
+  setTokenUnit,
 }) => {
  // 重置搜索
  if (typeof handleChange === 'function') {
@@ -719,6 +733,11 @@ export const resetPricingFilters = ({
    setViewMode('card');
  }

+  // 重置token单位
+  if (typeof setTokenUnit === 'function') {
+    setTokenUnit('M');
+  }
+
  // 重置分组筛选
  if (typeof setFilterGroup === 'function') {
    setFilterGroup('all');
--- a/web/src/hooks/common/useMinimumLoadingTime.js
+++ b/web/src/hooks/common/useMinimumLoadingTime.js
@@ -0,0 +1,50 @@
+/*
+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 <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * 自定义 Hook：确保骨架屏至少显示指定的时间
+ * @param {boolean} loading - 实际的加载状态
+ * @param {number} minimumTime - 最小显示时间（毫秒），默认 1000ms
+ * @returns {boolean} showSkeleton - 是否显示骨架屏的状态
+ */
+export const useMinimumLoadingTime = (loading, minimumTime = 1000) => {
+  const [showSkeleton, setShowSkeleton] = useState(loading);
+  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, minimumTime - elapsed);
+
+      if (remaining === 0) {
+        setShowSkeleton(false);
+      } else {
+        const timer = setTimeout(() => setShowSkeleton(false), remaining);
+        return () => clearTimeout(timer);
+      }
+    }
+  }, [loading, minimumTime]);
+
+  return showSkeleton;
+}; 
--- a/web/src/hooks/dashboard/useDashboardData.js
+++ b/web/src/hooks/dashboard/useDashboardData.js
@@ -24,6 +24,7 @@ import { API, isAdmin, showError, timestamp2string } from '../../helpers';
 import { getDefaultTime, getInitialTimestamp } from '../../helpers/dashboard';
 import { TIME_OPTIONS } from '../../constants/dashboard.constants';
 import { useIsMobile } from '../common/useIsMobile';
+import { useMinimumLoadingTime } from '../common/useMinimumLoadingTime';

 export const useDashboardData = (userState, userDispatch, statusState) => {
  const { t } = useTranslation();
@@ -35,6 +36,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
  const [loading, setLoading] = useState(false);
  const [greetingVisible, setGreetingVisible] = useState(false);
  const [searchModalVisible, setSearchModalVisible] = useState(false);
+  const showLoading = useMinimumLoadingTime(loading);

  // ========== 输入状态 ==========
  const [inputs, setInputs] = useState({
@@ -145,7 +147,6 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
  // ========== API 调用函数 ==========
  const loadQuotaData = useCallback(async () => {
    setLoading(true);
-    const startTime = Date.now();
    try {
      let url = '';
      const { start_timestamp, end_timestamp, username } = inputs;
@@ -177,11 +178,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
        return [];
      }
    } finally {
-      const elapsed = Date.now() - startTime;
-      const remainingTime = Math.max(0, 1000 - elapsed);
-      setTimeout(() => {
-        setLoading(false);
-      }, remainingTime);
+      setLoading(false);
    }
  }, [inputs, dataExportDefaultTime, isAdminUser, now]);

@@ -246,7 +243,7 @@ export const useDashboardData = (userState, userDispatch, statusState) => {

  return {
    // 基础状态
-    loading,
+    loading: showLoading,
    greetingVisible,
    searchModalVisible,

--- a/web/src/hooks/model-pricing/useModelPricingData.js
+++ b/web/src/hooks/model-pricing/useModelPricingData.js
@@ -115,11 +115,12 @@ export const useModelPricingData = () => {

  const rowSelection = useMemo(
    () => ({
-      onChange: (selectedRowKeys, selectedRows) => {
-        setSelectedRowKeys(selectedRowKeys);
+      selectedRowKeys,
+      onChange: (keys) => {
+        setSelectedRowKeys(keys);
      },
    }),
-    [],
+    [selectedRowKeys],
  );

  const displayPrice = (usdPrice) => {
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -950,7 +950,7 @@
  "黑夜模式": "Dark mode",
  "管理员设置": "Admin",
  "待更新": "To be updated",
-  "定价": "Pricing",
+  "模型广场": "Pricing",
  "支付中..": "Paying",
  "查看图片": "View pictures",
  "并发限制": "Concurrency limit",
@@ -1195,6 +1195,7 @@
  "兑换码创建成功，是否下载兑换码？": "Redemption code created successfully. Do you want to download it?",
  "兑换码将以文本文件的形式下载，文件名为兑换码的名称。": "The redemption code will be downloaded as a text file, with the filename being the redemption code name.",
  "模型价格": "Model price",
+  "按K显示单位": "Display in K units",
  "可用分组": "Available groups",
  "您的默认分组为：{{group}}，分组倍率为：{{ratio}}": "Your default group is: {{group}}, group ratio: {{ratio}}",
  "按量计费费用 = 分组倍率 × 模型倍率 × （提示token数 + 补全token数 × 补全倍率）/ 500000 （单位：美元）": "The cost of pay-as-you-go = Group ratio × Model ratio × (Prompt token number + Completion token number × Completion ratio) / 500000 (Unit: USD)",