refactor: i18n

* refactor: i18n

src/layout/components/navbar.vue

@@ -14,7 +14,7 @@ import screenfull from "../components/screenfull/index.vue";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
 const route = useRoute();
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 const instance =
   getCurrentInstance().appContext.config.globalProperties.$storage;
 const {
@@ -101,14 +101,14 @@ function translationEn() {
               <IconifyIconOffline
                 icon="logout-circle-r-line"
                 style="margin: 5px"
-              />{{ $t("buttons.hsLoginOut") }}</el-dropdown-item
+              />{{ t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('buttons.hssystemSet')"
+        :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />

src/layout/components/screenfull/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useFullscreen } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 const { isFullscreen, toggle } = useFullscreen();
 </script>
 
@@ -7,9 +10,7 @@ const { isFullscreen, toggle } = useFullscreen();
   <div class="screen-full" @click="toggle">
     <FontIcon
       :title="
-        isFullscreen
-          ? $t('buttons.hsexitfullscreen')
-          : $t('buttons.hsfullscreen')
+        isFullscreen ? t('buttons.hsexitfullscreen') : t('buttons.hsfullscreen')
       "
       :icon="isFullscreen ? 'team-iconexit-fullscreen' : 'team-iconfullscreen'"
     />

src/layout/components/search/components/SearchResult.vue

@@ -14,7 +14,7 @@
         <component
           :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')"
         ></component>
-        <span class="result-item-title">{{ $t(item.meta?.title) }}</span>
+        <span class="result-item-title">{{ t(item.meta?.title) }}</span>
         <enterOutlined />
       </div>
     </template>
@@ -23,10 +23,13 @@
 
 <script lang="ts" setup>
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import enterOutlined from "/@/assets/svg/enter_outlined.svg?component";
 
+const { t } = useI18n();
+
 interface optionsItem {
   path: string;
   meta?: {

src/layout/components/sidebar/horizontal.vue

@@ -14,7 +14,7 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 import globalization from "/@/assets/svg/globalization.svg?component";
 
 const route = useRoute();
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 const routers = useRouter().options.routes;
 const menuRef = templateRef<ElRef | null>("menu", null);
 const instance =
@@ -133,14 +133,14 @@ function translationEn() {
                 icon="logout-circle-r-line"
                 style="margin: 5px"
               />
-              {{ $t("buttons.hsLoginOut") }}</el-dropdown-item
+              {{ t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('buttons.hssystemSet')"
+        :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />

src/layout/components/sidebar/mixNav.vue

@@ -17,7 +17,7 @@ import globalization from "/@/assets/svg/globalization.svg?component";
 import { ref, watch, nextTick, onMounted, getCurrentInstance } from "vue";
 
 const route = useRoute();
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 const routers = useRouter().options.routes;
 const menuRef = templateRef<ElRef | null>("menu", null);
 const instance =
@@ -178,14 +178,14 @@ function translationEn() {
                 icon="logout-circle-r-line"
                 style="margin: 5px"
               />
-              {{ $t("buttons.hsLoginOut") }}</el-dropdown-item
+              {{ t("buttons.hsLoginOut") }}</el-dropdown-item
             >
           </el-dropdown-menu>
         </template>
       </el-dropdown>
       <el-icon
         class="el-icon-setting"
-        :title="$t('buttons.hssystemSet')"
+        :title="t('buttons.hssystemSet')"
         @click="onPanel"
       >
         <IconifyIconOffline icon="setting" />

src/layout/components/tag/index.vue

@@ -19,12 +19,12 @@ import closeLeft from "/@/assets/svg/close_left.svg?component";
 import closeOther from "/@/assets/svg/close_other.svg?component";
 import closeRight from "/@/assets/svg/close_right.svg?component";
 
+import { useI18n } from "vue-i18n";
 import { emitter } from "/@/utils/mitt";
-import { $t as t } from "/@/plugins/i18n";
-import { transformI18n } from "/@/plugins/i18n";
 import { storageLocal } from "/@/utils/storage";
 import { useRoute, useRouter } from "vue-router";
 import { isEqual, isEmpty } from "lodash-unified";
+import { transformI18n, $t } from "/@/plugins/i18n";
 import { RouteConfigs, tagsViewsType } from "../../types";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
@@ -33,6 +33,7 @@ import { usePermissionStoreHook } from "/@/store/modules/permission";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
 
+const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 const translateX = ref<number>(0);
@@ -193,42 +194,42 @@ const handleScroll = (offset: number): void => {
 const tagsViews = reactive<Array<tagsViewsType>>([
   {
     icon: refresh,
-    text: t("buttons.hsreload"),
+    text: $t("buttons.hsreload"),
     divided: false,
     disabled: false,
     show: true
   },
   {
     icon: close,
-    text: t("buttons.hscloseCurrentTab"),
+    text: $t("buttons.hscloseCurrentTab"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeLeft,
-    text: t("buttons.hscloseLeftTabs"),
+    text: $t("buttons.hscloseLeftTabs"),
     divided: true,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeRight,
-    text: t("buttons.hscloseRightTabs"),
+    text: $t("buttons.hscloseRightTabs"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
   },
   {
     icon: closeOther,
-    text: t("buttons.hscloseOtherTabs"),
+    text: $t("buttons.hscloseOtherTabs"),
     divided: true,
     disabled: multiTags.value.length > 2 ? false : true,
     show: true
   },
   {
     icon: closeAll,
-    text: t("buttons.hscloseAllTabs"),
+    text: $t("buttons.hscloseAllTabs"),
     divided: false,
     disabled: multiTags.value.length > 1 ? false : true,
     show: true
@@ -701,7 +702,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
         >
           <li v-if="item.show" @click="selectTag(key, item)">
             <component :is="item.icon" :key="key" />
-            {{ $t(item.text) }}
+            {{ t(item.text) }}
           </li>
         </div>
       </ul>
@@ -710,7 +711,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
     <ul class="right-button">
       <li>
         <el-icon
-          :title="$t('buttons.hsrefreshRoute')"
+          :title="t('buttons.hsrefreshRoute')"
           class="el-icon-refresh-right rotate"
           @click="onFresh"
         >
@@ -740,7 +741,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                   :key="key"
                   style="margin-right: 6px"
                 />
-                {{ $t(item.text) }}
+                {{ t(item.text) }}
               </el-dropdown-item>
             </el-dropdown-menu>
           </template>