模型列表标签筛选

src/views/computingResource/resourceList.vue

@@ -153,8 +153,23 @@
         </el-tab-pane>
         </el-tab-pane>
 
 
         <el-tab-pane label="AI token" :name="999">
         <el-tab-pane label="AI token" :name="999">
+          <!-- 标签筛选 -->
+          <div v-if="allTags.length > 0" class="tag-filter">
+            <span class="tag-filter-label">标签筛选：</span>
+            <el-checkbox-group v-model="selectedTags" size="small">
+              <el-checkbox
+                  v-for="tag in allTags"
+                  :key="tag"
+                  :label="tag"
+                  border
+              >{{ tag }}</el-checkbox>
+            </el-checkbox-group>
+            <el-button v-if="selectedTags.length > 0" link type="primary" size="small" @click="selectedTags = []">
+              清空筛选
+            </el-button>
+          </div>
           <div class="model-list">
           <div class="model-list">
-            <model-card v-for="m in models" :key="m.modelName" :model="m" />
+            <model-card v-for="m in filteredModels" :key="m.modelName" :model="m" />
           </div>
           </div>
         </el-tab-pane>
         </el-tab-pane>
       </el-tabs>
       </el-tabs>
@@ -671,6 +686,8 @@ const clearProtocol = () => {
 }
 }
 
 
 const models = ref([])
 const models = ref([])
+const selectedTags = ref([])
+
 function getModelList() {
 function getModelList() {
   modelsWithPricing().then(res => {
   modelsWithPricing().then(res => {
     console.log('res', res)
     console.log('res', res)
@@ -678,6 +695,32 @@ function getModelList() {
   })
   })
 }
 }
 
 
+// 所有唯一标签
+const allTags = computed(() => {
+  const tagSet = new Set()
+  models.value.forEach(m => {
+    if (m.tags) {
+      m.tags.split(',').forEach(tag => {
+        const trimmed = tag.trim()
+        if (trimmed) tagSet.add(trimmed)
+      })
+    }
+  })
+  return Array.from(tagSet).sort()
+})
+
+// 根据选中标签过滤后的模型列表
+const filteredModels = computed(() => {
+  if (selectedTags.value.length === 0) {
+    return models.value
+  }
+  return models.value.filter(m => {
+    if (!m.tags) return false
+    const modelTags = m.tags.split(',').map(t => t.trim())
+    return selectedTags.value.some(tag => modelTags.includes(tag))
+  })
+})
+
 // 底部"获取令牌"按钮相关
 // 底部"获取令牌"按钮相关
 const hasToken = ref(true) // 默认认为有 token，未登录时保持 true 不显示
 const hasToken = ref(true) // 默认认为有 token，未登录时保持 true 不显示
 const ctaLoading = ref(false)
 const ctaLoading = ref(false)
@@ -1048,6 +1091,39 @@ onMounted(() => {
   padding-bottom: 45px;
   padding-bottom: 45px;
 }
 }
 
 
+/* 标签筛选 */
+.tag-filter {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  :deep(.el-checkbox-group) .el-checkbox {
+    margin-right: 5px;
+    margin-top: 3px;
+  }
+}
+
+.tag-filter-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #606266;
+  flex-shrink: 0;
+}
+
+:deep(.el-checkbox.is-bordered) {
+  margin-right: 0;
+  padding: 6px 14px;
+  border-radius: 4px;
+}
+
+:deep(.el-checkbox__label) {
+  font-size: 13px;
+}
+
 /* 底部固定"获取令牌"卡片 */
 /* 底部固定"获取令牌"卡片 */
 .bottom-cta {
 .bottom-cta {
   position: fixed;
   position: fixed;

src/views/console/components/model-card.vue

@@ -12,7 +12,19 @@
             :size="30"
             :size="30"
         />
         />
       </div>
       </div>
+      <div>
         <div class="model-name" :title="model.modelName">{{ model.modelName }}</div>
         <div class="model-name" :title="model.modelName">{{ model.modelName }}</div>
+        <!-- 标签 -->
+    <div v-if="modelTags.length > 0" class="card-tags">
+      <el-tag
+          v-for="(tag, index) in modelTags"
+          :key="tag"
+          size="small"
+          :type="tagColors[index % tagColors.length]"
+          effect="plain"
+      >{{ tag }}</el-tag>
+    </div>
+      </div>
     </div>
     </div>
 
 
     <!-- 描述 -->
     <!-- 描述 -->
@@ -73,6 +85,15 @@ const billingTagText = computed(() => (isPerCall.value ? '按次收费' : '按
 // 底部 tag 文案
 // 底部 tag 文案
 const priceTagText = computed(() => (isPerCall.value ? '单次价格' : '收费价格'))
 const priceTagText = computed(() => (isPerCall.value ? '单次价格' : '收费价格'))
 
 
+// 模型标签列表
+const modelTags = computed(() => {
+  if (!props.model?.tags) return []
+  return props.model.tags.split(',').map(t => t.trim()).filter(t => t)
+})
+
+// 标签颜色循环（鲜艳色系）
+const tagColors = ['primary', 'success', 'warning', 'danger', '']
+
 function formatPrice(price) {
 function formatPrice(price) {
   if (price === null || price === undefined) return '-'
   if (price === null || price === undefined) return '-'
   const num = Number(price)
   const num = Number(price)
@@ -147,7 +168,7 @@ function formatPrice(price) {
   font-size: 13px;
   font-size: 13px;
   color: #666;
   color: #666;
   line-height: 1.65;
   line-height: 1.65;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   display: -webkit-box;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   -webkit-box-orient: vertical;
@@ -156,6 +177,18 @@ function formatPrice(price) {
   word-break: break-word;
   word-break: break-word;
 }
 }
 
 
+.card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+  margin-top: 2px;
+  .el-tag {
+    margin: 0;
+    font-size: 12px;
+  }
+}
+
 .card-footer {
 .card-footer {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;