From 9a6f40b79348a045d2bdb9e0f94126fcf275d38c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Thu, 20 Mar 2025 13:41:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E9=AB=98=E7=BA=A7?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=93=8D=E4=BD=9C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AdvanceSearch/index.vue | 83 ++++++++++++++++----------
 src/views/Jyh/Home/index.vue           | 45 +++++++++-----
 2 files changed, 80 insertions(+), 48 deletions(-)

diff --git a/src/components/AdvanceSearch/index.vue b/src/components/AdvanceSearch/index.vue
index 68f061b..32a1f60 100644
--- a/src/components/AdvanceSearch/index.vue
+++ b/src/components/AdvanceSearch/index.vue
@@ -5,24 +5,24 @@
       <d-row :gutter="16">
         <d-col :span="8">
           <d-form-item field="name" label="软件名称">
-            <d-input placeholder="请输入软件名称" v-model="formData.softwareName"/>
+            <d-input placeholder="请输入软件名称" v-model="formData.softwareName" />
           </d-form-item>
         </d-col>
         <d-col :span="8">
           <d-form-item field="version" label="软件版本">
-            <d-input v-model="formData.softwareVersion"/>
+            <d-input v-model="formData.softwareVersion" />
           </d-form-item>
         </d-col>
         <d-col :span="8">
           <d-form-item field="license" label="license">
-            <d-input placeholder="请输入license名称" v-model="formData.licenseName"/>
+            <d-input placeholder="请输入license名称" v-model="formData.licenseName" />
           </d-form-item>
         </d-col>
       </d-row>
       <d-row :gutter="16">
         <d-col :span="8">
           <d-form-item field="dependency" label="依赖软件名称">
-            <d-input v-model="formData.dependentSoftware"/>
+            <d-input v-model="formData.dependentSoftware" />
           </d-form-item>
         </d-col>
         <d-col :span="8">
@@ -32,27 +32,30 @@
         </d-col>
         <d-col :span="8">
           <d-form-item field="date" label="版本发布日期">
-            <d-range-date-picker-pro v-model="formData.dateRange"  style="width: 100%;"
-            :placeholder="['开始日期', '结束日期']"/>
+            <d-range-date-picker-pro
+              v-model="formData.dateRange"
+              style="width: 100%"
+              :placeholder="['开始日期', '结束日期']"
+            />
           </d-form-item>
         </d-col>
       </d-row>
       <d-row :gutter="16">
         <d-col :span="8">
           <d-form-item field="interestTag" label="兴趣标签">
-            <d-input v-model="formData.interestTag"/>
+            <d-input v-model="formData.interestTag" />
           </d-form-item>
         </d-col>
         <d-col :span="8">
           <d-form-item field="industry" label="行业">
-            <d-input v-model="formData.industry"/>
+            <d-input v-model="formData.industry" />
           </d-form-item>
         </d-col>
       </d-row>
       <slot name="operation">
-        <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
-          <d-button style="width: 96px; height: 32px;" variant="solid" @click="submitForm">搜索</d-button>
-          <d-button style="width: 96px; height: 32px;" @click="cancel">取消</d-button>
+        <gc-form-operation style="display: flex; justify-content: center; gap: 8px">
+          <d-button style="width: 96px; height: 32px" variant="solid" @click="submitForm">搜索</d-button>
+          <d-button style="width: 96px; height: 32px" @click="cancel">取消</d-button>
         </gc-form-operation>
       </slot>
     </d-form>
@@ -60,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineEmits, defineProps, watch } from 'vue';
+import { ref, defineEmits, defineProps, watch, onMounted } from 'vue';
 import { searchLanguageList } from '@/api/jyh';
 const props = defineProps({
   layout: {
@@ -80,27 +83,36 @@ const props = defineProps({
       dateRange: ['', '']
     })
   }
-})
+});
 const emit = defineEmits(['submit', 'cancel', 'update:modelValue']);
 const languageList = ref([]);
 
-const formData = ref({...props.modelValue});
+const formData = ref({ ...props.modelValue });
 
-watch(() => props.modelValue, (newVal) => {
-  if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
-    formData.value = {...newVal};
-  }
-}, { deep: true });
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
+      formData.value = { ...newVal };
+    }
+  },
+  { deep: true }
+);
 
-watch(formData, (newVal) => {
-  if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
-    emit('update:modelValue', {...newVal});
-  }
-}, { deep: true });
+watch(
+  formData,
+  (newVal) => {
+    if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
+      emit('update:modelValue', { ...newVal });
+      localStorage.setItem('searchForm', JSON.stringify(newVal));
+    }
+  },
+  { deep: true }
+);
 
 const submitForm = () => {
   emit('submit', formData.value);
-}
+};
 
 const cancel = () => {
   formData.value = {
@@ -112,20 +124,25 @@ const cancel = () => {
     interestTag: '',
     industry: '',
     dateRange: ['', '']
-  }
+  };
   emit('cancel');
   emit('update:modelValue', formData.value);
-}
+};
 
-const getLanguageList = async() => {
-  const res:any = await searchLanguageList();
+const getLanguageList = async () => {
+  const res: any = await searchLanguageList();
   if (!res.error) {
     languageList.value = res.data.data;
   }
-}
+};
 getLanguageList();
+
+onMounted(() => {
+  const _searchForm = localStorage.getItem('searchForm');
+  if (_searchForm) {
+    formData.value = JSON.parse(_searchForm);
+  }
+});
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index aa5813a..cec6f72 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/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(() => {