chore: 个人空间&应用广场搜索优化

src/views/applications-square/applications-square.vue

@@ -45,6 +45,7 @@ const { arrivedState } = useScroll(cardContentWrapRef, { behavior })
 
 ;(function () {
   handleGetMallCategoryList()
+  agentApplicationClassifyIsLoading.value = true
   handleGetAgentApplicationList()
 })()
 
@@ -92,20 +93,22 @@ function handleGetAgentApplicationList(update = false, search = false) {
     pagingInfo: pagingInfo.value,
     categoryId: agentTypeId.value,
   }
-  fetchGetAgentApplicationList<PersonalAppConfigState[]>(payload).then((res) => {
-    agentApplicationList.value = update ? res.data : [...agentApplicationList.value, ...res.data]
-
-    pagingInfo.value = res.pagingInfo as PaginationInfo
+  fetchGetAgentApplicationList<PersonalAppConfigState[]>(payload)
+    .then((res) => {
+      agentApplicationList.value = update ? res.data : [...agentApplicationList.value, ...res.data]
 
-    emptyTableText.value = searchQuery.value
-      ? t('common_module.search_empty_data')
-      : t('personal_space_module.agent_module.agent_list_module.empty_agent_list')
-    emptyTableImage.value =
-      searchQuery.value && agentApplicationList.value.length === 0 ? searchEmptyImage : applicationEmptyImage
+      pagingInfo.value = res.pagingInfo as PaginationInfo
 
-    agentApplicationClassifyIsLoading.value = false
-    agentApplicationBottomIsLoading.value = false
-  })
+      emptyTableText.value = searchQuery.value
+        ? t('common_module.search_empty_data')
+        : t('personal_space_module.agent_module.agent_list_module.empty_agent_list')
+      emptyTableImage.value =
+        searchQuery.value && agentApplicationList.value.length === 0 ? searchEmptyImage : applicationEmptyImage
+    })
+    .finally(() => {
+      agentApplicationClassifyIsLoading.value = false
+      agentApplicationBottomIsLoading.value = false
+    })
 }
 
 function handleCollectOrCancelAgentApplication(agentApplicationItem: PersonalAppConfigState) {
@@ -133,9 +136,31 @@ function handleGetMallCategoryList() {
 function handleToUseAgentApplication(agentId: string) {
   router.push({ name: 'ShareWebApplication', params: { agentId: agentId } })
 }
+
 function handleAddAgentApplications() {
   router.push({ name: 'PersonalAppSetting' })
 }
+
+function handleEnterKeypress(event: KeyboardEvent) {
+  if (event.code === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    if (searchQuery.value.trim() === '') return
+    agentApplicationClassifyIsLoading.value = true
+
+    handleGetAgentApplicationList(true, true)
+  }
+}
+
+function handleSearchGetApplicationList(clear = false) {
+  if (clear) {
+    agentApplicationClassifyIsLoading.value = true
+    searchQuery.value = ''
+  } else {
+    if (searchQuery.value.trim() === '') return
+    agentApplicationClassifyIsLoading.value = true
+  }
+  handleGetAgentApplicationList(true, true)
+}
 </script>
 
 <template>
@@ -154,10 +179,11 @@ function handleAddAgentApplications() {
           :placeholder="t('common_module.search')"
           class="search-input rounded-[26px]! text-[16px]! leading-[32px]! border-[#9ea3ff]! border-[1px] py-[6px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
           clearable
-          @keyup.enter="handleGetAgentApplicationList(true, true)"
+          :on-clear="() => handleSearchGetApplicationList(true)"
+          @keyup.enter="handleEnterKeypress"
         >
           <template #prefix>
-            <div @click="handleGetAgentApplicationList(true)">
+            <div @click="() => handleSearchGetApplicationList(false)">
               <img src="@/assets/images/search.png" width="14" height="14" class="mr-[5px] cursor-pointer" />
             </div>
           </template>
@@ -204,8 +230,8 @@ function handleAddAgentApplications() {
       <n-scrollbar style="max-height: 920px">
         <div>
           <div class="mt-[14px] min-h-[800px]">
-            <div class="flex justify-center">
-              <n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
+            <div v-show="agentApplicationClassifyIsLoading" class="flex h-[500px] items-center justify-center">
+              <n-spin size="large" />
             </div>
             <div
               v-show="!agentApplicationClassifyIsLoading && agentApplicationList.length !== 0"

src/views/personal-space/personal-app/personal-app.vue

@@ -125,6 +125,8 @@ function handleBasePublishingStatusGetAgentList() {
 function handleEnterKeypress(event: KeyboardEvent) {
   if (event.code === 'Enter' && !event.shiftKey) {
     event.preventDefault()
+    if (agentSearchInputValue.value.trim() === '') return
+    agentAppListLoading.value = true
 
     getApplicationList()
   }
@@ -184,9 +186,16 @@ function handleSelectAddType() {
   router.push({ name: 'PersonalAppSetting' })
 }
 
-// function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
-//   console.log('分析', personalApp)
-// }
+function handleSearchGetApplicationList(clear = false) {
+  if (clear) {
+    agentAppListLoading.value = true
+    agentSearchInputValue.value = ''
+  } else {
+    if (agentSearchInputValue.value.trim() === '') return
+    agentAppListLoading.value = true
+  }
+  getApplicationList()
+}
 
 const handleCardContentScrollDebounce = debounce(
   (event: { target: { scrollTop: number; clientHeight: number; scrollHeight: number } }) => {
@@ -198,6 +207,10 @@ const handleCardContentScrollDebounce = debounce(
   },
   200,
 )
+
+// function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
+//   console.log('分析', personalApp)
+// }
 </script>
 
 <template>
@@ -214,6 +227,8 @@ const handleCardContentScrollDebounce = debounce(
         v-model:value="agentSearchInputValue"
         :placeholder="t('common_module.search')"
         class="w-[256px]! h-[32px]!"
+        clearable
+        :on-clear="() => handleSearchGetApplicationList(true)"
         @keypress="handleEnterKeypress"
       >
         <template #suffix>
@@ -222,16 +237,16 @@ const handleCardContentScrollDebounce = debounce(
             size="16"
             fill="#999"
             :stroke-width="3"
-            class="cursor-pointer text-base"
-            @click="getApplicationList()"
+            class="ml-[10px] cursor-pointer text-base"
+            @click="() => handleSearchGetApplicationList(false)"
           />
         </template>
       </NInput>
     </div>
     <n-scrollbar style="max-height: 700px" @scroll="handleCardContentScrollDebounce">
       <div ref="cardContentWrapRef" class="pb-[50px]">
-        <div class="flex justify-center">
-          <n-spin v-show="agentAppListLoading" size="large" />
+        <div v-show="agentAppListLoading" class="flex h-[700px] items-center justify-center">
+          <n-spin size="large" />
         </div>
         <div v-show="!agentAppListLoading" class="mt-[5px]">
           <div v-if="agentAppList.length" class="grid-content grid grid-cols-4">