chore: update

src/modules/course/components/CourseListSearch.vue

@@ -19,31 +19,28 @@ const searchValue = $ref('')
 function querySearch(query: string, cb: (arg: any) => void) {
   searchCourseList({ search_name: query }).then(res => {
     let results = res.data.data || []
-    if (query) {
-      results = searchHighlight(results, query)
-    }
+    results = results.map((item: any) => {
+      item.value = item.name
+      return item
+    })
     cb(results)
   })
 }
 // 设置关键词高亮
-function searchHighlight(list: Record<string, any>, query: string) {
-  return list.map((item: any) => {
-    item.name = item.name.replace(query, `<span class="search-highlight">${query}</span>`)
-    if (item.chapters) {
-      item.chapters = searchHighlight(item.chapters, query)
-    }
-    if (item.sections) {
-      item.sections = searchHighlight(item.sections, query)
-    }
-    return item
-  })
+function searchHighlight(name: string) {
+  return searchValue ? name.replace(searchValue, `<span class="search-highlight">${searchValue}</span>`) : name
 }
 // 搜索选择
 function handleSelect(data: any) {
   params.id = data.id
   emit('change', params)
 }
-
+function handleChange(value: string) {
+  if (!value) {
+    params.id = ''
+    emit('change', params)
+  }
+}
 // 获取学期列表
 let semesterList = $ref<SemesterType[]>([])
 // 整理后的学期列表
@@ -75,21 +72,23 @@ const filterList = computed(() => {
       v-model="searchValue"
       :fetch-suggestions="querySearch"
       :prefix-icon="Search"
+      :trigger-on-focus="false"
       @select="handleSelect"
+      @change="handleChange"
       class="course-search__input"
     >
       <template #default="{ item }">
         <div class="search-course-item">
-          <h4 class="search-course-item__name" v-html="item.name"></h4>
+          <h4 class="search-course-item__name" v-html="searchHighlight(item.name)"></h4>
           <div class="search-course-chapters" v-if="item.chapters?.length">
             <div class="search-course-chapter-item" v-for="chapter in item.chapters" :key="chapter.id">
-              <p class="search-course-chapter-item__name" v-html="chapter.name"></p>
+              <p class="search-course-chapter-item__name" v-html="searchHighlight(chapter.name)"></p>
               <div class="search-course-sections" v-if="chapter.sections?.length">
                 <div
                   class="search-course-section-item"
                   v-for="section in chapter.sections"
                   :key="section.id"
-                  v-html="section.name"
+                  v-html="searchHighlight(section.name)"
                 ></div>
               </div>
             </div>