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

src/views/portal/course/Detail.vue

@@ -463,23 +463,23 @@ export default {
       color: #444444;
     }
 
-    //.label-div {
-    //  margin: 5px 0;
-    //  min-height: 20px;
-    //  .label-item {
-    //    padding: 0px 8px;
-    //    margin-top: 5px;
-    //    float: left;
-    //    line-height: 24px;
-    //    font-size: 12px;
-    //    border-radius: 2px;
-    //    margin-right: 8px;
-    //    color: #2C68FF;
-    //    height: 24px;
-    //    background: rgba(44, 104, 255, 0.06);
-    //    border: none; // 或者使用 border-color: transparent;
-    //  }
-    //}
+    /*.label-div {
+      margin: 5px 0;
+      min-height: 20px;
+      .label-item {
+        padding: 0px 8px;
+        margin-top: 5px;
+        float: left;
+        line-height: 24px;
+        font-size: 12px;
+        border-radius: 2px;
+        margin-right: 8px;
+        color: #2C68FF;
+        height: 24px;
+        background: rgba(44, 104, 255, 0.06);
+        border: none; // 或者使用 border-color: transparent;
+      }
+    }*/
     .label-div {
       margin: 5px 0;
       min-height: 20px;

src/views/portal/course/Index.vue

@@ -760,7 +760,6 @@ export default {
       return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     },
 
-
     isTagMatched(tag) {
       // 检查stagList中是否有匹配的标签
       return this.stagList.some(searchTag =>
@@ -2384,9 +2383,6 @@ export default {
     border-radius: 8px;
     height: auto;
     min-height: 60px;
-    .nav {
-      background: #fff;
-    }
 
 
     ::v-deep .el-input {
@@ -2707,21 +2703,18 @@ a.custom2 {
 }
 
 
-
 /* 关键字部分匹配高亮样式 */
 .keyword-highlight {
   color: #387DF7 !important;
   font-weight: bold;
   background-color: transparent !important;
 }
-
 /* 导航标签完全匹配高亮样式 */
 .exact-match-highlight {
   color: #387DF7 !important;
   font-weight: bold;
   background-color: transparent !important;
 }
-
 /* 混合模式下的特殊样式（可选） */
 .mixed-exact-highlight {
   color: #387DF7 !important;
@@ -2730,14 +2723,12 @@ a.custom2 {
   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;
@@ -2745,6 +2736,4 @@ a.custom2 {
   background-color: transparent !important;
 }
 
-
-
 </style>

src/views/portal/course/qualityCourse.vue

@@ -170,10 +170,10 @@
                         v-for="(tag, tagIndex) in cinfo.tagsList"
                         :key="tagIndex"
                         size="mini"
-                        type="info"          style="margin: 2px 2px; border-radius: 2px;"
-                        :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
+                        type="info"
+                        style="margin: 2px 2px; border-radius: 2px;"
                       >
-                        {{ tag }}
+                        <span v-html="highlightTagKeyword(tag)"></span>
                       </el-tag>
                     </div>
                     <!-- 关键字 -->
@@ -584,6 +584,132 @@ export default {
     // window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    getSearchMode() {
+      const hasKeyword = this.keyword && this.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;
+      }
+
+      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>');
+        }
+      });
+
+      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, '\\$&');
+    },
+
 
     // isAllHotTagsSelected() {
     //   return !this.hotTagsList.some(tag => tag.checked);
@@ -593,7 +719,6 @@ export default {
       this.hotTagsList.forEach(tag => {
         tag.checked = false;
       });
-      this.isAllHotTagsSelected = true;
       // 清空course.tags
       this.course.tags = '';
 
@@ -603,7 +728,9 @@ export default {
     handleTagClick(item, list,type) {
       console.info('切换标签 item = ' + item)
       this.isAllHotTagsSelected = false;
+
       item.checked = !item.checked;
+
       // 更新course.tags
       const checkedTags = this.hotTagsList.filter(tag => tag.checked);
       let tagIds = checkedTags.map(tag => tag.id).join(',');
@@ -2217,4 +2344,38 @@ export default {
   color: #387DF7;
 }
 
+
+
+/* 关键字部分匹配高亮样式 */
+.keyword-highlight {
+  color: #387DF7 !important;
+  font-weight: bold;
+  background-color: transparent !important;
+}
+/* 导航标签完全匹配高亮样式 */
+.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;
+}
 </style>