fix(projects): update tab label when locale change

src/store/modules/tab/index.ts

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { computed, ref, watch, effectScope, onScopeDispose } from 'vue';
 import type { Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { SetupStoreId } from '@/enum';
@@ -9,11 +9,16 @@ import {
   isTabInTabs,
   filterTabsById,
   getFixedTabIds,
-  filterTabsByIds
+  filterTabsByIds,
+  updateTabsByI18nKey,
+  updateTabByI18nKey
 } from './shared';
 import { useRouterPush } from '@/hooks/common/router';
+import { useAppStore } from '../app';
 
 export const useTabStore = defineStore(SetupStoreId.Tab, () => {
+  const app = useAppStore();
+  const scope = effectScope();
   const { routerPush } = useRouterPush(false);
 
   /**
@@ -216,6 +221,35 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     return fixedTabIds.includes(tabId);
   }
 
+  /**
+   * update all tabs by i18n key
+   */
+  function updateAllTabsByI18nKey() {
+    tabs.value = updateTabsByI18nKey(tabs.value);
+
+    if (homeTab.value) {
+      homeTab.value = updateTabByI18nKey(homeTab.value);
+    }
+  }
+
+  // watch store
+  scope.run(() => {
+    // update menus when locale changed
+    watch(
+      () => app.locale,
+      () => {
+        updateAllTabsByI18nKey();
+      }
+    );
+  });
+
+  /**
+   * on scope dispose
+   */
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
   return {
     /**
      * all tabs

src/store/modules/tab/shared.ts

@@ -59,7 +59,8 @@ export function getTabByRoute(route: App.Global.TabRoute) {
     fullPath,
     fixedIndex: fixedIndexInTab,
     icon,
-    localIcon
+    localIcon,
+    i18nKey
   };
 
   return tab;
@@ -146,3 +147,24 @@ function updateTabsLabel(tabs: App.Global.Tab[]) {
     label: tab.newLabel || tab.label
   }));
 }
+
+/**
+ * update tab by i18n key
+ * @param tab
+ */
+export function updateTabByI18nKey(tab: App.Global.Tab) {
+  const { i18nKey, label } = tab;
+
+  return {
+    ...tab,
+    label: i18nKey ? $t(i18nKey) : label
+  };
+}
+
+/**
+ * update tabs by i18n key
+ * @param tabs
+ */
+export function updateTabsByI18nKey(tabs: App.Global.Tab[]) {
+  return tabs.map(tab => updateTabByI18nKey(tab));
+}

src/typings/app.d.ts

@@ -144,6 +144,10 @@ declare namespace App {
        * @description local icon
        */
       localIcon?: string;
+      /**
+       * i18n key
+       */
+      i18nKey?: I18n.I18nKey;
     };
   }