perf(components): perf global-search

soybeanjs · Mar 11, 2024 · 7274522 · 7274522
1 parent 779ba4e
commit 7274522
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 40 deletions.
diff --git a/src/layouts/modules/global-search/components/search-footer.vue b/src/layouts/modules/global-search/components/search-footer.vue
@@ -5,28 +5,32 @@ defineOptions({ name: 'SearchFooter' });
 </script>
 
 <template>
-  <div class="h-44px flex-y-center px-24px">
-    <span class="mr-14px flex-y-center">
-      <icon-mdi-keyboard-return class="icon mr-6px p-2px text-20px" />
+  <div class="h-44px flex-y-center gap-14px px-24px">
+    <span class="flex-y-center">
+      <icon-mdi-keyboard-return class="icon-shadow icon-item" />
       <span>{{ $t('common.confirm') }}</span>
     </span>
-    <span class="mr-14px flex-y-center">
-      <icon-mdi-arrow-up-thin class="icon mr-5px p-2px text-20px" />
-      <icon-mdi-arrow-down-thin class="icon mr-6px p-2px text-20px" />
+    <span class="flex-y-center">
+      <icon-mdi-arrow-up-thin class="icon-shadow icon-item" />
+      <icon-mdi-arrow-down-thin class="icon-shadow icon-item" />
       <span>{{ $t('common.switch') }}</span>
     </span>
     <span class="flex-y-center">
-      <icon-mdi-keyboard-esc class="icon mr-6px p-2px text-20px" />
+      <icon-mdi-keyboard-esc class="icon-shadow icon-item" />
       <span>{{ $t('common.close') }}</span>
     </span>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.icon {
+.icon-shadow {
   box-shadow:
     inset 0 -2px #cdcde6,
     inset 0 0 1px 1px #fff,
     0 1px 2px 1px #1e235a66;
 }
+
+.icon-item {
+  --at-apply: mr-6px p-2px text-20px;
+}
 </style>
diff --git a/src/layouts/modules/global-search/components/search-modal.vue b/src/layouts/modules/global-search/components/search-modal.vue
@@ -10,20 +10,20 @@ import SearchFooter from './search-footer.vue';
 
 defineOptions({ name: 'SearchModal' });
 
-const appStore = useAppStore();
-const isMobile = computed(() => appStore.isMobile);
 const router = useRouter();
+const appStore = useAppStore();
 const routeStore = useRouteStore();
 
+const isMobile = computed(() => appStore.isMobile);
+
 const keyword = ref('');
 const activePath = ref('');
 const resultOptions = shallowRef<App.Global.Menu[]>([]);
 
 const handleSearch = useDebounceFn(search, 300);
 
-const modelShow = defineModel<boolean>('show', { required: true });
+const visible = defineModel<boolean>('show', { required: true });
 
-/** 查询 */
 function search() {
   resultOptions.value = routeStore.searchMenus.filter(menu => {
     const trimKeyword = keyword.value.toLocaleLowerCase().trim();
@@ -34,8 +34,8 @@ function search() {
 }
 
 function handleClose() {
-  modelShow.value = false;
-  /** 延时处理防止用户看到某些操作 */
+  visible.value = false;
+  // handle with setTimeout to prevent user from seeing some operations
   setTimeout(() => {
     resultOptions.value = [];
     keyword.value = '';
@@ -46,44 +46,54 @@ function handleClose() {
 function handleUp() {
   const { length } = resultOptions.value;
   if (length === 0) return;
-  const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
-  if (index === 0) {
-    activePath.value = resultOptions.value[length - 1].routePath;
-  } else {
-    activePath.value = resultOptions.value[index - 1].routePath;
-  }
+
+  const index = getActivePathIndex();
+  if (index === -1) return;
+
+  const activeIndex = index === 0 ? length - 1 : index - 1;
+
+  activePath.value = resultOptions.value[activeIndex].routePath;
 }
 
 /** key down */
 function handleDown() {
   const { length } = resultOptions.value;
   if (length === 0) return;
-  const index = resultOptions.value.findIndex(item => item.routePath === activePath.value);
-  if (index + 1 === length) {
-    activePath.value = resultOptions.value[0].routePath;
-  } else {
-    activePath.value = resultOptions.value[index + 1].routePath;
-  }
+
+  const index = getActivePathIndex();
+  if (index === -1) return;
+
+  const activeIndex = index === length - 1 ? 0 : index + 1;
+
+  activePath.value = resultOptions.value[activeIndex].routePath;
+}
+
+function getActivePathIndex() {
+  return resultOptions.value.findIndex(item => item.routePath === activePath.value);
 }
 
 /** key enter */
 function handleEnter(e: Event | undefined) {
-  const { length } = resultOptions.value;
-  if (length === 0 || activePath.value === '') return;
+  if (resultOptions.value?.length === 0 || activePath.value === '') return;
+
   e?.preventDefault();
   handleClose();
   router.push(activePath.value);
 }
 
-onKeyStroke('Escape', handleClose);
-onKeyStroke('Enter', handleEnter);
-onKeyStroke('ArrowUp', handleUp);
-onKeyStroke('ArrowDown', handleDown);
+function registerShortcut() {
+  onKeyStroke('Escape', handleClose);
+  onKeyStroke('Enter', handleEnter);
+  onKeyStroke('ArrowUp', handleUp);
+  onKeyStroke('ArrowDown', handleDown);
+}
+
+registerShortcut();
 </script>
 
 <template>
   <NModal
-    v-model:show="modelShow"
+    v-model:show="visible"
     :segmented="{ footer: 'soft' }"
     :closable="false"
     preset="card"

diff --git a/src/layouts/modules/global-search/components/search-result.vue b/src/layouts/modules/global-search/components/search-result.vue
@@ -20,8 +20,7 @@ const theme = useThemeStore();
 
 const active = defineModel<string>('path', { required: true });
 
-/** 鼠标移入 */
-async function handleMouse(item: App.Global.Menu) {
+async function handleMouseEnter(item: App.Global.Menu) {
   active.value = item.routePath;
 }
 
@@ -41,7 +40,7 @@ function handleTo() {
             color: item.routePath === active ? '#fff' : ''
           }"
           @click="handleTo"
-          @mouseenter="handleMouse(item)"
+          @mouseenter="handleMouseEnter(item)"
         >
           <component :is="item.icon" />
           <span class="ml-5px flex-1">

diff --git a/src/layouts/modules/global-search/index.vue b/src/layouts/modules/global-search/index.vue
@@ -6,13 +6,10 @@ import SearchModal from './components/search-modal.vue';
 defineOptions({ name: 'GlobalSearch' });
 
 const { bool: show, toggle } = useBoolean();
-function handleSearch() {
-  toggle();
-}
 </script>
 
 <template>
-  <ButtonIcon :tooltip-content="$t('common.search')" @click="handleSearch">
+  <ButtonIcon :tooltip-content="$t('common.search')" @click="toggle">
     <icon-uil-search />
   </ButtonIcon>
   <SearchModal v-model:show="show" />