From 46819578decae262a1c4b6577f385338dac9dc84 Mon Sep 17 00:00:00 2001
From: xiezhouwei <xzw@qx002575.com>
Date: Thu, 18 Jun 2026 17:01:50 +0800
Subject: [PATCH] fix: model page tab filter not working and sidebar tag order

---
 .../model-pricing/layout/ModelsContent.jsx    | 21 +++++++++++++++----
 .../model-pricing/layout/ModelsSidebar.jsx    |  8 +++++--
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/web/src/components/table/model-pricing/layout/ModelsContent.jsx b/web/src/components/table/model-pricing/layout/ModelsContent.jsx
index 6199a80..50bdc36 100644
--- a/web/src/components/table/model-pricing/layout/ModelsContent.jsx
+++ b/web/src/components/table/model-pricing/layout/ModelsContent.jsx
@@ -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>
diff --git a/web/src/components/table/model-pricing/layout/ModelsSidebar.jsx b/web/src/components/table/model-pricing/layout/ModelsSidebar.jsx
index 7c1c9a2..5e56dde 100644
--- a/web/src/components/table/model-pricing/layout/ModelsSidebar.jsx
+++ b/web/src/components/table/model-pricing/layout/ModelsSidebar.jsx
@@ -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 }) => (