From ff4ae8ba5be847aa030363abddcfa9e2aede37ca Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Sat, 23 Nov 2024 00:04:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20SearchMenu=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{SearchFooter.vue => Footer.vue}           |  0
 .../SearchMenu/{SearchModal.vue => Modal.vue}  | 18 +++++++++---------
 .../{SearchResult.vue => Result.vue}           | 11 ++++++-----
 src/components/SearchMenu/index.vue            |  9 +++++----
 4 files changed, 20 insertions(+), 18 deletions(-)
 rename src/components/SearchMenu/{SearchFooter.vue => Footer.vue} (100%)
 rename src/components/SearchMenu/{SearchModal.vue => Modal.vue} (94%)
 rename src/components/SearchMenu/{SearchResult.vue => Result.vue} (92%)

diff --git a/src/components/SearchMenu/SearchFooter.vue b/src/components/SearchMenu/Footer.vue
similarity index 100%
rename from src/components/SearchMenu/SearchFooter.vue
rename to src/components/SearchMenu/Footer.vue
diff --git a/src/components/SearchMenu/SearchModal.vue b/src/components/SearchMenu/Modal.vue
similarity index 94%
rename from src/components/SearchMenu/SearchModal.vue
rename to src/components/SearchMenu/Modal.vue
index 6ae39e6..63e19df 100644
--- a/src/components/SearchMenu/SearchModal.vue
+++ b/src/components/SearchMenu/Modal.vue
@@ -8,8 +8,8 @@ import { ElMessage } from "element-plus"
 import { cloneDeep, debounce } from "lodash-es"
 import { computed, ref, shallowRef } from "vue"
 import { useRouter } from "vue-router"
-import SearchFooter from "./SearchFooter.vue"
-import SearchResult from "./SearchResult.vue"
+import Footer from "./Footer.vue"
+import Result from "./Result.vue"
 
 /** 控制 modal 显隐 */
 const modelValue = defineModel<boolean>({ required: true })
@@ -19,7 +19,7 @@ const { isMobile } = useDevice()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
-const searchResultRef = ref<InstanceType<typeof SearchResult> | null>(null)
+const resultRef = ref<InstanceType<typeof Result> | null>(null)
 
 const keyword = ref<string>("")
 const resultList = shallowRef<RouteRecordRaw[]>([])
@@ -64,8 +64,8 @@ function handleClose() {
 
 /** 根据下标位置进行滚动 */
 function scrollTo(index: number) {
-  if (!searchResultRef.value) return
-  const scrollTop = searchResultRef.value.getScrollTop(index)
+  if (!resultRef.value) return
+  const scrollTop = resultRef.value.getScrollTop(index)
   // 手动控制 el-scrollbar 滚动条滚动，设置滚动条到顶部的距离
   scrollbarRef.value?.setScrollTop(scrollTop)
 }
@@ -173,17 +173,17 @@ function handleReleaseUpOrDown() {
     <template v-else>
       <p>搜索结果</p>
       <el-scrollbar ref="scrollbarRef" max-height="40vh" always>
-        <SearchResult
-          ref="searchResultRef"
+        <Result
+          ref="resultRef"
           v-model="activeRouteName"
-          :list="resultList"
+          :data="resultList"
           :is-press-up-or-down="isPressUpOrDown"
           @click="handleEnter"
         />
       </el-scrollbar>
     </template>
     <template #footer>
-      <SearchFooter :total="resultList.length" />
+      <Footer :total="resultList.length" />
     </template>
   </el-dialog>
 </template>
diff --git a/src/components/SearchMenu/SearchResult.vue b/src/components/SearchMenu/Result.vue
similarity index 92%
rename from src/components/SearchMenu/SearchResult.vue
rename to src/components/SearchMenu/Result.vue
index fcc37ff..753f5bd 100644
--- a/src/components/SearchMenu/SearchResult.vue
+++ b/src/components/SearchMenu/Result.vue
@@ -3,13 +3,14 @@ import type { RouteRecordName, RouteRecordRaw } from "vue-router"
 import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
 
 interface Props {
-  list: RouteRecordRaw[]
+  data: RouteRecordRaw[]
   isPressUpOrDown: boolean
 }
 
 const props = defineProps<Props>()
 /** 选中的菜单 */
 const modelValue = defineModel<RouteRecordName | undefined>({ required: true })
+
 const instance = getCurrentInstance()
 const scrollbarHeight = ref<number>(0)
 
@@ -45,17 +46,17 @@ function getScrollTop(index: number) {
   return scrollTop > scrollbarHeight.value ? scrollTop - scrollbarHeight.value : 0
 }
 
-/** 在组件挂载前添加窗口大小变化事件监听器 */
+// 在组件挂载前添加窗口大小变化事件监听器
 onBeforeMount(() => {
   window.addEventListener("resize", getScrollbarHeight)
 })
 
-/** 在组件挂载时立即计算滚动可视区高度 */
+// 在组件挂载时立即计算滚动可视区高度
 onMounted(() => {
   getScrollbarHeight()
 })
 
-/** 在组件卸载前移除窗口大小变化事件监听器 */
+// 在组件卸载前移除窗口大小变化事件监听器
 onBeforeUnmount(() => {
   window.removeEventListener("resize", getScrollbarHeight)
 })
@@ -67,7 +68,7 @@ defineExpose({ getScrollTop })
   <!-- 外层 div 不能删除，是用来接收父组件 click 事件的 -->
   <div>
     <div
-      v-for="(item, index) in list"
+      v-for="(item, index) in data"
       :key="index"
       :ref="`resultItemRef${index}`"
       class="result-item"
diff --git a/src/components/SearchMenu/index.vue b/src/components/SearchMenu/index.vue
index 0517f1a..99ca87d 100644
--- a/src/components/SearchMenu/index.vue
+++ b/src/components/SearchMenu/index.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { ref } from "vue"
-import SearchModal from "./SearchModal.vue"
+import Modal from "./Modal.vue"
 
 /** 控制 modal 显隐 */
-const modalVisible = ref<boolean>(false)
+const visible = ref<boolean>(false)
+
 /** 打开 modal */
 function handleOpen() {
-  modalVisible.value = true
+  visible.value = true
 }
 </script>
 
@@ -15,7 +16,7 @@ function handleOpen() {
     <el-tooltip effect="dark" content="搜索菜单" placement="bottom">
       <SvgIcon name="search" @click="handleOpen" />
     </el-tooltip>
-    <SearchModal v-model="modalVisible" />
+    <Modal v-model="visible" />
   </div>
 </template>