Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

packages/@core/base/shared/package.json

@@ -81,7 +81,6 @@
   "dependencies": {
     "@ctrl/tinycolor": "catalog:",
     "@tanstack/vue-store": "catalog:",
-    "@vue/reactivity": "catalog:",
     "@vue/shared": "catalog:",
     "clsx": "catalog:",
     "defu": "catalog:",

packages/@core/base/shared/src/utils/index.ts

@@ -5,7 +5,6 @@ export * from './inference';
 export * from './letter';
 export * from './merge';
 export * from './nprogress';
-export * from './reactivity';
 export * from './state-handler';
 export * from './to';
 export * from './tree';

packages/@core/base/shared/src/utils/reactivity.ts

@@ -1,26 +0,0 @@
-import { isProxy, isReactive, isRef, toRaw } from '@vue/reactivity';
-
-function deepToRaw<T extends Record<string, any>>(sourceObj: T): T {
-  const objectIterator = (input: any): any => {
-    if (Array.isArray(input)) {
-      return input.map((item) => objectIterator(item));
-    }
-    if (isRef(input) || isReactive(input) || isProxy(input)) {
-      return objectIterator(toRaw(input));
-    }
-    if (input && typeof input === 'object') {
-      const result = {} as T;
-      for (const key in input) {
-        if (Object.prototype.hasOwnProperty.call(input, key)) {
-          result[key as keyof T] = objectIterator(input[key]);
-        }
-      }
-      return result;
-    }
-    return input;
-  };
-
-  return objectIterator(sourceObj);
-}
-
-export { deepToRaw };

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

@@ -7,7 +7,6 @@ import { computed, ref } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
-import { deepToRaw } from '@vben-core/shared/utils';
 
 interface Props extends TabsProps {}
 
@@ -40,19 +39,21 @@ const style = computed(() => {
   };
 });
 
-const tabsView = computed((): TabConfig[] => {
+const tabsView = computed(() => {
-  return props.tabs.map((_tab) => {
+  return props.tabs.map((tab) => {
-    const tab = deepToRaw(_tab);
+    const { fullPath, meta, name, path } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
-      ...tab,
+      affixTab: !!affixTab,
-      affixTab: !!tab.meta?.affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
-      closable: Reflect.has(tab.meta, 'tabClosable')
+      fullPath,
-        ? !!tab.meta.tabClosable
+      icon: icon as string,
-        : true,
+      key: fullPath || path,
-      icon: tab.meta.icon as string,
+      meta,
-      key: tab.fullPath || tab.path,
+      name,
-      title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
+      path,
-    };
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
   });
 });
 </script>

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

@@ -7,7 +7,6 @@ import { computed } from 'vue';
 
 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
-import { deepToRaw } from '@vben-core/shared/utils';
 
 interface Props extends TabsProps {}
 
@@ -46,19 +45,21 @@ const typeWithClass = computed(() => {
   return typeClasses[props.styleType || 'plain'] || { content: '' };
 });
 
-const tabsView = computed((): TabConfig[] => {
+const tabsView = computed(() => {
-  return props.tabs.map((_tab) => {
+  return props.tabs.map((tab) => {
-    const tab = deepToRaw(_tab);
+    const { fullPath, meta, name, path } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
     return {
-      ...tab,
+      affixTab: !!affixTab,
-      affixTab: !!tab.meta?.affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
-      closable: Reflect.has(tab.meta, 'tabClosable')
+      fullPath,
-        ? !!tab.meta.tabClosable
+      icon: icon as string,
-        : true,
+      key: fullPath || path,
-      icon: tab.meta.icon as string,
+      meta,
-      key: tab.fullPath || tab.path,
+      name,
-      title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
+      path,
-    };
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
   });
 });
 </script>

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

@@ -11,7 +11,7 @@ import {
   usePreferences,
 } from '@vben/preferences';
 import { useLockStore } from '@vben/stores';
-import { deepToRaw, mapTree } from '@vben/utils';
+import { cloneDeep, mapTree } from '@vben/utils';
 import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
@@ -112,7 +112,7 @@ const {
 
 function wrapperMenus(menus: MenuRecordRaw[]) {
   return mapTree(menus, (item) => {
-    return { ...deepToRaw(item), name: $t(item.name) };
+    return { ...cloneDeep(item), name: $t(item.name) };
   });
 }