【需求 23684】ux: 优化体验

src/components/common/ArticleContent/index.vue

@@ -232,20 +232,27 @@
           </div>
           <!-- 标签 -->
           <div class="flex flex-wrap gap-2 mt-6">
-            <button
+            <el-tooltip
               v-for="(item, index) in articleDetail?.tagNameList"
               :key="item"
-              type="button"
+              :content="canLoadRelatedColumns ? '点击查看相关推荐专栏' : ''"
               :disabled="!canLoadRelatedColumns"
-              :class="[
-                'px-3 py-1 text-sm bg-gradient-to-r from-cyan-100 to-blue-100 text-cyan-600 rounded-full transition-all',
-                canLoadRelatedColumns ? 'cursor-pointer hover:shadow-md' : 'cursor-default',
-                activeKeyword === item ? 'ring-2 ring-cyan-400' : '',
-              ]"
-              @click="handleTagClick(item, articleDetail.tagIdList[index]!)"
+              placement="top"
+              :show-after="200"
             >
-              #{{ item }}
-            </button>
+              <button
+                type="button"
+                :disabled="!canLoadRelatedColumns"
+                :class="[
+                  'px-3 py-1 text-sm bg-gradient-to-r from-cyan-100 to-blue-100 text-cyan-600 rounded-full transition-all',
+                  canLoadRelatedColumns ? 'cursor-pointer hover:shadow-md' : 'cursor-default',
+                  activeKeyword === item ? 'ring-2 ring-cyan-400' : '',
+                ]"
+                @click="handleTagClick(item, articleDetail.tagIdList[index]!)"
+              >
+                #{{ item }}
+              </button>
+            </el-tooltip>
           </div>
 
           <div
@@ -253,7 +260,7 @@
             v-loading="relatedColumnLoading"
             class="mt-4 min-h-24 border-t border-gray-100 pt-4"
           >
-            <h2 class="mb-3 text-sm font-semibold text-gray-700">相关推荐</h2>
+            <h2 class="mb-3 text-sm font-semibold text-gray-700">相关推荐专栏</h2>
             <ul v-if="relatedColumnList.length" class="space-y-2">
               <li v-for="(item, index) in relatedColumnList" :key="item.id">
                 <button
@@ -322,6 +329,7 @@ const loading = computed(() => !articleDetail.title)
 const canLoadRelatedColumns = computed(
   () => articleDetail.type === ArticleTypeEnum.COLUMN && !isAudit,
 )
+// 点击标签后只展示当前关键词下的相关推荐专栏，列表由后端按优先级排好后再截取前三条。
 const activeKeyword = ref('')
 const relatedColumnLoading = ref(false)
 const relatedColumnList = ref<RelatedColumnItemDto[]>([])
@@ -337,7 +345,7 @@ const handleTagClick = async (keyword: string, tagId: number) => {
       articleId: articleDetail.id,
       tagId,
     })
-    relatedColumnList.value = data
+    relatedColumnList.value = data.slice(0, 3)
   } catch {
     relatedColumnList.value = []
   } finally {