refactor(project): remove the use of core internal bem syntax

packages/@core/ui-kit/tabs-ui/package.json

@@ -37,7 +37,6 @@
     }
   },
   "dependencies": {
-    "@vben-core/design": "workspace:*",
     "@vben-core/hooks": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",

packages/@core/ui-kit/tabs-ui/src/components/index.ts

@@ -1 +1,2 @@
+export { default as Tabs } from './tabs/tabs.vue';
 export { default as TabsChrome } from './tabs-chrome/tabs.vue';

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TabItem } from '@vben-core/typings';
+import type { TabDefinition } from '@vben-core/typings';
 
-import type { TabsProps } from '../../types';
+import type { TabConfig, TabsProps } from '../../types';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   tabs: () => [],
 });
 
-const emit = defineEmits<{ close: [string]; unpin: [TabItem] }>();
+const emit = defineEmits<{ close: [string]; unpin: [TabDefinition] }>();
 const active = defineModel<string>('active');
 
 const contentRef = ref();
@@ -56,12 +56,14 @@ const layout = () => {
   tabWidth.value = width;
 };
 
-const tabsView = computed(() => {
+const tabsView = computed((): TabConfig[] => {
   return props.tabs.map((tab) => {
     return {
       ...tab,
       affixTab: !!tab.meta?.affixTab,
-      closable: tab.meta?.tabClosable ?? true,
+      closable: Reflect.has(tab.meta, 'tabClosable')
+        ? !!tab.meta.tabClosable
+        : true,
       icon: tab.meta.icon as string,
       key: tab.fullPath || tab.path,
       title: (tab.meta?.title || tab.name) as string,
@@ -85,7 +87,8 @@ onMounted(() => {
 function handleClose(key: string) {
   emit('close', key);
 }
-function handleUnpinTab(tab: TabItem) {
+
+function handleUnpinTab(tab: TabConfig) {
   emit('unpin', tab);
 }
 </script>

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

@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div></div>
-</template>

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

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { VbenScrollbar } from '@vben-core/shadcn-ui';
+</script>
+
+<template>
+  <div class="bg-accent size-full">
+    <VbenScrollbar>
+      <slot></slot>
+    </VbenScrollbar>
+  </div>
+</template>

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

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import type { TabItem } from '@vben-core/typings';
+import type { TabDefinition } from '@vben-core/typings';
 
 import { nextTick, onMounted } from 'vue';
 
-import { useSortable } from '@vben-core/hooks';
-import { useForwardPropsEmits } from '@vben-core/shadcn-ui';
+import { useForwardPropsEmits, useSortable } from '@vben-core/hooks';
 
 import { TabsChrome } from './components';
 import { TabsProps } from './types';
@@ -23,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   close: [string];
   sortTabs: [number, number];
-  unpin: [TabItem];
+  unpin: [TabDefinition];
 }>();
 
 const forward = useForwardPropsEmits(props, emit);

packages/@core/ui-kit/tabs-ui/src/types.ts

@@ -1,5 +1,5 @@
 import type { IContextMenuItem } from '@vben-core/shadcn-ui';
-import type { TabItem } from '@vben-core/typings';
+import type { TabDefinition } from '@vben-core/typings';
 
 interface TabsProps {
   /**
@@ -41,7 +41,15 @@ interface TabsProps {
   /**
    * @zh_CN 选项卡数据
    */
-  tabs?: TabItem[];
+  tabs?: TabDefinition[];
 }
 
-export type { TabsProps };
+interface TabConfig extends TabDefinition {
+  affixTab: boolean;
+  closable: boolean;
+  icon: string;
+  key: string;
+  title: string;
+}
+
+export type { TabConfig, TabsProps };