日志

src/views/portal/course/Index.vue

@@ -634,37 +634,73 @@ export default {
     // window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    // 判断是否是通过搜索关键字（而不是导航标签）
+    isKeywordSearch() {
+      // 如果有keyword且没有其他类型的选中项，则认为是关键字搜索
+      const hasKeyword = this.keyword && this.keyword.trim() !== '';
+      const hasOtherSelections = this.stagList.some(tag =>
+        tag.type !== 0 && tag.checked // 除了关键字类型(0)以外的选中项
+      );
+
+      return hasKeyword && !hasOtherSelections;
+    },
+
+    // 高亮标签关键字
     highlightTagKeyword(tag) {
-      console.info('高亮显示 ' + tag)
       if (!this.stagList || this.stagList.length === 0) {
-        console.info('高亮显示 this.stagList.length = ' + this.stagList.length)
-        return tag; // 没有搜索条件时返回原标签
+        return tag;
       }
 
-      // 获取所有搜索关键字
-      const searchKeywords = this.stagList.map(searchTag =>
-        searchTag.tagName || searchTag.name
-      ).filter(keyword => keyword && keyword.trim());
+      // 如果是关键字搜索模式，进行部分匹配高亮
+      if (this.isKeywordSearch()) {
+        return this.highlightPartialMatch(tag);
+      }
+      // 否则进行完全匹配高亮
+      else {
+        return this.highlightExactMatch(tag);
+      }
+    },
 
-      console.info('高亮显示 searchKeywords = ' + searchKeywords)
+    // 部分匹配高亮（关键字搜索模式）
+    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>');
         }
       });
-      console.info('高亮显示 highlightedTag = ' + highlightedTag)
+
       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;
+    },
+
     // 辅助方法：转义正则表达式特殊字符
     escapeRegExp(string) {
       return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -2616,20 +2652,32 @@ 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;
+}
+
+/* 确保标签基础样式 */
+.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;
 }