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