添加模型筛选

src/views/computingResource/resourceList.vue

@@ -43,9 +43,27 @@
       </div>
       </div>
       <el-tabs v-model="tabActive" @tab-change="tabChange">
       <el-tabs v-model="tabActive" @tab-change="tabChange">
         <el-tab-pane label="大模型词元（Token）服务" :name="999">
         <el-tab-pane label="大模型词元（Token）服务" :name="999">
-          <!-- 标签筛选 -->
-          <div v-if="allTags.length > 0" class="tag-filter">
+          <!-- 标签筛选 + 模型名称搜索 -->
+          <div class="model-filter-wrapper">
+            <!-- 标题行：「标签筛选：」在左，搜索框在右（小尺寸） -->
+            <div class="filter-header">
               <span class="tag-filter-label">标签筛选：</span>
               <span class="tag-filter-label">标签筛选：</span>
+              <div class="model-search">
+                <el-input
+                    v-model="modelSearchQuery"
+                    placeholder="搜索模型名称"
+                    clearable
+                    size="small"
+                    class="model-search-input"
+                >
+                  <template #prefix>
+                    <el-icon><Search /></el-icon>
+                  </template>
+                </el-input>
+              </div>
+            </div>
+            <!-- 标签行：可换行 -->
+            <div v-if="allTags.length > 0" class="tag-list">
               <el-checkbox-group v-model="selectedTags" size="small">
               <el-checkbox-group v-model="selectedTags" size="small">
                 <el-checkbox
                 <el-checkbox
                     v-for="tag in allTags"
                     v-for="tag in allTags"
@@ -58,6 +76,7 @@
                 清空筛选
                 清空筛选
               </el-button>
               </el-button>
             </div>
             </div>
+          </div>
           <div v-if="showVersion === 1" class="version-1" style="padding-bottom: 90px;">
           <div v-if="showVersion === 1" class="version-1" style="padding-bottom: 90px;">
             <el-table v-if="filteredModels.length !== 0" :data="filteredModels" :max-height="490" style="width: 100%">
             <el-table v-if="filteredModels.length !== 0" :data="filteredModels" :max-height="490" style="width: 100%">
               <el-table-column prop="modelName" label="模型名" width="190px"/>
               <el-table-column prop="modelName" label="模型名" width="190px"/>
@@ -531,6 +550,7 @@ import PDFObject from 'pdfobject';
 import axios from "axios";
 import axios from "axios";
 import ModelCard from '@/views/console/components/model-card.vue'
 import ModelCard from '@/views/console/components/model-card.vue'
 import LobeIcon from '@/components/LobeIcon/index.vue'
 import LobeIcon from '@/components/LobeIcon/index.vue'
+import { Search } from '@element-plus/icons-vue'
 
 
 const route = useRoute()
 const route = useRoute()
 const router = useRouter()
 const router = useRouter()
@@ -987,6 +1007,8 @@ const clearProtocol = () => {
 
 
 const models = ref([])
 const models = ref([])
 const selectedTags = ref([])
 const selectedTags = ref([])
+// 模型名称搜索关键字（受控输入，v-model 绑到 el-input）
+const modelSearchQuery = ref('')
 
 
 function getModelList() {
 function getModelList() {
   modelsWithPricing().then(res => {
   modelsWithPricing().then(res => {
@@ -1008,12 +1030,18 @@ const allTags = computed(() => {
   return Array.from(tagSet).sort()
   return Array.from(tagSet).sort()
 })
 })
 
 
-// 根据选中标签过滤后的模型列表
+// 根据选中标签 + 模型名称搜索过滤后的模型列表
 const filteredModels = computed(() => {
 const filteredModels = computed(() => {
+  const query = (modelSearchQuery.value || '').trim().toLowerCase()
+  return models.value.filter(m => {
+    // 模型名称搜索（不区分大小写、忽略首尾空格）
+    if (query && !(m.modelName || '').toLowerCase().includes(query)) {
+      return false
+    }
+    // 标签筛选：未选标签时全部通过
     if (selectedTags.value.length === 0) {
     if (selectedTags.value.length === 0) {
-    return models.value
+      return true
     }
     }
-  return models.value.filter(m => {
     if (!m.tags) return false
     if (!m.tags) return false
     const modelTags = m.tags.split(',').map(t => t.trim())
     const modelTags = m.tags.split(',').map(t => t.trim())
     return selectedTags.value.some(tag => modelTags.includes(tag))
     return selectedTags.value.some(tag => modelTags.includes(tag))
@@ -1429,16 +1457,45 @@ onMounted(() => {
   padding-bottom: 45px;
   padding-bottom: 45px;
 }
 }
 
 
-/* 标签筛选 */
-.tag-filter {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
+/* 标签筛选 + 模型名称搜索 外层容器 */
+.model-filter-wrapper {
   margin-bottom: 20px;
   margin-bottom: 20px;
   padding: 16px;
   padding: 16px;
   background: #f5f7fa;
   background: #f5f7fa;
   border-radius: 8px;
   border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 标题行：「标签筛选：」在左，搜索框在右 */
+.filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+/* 模型名称搜索框：固定在标题行最右侧 */
+.model-search {
+  margin-left: auto;
+  width: 200px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+/* el-input 在 flex 容器中默认 width: 100%，此处让其撑满 .model-search */
+.model-search-input {
+  width: 100%;
+}
+
+/* 标签行：可换行 */
+.tag-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
   :deep(.el-checkbox-group) .el-checkbox {
   :deep(.el-checkbox-group) .el-checkbox {
     margin-right: 5px;
     margin-right: 5px;
     margin-top: 3px;
     margin-top: 3px;