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 { 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>
|
||||||
|
|
|
||||||
|
|
@ -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 }) => (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue