【需求 23684】ux: 优化体验

src/components/common/ArticleContent/index.vue

@@ -232,9 +232,15 @@
           </div>
           <!-- 标签 -->
           <div class="flex flex-wrap gap-2 mt-6">
-            <button
+            <el-tooltip
               v-for="(item, index) in articleDetail?.tagNameList"
               :key="item"
+              :content="canLoadRelatedColumns ? '点击查看相关推荐专栏' : ''"
+              :disabled="!canLoadRelatedColumns"
+              placement="top"
+              :show-after="200"
+            >
+              <button
                 type="button"
                 :disabled="!canLoadRelatedColumns"
                 :class="[
@@ -246,6 +252,7 @@
               >
                 #{{ 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 {