fix: 首页高级搜索操作优化

src/views/Jyh/Home/index.vue

@@ -41,14 +41,14 @@
             </d-dropdown>
           </template>
           <template #append>
-            <div class="advanced-search" @click="openAdvancedSearch">
-              <span>高级筛选</span>
-              <d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
-              <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
+            <div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
+              <span class="close-isopen">高级筛选</span>
+              <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>
+              <d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
             </div>
           </template>
         </d-input>
-        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" :offset="offset">
+        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" :offset="offset" :clickOutside="closeOutside">
           <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px' }">
             <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
               <template #title>
@@ -87,7 +87,9 @@
                     @click="openWarningDetail(item, index)"
                   >
                     <span>{{ item.subject }}</span>
-                    <d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{ tagMap[item.importance].text }}</d-tag>
+                    <d-tag v-if="item.importance" :color="tagMap[item.importance].color" size="sm">{{
+                      tagMap[item.importance].text
+                    }}</d-tag>
                   </div>
                   <div class="time-container">
                     <d-icon name="icon-time"></d-icon>
@@ -111,7 +113,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useAccount } from '@/utils/hooks/useAccount';
 import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
@@ -132,7 +134,6 @@ const searchOptions = ref(['软件']);
 const offset = ref({ mainAxis: 7, crossAxis: -10 });
 const isKeepOpen = ref(true);
 const isOpen = ref(false);
-const rotate = ref(0);
 const cateRotate = ref(0);
 const infoList = ref([]);
 const warningModalVisable = ref(false);
@@ -142,28 +143,31 @@ const homeSearch = ref(null);
 const dropdownWidth = ref(0);
 const selectedCate = ref('软件');
 const tagMap = {
-  'Critical': {
+  Critical: {
     text: '致命',
     color: '#c7000b'
   },
-  'High': {
+  High: {
     text: '高',
     color: '#f66f6a'
   },
-  'Medium': {
+  Medium: {
     text: '中',
     color: '#fac20a'
   },
-  'Low': {
+  Low: {
     text: '低',
     color: '#5e7ce0'
   }
-}
+};
+
+const rotate = computed(() => {
+  return isOpen.value ? 180 : 0;
+});
 
 const searchInput = ref(null);
 const openAdvancedSearch = () => {
   isOpen.value = !isOpen.value;
-  rotate.value = isOpen.value ? 180 : 0;
   inputGlow.value = isOpen.value;
 };
 
@@ -198,7 +202,7 @@ const updateDropdownWidth = () => {
 };
 
 const search = () => {
-  updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value })
+  updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
   router.push({ name: 'Search' });
 };
 
@@ -236,6 +240,17 @@ onMounted(() => {
   }
 
   updateDropdownWidth();
+
+  document.querySelector('body').onclick = (e) => {
+    const className = e.target.className;
+    if (
+      !className.includes('close-isopen') &&
+      !className.includes('devui-badge__content') &&
+      !className.includes('advanced-search')
+    ) {
+      isOpen.value = false;
+    }
+  };
 });
 
 onBeforeUnmount(() => {