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