merge wsw into master

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

Created-by: yfzmpj
Commit-by: 汪少伟
Merged-by: yfzmpj
Description: fix: 首页高级搜索操作优化

See merge request: hk_openRepo/OpenRepo_Portal!54

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%;"
+            <d-range-date-picker-pro
-            :placeholder="['开始日期', '结束日期']"/>
+              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;">
+        <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" variant="solid" @click="submitForm">搜索</d-button>
-          <d-button style="width: 96px; height: 32px;" @click="cancel">取消</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) => {
+watch(
+  () => props.modelValue,
+  (newVal) => {
     if (JSON.stringify(newVal) !== JSON.stringify(formData.value)) {
-    formData.value = {...newVal};
+      formData.value = { ...newVal };
     }
-}, { deep: true });
+  },
+  { deep: true }
+);
 
-watch(formData, (newVal) => {
+watch(
+  formData,
+  (newVal) => {
     if (JSON.stringify(newVal) !== JSON.stringify(props.modelValue)) {
-    emit('update:modelValue', {...newVal});
+      emit('update:modelValue', { ...newVal });
+      localStorage.setItem('searchForm', JSON.stringify(newVal));
     }
-}, { deep: true });
+  },
+  { 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 getLanguageList = async () => {
-  const res:any = await searchLanguageList();
+  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 scoped lang="scss"></style>
-
-</style>

src/views/Jyh/Home/index.vue

@@ -41,14 +41,14 @@
             </d-dropdown>
           </template>
           <template #append>
-            <div class="advanced-search" @click="openAdvancedSearch">
+            <div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
-              <span>高级筛选</span>
+              <span class="close-isopen">高级筛选</span>
-              <d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
+              <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>
-              <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
+              <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';
@@ -133,7 +135,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);
@@ -144,28 +145,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;
 };
 
@@ -200,7 +204,7 @@ const updateDropdownWidth = () => {
 };
 
 const search = () => {
-  updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value })
+  updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
   router.push({ name: 'Search' });
 };
 
@@ -238,6 +242,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(() => {