From 187c26832c7ff7b99c7e7f4f896b15e18392bb6a Mon Sep 17 00:00:00 2001
From: JuneOY <75666139+JuneOY@users.noreply.github.com>
Date: Sun, 28 Apr 2024 10:03:47 +0800
Subject: [PATCH 1/5] fix: typo (#12)

* updata plugin fetch layout

* fix:typo
---
 src/router/guard.ts                           |   4 +-
 src/router/routes.static.ts                   |   2 +-
 src/service/api/test.ts                       |   6 +-
 src/typings/route.d.ts                        |   2 +-
 src/views/demo/QRCode/index.vue               |   2 +-
 src/views/demo/fetch/components/Get.vue       |   4 +-
 .../demo/fetch/components/UseRequest.vue      |   8 +-
 src/views/plugin/fetch/index.vue              | 249 ++++++++++++++++++
 .../setting/menu/components/TableModal.vue    |   8 +-
 9 files changed, 267 insertions(+), 18 deletions(-)
 create mode 100644 src/views/plugin/fetch/index.vue

diff --git a/src/router/guard.ts b/src/router/guard.ts
index 9314fca..30cfcb4 100644
--- a/src/router/guard.ts
+++ b/src/router/guard.ts
@@ -11,8 +11,8 @@ export function setupRouterGuard(router: Router) {
 
   router.beforeEach(async (to, from, next) => {
     // 判断是否是外链，如果是直接打开网页并拦截跳转
-    if (to.meta.herf) {
-      window.open(to.meta.herf)
+    if (to.meta.href) {
+      window.open(to.meta.href)
       return false
     }
     // 开始 loadingBar
diff --git a/src/router/routes.static.ts b/src/router/routes.static.ts
index b406b5f..2aaca6d 100644
--- a/src/router/routes.static.ts
+++ b/src/router/routes.static.ts
@@ -260,7 +260,7 @@ export const staticRoutes: AppRoute.RowRoute[] = [
     'meta.title': 'VueUse（外链）',
     'meta.requiresAuth': true,
     'meta.icon': 'logos:vueuse',
-    'meta.herf': 'https://vueuse.org/guide/',
+    'meta.href': 'https://vueuse.org/guide/',
     'componentPath': 'null',
     'id': 27,
     'pid': 24,
diff --git a/src/service/api/test.ts b/src/service/api/test.ts
index c224885..0d76658 100644
--- a/src/service/api/test.ts
+++ b/src/service/api/test.ts
@@ -1,7 +1,7 @@
 import { blankInstance, request } from '../http'
 
 /* get方法测试 */
-export function fetachGet(params?: any) {
+export function fetchGet(params?: any) {
   return request.Get('/getAPI', { params })
 }
 
@@ -53,7 +53,7 @@ export function dictData() {
 export function getBlob(url: string) {
   const methodInstance = blankInstance.Get<Blob>(url)
   methodInstance.meta = {
-    // 标识为bolb数据
+    // 标识为blob数据
     isBlob: true,
   }
   return methodInstance
@@ -66,7 +66,7 @@ export function downloadFile(url: string) {
     enableDownload: true,
   })
   methodInstance.meta = {
-    // 标识为bolb数据
+    // 标识为blob数据
     isBlob: true,
   }
   return methodInstance
diff --git a/src/typings/route.d.ts b/src/typings/route.d.ts
index e2046dc..d2de6e4 100644
--- a/src/typings/route.d.ts
+++ b/src/typings/route.d.ts
@@ -18,7 +18,7 @@ declare namespace AppRoute {
     /* 菜单排序。 */
     order?: number
     /* 嵌套外链  */
-    herf?: string
+    href?: string
     /** 当前路由不在左侧菜单显示，但需要高亮某个菜单的情况 */
     activeMenu?: string
     /** 当前路由是否会被添加到Tab中 */
diff --git a/src/views/demo/QRCode/index.vue b/src/views/demo/QRCode/index.vue
index c78d1f4..16a19a3 100644
--- a/src/views/demo/QRCode/index.vue
+++ b/src/views/demo/QRCode/index.vue
@@ -5,7 +5,7 @@ const text = ref('nova-admin')
 <template>
   <n-card title="二维码">
     <n-alert :show-icon="false" type="info">
-      使用navieUI - QR Code 实现
+      使用naiveUI - QR Code 实现
     </n-alert>
     <n-qr-code :value="text" />
     <n-input v-model:value="text" :maxlength="60" type="text" />
diff --git a/src/views/demo/fetch/components/Get.vue b/src/views/demo/fetch/components/Get.vue
index 3294639..0ae8ea2 100644
--- a/src/views/demo/fetch/components/Get.vue
+++ b/src/views/demo/fetch/components/Get.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-  fetachGet,
+  fetchGet,
 } from '@/service'
 
 const emit = defineEmits<{
@@ -8,7 +8,7 @@ const emit = defineEmits<{
 }>()
 
 async function pinterEnv() {
-  const res = await fetachGet({ a: 112211, b: false })
+  const res = await fetchGet({ a: 112211, b: false })
   emit('update', res)
 }
 </script>
diff --git a/src/views/demo/fetch/components/UseRequest.vue b/src/views/demo/fetch/components/UseRequest.vue
index 3f8035d..f85dcee 100644
--- a/src/views/demo/fetch/components/UseRequest.vue
+++ b/src/views/demo/fetch/components/UseRequest.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import { useRequest } from 'alova'
 import {
-  fetachGet,
+  fetchGet,
 } from '@/service'
 
 const emit = defineEmits<{
   update: [data: any] // 具名元组语法
 }>()
 
-const { data: fetachGetData, send: sendFetachGet } = useRequest(fetachGet({ a: 112211 }), {
+const { data: fetchGetData, send: sendFetchGet } = useRequest(fetchGet({ a: 112211 }), {
   // 当immediate为false时，默认不发出
   immediate: false,
 })
 
 async function handleRequestHook() {
-  await sendFetachGet()
-  emit('update', fetachGetData.value)
+  await sendFetchGet()
+  emit('update', fetchGetData.value)
 }
 </script>
 
diff --git a/src/views/plugin/fetch/index.vue b/src/views/plugin/fetch/index.vue
new file mode 100644
index 0000000..eb01d36
--- /dev/null
+++ b/src/views/plugin/fetch/index.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { useRequest } from 'alova'
+import {
+  FailedRequest,
+  FailedResponse,
+  FailedResponseWithoutTip,
+  dictData,
+  downloadFile,
+  expiredTokenRequest,
+  fetchDelete,
+  fetchFormPost,
+  fetchGet,
+  fetchPost,
+  fetchPut,
+  fetchUpdateToken,
+  getBlob,
+  withoutToken,
+} from '@/service'
+
+const msg = ref()
+const { data: fetchGetData, send: sendFetchGet } = useRequest(fetchGet({ a: 112211 }), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+
+function handleRequestHook() {
+  sendFetchGet()
+  msg.value = fetchGetData.value
+}
+function pinterEnv() {
+  msg.value = import.meta.env
+}
+async function get() {
+  const res = await fetchGet({ a: 112211, b: false })
+  msg.value = res
+}
+function delete2() {
+  fetchDelete().then((res) => {
+    msg.value = res
+  })
+}
+function post() {
+  const params = {
+    data: '2022-2-2',
+    data1: [],
+    data2: {},
+    data3: '',
+    data4: null,
+    data5: undefined,
+  }
+  fetchPost(params).then((res) => {
+    msg.value = res
+  })
+}
+
+function formPost() {
+  const params = {
+    data: '2022-2-2',
+  }
+  fetchFormPost(params).then((res) => {
+    msg.value = res
+  })
+}
+function put() {
+  const params = {
+    data: '2022-2-2',
+  }
+  fetchPut(params).then((res) => {
+    msg.value = res
+  })
+}
+
+// 测试请求失败
+function failedRequest() {
+  FailedRequest().then((res) => {
+    msg.value = res
+  })
+}
+// 测试业务失败
+function failedResponse() {
+  FailedResponse().then((res) => {
+    msg.value = res
+  })
+}
+// 测试无提示的业务失败
+function failedResponseWithoutTip() {
+  FailedResponseWithoutTip().then((res) => {
+    msg.value = res
+  })
+}
+// token过期
+function expiredToken() {
+  expiredTokenRequest().then((res) => {
+    msg.value = res
+  })
+}
+// 刷新token
+function updataToken() {
+  fetchUpdateToken('test token').then((res) => {
+    msg.value = res
+  })
+}
+// 不携带token的接口
+function withoutTokenRequest() {
+  withoutToken().then((res) => {
+    msg.value = res
+  })
+}
+// 不携带token的接口
+function getDictData() {
+  dictData().then((res) => {
+    msg.value = res
+  })
+}
+// 模拟获取二进制文件
+const imagePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
+function getBlobFile() {
+  getBlob(imagePath.value).then((res) => {
+    msg.value = 'this is blob!'
+    const link = URL.createObjectURL(res)
+    const eleLink = document.createElement('a')
+    eleLink.download = 'okk'
+    eleLink.style.display = 'none'
+    eleLink.href = link
+    document.body.appendChild(eleLink)
+    eleLink.click()
+    document.body.removeChild(eleLink)
+  })
+}
+// 下载大文件获取进度
+const downloadPath = ref('https://suqiqi.oss-cn-beijing.aliyuncs.com/test/video/1.mp4')
+const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(downloadPath.value), {
+  // 当immediate为false时，默认不发出
+  immediate: false,
+})
+const downloadProcess = computed(() => {
+  if (!downloading.value.loaded)
+    return 0
+  return Math.floor(downloading.value.loaded / downloading.value.total * 100)
+})
+</script>
+
+<template>
+  <n-card title="网络请求示例">
+    <n-space vertical :size="12">
+      <pre class="bg-#eee">
+      {{ msg }}
+      </pre>
+      <n-descriptions label-placement="left" bordered>
+        <n-descriptions-item label="检查环境变量">
+          <n-button strong secondary type="success" @click="pinterEnv">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Get">
+          <n-button strong secondary type="success" @click="get">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Post">
+          <n-button strong secondary type="success" @click="post">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="formPost">
+          <n-button strong secondary type="success" @click="formPost">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Delete">
+          <n-button strong secondary type="success" @click="delete2">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="Put">
+          <n-button strong secondary type="success" @click="put">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="useRequest风格">
+          <n-button strong secondary type="success" @click="handleRequestHook">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="不带token的接口">
+          <n-button strong secondary type="success" @click="withoutTokenRequest">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="获取文件下载">
+          <n-button strong secondary type="success" @click="getBlobFile">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="带进度的下载文件" :span="3">
+          <n-space vertical>
+            <n-input v-model:value="downloadPath" />
+            <div>文件大小：{{ downloading.total }}B</div>
+            <div>已下载：{{ downloading.loaded }}B</div>
+            <n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" />
+            <n-space>
+              <n-button strong secondary @click="sendDownloadFile">
+                开始下载
+              </n-button>
+              <n-button strong secondary type="warning" @click="abortDownloadFile">
+                中断下载
+              </n-button>
+            </n-space>
+          </n-space>
+        </n-descriptions-item>
+        <n-descriptions-item label="转换请求数据">
+          <n-button strong secondary type="success" @click="getDictData">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误状态码">
+          <n-button strong secondary type="error" @click="failedRequest">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误业务码">
+          <n-button strong secondary type="error" @click="failedResponse">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="失败-错误业务码(无提示)">
+          <n-button strong secondary type="error" @click="failedResponseWithoutTip">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="401-token过期">
+          <n-button strong secondary @click="expiredToken">
+            click
+          </n-button>
+        </n-descriptions-item>
+        <n-descriptions-item label="refresh token">
+          <n-button strong secondary @click="updataToken">
+            click
+          </n-button>
+        </n-descriptions-item>
+      </n-descriptions>
+      <n-alert title="关于401-token失效刷新" type="warning">
+        请在控制台将网络速率设置为最低（1kb左右）后点击查看，否则会造成请求大量发送
+      </n-alert>
+    </n-space>
+  </n-card>
+</template>
+
+<style scoped></style>
diff --git a/src/views/setting/menu/components/TableModal.vue b/src/views/setting/menu/components/TableModal.vue
index 6463b20..945bf15 100644
--- a/src/views/setting/menu/components/TableModal.vue
+++ b/src/views/setting/menu/components/TableModal.vue
@@ -32,7 +32,7 @@ const defaultFormModal: AppRoute.RowRoute = {
   'meta.keepAlive': false,
   'meta.hide': false,
   'meta.order': undefined,
-  'meta.herf': undefined,
+  'meta.href': undefined,
   'meta.activeMenu': undefined,
   'meta.withoutTab': true,
   'meta.pinTab': false,
@@ -160,7 +160,7 @@ const rules = {
     message: '请输入菜单标题',
     trigger: 'blur',
   },
-  'meta.herf': {
+  'meta.href': {
     validator(rule: FormItemRule, value: string) {
       if (!new RegExp(Regex.Url).test(value))
         return new Error('请输入正确的URL地址')
@@ -244,12 +244,12 @@ const options = [
           </template>
           <n-input-number v-model:value="formModel['meta.order']" />
         </n-form-item-grid-item>
-        <n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" path="meta.herf">
+        <n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" path="meta.href">
           <template #label>
             外链页面
             <HelpInfo message="填写后，点击菜单将跳转到该地址，组件路径任意填写" />
           </template>
-          <n-input v-model:value="formModel['meta.herf']" placeholder="Eg: https://example.com" />
+          <n-input v-model:value="formModel['meta.href']" placeholder="Eg: https://example.com" />
         </n-form-item-grid-item>
         <n-form-item-grid-item :span="1" label="登录访问" path="meta.requiresAuth">
           <n-switch v-model:value="formModel['meta.requiresAuth']" />

From 61bbdedec1c704f61df25ebaa0a9edd9f3874972 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sun, 28 Apr 2024 10:06:58 +0800
Subject: [PATCH 2/5] fix: delete `plugin/fetch`

---
 src/views/plugin/fetch/index.vue | 249 -------------------------------
 1 file changed, 249 deletions(-)
 delete mode 100644 src/views/plugin/fetch/index.vue

diff --git a/src/views/plugin/fetch/index.vue b/src/views/plugin/fetch/index.vue
deleted file mode 100644
index eb01d36..0000000
--- a/src/views/plugin/fetch/index.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<script setup lang="ts">
-import { useRequest } from 'alova'
-import {
-  FailedRequest,
-  FailedResponse,
-  FailedResponseWithoutTip,
-  dictData,
-  downloadFile,
-  expiredTokenRequest,
-  fetchDelete,
-  fetchFormPost,
-  fetchGet,
-  fetchPost,
-  fetchPut,
-  fetchUpdateToken,
-  getBlob,
-  withoutToken,
-} from '@/service'
-
-const msg = ref()
-const { data: fetchGetData, send: sendFetchGet } = useRequest(fetchGet({ a: 112211 }), {
-  // 当immediate为false时，默认不发出
-  immediate: false,
-})
-
-function handleRequestHook() {
-  sendFetchGet()
-  msg.value = fetchGetData.value
-}
-function pinterEnv() {
-  msg.value = import.meta.env
-}
-async function get() {
-  const res = await fetchGet({ a: 112211, b: false })
-  msg.value = res
-}
-function delete2() {
-  fetchDelete().then((res) => {
-    msg.value = res
-  })
-}
-function post() {
-  const params = {
-    data: '2022-2-2',
-    data1: [],
-    data2: {},
-    data3: '',
-    data4: null,
-    data5: undefined,
-  }
-  fetchPost(params).then((res) => {
-    msg.value = res
-  })
-}
-
-function formPost() {
-  const params = {
-    data: '2022-2-2',
-  }
-  fetchFormPost(params).then((res) => {
-    msg.value = res
-  })
-}
-function put() {
-  const params = {
-    data: '2022-2-2',
-  }
-  fetchPut(params).then((res) => {
-    msg.value = res
-  })
-}
-
-// 测试请求失败
-function failedRequest() {
-  FailedRequest().then((res) => {
-    msg.value = res
-  })
-}
-// 测试业务失败
-function failedResponse() {
-  FailedResponse().then((res) => {
-    msg.value = res
-  })
-}
-// 测试无提示的业务失败
-function failedResponseWithoutTip() {
-  FailedResponseWithoutTip().then((res) => {
-    msg.value = res
-  })
-}
-// token过期
-function expiredToken() {
-  expiredTokenRequest().then((res) => {
-    msg.value = res
-  })
-}
-// 刷新token
-function updataToken() {
-  fetchUpdateToken('test token').then((res) => {
-    msg.value = res
-  })
-}
-// 不携带token的接口
-function withoutTokenRequest() {
-  withoutToken().then((res) => {
-    msg.value = res
-  })
-}
-// 不携带token的接口
-function getDictData() {
-  dictData().then((res) => {
-    msg.value = res
-  })
-}
-// 模拟获取二进制文件
-const imagePath = ref('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80')
-function getBlobFile() {
-  getBlob(imagePath.value).then((res) => {
-    msg.value = 'this is blob!'
-    const link = URL.createObjectURL(res)
-    const eleLink = document.createElement('a')
-    eleLink.download = 'okk'
-    eleLink.style.display = 'none'
-    eleLink.href = link
-    document.body.appendChild(eleLink)
-    eleLink.click()
-    document.body.removeChild(eleLink)
-  })
-}
-// 下载大文件获取进度
-const downloadPath = ref('https://suqiqi.oss-cn-beijing.aliyuncs.com/test/video/1.mp4')
-const { downloading, abort: abortDownloadFile, send: sendDownloadFile } = useRequest(downloadFile(downloadPath.value), {
-  // 当immediate为false时，默认不发出
-  immediate: false,
-})
-const downloadProcess = computed(() => {
-  if (!downloading.value.loaded)
-    return 0
-  return Math.floor(downloading.value.loaded / downloading.value.total * 100)
-})
-</script>
-
-<template>
-  <n-card title="网络请求示例">
-    <n-space vertical :size="12">
-      <pre class="bg-#eee">
-      {{ msg }}
-      </pre>
-      <n-descriptions label-placement="left" bordered>
-        <n-descriptions-item label="检查环境变量">
-          <n-button strong secondary type="success" @click="pinterEnv">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Get">
-          <n-button strong secondary type="success" @click="get">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Post">
-          <n-button strong secondary type="success" @click="post">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="formPost">
-          <n-button strong secondary type="success" @click="formPost">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Delete">
-          <n-button strong secondary type="success" @click="delete2">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="Put">
-          <n-button strong secondary type="success" @click="put">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="useRequest风格">
-          <n-button strong secondary type="success" @click="handleRequestHook">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="不带token的接口">
-          <n-button strong secondary type="success" @click="withoutTokenRequest">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="获取文件下载">
-          <n-button strong secondary type="success" @click="getBlobFile">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="带进度的下载文件" :span="3">
-          <n-space vertical>
-            <n-input v-model:value="downloadPath" />
-            <div>文件大小：{{ downloading.total }}B</div>
-            <div>已下载：{{ downloading.loaded }}B</div>
-            <n-progress type="line" indicator-placement="inside" :percentage="downloadProcess" />
-            <n-space>
-              <n-button strong secondary @click="sendDownloadFile">
-                开始下载
-              </n-button>
-              <n-button strong secondary type="warning" @click="abortDownloadFile">
-                中断下载
-              </n-button>
-            </n-space>
-          </n-space>
-        </n-descriptions-item>
-        <n-descriptions-item label="转换请求数据">
-          <n-button strong secondary type="success" @click="getDictData">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误状态码">
-          <n-button strong secondary type="error" @click="failedRequest">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误业务码">
-          <n-button strong secondary type="error" @click="failedResponse">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="失败-错误业务码(无提示)">
-          <n-button strong secondary type="error" @click="failedResponseWithoutTip">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="401-token过期">
-          <n-button strong secondary @click="expiredToken">
-            click
-          </n-button>
-        </n-descriptions-item>
-        <n-descriptions-item label="refresh token">
-          <n-button strong secondary @click="updataToken">
-            click
-          </n-button>
-        </n-descriptions-item>
-      </n-descriptions>
-      <n-alert title="关于401-token失效刷新" type="warning">
-        请在控制台将网络速率设置为最低（1kb左右）后点击查看，否则会造成请求大量发送
-      </n-alert>
-    </n-space>
-  </n-card>
-</template>
-
-<style scoped></style>

From 1ccc3f371ac3bd933a6e501624d9ca937b142d1b Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sun, 5 May 2024 16:21:07 +0800
Subject: [PATCH 3/5] feat: perfect search modal

---
 locales/en_US.json                       |   3 +-
 locales/zh_CN.json                       |   3 +-
 src/layouts/components/header/Search.vue | 184 ++++++++++++++++++++---
 src/styles/index.css                     |   1 +
 src/styles/navie.css                     |   3 +
 5 files changed, 170 insertions(+), 24 deletions(-)
 create mode 100644 src/styles/navie.css

diff --git a/locales/en_US.json b/locales/en_US.json
index 2e055e5..0a0177a 100644
--- a/locales/en_US.json
+++ b/locales/en_US.json
@@ -4,7 +4,8 @@
     "confirm": "Confirm",
     "close": "Closure",
     "reload": "Refresh",
-    "choose": "Choose"
+    "choose": "Choose",
+    "navigate": "Navigate"
   },
   "app": {
     "loginOut": "Login out",
diff --git a/locales/zh_CN.json b/locales/zh_CN.json
index 7320587..ff451b0 100644
--- a/locales/zh_CN.json
+++ b/locales/zh_CN.json
@@ -4,7 +4,8 @@
     "cancel": "取消",
     "reload": "刷新",
     "close": "关闭",
-    "choose": "选择"
+    "choose": "选择",
+    "navigate": "切换"
   },
   "app": {
     "loginOut": "退出登录",
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index e840ec2..35b0146 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -1,20 +1,44 @@
 <script setup lang="ts">
-import { NFlex, NTag, NText } from 'naive-ui'
 import { useRouteStore } from '@/store'
-import { renderIcon } from '@/utils'
+import { useBoolean } from '@/hooks'
 
 const routeStore = useRouteStore()
+
+// 搜索值
 const searchValue = ref('')
 
+// 选中索引
+const selectedIndex = ref<number>(0)
+
+const { bool: showModal, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean(false)
+
+const { ctrl_k, arrowup, arrowdown, enter/* keys you want to monitor */ } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown')
+      e.preventDefault()
+  },
+})
+
+// 监听全局热键
+watchEffect(() => {
+  if (ctrl_k.value)
+    toggleModal()
+})
+
 const { t } = useI18n()
 
+// 计算符合条件的菜单选项
 const options = computed(() => {
+  if (!searchValue.value)
+    return []
+
   return routeStore.rowRoutes.filter((item) => {
     const conditions = [
       t(`route.${String(item.name)}`, item['meta.title'] || item.name)?.includes(searchValue.value),
       item.path?.includes(searchValue.value),
     ]
-    return conditions.some(condition => condition)
+    return conditions.some(condition => !item['meta.hide'] && condition)
   }).map((item) => {
     return {
       label: t(`route.${String(item.name)}`, item['meta.title'] || item.name),
@@ -24,36 +48,152 @@ const options = computed(() => {
   })
 })
 
-function renderLabel(option: any) {
-  return h(NFlex, {}, {
-    default: () => [
-      h(NTag, { size: 'small', type: 'primary', bordered: false }, { icon: renderIcon(option.icon), default: () => option.label }),
-      h(NText, { depth: 3 }, { default: () => option.value }),
-    ],
-  })
+const router = useRouter()
+
+// 关闭回调
+function handleClose() {
+  searchValue.value = ''
+  selectedIndex.value = 0
+  closeModal()
 }
 
-const router = useRouter()
+// 输入框改变，索引重置
+function handleInputChange() {
+  selectedIndex.value = 0
+}
+
+// 选择菜单选项
 function handleSelect(value: string) {
+  handleClose()
   router.push(value)
   nextTick(() => {
     searchValue.value = ''
   })
 }
+
+watchEffect(() => {
+  // 没有打开弹窗或没有搜索结果时，不操作
+  if (!showModal.value || !options.value.length)
+    return
+
+  if (arrowup.value)
+    handleArrowup()
+
+  if (arrowdown.value)
+    handleArrowdown()
+
+  if (enter.value)
+    handleEnter()
+})
+
+const scrollbarRef = ref()
+
+// 上箭头操作
+function handleArrowup() {
+  if (selectedIndex.value === 0)
+    selectedIndex.value = options.value.length - 1
+
+  else
+    selectedIndex.value--
+
+  nextTick(() => {
+    scrollbarRef.value?.scrollTo({
+      top: selectedIndex.value * 70,
+    })
+  })
+}
+
+// 下箭头操作
+function handleArrowdown() {
+  if (selectedIndex.value === options.value.length - 1)
+    selectedIndex.value = 0
+
+  else
+    selectedIndex.value++
+
+  nextTick(() => {
+    scrollbarRef.value?.scrollTo({
+      top: selectedIndex.value * 70,
+    })
+  })
+}
+
+// 回车键操作
+function handleEnter() {
+  const target = options.value[selectedIndex.value]
+  if (target)
+    handleSelect(target.value)
+}
 </script>
 
 <template>
-  <n-auto-complete
-    v-model:value="searchValue" class="w-20em m-r-1em" :input-props="{
-      autocomplete: 'disabled',
-    }" :options="options" :render-label="renderLabel" :placeholder="$t('app.searchPlaceholder')" clearable @select="handleSelect"
+  <CommonWrapper @click="openModal">
+    <icon-park-outline-search /><n-tag round size="small" class="font-mono cursor-pointer">
+      CtrlK
+    </n-tag>
+  </CommonWrapper>
+  <n-modal
+    v-model:show="showModal"
+    class="w-560px fixed top-100px inset-x-0"
+    size="small"
+    preset="card"
+    :segmented="{
+      content: true,
+      footer: true,
+    }"
+    :closable="false"
+    @after-leave="handleClose"
   >
-    <template #prefix>
-      <n-icon>
-        <icon-park-outline-search />
-      </n-icon>
+    <template #header>
+      <n-input v-model:value="searchValue" :placeholder="$t('app.searchPlaceholder')" clearable size="large" @input="handleInputChange">
+        <template #prefix>
+          <n-icon>
+            <icon-park-outline-search />
+          </n-icon>
+        </template>
+      </n-input>
     </template>
-  </n-auto-complete>
-</template>
+    <n-scrollbar ref="scrollbarRef" class="h-600px">
+      <ul
+        v-if="options.length"
+        class="flex flex-col gap-8px p-1 p-r-3"
+      >
+        <n-el
+          v-for="(option, index) in options"
+          :key="option.value" tag="li" role="option"
+          class="cursor-pointer shadow h-62px"
+          :class="{ 'text-[var(--base-color)] bg-[var(--primary-color-hover)]': index === selectedIndex }"
+          @click="handleSelect(option.value)"
+          @mouseover.stop="selectedIndex = index"
+        >
+          <div class="grid grid-rows-2 grid-cols-[40px_1fr_30px] h-full p-2">
+            <nova-icon :icon="option.icon" class="row-span-2 place-self-center" />
+            <span>{{ option.label }}</span>
+            <icon-park-outline-right class="row-span-2 place-self-center" />
+            <span class="op-70">{{ option.value }}</span>
+          </div>
+        </n-el>
+      </ul>
 
-<style scoped></style>
+      <n-empty v-else size="large" class="h-600px flex-center" />
+    </n-scrollbar>
+
+    <template #footer>
+      <n-flex>
+        <div class="flex-y-center gap-1">
+          <svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" /></g></svg>
+          <span>{{ $t('common.choose') }}</span>
+        </div>
+        <div class="flex-y-center gap-1">
+          <svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" /></g></svg>
+          <svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" /></g></svg>
+          <span>{{ $t('common.navigate') }}</span>
+        </div>
+        <div class="flex-y-center gap-1">
+          <svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" /></g></svg>
+          <span>{{ $t('common.close') }}</span>
+        </div>
+      </n-flex>
+    </template>
+  </n-modal>
+</template>
diff --git a/src/styles/index.css b/src/styles/index.css
index c09a6a2..1402238 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1,5 +1,6 @@
 @import './reset.css';
 @import './transition.css';
+@import './navie.css';
 
 html,
 body,
diff --git a/src/styles/navie.css b/src/styles/navie.css
new file mode 100644
index 0000000..cae5ce5
--- /dev/null
+++ b/src/styles/navie.css
@@ -0,0 +1,3 @@
+.n-modal-mask {
+  backdrop-filter: blur(2px);
+}

From 1387db71bcac55fde934edc8f3c1f4212a440490 Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Sun, 5 May 2024 16:50:57 +0800
Subject: [PATCH 4/5] fix: update `relaease` node version

---
 .github/workflows/release.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 546964b..a7cfe06 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -15,11 +15,12 @@ jobs:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0
+          node-version: 20.x
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 20.x
 
-      - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
+      - run: npx changelogithub
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

From 8ae6acd62d0c4c982d44a9a09022e9acbec3caef Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Mon, 6 May 2024 10:38:25 +0800
Subject: [PATCH 5/5] fix: modify search modal height

---
 .env                                     | 2 +-
 src/layouts/components/header/Search.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.env b/.env
index c2e5f60..9889029 100644
--- a/.env
+++ b/.env
@@ -5,7 +5,7 @@ VITE_APP_NAME=Nova - Admin
 # 路由模式
 VITE_ROUTE_MODE = web
 # 权限路由模式: static ｜ dynamic
-VITE_AUTH_ROUTE_MODE=static
+VITE_AUTH_ROUTE_MODE=dynamic
 
 # 设置登陆后跳转地址
 VITE_HOME_PATH = /dashboard/workbench
diff --git a/src/layouts/components/header/Search.vue b/src/layouts/components/header/Search.vue
index 35b0146..e0dce1b 100644
--- a/src/layouts/components/header/Search.vue
+++ b/src/layouts/components/header/Search.vue
@@ -134,7 +134,7 @@ function handleEnter() {
   </CommonWrapper>
   <n-modal
     v-model:show="showModal"
-    class="w-560px fixed top-100px inset-x-0"
+    class="w-560px fixed top-60px inset-x-0"
     size="small"
     preset="card"
     :segmented="{
@@ -153,7 +153,7 @@ function handleEnter() {
         </template>
       </n-input>
     </template>
-    <n-scrollbar ref="scrollbarRef" class="h-600px">
+    <n-scrollbar ref="scrollbarRef" class="h-450px">
       <ul
         v-if="options.length"
         class="flex flex-col gap-8px p-1 p-r-3"
@@ -175,7 +175,7 @@ function handleEnter() {
         </n-el>
       </ul>
 
-      <n-empty v-else size="large" class="h-600px flex-center" />
+      <n-empty v-else size="large" class="h-450px flex-center" />
     </n-scrollbar>
 
     <template #footer>