From b95b8008f7356aac7c57a0548e1e7d6c605bf987 Mon Sep 17 00:00:00 2001
From: Marvin <454846659@qq.com>
Date: Sat, 25 Nov 2023 03:52:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E5=8F=B3=E4=B8=8A?=
 =?UTF-8?q?=E8=A7=92=E5=8A=A0=E4=B8=80=E4=B8=AA=E6=90=9C=E7=B4=A2=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RouterSearch/index.vue | 32 ++++++++++++++++++++++++++-
 src/layout/components/ToolHeader.vue  |  5 +++++
 src/store/modules/app.ts              |  2 ++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/RouterSearch/index.vue b/src/components/RouterSearch/index.vue
index c12385af..2499dafe 100644
--- a/src/components/RouterSearch/index.vue
+++ b/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
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index ec7882de..8eae6855 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/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}
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 2489f87e..1d0c797a 100644
--- a/src/store/modules/app.ts
+++ b/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, // 消息图标