From 9b57e687a86ac72bbdea95137af455aaf9ed73f7 Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Fri, 19 May 2023 17:47:04 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=BC=B9=E7=AA=97=E9=AB=98=E5=BA=A6=20(#559)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: 优化菜单搜索弹窗高度

* chore: 优化键盘`up`、`down`事件
---
 .../search/components/SearchModal.vue         |  2 +-
 .../search/components/SearchResult.vue        | 22 ++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/layout/components/search/components/SearchModal.vue b/src/layout/components/search/components/SearchModal.vue
index 33b5ebba0..f37838181 100644
--- a/src/layout/components/search/components/SearchModal.vue
+++ b/src/layout/components/search/components/SearchModal.vue
@@ -164,7 +164,7 @@ onKeyStroke("ArrowDown", handleDown);
       </template>
     </el-input>
     <div class="search-result-container">
-      <el-scrollbar ref="scrollbarRef" max-height="600px">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
         <el-empty
           v-if="resultOptions.length === 0"
           description="暂无搜索结果"
diff --git a/src/layout/components/search/components/SearchResult.vue b/src/layout/components/search/components/SearchResult.vue
index f2ce8830a..c04bcdf59 100644
--- a/src/layout/components/search/components/SearchResult.vue
+++ b/src/layout/components/search/components/SearchResult.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import { computed, getCurrentInstance } from "vue";
+import { useResizeObserver } from "@vueuse/core";
 import { useEpThemeStoreHook } from "@/store/modules/epTheme";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
 import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
 import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
 
@@ -26,6 +27,8 @@ interface Emits {
   (e: "enter"): void;
 }
 
+const resultRef = ref();
+const innerHeight = ref();
 const props = withDefaults(defineProps<Props>(), {});
 const emit = defineEmits<Emits>();
 const instance = getCurrentInstance()!;
@@ -59,19 +62,32 @@ function handleTo() {
   emit("enter");
 }
 
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, () => {
+  resizeResult();
+});
+
 function handleScroll(index: number) {
   const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
   if (!curInstance) return 0;
   const curRef = curInstance[0] as ElRef;
   const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
-  return scrollTop > 600 ? scrollTop - 600 : 0; // 600 el-scrollbar max-height="600px"
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
 }
 
+onMounted(() => {
+  resizeResult();
+});
+
 defineExpose({ handleScroll });
 </script>
 
 <template>
-  <div class="result">
+  <div ref="resultRef" class="result">
     <div
       v-for="(item, index) in options"
       :key="item.path"