fix: model page tab filter not working and sidebar tag order
This commit is contained in:
parent
77b885b190
commit
46819578de
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }) => (
|
||||
|
|
|
|||
Loading…
Reference in New Issue