fix: layout error

packages/business/common-ui/package.json

@@ -50,8 +50,8 @@
     "@vben-core/shadcn-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/integrations": "^10.10.0",
+    "@vueuse/core": "^10.10.1",
+    "@vueuse/integrations": "^10.10.1",
     "qrcode": "^1.5.3",
     "vue": "3.4.27",
     "vue-router": "^4.3.3"

packages/business/common-ui/src/global-search/search-panel.vue

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router';
 
 import { $t } from '@vben/locales';
 import { IcRoundClose, IcRoundSearchOff } from '@vben-core/iconify';
-import { ScrollArea, VbenIcon } from '@vben-core/shadcn-ui';
+import { VbenIcon, VbenScrollbar } from '@vben-core/shadcn-ui';
 import { mapTree, traverseTreeValues } from '@vben-core/toolkit';
 
 import { onKeyStroke, useLocalStorage, useThrottleFn } from '@vueuse/core';
@@ -214,7 +214,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <ScrollArea>
+  <VbenScrollbar>
     <div class="!flex h-full justify-center px-4 sm:max-h-[450px]">
       <!-- 无搜索结果 -->
       <div
@@ -275,5 +275,5 @@ onMounted(() => {
         </li>
       </ul>
     </div>
-  </ScrollArea>
+  </VbenScrollbar>
 </template>

packages/business/common-ui/src/notification/notification.vue

@@ -7,10 +7,10 @@ import {
   IcRoundNotificationsNone,
 } from '@vben-core/iconify';
 import {
-  ScrollArea,
   VbenButton,
   VbenIconButton,
   VbenPopover,
+  VbenScrollbar,
 } from '@vben-core/shadcn-ui';
 
 import { useToggle } from '@vueuse/core';
@@ -81,7 +81,7 @@ function handleClick(item: NotificationItem) {
     </template>
 
     <div class="relative">
-      <div class="flex items-center justify-between border-b p-4 py-3">
+      <div class="flex items-center justify-between p-4 py-3">
         <div class="text-foreground">{{ $t('widgets.notifications') }}</div>
         <VbenIconButton
           :tooltip="$t('widgets.make-all-as-read')"
@@ -90,11 +90,11 @@ function handleClick(item: NotificationItem) {
           <IcRoundMarkEmailRead />
         </VbenIconButton>
       </div>
-      <ScrollArea v-if="notifications.length > 0">
+      <VbenScrollbar v-if="notifications.length > 0">
         <ul class="!flex max-h-[360px] w-full flex-col">
           <template v-for="item in notifications" :key="item.title">
             <li
-              class="hover:bg-accent relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
+              class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
               @click="handleClick(item)"
             >
               <span
@@ -123,7 +123,7 @@ function handleClick(item: NotificationItem) {
             </li>
           </template>
         </ul>
-      </ScrollArea>
+      </VbenScrollbar>
 
       <template v-else>
         <div class="flex-center text-muted-foreground min-h-[150px] w-full">
@@ -131,7 +131,9 @@ function handleClick(item: NotificationItem) {
         </div>
       </template>
 
-      <div class="flex items-center justify-between border-t px-4 py-3">
+      <div
+        class="border-border flex items-center justify-between border-t px-4 py-3"
+      >
         <VbenButton size="sm" variant="ghost" @click="handleClear">
           {{ $t('widgets.clear-notifications') }}
         </VbenButton>

packages/business/common-ui/src/preferences/blocks/layout/layout.vue

@@ -11,8 +11,8 @@ import {
   FullContent,
   HeaderNav,
   MixedNav,
-  SideMixedNav,
-  SideNav,
+  SidebarMixedNav,
+  SidebarNav,
 } from '../../icons';
 
 interface PresetItem {
@@ -25,26 +25,26 @@ defineOptions({
   name: 'PreferenceLayout',
 });
 
-const modelValue = defineModel<LayoutType>({ default: 'side-nav' });
+const modelValue = defineModel<LayoutType>({ default: 'sidebar-nav' });
 
 const components: Record<LayoutType, Component> = {
   'full-content': FullContent,
   'header-nav': HeaderNav,
   'mixed-nav': MixedNav,
-  'side-mixed-nav': SideMixedNav,
-  'side-nav': SideNav,
+  'sidebar-mixed-nav': SidebarMixedNav,
+  'sidebar-nav': SidebarNav,
 };
 
 const PRESET = computed((): PresetItem[] => [
   {
     name: $t('preference.vertical'),
     tip: $t('preference.vertical-tip'),
-    type: 'side-nav',
+    type: 'sidebar-nav',
   },
   {
     name: $t('preference.two-column'),
     tip: $t('preference.two-column-tip'),
-    type: 'side-mixed-nav',
+    type: 'sidebar-mixed-nav',
   },
   {
     name: $t('preference.horizontal'),

packages/business/common-ui/src/preferences/blocks/layout/sidebar.vue

@@ -10,21 +10,21 @@ defineOptions({
 defineProps<{ disabled: boolean }>();
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
-const sidebarCollapseShowTitle = defineModel<boolean>(
-  'sidebarCollapseShowTitle',
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
 );
-const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
 </script>
 
 <template>
   <SwitchItem v-model="sidebarEnable" :disabled="disabled">
     {{ $t('preference.side-visible') }}
   </SwitchItem>
-  <SwitchItem v-model="sidebarCollapse" :disabled="!sidebarEnable || disabled">
+  <SwitchItem v-model="sidebarCollapsed" :disabled="!sidebarEnable || disabled">
     {{ $t('preference.collapse') }}
   </SwitchItem>
   <SwitchItem
-    v-model="sidebarCollapseShowTitle"
+    v-model="sidebarCollapsedShowTitle"
     :disabled="!sidebarEnable || disabled"
   >
     {{ $t('preference.collapse-show-title') }}

packages/business/common-ui/src/preferences/icons/index.ts

@@ -3,8 +3,8 @@ import HeaderNav from './header-nav.vue';
 export { default as ContentCompact } from './content-compact.vue';
 export { default as FullContent } from './full-content.vue';
 export { default as MixedNav } from './mixed-nav.vue';
-export { default as SideMixedNav } from './side-mixed-nav.vue';
-export { default as SideNav } from './side-nav.vue';
+export { default as SidebarMixedNav } from './sidebar-mixed-nav.vue';
+export { default as SidebarNav } from './sidebar-nav.vue';
 
 const ContentWide = HeaderNav;
 export { ContentWide, HeaderNav };

packages/business/common-ui/src/preferences/preferences-widget.vue

@@ -22,7 +22,7 @@ import Preferences from './preferences.vue';
     :breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
     :breadcrumb-home="preferences.breadcrumb.showHome"
     :breadcrumb-icon="preferences.breadcrumb.showIcon"
-    :breadcrumb-style="preferences.breadcrumb.styleType"
+    :breadcrumb-style-type="preferences.breadcrumb.styleType"
     :color-primary-presets="COLOR_PRIMARY_RESETS"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
@@ -32,8 +32,8 @@ import Preferences from './preferences.vue';
     :navigation-split="preferences.navigation.split"
     :navigation-style-type="preferences.navigation.styleType"
     :shortcut-keys-enable="preferences.shortcutKeys.enable"
-    :sidebar-collapse="preferences.sidebar.collapse"
-    :sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
+    :sidebar-collapsed="preferences.sidebar.collapsed"
+    :sidebar-collapsed-show-title="preferences.sidebar.collapsedShowTitle"
     :sidebar-enable="preferences.sidebar.enable"
     :tabbar-enable="preferences.tabbar.enable"
     :tabbar-show-icon="preferences.tabbar.showIcon"
@@ -103,11 +103,11 @@ import Preferences from './preferences.vue';
     @update:shortcut-keys-enable="
       (val) => updatePreferences({ shortcutKeys: { enable: val } })
     "
-    @update:sidebar-collapse="
-      (val) => updatePreferences({ sidebar: { collapse: val } })
+    @update:sidebar-collapsed="
+      (val) => updatePreferences({ sidebar: { collapsed: val } })
     "
-    @update:sidebar-collapse-show-title="
-      (val) => updatePreferences({ sidebar: { collapseShowTitle: val } })
+    @update:sidebar-collapsed-show-title="
+      (val) => updatePreferences({ sidebar: { collapsedShowTitle: val } })
     "
     @update:sidebar-enable="
       (val) => updatePreferences({ sidebar: { enable: val } })

packages/business/common-ui/src/preferences/preferences.vue

@@ -70,9 +70,9 @@ const transitionEnable = defineModel<boolean>('transitionEnable');
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
 
 const sidebarEnable = defineModel<boolean>('sidebarEnable');
-const sidebarCollapse = defineModel<boolean>('sidebarCollapse');
-const sidebarCollapseShowTitle = defineModel<boolean>(
-  'sidebarCollapseShowTitle',
+const sidebarCollapsed = defineModel<boolean>('sidebarCollapsed');
+const sidebarCollapsedShowTitle = defineModel<boolean>(
+  'sidebarCollapsedShowTitle',
 );
 
 const headerEnable = defineModel<boolean>('headerEnable');
@@ -216,8 +216,8 @@ function handleReset() {
 
             <Block :title="$t('preference.sidebar')">
               <Sidebar
-                v-model:side-collapse-show-title="sidebarCollapseShowTitle"
-                v-model:sidebar-collapse="sidebarCollapse"
+                v-model:sidebar-collapsed="sidebarCollapsed"
+                v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
                 v-model:sidebar-enable="sidebarEnable"
                 :disabled="!isSideMode"
               />

packages/business/layouts/package.json

@@ -41,6 +41,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/helpers": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",

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

@@ -9,11 +9,7 @@ import {
   updatePreferences,
   usePreferences,
 } from '@vben-core/preferences';
-import {
-  VbenBackTop,
-  // VbenFloatingButtonGroup,
-  VbenLogo,
-} from '@vben-core/shadcn-ui';
+import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 import { mapTree } from '@vben-core/toolkit';
 import { MenuRecordRaw } from '@vben-core/typings';
 
@@ -27,7 +23,7 @@ import {
   useExtraMenu,
   useMixedMenu,
 } from './menu';
-import { LayoutTabs, LayoutTabsToolbar } from './tabs';
+import { LayoutTabbar, LayoutTabbarTools } from './tabbar';
 import { Breadcrumb } from './widgets';
 
 defineOptions({ name: 'BasicLayout' });
@@ -45,8 +41,8 @@ const theme = computed(() => {
 });
 
 const logoClass = computed(() => {
-  const { collapse, collapseShowTitle } = preferences.sidebar;
-  return collapseShowTitle && collapse && !isMixedNav.value ? 'mx-auto' : '';
+  const { collapsed, collapsedShowTitle } = preferences.sidebar;
+  return collapsedShowTitle && collapsed && !isMixedNav.value ? 'mx-auto' : '';
 });
 
 const isMenuRounded = computed(() => {
@@ -59,12 +55,12 @@ const logoCollapse = computed(() => {
   }
 
   const { isMobile } = preferences.app;
-  const { collapse } = preferences.sidebar;
+  const { collapsed } = preferences.sidebar;
 
-  if (!collapse && isMobile) {
+  if (!collapsed && isMobile) {
     return false;
   }
-  return collapse || isSideMixedNav.value;
+  return collapsed || isSideMixedNav.value;
 });
 
 const showHeaderNav = computed(() => {
@@ -74,11 +70,11 @@ const showHeaderNav = computed(() => {
 const {
   extraActiveMenu,
   extraMenus,
-  extraVisible,
   handleDefaultSelect,
   handleMenuMouseEnter,
   handleMixedMenuSelect,
   handleSideMouseLeave,
+  sidebarExtraVisible,
 } = useExtraMenu();
 
 const {
@@ -92,17 +88,22 @@ const {
 
 function wrapperMenus(menus: MenuRecordRaw[]) {
   return mapTree(menus, (item) => {
-    return {
-      ...item,
-      name: $t(item.name),
-    };
+    return { ...item, name: $t(item.name) };
+  });
+}
+
+function toggleSidebar() {
+  updatePreferences({
+    sidebar: {
+      hidden: !preferences.sidebar.hidden,
+    },
   });
 }
 </script>
 
 <template>
   <VbenAdminLayout
-    v-model:side-extra-visible="extraVisible"
+    v-model:sidebar-extra-visible="sidebarExtraVisible"
     :content-compact="preferences.app.contentCompact"
     :footer-enable="preferences.footer.enable"
     :footer-fixed="preferences.footer.fixed"
@@ -111,37 +112,38 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     :header-visible="preferences.header.enable"
     :is-mobile="preferences.app.isMobile"
     :layout="layout"
-    :side-collapse="preferences.sidebar.collapse"
-    :side-collapse-show-title="preferences.sidebar.collapseShowTitle"
-    :side-expand-on-hover="preferences.sidebar.expandOnHover"
-    :side-extra-collapse="preferences.sidebar.extraCollapse"
-    :side-hidden="preferences.sidebar.hidden"
-    :side-semi-dark="preferences.app.semiDarkMenu"
-    :side-theme="theme"
-    :side-visible="sideVisible"
-    :side-width="preferences.sidebar.width"
-    :tabs-visible="preferences.tabbar.enable"
+    :sidebar-collapse="preferences.sidebar.collapsed"
+    :sidebar-collapse-show-title="preferences.sidebar.collapsedShowTitle"
+    :sidebar-enable="sideVisible"
+    :sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
+    :sidebar-extra-collapse="preferences.sidebar.extraCollapse"
+    :sidebar-hidden="preferences.sidebar.hidden"
+    :sidebar-semi-dark="preferences.app.semiDarkMenu"
+    :sidebar-theme="theme"
+    :sidebar-width="preferences.sidebar.width"
+    :tabbar-enable="preferences.tabbar.enable"
     @side-mouse-leave="handleSideMouseLeave"
-    @update:side-collapse="
-      (value: boolean) => updatePreferences({ sidebar: { collapse: value } })
+    @toggle-sidebar="toggleSidebar"
+    @update:sidebar-collapse="
+      (value: boolean) => updatePreferences({ sidebar: { collapsed: value } })
     "
-    @update:side-expand-on-hover="
+    @update:sidebar-enable="
+      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
+    "
+    @update:sidebar-expand-on-hover="
       (value: boolean) =>
         updatePreferences({ sidebar: { expandOnHover: value } })
     "
-    @update:side-extra-collapse="
+    @update:sidebar-extra-collapse="
       (value: boolean) =>
         updatePreferences({ sidebar: { extraCollapse: value } })
     "
-    @update:side-visible="
-      (value: boolean) => updatePreferences({ sidebar: { enable: value } })
-    "
   >
     <template v-if="preferences.app.showPreference" #preferences>
       <PreferencesWidget />
     </template>
 
-    <template #floating-button-group>
+    <template #floating-groups>
       <VbenBackTop />
       <!-- <VbenFloatingButtonGroup /> -->
     </template>
@@ -194,8 +196,8 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #menu>
       <LayoutMenu
         :accordion="preferences.navigation.accordion"
-        :collapse="preferences.sidebar.collapse"
-        :collapse-show-title="preferences.sidebar.collapseShowTitle"
+        :collapse="preferences.sidebar.collapsed"
+        :collapse-show-title="preferences.sidebar.collapsedShowTitle"
         :default-active="sideActive"
         :menus="wrapperMenus(sideMenus)"
         :rounded="isMenuRounded"
@@ -207,7 +209,8 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
     <template #mixed-menu>
       <LayoutMixedMenu
         :active-path="extraActiveMenu"
-        :collapse="!preferences.sidebar.collapseShowTitle"
+        :collapse="!preferences.sidebar.collapsedShowTitle"
+        :menus="wrapperMenus(headerMenus)"
         :rounded="isMenuRounded"
         :theme="theme"
         @default-select="handleDefaultSelect"
@@ -234,14 +237,14 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
       />
     </template>
 
-    <template #tabs>
-      <LayoutTabs
+    <template #tabbar>
+      <LayoutTabbar
         v-if="preferences.tabbar.enable"
         :show-icon="preferences.tabbar.showIcon"
       />
     </template>
-    <template #tabs-toolbar>
-      <LayoutTabsToolbar v-if="preferences.tabbar.enable" />
+    <template #tabbar-tools>
+      <LayoutTabbarTools v-if="preferences.tabbar.enable" />
     </template>
 
     <!-- 主体内容 -->

packages/business/layouts/src/basic/menu/helper.ts

@@ -1,37 +0,0 @@
-import type { MenuRecordRaw } from '@vben-core/typings';
-
-function findMenuByPath(
-  list: MenuRecordRaw[],
-  path?: string,
-): MenuRecordRaw | null {
-  for (const menu of list) {
-    if (menu.path === path) {
-      return menu;
-    }
-    if (menu?.children?.length) {
-      const findMenu = findMenuByPath(menu.children, path);
-      if (findMenu) {
-        return findMenu;
-      }
-    }
-  }
-  return null;
-}
-
-/**
- * 查找根菜单
- * @param menus
- * @param path
- */
-function findRootMenuByPath(menus: MenuRecordRaw[], path?: string) {
-  const findMenu = findMenuByPath(menus, path);
-  const rootMenuPath = findMenu?.parents?.[0];
-  const rootMenu = menus.find((item) => item.path === rootMenuPath);
-  return {
-    findMenu,
-    rootMenu,
-    rootMenuPath,
-  };
-}
-
-export { findMenuByPath, findRootMenuByPath };

packages/business/layouts/src/basic/menu/mixed-menu.vue

@@ -2,17 +2,15 @@
 import type { NormalMenuProps } from '@vben-core/menu-ui';
 import type { MenuRecordRaw } from '@vben-core/typings';
 
-import { computed, onBeforeMount } from 'vue';
+import { onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { findMenuByPath } from '@vben-core/helpers';
 import { NormalMenu } from '@vben-core/menu-ui';
-import { useAccessStore } from '@vben-core/stores';
-
-import { findMenuByPath } from './helper';
 
 interface Props extends NormalMenuProps {}
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
   defaultSelect: [MenuRecordRaw, MenuRecordRaw?];
@@ -20,19 +18,16 @@ const emit = defineEmits<{
   select: [MenuRecordRaw];
 }>();
 
-const accessStore = useAccessStore();
 const route = useRoute();
 
-const menus = computed(() => accessStore.getAccessMenus);
-
 function handleSelect(menu: MenuRecordRaw) {
   emit('select', menu);
 }
 
 onBeforeMount(() => {
-  const menu = findMenuByPath(menus.value, route.path);
+  const menu = findMenuByPath(props.menus || [], route.path);
   if (menu) {
-    const rootMenu = menus.value.find(
+    const rootMenu = (props.menus || []).find(
       (item) => item.path === menu.parents?.[0],
     );
     emit('defaultSelect', menu, rootMenu);

packages/business/layouts/src/basic/menu/use-extra-menu.ts

@@ -3,10 +3,10 @@ import type { MenuRecordRaw } from '@vben-core/typings';
 import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { findRootMenuByPath } from '@vben-core/helpers';
 import { preferences } from '@vben-core/preferences';
 import { useAccessStore } from '@vben-core/stores';
 
-import { findRootMenuByPath } from './helper';
 import { useNavigation } from './use-navigation';
 
 function useExtraMenu() {
@@ -17,7 +17,7 @@ function useExtraMenu() {
 
   const route = useRoute();
   const extraMenus = ref<MenuRecordRaw[]>([]);
-  const extraVisible = ref<boolean>(false);
+  const sidebarExtraVisible = ref<boolean>(false);
   const extraActiveMenu = ref('');
 
   /**
@@ -29,7 +29,7 @@ function useExtraMenu() {
     extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
     const hasChildren = extraMenus.value.length > 0;
 
-    extraVisible.value = hasChildren;
+    sidebarExtraVisible.value = hasChildren;
     if (!hasChildren) {
       await navigation(menu.path);
     }
@@ -48,7 +48,7 @@ function useExtraMenu() {
     extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
 
     if (preferences.sidebar.expandOnHover) {
-      extraVisible.value = extraMenus.value.length > 0;
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
     }
   };
 
@@ -59,7 +59,7 @@ function useExtraMenu() {
     if (preferences.sidebar.expandOnHover) {
       return;
     }
-    extraVisible.value = false;
+    sidebarExtraVisible.value = false;
 
     const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
       menus.value,
@@ -74,18 +74,18 @@ function useExtraMenu() {
       const { findMenu } = findRootMenuByPath(menus.value, menu.path);
       extraMenus.value = findMenu?.children ?? [];
       extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
-      extraVisible.value = extraMenus.value.length > 0;
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
     }
   };
 
   return {
     extraActiveMenu,
     extraMenus,
-    extraVisible,
     handleDefaultSelect,
     handleMenuMouseEnter,
     handleMixedMenuSelect,
     handleSideMouseLeave,
+    sidebarExtraVisible,
   };
 }
 

packages/business/layouts/src/basic/menu/use-mixed-menu.ts

@@ -3,10 +3,10 @@ import type { MenuRecordRaw } from '@vben-core/typings';
 import { computed, onBeforeMount, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { findRootMenuByPath } from '@vben-core/helpers';
 import { preferences, usePreferences } from '@vben-core/preferences';
 import { useAccessStore } from '@vben-core/stores';
 
-import { findRootMenuByPath } from './helper';
 import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {

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

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

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

@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { preferences, updatePreferences } from '@vben-core/preferences';
-import { TabsMore, TabsScreen } from '@vben-core/tabs-ui';
+import { TabsToolMore, TabsToolScreen } from '@vben-core/tabs-ui';
 
 import { useTabs } from './use-tabs';
 
@@ -29,8 +29,8 @@ function handleScreenChange(screen: boolean) {
 
 <template>
   <div class="flex-center h-full">
-    <TabsMore :menus="menus" />
-    <TabsScreen
+    <TabsToolMore :menus="menus" />
+    <TabsToolScreen
       :screen="preferences.sidebar.hidden"
       @change="handleScreenChange"
       @update:screen="handleScreenChange"

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

@@ -4,7 +4,7 @@ import { TabsView } from '@vben-core/tabs-ui';
 import { useTabs } from './use-tabs';
 
 defineOptions({
-  name: 'LayoutTabs',
+  name: 'LayoutTabbar',
 });
 
 defineProps<{ showIcon?: boolean }>();

packages/business/layouts/src/basic/tabs/index.ts

@@ -1,3 +0,0 @@
-export { default as LayoutTabs } from './tabs.vue';
-export { default as LayoutTabsToolbar } from './tabs-toolbar.vue';
-export * from './use-tabs';