feat: add tabs demo

packages/@core/forward/stores/src/modules/tabbar.ts

@@ -28,6 +28,10 @@ interface TabsState {
    * @zh_CN 当前打开的标签页列表
    */
   tabs: TabDefinition[];
+  /**
+   * @zh_CN 更新时间，用于一些更新场景，使用watch深度监听的话，会损耗性能
+   */
+  updateTime?: number;
 }
 
 /**
@@ -306,11 +310,17 @@ const useCoreTabbarStore = defineStore('core-tabbar', {
       const findTab = this.tabs.find(
         (item) => getTabPath(item) === getTabPath(tab),
       );
+
       if (findTab) {
         findTab.meta.newTabTitle = title;
+
         await this.updateCacheTab();
       }
     },
+
+    async setUpdateTime() {
+      this.updateTime = Date.now();
+    },
     /**
      * @zh_CN 设置标签页顺序
      * @param oldIndex
@@ -399,6 +409,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', {
     excludeCachedTabs: new Set(),
     renderRouteView: true,
     tabs: [],
+    updateTime: Date.now(),
   }),
 });
 

packages/@core/hooks/src/use-tabs.ts

@@ -52,10 +52,12 @@ export function useTabs() {
   }
 
   async function setTabTitle(title: string) {
+    coreTabbarStore.setUpdateTime();
     await coreTabbarStore.setTabTitle(route, title);
   }
 
   async function resetTabTitle() {
+    coreTabbarStore.setUpdateTime();
     await coreTabbarStore.resetTabTitle(route);
   }
 

packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue

@@ -49,7 +49,7 @@ const tabsView = computed((): TabConfig[] => {
         : true,
       icon: tab.meta.icon as string,
       key: tab.fullPath || tab.path,
-      title: (tab.meta?.title || tab.name) as string,
+      title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
     };
   });
 });

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -50,7 +50,7 @@ const tabsView = computed((): TabConfig[] => {
         : true,
       icon: tab.meta.icon as string,
       key: tab.fullPath || tab.path,
-      title: (tab.meta?.title || tab.name) as string,
+      title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
     };
   });
 });

packages/effects/layouts/src/basic/tabbar/use-tabbar.ts

@@ -55,9 +55,16 @@ export function useTabbar() {
 
   const { locale } = useI18n();
   const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
-  watch([() => coreTabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
-    currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
-  });
+  watch(
+    [
+      () => coreTabbarStore.getTabs,
+      () => coreTabbarStore.updateTime,
+      () => locale.value,
+    ],
+    ([tabs]) => {
+      currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
+    },
+  );
 
   /**
    * 初始化固定标签页