refactor(@vben-core/tabs-ui): refactor tabs chrome component

packages/effects/layouts/src/basic/layout.vue

@@ -24,7 +24,7 @@ import {
   useExtraMenu,
   useMixedMenu,
 } from './menu';
-import { LayoutTabbar, LayoutTabbarTools } from './tabbar';
+import { LayoutTabbar } from './tabbar';
 
 defineOptions({ name: 'BasicLayout' });
 
@@ -260,9 +260,6 @@ function clearPreferencesAndLogout() {
         :show-icon="preferences.tabbar.showIcon"
       />
     </template>
-    <template #tabbar-tools>
-      <LayoutTabbarTools v-if="preferences.tabbar.enable" />
-    </template>
 
     <!-- 主体内容 -->
     <template #content>

packages/effects/layouts/src/basic/tabbar/index.ts

@@ -1,3 +1,2 @@
 export { default as LayoutTabbar } from './tabbar.vue';
-export { default as LayoutTabbarTools } from './tabbar-tools.vue';
 export * from './use-tabs';

packages/effects/layouts/src/basic/tabbar/tabbar-tools.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { preferences } from '@vben-core/preferences';
-import { TabsToolMore, TabsToolScreen } from '@vben-core/tabs-ui';
-
-import { updateContentScreen, useTabs } from './use-tabs';
-
-const route = useRoute();
-
-const { createContextMenus } = useTabs();
-
-const menus = computed(() => {
-  return createContextMenus(route);
-});
-</script>
-
-<template>
-  <div class="flex-center h-full">
-    <TabsToolMore :menus="menus" />
-    <TabsToolScreen
-      :screen="preferences.sidebar.hidden"
-      @change="updateContentScreen"
-      @update:screen="updateContentScreen"
-    />
-  </div>
-</template>

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben-core/preferences';
 import { useCoreTabbarStore } from '@vben-core/stores';
-import { TabsView } from '@vben-core/tabs-ui';
+import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
 
-import { useTabs } from './use-tabs';
+import { updateContentScreen, useTabs } from './use-tabs';
 
 defineOptions({
   name: 'LayoutTabbar',
@@ -13,10 +14,10 @@ defineOptions({
 
 defineProps<{ showIcon?: boolean }>();
 
-const route = useRoute();
-
 const coreTabbarStore = useCoreTabbarStore();
 
+const route = useRoute();
+
 const {
   createContextMenus,
   currentActive,
@@ -26,6 +27,10 @@ const {
   handleUnpinTab,
 } = useTabs();
 
+const menus = computed(() => {
+  return createContextMenus(route);
+});
+
 // 刷新后如果不保持tab状态，关闭其他tab
 if (!preferences.tabbar.persist) {
   coreTabbarStore.closeOtherTabs(route);
@@ -35,11 +40,20 @@ if (!preferences.tabbar.persist) {
 <template>
   <TabsView
     :active="currentActive"
-    :menus="createContextMenus"
+    :context-menus="createContextMenus"
     :show-icon="showIcon"
     :tabs="currentTabs"
     @close="handleClose"
-    @unpin-tab="handleUnpinTab"
+    @sort-tabs="coreTabbarStore.sortTabs"
+    @unpin="handleUnpinTab"
     @update:active="handleClick"
   />
+  <div class="flex-center h-full">
+    <TabsToolMore :menus="menus" />
+    <TabsToolScreen
+      :screen="preferences.sidebar.hidden"
+      @change="updateContentScreen"
+      @update:screen="updateContentScreen"
+    />
+  </div>
 </template>

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

@@ -83,8 +83,8 @@ function useTabs() {
     return {
       ...tab,
       meta: {
-        ...tab.meta,
-        title: $t(tab.meta.title as string),
+        ...tab?.meta,
+        title: $t(tab?.meta?.title as string),
       },
     };
   }
@@ -126,6 +126,27 @@ function useTabs() {
       disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
 
     const menus: IContextMenuItem[] = [
+      {
+        disabled: !!affixTab || disabled,
+        handler: async () => {
+          await coreTabbarStore.closeTab(tab, router);
+        },
+        icon: IcRoundClose,
+        key: 'close',
+        text: $t('preferences.tabbar.contextMenu.close'),
+      },
+      {
+        handler: async () => {
+          await (affixTab
+            ? coreTabbarStore.unpinTab(tab)
+            : coreTabbarStore.pinTab(tab));
+        },
+        icon: affixTab ? MdiPinOff : MdiPin,
+        key: 'affix',
+        text: affixTab
+          ? $t('preferences.tabbar.contextMenu.unpin')
+          : $t('preferences.tabbar.contextMenu.pin'),
+      },
       {
         handler: async () => {
           if (!contentIsMaximize.value) {
@@ -148,27 +169,7 @@ function useTabs() {
         key: 'reload',
         text: $t('preferences.tabbar.contextMenu.reload'),
       },
-      {
-        disabled: !!affixTab || disabled,
-        handler: async () => {
-          await coreTabbarStore.closeTab(tab, router);
-        },
-        icon: IcRoundClose,
-        key: 'close',
-        text: $t('preferences.tabbar.contextMenu.close'),
-      },
-      {
-        handler: async () => {
-          await (affixTab
-            ? coreTabbarStore.unpinTab(tab)
-            : coreTabbarStore.pinTab(tab));
-        },
-        icon: affixTab ? MdiPinOff : MdiPin,
-        key: 'affix',
-        text: affixTab
-          ? $t('preferences.tabbar.contextMenu.unpin')
-          : $t('preferences.tabbar.contextMenu.pin'),
-      },
+
       {
         handler: async () => {
           const { hash, origin } = location;