diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index d3363c1b..08ff80b7 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -7,7 +7,7 @@ on:
 
 jobs:
   deploy-push-playground-ftp:
-    name: Deploy Push Ftp
+    name: Deploy Push Playground Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
@@ -46,7 +46,7 @@ jobs:
           local-dir: ./docs/.vitepress/dist/
 
   deploy-push-antd-ftp:
-    name: Deploy Push Ftp
+    name: Deploy Push Antd Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
@@ -77,7 +77,7 @@ jobs:
           local-dir: ./apps/web-antd/dist/
 
   deploy-push-ele-ftp:
-    name: Deploy Push Ftp
+    name: Deploy Push Element Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
@@ -108,7 +108,7 @@ jobs:
           local-dir: ./apps/web-ele/dist/
 
   deploy-push-naive-ftp:
-    name: Deploy Push Ftp
+    name: Deploy Push Naive Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
diff --git a/package.json b/package.json
index be4baaba..025bad21 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,8 @@
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vben/vsh": "workspace:*",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
@@ -85,6 +87,7 @@
     "unbuild": "^2.0.0",
     "vite": "^5.4.0",
     "vitest": "^2.0.5",
+    "vue": "^3.4.37",
     "vue-tsc": "^2.0.29"
   },
   "engines": {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue b/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
index 83304883..3cc31f66 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
@@ -8,7 +8,7 @@ import {
   AlertDialogHeader,
   AlertDialog as AlertDialogRoot,
   AlertDialogTitle,
-} from '@vben-core/shadcn-ui/components/ui/alert-dialog';
+} from '../ui/alert-dialog';
 
 interface Props {
   cancelText?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index b16f549b..e42326db 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -7,11 +7,7 @@ import type {
 
 import { computed } from 'vue';
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@vben-core/shadcn-ui/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
   alt?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
index f27ab442..7ba685a8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './interface';
+import type { IBreadcrumb } from './types';
 
 import { VbenIcon } from '../icon';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
index 6b316414..1bdf88fe 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './interface';
+import type { IBreadcrumb } from './types';
 
 import { ChevronDown } from '@vben-core/icons';
+
+import { VbenIcon } from '../icon';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -9,15 +11,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@vben-core/shadcn-ui/components/ui/breadcrumb';
+} from '../ui/breadcrumb';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
-
-import { VbenIcon } from '../icon';
+} from '../ui/dropdown-menu';
 
 interface Props {
   breadcrumbs: IBreadcrumb[];
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
index d9dc18fa..f641f0b4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
@@ -1,4 +1,4 @@
 export { default as VbenBreadcrumb } from './breadcrumb.vue';
 export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue';
 
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index cfe25ac6..2f46c91e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -2,14 +2,12 @@
 import { computed } from 'vue';
 
 import { LoaderCircle } from '@vben-core/icons';
-import {
-  type ButtonVariants,
-  buttonVariants,
-} from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
+import { type ButtonVariants, buttonVariants } from '../ui/button';
+
 interface Props extends PrimitiveProps {
   class?: any;
   disabled?: boolean;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
index e90599e1..f8034732 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { ButtonVariants } from '@vben-core/shadcn-ui/components/ui/button';
+import type { ButtonVariants } from '../ui/button';
 
 import { computed, useSlots } from 'vue';
 
-import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
 import { cn } from '@vben-core/shared';
 
 import { type PrimitiveProps } from 'radix-vue';
 
+import { VbenTooltip } from '../tooltip';
 import VbenButton from './button.vue';
 
 interface Props extends PrimitiveProps {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
index ebd54f16..7dd14eb9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
 
-import { Checkbox } from '@vben-core/shadcn-ui/components/ui/checkbox';
-
 import { useForwardPropsEmits } from 'radix-vue';
 
+import { Checkbox } from '../ui/checkbox';
+
 const props = defineProps<
   {
     name: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index d2ae68cd..66e08ec9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -9,6 +9,8 @@ import type { IContextMenuItem } from './interface';
 
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   ContextMenu,
   ContextMenuContent,
@@ -16,9 +18,7 @@ import {
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/context-menu';
-
-import { useForwardPropsEmits } from 'radix-vue';
+} from '../ui/context-menu';
 
 const props = defineProps<
   {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
index d02a88d6..f098add9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
+} from '../ui/dropdown-menu';
 
 interface Props extends DropdownMenuProps {}
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
index cc71f789..f71b2332 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -7,7 +7,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
+} from '../ui/dropdown-menu';
 
 interface Props extends DropdownMenuProps {}
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index 8c905143..5bd57824 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -7,13 +7,13 @@ import type {
 
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@vben-core/shadcn-ui/components/ui/hover-card';
-
-import { useForwardPropsEmits } from 'radix-vue';
+} from '../ui/hover-card';
 
 interface Props extends HoverCardRootProps {
   class?: any;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
index 4cbd3e17..d771f5fa 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -2,13 +2,10 @@
 import { ref, useSlots } from 'vue';
 
 import { Eye, EyeOff } from '@vben-core/icons';
-import {
-  type InputProps,
-  VbenInput,
-} from '@vben-core/shadcn-ui/components/input';
 
 import { useForwardProps } from 'radix-vue';
 
+import { type InputProps, VbenInput } from '../input';
 import PasswordStrength from './password-strength.vue';
 
 interface Props extends InputProps {}
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
index 1db0ece3..e036594e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
@@ -1,2 +1,2 @@
 export { default as VbenInput } from './input.vue';
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
index 2502504e..b6615a3e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { InputProps } from './interface';
+import type { InputProps } from './types';
 
 import { computed } from 'vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
index 4e8c209d..9d6a61ae 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
@@ -1,3 +1,3 @@
 export { default as VbenPinInput } from './input.vue';
 
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index a0b57de9..f0b66d6e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import type { PinInputProps } from './interface';
+import type { PinInputProps } from './types';
 
 import { computed, ref, watch } from 'vue';
 
-import { VbenButton } from '@vben-core/shadcn-ui/components/button';
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@vben-core/shadcn-ui/components/ui/pin-input';
+import { VbenButton } from '../button';
+import { PinInput, PinInputGroup, PinInputInput } from '../ui/pin-input';
 
 defineOptions({
   inheritAttrs: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index 7e9c382e..a725652e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -7,13 +7,13 @@ import type {
 
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   PopoverContent,
   Popover as PopoverRoot,
   PopoverTrigger,
-} from '@vben-core/shadcn-ui/components/ui/popover';
-
-import { useForwardPropsEmits } from 'radix-vue';
+} from '../ui/popover';
 
 interface Props extends PopoverRootProps {
   class?: any;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index ab2448b5..fe612db4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import {
-  ScrollArea,
-  ScrollBar,
-} from '@vben-core/shadcn-ui/components/ui/scroll-area';
 import { cn } from '@vben-core/shared';
 
+import { ScrollArea, ScrollBar } from '../ui/scroll-area';
+
 interface Props {
   class?: any;
   horizontal?: boolean;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
index f315772e..1ec820d9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
@@ -1,3 +1,3 @@
-export type * from './interface';
-
 export { default as VbenSegmented } from './segmented.vue';
+
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index fbd82936..645faa21 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import type { SegmentedItem } from './interface';
+import type { SegmentedItem } from './types';
 
 import { computed } from 'vue';
 
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-} from '@vben-core/shadcn-ui/components/ui/tabs';
-
 import { TabsTrigger } from 'radix-vue';
 
+import { Tabs, TabsContent, TabsList } from '../ui/tabs';
 import TabsIndicator from './tabs-indicator.vue';
 
 interface Props {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/segmented/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue b/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
index f1d29b05..43bd2fe7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import {
-  VbenButton,
-  VbenIconButton,
-} from '@vben-core/shadcn-ui/components/button';
-import { VbenScrollbar } from '@vben-core/shadcn-ui/components/scrollbar';
+import { X } from 'lucide-vue-next';
+
+import { VbenButton, VbenIconButton } from '../button';
+import { VbenScrollbar } from '../scrollbar';
 import {
   Sheet,
   SheetClose,
@@ -15,9 +14,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@vben-core/shadcn-ui/components/ui/sheet';
-
-import { X } from 'lucide-vue-next';
+} from '../ui/sheet';
 
 interface Props {
   cancelText?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index 83e58358..740ef4b3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -8,7 +8,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@vben-core/shadcn-ui/components/ui/tooltip';
+} from '../ui/tooltip';
 
 interface Props {
   contentClass?: any;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
index 1b21b918..52f05d6e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes } from 'vue';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue';
 
+import { buttonVariants } from '../button';
+
 const props = defineProps<
   { class?: HTMLAttributes['class'] } & AlertDialogActionProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
index b40eecbd..088113f8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes } from 'vue';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue';
 
+import { buttonVariants } from '../button';
+
 const props = defineProps<
   { class?: HTMLAttributes['class'] } & AlertDialogCancelProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
index 18d151c9..7cf0168f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import type { VariantProps } from 'class-variance-authority';
 
+import type { toggleVariants } from '../toggle';
+
 import { computed, type HTMLAttributes, provide } from 'vue';
 
 import { cn } from '@vben-core/shared';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
index ab5426e8..75b04f3c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'class-variance-authority';
 
 import { computed, type HTMLAttributes, inject } from 'vue';
 
-import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import { cn } from '@vben-core/shared';
 
 import {
@@ -12,6 +11,8 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
+import { toggleVariants } from '../toggle';
+
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
diff --git a/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
new file mode 100644
index 00000000..b297c3c9
--- /dev/null
+++ b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { EllipsisText } from '..';
+
+describe('ellipsis-text.vue', () => {
+  it('renders the correct content and truncates text', async () => {
+    const wrapper = mount(EllipsisText, {
+      props: {
+        line: 1,
+        title: 'Test Title',
+      },
+      slots: {
+        default: 'This is a very long text that should be truncated.',
+      },
+    });
+
+    expect(wrapper.text()).toContain('This is a very long text');
+    // 检查 ellipsis 是否应用了正确的 class
+    const ellipsis = wrapper.find('.truncate');
+    expect(ellipsis.exists()).toBe(true);
+  });
+
+  it('expands text on click if expand is true', async () => {
+    const wrapper = mount(EllipsisText, {
+      props: {
+        expand: true,
+        line: 1,
+      },
+      slots: {
+        default: 'This is a very long text that should be truncated.',
+      },
+    });
+
+    const ellipsis = wrapper.find('.truncate');
+    await ellipsis.trigger('click');
+    expect(wrapper.emitted('expandChange')).toBeTruthy();
+  });
+});
diff --git a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index beb92740..f57cccc9 100644
--- a/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -51,6 +51,7 @@ interface Props {
    */
   tooltipOverlayStyle?: CSSProperties;
 }
+
 const props = withDefaults(defineProps<Props>(), {
   expand: false,
   line: 1,
diff --git a/packages/effects/common-ui/src/components/page/__tests__/page.test.ts b/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
new file mode 100644
index 00000000..0efb72d2
--- /dev/null
+++ b/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { Page } from '..';
+
+describe('page.vue', () => {
+  it('renders title when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        title: 'Test Title',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Title');
+  });
+
+  it('renders description when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Description');
+  });
+
+  it('renders default slot content', () => {
+    const wrapper = mount(Page, {
+      slots: {
+        default: '<p>Default Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Default Slot Content</p>');
+  });
+
+  it('renders footer slot when showFooter is true', () => {
+    const wrapper = mount(Page, {
+      props: {
+        showFooter: true,
+      },
+      slots: {
+        footer: '<p>Footer Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Footer Slot Content</p>');
+  });
+
+  it('applies the custom contentClass', () => {
+    const wrapper = mount(Page, {
+      props: {
+        contentClass: 'custom-class',
+      },
+    });
+
+    const contentDiv = wrapper.find('.m-4');
+    expect(contentDiv.classes()).toContain('custom-class');
+  });
+
+  it('does not render description slot if description prop is provided', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+      slots: {
+        description: '<p>Description Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Description');
+    expect(wrapper.html()).not.toContain('Description Slot Content');
+  });
+});
diff --git a/packages/effects/common-ui/src/components/page/page-footer.vue b/packages/effects/common-ui/src/components/page/page-footer.vue
deleted file mode 100644
index d86d1062..00000000
--- a/packages/effects/common-ui/src/components/page/page-footer.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'PageFooter',
-});
-</script>
-
-<template>
-  <div
-    class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
-  >
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/effects/common-ui/src/components/page/page-header.vue b/packages/effects/common-ui/src/components/page/page-header.vue
deleted file mode 100644
index 7ee8d180..00000000
--- a/packages/effects/common-ui/src/components/page/page-header.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { PageHeaderProps } from './page.ts';
-
-defineOptions({
-  name: 'PageHeader',
-});
-
-const props = defineProps<PageHeaderProps>();
-</script>
-
-<template>
-  <div class="bg-card px-6 py-4">
-    <div class="mb-2 flex justify-between text-xl font-bold leading-10">
-      {{ props.title }}
-    </div>
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/effects/common-ui/src/components/page/page.ts b/packages/effects/common-ui/src/components/page/page.ts
deleted file mode 100644
index e0bd76b9..00000000
--- a/packages/effects/common-ui/src/components/page/page.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-interface PageHeaderProps {
-  title?: string;
-  description?: string;
-}
-
-interface Props extends PageHeaderProps {
-  contentClass?: string;
-  showFooter?: boolean;
-}
-
-export type { PageHeaderProps, Props };
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
index b1bf8ae8..cdbefa23 100644
--- a/packages/effects/common-ui/src/components/page/page.vue
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
-import type { Props } from './page';
-
-import PageFooter from './page-footer.vue';
-import PageHeader from './page-header.vue';
+interface Props {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  showFooter?: boolean;
+}
 
 defineOptions({
   name: 'Page',
 });
 
 const props = withDefaults(defineProps<Props>(), {
+  contentClass: '',
   description: '',
   showFooter: false,
   title: '',
@@ -17,22 +20,26 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="relative h-full">
-    <PageHeader
+    <div
       v-if="description || $slots.description || title"
-      :title="props.title"
+      class="bg-card px-6 py-4"
     >
-      <template #default>
-        <template v-if="description">{{ description }}</template>
-        <slot v-else name="description"></slot>
-      </template>
-    </PageHeader>
+      <div class="mb-2 flex justify-between text-xl font-bold leading-10">
+        {{ title }}
+      </div>
+      <template v-if="description">{{ description }}</template>
+      <slot v-else name="description"></slot>
+    </div>
+
     <div :class="contentClass" class="m-4">
       <slot></slot>
     </div>
-    <PageFooter v-if="props.showFooter">
-      <template #default>
-        <slot name="footer"></slot>
-      </template>
-    </PageFooter>
+
+    <div
+      v-if="props.showFooter"
+      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+    >
+      <slot name="footer"></slot>
+    </div>
   </div>
 </template>
diff --git a/packages/effects/common-ui/src/ui/authentication/code-login.vue b/packages/effects/common-ui/src/ui/authentication/code-login.vue
index 53e1c0b1..2cc29992 100644
--- a/packages/effects/common-ui/src/ui/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LoginCodeEmits } from './typings';
+import type { LoginCodeEmits } from './types';
 
 import { computed, onBeforeUnmount, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/ui/authentication/index.ts b/packages/effects/common-ui/src/ui/authentication/index.ts
index 6b1c7bb8..ec6b1495 100644
--- a/packages/effects/common-ui/src/ui/authentication/index.ts
+++ b/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -8,4 +8,4 @@ export type {
   AuthenticationProps,
   LoginAndRegisterParams,
   LoginCodeParams,
-} from './typings';
+} from './types';
diff --git a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 14a2ac4f..c9d0fc4c 100644
--- a/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginAndRegisterParams } from './typings';
+import type { AuthenticationProps, LoginAndRegisterParams } from './types';
 
 import { useForwardPropsEmits } from '@vben/hooks';
 import {
diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
index 0e80c06a..b490f72f 100644
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginEmits } from './typings';
+import type { AuthenticationProps, LoginEmits } from './types';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/ui/authentication/register.vue b/packages/effects/common-ui/src/ui/authentication/register.vue
index 85336be0..c1f115b9 100644
--- a/packages/effects/common-ui/src/ui/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RegisterEmits } from './typings';
+import type { RegisterEmits } from './types';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/ui/authentication/typings.ts b/packages/effects/common-ui/src/ui/authentication/types.ts
similarity index 100%
rename from packages/effects/common-ui/src/ui/authentication/typings.ts
rename to packages/effects/common-ui/src/ui/authentication/types.ts
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index 72af6f1a..10cd96a8 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { RegisterEmits } from './typings';
-
 import { computed, reactive } from 'vue';
 
 import {
@@ -19,6 +17,14 @@ interface Props {
   text?: string;
 }
 
+interface LockAndRegisterParams {
+  lockScreenPassword: string;
+}
+
+interface RegisterEmits {
+  submit: [LockAndRegisterParams];
+}
+
 defineOptions({
   name: 'LockScreenModal',
 });
diff --git a/packages/effects/layouts/src/widgets/lock-screen/typings.ts b/packages/effects/layouts/src/widgets/lock-screen/typings.ts
deleted file mode 100644
index c06ea750..00000000
--- a/packages/effects/layouts/src/widgets/lock-screen/typings.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface LockAndRegisterParams {
-  lockScreenPassword: string;
-}
-
-interface RegisterEmits {
-  submit: [LockAndRegisterParams];
-}
-
-export type { LockAndRegisterParams, RegisterEmits };
diff --git a/playground/src/views/demos/access/admin-visible.vue b/playground/src/views/demos/access/admin-visible.vue
index f63b2d9d..079b9309 100644
--- a/playground/src/views/demos/access/admin-visible.vue
+++ b/playground/src/views/demos/access/admin-visible.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 </script>
 
 <template>
-  <Page description="当前页面仅 Admin 账号可见" title="页面访问测试" />
+  <Fallback
+    description="当前页面仅 Admin 账号可见"
+    status="coming-soon"
+    title="页面访问测试"
+  />
 </template>
diff --git a/playground/src/views/demos/access/super-visible.vue b/playground/src/views/demos/access/super-visible.vue
index ce89116b..877fcd11 100644
--- a/playground/src/views/demos/access/super-visible.vue
+++ b/playground/src/views/demos/access/super-visible.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 </script>
 
 <template>
-  <Page description="当前页面仅 Super 账号可见" title="页面访问测试" />
+  <Fallback
+    description="当前页面仅 Super 账号可见"
+    status="coming-soon"
+    title="页面访问测试"
+  />
 </template>
diff --git a/playground/src/views/demos/access/user-visible.vue b/playground/src/views/demos/access/user-visible.vue
index 7523cc5c..a3c5f001 100644
--- a/playground/src/views/demos/access/user-visible.vue
+++ b/playground/src/views/demos/access/user-visible.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import { Fallback } from '@vben/common-ui';
 </script>
 
 <template>
-  <Page description="当前页面仅 User 账号可见" title="页面访问测试" />
+  <Fallback
+    description="当前页面仅 User 账号可见"
+    status="coming-soon"
+    title="页面访问测试"
+  />
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3bed673a..9a34bb76 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,6 +55,12 @@ importers:
       '@vben/vsh':
         specifier: workspace:*
         version: link:scripts/vsh
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.2
+        version: 5.1.2(vite@5.4.0(@types/node@22.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.37(typescript@5.5.4))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@5.4.0(@types/node@22.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.37(typescript@5.5.4))
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
@@ -100,6 +106,9 @@ importers:
       vitest:
         specifier: ^2.0.5
         version: 2.0.5(@types/node@22.2.0)(jsdom@24.1.1)(sass@1.77.8)(terser@5.31.3)
+      vue:
+        specifier: ^3.4.37
+        version: 3.4.37(typescript@5.5.4)
       vue-tsc:
         specifier: ^2.0.29
         version: 2.0.29(typescript@5.5.4)
@@ -3344,6 +3353,7 @@ packages:
 
   '@ls-lint/ls-lint@2.2.3':
     resolution: {integrity: sha512-ekM12jNm/7O2I/hsRv9HvYkRdfrHpiV1epVuI2NP+eTIcEgdIdKkKCs9KgQydu/8R5YXTov9aHdOgplmCHLupw==}
+    cpu: [x64, arm64, s390x]
     os: [darwin, linux, win32]
     hasBin: true
 
diff --git a/vitest.config.ts b/vitest.config.ts
index 647a9e54..cada073f 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,9 @@
+import Vue from '@vitejs/plugin-vue';
+import VueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  plugins: [Vue(), VueJsx()],
   test: {
     environment: 'jsdom',
   },