update: 高级搜索组件

src/views/Jyh/Home/index.vue

@@ -6,10 +6,33 @@
         <h1>可信开源代码库</h1>
       </div>
       <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
-        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur"
+        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur" :autocomplete="'off'"
         v-model="searchStr">
           <template #prepend>
-            <d-select v-model="searchType" :options="searchOptions"></d-select>
+            <d-dropdown @toggle="onCateToggle($event)">
+              <div class="flex items-center gap-1 cursor-pointer">
+                {{ selectedCate }} 
+                <d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon>
+              </div>
+              <template #menu>
+                <ul class="list-menu">
+                  <li class="menu-item" @click="onCategoryChange('组件/软件')">组件/软件</li>
+                  <d-dropdown :position="position" :offset="0">
+                    <li class="menu-item">
+                      行业
+                      <i class="icon icon-chevron-right"></i>
+                    </li>
+                    <template #menu>
+                      <ul class="list-menu">
+                        <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
+                            {{ option }}
+                        </li>
+                      </ul>
+                    </template>
+                  </d-dropdown>
+                </ul>
+              </template>
+            </d-dropdown>
           </template>
           <template #append>
             <div class="advanced-search" @click="openAdvancedSearch">
@@ -20,9 +43,13 @@
           </template>
         </d-input>
         <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
-        :offset="offset">
+        :offset="offset" :clickOutside="closeOutside">
           <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
-            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false"/>
+            <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20">
+              <template #title>
+                <span class="title">高级筛选</span>
+              </template>
+            </AdvanceSearch>
           </div>
         </d-dropdown-menu>
         <d-button color="primary" variant="solid" @click="search">搜索</d-button>
@@ -34,15 +61,15 @@
             <img src="@/assets/imgs/home/informIcon@2x.png">
             <span>信息公示</span>
           </div>
-          <a class="devui-link">更多 ></a>
+          <a class="devui-link" @click="checkMore">更多 ></a>
         </div>
         <div class="info-content">
           <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
-            <d-timeline-item style="cursor: pointer;" v-for="(item, index) in infoList" :key="index"
+            <d-timeline-item v-for="(item, index) in infoList" :key="index"
             :dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
               <template #default>
                 <div style="display: flex; justify-content: space-between;">
-                  <div>{{ item.text }}</div>
+                  <div class="cursor-pointer" @click="openWarningDetail(item.text)">{{ item.text }}</div>
                   <div style="display: flex;  align-items: center; gap: 8px;">
                     <d-icon name="icon-time"></d-icon>
                     {{ item.time }}
@@ -69,11 +96,14 @@ const route = useRoute();
 const router = useRouter();
 const inputGlow = ref(false);
 const searchStr = ref('');
+const position = ref(['right-start', 'right-end']);
+const industryOptions = ref(['通信', '军工', '金融', '能源'])
 const searchType = ref('组件/软件');
 const searchOptions = ref(['组件/软件']);
 const offset = ref({ mainAxis: 7 , crossAxis: -10 });
 const isOpen = ref(false);
 const rotate = ref(0);
+const cateRotate = ref(0);
 const infoList = ref([
   {
     text: '公告1',
@@ -97,7 +127,7 @@ const infoList = ref([
 
 const homeSearch = ref(null);
 const dropdownWidth = ref(0);
-
+const selectedCate = ref('组件/软件');
 
 const searchInput = ref(null);
 const openAdvancedSearch = () => {
@@ -106,9 +136,13 @@ const openAdvancedSearch = () => {
   inputGlow.value = isOpen.value;
 };
 
+const closeOutside = () => {
+  return false
+}
+
 const submit = (formData) => {
   isOpen.value = false;
-  router.push({ name: 'Search', query: { ...formData }});
+  router.push({ name: 'Search', query: { ...formData, searchType: selectedCate.value }});
 };
 
 const inputFocus = () => {
@@ -129,6 +163,22 @@ const search = () => {
   router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
 };
 
+const onCategoryChange = (cate) => {
+  selectedCate.value = cate;
+}
+
+const onCateToggle = (event) => {
+  cateRotate.value = event ? 180 : 0;
+}
+
+const checkMore = () => {
+  router.push({ name: 'PersonalCenter' });
+}
+
+const openWarningDetail = (event) => {
+  console.log(event)
+}
+
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
@@ -295,5 +345,27 @@ onBeforeUnmount(() => {
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
+.menu-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--devui-list-item-hover-bg, #f2f5fc);
+      color: var(--devui-list-item-hover-text, #526ecc);
+    }
+}
 
+.list-menu {
+    padding: 8px;
+    margin: 0;
+    width: 100px;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+}
 </style>