- {getModelIcon(model.model_name)}
+ {getModelIcon(model)}
+
{renderTags(model)}
diff --git a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
index 7ff77a57..e38cde13 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.js
@@ -20,7 +20,8 @@ For commercial licensing, please contact support@quantumnous.com
import React from 'react';
import { Tag, Space, Tooltip } from '@douyinfe/semi-ui';
import { IconHelpCircle } from '@douyinfe/semi-icons';
-import { renderModelTag, stringToColor, calculateModelPrice } from '../../../../../helpers';
+import { renderModelTag, stringToColor, calculateModelPrice, getLobeHubIcon } from '../../../../../helpers';
+import { renderLimitedItems, renderDescription } from '../../../../common/ui/RenderUtils';
function renderQuotaType(type, t) {
switch (type) {
@@ -41,6 +42,31 @@ function renderQuotaType(type, t) {
}
}
+// Render vendor name
+const renderVendor = (vendorName, vendorIcon, t) => {
+ if (!vendorName) return '-';
+ return (
+
+ {vendorName}
+
+ );
+};
+
+// Render tags list using RenderUtils
+const renderTags = (text) => {
+ if (!text) return '-';
+ const tagsArr = text.split(',').filter(tag => tag.trim());
+ return renderLimitedItems({
+ items: tagsArr,
+ renderItem: (tag, idx) => (
+
+ {tag.trim()}
+
+ ),
+ maxDisplay: 3
+ });
+};
+
function renderSupportedEndpoints(endpoints) {
if (!endpoints || endpoints.length === 0) {
return null;
@@ -104,7 +130,25 @@ export const getPricingTableColumns = ({
sorter: (a, b) => a.quota_type - b.quota_type,
};
- const baseColumns = [modelNameColumn, quotaColumn];
+ const descriptionColumn = {
+ title: t('描述'),
+ dataIndex: 'description',
+ render: (text) => renderDescription(text, 200),
+ };
+
+ const tagsColumn = {
+ title: t('标签'),
+ dataIndex: 'tags',
+ render: renderTags,
+ };
+
+ const vendorColumn = {
+ title: t('供应商'),
+ dataIndex: 'vendor_name',
+ render: (text, record) => renderVendor(text, record.vendor_icon, t),
+ };
+
+ const baseColumns = [modelNameColumn, vendorColumn, descriptionColumn, tagsColumn, quotaColumn];
const ratioColumn = {
title: () => (
diff --git a/web/src/components/table/models/ModelsColumnDefs.js b/web/src/components/table/models/ModelsColumnDefs.js
index c02201c4..48841e60 100644
--- a/web/src/components/table/models/ModelsColumnDefs.js
+++ b/web/src/components/table/models/ModelsColumnDefs.js
@@ -30,7 +30,7 @@ import {
getLobeHubIcon,
stringToColor
} from '../../../helpers';
-import { renderLimitedItems, renderDescription } from './ui/RenderUtils.jsx';
+import { renderLimitedItems, renderDescription } from '../../common/ui/RenderUtils';
const { Text } = Typography;
diff --git a/web/src/components/table/models/modals/PrefillGroupManagement.jsx b/web/src/components/table/models/modals/PrefillGroupManagement.jsx
index 569fcdcd..1ce51b9e 100644
--- a/web/src/components/table/models/modals/PrefillGroupManagement.jsx
+++ b/web/src/components/table/models/modals/PrefillGroupManagement.jsx
@@ -41,9 +41,9 @@ import {
import { API, showError, showSuccess, stringToColor } from '../../../../helpers';
import { useTranslation } from 'react-i18next';
import { useIsMobile } from '../../../../hooks/common/useIsMobile';
-import CardTable from '../../../common/ui/CardTable.js';
-import EditPrefillGroupModal from './EditPrefillGroupModal.jsx';
-import { renderLimitedItems, renderDescription } from '../ui/RenderUtils.jsx';
+import CardTable from '../../../common/ui/CardTable';
+import EditPrefillGroupModal from './EditPrefillGroupModal';
+import { renderLimitedItems, renderDescription } from '../../../common/ui/RenderUtils';
const { Text, Title } = Typography;
diff --git a/web/src/helpers/utils.js b/web/src/helpers/utils.js
index 27dd7ab9..c226bdd9 100644
--- a/web/src/helpers/utils.js
+++ b/web/src/helpers/utils.js
@@ -698,14 +698,13 @@ const DEFAULT_PRICING_FILTERS = {
filterGroup: 'all',
filterQuotaType: 'all',
filterEndpointType: 'all',
+ filterVendor: 'all',
currentPage: 1,
};
// 重置模型定价筛选条件
export const resetPricingFilters = ({
handleChange,
- setActiveKey,
- availableCategories,
setShowWithRecharge,
setCurrency,
setShowRatio,
@@ -713,11 +712,11 @@ export const resetPricingFilters = ({
setFilterGroup,
setFilterQuotaType,
setFilterEndpointType,
+ setFilterVendor,
setCurrentPage,
setTokenUnit,
}) => {
handleChange?.(DEFAULT_PRICING_FILTERS.search);
- availableCategories?.length > 0 && setActiveKey?.(availableCategories[0]);
setShowWithRecharge?.(DEFAULT_PRICING_FILTERS.showWithRecharge);
setCurrency?.(DEFAULT_PRICING_FILTERS.currency);
setShowRatio?.(DEFAULT_PRICING_FILTERS.showRatio);
@@ -726,5 +725,6 @@ export const resetPricingFilters = ({
setFilterGroup?.(DEFAULT_PRICING_FILTERS.filterGroup);
setFilterQuotaType?.(DEFAULT_PRICING_FILTERS.filterQuotaType);
setFilterEndpointType?.(DEFAULT_PRICING_FILTERS.filterEndpointType);
+ setFilterVendor?.(DEFAULT_PRICING_FILTERS.filterVendor);
setCurrentPage?.(DEFAULT_PRICING_FILTERS.currentPage);
};
diff --git a/web/src/hooks/model-pricing/useModelPricingData.js b/web/src/hooks/model-pricing/useModelPricingData.js
index 98a8e566..1a8fb719 100644
--- a/web/src/hooks/model-pricing/useModelPricingData.js
+++ b/web/src/hooks/model-pricing/useModelPricingData.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
import { useState, useEffect, useContext, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
-import { API, copy, showError, showInfo, showSuccess, getModelCategories } from '../../helpers';
+import { API, copy, showError, showInfo, showSuccess } from '../../helpers';
import { Modal } from '@douyinfe/semi-ui';
import { UserContext } from '../../context/User/index.js';
import { StatusContext } from '../../context/Status/index.js';
@@ -34,16 +34,17 @@ export const useModelPricingData = () => {
const [selectedGroup, setSelectedGroup] = useState('default');
const [showModelDetail, setShowModelDetail] = useState(false);
const [selectedModel, setSelectedModel] = useState(null);
- const [filterGroup, setFilterGroup] = useState('all'); // 用于 Table 的可用分组筛选，“all” 表示不过滤
+ const [filterGroup, setFilterGroup] = useState('all'); // 用于 Table 的可用分组筛选，"all" 表示不过滤
const [filterQuotaType, setFilterQuotaType] = useState('all'); // 计费类型筛选: 'all' | 0 | 1
- const [activeKey, setActiveKey] = useState('all');
const [filterEndpointType, setFilterEndpointType] = useState('all'); // 端点类型筛选: 'all' | string
+ const [filterVendor, setFilterVendor] = useState('all'); // 供应商筛选: 'all' | 'unknown' | string
const [pageSize, setPageSize] = useState(10);
const [currentPage, setCurrentPage] = useState(1);
const [currency, setCurrency] = useState('USD');
const [showWithRecharge, setShowWithRecharge] = useState(false);
const [tokenUnit, setTokenUnit] = useState('M');
const [models, setModels] = useState([]);
+ const [vendorsMap, setVendorsMap] = useState({});
const [loading, setLoading] = useState(true);
const [groupRatio, setGroupRatio] = useState({});
const [usableGroup, setUsableGroup] = useState({});
@@ -55,37 +56,9 @@ export const useModelPricingData = () => {
const priceRate = useMemo(() => statusState?.status?.price ?? 1, [statusState]);
const usdExchangeRate = useMemo(() => statusState?.status?.usd_exchange_rate ?? priceRate, [statusState, priceRate]);
- const modelCategories = getModelCategories(t);
-
- const categoryCounts = useMemo(() => {
- const counts = {};
- if (models.length > 0) {
- counts['all'] = models.length;
- Object.entries(modelCategories).forEach(([key, category]) => {
- if (key !== 'all') {
- counts[key] = models.filter(model => category.filter(model)).length;
- }
- });
- }
- return counts;
- }, [models, modelCategories]);
-
- const availableCategories = useMemo(() => {
- if (!models.length) return ['all'];
- return Object.entries(modelCategories).filter(([key, category]) => {
- if (key === 'all') return true;
- return models.some(model => category.filter(model));
- }).map(([key]) => key);
- }, [models]);
-
const filteredModels = useMemo(() => {
let result = models;
- // 分类筛选
- if (activeKey !== 'all') {
- result = result.filter(model => modelCategories[activeKey].filter(model));
- }
-
// 分组筛选
if (filterGroup !== 'all') {
result = result.filter(model => model.enable_groups.includes(filterGroup));
@@ -104,16 +77,28 @@ export const useModelPricingData = () => {
);
}
+ // 供应商筛选
+ if (filterVendor !== 'all') {
+ if (filterVendor === 'unknown') {
+ result = result.filter(model => !model.vendor_name);
+ } else {
+ result = result.filter(model => model.vendor_name === filterVendor);
+ }
+ }
+
// 搜索筛选
if (searchValue.length > 0) {
const searchTerm = searchValue.toLowerCase();
result = result.filter(model =>
- model.model_name.toLowerCase().includes(searchTerm)
+ (model.model_name && model.model_name.toLowerCase().includes(searchTerm)) ||
+ (model.description && model.description.toLowerCase().includes(searchTerm)) ||
+ (model.tags && model.tags.toLowerCase().includes(searchTerm)) ||
+ (model.vendor_name && model.vendor_name.toLowerCase().includes(searchTerm))
);
}
return result;
- }, [activeKey, models, searchValue, filterGroup, filterQuotaType, filterEndpointType]);
+ }, [models, searchValue, filterGroup, filterQuotaType, filterEndpointType, filterVendor]);
const rowSelection = useMemo(
() => ({
@@ -137,10 +122,18 @@ export const useModelPricingData = () => {
return `$${priceInUSD.toFixed(3)}`;
};
- const setModelsFormat = (models, groupRatio) => {
+ const setModelsFormat = (models, groupRatio, vendorMap) => {
for (let i = 0; i < models.length; i++) {
- models[i].key = models[i].model_name;
- models[i].group_ratio = groupRatio[models[i].model_name];
+ const m = models[i];
+ m.key = m.model_name;
+ m.group_ratio = groupRatio[m.model_name];
+
+ if (m.vendor_id && vendorMap[m.vendor_id]) {
+ const vendor = vendorMap[m.vendor_id];
+ m.vendor_name = vendor.name;
+ m.vendor_icon = vendor.icon;
+ m.vendor_description = vendor.description;
+ }
}
models.sort((a, b) => {
return a.quota_type - b.quota_type;
@@ -166,12 +159,20 @@ export const useModelPricingData = () => {
setLoading(true);
let url = '/api/pricing';
const res = await API.get(url);
- const { success, message, data, group_ratio, usable_group } = res.data;
+ const { success, message, data, vendors, group_ratio, usable_group } = res.data;
if (success) {
setGroupRatio(group_ratio);
setUsableGroup(usable_group);
setSelectedGroup(userState.user ? userState.user.group : 'default');
- setModelsFormat(data, group_ratio);
+ // 构建供应商 Map 方便查找
+ const vendorMap = {};
+ if (Array.isArray(vendors)) {
+ vendors.forEach(v => {
+ vendorMap[v.id] = v;
+ });
+ }
+ setVendorsMap(vendorMap);
+ setModelsFormat(data, group_ratio, vendorMap);
} else {
showError(message);
}
@@ -238,7 +239,7 @@ export const useModelPricingData = () => {
// 当筛选条件变化时重置到第一页
useEffect(() => {
setCurrentPage(1);
- }, [activeKey, filterGroup, filterQuotaType, filterEndpointType, searchValue]);
+ }, [filterGroup, filterQuotaType, filterEndpointType, filterVendor, searchValue]);
return {
// 状态
@@ -262,8 +263,8 @@ export const useModelPricingData = () => {
setFilterQuotaType,
filterEndpointType,
setFilterEndpointType,
- activeKey,
- setActiveKey,
+ filterVendor,
+ setFilterVendor,
pageSize,
setPageSize,
currentPage,
@@ -282,12 +283,12 @@ export const useModelPricingData = () => {
// 计算属性
priceRate,
usdExchangeRate,
- modelCategories,
- categoryCounts,
- availableCategories,
filteredModels,
rowSelection,
+ // 供应商
+ vendorsMap,
+
// 用户和状态
userState,
statusState,
diff --git a/web/src/hooks/model-pricing/usePricingFilterCounts.js b/web/src/hooks/model-pricing/usePricingFilterCounts.js
index e23111f3..cd993bd5 100644
--- a/web/src/hooks/model-pricing/usePricingFilterCounts.js
+++ b/web/src/hooks/model-pricing/usePricingFilterCounts.js
@@ -24,61 +24,18 @@ import { useMemo } from 'react';
export const usePricingFilterCounts = ({
models = [],
- modelCategories = {},
- activeKey = 'all',
filterGroup = 'all',
filterQuotaType = 'all',
filterEndpointType = 'all',
+ filterVendor = 'all',
searchValue = '',
}) => {
- // 根据分类过滤后的模型
- const modelsAfterCategory = useMemo(() => {
- if (activeKey === 'all') return models;
- const category = modelCategories[activeKey];
- if (category && typeof category.filter === 'function') {
- return models.filter(category.filter);
- }
- return models;
- }, [models, activeKey, modelCategories]);
-
- // 根据除分类外其它过滤条件后的模型 (用于动态分类计数)
- const modelsAfterOtherFilters = useMemo(() => {
- let result = models;
- if (filterGroup !== 'all') {
- result = result.filter(m => m.enable_groups && m.enable_groups.includes(filterGroup));
- }
- if (filterQuotaType !== 'all') {
- result = result.filter(m => m.quota_type === filterQuotaType);
- }
- if (filterEndpointType !== 'all') {
- result = result.filter(m =>
- m.supported_endpoint_types && m.supported_endpoint_types.includes(filterEndpointType)
- );
- }
- if (searchValue && searchValue.length > 0) {
- const term = searchValue.toLowerCase();
- result = result.filter(m => m.model_name.toLowerCase().includes(term));
- }
- return result;
- }, [models, filterGroup, filterQuotaType, filterEndpointType, searchValue]);
-
- // 动态分类计数
- const dynamicCategoryCounts = useMemo(() => {
- const counts = { all: modelsAfterOtherFilters.length };
- Object.entries(modelCategories).forEach(([key, category]) => {
- if (key === 'all') return;
- if (typeof category.filter === 'function') {
- counts[key] = modelsAfterOtherFilters.filter(category.filter).length;
- } else {
- counts[key] = 0;
- }
- });
- return counts;
- }, [modelsAfterOtherFilters, modelCategories]);
+ // 所有模型（不再需要分类过滤）
+ const allModels = models;
// 针对计费类型按钮计数
const quotaTypeModels = useMemo(() => {
- let result = modelsAfterCategory;
+ let result = allModels;
if (filterGroup !== 'all') {
result = result.filter(m => m.enable_groups && m.enable_groups.includes(filterGroup));
}
@@ -87,24 +44,38 @@ export const usePricingFilterCounts = ({
m.supported_endpoint_types && m.supported_endpoint_types.includes(filterEndpointType)
);
}
+ if (filterVendor !== 'all') {
+ if (filterVendor === 'unknown') {
+ result = result.filter(m => !m.vendor_name);
+ } else {
+ result = result.filter(m => m.vendor_name === filterVendor);
+ }
+ }
return result;
- }, [modelsAfterCategory, filterGroup, filterEndpointType]);
+ }, [allModels, filterGroup, filterEndpointType, filterVendor]);
// 针对端点类型按钮计数
const endpointTypeModels = useMemo(() => {
- let result = modelsAfterCategory;
+ let result = allModels;
if (filterGroup !== 'all') {
result = result.filter(m => m.enable_groups && m.enable_groups.includes(filterGroup));
}
if (filterQuotaType !== 'all') {
result = result.filter(m => m.quota_type === filterQuotaType);
}
+ if (filterVendor !== 'all') {
+ if (filterVendor === 'unknown') {
+ result = result.filter(m => !m.vendor_name);
+ } else {
+ result = result.filter(m => m.vendor_name === filterVendor);
+ }
+ }
return result;
- }, [modelsAfterCategory, filterGroup, filterQuotaType]);
+ }, [allModels, filterGroup, filterQuotaType, filterVendor]);
// === 可用令牌分组计数模型（排除 group 过滤，保留其余过滤） ===
const groupCountModels = useMemo(() => {
- let result = modelsAfterCategory; // 已包含分类筛选
+ let result = allModels;
// 不应用 filterGroup 本身
if (filterQuotaType !== 'all') {
@@ -115,17 +86,46 @@ export const usePricingFilterCounts = ({
m.supported_endpoint_types && m.supported_endpoint_types.includes(filterEndpointType)
);
}
+ if (filterVendor !== 'all') {
+ if (filterVendor === 'unknown') {
+ result = result.filter(m => !m.vendor_name);
+ } else {
+ result = result.filter(m => m.vendor_name === filterVendor);
+ }
+ }
if (searchValue && searchValue.length > 0) {
const term = searchValue.toLowerCase();
- result = result.filter(m => m.model_name.toLowerCase().includes(term));
+ result = result.filter(m =>
+ m.model_name.toLowerCase().includes(term) ||
+ (m.description && m.description.toLowerCase().includes(term)) ||
+ (m.tags && m.tags.toLowerCase().includes(term)) ||
+ (m.vendor_name && m.vendor_name.toLowerCase().includes(term))
+ );
}
return result;
- }, [modelsAfterCategory, filterQuotaType, filterEndpointType, searchValue]);
+ }, [allModels, filterQuotaType, filterEndpointType, filterVendor, searchValue]);
+
+ // 针对供应商按钮计数
+ const vendorModels = useMemo(() => {
+ let result = allModels;
+ if (filterGroup !== 'all') {
+ result = result.filter(m => m.enable_groups && m.enable_groups.includes(filterGroup));
+ }
+ if (filterQuotaType !== 'all') {
+ result = result.filter(m => m.quota_type === filterQuotaType);
+ }
+ if (filterEndpointType !== 'all') {
+ result = result.filter(m =>
+ m.supported_endpoint_types && m.supported_endpoint_types.includes(filterEndpointType)
+ );
+ }
+ return result;
+ }, [allModels, filterGroup, filterQuotaType, filterEndpointType]);
return {
quotaTypeModels,
endpointTypeModels,
- dynamicCategoryCounts,
+ vendorModels,
groupCountModels,
};
};
\ No newline at end of file