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; }