From 846b6132f6402545ec74e958de62da0b0ff57192 Mon Sep 17 00:00:00 2001 From: 670788339 <670788339@qq.com> Date: Tue, 11 Nov 2025 15:00:27 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/portal/course/Index.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue index bbc0f1bb..ebb058f7 100644 --- a/src/views/portal/course/Index.vue +++ b/src/views/portal/course/Index.vue @@ -635,7 +635,9 @@ export default { }, methods: { highlightTagKeyword(tag) { + console.info('高亮显示 ' + tag) if (!this.stagList || this.stagList.length === 0) { + console.info('高亮显示 this.stagList.length = ' + this.stagList.length) return tag; // 没有搜索条件时返回原标签 } @@ -644,6 +646,8 @@ export default { searchTag.tagName || searchTag.name ).filter(keyword => keyword && keyword.trim()); + console.info('高亮显示 searchKeywords = ' + searchKeywords) + if (searchKeywords.length === 0) { return tag; // 没有有效关键字时返回原标签 } @@ -658,7 +662,7 @@ export default { highlightedTag = highlightedTag.replace(regex, '$1'); } }); - + console.info('高亮显示 highlightedTag = ' + highlightedTag) return highlightedTag; }, // 辅助方法：转义正则表达式特殊字符 From 67147db953ae5ddac93b447fc3922ba7a3dc2f6e Mon Sep 17 00:00:00 2001 From: 670788339 <670788339@qq.com> Date: Tue, 11 Nov 2025 15:11:52 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/portal/course/Index.vue | 86 ++++++++++++++++++++++++------- 1 file changed, 67 insertions(+), 19 deletions(-) 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; } From be2bc822f487ffc7216b2141b24a3e8c720fdde8 Mon Sep 17 00:00:00 2001 From: 670788339 <670788339@qq.com> Date: Tue, 11 Nov 2025 15:27:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/portal/course/Index.vue | 105 ++++++++++++++++++++++++------ 1 file changed, 85 insertions(+), 20 deletions(-) diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue index 7d1e72fe..a62221ca 100644 --- a/src/views/portal/course/Index.vue +++ b/src/views/portal/course/Index.vue @@ -634,34 +634,43 @@ export default { // window.removeEventListener("scroll", this.handleScroll); }, methods: { - // 判断是否是通过搜索关键字（而不是导航标签） - isKeywordSearch() { - // 如果有keyword且没有其他类型的选中项，则认为是关键字搜索 + getSearchMode() { const hasKeyword = this.keyword && this.keyword.trim() !== ''; - const hasOtherSelections = this.stagList.some(tag => - tag.type !== 0 && tag.checked // 除了关键字类型(0)以外的选中项 - ); - return hasKeyword && !hasOtherSelections; + // 检查是否有导航标签被选中 + 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) { - if (!this.stagList || this.stagList.length === 0) { - return tag; - } + const searchMode = this.getSearchMode(); - // 如果是关键字搜索模式，进行部分匹配高亮 - if (this.isKeywordSearch()) { - return this.highlightPartialMatch(tag); - } - // 否则进行完全匹配高亮 - else { - return this.highlightExactMatch(tag); + 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) // 只处理关键字类型 @@ -684,10 +693,10 @@ export default { return highlightedTag; }, - // 完全匹配高亮（导航标签模式） + // 完全匹配高亮（纯导航标签模式） highlightExactMatch(tag) { const isMatched = this.stagList.some(searchTag => { - // 排除关键字类型，只检查导航标签 + // 只检查导航标签类型 if (searchTag.type === 0) return false; const searchName = searchTag.tagName || searchTag.name; @@ -701,6 +710,51 @@ export default { 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, '\\$&'); @@ -2652,6 +2706,8 @@ a.custom2 { color: #387DF7 !important; } + + /* 关键字部分匹配高亮样式 */ .keyword-highlight { color: #387DF7 !important; @@ -2666,6 +2722,15 @@ a.custom2 { 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;