Merge remote-tracking branch '121/test1024' into test1024

src/views/portal/course/Index.vue

@@ -634,26 +634,57 @@ export default {
     // window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
-    highlightTagKeyword(tag) {
-      if (!this.stagList || this.stagList.length === 0) {
-        return tag; // 没有搜索条件时返回原标签
-      }
+    getSearchMode() {
+      const hasKeyword = this.keyword && this.keyword.trim() !== '';
 
-      // 获取所有搜索关键字
-      const searchKeywords = this.stagList.map(searchTag =>
-        searchTag.tagName || searchTag.name
-      ).filter(keyword => keyword && keyword.trim());
+      // 检查是否有导航标签被选中
+      const hasNavigationTags = this.stagList.some(tag => {
+        // 课程类型(1)、热点标签(14)、分类标签(11,12,13)
+        return [1, 11, 12, 13, 14].includes(tag.type) && tag.checked;
+      });
+
+      if (hasKeyword && hasNavigationTags) {
+        return 'mixed'; // 混合模式：关键字 + 导航标签
+      } else if (hasKeyword) {
+        return 'keyword'; // 纯关键字搜索
+      } else if (hasNavigationTags) {
+        return 'navigation'; // 纯导航标签搜索
+      } else {
+        return 'none'; // 无搜索条件
+      }
+    },
+
+    // 高亮标签关键字
+    highlightTagKeyword(tag) {
+      const searchMode = this.getSearchMode();
+
+      switch (searchMode) {
+        case 'keyword':
+          return this.highlightPartialMatch(tag);
+        case 'navigation':
+          return this.highlightExactMatch(tag);
+        case 'mixed':
+          return this.highlightMixedMode(tag);
+        default:
+          return tag;
+      }
+    },
+
+    // 部分匹配高亮（纯关键字搜索模式）
+    highlightPartialMatch(tag) {
+      const searchKeywords = this.stagList
+        .filter(searchTag => searchTag.type === 0) // 只处理关键字类型
+        .map(searchTag => searchTag.tagName || searchTag.name)
+        .filter(keyword => keyword && keyword.trim());
 
       if (searchKeywords.length === 0) {
-        return tag; // 没有有效关键字时返回原标签
+        return tag;
       }
 
       let highlightedTag = tag;
 
-      // 对每个搜索关键字进行高亮处理
       searchKeywords.forEach(keyword => {
         if (tag.includes(keyword)) {
-          // 使用正则表达式进行全局不区分大小写的匹配
           const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
           highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
         }
@@ -661,6 +692,69 @@ export default {
 
       return highlightedTag;
     },
+
+    // 完全匹配高亮（纯导航标签模式）
+    highlightExactMatch(tag) {
+      const isMatched = this.stagList.some(searchTag => {
+        // 只检查导航标签类型
+        if (searchTag.type === 0) return false;
+
+        const searchName = searchTag.tagName || searchTag.name;
+        return searchName === tag;
+      });
+
+      if (isMatched) {
+        return `<span class="exact-match-highlight">${tag}</span>`;
+      }
+
+      return tag;
+    },
+
+    // 混合模式高亮（关键字 + 导航标签）
+    highlightMixedMode(tag) {
+      // 1. 先检查是否完全匹配导航标签
+      const exactMatched = this.stagList.some(searchTag => {
+        if (searchTag.type === 0) return false;
+
+        const searchName = searchTag.tagName || searchTag.name;
+        return searchName === tag;
+      });
+
+      // 2. 如果完全匹配导航标签，整个标签高亮
+      if (exactMatched) {
+        return `<span class="exact-match-highlight">${tag}</span>`;
+      }
+
+      // 3. 否则检查是否包含关键字，进行部分高亮
+      const searchKeywords = this.stagList
+        .filter(searchTag => searchTag.type === 0)
+        .map(searchTag => searchTag.tagName || searchTag.name)
+        .filter(keyword => keyword && keyword.trim());
+
+      if (searchKeywords.length === 0) {
+        return tag;
+      }
+
+      let highlightedTag = tag;
+      let hasKeywordMatch = false;
+
+      searchKeywords.forEach(keyword => {
+        if (tag.includes(keyword)) {
+          const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
+          highlightedTag = highlightedTag.replace(regex, '<span class="keyword-highlight">$1</span>');
+          hasKeywordMatch = true;
+        }
+      });
+
+      // 4. 如果有关键字匹配，返回部分高亮结果
+      if (hasKeywordMatch) {
+        return highlightedTag;
+      }
+
+      // 5. 都不匹配，返回原标签
+      return tag;
+    },
+
     // 辅助方法：转义正则表达式特殊字符
     escapeRegExp(string) {
       return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -2612,20 +2706,43 @@ a.custom2 {
   color: #387DF7 !important;
 }
 
-/* 添加关键字高亮样式 */
+
+
+/* 关键字部分匹配高亮样式 */
 .keyword-highlight {
   color: #387DF7 !important;
   font-weight: bold;
+  background-color: transparent !important;
 }
 
-/* 确保标签内的样式正确 */
-.course-tags ::v-deep .el-tag {
-  color: #333333;
-}
-
-.course-tags ::v-deep .el-tag .keyword-highlight {
+/* 导航标签完全匹配高亮样式 */
+.exact-match-highlight {
   color: #387DF7 !important;
   font-weight: bold;
+  background-color: transparent !important;
+}
+
+/* 混合模式下的特殊样式（可选） */
+.mixed-exact-highlight {
+  color: #387DF7 !important;
+  font-weight: bold;
+  background-color: #f0f7ff !important;
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+
+/* 确保标签基础样式 */
+.course-tags ::v-deep .el-tag {
+  color: #333333;
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+}
+
+.course-tags ::v-deep .el-tag .keyword-highlight,
+.course-tags ::v-deep .el-tag .exact-match-highlight {
+  color: #387DF7 !important;
+  font-weight: bold;
+  background-color: transparent !important;
 }