feat: internationalized menu search

soybeanjs · Oct 16, 2023 · 9e115da · 9e115da
1 parent 3eaf05b
commit 9e115da
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/layouts/common/global-search/components/search-modal.vue b/src/layouts/common/global-search/components/search-modal.vue
@@ -34,6 +34,7 @@ import { useRouter } from 'vue-router';
 import { onKeyStroke, useDebounceFn } from '@vueuse/core';
 import { useRouteStore } from '@/store';
 import { useBasicLayout } from '@/composables';
+import { $t } from '@/locales';
 import SearchResult from './search-result.vue';
 import SearchFooter from './search-footer.vue';
 
@@ -82,9 +83,16 @@ watch(show, async val => {
 
 /** 查询 */
 function search() {
-  resultOptions.value = routeStore.searchMenus.filter(
-    menu => keyword.value && menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
-  );
+  resultOptions.value = routeStore.searchMenus.filter(menu => {
+    return (
+      (keyword.value &&
+        menu.meta?.i18nTitle &&
+        $t(menu.meta?.i18nTitle)
+          .toLocaleLowerCase()
+          .includes(keyword.value.toLocaleLowerCase().trim())) ||
+      menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
+    );
+  });
   if (resultOptions.value?.length > 0) {
     activePath.value = resultOptions.value[0].path;
   } else {

diff --git a/src/layouts/common/global-search/components/search-result.vue b/src/layouts/common/global-search/components/search-result.vue
@@ -12,7 +12,9 @@
           @mouseenter="handleMouse(item)"
         >
           <svg-icon :icon="item.meta.icon" :local-icon="item.meta.localIcon" />
-          <span class="flex-1 ml-5px">{{ item.meta?.title }}</span>
+          <span class="flex-1 ml-5px">
+            {{ (item.meta?.i18nTitle && $t(item.meta?.i18nTitle)) || item.meta?.title }}
+          </span>
           <icon-ant-design-enter-outlined class="icon text-20px p-2px mr-3px" />
         </div>
       </template>
@@ -23,6 +25,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useThemeStore } from '@/store';
+import { $t } from '@/locales';
 
 defineOptions({ name: 'SearchResult' });