perf: format code with better style (#5283)

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

@@ -1,9 +1,7 @@
 export {
   ArrowDown,
   ArrowLeft,
-  ArrowLeftFromLine as MdiMenuOpen,
   ArrowLeftToLine,
-  ArrowRightFromLine as MdiMenuClose,
   ArrowRightLeft,
   ArrowRightToLine,
   ArrowUp,
@@ -29,6 +27,7 @@ export {
   Github,
   Grip,
   GripVertical,
+  Menu as IconDefault,
   Info,
   InspectionPanel,
   Languages,
@@ -37,7 +36,8 @@ export {
   LogOut,
   MailCheck,
   Maximize,
-  Menu as IconDefault,
+  ArrowRightFromLine as MdiMenuClose,
+  ArrowLeftFromLine as MdiMenuOpen,
   Menu,
   Minimize,
   Minimize2,

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

@@ -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/cache/storage-manager.ts

@@ -25,15 +25,6 @@ class StorageManager {
         : window.sessionStorage;
   }
 
-  /**
-   * 获取完整的存储键
-   * @param key 原始键
-   * @returns 带前缀的完整键
-   */
-  private getFullKey(key: string): string {
-    return `${this.prefix}-${key}`;
-  }
-
   /**
    * 清除所有带前缀的存储项
    */
@@ -113,6 +104,15 @@ class StorageManager {
       console.error(`Error setting item with key "${fullKey}":`, error);
     }
   }
+
+  /**
+   * 获取完整的存储键
+   * @param key 原始键
+   * @returns 带前缀的完整键
+   */
+  private getFullKey(key: string): string {
+    return `${this.prefix}-${key}`;
+  }
 }
 
 export { StorageManager };

packages/@core/base/shared/src/utils/__tests__/util.test.ts

@@ -56,12 +56,6 @@ describe('bindMethods', () => {
 
   it('should not bind getter/setter properties', () => {
     class TestWithGetterSetter {
-      private _value: string = 'test';
-
-      constructor() {
-        bindMethods(this);
-      }
-
       get value() {
         return this._value;
       }
@@ -69,6 +63,12 @@ describe('bindMethods', () => {
       set value(newValue: string) {
         this._value = newValue;
       }
+
+      private _value: string = 'test';
+
+      constructor() {
+        bindMethods(this);
+      }
     }
 
     const instance = new TestWithGetterSetter();

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/shared/src/utils/state-handler.ts

@@ -3,12 +3,6 @@ export class StateHandler {
   private rejectCondition: (() => void) | null = null;
   private resolveCondition: (() => void) | null = null;
 
-  // 清理 resolve/reject 函数
-  private clearPromises() {
-    this.resolveCondition = null;
-    this.rejectCondition = null;
-  }
-
   isConditionTrue(): boolean {
     return this.condition;
   }
@@ -47,4 +41,10 @@ export class StateHandler {
       }
     });
   }
+
+  // 清理 resolve/reject 函数
+  private clearPromises() {
+    this.resolveCondition = null;
+    this.rejectCondition = null;
+  }
 }

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,15 +1,14 @@
-import type { RouteRecordRaw } from 'vue-router';
-
 import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
 
 /**
  * 扩展路由原始对象
  */
-type ExRouteRecordRaw = {
+type ExRouteRecordRaw = RouteRecordRaw & {
   parent?: string;
   parents?: string[];
   path?: any;
-} & RouteRecordRaw;
+};
 
 interface MenuRecordBadgeRaw {
   /**

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 {
   /**
@@ -117,10 +116,13 @@ interface RouteMeta {
 }
 
 // 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
-type RouteRecordStringComponent<T = string> = {
+type RouteRecordStringComponent<T = string> = Omit<
+  RouteRecordRaw,
+  'children' | 'component'
+> & {
   children?: RouteRecordStringComponent<T>[];
   component: T;
-} & Omit<RouteRecordRaw, 'children' | 'component'>;
+};
 
 type ComponentRecordType = Record<string, () => Promise<Component>>;
 

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

@@ -1,4 +1,7 @@
 import type { CSSProperties } from 'vue';
+
+import type { VisibleDomRect } from '@vben-core/shared/utils';
+
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import {
@@ -7,10 +10,7 @@ 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';
 

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

@@ -1,4 +1,5 @@
 import type { ComputedRef, Ref } from 'vue';
+
 import { computed, getCurrentInstance, unref, useAttrs, useSlots } from 'vue';
 
 import {

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

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

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

@@ -39,6 +39,90 @@ class PreferenceManager {
     );
   }
 
+  clearCache() {
+    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+  }
+
+  public getInitialPreferences() {
+    return this.initialPreferences;
+  }
+
+  public getPreferences() {
+    return readonly(this.state);
+  }
+
+  /**
+   * 覆盖偏好设置
+   * overrides  要覆盖的偏好设置
+   * namespace  命名空间
+   */
+  public async initPreferences({ namespace, overrides }: InitialOptions) {
+    // 是否初始化过
+    if (this.isInitialized) {
+      return;
+    }
+    // 初始化存储管理器
+    this.cache = new StorageManager({ prefix: namespace });
+    // 合并初始偏好设置
+    this.initialPreferences = merge({}, overrides, defaultPreferences);
+
+    // 加载并合并当前存储的偏好设置
+    const mergedPreference = merge(
+      {},
+      // overrides,
+      this.loadCachedPreferences() || {},
+      this.initialPreferences,
+    );
+
+    // 更新偏好设置
+    this.updatePreferences(mergedPreference);
+
+    this.setupWatcher();
+
+    this.initPlatform();
+    // 标记为已初始化
+    this.isInitialized = true;
+  }
+
+  /**
+   * 重置偏好设置
+   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
+   *
+   * @example
+   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
+   * 当前 state 为 { theme: 'dark', language: 'fr' }
+   * this.resetPreferences();
+   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
+   * 并且 localStorage 中的对应项将被移除
+   */
+  resetPreferences() {
+    // 将状态重置为初始偏好设置
+    Object.assign(this.state, this.initialPreferences);
+    // 保存重置后的偏好设置
+    this.savePreferences(this.state);
+    // 从存储中移除偏好设置项
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
+    this.updatePreferences(this.state);
+  }
+
+  /**
+   * 更新偏好设置
+   * @param updates - 要更新的偏好设置
+   */
+  public updatePreferences(updates: DeepPartial<Preferences>) {
+    const mergedState = merge({}, updates, markRaw(this.state));
+
+    Object.assign(this.state, mergedState);
+
+    // 根据更新的键值执行相应的操作
+    this.handleUpdates(updates);
+    this.savePreferences(this.state);
+  }
+
   /**
    * 保存偏好设置
    * @param {Preferences} preference - 需要保存的偏好设置
@@ -138,90 +222,6 @@ class PreferenceManager {
         : dom.classList.remove(COLOR_GRAY);
     }
   }
-
-  clearCache() {
-    [STORAGE_KEY, STORAGE_KEY_LOCALE, STORAGE_KEY_THEME].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-  }
-
-  public getInitialPreferences() {
-    return this.initialPreferences;
-  }
-
-  public getPreferences() {
-    return readonly(this.state);
-  }
-
-  /**
-   * 覆盖偏好设置
-   * overrides  要覆盖的偏好设置
-   * namespace  命名空间
-   */
-  public async initPreferences({ namespace, overrides }: InitialOptions) {
-    // 是否初始化过
-    if (this.isInitialized) {
-      return;
-    }
-    // 初始化存储管理器
-    this.cache = new StorageManager({ prefix: namespace });
-    // 合并初始偏好设置
-    this.initialPreferences = merge({}, overrides, defaultPreferences);
-
-    // 加载并合并当前存储的偏好设置
-    const mergedPreference = merge(
-      {},
-      // overrides,
-      this.loadCachedPreferences() || {},
-      this.initialPreferences,
-    );
-
-    // 更新偏好设置
-    this.updatePreferences(mergedPreference);
-
-    this.setupWatcher();
-
-    this.initPlatform();
-    // 标记为已初始化
-    this.isInitialized = true;
-  }
-
-  /**
-   * 重置偏好设置
-   * 偏好设置将被重置为初始值，并从 localStorage 中移除。
-   *
-   * @example
-   * 假设 initialPreferences 为 { theme: 'light', language: 'en' }
-   * 当前 state 为 { theme: 'dark', language: 'fr' }
-   * this.resetPreferences();
-   * 调用后，state 将被重置为 { theme: 'light', language: 'en' }
-   * 并且 localStorage 中的对应项将被移除
-   */
-  resetPreferences() {
-    // 将状态重置为初始偏好设置
-    Object.assign(this.state, this.initialPreferences);
-    // 保存重置后的偏好设置
-    this.savePreferences(this.state);
-    // 从存储中移除偏好设置项
-    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
-      this.cache?.removeItem(key);
-    });
-    this.updatePreferences(this.state);
-  }
-
-  /**
-   * 更新偏好设置
-   * @param updates - 要更新的偏好设置
-   */
-  public updatePreferences(updates: DeepPartial<Preferences>) {
-    const mergedState = merge({}, updates, markRaw(this.state));
-
-    Object.assign(this.state, mergedState);
-
-    // 根据更新的键值执行相应的操作
-    this.handleUpdates(updates);
-    this.savePreferences(this.state);
-  }
 }
 
 const preferencesManager = new PreferenceManager();

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

@@ -1,10 +1,11 @@
+import type { Component } from 'vue';
+
 import type {
   BaseFormComponentType,
   FormCommonConfig,
   VbenFormAdapterOptions,
 } from './types';
 
-import type { Component } from 'vue';
 import { h } from 'vue';
 
 import {

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

@@ -1,4 +1,3 @@
-import type { Recordable } from '@vben-core/typings';
 import type {
   FormState,
   GenericObject,
@@ -6,6 +5,8 @@ import type {
   ValidationOptions,
 } from 'vee-validate';
 
+import type { Recordable } from '@vben-core/typings';
+
 import type { FormActions, FormSchema, VbenFormProps } from './types';
 
 import { toRaw } from 'vue';
@@ -45,20 +46,20 @@ function getDefaultState(): VbenFormProps {
 }
 
 export class FormApi {
-  // 最后一次点击提交时的表单值
-  private latestSubmissionValues: null | Recordable<any> = null;
-  private prevState: null | VbenFormProps = null;
-
   // private api: Pick<VbenFormProps, 'handleReset' | 'handleSubmit'>;
   public form = {} as FormActions;
   isMounted = false;
 
   public state: null | VbenFormProps = null;
-
   stateHandler: StateHandler;
 
   public store: Store<VbenFormProps>;
 
+  // 最后一次点击提交时的表单值
+  private latestSubmissionValues: null | Recordable<any> = null;
+
+  private prevState: null | VbenFormProps = null;
+
   constructor(options: VbenFormProps = {}) {
     const { ...storeState } = options;
 
@@ -83,40 +84,6 @@ export class FormApi {
     bindMethods(this);
   }
 
-  private async getForm() {
-    if (!this.isMounted) {
-      // 等待form挂载
-      await this.stateHandler.waitForCondition();
-    }
-    if (!this.form?.meta) {
-      throw new Error('<VbenForm /> is not mounted');
-    }
-    return this.form;
-  }
-
-  private updateState() {
-    const currentSchema = this.state?.schema ?? [];
-    const prevSchema = this.prevState?.schema ?? [];
-    // 进行了删除schema操作
-    if (currentSchema.length < prevSchema.length) {
-      const currentFields = new Set(
-        currentSchema.map((item) => item.fieldName),
-      );
-      const deletedSchema = prevSchema.filter(
-        (item) => !currentFields.has(item.fieldName),
-      );
-
-      for (const schema of deletedSchema) {
-        this.form?.setFieldValue(schema.fieldName, undefined);
-      }
-    }
-  }
-
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   getLatestSubmissionValues() {
     return this.latestSubmissionValues || {};
   }
@@ -363,4 +330,33 @@ export class FormApi {
     }
     return validateResult;
   }
+
+  private async getForm() {
+    if (!this.isMounted) {
+      // 等待form挂载
+      await this.stateHandler.waitForCondition();
+    }
+    if (!this.form?.meta) {
+      throw new Error('<VbenForm /> is not mounted');
+    }
+    return this.form;
+  }
+
+  private updateState() {
+    const currentSchema = this.state?.schema ?? [];
+    const prevSchema = this.prevState?.schema ?? [];
+    // 进行了删除schema操作
+    if (currentSchema.length < prevSchema.length) {
+      const currentFields = new Set(
+        currentSchema.map((item) => item.fieldName),
+      );
+      const deletedSchema = prevSchema.filter(
+        (item) => !currentFields.has(item.fieldName),
+      );
+
+      for (const schema of deletedSchema) {
+        this.form?.setFieldValue(schema.fieldName, undefined);
+      }
+    }
+  }
 }

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

@@ -44,9 +44,9 @@ const {
   renderComponentContent,
   rules,
 } = defineProps<
-  {
+  Props & {
     commonComponentProps: MaybeComponentProps;
-  } & Props
+  }
 >();
 
 const { componentBindEventMap, componentMap, isVertical } = useFormContext();

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 {
@@ -13,8 +14,6 @@ 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 { provideFormRenderProps } from './context';
 import { useExpandable } from './expandable';
 import FormField from './form-field.vue';
@@ -23,7 +22,7 @@ import { getBaseRules, getDefaultValueInZodStack } from './helper';
 interface Props extends FormRenderProps {}
 
 const props = withDefaults(
-  defineProps<{ globalCommonConfig?: FormCommonConfig } & Props>(),
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
   {
     collapsedRows: 1,
     commonConfig: () => ({}),
@@ -81,10 +80,10 @@ const formCollapsed = computed(() => {
 });
 
 const computedSchema = computed(
-  (): ({
+  (): (Omit<FormSchema, 'formFieldProps'> & {
     commonComponentProps: Record<string, any>;
     formFieldProps: Record<string, any>;
-  } & Omit<FormSchema, 'formFieldProps'>)[] => {
+  })[] => {
     const {
       colon = false,
       componentProps = {},

packages/@core/ui-kit/form-ui/src/form-render/index.ts

@@ -1,3 +1,3 @@
-export { default as Form } from './form.vue';
 export { default as FormField } from './form-field.vue';
 export { default as FormLabel } from './form-label.vue';
+export { default as Form } from './form.vue';

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

@@ -3,8 +3,8 @@ export { setupVbenForm } from './config';
 export type {
   BaseFormComponentType,
   ExtendedFormApi,
-  FormSchema as VbenFormSchema,
   VbenFormProps,
+  FormSchema as VbenFormSchema,
 } from './types';
 
 export * from './use-vben-form';

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

@@ -1,12 +1,13 @@
-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 { ZodTypeAny } from 'zod';
 
-import type { FormApi } from './form-api';
-
 import type { Component, HtmlHTMLAttributes, Ref } from 'vue';
 
+import type { VbenButtonProps } from '@vben-core/shadcn-ui';
+import type { ClassType } from '@vben-core/typings';
+
+import type { FormApi } from './form-api';
+
 export type FormLayout = 'horizontal' | 'vertical';
 
 export type BaseFormComponentType =
@@ -19,7 +20,7 @@ export type BaseFormComponentType =
   | 'VbenSelect'
   | (Record<never, never> & string);
 
-type Breakpoints = '' | '2xl:' | '3xl:' | 'lg:' | 'md:' | 'sm:' | 'xl:';
+type Breakpoints = '2xl:' | '3xl:' | '' | 'lg:' | 'md:' | 'sm:' | 'xl:';
 
 type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
 
@@ -35,12 +36,12 @@ export type FormItemClassType =
   | WrapperClassType;
 
 export type FormFieldOptions = Partial<
-  {
+  FieldOptions & {
     validateOnBlur?: boolean;
     validateOnChange?: boolean;
     validateOnInput?: boolean;
     validateOnModelUpdate?: boolean;
-  } & FieldOptions
+  }
 >;
 
 export interface FormShape {
@@ -372,11 +373,11 @@ export interface VbenFormProps<
   submitOnEnter?: boolean;
 }
 
-export type ExtendedFormApi = {
+export type ExtendedFormApi = FormApi & {
   useStore: <T = NoInfer<VbenFormProps>>(
     selector?: (state: NoInfer<VbenFormProps>) => T,
   ) => Readonly<Ref<T>>;
-} & FormApi;
+};
 
 export interface VbenFormAdapterOptions<
   T extends BaseFormComponentType = BaseFormComponentType,

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

@@ -1,12 +1,16 @@
+import type { ZodRawShape } from 'zod';
+
+import type { ComputedRef } from 'vue';
+
 import type { FormActions, VbenFormProps } from './types';
 
-import { computed, type ComputedRef, unref, useSlots } from 'vue';
+import { computed, unref, useSlots } from 'vue';
 
 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 { 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,10 @@
 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 { nextTick, onMounted, watch } from 'vue';
-
+import { useForwardPriorityValues } from '@vben-core/composables';
 import { cloneDeep } from '@vben-core/shared/utils';
 
 import { useDebounceFn } from '@vueuse/core';

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
 import type { ContentCompactType } from '@vben-core/typings';
 
-import type { CSSProperties } from 'vue';
 import { computed } from 'vue';
 
 import { useLayoutContentStyle } from '@vben-core/composables';

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,5 +1,6 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
+
 import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';

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/vben-layout.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import type { CSSProperties } from 'vue';
+
 import type { VbenLayoutProps } from './vben-layout';
 
-import type { CSSProperties } from 'vue';
 import { computed, ref, watch } from 'vue';
 
 import {

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

@@ -1,4 +1,4 @@
-export { default as Menu } from './menu.vue';
 export { default as MenuBadge } from './menu-badge.vue';
 export { default as MenuItem } from './menu-item.vue';
+export { default as Menu } from './menu.vue';
 export { default as SubMenu } from './sub-menu.vue';

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { UseResizeObserverReturn } from '@vueuse/core';
 
+import type { VNodeArrayChildren } from 'vue';
+
 import type {
   MenuItemClicked,
   MenuItemRegistered,
@@ -15,7 +17,6 @@ import {
   ref,
   toRef,
   useSlots,
-  type VNodeArrayChildren,
   watch,
   watchEffect,
 } from 'vue';

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

@@ -1,7 +1,7 @@
-import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
-
 import type { Component, Ref } from 'vue';
 
+import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
+
 interface MenuProps {
   /**
    * @zh_CN 是否开启手风琴模式

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

@@ -9,7 +9,11 @@ vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
+      get state() {
+        return this._state;
+      }
       private _state: DrawerState;
+
       private options: any;
 
       constructor(initialState: DrawerState, options: any) {
@@ -25,10 +29,6 @@ vi.mock('@vben-core/shared/store', () => {
         this._state = fn(this._state);
         this.options.onUpdate();
       }
-
-      get state() {
-        return this._state;
-      }
     },
   };
 });
@@ -100,17 +100,6 @@ 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 });

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

@@ -4,6 +4,12 @@ import { Store } from '@vben-core/shared/store';
 import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class DrawerApi {
+  // 共享数据
+  public sharedData: Record<'payload', any> = {
+    payload: {},
+  };
+  public store: Store<DrawerState>;
+
   private api: Pick<
     DrawerApiOptions,
     | 'onBeforeClose'
@@ -13,16 +19,10 @@ export class DrawerApi {
     | 'onOpenChange'
     | 'onOpened'
   >;
+
   // private prevState!: DrawerState;
   private state!: DrawerState;
 
-  // 共享数据
-  public sharedData: Record<'payload', any> = {
-    payload: {},
-  };
-
-  public store: Store<DrawerState>;
-
   constructor(options: DrawerApiOptions = {}) {
     const {
       connectedComponent: _,
@@ -83,11 +83,6 @@ export class DrawerApi {
     bindMethods(this);
   }
 
-  // 如果需要多次更新状态，可以使用 batch 方法
-  batchStore(cb: () => void) {
-    this.store.batch(cb);
-  }
-
   /**
    * 关闭弹窗
    */

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

@@ -1,9 +1,9 @@
+import type { Component, Ref } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';
 
 import type { DrawerApi } from './drawer-api';
 
-import type { Component, Ref } from 'vue';
-
 export type DrawerPlacement = 'bottom' | 'left' | 'right' | 'top';
 
 export type CloseIconPlacement = 'left' | 'right';
@@ -124,11 +124,11 @@ export interface DrawerState extends DrawerProps {
   sharedData?: Record<string, any>;
 }
 
-export type ExtendedDrawerApi = {
+export type ExtendedDrawerApi = DrawerApi & {
   useStore: <T = NoInfer<DrawerState>>(
     selector?: (state: NoInfer<DrawerState>) => T,
   ) => Readonly<Ref<T>>;
-} & DrawerApi;
+};
 
 export interface DrawerApiOptions extends DrawerState {
   /**

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

@@ -16,8 +16,8 @@ import {
 
 import { useStore } from '@vben-core/shared/store';
 
-import VbenDrawer from './drawer.vue';
 import { DrawerApi } from './drawer-api';
+import VbenDrawer from './drawer.vue';
 
 const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
 

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

@@ -8,7 +8,11 @@ vi.mock('@vben-core/shared/store', () => {
   return {
     isFunction: (fn: any) => typeof fn === 'function',
     Store: class {
+      get state() {
+        return this._state;
+      }
       private _state: ModalState;
+
       private options: any;
 
       constructor(initialState: ModalState, options: any) {
@@ -24,10 +28,6 @@ vi.mock('@vben-core/shared/store', () => {
         this._state = fn(this._state);
         this.options.onUpdate();
       }
-
-      get state() {
-        return this._state;
-      }
     },
   };
 });
@@ -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

@@ -4,6 +4,12 @@ import { Store } from '@vben-core/shared/store';
 import { bindMethods, isFunction } from '@vben-core/shared/utils';
 
 export class ModalApi {
+  // 共享数据
+  public sharedData: Record<'payload', any> = {
+    payload: {},
+  };
+  public store: Store<ModalState>;
+
   private api: Pick<
     ModalApiOptions,
     | 'onBeforeClose'
@@ -13,16 +19,10 @@ export class ModalApi {
     | 'onOpenChange'
     | 'onOpened'
   >;
+
   // private prevState!: ModalState;
   private state!: ModalState;
 
-  // 共享数据
-  public sharedData: Record<'payload', any> = {
-    payload: {},
-  };
-
-  public store: Store<ModalState>;
-
   constructor(options: ModalApiOptions = {}) {
     const {
       connectedComponent: _,
@@ -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 {
   /**
    * 是否要挂载到内容区域
@@ -132,11 +132,11 @@ export interface ModalState extends ModalProps {
   sharedData?: Record<string, any>;
 }
 
-export type ExtendedModalApi = {
+export type ExtendedModalApi = ModalApi & {
   useStore: <T = NoInfer<ModalState>>(
     selector?: (state: NoInfer<ModalState>) => T,
   ) => Readonly<Ref<T>>;
-} & ModalApi;
+};
 
 export interface ModalApiOptions extends ModalState {
   /**

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

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

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

@@ -12,8 +12,8 @@ import {
 
 import { useStore } from '@vben-core/shared/store';
 
-import VbenModal from './modal.vue';
 import { ModalApi } from './modal-api';
+import VbenModal from './modal.vue';
 
 const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
 

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

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
 } from 'radix-vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 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/breadcrumb-view.vue

@@ -3,8 +3,8 @@ import type { BreadcrumbProps } from './types';
 
 import { useForwardPropsEmits } from 'radix-vue';
 
-import Breadcrumb from './breadcrumb.vue';
 import BreadcrumbBackground from './breadcrumb-background.vue';
+import Breadcrumb from './breadcrumb.vue';
 
 interface Props extends BreadcrumbProps {
   class?: any;

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts

@@ -1,7 +1,7 @@
-import type { BreadcrumbStyleType } from '@vben-core/typings';
-
 import type { Component } from 'vue';
 
+import type { BreadcrumbStyleType } from '@vben-core/typings';
+
 export interface IBreadcrumb {
   icon?: Component | string;
   isHome?: boolean;

packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts

@@ -1,9 +1,9 @@
 import type { AsTag } from 'radix-vue';
 
-import type { ButtonVariants, ButtonVariantSize } from '../../ui';
-
 import type { Component } from 'vue';
 
+import type { ButtonVariants, ButtonVariantSize } from '../../ui';
+
 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

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

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

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { type Component, computed } from 'vue';
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
 
 import { IconDefault, IconifyIcon } from '@vben-core/icons';
 import {

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

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { Component, PropType } from 'vue';
+
 import { defineComponent, h } from 'vue';
 
 import { isFunction, isObject } from '@vben-core/shared/utils';

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

@@ -7,7 +7,7 @@ import { cn } from '@vben-core/shared/utils';
 
 import { TabsIndicator, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & TabsIndicatorProps>();
+const props = defineProps<TabsIndicatorProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { ClassType } from '@vben-core/typings';
 import type { TooltipContentProps } from 'radix-vue';
 
 import type { StyleValue } from 'vue';
 
+import type { ClassType } from '@vben-core/typings';
+
 import {
   Tooltip,
   TooltipContent,

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,11 +1,13 @@
 <script setup lang="ts">
+import type { AccordionContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionContent, type AccordionContentProps } from 'radix-vue';
+import { AccordionContent } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & AccordionContentProps>();
+const props = defineProps<AccordionContentProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import type { AccordionItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  AccordionItem,
-  type AccordionItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & AccordionItemProps>();
+const props = defineProps<AccordionItemProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { AccordionTriggerProps } from 'radix-vue';
+
 import { computed } from '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';
 
-const props = defineProps<{ class?: any } & AccordionTriggerProps>();
+const props = defineProps<AccordionTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+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,9 +1,11 @@
 <script lang="ts" setup>
+import type { PrimitiveProps } from 'radix-vue';
+
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { Primitive } from 'radix-vue';
 
-const props = withDefaults(defineProps<{ class?: any } & PrimitiveProps>(), {
+const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   as: 'a',
 });
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue

@@ -1,9 +1,11 @@
 <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/checkbox/Checkbox.vue

@@ -12,7 +12,7 @@ import {
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & CheckboxRootProps>();
+const props = defineProps<CheckboxRootProps & { class?: any }>();
 const emits = defineEmits<CheckboxRootEmits>();
 
 const delegatedProps = computed(() => {

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

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  ContextMenuCheckboxItemEmits,
+  ContextMenuCheckboxItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -6,13 +11,11 @@ import { cn } from '@vben-core/shared/utils';
 import { Check } from 'lucide-vue-next';
 import {
   ContextMenuCheckboxItem,
-  type ContextMenuCheckboxItemEmits,
-  type ContextMenuCheckboxItemProps,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuCheckboxItemProps>();
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {

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(() => {

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,17 +1,14 @@
 <script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuItem,
-  type ContextMenuItemEmits,
-  type ContextMenuItemProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & ContextMenuItemProps
+  ContextMenuItemProps & { class?: any; inset?: boolean }
 >();
 const emits = defineEmits<ContextMenuItemEmits>();
 

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

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import type { ContextMenuLabelProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue';
+import { ContextMenuLabel } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & ContextMenuLabelProps
+  ContextMenuLabelProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {

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,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  ContextMenuRadioItemEmits,
+  ContextMenuRadioItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,12 +12,10 @@ import { Circle } from 'lucide-vue-next';
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
-  type ContextMenuRadioItemEmits,
-  type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuRadioItemProps>();
+const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {

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

@@ -1,14 +1,13 @@
 <script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuSeparator,
-  type ContextMenuSeparatorProps,
-} from 'radix-vue';
+import { ContextMenuSeparator } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & ContextMenuSeparatorProps>();
+const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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,16 +1,16 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ContextMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuSubContentProps>();
+const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
 
 const delegatedProps = computed(() => {

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

@@ -1,20 +1,18 @@
 <script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'radix-vue';
+
 import { computed } from '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';
 
 const props = defineProps<
-  {
+  ContextMenuSubTriggerProps & {
     class?: any;
     inset?: boolean;
-  } & ContextMenuSubTriggerProps
+  }
 >();
 
 const delegatedProps = computed(() => {

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,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,7 +19,7 @@ import DialogOverlay from './DialogOverlay.vue';
 
 const props = withDefaults(
   defineProps<
-    {
+    DialogContentProps & {
       appendTo?: HTMLElement | string;
       class?: ClassType;
       closeClass?: ClassType;
@@ -27,12 +27,12 @@ const props = withDefaults(
       open?: boolean;
       showClose?: boolean;
       zIndex?: number;
-    } & DialogContentProps
+    }
   >(),
   { appendTo: 'body', showClose: true, zIndex: 1000 },
 );
 const emits = defineEmits<
-  { close: []; closed: []; opened: [] } & DialogContentEmits
+  DialogContentEmits & { close: []; closed: []; opened: [] }
 >();
 
 const delegatedProps = computed(() => {

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

@@ -1,15 +1,13 @@
 <script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DialogDescription,
-  type DialogDescriptionProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogDescriptionProps>();
+const props = defineProps<DialogDescriptionProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,15 +9,13 @@ import { X } from 'lucide-vue-next';
 import {
   DialogClose,
   DialogContent,
-  type DialogContentEmits,
-  type DialogContentProps,
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
 const props = withDefaults(
-  defineProps<{ class?: any; zIndex?: number } & DialogContentProps>(),
+  defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),
   { zIndex: 1000 },
 );
 const emits = defineEmits<DialogContentEmits>();

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

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DialogTitleProps>();
+const props = defineProps<DialogTitleProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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,

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -6,13 +11,11 @@ import { cn } from '@vben-core/shared/utils';
 import { Check } from 'lucide-vue-next';
 import {
   DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuCheckboxItemProps>();
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {

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

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>

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuItemProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & DropdownMenuItemProps
+  DropdownMenuItemProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuLabel,
-  type DropdownMenuLabelProps,
-  useForwardProps,
-} from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
 
 const props = defineProps<
-  { class?: any; inset?: boolean } & DropdownMenuLabelProps
+  DropdownMenuLabelProps & { class?: any; inset?: boolean }
 >();
 
 const delegatedProps = computed(() => {

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

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
@@ -7,12 +12,10 @@ import { Circle } from 'lucide-vue-next';
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue';
 
-const props = defineProps<{ class?: any } & DropdownMenuRadioItemProps>();
+const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
 
 const emits = defineEmits<DropdownMenuRadioItemEmits>();
 

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'radix-vue';
+
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  DropdownMenuSeparator,
-  type DropdownMenuSeparatorProps,
-} from 'radix-vue';
+import { DropdownMenuSeparator } from 'radix-vue';
 
 const props = defineProps<
-  {
+  DropdownMenuSeparatorProps & {
     class?: any;
-  } & DropdownMenuSeparatorProps
+  }
 >();
 
 const delegatedProps = computed(() => {

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

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue

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

packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'radix-vue';
+
 import { computed } from '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';
 
-const props = defineProps<{ class?: any } & DropdownMenuSubTriggerProps>();
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;

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

packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue

@@ -6,7 +6,7 @@ import { cn } from '@vben-core/shared/utils';
 import { Label } from '../label';
 import { useFormField } from './useFormField';
 
-const props = defineProps<{ class?: any } & LabelProps>();
+const props = defineProps<LabelProps & { class?: any }>();
 
 const { formItemId } = useFormField();
 </script>

packages/@core/ui-kit/shadcn-ui/src/ui/form/index.ts

@@ -5,7 +5,7 @@ export { default as FormLabel } from './FormLabel.vue';
 export { default as FormMessage } from './FormMessage.vue';
 export { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
 export {
+  Form,
   Field as FormField,
   FieldArray as FormFieldArray,
-  Form,
 } from 'vee-validate';