diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index bbc0f1bb..a62221ca 100644
--- a/src/views/portal/course/Index.vue
+++ b/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, '$1');
}
@@ -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 `${tag}`;
+ }
+
+ 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 `${tag}`;
+ }
+
+ // 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, '$1');
+ 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;
}