diff --git a/src/views/portal/course/Detail.vue b/src/views/portal/course/Detail.vue
index f622409e..ba3ea999 100644
--- a/src/views/portal/course/Detail.vue
+++ b/src/views/portal/course/Detail.vue
@@ -463,23 +463,23 @@ export default {
color: #444444;
}
- //.label-div {
- // margin: 5px 0;
- // min-height: 20px;
- // .label-item {
- // padding: 0px 8px;
- // margin-top: 5px;
- // float: left;
- // line-height: 24px;
- // font-size: 12px;
- // border-radius: 2px;
- // margin-right: 8px;
- // color: #2C68FF;
- // height: 24px;
- // background: rgba(44, 104, 255, 0.06);
- // border: none; // 或者使用 border-color: transparent;
- // }
- //}
+ /*.label-div {
+ margin: 5px 0;
+ min-height: 20px;
+ .label-item {
+ padding: 0px 8px;
+ margin-top: 5px;
+ float: left;
+ line-height: 24px;
+ font-size: 12px;
+ border-radius: 2px;
+ margin-right: 8px;
+ color: #2C68FF;
+ height: 24px;
+ background: rgba(44, 104, 255, 0.06);
+ border: none; // 或者使用 border-color: transparent;
+ }
+ }*/
.label-div {
margin: 5px 0;
min-height: 20px;
diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue
index a62221ca..d038ba3b 100644
--- a/src/views/portal/course/Index.vue
+++ b/src/views/portal/course/Index.vue
@@ -760,7 +760,6 @@ export default {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
},
-
isTagMatched(tag) {
// 检查stagList中是否有匹配的标签
return this.stagList.some(searchTag =>
@@ -2384,9 +2383,6 @@ export default {
border-radius: 8px;
height: auto;
min-height: 60px;
- .nav {
- background: #fff;
- }
::v-deep .el-input {
@@ -2707,21 +2703,18 @@ a.custom2 {
}
-
/* 关键字部分匹配高亮样式 */
.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;
@@ -2730,14 +2723,12 @@ a.custom2 {
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;
@@ -2745,6 +2736,4 @@ a.custom2 {
background-color: transparent !important;
}
-
-
diff --git a/src/views/portal/course/qualityCourse.vue b/src/views/portal/course/qualityCourse.vue
index e646c95e..70bfd5f2 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 }}
+
@@ -584,6 +584,132 @@ 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, '\\$&');
+ },
+
// isAllHotTagsSelected() {
// return !this.hotTagsList.some(tag => tag.checked);
@@ -593,7 +719,6 @@ export default {
this.hotTagsList.forEach(tag => {
tag.checked = false;
});
- this.isAllHotTagsSelected = true;
// 清空course.tags
this.course.tags = '';
@@ -603,7 +728,9 @@ export default {
handleTagClick(item, list,type) {
console.info('切换标签 item = ' + item)
this.isAllHotTagsSelected = false;
+
item.checked = !item.checked;
+
// 更新course.tags
const checkedTags = this.hotTagsList.filter(tag => tag.checked);
let tagIds = checkedTags.map(tag => tag.id).join(',');
@@ -2217,4 +2344,38 @@ export default {
color: #387DF7;
}
+
+
+/* 关键字部分匹配高亮样式 */
+.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;
+}