fix: 修复页面布局与搜索键盘事件

src/views/Home.vue

@@ -2,11 +2,12 @@
   <div class="home-page" :content-style="contentStyle">
     <n-layout has-sider>
       <n-layout-content class="main-content">
-        <div class="pt-8 px-12 relative hidden lg:block">
+        <div ref="searchRef" class="pt-8 px-12 relative hidden lg:block">
           <n-input-group class="shadow ">
             <n-select class="w-24" size="large" v-model:value="broswer" :options="options"
               @click="cancelSbox"></n-select>
-            <n-input class="flex-1" size="large" autofocus v-model:value="searchWord" @blur="cancelSbox" placeholder="请输入">
+            <n-input class="flex-1" size="large" autofocus v-model:value="searchWord" @blur="cancelSbox"
+              placeholder="请输入">
               <template #suffix>
                 <n-icon size="large">
                   <icon-search />
@@ -34,7 +35,7 @@
           <div ref="navcards"
             class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-2 lg:px-12">
             <n-card embedded
-              class="bg-[#ffffff80] h-24 shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5"
+              class="bg-[#f1fff180] h-24 shadow-md transition-transform duration-300 box-border hover:-translate-y-1.5"
               v-for="(item, index) in navlist" :key="index" @click="goExtra(item.menu_link)"
               @contextmenu.prevent="handdleContextMenu($event, item)">
               <div class="mt-1 w-full flex flex-col items-center cursor-pointer hover:!text-primary">
@@ -192,6 +193,7 @@ const navData = reactive<NavItem>({
 })
 const formNav = ref<any>(null)
 const navcards = ref<any>(null)
+const searchRef = useTemplateRef("searchRef")
 
 // 首页逻辑
 const nav: any = $store.nav.useNavStore()
@@ -280,7 +282,7 @@ function handleInput() {
 function handleKeyup(e: KeyboardEvent) {
   if (!searchBox.value) return
   // 向下箭头
-  if (e.keyCode === 40) {
+  if (e.key == "ArrowDown") {
     if (selecedIdx.value < searchItems.value.length - 1) {
       selecedIdx.value += 1
     } else {
@@ -288,7 +290,7 @@ function handleKeyup(e: KeyboardEvent) {
     }
   }
   // 向上箭头
-  else if (e.keyCode === 38) {
+  else if (e.key == "ArrowUp") {
     if (selecedIdx.value > 0) {
       selecedIdx.value -= 1
     } else {
@@ -296,7 +298,7 @@ function handleKeyup(e: KeyboardEvent) {
     }
   }
   // 回车键
-  else if (e.keyCode === 13) {
+  else if (e.key == "Enter") {
     if (searchItems.value.length > 0) {
       const selectedItem = searchItems.value[selecedIdx.value]
       window.open(selectedItem.menu_link, "_BLANK")
@@ -653,13 +655,21 @@ onMounted(() => {
   ]
   getNavList()
   window.addEventListener('resize', () => {
+    // 获取屏幕高度
+    const screenHeight = window.innerHeight;
+
     contentStyle.value = {
-      height: `calc(100vh - ${nav.navH}px)`
+      height: `${screenHeight - nav.navH}px)`
     }
+    // searchRef的y
+    const searchHeight: number = searchRef.value?.getBoundingClientRect().y || 0
+    // searchRef的高度
+    const searchH: number = searchRef.value?.getBoundingClientRect().height || 0
     navStyle.value = {
-      height: `${navHeight.value}px`
+      height: `${window.innerHeight - (searchHeight + searchH)}px`
     }
   });
+  // 处理键盘按键抬起事件，触发搜索框的键盘导航逻辑
   window.addEventListener('keyup', (e: Event) => {
     handdleKeyup(e)
   });