diff --git a/src/components/Course/SmartTagHint.vue b/src/components/Course/SmartTagHint.vue new file mode 100644 index 00000000..af108802 --- /dev/null +++ b/src/components/Course/SmartTagHint.vue @@ -0,0 +1,198 @@ + + + + + diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 5cfd48ca..cdd0efc6 100644 --- a/src/components/Course/courseForm.vue +++ b/src/components/Course/courseForm.vue @@ -74,7 +74,7 @@ :options="sysTypeListMap"> - +
+ + + +
{{ selectedTags.length }}/5 @@ -38,9 +51,17 @@ import { debounce } from 'lodash' import apiCourseTag from '@/api/modules/courseTag.js' import { mapGetters } from 'vuex'; +import SmartTagHint from './SmartTagHint.vue'; export default { + components: { + SmartTagHint + }, props: { + courseName: { + type: String, + default: '' + }, courseId:{ type:String, require:true, @@ -62,6 +83,7 @@ export default { }, data() { return { + showSmartHint: false, selectedTags: [], searchResults: [], loading: false, @@ -138,11 +160,38 @@ export default { // 新增:处理输入框获得焦点事件 async handleFocus() { this.previousTags = [...this.selectedTags]; + this.showSmartHint = true; + setTimeout(() => { + if (this.$refs.smartHint) { + this.$refs.smartHint.showSmartHint(); + } + }, 300); + // 当输入框获得焦点时,加载默认的搜索结果 if (this.sysTypeList.length > 0) { await this.doSearch(''); } }, + handleBlur() { + // 延迟隐藏以避免点击建议标签时立即隐藏 + setTimeout(() => { + this.showSmartHint = false; + }, 200); + }, + handleSmartTagSelect(tag) { + if (this.selectedTags.length >= this.maxTags) { + this.$message.warning(`最多只能添加${this.maxTags}个标签`); + return; + } + + const isDuplicate = this.selectedTags.some(t => t.id === tag.id); + if (!isDuplicate) { + this.selectedTags = [...this.selectedTags, tag]; + this.$emit('change', this.displayTags); + } + }, + + // 新增:重置标签状态的方法 resetTagState() { this.selectedTags = []; @@ -316,10 +365,24 @@ export default { if (tags.length === 0) { this.$message.info('无此标签,按回车键创建') } + // 如果有查询词,显示智能匹配提示 + if (query.trim()) { + this.showSmartMatching(query); + } } finally { this.loading = false } + }, + showSmartMatching(query) { + // 在搜索结果中高亮匹配项 + this.searchResults = this.searchResults.map(tag => { + return { + ...tag, + isSmartMatch: tag.tagName.toLowerCase().includes(query.toLowerCase()) + }; + }); } + } }