fix: vue received a Component that was made a reactive object (#4367)

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

@@ -71,6 +71,7 @@
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
     "@tanstack/vue-store": "^0.5.5",
+    "@vue/reactivity": "^3.5.4",
     "@vue/shared": "^3.5.4",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",

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

@@ -5,6 +5,7 @@ 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

@@ -0,0 +1,26 @@
+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/package.json

@@ -40,6 +40,7 @@
     "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "vue": "^3.5.4"

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

@@ -7,6 +7,7 @@ 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,7 +41,8 @@ const style = computed(() => {
 });
 
 const tabsView = computed((): TabConfig[] => {
-  return props.tabs.map((tab) => {
+  return props.tabs.map((_tab) => {
+    const tab = deepToRaw(_tab);
     return {
       ...tab,
       affixTab: !!tab.meta?.affixTab,

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

@@ -7,6 +7,7 @@ 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,7 +47,8 @@ const typeWithClass = computed(() => {
 });
 
 const tabsView = computed((): TabConfig[] => {
-  return props.tabs.map((tab) => {
+  return props.tabs.map((_tab) => {
+    const tab = deepToRaw(_tab);
     return {
       ...tab,
       affixTab: !!tab.meta?.affixTab,

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

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

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

@@ -5,7 +5,7 @@ import type { MenuProps } from '@vben-core/menu-ui';
 import { Menu } from '@vben-core/menu-ui';
 
 interface Props extends MenuProps {
-  menus?: MenuRecordRaw[];
+  menus: MenuRecordRaw[];
 }
 
 const props = withDefaults(defineProps<Props>(), {