perf(i18n): improve circular dependencies

Vben
1 parent d81481c5
Showing 8 changed files with 30 additions and 57 deletions
src/components/Application/src/AppDarkModeToggle.vue
src/components/Application/src/search/AppSearch.vue
src/components/Application/src/search/AppSearchFooter.vue
src/components/Application/src/search/AppSearchModal.vue
src/layouts/default/header/index.vue
src/locales/helper.ts
src/locales/setupI18n.ts
src/locales/useLocale.ts
@@ -29,17 +29,12 @@
   export default defineComponent({
     name: 'DarkModeToggle',
     components: { SvgIcon },
-    // props: {
-    //   size: {
-    //     type: String,
-    //     default: 'default',
-    //     validate: (val) => ['default', 'large'].includes(val),
-    //   },
-    // },
     setup() {
       const { prefixCls } = useDesign('dark-mode-toggle');
       const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+
       const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+
       function toggleDarkMode() {
         const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
         setDarkMode(darkMode);
@@ -95,16 +90,5 @@
         transform: translateX(calc(100% + 2px));
       }
     }
-
-    // &--large {
-    //   width: 70px;
-    //   height: 34px;
-    //   padding: 0 10px;
-
-    //   .@{prefix-cls}-inner {
-    //     width: 26px;
-    //     height: 26px;
-    //   }
-    // }
   }
 </style>
 <script lang="tsx">
   import { defineComponent, ref, unref } from 'vue';
-
   import { Tooltip } from 'ant-design-vue';
   import { SearchOutlined } from '@ant-design/icons-vue';
   import AppSearchModal from './AppSearchModal.vue';
-
-  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useI18n } from '/@/hooks/web/useI18n';
-
   export default defineComponent({
     name: 'AppSearch',
-    components: { AppSearchModal, Tooltip },
     setup() {
       const showModal = ref(false);
  
-      const { getShowSearch } = useHeaderSetting();
       const { t } = useI18n();
  
       function changeModal(show: boolean) {
@@ -22,9 +16,6 @@
       }
  
       return () => {
-        if (!unref(getShowSearch)) {
-          return null;
-        }
         return (
           <div class="p-1" onClick={changeModal.bind(null, true)}>
             <Tooltip>
@@ -2,21 +2,17 @@
   <div :class="`${prefixCls}`">
     <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
     <span>{{ t('component.app.toSearch') }}</span>
-
     <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
     <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
     <span>{{ t('component.app.toNavigate') }}</span>
     <AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
-
     <span>{{ t('common.closeText') }}</span>
   </div>
 </template>
  
 <script lang="ts">
   import { defineComponent } from 'vue';
-
   import AppSearchKeyItem from './AppSearchKeyItem.vue';
-
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   export default defineComponent({
@@ -85,7 +85,7 @@
       visible: propTypes.bool,
     },
     emits: ['close'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
       const scrollWrap = ref<ElRef>(null);
       const { prefixCls } = useDesign('app-search-modal');
       const { t } = useI18n();
@@ -96,9 +96,7 @@
       const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
         useMenuSearch(refs, scrollWrap, emit);
  
-      const getIsNotData = computed(() => {
-        return !keyword || unref(searchResult).length === 0;
-      });
+      const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
  
       const getClass = computed(() => {
         return [
@@ -109,13 +107,8 @@
         ];
       });
  
-      function handleClose() {
-        searchResult.value = [];
-        emit('close');
-      }
-
       watch(
-        () => _.visible,
+        () => props.visible,
         (v: boolean) => {
           v &&
             nextTick(() => {
@@ -124,6 +117,11 @@
         }
       );
  
+      function handleClose() {
+        searchResult.value = [];
+        emit('close');
+      }
+
       return {
         t,
         prefixCls,
@@ -33,7 +33,7 @@
  
     <!-- action  -->
     <div :class="`${prefixCls}-action`">
-      <AppSearch :class="`${prefixCls}-action__item `" />
+      <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
  
       <ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
  
@@ -123,6 +123,7 @@
         getShowBread,
         getShowHeaderLogo,
         getShowHeader,
+        getShowSearch,
       } = useHeaderSetting();
  
       const { getShowLocalePicker } = useLocale();
@@ -190,6 +191,7 @@
         getIsMixSidebar,
         getShowSettingButton,
         getShowSetting,
+        getShowSearch,
       };
     },
   });
+import type { LocaleType } from '/#/config';
+
 import { set } from 'lodash-es';
  
+export const loadLocalePool: LocaleType[] = [];
+
+export function setHtmlPageLang(locale: LocaleType) {
+  document.querySelector('html')?.setAttribute('lang', locale);
+}
+
+export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
+  cb(loadLocalePool);
+}
+
 export function genMessage(langs: Record<string, Record<string, any>>, prefix = 'lang') {
   const obj: Recordable = {};
  
@@ -2,8 +2,7 @@ import type { App } from &#39;vue&#39;;
 import type { I18n, I18nOptions } from 'vue-i18n';
  
 import { createI18n } from 'vue-i18n';
-
-import { setLoadLocalePool, setHtmlPageLang } from './useLocale';
+import { setHtmlPageLang, setLoadLocalePool } from './helper';
 import { localeSetting } from '/@/settings/localeSetting';
 import { useLocaleStoreWithOut } from '/@/store/modules/locale';
  
@@ -16,8 +15,8 @@ async function createI18nOptions(): Promise&lt;I18nOptions&gt; {
   const locale = localeStore.getLocale;
   const defaultLocal = await import(`./lang/${locale}.ts`);
   const message = defaultLocal.default?.message ?? {};
-  
-  setHtmlPageLang(locale)
+
+  setHtmlPageLang(locale);
   setLoadLocalePool((loadLocalePool) => {
     loadLocalePool.push(locale);
   });
@@ -8,6 +8,7 @@ import moment from &#39;moment&#39;;
 import { i18n } from './setupI18n';
 import { useLocaleStoreWithOut } from '/@/store/modules/locale';
 import { unref, computed } from 'vue';
+import { loadLocalePool, setHtmlPageLang } from './helper';
  
 interface LangModule {
   message: Recordable;
@@ -15,16 +16,6 @@ interface LangModule {
   momentLocaleName: string;
 }
  
-const loadLocalePool: LocaleType[] = [];
-
-export function setHtmlPageLang(locale: LocaleType) {
-  document.querySelector('html')?.setAttribute('lang', locale);
-}
-
-export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) {
-  cb(loadLocalePool);
-}
-
 function setI18nLanguage(locale: LocaleType) {
   const localeStore = useLocaleStoreWithOut();
  
@@ -34,7 +25,7 @@ function setI18nLanguage(locale: LocaleType) {
     (i18n.global.locale as any).value = locale;
   }
   localeStore.setLocaleInfo({ locale });
-  setHtmlPageLang(locale)
+  setHtmlPageLang(locale);
 }
  
 export function useLocale() {