🏗️ refactor: Replace model categories with vendor-based filtering and optimize data structure

- **Backend Changes:**
  - Refactor pricing API to return separate vendors array with ID-based model references
  - Remove redundant vendor_name/vendor_icon fields from pricing records, use vendor_id only
  - Add vendor_description to pricing response for frontend display
  - Maintain 1-minute cache protection for pricing endpoint security

- **Frontend Data Flow:**
  - Update useModelPricingData hook to build vendorsMap from API response
  - Enhance model records with vendor info during data processing
  - Pass vendorsMap through component hierarchy for consistent vendor data access

- **UI Component Replacements:**
  - Replace PricingCategories with PricingVendors component for vendor-based filtering
  - Replace PricingCategoryIntro with PricingVendorIntro in header section
  - Remove all model category related components and logic

- **Header Improvements:**
  - Implement vendor intro with real backend data (name, icon, description)
  - Add text collapsible feature (2-line limit with expand/collapse functionality)
  - Support carousel animation for "All Vendors" view with vendor icon rotation

- **Model Detail Modal Enhancements:**
  - Update ModelHeader to use real vendor icons via getLobeHubIcon()
  - Move tags from header to ModelBasicInfo content area to avoid SideSheet title width constraints
  - Display only custom tags from backend with stringToColor() for consistent styling
  - Use Space component with wrap property for proper tag layout

- **Table View Optimizations:**
  - Integrate RenderUtils for description and tags columns
  - Implement renderLimitedItems for tags (max 3 visible, +x popover for overflow)
  - Use renderDescription for text truncation with tooltip support

- **Filter Logic Updates:**
  - Vendor filter shows disabled options instead of hiding when no models match
  - Include "Unknown Vendor" category for models without vendor information
  - Remove all hardcoded vendor descriptions, use real backend data

- **Code Quality:**
  - Fix import paths after component relocation
  - Remove unused model category utilities and hardcoded mappings
  - Ensure consistent vendor data usage across all pricing views
  - Maintain backward compatibility with existing pricing calculation logic

This refactor provides a more scalable vendor-based architecture while eliminating
data redundancy and improving user experience with real-time backend data integration.

web/src/components/table/model-pricing/layout/PricingPage.jsx

@@ -79,6 +79,7 @@ const PricingPage = () => {
         tokenUnit={pricingData.tokenUnit}
         displayPrice={pricingData.displayPrice}
         showRatio={allProps.showRatio}
+        vendorsMap={pricingData.vendorsMap}
         t={pricingData.t}
       />
     </div>

web/src/components/table/model-pricing/layout/PricingSidebar.jsx

@@ -19,10 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
-import PricingCategories from '../filter/PricingCategories';
 import PricingGroups from '../filter/PricingGroups';
 import PricingQuotaTypes from '../filter/PricingQuotaTypes';
 import PricingEndpointTypes from '../filter/PricingEndpointTypes';
+import PricingVendors from '../filter/PricingVendors';
 import PricingDisplaySettings from '../filter/PricingDisplaySettings';
 import { resetPricingFilters } from '../../../../helpers/utils';
 import { usePricingFilterCounts } from '../../../../hooks/model-pricing/usePricingFilterCounts';
@@ -44,6 +44,8 @@ const PricingSidebar = ({
   setFilterQuotaType,
   filterEndpointType,
   setFilterEndpointType,
+  filterVendor,
+  setFilterVendor,
   currentPage,
   setCurrentPage,
   tokenUnit,
@@ -56,23 +58,20 @@ const PricingSidebar = ({
   const {
     quotaTypeModels,
     endpointTypeModels,
-    dynamicCategoryCounts,
+    vendorModels,
     groupCountModels,
   } = usePricingFilterCounts({
     models: categoryProps.models,
-    modelCategories: categoryProps.modelCategories,
-    activeKey: categoryProps.activeKey,
     filterGroup,
     filterQuotaType,
     filterEndpointType,
+    filterVendor,
     searchValue: categoryProps.searchValue,
   });
 
   const handleResetFilters = () =>
     resetPricingFilters({
       handleChange,
-      setActiveKey,
-      availableCategories: categoryProps.availableCategories,
       setShowWithRecharge,
       setCurrency,
       setShowRatio,
@@ -80,6 +79,7 @@ const PricingSidebar = ({
       setFilterGroup,
       setFilterQuotaType,
       setFilterEndpointType,
+      setFilterVendor,
       setCurrentPage,
       setTokenUnit,
     });
@@ -115,10 +115,11 @@ const PricingSidebar = ({
         t={t}
       />
 
-      <PricingCategories
-        {...categoryProps}
-        categoryCounts={dynamicCategoryCounts}
-        setActiveKey={setActiveKey}
+      <PricingVendors
+        filterVendor={filterVendor}
+        setFilterVendor={setFilterVendor}
+        models={vendorModels}
+        allModels={categoryProps.models}
         loading={loading}
         t={t}
       />

web/src/components/table/model-pricing/layout/header/PricingCategoryIntro.jsx

@@ -1,232 +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, 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-md 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-md 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-md 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: '16px' }}>
-          <div className="flex items-start space-x-3 md:space-x-4">
-            {/* 全部模型的头像组合 */}
-            <div className="flex-shrink-0">
-              {renderAllModelsAvatar()}
-            </div>
-
-            {/* 分类信息 */}
-            <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-xs sm: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: '16px' }}>
-        <div className="flex items-start space-x-3 md:space-x-4">
-          {/* 分类图标 */}
-          <div className="flex-shrink-0">
-            {renderCategoryAvatar(currentCategory)}
-          </div>
-
-          {/* 分类信息 */}
-          <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-xs sm:text-sm text-gray-600 leading-relaxed">
-              {getCategoryDescription(activeKey)}
-            </p>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-};
-
-export default PricingCategoryIntro; 

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

@@ -21,7 +21,7 @@ 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 PricingCategoryIntroWithSkeleton from './PricingCategoryIntroWithSkeleton';
+import PricingVendorIntroWithSkeleton from './PricingVendorIntroWithSkeleton';
 
 const PricingTopSection = ({
   selectedRowKeys,
@@ -31,10 +31,9 @@ const PricingTopSection = ({
   handleCompositionEnd,
   isMobile,
   sidebarProps,
-  activeKey,
-  modelCategories,
-  categoryCounts,
-  availableCategories,
+  filterVendor,
+  models,
+  filteredModels,
   loading,
   t
 }) => {
@@ -82,13 +81,12 @@ const PricingTopSection = ({
 
   return (
     <>
-      {/* 分类介绍区域（含骨架屏） */}
-      <PricingCategoryIntroWithSkeleton
+      {/* 供应商介绍区域（含骨架屏） */}
+      <PricingVendorIntroWithSkeleton
         loading={loading}
-        activeKey={activeKey}
-        modelCategories={modelCategories}
-        categoryCounts={categoryCounts}
-        availableCategories={availableCategories}
+        filterVendor={filterVendor}
+        models={filteredModels}
+        allModels={models}
         t={t}
       />
 

web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx

@@ -0,0 +1,247 @@
+/*
+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, useMemo } from 'react';
+import { Card, Tag, Avatar, AvatarGroup, Typography } from '@douyinfe/semi-ui';
+import { getLobeHubIcon } from '../../../../../helpers';
+
+const { Paragraph } = Typography;
+
+const PricingVendorIntro = ({
+  filterVendor,
+  models = [],
+  allModels = [],
+  t
+}) => {
+  // 轮播动效状态（只对全部供应商生效）
+  const [currentOffset, setCurrentOffset] = useState(0);
+
+  // 获取所有供应商信息
+  const vendorInfo = useMemo(() => {
+    const vendors = new Map();
+    let unknownCount = 0;
+
+    (allModels.length > 0 ? allModels : models).forEach(model => {
+      if (model.vendor_name) {
+        if (!vendors.has(model.vendor_name)) {
+          vendors.set(model.vendor_name, {
+            name: model.vendor_name,
+            icon: model.vendor_icon,
+            description: model.vendor_description,
+            count: 0
+          });
+        }
+        vendors.get(model.vendor_name).count++;
+      } else {
+        unknownCount++;
+      }
+    });
+
+    const vendorList = Array.from(vendors.values()).sort((a, b) => a.name.localeCompare(b.name));
+
+    if (unknownCount > 0) {
+      vendorList.push({
+        name: 'unknown',
+        icon: null,
+        description: t('包含来自未知或未标明供应商的AI模型，这些模型可能来自小型供应商或开源项目。'),
+        count: unknownCount
+      });
+    }
+
+    return vendorList;
+  }, [allModels, models]);
+
+  // 计算当前过滤器的模型数量
+  const currentModelCount = models.length;
+
+  // 设置轮播定时器（只对全部供应商且有足够头像时生效）
+  useEffect(() => {
+    if (filterVendor !== 'all' || vendorInfo.length <= 3) {
+      setCurrentOffset(0); // 重置偏移
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCurrentOffset(prev => (prev + 1) % vendorInfo.length);
+    }, 2000); // 每2秒切换一次
+
+    return () => clearInterval(interval);
+  }, [filterVendor, vendorInfo.length]);
+
+  // 获取供应商描述信息（从后端数据中）
+  const getVendorDescription = (vendorKey) => {
+    if (vendorKey === 'all') {
+      return t('查看所有可用的AI模型供应商，包括众多知名供应商的模型。');
+    }
+    if (vendorKey === 'unknown') {
+      return t('包含来自未知或未标明供应商的AI模型，这些模型可能来自小型供应商或开源项目。');
+    }
+    const vendor = vendorInfo.find(v => v.name === vendorKey);
+    return vendor?.description || t('该供应商提供多种AI模型，适用于不同的应用场景。');
+  };
+
+  // 为全部供应商创建特殊的头像组合
+  const renderAllVendorsAvatar = () => {
+    // 重新排列数组，让当前偏移量的头像在第一位
+    const rotatedVendors = vendorInfo.length > 3 ? [
+      ...vendorInfo.slice(currentOffset),
+      ...vendorInfo.slice(0, currentOffset)
+    ] : vendorInfo;
+
+    // 如果没有供应商，显示占位符
+    if (vendorInfo.length === 0) {
+      return (
+        <div className="min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
+          <Avatar size="default" color="transparent">
+            AI
+          </Avatar>
+        </div>
+      );
+    }
+
+    return (
+      <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"
+          overlapFrom='end'
+          key={currentOffset}
+          renderMore={(restNumber) => (
+            <Avatar
+              size="default"
+              style={{ backgroundColor: 'transparent', color: 'var(--semi-color-text-0)' }}
+              alt={`${restNumber} more vendors`}
+            >
+              {`+${restNumber}`}
+            </Avatar>
+          )}
+        >
+          {rotatedVendors.map((vendor) => (
+            <Avatar
+              key={vendor.name}
+              size="default"
+              color="transparent"
+              alt={vendor.name === 'unknown' ? t('未知供应商') : vendor.name}
+            >
+              {vendor.icon ?
+                getLobeHubIcon(vendor.icon, 20) :
+                (vendor.name === 'unknown' ? '?' : vendor.name.charAt(0).toUpperCase())
+              }
+            </Avatar>
+          ))}
+        </AvatarGroup>
+      </div>
+    );
+  };
+
+  // 为具体供应商渲染单个图标
+  const renderVendorAvatar = (vendor) => (
+    <div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center">
+      {vendor.icon ?
+        getLobeHubIcon(vendor.icon, 40) :
+        <Avatar size="large" color="transparent">
+          {vendor.name === 'unknown' ? '?' : vendor.name.charAt(0).toUpperCase()}
+        </Avatar>
+      }
+    </div>
+  );
+
+  // 如果是全部供应商
+  if (filterVendor === 'all') {
+    return (
+      <div className='mb-4'>
+        <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
+          <div className="flex items-start space-x-3 md:space-x-4">
+            {/* 全部供应商的头像组合 */}
+            <div className="flex-shrink-0">
+              {renderAllVendorsAvatar()}
+            </div>
+
+            {/* 供应商信息 */}
+            <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">{t('全部供应商')}</h2>
+                <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
+                  {t('共 {{count}} 个模型', { count: currentModelCount })}
+                </Tag>
+              </div>
+              <Paragraph
+                className="text-xs sm:text-sm text-gray-600 leading-relaxed !mb-0"
+                ellipsis={{
+                  rows: 2,
+                  expandable: true,
+                  collapsible: true,
+                  collapseText: t('收起'),
+                  expandText: t('展开')
+                }}
+              >
+                {getVendorDescription('all')}
+              </Paragraph>
+            </div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
+  // 具体供应商
+  const currentVendor = vendorInfo.find(v => v.name === filterVendor);
+  if (!currentVendor) {
+    return null;
+  }
+
+  const vendorDisplayName = currentVendor.name === 'unknown' ? t('未知供应商') : currentVendor.name;
+
+  return (
+    <div className='mb-4'>
+      <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
+        <div className="flex items-start space-x-3 md:space-x-4">
+          {/* 供应商图标 */}
+          <div className="flex-shrink-0">
+            {renderVendorAvatar(currentVendor)}
+          </div>
+
+          {/* 供应商信息 */}
+          <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">{vendorDisplayName}</h2>
+              <Tag color="white" shape="circle" size="small" className="self-start sm:self-center">
+                {t('共 {{count}} 个模型', { count: currentModelCount })}
+              </Tag>
+            </div>
+            <Paragraph
+              className="text-xs sm:text-sm text-gray-600 leading-relaxed !mb-0"
+              ellipsis={{
+                rows: 2,
+                expandable: true,
+                collapsible: true,
+                collapseText: t('收起'),
+                expandText: t('展开')
+              }}
+            >
+              {currentVendor.description || getVendorDescription(currentVendor.name)}
+            </Paragraph>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default PricingVendorIntro;

web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx

@@ -20,26 +20,26 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import { Card, Skeleton } from '@douyinfe/semi-ui';
 
-const PricingCategoryIntroSkeleton = ({
-  isAllModels = false
+const PricingVendorIntroSkeleton = ({
+  isAllVendors = false
 }) => {
   const placeholder = (
     <div className='mb-4'>
       <Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
         <div className="flex items-start space-x-3 md:space-x-4">
-          {/* 分类图标骨架 */}
+          {/* 供应商图标骨架 */}
           <div className="flex-shrink-0 min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
-            {isAllModels ? (
+            {isAllVendors ? (
               <div className="flex items-center">
-                {Array.from({ length: 5 }).map((_, index) => (
+                {Array.from({ length: 4 }).map((_, index) => (
                   <Skeleton.Avatar
                     key={index}
                     active
                     size="default"
                     style={{
-                      width: 40,
-                      height: 40,
-                      marginRight: index < 4 ? -10 : 0,
+                      width: 32,
+                      height: 32,
+                      marginRight: index < 3 ? -8 : 0,
                     }}
                   />
                 ))}
@@ -49,7 +49,7 @@ const PricingCategoryIntroSkeleton = ({
             )}
           </div>
 
-          {/* 分类信息骨架 */}
+          {/* 供应商信息骨架 */}
           <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 }} />
@@ -72,4 +72,4 @@ const PricingCategoryIntroSkeleton = ({
   );
 };
 
-export default PricingCategoryIntroSkeleton; 
+export default PricingVendorIntroSkeleton;

web/src/components/table/model-pricing/layout/header/PricingVendorIntroWithSkeleton.jsx

@@ -18,37 +18,35 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import PricingCategoryIntro from './PricingCategoryIntro';
-import PricingCategoryIntroSkeleton from './PricingCategoryIntroSkeleton';
+import PricingVendorIntro from './PricingVendorIntro';
+import PricingVendorIntroSkeleton from './PricingVendorIntroSkeleton';
 import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
 
-const PricingCategoryIntroWithSkeleton = ({
+const PricingVendorIntroWithSkeleton = ({
   loading = false,
-  activeKey,
-  modelCategories,
-  categoryCounts,
-  availableCategories,
+  filterVendor,
+  models,
+  allModels,
   t
 }) => {
   const showSkeleton = useMinimumLoadingTime(loading);
 
   if (showSkeleton) {
     return (
-      <PricingCategoryIntroSkeleton
-        isAllModels={activeKey === 'all'}
+      <PricingVendorIntroSkeleton
+        isAllVendors={filterVendor === 'all'}
       />
     );
   }
 
   return (
-    <PricingCategoryIntro
-      activeKey={activeKey}
-      modelCategories={modelCategories}
-      categoryCounts={categoryCounts}
-      availableCategories={availableCategories}
+    <PricingVendorIntro
+      filterVendor={filterVendor}
+      models={models}
+      allModels={allModels}
       t={t}
     />
   );
 };
 
-export default PricingCategoryIntroWithSkeleton; 
+export default PricingVendorIntroWithSkeleton;