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

View File

@ -57,14 +57,18 @@ const ModelsSidebar = ({
}, [models]); }, [models]);
// (Tags) // (Tags)
const TAG_ORDER = ['文本', '图片', '音频', '视频'];
const tags = React.useMemo(() => { const tags = React.useMemo(() => {
const allTags = new Set(); const allTags = new Set();
models.forEach((m) => { models.forEach((m) => {
if (m.tags) { 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]); }, [models]);
const FilterItem = ({ label, count, active, onClick }) => ( const FilterItem = ({ label, count, active, onClick }) => (