+
+
{{courseInfo.studys}}人学习
@@ -458,7 +463,7 @@ export default {
color: #444444;
}
- .label-div {
+ /*.label-div {
margin: 5px 0;
min-height: 20px;
.label-item {
@@ -474,6 +479,25 @@ export default {
background: rgba(44, 104, 255, 0.06);
border: none; // 或者使用 border-color: transparent;
}
+ }*/
+ .label-div {
+ margin: 5px 0;
+ min-height: 20px;
+
+ .keyword-tag {
+ padding: 0px 8px;
+ margin-top: 5px;
+ float: left;
+ line-height: 24px;
+ font-size: 12px;
+ border-radius: 2px;
+ margin-right: 8px;
+ color: #2974D6;
+ height: 24px;
+ background: rgba(41, 116, 214, 0.1);
+ font-weight: 450;
+ display: inline-block;
+ }
}
::v-deep .el-rate__icon {
font-size: 20px;
From 1710e34f89c00c3a74057bd6c370c95b39694a88 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Tue, 11 Nov 2025 14:26:57 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E5=85=A8=E9=83=A8=E9=80=89=E4=B8=AD?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/portal/course/qualityCourse.vue | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
index fc55ffa4..e02d464d 100644
--- a/src/views/portal/course/qualityCourse.vue
+++ b/src/views/portal/course/qualityCourse.vue
@@ -513,6 +513,7 @@ export default {
totalPages: 1,
localSessionKey: this.$xpage.constants.localCourseFiltersKey,
hotTagsList: [],
+ isAllHotTagsSelected: true,
};
},
// 受众需要每次刷新
@@ -584,14 +585,15 @@ export default {
},
methods: {
- isAllHotTagsSelected() {
- return !this.hotTagsList.some(tag => tag.checked);
- },
+ // isAllHotTagsSelected() {
+ // return !this.hotTagsList.some(tag => tag.checked);
+ // },
handleClearHotTags() {
// 清除所有热点标签的选中状态
this.hotTagsList.forEach(tag => {
tag.checked = false;
});
+ this.isAllHotTagsSelected = true;
// 清空course.tags
this.course.tags = '';
@@ -600,6 +602,8 @@ export default {
},
handleTagClick(item, list,type) {
console.info('切换标签 item = ' + item)
+ this.isAllHotTagsSelected = false;
+
item.checked = !item.checked;
// 更新course.tags
From 57d9f9b483685ced8e6b83db858a25847df57422 Mon Sep 17 00:00:00 2001
From: 670788339 <670788339@qq.com>
Date: Tue, 11 Nov 2025 15:42:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E5=BA=93=E6=A0=87?=
=?UTF-8?q?=E7=AD=BE=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/portal/course/Index.vue | 166 +++++++++++++++++++++-
src/views/portal/course/qualityCourse.vue | 166 +++++++++++++++++++++-
2 files changed, 326 insertions(+), 6 deletions(-)
diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index 5a157fe2..d038ba3b 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -184,10 +184,10 @@
v-for="(tag, tagIndex) in cinfo.tagsList"
:key="tagIndex"
size="mini"
- type="info" style="margin: 2px 2px; border-radius: 2px;"
- :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
+ type="info"
+ style="margin: 2px 2px; border-radius: 2px;"
>
- {{ tag }}
+
@@ -634,6 +634,131 @@ export default {
// window.removeEventListener("scroll", this.handleScroll);
},
methods: {
+ getSearchMode() {
+ const hasKeyword = this.keyword && this.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;
+ }
+
+ let highlightedTag = tag;
+
+ searchKeywords.forEach(keyword => {
+ if (tag.includes(keyword)) {
+ const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi');
+ highlightedTag = highlightedTag.replace(regex, '
$1');
+ }
+ });
+
+ 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, '\\$&');
+ },
isTagMatched(tag) {
// 检查stagList中是否有匹配的标签
@@ -2576,4 +2701,39 @@ a.custom2 {
.course-tag-item[style*="color: #387DF7"] {
color: #387DF7 !important;
}
+
+
+/* 关键字部分匹配高亮样式 */
+.keyword-highlight {
+ color: #387DF7 !important;
+ font-weight: bold;
+ background-color: transparent !important;
+}
+/* 导航标签完全匹配高亮样式 */
+.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;
+}
+
diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
index e02d464d..804b1767 100644
--- a/src/views/portal/course/qualityCourse.vue
+++ b/src/views/portal/course/qualityCourse.vue
@@ -170,10 +170,10 @@
v-for="(tag, tagIndex) in cinfo.tagsList"
:key="tagIndex"
size="mini"
- type="info" style="margin: 2px 2px; border-radius: 2px;"
- :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
+ type="info"
+ style="margin: 2px 2px; border-radius: 2px;"
>
- {{ tag }}
+