feat: Add endpoint type filter to model pricing system

- Create PricingEndpointTypes.jsx component for endpoint type filtering
- Add filterEndpointType state management in useModelPricingData hook
- Integrate endpoint type filtering logic in filteredModels computation
- Update PricingSidebar.jsx to include endpoint type filter component
- Update PricingFilterModal.jsx to support endpoint type filtering on mobile
- Extend resetPricingFilters utility function to include endpoint type reset
- Support filtering models by endpoint types (OpenAI, Anthropic, Gemini, etc.)
- Display model count for each endpoint type with localized labels
- Ensure filter state resets to first page when endpoint type changes

This enhancement allows users to filter models by their supported endpoint types,
providing more granular control over model selection in the pricing interface.
This commit is contained in:
t0ng7u
2025-07-24 03:25:57 +08:00
parent 53be79a00e
commit 59a76b3970
5 changed files with 135 additions and 2 deletions

View File

@@ -35,6 +35,7 @@ export const useModelPricingData = () => {
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 [pageSize, setPageSize] = useState(10);
const [currentPage, setCurrentPage] = useState(1);
const [currency, setCurrency] = useState('USD');
@@ -93,6 +94,14 @@ export const useModelPricingData = () => {
result = result.filter(model => model.quota_type === filterQuotaType);
}
// 端点类型筛选
if (filterEndpointType !== 'all') {
result = result.filter(model =>
model.supported_endpoint_types &&
model.supported_endpoint_types.includes(filterEndpointType)
);
}
// 搜索筛选
if (searchValue.length > 0) {
const searchTerm = searchValue.toLowerCase();
@@ -102,7 +111,7 @@ export const useModelPricingData = () => {
}
return result;
}, [activeKey, models, searchValue, filterGroup, filterQuotaType]);
}, [activeKey, models, searchValue, filterGroup, filterQuotaType, filterEndpointType]);
const rowSelection = useMemo(
() => ({
@@ -216,7 +225,7 @@ export const useModelPricingData = () => {
// 当筛选条件变化时重置到第一页
useEffect(() => {
setCurrentPage(1);
}, [activeKey, filterGroup, filterQuotaType, searchValue]);
}, [activeKey, filterGroup, filterQuotaType, filterEndpointType, searchValue]);
return {
// 状态
@@ -234,6 +243,8 @@ export const useModelPricingData = () => {
setFilterGroup,
filterQuotaType,
setFilterQuotaType,
filterEndpointType,
setFilterEndpointType,
activeKey,
setActiveKey,
pageSize,