Merge branch 'dev' of https://gitee.com/dapppp/ruoyi-plus-vben5 into warmflow

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/design",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/icons",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/icons/src/lucide.ts

@@ -28,6 +28,7 @@ export {
   Fullscreen,
   Github,
   Grip,
+  GripVertical,
   Info,
   InspectionPanel,
   Languages,

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shared",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {
@@ -45,7 +45,7 @@
       "default": "./dist/store.mjs"
     },
     "./global-state": {
-      "types": "./dist/global-state.d.ts",
+      "types": "./src/global-state.ts",
       "development": "./src/global-state.ts",
       "default": "./dist/global-state.mjs"
     }

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

@@ -1,4 +1,6 @@
-import { type ClassValue, clsx } from 'clsx';
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 function cn(...inputs: ClassValue[]) {

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/typings",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/base/typings/src/app.d.ts

@@ -1,6 +1,8 @@
 type LayoutType =
   | 'full-content'
+  | 'header-mixed-nav'
   | 'header-nav'
+  | 'header-sidebar-nav'
   | 'mixed-nav'
   | 'sidebar-mixed-nav'
   | 'sidebar-nav';
@@ -38,6 +40,7 @@ type BuiltinThemeType =
 type ContentCompactType = 'compact' | 'wide';
 
 type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
+type LayoutHeaderMenuAlignType = 'center' | 'end' | 'start';
 
 /**
  * 登录过期模式
@@ -95,6 +98,7 @@ export type {
   BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,

packages/@core/base/typings/src/helper.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, type MaybeRef } from 'vue';
+import type { ComputedRef, MaybeRef } from 'vue';
 
 /**
  * 深层递归所有属性为可选

packages/@core/base/typings/src/menu-record.ts

@@ -1,6 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router';
-
 import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 
 /**
  * 扩展路由原始对象

packages/@core/base/typings/src/vue-router.d.ts

@@ -1,6 +1,5 @@
-import type { Router, RouteRecordRaw } from 'vue-router';
-
 import type { Component } from 'vue';
+import type { Router, RouteRecordRaw } from 'vue-router';
 
 interface RouteMeta {
   /**

packages/@core/composables/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/composables",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/composables/src/use-layout-style.ts

@@ -1,5 +1,5 @@
+import type { VisibleDomRect } from '@vben-core/shared/utils';
 import type { CSSProperties } from 'vue';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import {
   CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
@@ -7,12 +7,9 @@ import {
   CSS_VARIABLE_LAYOUT_FOOTER_HEIGHT,
   CSS_VARIABLE_LAYOUT_HEADER_HEIGHT,
 } from '@vben-core/shared/constants';
-import {
-  getElementVisibleRect,
-  type VisibleDomRect,
-} from '@vben-core/shared/utils';
-
+import { getElementVisibleRect } from '@vben-core/shared/utils';
 import { useCssVar, useDebounceFn } from '@vueuse/core';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 /**
  * @zh_CN content style

packages/@core/composables/src/use-priority-value.ts

@@ -1,10 +1,10 @@
 import type { ComputedRef, Ref } from 'vue';
-import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
 
 import {
   getFirstNonNullOrUndefined,
   kebabToCamelCase,
 } from '@vben-core/shared/utils';
+import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
 
 /**
  * 依次从插槽、attrs、props、state 中获取值

packages/@core/composables/src/use-simple-locale/index.ts

@@ -1,8 +1,9 @@
-import { computed, ref } from 'vue';
+import type { Locale } from './messages';
 
 import { createSharedComposable } from '@vueuse/core';
+import { computed, ref } from 'vue';
 
-import { getMessages, type Locale } from './messages';
+import { getMessages } from './messages';
 
 export const useSimpleLocale = createSharedComposable(() => {
   const currentLocale = ref<Locale>('zh-CN');

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -46,6 +46,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
   "header": {
     "enable": true,
     "hidden": false,
+    "menuAlign": "start",
     "mode": "fixed",
   },
   "logo": {
@@ -65,11 +66,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "globalSearch": true,
   },
   "sidebar": {
+    "autoActivateChild": false,
     "collapsed": false,
     "collapsedShowTitle": false,
     "enable": true,
     "expandOnHover": true,
-    "extraCollapse": true,
+    "extraCollapse": false,
     "hidden": false,
     "width": 224,
   },
@@ -83,6 +85,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "showMaximize": true,
     "showMore": true,
     "styleType": "chrome",
+    "wheelable": true,
   },
   "theme": {
     "builtinType": "default",

packages/@core/preferences/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/preferences",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/preferences/src/config.ts

@@ -46,6 +46,7 @@ const defaultPreferences: Preferences = {
   header: {
     enable: true,
     hidden: false,
+    menuAlign: 'start',
     mode: 'fixed',
   },
   logo: {
@@ -65,11 +66,12 @@ const defaultPreferences: Preferences = {
     globalSearch: true,
   },
   sidebar: {
+    autoActivateChild: false,
     collapsed: false,
     collapsedShowTitle: false,
     enable: true,
     expandOnHover: true,
-    extraCollapse: true,
+    extraCollapse: false,
     hidden: false,
     width: 224,
   },
@@ -83,6 +85,7 @@ const defaultPreferences: Preferences = {
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    wheelable: true,
   },
   theme: {
     builtinType: 'default',

packages/@core/preferences/src/preferences.ts

@@ -2,16 +2,14 @@ import type { DeepPartial } from '@vben-core/typings';
 
 import type { InitialOptions, Preferences } from './types';
 
-import { markRaw, reactive, readonly, watch } from 'vue';
-
 import { StorageManager } from '@vben-core/shared/cache';
 import { isMacOs, merge } from '@vben-core/shared/utils';
-
 import {
   breakpointsTailwind,
   useBreakpoints,
   useDebounceFn,
 } from '@vueuse/core';
+import { markRaw, reactive, readonly, watch } from 'vue';
 
 import { defaultPreferences } from './config';
 import { updateCSSVariables } from './update-css-variables';

packages/@core/preferences/src/types.ts

@@ -5,6 +5,7 @@ import type {
   BuiltinThemeType,
   ContentCompactType,
   DeepPartial,
+  LayoutHeaderMenuAlignType,
   LayoutHeaderModeType,
   LayoutType,
   LoginExpiredModeType,
@@ -104,6 +105,8 @@ interface HeaderPreferences {
   enable: boolean;
   /** 顶栏是否隐藏,css-隐藏 */
   hidden: boolean;
+  /** 顶栏菜单位置 */
+  menuAlign: LayoutHeaderMenuAlignType;
   /** header显示模式 */
   mode: LayoutHeaderModeType;
 }
@@ -125,6 +128,8 @@ interface NavigationPreferences {
 }
 
 interface SidebarPreferences {
+  /** 点击目录时自动激活子菜单   */
+  autoActivateChild: boolean;
   /** 侧边栏是否折叠 */
   collapsed: boolean;
   /** 侧边栏折叠时，是否显示title */
@@ -173,6 +178,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
+  /** 是否开启鼠标滚轮响应 */
+  wheelable: boolean;
 }
 
 interface ThemePreferences {

packages/@core/preferences/src/use-preferences.ts

@@ -1,6 +1,5 @@
-import { computed } from 'vue';
-
 import { diff } from '@vben-core/shared/utils';
+import { computed } from 'vue';
 
 import { preferencesManager } from './preferences';
 import { isDarkTheme } from './update-css-variables';
@@ -82,6 +81,20 @@ function usePreferences() {
     () => appPreferences.value.layout === 'header-nav',
   );
 
+  /**
+   * @zh_CN 是否为头部混合导航模式
+   */
+  const isHeaderMixedNav = computed(
+    () => appPreferences.value.layout === 'header-mixed-nav',
+  );
+
+  /**
+   * @zh_CN 是否为顶部通栏+侧边导航模式
+   */
+  const isHeaderSidebarNav = computed(
+    () => appPreferences.value.layout === 'header-sidebar-nav',
+  );
+
   /**
    * @zh_CN 是否为混合导航模式
    */
@@ -93,7 +106,13 @@ function usePreferences() {
    * @zh_CN 是否包含侧边导航模式
    */
   const isSideMode = computed(() => {
-    return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
+    return (
+      isMixedNav.value ||
+      isSideMixedNav.value ||
+      isSideNav.value ||
+      isHeaderMixedNav.value ||
+      isHeaderSidebarNav.value
+    );
   });
 
   const sidebarCollapsed = computed(() => {
@@ -214,7 +233,9 @@ function usePreferences() {
     globalSearchShortcutKey,
     isDark,
     isFullContent,
+    isHeaderMixedNav,
     isHeaderNav,
+    isHeaderSidebarNav,
     isMixedNav,
     isMobile,
     isSideMixedNav,

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/form-ui",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/form-ui/src/components/form-actions.vue

@@ -138,7 +138,11 @@ defineExpose({
 <template>
   <div
     :class="
-      cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
+      cn(
+        'col-span-full w-full text-right',
+        rootProps.compact ? 'pb-2' : 'pb-6',
+        rootProps.actionWrapperClass,
+      )
     "
     :style="queryFormStyle"
   >

packages/@core/ui-kit/form-ui/src/config.ts

@@ -1,12 +1,11 @@
+import type { Component } from 'vue';
+
 import type {
   BaseFormComponentType,
   FormCommonConfig,
   VbenFormAdapterOptions,
 } from './types';
 
-import type { Component } from 'vue';
-import { h } from 'vue';
-
 import {
   VbenButton,
   VbenCheckbox,
@@ -17,8 +16,8 @@ import {
   VbenSelect,
 } from '@vben-core/shadcn-ui';
 import { globalShareState } from '@vben-core/shared/global-state';
-
 import { defineRule } from 'vee-validate';
+import { h } from 'vue';
 
 const DEFAULT_MODEL_PROP_NAME = 'modelValue';
 
@@ -46,11 +45,15 @@ export function setupVbenForm<
 >(options: VbenFormAdapterOptions<T>) {
   const { config, defineRules } = options;
 
-  const { disabledOnChangeListener = false, emptyStateValue = undefined } =
-    (config || {}) as FormCommonConfig;
+  const {
+    disabledOnChangeListener = true,
+    disabledOnInputListener = true,
+    emptyStateValue = undefined,
+  } = (config || {}) as FormCommonConfig;
 
   Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
     disabledOnChangeListener,
+    disabledOnInputListener,
     emptyStateValue,
   });
 

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -8,8 +8,6 @@ import type {
 
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
-import { toRaw } from 'vue';
-
 import { Store } from '@vben-core/shared/store';
 import {
   bindMethods,
@@ -21,6 +19,7 @@ import {
   mergeWithArrayOverride,
   StateHandler,
 } from '@vben-core/shared/utils';
+import { toRaw } from 'vue';
 
 function getDefaultState(): VbenFormProps {
   return {
@@ -112,11 +111,6 @@ export class FormApi {
     }
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   getLatestSubmissionValues() {
     return this.latestSubmissionValues || {};
   }
@@ -130,6 +124,11 @@ export class FormApi {
     return form.values;
   }
 
+  async isFieldValid(fieldName: string) {
+    const form = await this.getForm();
+    return form.isFieldValid(fieldName);
+  }
+
   merge(formApi: FormApi) {
     const chain = [this, formApi];
     const proxy = new Proxy(formApi, {
@@ -348,4 +347,14 @@ export class FormApi {
     }
     return await this.submitForm();
   }
+
+  async validateField(fieldName: string, opts?: Partial<ValidationOptions>) {
+    const form = await this.getForm();
+    const validateResult = await form.validateField(fieldName, opts);
+
+    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
+      console.error('validate error', validateResult?.errors);
+    }
+    return validateResult;
+  }
 }

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@@ -3,8 +3,6 @@ import type { ZodType } from 'zod';
 
 import type { FormSchema, MaybeComponentProps } from '../types';
 
-import { computed, nextTick, useTemplateRef, watch } from 'vue';
-
 import {
   FormControl,
   FormDescription,
@@ -14,9 +12,9 @@ import {
   VbenRenderContent,
 } from '@vben-core/shadcn-ui';
 import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils';
-
 import { toTypedSchema } from '@vee-validate/zod';
 import { useFieldError, useFormValues } from 'vee-validate';
+import { computed, nextTick, useTemplateRef, watch } from 'vue';
 
 import { injectRenderFormProps, useFormContext } from './context';
 import useDependencies from './dependencies';
@@ -26,6 +24,7 @@ import { isEventObjectLike } from './helper';
 interface Props extends FormSchema {}
 
 const {
+  colon,
   commonComponentProps,
   component,
   componentProps,
@@ -33,6 +32,7 @@ const {
   description,
   disabled,
   disabledOnChangeListener,
+  disabledOnInputListener,
   emptyStateValue,
   fieldName,
   formFieldProps,
@@ -53,7 +53,7 @@ const values = useFormValues();
 const errors = useFieldError(fieldName);
 const fieldComponentRef = useTemplateRef<HTMLInputElement>('fieldComponentRef');
 const formApi = formRenderProps.form;
-
+const compact = formRenderProps.compact;
 const isInValid = computed(() => errors.value?.length > 0);
 
 const FieldComponent = computed(() => {
@@ -227,10 +227,13 @@ function fieldBindEvent(slotProps: Record<string, any>) {
 
             return onChange?.(e?.target?.[bindEventField] ?? e);
           },
-      onInput: () => {},
+      ...(disabledOnInputListener ? { onInput: undefined } : {}),
     };
   }
-  return {};
+  return {
+    ...(disabledOnInputListener ? { onInput: undefined } : {}),
+    ...(disabledOnChangeListener ? { onChange: undefined } : {}),
+  };
 }
 
 function createComponentProps(slotProps: Record<string, any>) {
@@ -276,8 +279,10 @@ function autofocus() {
         'form-valid-error': isInValid,
         'flex-col': isVertical,
         'flex-row items-center': !isVertical,
+        'pb-6': !compact,
+        'pb-2': compact,
       }"
-      class="flex pb-6"
+      class="flex"
       v-bind="$attrs"
     >
       <FormLabel
@@ -296,7 +301,10 @@ function autofocus() {
         :required="shouldRequired && !hideRequiredMark"
         :style="labelStyle"
       >
-        {{ label }}
+        <template v-if="label">
+          <span>{{ label }}</span>
+          <span v-if="colon" class="ml-[2px]">:</span>
+        </template>
       </FormLabel>
       <div :class="cn('relative flex w-full items-center', wrapperClass)">
         <FormControl :class="cn(controlClass)">

packages/@core/ui-kit/form-ui/src/form-render/form.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { GenericObject } from 'vee-validate';
 import type { ZodTypeAny } from 'zod';
 
 import type {
@@ -8,12 +9,9 @@ import type {
   FormShape,
 } from '../types';
 
-import { computed } from 'vue';
-
 import { Form } from '@vben-core/shadcn-ui';
 import { cn, isString, mergeWithArrayOverride } from '@vben-core/shared/utils';
-
-import { type GenericObject } from 'vee-validate';
+import { computed } from 'vue';
 
 import { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
@@ -86,10 +84,12 @@ const computedSchema = computed(
     formFieldProps: Record<string, any>;
   } & Omit<FormSchema, 'formFieldProps'>)[] => {
     const {
+      colon = false,
       componentProps = {},
       controlClass = '',
       disabled,
-      disabledOnChangeListener = false,
+      disabledOnChangeListener = true,
+      disabledOnInputListener = true,
       emptyStateValue = undefined,
       formFieldProps = {},
       formItemClass = '',
@@ -109,8 +109,10 @@ const computedSchema = computed(
           : false;
 
       return {
+        colon,
         disabled,
         disabledOnChangeListener,
+        disabledOnInputListener,
         emptyStateValue,
         hideLabel,
         hideRequiredMark,

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

@@ -1,12 +1,11 @@
 import type { VbenButtonProps } from '@vben-core/shadcn-ui';
 import type { ClassType } from '@vben-core/typings';
 import type { FieldOptions, FormContext, GenericObject } from 'vee-validate';
+import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 import type { ZodTypeAny } from 'zod';
 
 import type { FormApi } from './form-api';
 
-import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
-
 export type FormLayout = 'horizontal' | 'vertical';
 
 export type BaseFormComponentType =
@@ -136,6 +135,10 @@ type ComponentProps =
   | MaybeComponentProps;
 
 export interface FormCommonConfig {
+  /**
+   * 在Label后显示一个冒号
+   */
+  colon?: boolean;
   /**
    * 所有表单项的props
    */
@@ -151,9 +154,14 @@ export interface FormCommonConfig {
   disabled?: boolean;
   /**
    * 是否禁用所有表单项的change事件监听
-   * @default false
+   * @default true
    */
   disabledOnChangeListener?: boolean;
+  /**
+   * 是否禁用所有表单项的input事件监听
+   * @default true
+   */
+  disabledOnInputListener?: boolean;
   /**
    * 所有表单项的空状态值,默认都是undefined，naive-ui的空状态值是null
    */
@@ -264,6 +272,10 @@ export interface FormRenderProps<
    * 表单项通用后备配置，当子项目没配置时使用这里的配置，子项目配置优先级高于此配置
    */
   commonConfig?: FormCommonConfig;
+  /**
+   * 紧凑模式（移除表单每一项底部为校验信息预留的空间）
+   */
+  compact?: boolean;
   /**
    * 组件v-model事件绑定
    */
@@ -371,6 +383,7 @@ export interface VbenFormAdapterOptions<
   config?: {
     baseModelPropName?: string;
     disabledOnChangeListener?: boolean;
+    disabledOnInputListener?: boolean;
     emptyStateValue?: null | undefined;
     modelPropNameMap?: Partial<Record<T, string>>;
   };

packages/@core/ui-kit/form-ui/src/use-form-context.ts

@@ -1,12 +1,13 @@
-import type { FormActions, VbenFormProps } from './types';
+import type { ComputedRef } from 'vue';
+import type { ZodRawShape } from 'zod';
 
-import { computed, type ComputedRef, unref, useSlots } from 'vue';
+import type { FormActions, VbenFormProps } from './types';
 
 import { createContext } from '@vben-core/shadcn-ui';
 import { isString } from '@vben-core/shared/utils';
-
 import { useForm } from 'vee-validate';
-import { object, type ZodRawShape } from 'zod';
+import { computed, unref, useSlots } from 'vue';
+import { object } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';
 
 export const [injectFormProps, provideFormProps] =

packages/@core/ui-kit/form-ui/src/vben-use-form.vue

@@ -2,12 +2,11 @@
 import type { ExtendedFormApi, VbenFormProps } from './types';
 
 // import { toRaw, watch } from 'vue';
-
-import { useForwardPriorityValues } from '@vben-core/composables';
+import { nextTick, onMounted, watch } from 'vue';
 // import { isFunction } from '@vben-core/shared/utils';
 
-import { toRaw, useTemplateRef, watch } from 'vue';
-
+import { useForwardPriorityValues } from '@vben-core/composables';
+import { cloneDeep } from '@vben-core/shared/utils';
 import { useDebounceFn } from '@vueuse/core';
 
 import FormActions from './components/form-actions.vue';
@@ -25,8 +24,6 @@ interface Props extends VbenFormProps {
 
 const props = defineProps<Props>();
 
-const formActionsRef = useTemplateRef<typeof FormActions>('formActionsRef');
-
 const state = props.formApi?.useStore?.();
 
 const forward = useForwardPriorityValues(props, state);
@@ -42,11 +39,7 @@ const handleUpdateCollapsed = (value: boolean) => {
 };
 
 function handleKeyDownEnter(event: KeyboardEvent) {
-  if (
-    !state.value.submitOnEnter ||
-    !formActionsRef.value ||
-    !formActionsRef.value.handleSubmit
-  ) {
+  if (!state.value.submitOnEnter || !forward.value.formApi?.isMounted) {
     return;
   }
   // 如果是 textarea 不阻止默认行为，否则会导致无法换行。
@@ -56,17 +49,19 @@ function handleKeyDownEnter(event: KeyboardEvent) {
   }
   event.preventDefault();
 
-  formActionsRef.value?.handleSubmit?.();
+  forward.value.formApi.validateAndSubmitForm();
 }
 
-watch(
-  () => form.values,
-  useDebounceFn(() => {
-    forward.value.handleValuesChange?.(toRaw(form.values));
-    state.value.submitOnChange && props.formApi?.submitForm();
-  }, 300),
-  { deep: true },
-);
+const handleValuesChangeDebounced = useDebounceFn((newVal) => {
+  forward.value.handleValuesChange?.(cloneDeep(newVal));
+  state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm();
+}, 300);
+
+onMounted(async () => {
+  // 只在挂载后开始监听，form.values会有一个初始化的过程
+  await nextTick();
+  watch(() => form.values, handleValuesChangeDebounced, { deep: true });
+});
 </script>
 
 <template>
@@ -90,7 +85,6 @@ watch(
       <slot v-bind="slotProps">
         <FormActions
           v-if="forward.showDefaultActions"
-          ref="formActionsRef"
           :model-value="state.collapsed"
           @update:model-value="handleUpdateCollapsed"
         >

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/layout-ui",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

packages/@core/ui-kit/layout-ui/src/components/layout-content.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { ContentCompactType } from '@vben-core/typings';
-
 import type { CSSProperties } from 'vue';
-import { computed } from 'vue';
 
 import { useLayoutContentStyle } from '@vben-core/composables';
 import { Slot } from '@vben-core/shadcn-ui';
+import { computed } from 'vue';
 
 interface Props {
   /**

packages/@core/ui-kit/layout-ui/src/components/layout-footer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed } from 'vue';
 
 interface Props {

packages/@core/ui-kit/layout-ui/src/components/layout-header.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, useSlots } from 'vue';
 
 interface Props {

packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
-import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
-
 import { useScrollLock } from '@vueuse/core';
+import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 
@@ -166,7 +165,7 @@ const headerStyle = computed((): CSSProperties => {
 
   return {
     ...(isSidebarMixed ? { display: 'flex', justifyContent: 'center' } : {}),
-    height: `${headerHeight}px`,
+    height: `${headerHeight - 1}px`,
     ...contentWidthStyle.value,
   };
 });

packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed } from 'vue';
 
 interface Props {

packages/@core/ui-kit/layout-ui/src/hooks/use-layout.ts

@@ -29,11 +29,23 @@ export function useLayout(props: VbenLayoutProps) {
   /**
    * 是否为混合导航模式
    */
-  const isMixedNav = computed(() => currentLayout.value === 'mixed-nav');
+  const isMixedNav = computed(
+    () =>
+      currentLayout.value === 'mixed-nav' ||
+      currentLayout.value === 'header-sidebar-nav',
+  );
+
+  /**
+   * 是否为头部混合模式
+   */
+  const isHeaderMixedNav = computed(
+    () => currentLayout.value === 'header-mixed-nav',
+  );
 
   return {
     currentLayout,
     isFullContent,
+    isHeaderMixedNav,
     isHeaderNav,
     isMixedNav,
     isSidebarMixedNav,

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import type { VbenLayoutProps } from './vben-layout';
-
 import type { CSSProperties } from 'vue';
-import { computed, ref, watch } from 'vue';
+
+import type { VbenLayoutProps } from './vben-layout';
 
 import {
   SCROLL_FIXED_CLASS,
@@ -12,8 +11,8 @@ import {
 import { Menu } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
-
 import { useMouse, useScroll, useThrottleFn } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
 
 import {
   LayoutContent,
@@ -87,6 +86,7 @@ const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 const {
   currentLayout,
   isFullContent,
+  isHeaderMixedNav,
   isHeaderNav,
   isMixedNav,
   isSidebarMixedNav,
@@ -112,7 +112,9 @@ const getSideCollapseWidth = computed(() => {
   const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } =
     props;
 
-  return sidebarCollapseShowTitle || isSidebarMixedNav.value
+  return sidebarCollapseShowTitle ||
+    isSidebarMixedNav.value ||
+    isHeaderMixedNav.value
     ? sidebarMixedWidth
     : sideCollapseWidth;
 });
@@ -145,12 +147,15 @@ const getSidebarWidth = computed(() => {
 
   if (
     !sidebarEnableState.value ||
-    (sidebarHidden && !isSidebarMixedNav.value && !isMixedNav.value)
+    (sidebarHidden &&
+      !isSidebarMixedNav.value &&
+      !isMixedNav.value &&
+      !isHeaderMixedNav.value)
   ) {
     return width;
   }
 
-  if (isSidebarMixedNav.value && !isMobile) {
+  if ((isHeaderMixedNav.value || isSidebarMixedNav.value) && !isMobile) {
     width = sidebarMixedWidth;
   } else if (sidebarCollapse.value) {
     width = isMobile ? 0 : getSideCollapseWidth.value;
@@ -176,7 +181,9 @@ const isSideMode = computed(
   () =>
     currentLayout.value === 'mixed-nav' ||
     currentLayout.value === 'sidebar-mixed-nav' ||
-    currentLayout.value === 'sidebar-nav',
+    currentLayout.value === 'sidebar-nav' ||
+    currentLayout.value === 'header-mixed-nav' ||
+    currentLayout.value === 'header-sidebar-nav',
 );
 
 /**
@@ -208,12 +215,13 @@ const mainStyle = computed(() => {
     headerFixed.value &&
     currentLayout.value !== 'header-nav' &&
     currentLayout.value !== 'mixed-nav' &&
+    currentLayout.value !== 'header-sidebar-nav' &&
     showSidebar.value &&
     !props.isMobile
   ) {
     // fixed模式下生效
     const isSideNavEffective =
-      isSidebarMixedNav.value &&
+      (isSidebarMixedNav.value || isHeaderMixedNav.value) &&
       sidebarExpandOnHover.value &&
       sidebarExtraVisible.value;
 
@@ -476,7 +484,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
       :extra-width="sidebarExtraWidth"
       :fixed-extra="sidebarExpandOnHover"
       :header-height="isMixedNav ? 0 : headerHeight"
-      :is-sidebar-mixed="isSidebarMixedNav"
+      :is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
       :margin-top="sidebarMarginTop"
       :mixed-width="sidebarMixedWidth"
       :show="showSidebar"
@@ -489,7 +497,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
         <slot name="logo"></slot>
       </template>
 
-      <template v-if="isSidebarMixedNav">
+      <template v-if="isSidebarMixedNav || isHeaderMixedNav">
         <slot name="mixed-menu"></slot>
       </template>
       <template v-else>

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/menu-ui",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { UseResizeObserverReturn } from '@vueuse/core';
+import type { VNodeArrayChildren } from 'vue';
 
 import type {
   MenuItemClicked,
@@ -8,6 +9,10 @@ import type {
   MenuProvider,
 } from '../types';
 
+import { useNamespace } from '@vben-core/composables';
+import { Ellipsis } from '@vben-core/icons';
+import { isHttpUrl } from '@vben-core/shared/utils';
+import { useResizeObserver } from '@vueuse/core';
 import {
   computed,
   nextTick,
@@ -15,17 +20,10 @@ import {
   ref,
   toRef,
   useSlots,
-  type VNodeArrayChildren,
   watch,
   watchEffect,
 } from 'vue';
 
-import { useNamespace } from '@vben-core/composables';
-import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/shared/utils';
-
-import { useResizeObserver } from '@vueuse/core';
-
 import {
   createMenuContext,
   createSubMenuContext,
@@ -332,6 +330,7 @@ function removeMenuItem(item: MenuItemRegistered) {
       is(theme, true),
       is('rounded', rounded),
       is('collapse', collapse),
+      is('menu-align', mode === 'horizontal'),
     ]"
     :style="menuStyle"
     role="menu"
@@ -423,6 +422,10 @@ $namespace: vben;
   opacity: 1;
 }
 
+.is-menu-align {
+  justify-content: var(--menu-align, start);
+}
+
 .#{$namespace}-menu__popup-container,
 .#{$namespace}-menu {
   --menu-title-width: 140px;

packages/@core/ui-kit/menu-ui/src/index.ts

@@ -1,3 +1,4 @@
+export { default as MenuBadge } from './components/menu-badge.vue';
 export * from './components/normal-menu';
 export { default as Menu } from './menu.vue';
 export type * from './types';

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

@@ -1,5 +1,4 @@
 import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
-
 import type { Component, Ref } from 'vue';
 
 interface MenuProps {

packages/@core/ui-kit/menu-ui/src/utils/index.ts

@@ -4,6 +4,7 @@ import type {
   VNodeChild,
   VNodeNormalizedChildren,
 } from 'vue';
+
 import { isVNode } from 'vue';
 
 type VNodeChildAtom = Exclude<VNodeChild, Array<any>>;

packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts

@@ -100,14 +100,18 @@ describe('drawerApi', () => {
     expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 
-  it('should batch state updates', () => {
-    const batchSpy = vi.spyOn(drawerApi.store, 'batch');
-    drawerApi.batchStore(() => {
-      drawerApi.setState({ title: 'Batch Title' });
-      drawerApi.setState({ confirmText: 'Batch Confirm' });
-    });
-    expect(batchSpy).toHaveBeenCalled();
-    expect(drawerApi.store.state.title).toBe('Batch Title');
-    expect(drawerApi.store.state.confirmText).toBe('Batch Confirm');
+  it('should call onClosed callback when provided', () => {
+    const onClosed = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onClosed });
+    drawerApiWithHook.onClosed();
+    expect(onClosed).toHaveBeenCalled();
+  });
+
+  it('should call onOpened callback when provided', () => {
+    const onOpened = vi.fn();
+    const drawerApiWithHook = new DrawerApi({ onOpened });
+    drawerApiWithHook.open();
+    drawerApiWithHook.onOpened();
+    expect(onOpened).toHaveBeenCalled();
   });
 });

packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts

@@ -6,7 +6,12 @@ import { bindMethods, isFunction } from '@vben-core/shared/utils';
 export class DrawerApi {
   private api: Pick<
     DrawerApiOptions,
-    'onBeforeClose' | 'onCancel' | 'onConfirm' | 'onOpenChange'
+    | 'onBeforeClose'
+    | 'onCancel'
+    | 'onClosed'
+    | 'onConfirm'
+    | 'onOpenChange'
+    | 'onOpened'
   >;
   // private prevState!: DrawerState;
   private state!: DrawerState;
@@ -23,8 +28,10 @@ export class DrawerApi {
       connectedComponent: _,
       onBeforeClose,
       onCancel,
+      onClosed,
       onConfirm,
       onOpenChange,
+      onOpened,
       ...storeState
     } = options;
 
@@ -68,17 +75,14 @@ export class DrawerApi {
     this.api = {
       onBeforeClose,
       onCancel,
+      onClosed,
       onConfirm,
       onOpenChange,
+      onOpened,
     };
     bindMethods(this);
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   /**
    * 关闭弹窗
    */
@@ -114,6 +118,15 @@ export class DrawerApi {
     }
   }
 
+  /**
+   * 弹窗关闭动画播放完毕后的回调
+   */
+  onClosed() {
+    if (!this.state.isOpen) {
+      this.api.onClosed?.();
+    }
+  }
+
   /**
    * 确认操作
    */
@@ -121,6 +134,15 @@ export class DrawerApi {
     this.api.onConfirm?.();
   }
 
+  /**
+   * 弹窗打开动画播放完毕后的回调
+   */
+  onOpened() {
+    if (this.state.isOpen) {
+      this.api.onOpened?.();
+    }
+  }
+
   open() {
     this.store.setState((prev) => ({ ...prev, isOpen: true }));
   }

packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts

@@ -1,11 +1,12 @@
 import type { ClassType } from '@vben-core/typings';
+import type { Component, Ref } from 'vue';
 
 import type { DrawerApi } from './drawer-api';
 
-import type { Component, Ref } from 'vue';
-
 export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
 
+export type CloseIconPlacement = 'left' | 'right';
+
 export interface DrawerProps {
   /**
    * 是否挂载到内容区域
@@ -18,10 +19,14 @@ export interface DrawerProps {
   cancelText?: string;
   class?: ClassType;
   /**
-   * 是否显示右上角的关闭按钮
+   * 是否显示关闭按钮
    * @default true
    */
   closable?: boolean;
+  /**
+   * 关闭按钮的位置
+   */
+  closeIconPlacement?: CloseIconPlacement;
   /**
    * 点击弹窗遮罩是否关闭弹窗
    * @default true
@@ -126,9 +131,13 @@ export type ExtendedDrawerApi = {
 
 export interface DrawerApiOptions extends DrawerState {
   /**
-   * 独立的弹窗组件
+   * 独立的抽屉组件
    */
   connectedComponent?: Component;
+  /**
+   * 在关闭时销毁抽屉。仅在使用 connectedComponent 时有效
+   */
+  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns
@@ -138,6 +147,11 @@ export interface DrawerApiOptions extends DrawerState {
    * 点击取消按钮的回调
    */
   onCancel?: () => void;
+  /**
+   * 弹窗关闭动画结束的回调
+   * @returns
+   */
+  onClosed?: () => void;
   /**
    * 点击确定按钮的回调
    */
@@ -148,4 +162,9 @@ export interface DrawerApiOptions extends DrawerState {
    * @returns
    */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * 弹窗打开动画结束的回调
+   * @returns
+   */
+  onOpened?: () => void;
 }

packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue

@@ -10,6 +10,7 @@ import {
 } from '@vben-core/composables';
 import { X } from '@vben-core/icons';
 import {
+  Separator,
   Sheet,
   SheetClose,
   SheetContent,
@@ -33,6 +34,7 @@ interface Props extends DrawerProps {
 
 const props = withDefaults(defineProps<Props>(), {
   appendToMain: false,
+  closeIconPlacement: 'right',
   drawerApi: undefined,
   zIndex: 1000,
 });
@@ -139,10 +141,12 @@ const getAppendTo = computed(() => {
       :side="placement"
       :z-index="zIndex"
       @close-auto-focus="handleFocusOutside"
+      @closed="() => drawerApi?.onClosed()"
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
       @open-auto-focus="handerOpenAutoFocus"
+      @opened="() => drawerApi?.onOpened()"
       @pointer-down-outside="pointerDownOutside"
     >
       <SheetHeader
@@ -153,11 +157,29 @@ const getAppendTo = computed(() => {
             headerClass,
             {
               'px-4 py-3': closable,
+              'pl-2': closable && closeIconPlacement === 'left',
             },
           )
         "
       >
-        <div>
+        <div class="flex items-center">
+          <SheetClose
+            v-if="closable && closeIconPlacement === 'left'"
+            as-child
+            class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
+          >
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
+          </SheetClose>
+          <Separator
+            v-if="closable && closeIconPlacement === 'left'"
+            class="ml-1 mr-2 h-8"
+            decorative
+            orientation="vertical"
+          />
           <SheetTitle v-if="title" class="text-left">
             <slot name="title">
               {{ title }}
@@ -182,13 +204,15 @@ const getAppendTo = computed(() => {
         <div class="flex-center">
           <slot name="extra"></slot>
           <SheetClose
-            v-if="closable"
+            v-if="closable && closeIconPlacement === 'right'"
             as-child
             class="data-[state=open]:bg-secondary ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none"
           >
-            <VbenIconButton>
-              <X class="size-4" />
-            </VbenIconButton>
+            <slot name="close-icon">
+              <VbenIconButton>
+                <X class="size-4" />
+              </VbenIconButton>
+            </slot>
           </SheetClose>
         </div>
       </SheetHeader>

packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts

@@ -4,9 +4,16 @@ import type {
   ExtendedDrawerApi,
 } from './drawer';
 
-import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
-
 import { useStore } from '@vben-core/shared/store';
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
 
 import VbenDrawer from './drawer.vue';
 import { DrawerApi } from './drawer-api';
@@ -22,6 +29,7 @@ export function useVbenDrawer<
   const { connectedComponent } = options;
   if (connectedComponent) {
     const extendedApi = reactive({});
+    const isDrawerReady = ref(true);
     const Drawer = defineComponent(
       (props: TParentDrawerProps, { attrs, slots }) => {
         provide(USER_DRAWER_INJECT_KEY, {
@@ -31,13 +39,23 @@ export function useVbenDrawer<
             Object.setPrototypeOf(extendedApi, api);
           },
           options,
+          async reCreateDrawer() {
+            isDrawerReady.value = false;
+            await nextTick();
+            isDrawerReady.value = true;
+          },
         });
         checkProps(extendedApi as ExtendedDrawerApi, {
           ...props,
           ...attrs,
           ...slots,
         });
-        return () => h(connectedComponent, { ...props, ...attrs }, slots);
+        return () =>
+          h(
+            isDrawerReady.value ? connectedComponent : 'div',
+            { ...props, ...attrs },
+            slots,
+          );
       },
       {
         inheritAttrs: false,
@@ -58,6 +76,14 @@ export function useVbenDrawer<
     options.onOpenChange?.(isOpen);
     injectData.options?.onOpenChange?.(isOpen);
   };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateDrawer?.();
+    }
+  };
   const api = new DrawerApi(mergedOptions);
 
   const extendedApi: ExtendedDrawerApi = api as never;

packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts

@@ -100,17 +100,6 @@ describe('modalApi', () => {
     expect(onOpenChange).toHaveBeenCalledWith(true);
   });
 
-  it('should batch state updates', () => {
-    const batchSpy = vi.spyOn(modalApi.store, 'batch');
-    modalApi.batchStore(() => {
-      modalApi.setState({ title: 'Batch Title' });
-      modalApi.setState({ confirmText: 'Batch Confirm' });
-    });
-    expect(batchSpy).toHaveBeenCalled();
-    expect(modalApi.store.state.title).toBe('Batch Title');
-    expect(modalApi.store.state.confirmText).toBe('Batch Confirm');
-  });
-
   it('should call onClosed callback when provided', () => {
     const onClosed = vi.fn();
     const modalApiWithHook = new ModalApi({ onClosed });

packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts

@@ -93,11 +93,6 @@ export class ModalApi {
     bindMethods(this);
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   /**
    * 关闭弹窗
    */

packages/@core/ui-kit/popup-ui/src/modal/modal.ts

@@ -1,7 +1,7 @@
-import type { ModalApi } from './modal-api';
-
 import type { Component, Ref } from 'vue';
 
+import type { ModalApi } from './modal-api';
+
 export interface ModalProps {
   /**
    * 是否要挂载到内容区域
@@ -143,6 +143,10 @@ export interface ModalApiOptions extends ModalState {
    * 独立的弹窗组件
    */
   connectedComponent?: Component;
+  /**
+   * 在关闭时销毁弹窗。仅在使用 connectedComponent 时有效
+   */
+  destroyOnClose?: boolean;
   /**
    * 关闭前的回调，返回 false 可以阻止关闭
    * @returns

packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts

@@ -3,10 +3,10 @@
  * 调整部分细节
  */
 
-import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 
 import { unrefElement } from '@vueuse/core';
+import { onBeforeUnmount, onMounted, reactive, ref, watchEffect } from 'vue';
 
 export function useModalDraggable(
   targetRef: Ref<HTMLElement | undefined>,

packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts

@@ -1,8 +1,15 @@
 import type { ExtendedModalApi, ModalApiOptions, ModalProps } from './modal';
 
-import { defineComponent, h, inject, nextTick, provide, reactive } from 'vue';
-
 import { useStore } from '@vben-core/shared/store';
+import {
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+} from 'vue';
 
 import VbenModal from './modal.vue';
 import { ModalApi } from './modal-api';
@@ -18,6 +25,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
   const { connectedComponent } = options;
   if (connectedComponent) {
     const extendedApi = reactive({});
+    const isModalReady = ref(true);
     const Modal = defineComponent(
       (props: TParentModalProps, { attrs, slots }) => {
         provide(USER_MODAL_INJECT_KEY, {
@@ -27,6 +35,11 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
             Object.setPrototypeOf(extendedApi, api);
           },
           options,
+          async reCreateModal() {
+            isModalReady.value = false;
+            await nextTick();
+            isModalReady.value = true;
+          },
         });
         checkProps(extendedApi as ExtendedModalApi, {
           ...props,
@@ -35,7 +48,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
         });
         return () =>
           h(
-            connectedComponent,
+            isModalReady.value ? connectedComponent : 'div',
             {
               ...props,
               ...attrs,
@@ -62,6 +75,15 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
     options.onOpenChange?.(isOpen);
     injectData.options?.onOpenChange?.(isOpen);
   };
+
+  const onClosed = mergedOptions.onClosed;
+
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose) {
+      injectData.reCreateModal?.();
+    }
+  };
   const api = new ModalApi(mergedOptions);
 
   const extendedApi: ExtendedModalApi = api as never;

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

@@ -1,6 +1,6 @@
 {
   "name": "@vben-core/shadcn-ui",
-  "version": "5.5.0",
+  "version": "5.5.2",
   "#main": "./dist/index.mjs",
   "#module": "./dist/index.mjs",
   "homepage": "https://github.com/vbenjs/vue-vben-admin",

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;

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 {

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`

packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue

@@ -8,9 +8,8 @@ import type {
 
 import type { IContextMenuItem } from './interface';
 
-import { computed } from 'vue';
-
 import { useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';
 
 import {
   ContextMenu,

packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue

@@ -6,9 +6,8 @@ import type {
   HoverCardRootProps,
 } from 'radix-vue';
 
-import { computed } from 'vue';
-
 import { useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';
 
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
 

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<{
   // 没有是否显示默认图标

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');

packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue

@@ -6,9 +6,8 @@ import type {
   PopoverRootProps,
 } from 'radix-vue';
 
-import { computed } from 'vue';
-
 import { useForwardPropsEmits } from 'radix-vue';
+import { computed } from 'vue';
 
 import {
   PopoverContent,

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',

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>();
 

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>

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 {

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>();

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>();
 

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>();
 

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>();
 

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<{

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>

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>

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',

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;

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',

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',

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';
 

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: {

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>();

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>();

packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import type {
+  ContextMenuContentEmits,
+  ContextMenuContentProps,
+} from 'radix-vue';
 
 import { cn } from '@vben-core/shared/utils';
-
 import {
   ContextMenuContent,
-  type ContextMenuContentEmits,
-  type ContextMenuContentProps,
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
+import { computed } from 'vue';
 
 const props = defineProps<{ class?: any } & ContextMenuContentProps>();
 const emits = defineEmits<ContextMenuContentEmits>();

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>

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

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

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>

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>();
 

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>();

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>();
 

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>();

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>();

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<
   {

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>();
 

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>();

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>

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import type { ClassType } from '@vben-core/typings';
-
-import { computed, ref } 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,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
+import { computed, ref } from 'vue';
 
 import DialogOverlay from './DialogOverlay.vue';
 

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>();
 

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>(),

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>();
 

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>

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,