🏗️ 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.
This commit is contained in:
t0ng7u
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user