feat: 菜单右上角加一个搜索图标

Author: yi-boide

src/components/RouterSearch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <ElDialog v-model="showSearch" :show-close="false" title="菜单搜索">
+  <ElDialog v-if="isModal" v-model="showSearch" :show-close="false" title="菜单搜索">
     <el-select
       filterable
       :reserve-keyword="false"
@@ -17,11 +17,34 @@
       />
     </el-select>
   </ElDialog>
+  <div v-else class="custom-hover" @click.stop="showTopSearch = !showTopSearch">
+    <Icon icon="ep:search" />
+    <el-select
+      filterable
+      :reserve-keyword="false"
+      remote
+      placeholder="请输入菜单内容"
+      :remote-method="remoteMethod"
+      class="overflow-hidden transition-all-600"
+      :class="showTopSearch ? 'w-220px ml2' : 'w-0'"
+      @change="handleChange"
+    >
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
+defineProps({
+  isModal: {
+    type: Boolean,
+    default: true
+  }
+})
+
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
+const showTopSearch = ref(false) // 是否显示顶部搜索框
 const value: Ref = ref('') // 用户输入的值
 
 const routers = router.getRoutes() // 路由对象
@@ -50,14 +73,21 @@ function remoteMethod(data) {
 
 function handleChange(path) {
   router.push({ path })
+  hiddenTopSearch();
+}
+
+function hiddenTopSearch() {
+  showTopSearch.value = false
 }
 
 onMounted(() => {
   window.addEventListener('keydown', listenKey)
+  window.addEventListener('click', hiddenTopSearch)
 })
 
 onUnmounted(() => {
   window.removeEventListener('keydown', listenKey)
+  window.removeEventListener('click', hiddenTopSearch)
 })
 
 // 监听 ctrl + k

src/layout/components/ToolHeader.vue

@@ -7,6 +7,7 @@ import { Screenfull } from '@/layout/components/Screenfull'
 import { Breadcrumb } from '@/layout/components/Breadcrumb'
 import { SizeDropdown } from '@/layout/components/SizeDropdown'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+import RouterSearch from '@/components/RouterSearch/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -25,6 +26,9 @@ const hamburger = computed(() => appStore.getHamburger)
 // 全屏图标
 const screenfull = computed(() => appStore.getScreenfull)
 
+// 搜索图片
+const search = computed(() => appStore.search)
+
 // 尺寸图标
 const size = computed(() => appStore.getSize)
 
@@ -61,6 +65,7 @@ export default defineComponent({
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}
+          {search.value ? (<RouterSearch isModal={false} />) : undefined}
           {size.value ? (
             <SizeDropdown class="custom-hover" color="var(--top-header-text-color)"></SizeDropdown>
           ) : undefined}

src/store/modules/app.ts

@@ -16,6 +16,7 @@ interface AppState {
   uniqueOpened: boolean
   hamburger: boolean
   screenfull: boolean
+  search: boolean
   size: boolean
   locale: boolean
   message: boolean
@@ -52,6 +53,7 @@ export const useAppStore = defineStore('app', {
       uniqueOpened: true, // 是否只保持一个子菜单的展开
       hamburger: true, // 折叠图标
       screenfull: true, // 全屏图标
+      search: true, // 搜索图标
       size: true, // 尺寸图标
       locale: true, // 多语言图标
       message: true, // 消息图标