!11 follow后端发布

* docs: readme * fix: missing formPath * chore: 去除锁定的esbuild版本 * perf: 去除debug组件 * perf: 参数键值自动高度 * refactor: 代码生成配置页面重构去除步骤条 * perf: 移除文件 * docs: 文件夹说明 * chore: 移除一些配置项 * chore: 注释优化 * refactor: 移除ele和naive目录 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * perf: request support to set how to return response (#5436) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: 登录超时的i18n * fix: requestClient缺失i18n内容 * refactor: 优化oss下载进度提示 * feat: 下载进度loading * fix: antd button icon style (#5421) * feat: oss下载进度(已下载的KB 无法作为进度显示 total返回为null) * fix: 下载文件时(responseType === 'blob')需要判断下载失败(返回json而非二进制)的情况 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: 新增后跳转到未发布流程 * fix: same name route * chore: 调整为部署json类型 * fix: mouse events ignored on modal loading (#5409) * docs: update docs (#5408) * refactor: 移除已经弃用的方法 * refactor: follow官方handleRangeTimeValue更新 * chore: 删除文件夹(前端路由需要的) * chore: 修改本地路由写法(新版)/新增本地菜单图标 * fix: form update state error before form mounted (#5406) * fix: demos route fixed (#5405) * chore: 不使用基础布局（仅在顶级生效） * feat: modal state locked on submitting (#5401) * chore: 修改zIndex * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * refactor: fix popup component zIndex (#5397) * style: element plus loading style fixed (#5393) * perf: improve fieldMappingTime to support format function (#5392) * fix: hide root route in breadcrumb * feat: support set default props for drawer and modal (#5390) * fix: root router config fixed (#5389) * fix: 修改Vxe默认zIndex为995 解决右上角全屏后modal/drawer(zIndex: 1000)被遮挡 * feat: add `noBasicLayout` in route meta (#5386) * chore: wechat image * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 改为全局参数配置去除局部参数 * fix: spinner may stop playing animation after dismiss (#5365) * style: popover bgColor is too close to common (#5364) * docs: version update * docs: changelog * chore: 文件上传描述 * ci: retry deploy while faild * feat: 文件上传进度条+提示文字 * feat: 文件上传进度条 * feat: 上传文件格式说明 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * fix: useEcharts return invalid instance (#5360) * feat: popup component support overlay blur effect (#5359) * feat: improve `tippy` demo (#5357) * feat: integrate new component `Tippy` with demo (#5355) * chore: 优化表格图片显示 * perf: add nested modal demo (#5353) * chore: 默认显示右边的滚动条防止出现滚动条被挤压 * perf: modal and drawer api support chain calls (#5351) * feat: allow close tab when mouse middle button click (#5347) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * refactor: 重构显示total的逻辑 * chore: 调整高度自适应代码 * chore: vxe升级4.10.0版本(锁定) * fix: 添加失效的option * fix: 需要为数组 * fix: locale switching logic correction (#5344) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into warmflow * chore: 导入类型优化解决eslint报红 * refactor: type/注释优化去除大量any * fix: vxeGrid init without search form (#5342) * chore: 锁屏默认false 关闭该功能 * chore: 调整接口 * chore: update deps * fix: primaryColor calculation (#5337) * fix: form valid-error style in naive (#5336) * fix: form `fieldMappingTime` improve and `modelPropName` support (#5335) * fix: code lint * fix: form `fieldMappingTime` is not working (#5333) * chore: 选人组件样式 * fix: download from url triggered twice sometimes (#5319) * chore: 优化代码 * chore: 动态类名(无效)改为style * refactor: 字典相关功能重构采用一个Map储存字典(之前为两个Map) * feat: 字典支持number类型存储 * chore: 调整样式 * chore: 修改选中border为1px * chore: 字段 * chore: 改为新窗口打开(适用于pdf/图片)而非直接下载 * chore: 更新样式 * chore: 更新字段 * chore: 改为computed * chore: 跳转到未发布流程tab * chore: 优化样式 * docs: readme * fix: name重复导致的404 * Merge branch 'dev' of https://gitee.com/dapppp/ruoyi-plus-vben5 into warmflow * chore: 使用legacy来保证copy的兼容性 * chore: 去除log 添加说明 * chore: 优化代码 * feat: 节点关联/节点独立的切换逻辑 * chore: remove logic * chore: vxe可编辑表格demo * chore: 不允许在按钮下添加数据 * docs: changelog * fix: wrong code * chore: 移除测试菜单 * chore: 优化代码 * refactor: 租户套餐菜单替换为新版 * refactor: 使用新版菜单勾选 * chore: 点行会勾选/取消全部权限点权限不会勾选行 * chore: 全屏引导+样式优化 * chore: 调整间距 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: useEcharts exports echarts instance#5294 (#5299) * chore: update quick-start.md (#5303) * chore: updateCheckedNumber * refactor: 优化代码 * chore: 优化代码 * chore: 优化样式 * chore: keys依赖于menu 需要先加载menu * chore: 菜单加载完毕再显示 * feat: 新的菜单选择组件(beta) * chore: $t * chore: 测试菜单页面 * chore: 优化代码 * feat: 对ossId回显的支持 * chore: 只获取一次默认密码而非每次打开modal都获取 * fix: vben select placeholder color (#5286) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * perf: format code with better style (#5283) * chore: 工作流演示站 * fix: sidebar preferences fixed (#5276) * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: breadcrumb setting not valid for `header-sidebar-nav` layout (#5275) * fix: header logo may not be collapsed in `header-sidebar-nav` layout (#5274) * feat: new layout `sidebar nav with full header` (#5270) * feat: drawer close icon placement (#5269) * docs: update dialog and drawer docs * feat: drawer support destroy on close * feat: drawer support `onOpened` & `onClosed` * feat: modal support destroy on close * fix: wrong boolean * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 调整tab位置 * chore: 删除历史流程改为tab切换 * fix: header-mixed layout side-menu active (#5265) * feat: header mixed layout (#5263) * chore: release 5.5.2 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: downgrade vue-tsc version * feat: header menu align support (#5256) * chore: update deps * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: add apiSelect remote search demo (#5246) * chore: 审批改为description而非disabled的表单 * chore: 改为ts * chore: 错误的conetnt * refactor: 终止/转办/委托支持填写意见 * chore: 第一次拿到的是readonly的数据如果需要修改需要cloneDeep * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: grid form submit button locale switch (#5205) * chore: 调整驳回 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: build error (#5199) * fix: esbuild自动升级导致运行/打包报错 * fix: esbuild自动升级导致运行/打包报错 * chore: 流程定义激活改为switch * chore: 流程申请支持上传文件 * chore: title 审批通过 * fix: vxeGrid top padding (#5193) * fix: 表格排序翻页会丢失排序参数 * chore: 去除log打印 * chore: 流程监控待办任务 * chore: 我发起的 * chore: 去除已经移除的菜单页面 * chore: 我的已办 * chore: 页面优化 * chore: 重置tooltip * feat: 我的抄送搜索/优化重复触发的接口 * feat: 流程定义历史 * chore: 修改分类 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * fix: grid tools in toolbar config not working as expected (#5190) * feat: add `resizable` and `ColPage` component (#5188) * chore: 条件 * chore: break-all * feat: 流程分类搜索 * chore: 弹窗关闭后仍然显示表单浮层 * chore: 选人组件的样式 * chore: 搜索的样式 * chore: 漏掉的导入 * chore: 最大显示的头像数量超过显示为省略号头像 * fix: 选人的一些问题 * Merge branch 'warmflow' of https://gitee.com/dapppp/ruoyi-plus-vben5 i… * chore: 没有更多数据了 * fix: sidebar header height (#5183) * chore: 搜索表单布局+申请人 * fix: remove the overlap caused by border-b (#5160) * docs: fix typos (#5169) * fix: resolve eslint errors as well as TS type errors (#5172) * chore: enter提交表单 * chore: 修改文案 * chore: 默认全部展开 * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: page content class override (#5179) * fix: sidebar style on focus (#5178) * fix: 抄送选人最右侧已选中删除item无效 * feat: 复制 * chore: 昵称过长的显示 * chore: 默认选中第一个 * chore: 修改relative位置 * chore: 搜索 * feat: 我的待办 - 搜索条件 * chore: 流程监控 - 待办任务页面的id不唯一改为前端处理 * feat: 修改办理人 * chore: 流程干预 - 加签/减签 * chore: avatar大小 * chore: 抄送需要手动添加createByName * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * chore: 审批通过抄送 * feat: 流程实例-流程预览 * chore: spell * chore: clientid * chore: 分类条件 * chore: 修改办理人 * chore: 更改postMessage参数 * chore: 内嵌iframe高度根据表单高度调整 * chore: 流程详情 * feat: 抄送选择 * chore: 调整分类树 * fix: user homePath no effect sometimes (#5166) * feat: form compact mode support (#5165) * fix: form auto submit no effect when showDefaultActions is false (#5163) * chore: 修改width * feat: 待办任务 * feat: 我的抄送 * chore: 流程定义样式 * chore: 退回后重新申请 * chore: 请假申请布局 * chore: 请假申请-并行会签网关 * chore: 分类去除根目录 * chore: 详情modal(未完成) * chore: 请假申请根据不同状态显示按钮 * chore: 流程删除/撤销 * chore: 审批完成后刷新当前页 * feat: 选人组件(未完成) 加签减签 * docs: fix docs-link and add `EllipsisText` docs (#5158) * chore: 新窗口打开文件 * chore: 审批通过 * chore: 使用useEventListener替换原生 * chore: 字段错误 * chore: iframe通信加载完毕后才显示表单解决卡顿问题 * chore: 审批终止/驳回 * chore: 附件图标 * chore: process_running显示按钮 * chore: label错误 * chore: 保存的事件 * chore: 需要加上clientId * Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev * feat: form `colon` support (#5156) * chore: 完善请假申请 * feat: improve code login demo (#5154) * chore: 客户端管理行高自适应 * chore: 内嵌表单的路径 * chore: 修改avatar背景色 * chore: 注释 * chore: activePath * chore: leave表单 * chore: 修改请假demo路径 * chore: categoryId * chore: 我的已办 * chore: 我发起的 * chore: loading * chore: 历史版本 * chore: 完善task api * chore: 隐藏'菜单加载中' * chore: missing import * feat: add demo for modify menu badge data * chore: 流程实例 * chore: 审批附件 * chore: 我的待办提取公共组件 * chore: 流程部署 * chore: 新增/编辑/导出xml * chore: 流程定义(除历史版本) * feat: `autoActivateChild` support more layout mode (#5148) * feat: auto activate subMenu on select root menu (#5147) * fix: `disabledOnChangeListener` not work in form (#5146) * fix: login expired modal z-index (#5145) * feat: user-dropdown support `hover` trigger (#5143) * fix: pinInput value synchronous update (#5142) * fix: vxeGrid default sort data no effect in first query (#5141) * fix: vscode debug profile (#5140) * fix: form component events bind (#5137) * chore: 在线用户样式开启虚拟滚动 * chore: 去掉个人中心在线设备的分页 * chore: 去掉在线用户的分页 * chore: changelog * refactor: 获取字典的方法提取公共函数减少冗余代码 * fix: element plus validate failed style (#5130) * chore: 使用私有桶的提示 * feat: tabbar support mouse wheel vertical (#5129) * fix: form support `disabledOnInputListener` (#5127) * fix: form submission not appropriate (#5126) * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: release 5.5.1 * feat: table search form visible control (#5121) * chore: 需要隐藏菜单 * chore: 我的待办 & 请假 * chore: 流程定义(未完成) * chore: 流程定义(开发中) * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: version * chore: 锁定vxe-table版本 4.9.8版本存在样式问题 * chore: 暂时锁定cspell版本 * refactor: 由于不能输入需要使用watch监听 * chore: https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IB7ANL * chore: 移除冗余代码 * chore: 组件卸载时移除emitter * fix: the route path did not synchronize with the page (#4947) * style: typo (#4948) * chore: 替换为commonDownloadExcel * fix: 左边部门树错误emit导致会调用两次列表api * chore: label样式 * chore: 改为Textarea * chore: 滚动条宽度 * chore: 审批样式 * chore: 部门及以下或本人数据权限 * Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev * chore: 个人中心强退设备接口路径
2025-01-20 03:43:19 +00:00
parent 8ab0bd2212
commit 29f9f3de31
729 changed files with 12839 additions and 9132 deletions
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -10,7 +10,7 @@ import { computed } from 'vue';

 import { Avatar, AvatarFallback, AvatarImage } from '../../ui';

-interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
+interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
  alt?: string;
  class?: ClassType;
  dot?: boolean;
--- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
    <VbenButton
      v-if="visible"
      :style="backTopStyle"
-      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] size-10 rounded-full duration-500"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float z-popup fixed bottom-10 size-10 rounded-full duration-500"
      size="icon"
      variant="icon"
      @click="handleClick"
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
@@ -1,5 +1,4 @@
 import type { BreadcrumbStyleType } from '@vben-core/typings';
-
 import type { Component } from 'vue';

 export interface IBreadcrumb {
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -1,9 +1,8 @@
 import type { AsTag } from 'radix-vue';
+import type { Component } from 'vue';

 import type { ButtonVariants, ButtonVariantSize } from '../../ui';

-import type { Component } from 'vue';
-
 export interface VbenButtonProps {
  /**
   * The element or component this component should render as. Can be overwrite by `asChild`
--- 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
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
  ContextMenuContentProps,
  ContextMenuRootEmits,
  ContextMenuRootProps,
 } from 'radix-vue';

+import type { ClassType } from '@vben-core/typings';
+
 import type { IContextMenuItem } from './interface';

 import { computed } from 'vue';
@@ -22,14 +23,14 @@ import {
 } from '../../ui/context-menu';

 const props = defineProps<
-  {
+  ContextMenuRootProps & {
    class?: ClassType;
    contentClass?: ClassType;
    contentProps?: ContextMenuContentProps;
    handlerData?: Record<string, any>;
    itemClass?: ClassType;
    menus: (data: any) => IContextMenuItem[];
-  } & ContextMenuRootProps
+  }
 >();

 const emits = defineEmits<ContextMenuRootEmits>();
@@ -68,7 +69,7 @@ function handleClick(menu: IContextMenuItem) {
    <ContextMenuContent
      :class="contentClass"
      v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
    >
      <template v-for="menu in menusView" :key="menu.key">
        <ContextMenuItem
--- 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
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
  HoverCardContentProps,
  HoverCardRootEmits,
  HoverCardRootProps,
 } from 'radix-vue';

+import type { ClassType } from '@vben-core/typings';
+
 import { computed } from 'vue';

 import { useForwardPropsEmits } from 'radix-vue';
@@ -46,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
    <HoverCardContent
      :class="contentClass"
      v-bind="contentProps"
-      class="side-content z-[1000]"
+      class="side-content z-popup"
    >
      <slot></slot>
    </HoverCardContent>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/icon/icon.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Component, computed } from 'vue';
+import type { Component } from 'vue';

 import { IconDefault, IconifyIcon } from '@vben-core/icons';
 import {
@@ -8,6 +8,7 @@ import {
  isObject,
  isString,
 } from '@vben-core/shared/utils';
+import { computed } from 'vue';

 const props = defineProps<{
  // 没有是否显示默认图标
--- 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
@@ -47,6 +47,10 @@ watch(
  },
 );

+watch(inputValue, (val) => {
+  modelValue.value = val.join('');
+});
+
 function handleComplete(e: string[]) {
  modelValue.value = e.join('');
  emit('complete');
--- a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
  PopoverContentProps,
  PopoverRootEmits,
  PopoverRootProps,
 } from 'radix-vue';

+import type { ClassType } from '@vben-core/typings';
+
 import { computed } from 'vue';

 import { useForwardPropsEmits } from 'radix-vue';
@@ -47,7 +48,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);

      <PopoverContent
        :class="contentClass"
-        class="side-content z-[1000]"
+        class="side-content z-popup"
        v-bind="contentProps"
      >
        <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -1,8 +1,8 @@
 <script lang="ts">
 import type { Component, PropType } from 'vue';
-import { defineComponent, h } from 'vue';

 import { isFunction, isObject } from '@vben-core/shared/utils';
+import { defineComponent, h } from 'vue';

 export default defineComponent({
  name: 'RenderContent',
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { TabsIndicatorProps } from 'radix-vue';

-import { computed } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
-
 import { TabsIndicator, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & TabsIndicatorProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -29,3 +29,9 @@ const props = defineProps<Props>();
    </SelectContent>
  </Select>
 </template>
+
+<style lang="scss" scoped>
+button[role='combobox'][data-placeholder] {
+  color: hsl(var(--muted-foreground));
+}
+</style>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -73,12 +73,23 @@ function onTransitionEnd() {
    @transitionend="onTransitionEnd"
  >
    <div
+      :class="{ paused: !renderSpinner }"
      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:left-0 before:top-[60px] before:h-[5px] before:w-12 before:rounded-[50%] before:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-full after:rounded after:content-['']"
    ></div>
  </div>
 </template>

 <style scoped>
+.paused {
+  &::before {
+    animation-play-state: paused !important;
+  }
+
+  &::after {
+    animation-play-state: paused !important;
+  }
+}
+
 .loader {
  &::before {
    animation: loader-shadow-ani 0.5s linear infinite;
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ClassType } from '@vben-core/typings';
 import type { TooltipContentProps } from 'radix-vue';
-
 import type { StyleValue } from 'vue';

 import {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue';
+
+import { AccordionRoot, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<AccordionRootProps>();
 const emits = defineEmits<AccordionRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { AccordionContentProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { AccordionContent, type AccordionContentProps } from 'radix-vue';
+import { AccordionContent } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & AccordionContentProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { AccordionItemProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  AccordionItem,
-  type AccordionItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & AccordionItemProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { AccordionTriggerProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  AccordionHeader,
-  AccordionTrigger,
-  type AccordionTriggerProps,
-} from 'radix-vue';
+import { AccordionHeader, AccordionTrigger } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & AccordionTriggerProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { cn } from '@vben-core/shared/utils';
+import type { AvatarVariants } from './avatar';

+import { cn } from '@vben-core/shared/utils';
 import { AvatarRoot } from 'radix-vue';

-import { avatarVariant, type AvatarVariants } from './avatar';
+import { avatarVariant } from './avatar';

 const props = withDefaults(
  defineProps<{
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue';
+import type { AvatarFallbackProps } from 'radix-vue';
+
+import { AvatarFallback } from 'radix-vue';

 const props = defineProps<AvatarFallbackProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'radix-vue';
+
+import { AvatarImage } from 'radix-vue';

 const props = defineProps<AvatarImageProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
@@ -1,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';

 export const avatarVariant = cva(
  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import type { BadgeVariants } from './badge';
+
 import { cn } from '@vben-core/shared/utils';

-import { type BadgeVariants, badgeVariants } from './badge';
+import { badgeVariants } from './badge';

 const props = defineProps<{
  class?: any;
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
@@ -1,4 +1,6 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';

 export const badgeVariants = cva(
  'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { cn } from '@vben-core/shared/utils';
+import type { PrimitiveProps } from 'radix-vue';

-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { cn } from '@vben-core/shared/utils';
+import { Primitive } from 'radix-vue';

 const props = withDefaults(defineProps<{ class?: any } & PrimitiveProps>(), {
  as: 'a',
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+
 import type { ButtonVariants, ButtonVariantSize } from './types';

 import { cn } from '@vben-core/shared/utils';
-
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';

 import { buttonVariants } from './button';

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/button/button.ts
@@ -11,8 +11,8 @@ export const buttonVariants = cva(
      size: {
        default: 'h-9 px-4 py-2',
        icon: 'h-8 w-8 rounded-sm px-1 text-lg',
-        lg: 'h-10 rounded-md px-8',
-        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-4',
+        sm: 'h-8 rounded-md px-2 text-xs',
        xs: 'h-8 w-8 rounded-sm px-1 text-xs',
      },
      variant: {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';

-import { computed } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
-
 import { Check } from 'lucide-vue-next';
 import {
  CheckboxIndicator,
  CheckboxRoot,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & CheckboxRootProps>();
 const emits = defineEmits<CheckboxRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  ContextMenuCheckboxItemEmits,
+  ContextMenuCheckboxItemProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Check } from 'lucide-vue-next';
 import {
  ContextMenuCheckboxItem,
-  type ContextMenuCheckboxItemEmits,
-  type ContextMenuCheckboxItemProps,
  ContextMenuItemIndicator,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & ContextMenuCheckboxItemProps>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
+import type {
+  ContextMenuContentEmits,
+  ContextMenuContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';

 import { cn } from '@vben-core/shared/utils';

 import {
  ContextMenuContent,
-  type ContextMenuContentEmits,
-  type ContextMenuContentProps,
  ContextMenuPortal,
  useForwardPropsEmits,
 } from 'radix-vue';

-const props = defineProps<{ class?: any } & ContextMenuContentProps>();
+const props = defineProps<ContextMenuContentProps & { class?: any }>();
 const emits = defineEmits<ContextMenuContentEmits>();

 const delegatedProps = computed(() => {
@@ -29,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="forwarded"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue';
+import type { ContextMenuGroupProps } from 'radix-vue';
+
+import { ContextMenuGroup } from 'radix-vue';

 const props = defineProps<ContextMenuGroupProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  ContextMenuItem,
-  type ContextMenuItemEmits,
-  type ContextMenuItemProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  { class?: any; inset?: boolean } & ContextMenuItemProps
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ContextMenuLabelProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue';
+import { ContextMenuLabel } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  { class?: any; inset?: boolean } & ContextMenuLabelProps
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ContextMenuPortal, type ContextMenuPortalProps } from 'radix-vue';
+import type { ContextMenuPortalProps } from 'radix-vue';
+
+import { ContextMenuPortal } from 'radix-vue';

 const props = defineProps<ContextMenuPortalProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import {
-  ContextMenuRadioGroup,
-  type ContextMenuRadioGroupEmits,
-  type ContextMenuRadioGroupProps,
-  useForwardPropsEmits,
+import type {
+  ContextMenuRadioGroupEmits,
+  ContextMenuRadioGroupProps,
 } from 'radix-vue';

+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+
 const props = defineProps<ContextMenuRadioGroupProps>();
 const emits = defineEmits<ContextMenuRadioGroupEmits>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  ContextMenuRadioItemEmits,
+  ContextMenuRadioItemProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Circle } from 'lucide-vue-next';
 import {
  ContextMenuItemIndicator,
  ContextMenuRadioItem,
-  type ContextMenuRadioItemEmits,
-  type ContextMenuRadioItemProps,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & ContextMenuRadioItemProps>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ContextMenuSeparatorProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  ContextMenuSeparator,
-  type ContextMenuSeparatorProps,
-} from 'radix-vue';
+import { ContextMenuSeparator } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & ContextMenuSeparatorProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  ContextMenuSub,
-  type ContextMenuSubEmits,
-  type ContextMenuSubProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue';
+
+import { ContextMenuSub, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<ContextMenuSubProps>();
 const emits = defineEmits<ContextMenuSubEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  ContextMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ContextMenuSubTriggerProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronRight } from 'lucide-vue-next';
-import {
-  ContextMenuSubTrigger,
-  type ContextMenuSubTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import { ContextMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import {
-  ContextMenuTrigger,
-  type ContextMenuTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import type { ContextMenuTriggerProps } from 'radix-vue';
+
+import { ContextMenuTrigger, useForwardProps } from 'radix-vue';

 const props = defineProps<ContextMenuTriggerProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DialogRoot,
-  type DialogRootEmits,
-  type DialogRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogClose, type DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'radix-vue';
+
+import { DialogClose } from 'radix-vue';

 const props = defineProps<DialogCloseProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+
 import type { ClassType } from '@vben-core/typings';

 import { computed, ref } from 'vue';
@@ -9,8 +11,6 @@ import { X } from 'lucide-vue-next';
 import {
  DialogClose,
  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
  DialogPortal,
  useForwardPropsEmits,
 } from 'radix-vue';
@@ -19,20 +19,21 @@ import DialogOverlay from './DialogOverlay.vue';

 const props = withDefaults(
  defineProps<
-    {
+    DialogContentProps & {
      appendTo?: HTMLElement | string;
      class?: ClassType;
      closeClass?: ClassType;
      modal?: boolean;
      open?: boolean;
+      overlayBlur?: number;
      showClose?: boolean;
      zIndex?: number;
-    } & DialogContentProps
+    }
  >(),
-  { appendTo: 'body', showClose: true, zIndex: 1000 },
+  { appendTo: 'body', showClose: true },
 );
 const emits = defineEmits<
-  { close: []; closed: []; opened: [] } & DialogContentEmits
+  DialogContentEmits & { close: []; closed: []; opened: [] }
 >();

 const delegatedProps = computed(() => {
@@ -82,18 +83,23 @@ defineExpose({
    <Transition name="fade">
      <DialogOverlay
        v-if="open && modal"
-        :style="{ zIndex, position }"
+        :style="{
+          ...(zIndex ? { zIndex } : {}),
+          position,
+          backdropFilter:
+            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+        }"
        @click="() => emits('close')"
      />
    </Transition>
    <DialogContent
      ref="contentRef"
-      :style="{ zIndex, position }"
+      :style="{ ...(zIndex ? { zIndex } : {}), position }"
      @animationend="onAnimationEnd"
      v-bind="forwarded"
      :class="
        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DialogDescriptionProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  DialogDescription,
-  type DialogDescriptionProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DialogDescriptionProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue
@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay inset-0"></div>
+  <div :data-dismissable-modal="id" class="bg-overlay z-popup inset-0"></div>
 </template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { X } from 'lucide-vue-next';
 import {
  DialogClose,
  DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
  DialogOverlay,
  DialogPortal,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = withDefaults(
  defineProps<{ class?: any; zIndex?: number } & DialogContentProps>(),
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DialogTitleProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DialogTitleProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'radix-vue';
+
+import { DialogTrigger } from 'radix-vue';

 const props = defineProps<DialogTriggerProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuRoot,
-  type DropdownMenuRootEmits,
-  type DropdownMenuRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue';
+
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue';

 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
  modal: false,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Check } from 'lucide-vue-next';
 import {
  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
  DropdownMenuItemIndicator,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DropdownMenuCheckboxItemProps>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,18 +1,21 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuContentEmits,
+  DropdownMenuContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';

 import { cn } from '@vben-core/shared/utils';

 import {
  DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
  DropdownMenuPortal,
  useForwardPropsEmits,
 } from 'radix-vue';

 const props = withDefaults(
-  defineProps<{ class?: any } & DropdownMenuContentProps>(),
+  defineProps<DropdownMenuContentProps & { class?: any }>(),
  {
    sideOffset: 4,
  },
@@ -34,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="forwarded"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup min-w-32 overflow-hidden rounded-md border p-1 shadow-md',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
+import type { DropdownMenuGroupProps } from 'radix-vue';
+
+import { DropdownMenuGroup } from 'radix-vue';

 const props = defineProps<DropdownMenuGroupProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DropdownMenuItemProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  { class?: any; inset?: boolean } & DropdownMenuItemProps
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DropdownMenuLabelProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  DropdownMenuLabel,
-  type DropdownMenuLabelProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  { class?: any; inset?: boolean } & DropdownMenuLabelProps
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import {
-  DropdownMenuRadioGroup,
-  type DropdownMenuRadioGroupEmits,
-  type DropdownMenuRadioGroupProps,
-  useForwardPropsEmits,
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
 } from 'radix-vue';

+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Circle } from 'lucide-vue-next';
 import {
  DropdownMenuItemIndicator,
  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
  useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DropdownMenuRadioItemProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DropdownMenuSeparatorProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'radix-vue';
+import { DropdownMenuSeparator } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<
  {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuSub,
-  type DropdownMenuSubEmits,
-  type DropdownMenuSubProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue';
+
+import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { DropdownMenuSubTriggerProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronRight } from 'lucide-vue-next';
-import {
-  DropdownMenuSubTrigger,
-  type DropdownMenuSubTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & DropdownMenuSubTriggerProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import {
-  DropdownMenuTrigger,
-  type DropdownMenuTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import type { DropdownMenuTriggerProps } from 'radix-vue';
+
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue';

 const props = defineProps<DropdownMenuTriggerProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  HoverCardRoot,
-  type HoverCardRootEmits,
-  type HoverCardRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue';
+
+import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
+import type { HoverCardContentProps } from 'radix-vue';
+
 import { computed } from 'vue';

 import { cn } from '@vben-core/shared/utils';

-import {
-  HoverCardContent,
-  type HoverCardContentProps,
-  HoverCardPortal,
-  useForwardProps,
-} from 'radix-vue';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'radix-vue';

 const props = withDefaults(
-  defineProps<{ class?: any } & HoverCardContentProps>(),
+  defineProps<HoverCardContentProps & { class?: any }>(),
  {
    sideOffset: 4,
  },
@@ -32,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
      v-bind="forwardedProps"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-[1000] w-64 rounded-md border p-4 shadow-md outline-none',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup w-64 rounded-md border p-4 shadow-md outline-none',
          props.class,
        )
      "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue';
+import type { HoverCardTriggerProps } from 'radix-vue';
+
+import { HoverCardTrigger } from 'radix-vue';

 const props = defineProps<HoverCardTriggerProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/index.ts
@@ -16,6 +16,7 @@ export * from './pagination';
 export * from './pin-input';
 export * from './popover';
 export * from './radio-group';
+export * from './resizable';
 export * from './scroll-area';
 export * from './select';
 export * from './separator';
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { LabelProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { Label, type LabelProps } from 'radix-vue';
+import { Label } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & LabelProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';

-import { computed } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
-
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & NumberFieldRootProps>();
 const emits = defineEmits<NumberFieldRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldDecrementProps } from 'radix-vue';

-import { computed } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
-
 import { Minus } from 'lucide-vue-next';
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & NumberFieldDecrementProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { NumberFieldIncrementProps } from 'radix-vue';

-import { computed } from 'vue';
-
 import { cn } from '@vben-core/shared/utils';
-
 import { Plus } from 'lucide-vue-next';
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & NumberFieldIncrementProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PaginationEllipsisProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { MoreHorizontal } from 'lucide-vue-next';
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue';
+import { PaginationEllipsis } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & PaginationEllipsisProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PaginationFirstProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronsLeft } from 'lucide-vue-next';
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue';
+import { PaginationFirst } from 'radix-vue';
+import { computed } from 'vue';

 import { Button } from '../button';

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PaginationLastProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronsRight } from 'lucide-vue-next';
-import { PaginationLast, type PaginationLastProps } from 'radix-vue';
+import { PaginationLast } from 'radix-vue';
+import { computed } from 'vue';

 import { Button } from '../button';

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PaginationNextProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronRight } from 'lucide-vue-next';
-import { PaginationNext, type PaginationNextProps } from 'radix-vue';
+import { PaginationNext } from 'radix-vue';
+import { computed } from 'vue';

 import { Button } from '../button';

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PaginationPrevProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronLeft } from 'lucide-vue-next';
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue';
+import { PaginationPrev } from 'radix-vue';
+import { computed } from 'vue';

 import { Button } from '../button';

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  PinInputRoot,
-  type PinInputRootEmits,
-  type PinInputRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { PinInputRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & PinInputRootProps>();
 const emits = defineEmits<PinInputRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PrimitiveProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & PrimitiveProps>();
 const delegatedProps = computed(() => {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PinInputInputProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  PinInputInput,
-  type PinInputInputProps,
-  useForwardProps,
-} from 'radix-vue';
+import { PinInputInput, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & PinInputInputProps>();

@@ -24,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps);
    v-bind="forwardedProps"
    :class="
      cn(
-        'border-input bg-background relative flex h-10 w-10 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2',
+        'border-input bg-background relative flex h-10 w-8 items-center justify-center border-y border-r text-center text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md focus:relative focus:z-10 focus:outline-none focus:ring-2 md:w-10',
        props.class,
      )
    "
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue';
+
 import { Dot } from 'lucide-vue-next';
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'radix-vue';

 const props = defineProps<PrimitiveProps>();
 const forwardedProps = useForwardProps(props);
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  PopoverContent,
-  type PopoverContentEmits,
-  type PopoverContentProps,
-  PopoverPortal,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 defineOptions({
  inheritAttrs: false,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue';
+import type { PopoverTriggerProps } from 'radix-vue';
+
+import { PopoverTrigger } from 'radix-vue';

 const props = defineProps<PopoverTriggerProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  RadioGroupRoot,
-  type RadioGroupRootEmits,
-  type RadioGroupRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & RadioGroupRootProps>();
 const emits = defineEmits<RadioGroupRootEmits>();
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { RadioGroupItemProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Circle } from 'lucide-vue-next';
 import {
  RadioGroupIndicator,
  RadioGroupItem,
-  type RadioGroupItemProps,
  useForwardProps,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & RadioGroupItemProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type {
+  SplitterResizeHandleEmits,
+  SplitterResizeHandleProps,
+} from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+import { GripVertical } from '@vben-core/icons';
+import { cn } from '@vben-core/shared/utils';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';
+
+const props = defineProps<
+  {
+    class?: HTMLAttributes['class'];
+    withHandle?: boolean;
+  } & SplitterResizeHandleProps
+>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
+        props.class,
+      )
+    "
+  >
+    <template v-if="props.withHandle">
+      <div
+        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border"
+      >
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/shared/utils';
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';
+
+const props = defineProps<
+  { class?: HTMLAttributes['class'] } & SplitterGroupProps
+>();
+const emits = defineEmits<SplitterGroupEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterGroup
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </SplitterGroup>
+</template>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';
+export { SplitterPanel as ResizablePanel } from 'radix-vue';
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ScrollAreaRootProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import {
  ScrollAreaCorner,
  ScrollAreaRoot,
-  type ScrollAreaRootProps,
  ScrollAreaViewport,
 } from 'radix-vue';
+import { computed } from 'vue';

 import ScrollBar from './ScrollBar.vue';

@@ -38,7 +37,7 @@ const delegatedProps = computed(() => {
  >
    <ScrollAreaViewport
      as-child
-      class="h-full w-full rounded-[inherit]"
+      class="h-full w-full rounded-[inherit] focus:outline-none"
      @scroll="onScroll"
    >
      <slot></slot>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { ScrollAreaScrollbarProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import {
-  ScrollAreaScrollbar,
-  type ScrollAreaScrollbarProps,
-  ScrollAreaThumb,
-} from 'radix-vue';
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue';
+import { computed } from 'vue';

 const props = withDefaults(
  defineProps<{ class?: any } & ScrollAreaScrollbarProps>(),
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'radix-vue';
+
 import { computed } from 'vue';

 import { cn } from '@vben-core/shared/utils';

 import {
  SelectContent,
-  type SelectContentEmits,
-  type SelectContentProps,
  SelectPortal,
  SelectViewport,
  useForwardPropsEmits,
@@ -20,7 +20,7 @@ defineOptions({
 });

 const props = withDefaults(
-  defineProps<{ class?: any } & SelectContentProps>(),
+  defineProps<SelectContentProps & { class?: any }>(),
  {
    position: 'popper',
  },
@@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border relative z-[1000] max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border z-popup relative max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
          position === 'popper' &&
            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
          props.class,
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectGroupProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { SelectGroup, type SelectGroupProps } from 'radix-vue';
+import { SelectGroup } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectGroupProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectItemProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { Check } from 'lucide-vue-next';
 import {
  SelectItem,
  SelectItemIndicator,
-  type SelectItemProps,
  SelectItemText,
  useForwardProps,
 } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectItemProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { SelectItemText, type SelectItemTextProps } from 'radix-vue';
+import type { SelectItemTextProps } from 'radix-vue';
+
+import { SelectItemText } from 'radix-vue';

 const props = defineProps<SelectItemTextProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { cn } from '@vben-core/shared/utils';
+import type { SelectLabelProps } from 'radix-vue';

-import { SelectLabel, type SelectLabelProps } from 'radix-vue';
+import { cn } from '@vben-core/shared/utils';
+import { SelectLabel } from 'radix-vue';

 const props = defineProps<{ class?: any } & SelectLabelProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectScrollDownButtonProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  SelectScrollDownButton,
-  type SelectScrollDownButtonProps,
-  useForwardProps,
-} from 'radix-vue';
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectScrollDownButtonProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectScrollUpButtonProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronUp } from 'lucide-vue-next';
-import {
-  SelectScrollUpButton,
-  type SelectScrollUpButtonProps,
-  useForwardProps,
-} from 'radix-vue';
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectScrollUpButtonProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectSeparatorProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue';
+import { SelectSeparator } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectSeparatorProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SelectTriggerProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
 import { ChevronDown } from 'lucide-vue-next';
-import {
-  SelectIcon,
-  SelectTrigger,
-  type SelectTriggerProps,
-  useForwardProps,
-} from 'radix-vue';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any } & SelectTriggerProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { SelectValue, type SelectValueProps } from 'radix-vue';
+import type { SelectValueProps } from 'radix-vue';
+
+import { SelectValue } from 'radix-vue';

 const props = defineProps<SelectValueProps>();
 </script>
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type { SeparatorProps } from 'radix-vue';

 import { cn } from '@vben-core/shared/utils';
-
-import { Separator, type SeparatorProps } from 'radix-vue';
+import { Separator } from 'radix-vue';
+import { computed } from 'vue';

 const props = defineProps<{ class?: any; label?: string } & SeparatorProps>();

--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import {
-  DialogRoot,
-  type DialogRootEmits,
-  type DialogRootProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue';

 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
--- a/Show More
+++ b/Show More