fix: model page tab filter not working and sidebar tag order

This commit is contained in:
xiezhouwei 2026-06-18 17:01:50 +08:00
parent 77b885b190
commit 46819578de
2 changed files with 23 additions and 6 deletions

View File

@ -13,17 +13,26 @@ import React from 'react';
import { Search } from 'lucide-react';
import PricingCardView from '../view/card/PricingCardView';
// Tab tag
const TAB_TO_TAG = {
all: 'all',
text: '文本',
image: '图片',
audio: '音频',
video: '视频',
};
const TYPE_TABS = [
{ key: 'all', labelKey: '全部' },
{ key: 'text', labelKey: '文本' },
{ key: 'image', labelKey: '图像' },
{ key: 'image', labelKey: '图' },
{ key: 'audio', labelKey: '音频' },
{ key: 'video', labelKey: '视频' },
];
const ModelsContent = ({
filteredModels,
filterEndpointType, setFilterEndpointType,
filterTag, setFilterTag,
searchValue, setSearchValue,
loading,
isMobile,
@ -31,6 +40,10 @@ const ModelsContent = ({
t,
...cardProps
}) => {
// filterTag tab key
const activeTabKey = filterTag === 'all' ? 'all'
: (Object.entries(TAB_TO_TAG).find(([, v]) => v === filterTag)?.[0] || 'all');
return (
<>
{/* Type Tabs */}
@ -38,8 +51,8 @@ const ModelsContent = ({
{TYPE_TABS.map((tab) => (
<button
key={tab.key}
className={`models-tab-btn${filterEndpointType === tab.key ? ' active' : ''}`}
onClick={() => setFilterEndpointType(tab.key)}
className={`models-tab-btn${activeTabKey === tab.key ? ' active' : ''}`}
onClick={() => setFilterTag(TAB_TO_TAG[tab.key])}
>
{t(tab.labelKey)}
</button>

View File

@ -57,14 +57,18 @@ const ModelsSidebar = ({
}, [models]);
// (Tags)
const TAG_ORDER = ['文本', '图片', '音频', '视频'];
const tags = React.useMemo(() => {
const allTags = new Set();
models.forEach((m) => {
if (m.tags) {
String(m.tags).split(/[,;|]/).map(s => s.trim()).filter(Boolean).forEach(t => allTags.add(t.toLowerCase()));
String(m.tags).split(/[,;|]/).map(s => s.trim()).filter(Boolean).forEach(t => allTags.add(t));
}
});
return [...allTags].sort();
// 使
const ordered = TAG_ORDER.filter(t => allTags.has(t));
const rest = [...allTags].filter(t => !TAG_ORDER.includes(t));
return [...ordered, ...rest];
}, [models]);
const FilterItem = ({ label, count, active, onClick }) => (