Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev

2026-01-26 10:13:23 +08:00
parent 1ce562601f 7cb2699f19
commit baed599fcc
62 changed files with 5078 additions and 3451 deletions
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -18,9 +18,9 @@

    font-size: var(--font-size-base, 16px);
    font-variation-settings: normal;
+    font-synthesis-weight: none;
    line-height: 1.15;
    text-size-adjust: 100%;
-    font-synthesis-weight: none;
    scroll-behavior: smooth;
    text-rendering: optimizelegibility;
    -webkit-tap-highlight-color: transparent;
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -96,9 +96,6 @@
  "devDependencies": {
    "@types/crypto-js": "catalog:",
    "@types/lodash.clonedeep": "catalog:",
-    "@types/lodash.get": "catalog:",
-    "@types/lodash.isequal": "catalog:",
-    "@types/lodash.set": "catalog:",
    "@types/nprogress": "catalog:"
  }
 }
--- a/packages/@core/base/shared/src/utils/tests/dom.test.ts
+++ b/packages/@core/base/shared/src/utils/tests/dom.test.ts
@@ -116,11 +116,11 @@ describe('getElementVisibleRect', () => {
    } as HTMLElement;

    expect(getElementVisibleRect(element)).toEqual({
-      bottom: 800,
+      bottom: 0,
      height: 0,
-      left: 1100,
-      right: 1000,
-      top: 900,
+      left: 0,
+      right: 0,
+      top: 0,
      width: 0,
    });
  });
--- a/packages/@core/base/shared/src/utils/dom.ts
+++ b/packages/@core/base/shared/src/utils/dom.ts
@@ -41,6 +41,18 @@ export function getElementVisibleRect(
  const left = Math.max(rect.left, 0);
  const right = Math.min(rect.right, viewWidth);

+  // 如果元素完全不可见，则返回一个空的矩形
+  if (top >= viewHeight || bottom <= 0 || left >= viewWidth || right <= 0) {
+    return {
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+    };
+  }
+
  return {
    bottom,
    height: Math.max(0, bottom - top),
--- a/packages/@core/composables/src/tests/use-sortable.test.ts
+++ b/packages/@core/composables/src/tests/use-sortable.test.ts
@@ -29,9 +29,9 @@ describe('useSortable', () => {
    await initializeSortable();

    // Import sortablejs to access the mocked create function
-    const Sortable = await import(
-      'sortablejs/modular/sortable.complete.esm.js'
-    );
+    const Sortable =
+      // @ts-expect-error - This is a dynamic import
+      await import('sortablejs/modular/sortable.complete.esm.js');

    // Verify that Sortable.create was called with the correct parameters
    expect(Sortable.default.create).toHaveBeenCalledTimes(1);
--- a/packages/@core/preferences/src/index.ts
+++ b/packages/@core/preferences/src/index.ts
@@ -2,33 +2,17 @@ import type { Preferences } from './types';

 import { preferencesManager } from './preferences';

-// 偏好设置（带有层级关系）
-const preferences: Preferences =
-  preferencesManager.getPreferences.apply(preferencesManager);
-
-// 更新偏好设置
-const updatePreferences =
-  preferencesManager.updatePreferences.bind(preferencesManager);
-
-// 重置偏好设置
-const resetPreferences =
-  preferencesManager.resetPreferences.bind(preferencesManager);
-
-const clearPreferencesCache =
-  preferencesManager.clearCache.bind(preferencesManager);
-
-// 初始化偏好设置
-const initPreferences =
-  preferencesManager.initPreferences.bind(preferencesManager);
-
-export {
-  clearPreferencesCache,
-  initPreferences,
-  preferences,
-  preferencesManager,
-  resetPreferences,
+export const {
+  getPreferences,
  updatePreferences,
-};
+  resetPreferences,
+  clearCache,
+  initPreferences,
+} = preferencesManager;
+
+export const preferences: Preferences = getPreferences();
+
+export { preferencesManager };

 export * from './constants';
 export type * from './types';
--- a/packages/@core/preferences/src/preferences.ts
+++ b/packages/@core/preferences/src/preferences.ts
@@ -16,168 +16,168 @@ import {
 import { defaultPreferences } from './config';
 import { updateCSSVariables } from './update-css-variables';

-const STORAGE_KEY = 'preferences';
-const STORAGE_KEY_LOCALE = `${STORAGE_KEY}-locale`;
-const STORAGE_KEY_THEME = `${STORAGE_KEY}-theme`;
+const STORAGE_KEYS = {
+  MAIN: 'preferences',
+  LOCALE: 'preferences-locale',
+  THEME: 'preferences-theme',
+} as const;

 class PreferenceManager {
-  private cache: null | StorageManager = null;
-  // private flattenedState: Flatten<Preferences>;
+  private cache: StorageManager;
+  private debouncedSave: (preference: Preferences) => void;
  private initialPreferences: Preferences = defaultPreferences;
-  private isInitialized: boolean = false;
-  private savePreferences: (preference: Preferences) => void;
-  private state: Preferences = reactive<Preferences>({
-    ...this.loadPreferences(),
-  });
+  private isInitialized = false;
+  private state: Preferences;
+
  constructor() {
    this.cache = new StorageManager();
-
-    // 避免频繁的操作缓存
-    this.savePreferences = useDebounceFn(
-      (preference: Preferences) => this._savePreferences(preference),
+    this.state = reactive<Preferences>(
+      this.loadFromCache() || { ...defaultPreferences },
+    );
+    this.debouncedSave = useDebounceFn(
+      (preference) => this.saveToCache(preference),
      150,
    );
  }

-  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);
-  }
+  /**
+   * 清除所有缓存的偏好设置
+   */
+  clearCache = () => {
+    Object.values(STORAGE_KEYS).forEach((key) => this.cache.removeItem(key));
+  };

  /**
-   * 覆盖偏好设置
-   * overrides  要覆盖的偏好设置
-   * namespace  命名空间
+   * 获取初始化偏好设置
   */
-  public async initPreferences({ namespace, overrides }: InitialOptions) {
-    // 是否初始化过
+  getInitialPreferences = () => {
+    return this.initialPreferences;
+  };
+
+  /**
+   * 获取当前偏好设置（只读）
+   */
+  getPreferences = () => {
+    return readonly(this.state);
+  };
+
+  /**
+   * 初始化偏好设置
+   * @param options - 初始化配置项
+   * @param options.namespace - 命名空间，用于隔离不同应用的配置
+   * @param options.overrides - 要覆盖的偏好设置
+   */
+  initPreferences = async ({ namespace, overrides }: InitialOptions) => {
+    // 防止重复初始化
    if (this.isInitialized) {
      return;
    }
-    // 初始化存储管理器
+
+    // 使用命名空间初始化存储管理器
    this.cache = new StorageManager({ prefix: namespace });
+
    // 合并初始偏好设置
    this.initialPreferences = merge({}, overrides, defaultPreferences);

-    // 加载并合并当前存储的偏好设置
+    // 加载缓存的偏好设置并与初始配置合并
+    const cachedPreferences = this.loadFromCache() || {};
    const mergedPreference = merge(
      {},
-      // overrides,
-      this.loadCachedPreferences() || {},
+      cachedPreferences,
      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() {
+  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);
-  }
+
+    // 保存偏好设置至缓存
+    this.saveToCache(this.state);
+
+    // 直接触发 UI 更新
+    this.handleUpdates(this.state);
+  };

  /**
   * 更新偏好设置
   * @param updates - 要更新的偏好设置
   */
-  public updatePreferences(updates: DeepPartial<Preferences>) {
+  updatePreferences = (updates: DeepPartial<Preferences>) => {
+    // 深度合并更新内容和当前状态
    const mergedState = merge({}, updates, markRaw(this.state));
-
    Object.assign(this.state, mergedState);

-    // 根据更新的键值执行相应的操作
+    // 根据更新的值执行更新
    this.handleUpdates(updates);
-    this.savePreferences(this.state);
-  }
+
+    // 保存到缓存
+    this.debouncedSave(this.state);
+  };

  /**
-   * 保存偏好设置
-   * @param {Preferences} preference - 需要保存的偏好设置
-   */
-  private _savePreferences(preference: Preferences) {
-    this.cache?.setItem(STORAGE_KEY, preference);
-    this.cache?.setItem(STORAGE_KEY_LOCALE, preference.app.locale);
-    this.cache?.setItem(STORAGE_KEY_THEME, preference.theme.mode);
-  }
-
-  /**
-   * 处理更新的键值
-   * 根据更新的键值执行相应的操作。
-   * @param {DeepPartial<Preferences>} updates - 部分更新的偏好设置
+   * 处理更新
+   * @param updates - 更新的偏好设置
   */
  private handleUpdates(updates: DeepPartial<Preferences>) {
-    const themeUpdates = updates.theme || {};
-    const appUpdates = updates.app || {};
+    const { theme, app } = updates;
+
    if (
-      (themeUpdates && Object.keys(themeUpdates).length > 0) ||
-      Reflect.has(themeUpdates, 'fontSize')
+      theme &&
+      (Object.keys(theme).length > 0 || Reflect.has(theme, 'fontSize'))
    ) {
      updateCSSVariables(this.state);
    }

    if (
-      Reflect.has(appUpdates, 'colorGrayMode') ||
-      Reflect.has(appUpdates, 'colorWeakMode')
+      app &&
+      (Reflect.has(app, 'colorGrayMode') || Reflect.has(app, 'colorWeakMode'))
    ) {
      this.updateColorMode(this.state);
    }
  }

+  /**
+   * 初始化平台标识
+   */
  private initPlatform() {
-    const dom = document.documentElement;
-    dom.dataset.platform = isMacOs() ? 'macOs' : 'window';
+    document.documentElement.dataset.platform = isMacOs() ? 'macOs' : 'window';
  }

  /**
-   *  从缓存中加载偏好设置。如果缓存中没有找到对应的偏好设置，则返回默认偏好设置。
+   * 从缓存加载偏好设置
+   * @returns 缓存的偏好设置，如果不存在则返回 null
   */
-  private loadCachedPreferences() {
-    return this.cache?.getItem<Preferences>(STORAGE_KEY);
+  private loadFromCache(): null | Preferences {
+    return this.cache.getItem<Preferences>(STORAGE_KEYS.MAIN);
  }

  /**
-   * 加载偏好设置
-   * @returns {Preferences} 加载的偏好设置
+   * 保存偏好设置到缓存
+   * @param preference - 要保存的偏好设置
   */
-  private loadPreferences(): Preferences {
-    return this.loadCachedPreferences() || { ...defaultPreferences };
+  private saveToCache(preference: Preferences) {
+    this.cache.setItem(STORAGE_KEYS.MAIN, preference);
+    this.cache.setItem(STORAGE_KEYS.LOCALE, preference.app.locale);
+    this.cache.setItem(STORAGE_KEYS.THEME, preference.theme.mode);
  }

  /**
-   * 监听状态和系统偏好设置的变化。
+   * 监听状态和系统偏好设置的变化
   */
  private setupWatcher() {
    if (this.isInitialized) {
@@ -187,6 +187,7 @@ class PreferenceManager {
    // 监听断点，判断是否移动端
    const breakpoints = useBreakpoints(breakpointsTailwind);
    const isMobile = breakpoints.smaller('md');
+
    watch(
      () => isMobile.value,
      (val) => {
@@ -201,12 +202,13 @@ class PreferenceManager {
    window
      .matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', ({ matches: isDark }) => {
-        // 如果偏好设置中主题模式为auto，则跟随系统更新
+        // 仅在自动模式下跟随系统主题
        if (this.state.theme.mode === 'auto') {
+          // 先应用实际的主题
          this.updatePreferences({
            theme: { mode: isDark ? 'dark' : 'light' },
          });
-          // 恢复为auto模式
+          // 再恢复为 auto 模式，保持跟随系统的状态
          this.updatePreferences({
            theme: { mode: 'auto' },
          });
@@ -216,19 +218,17 @@ class PreferenceManager {

  /**
   * 更新页面颜色模式（灰色、色弱）
-   * @param preference
+   * @param preference - 偏好设置
   */
  private updateColorMode(preference: Preferences) {
-    if (preference.app) {
-      const { colorGrayMode, colorWeakMode } = preference.app;
-      const dom = document.documentElement;
-      const COLOR_WEAK = 'invert-mode';
-      const COLOR_GRAY = 'grayscale-mode';
-      dom.classList.toggle(COLOR_WEAK, colorWeakMode);
-      dom.classList.toggle(COLOR_GRAY, colorGrayMode);
-    }
+    const { colorGrayMode, colorWeakMode } = preference.app;
+    const dom = document.documentElement;
+
+    dom.classList.toggle('invert-mode', colorWeakMode);
+    dom.classList.toggle('grayscale-mode', colorGrayMode);
  }
 }

 const preferencesManager = new PreferenceManager();
+
 export { PreferenceManager, preferencesManager };
--- a/packages/@core/preferences/src/use-preferences.ts
+++ b/packages/@core/preferences/src/use-preferences.ts
@@ -136,7 +136,7 @@ function usePreferences() {
  });

  /**
-   * @zh_CN 登录注册页面布局是否为左侧
+   * @zh_CN 登录注册页面布局是否为右侧
   */
  const authPanelRight = computed(() => {
    return appPreferences.value.authPageLayout === 'panel-right';
--- a/packages/@core/ui-kit/form-ui/src/form-render/form.vue
+++ b/packages/@core/ui-kit/form-ui/src/form-render/form.vue
@@ -53,7 +53,11 @@ const wrapperClass = computed(() => {

 provideFormRenderProps(props);

-const { isCalculated, keepFormItemIndex, wrapperRef } = useExpandable(props);
+const {
+  isCalculated,
+  keepFormItemIndex,
+  wrapperRef: _wrapperRef,
+} = useExpandable(props);

 const shapes = computed(() => {
  const resultShapes: FormShape[] = [];
@@ -170,7 +174,7 @@ const computedSchema = computed(

 <template>
  <component :is="formComponent" v-bind="formComponentProps">
-    <div ref="wrapperRef" :class="wrapperClass">
+    <div ref="_wrapperRef" :class="wrapperClass">
      <template v-for="cSchema in computedSchema" :key="cSchema.fieldName">
        <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
          <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>
--- a/packages/@core/ui-kit/form-ui/src/types.ts
+++ b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -352,9 +352,9 @@ export interface ActionButtonOptions extends VbenButtonProps {
 export interface VbenFormProps<
  T extends BaseFormComponentType = BaseFormComponentType,
 > extends Omit<
-    FormRenderProps<T>,
-    'componentBindEventMap' | 'componentMap' | 'form'
-  > {
+  FormRenderProps<T>,
+  'componentBindEventMap' | 'componentMap' | 'form'
+> {
  /**
   * 操作按钮是否反转（提交按钮前置）
   */
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
@@ -26,7 +26,8 @@ interface Props {

 const props = withDefaults(defineProps<Props>(), {});

-const { contentElement, overlayStyle } = useLayoutContentStyle();
+const { contentElement: _contentElement, overlayStyle } =
+  useLayoutContentStyle();

 const style = computed((): CSSProperties => {
  const {
@@ -55,7 +56,11 @@ const style = computed((): CSSProperties => {
 </script>

 <template>
-  <main ref="contentElement" :style="style" class="relative bg-background-deep">
+  <main
+    ref="_contentElement"
+    :style="style"
+    class="relative bg-background-deep"
+  >
    <Slot :style="overlayStyle">
      <slot name="overlay"></slot>
    </Slot>
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';

-import { computed, shallowRef, useSlots, watchEffect } from 'vue';
+import { computed, useSlots, watchEffect } from 'vue';

 import { VbenScrollbar } from '@vben-core/shadcn-ui';

@@ -114,7 +114,7 @@ const extraVisible = defineModel<boolean>('extraVisible');
 const isLocked = useScrollLock(document.body);
 const slots = useSlots();

-const asideRef = shallowRef<HTMLDivElement | null>();
+// const asideRef = shallowRef<HTMLDivElement | null>();

 const hiddenSideStyle = computed((): CSSProperties => calcMenuWidthStyle(true));

@@ -290,7 +290,6 @@ function handleMouseleave() {
    />
    <div
      v-if="isSidebarMixed"
-      ref="asideRef"
      :class="{
        'border-l': extraVisible,
      }"
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -403,13 +403,10 @@ watch(
 );

 {
-  const mouseMove = () => {
-    mouseY.value > headerWrapperHeight.value
-      ? (headerIsHidden.value = true)
-      : (headerIsHidden.value = false);
-  };
+  const HEADER_TRIGGER_DISTANCE = 12;
+
  watch(
-    [() => props.headerMode, () => mouseY.value],
+    [() => props.headerMode, () => mouseY.value, () => headerIsHidden.value],
    () => {
      if (!isHeaderAutoMode.value || isMixedNav.value || isFullContent.value) {
        if (props.headerMode !== 'auto-scroll') {
@@ -417,8 +414,12 @@ watch(
        }
        return;
      }
-      headerIsHidden.value = true;
-      mouseMove();
+
+      const isInTriggerZone = mouseY.value <= HEADER_TRIGGER_DISTANCE;
+      const isInHeaderZone =
+        !headerIsHidden.value && mouseY.value <= headerWrapperHeight.value;
+
+      headerIsHidden.value = !(isInTriggerZone || isInHeaderZone);
    },
    {
      immediate: true,
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -351,14 +351,14 @@ function getActivePaths() {
    role="menu"
  >
    <template v-if="mode === 'horizontal' && getSlot.showSlotMore">
-      <template v-for="item in getSlot.slotDefault" :key="item.key">
+      <template v-for="(item, index) in getSlot.slotDefault" :key="index">
        <component :is="item" />
      </template>
      <SubMenu is-sub-menu-more path="sub-menu-more">
        <template #title>
          <Ellipsis class="size-4" />
        </template>
-        <template v-for="item in getSlot.slotMore" :key="item.key">
+        <template v-for="(item, index) in getSlot.slotMore" :key="index">
          <component :is="item" />
        </template>
      </SubMenu>
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -54,7 +54,7 @@ const components = globalShareState.getComponents();
 const id = useId();
 provide('DISMISSABLE_DRAWER_ID', id);

-const wrapperRef = ref<HTMLElement>();
+// const wrapperRef = ref<HTMLElement>();
 const { $t } = useSimpleLocale();
 const { isMobile } = useIsMobile();

@@ -281,7 +281,6 @@ const getForceMount = computed(() => {
        </VisuallyHidden>
      </template>
      <div
-        ref="wrapperRef"
        :class="
          cn('relative flex-1 overflow-y-auto p-3', contentClass, {
            'pointer-events-none': showLoading || submitting,
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -50,10 +50,10 @@ const props = withDefaults(defineProps<Props>(), {
 const components = globalShareState.getComponents();

 const contentRef = ref();
-const wrapperRef = ref<HTMLElement>();
+// const wrapperRef = ref<HTMLElement>();
 const dialogRef = ref();
 const headerRef = ref();
-const footerRef = ref();
+// const footerRef = ref();

 const id = useId();

@@ -306,7 +306,6 @@ function handleClosed() {
        </VisuallyHidden>
      </DialogHeader>
      <div
-        ref="wrapperRef"
        :class="
          cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
            'pointer-events-none': showLoading || submitting,
@@ -327,7 +326,6 @@ function handleClosed() {

      <DialogFooter
        v-if="showFooter"
-        ref="footerRef"
        :class="
          cn(
            'flex-row items-center justify-end p-2',
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -41,6 +41,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
            // 不能用 Object.assign,会丢失 api 的原型函数
            Object.setPrototypeOf(extendedApi, api);
          },
+          consumed: false,
          options,
          async reCreateModal() {
            isModalReady.value = false;
@@ -73,7 +74,13 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
    return [Modal, extendedApi as ExtendedModalApi] as const;
  }

-  const injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
+  let injectData = inject<any>(USER_MODAL_INJECT_KEY, {});
+  // 这个数据已经被使用了，说明这个弹窗是嵌套的弹窗，不应该merge上层的配置
+  if (injectData.consumed) {
+    injectData = {};
+  } else {
+    injectData.consumed = true;
+  }

  const mergedOptions = {
    ...DEFAULT_MODAL_PROPS,
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -27,8 +27,10 @@ export type CustomRenderType = (() => Component | string) | string;

 export type ValueType = boolean | number | string;

-export interface VbenButtonGroupProps
-  extends Pick<VbenButtonProps, 'disabled'> {
+export interface VbenButtonGroupProps extends Pick<
+  VbenButtonProps,
+  'disabled'
+> {
  /** 单选模式下允许清除选中 */
  allowClear?: boolean;
  /** 值改变前的回调 */
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -73,6 +73,7 @@ function handleClick(menu: IContextMenuItem) {
    >
      <template v-for="menu in menusView" :key="menu.key">
        <ContextMenuItem
+          v-if="!menu.hidden"
          :class="itemClass"
          :disabled="menu.disabled"
          :inset="menu.inset || !menu.icon"
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/interface.ts
@@ -10,6 +10,10 @@ interface IContextMenuItem {
   * @param data
   */
  handler?: (data: any) => void;
+  /**
+   * @zh_CN 是否隐藏
+   */
+  hidden?: boolean;
  /**
   * @zh_CN 图标
   */
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -27,7 +27,7 @@ function handleItemClick(value: string) {
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuGroup>
-        <template v-for="menu in menus" :key="menu.key">
+        <template v-for="menu in menus" :key="menu.value">
          <DropdownMenuItem
            :class="
              menu.value === modelValue
--- a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
@@ -32,19 +32,19 @@ const props = withDefaults(defineProps<Props>(), {
 // const startTime = ref(0);
 const showSpinner = ref(false);
 const renderSpinner = ref(false);
-const timer = ref<ReturnType<typeof setTimeout>>();
+let timer: ReturnType<typeof setTimeout> | undefined;

 watch(
  () => props.spinning,
  (show) => {
    if (!show) {
      showSpinner.value = false;
-      clearTimeout(timer.value);
+      timer && clearTimeout(timer);
      return;
    }

    // startTime.value = performance.now();
-    timer.value = setTimeout(() => {
+    timer = setTimeout(() => {
      // const loadingTime = performance.now() - startTime.value;

      showSpinner.value = true;
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -3,7 +3,7 @@ import type { TabDefinition } from '@vben-core/typings';

 import type { TabConfig, TabsProps } from '../../types';

-import { computed, ref } from 'vue';
+import { computed } from 'vue';

 import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
@@ -28,8 +28,8 @@ const emit = defineEmits<{
 }>();
 const active = defineModel<string>('active');

-const contentRef = ref();
-const tabRef = ref();
+// const contentRef = ref();
+// const tabRef = ref();

 const style = computed(() => {
  const { gap } = props;
@@ -73,7 +73,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {

 <template>
  <div
-    ref="contentRef"
    :class="contentClass"
    :style="style"
    class="tabs-chrome !flex h-full w-max overflow-y-hidden pr-6"
@@ -82,7 +81,6 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
      <div
        v-for="(tab, i) in tabsView"
        :key="tab.key"
-        ref="tabRef"
        :class="[
          {
            'is-active': tab.key === active,
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
@@ -29,7 +29,7 @@ const forward = useForwardPropsEmits(props, emit);
 const {
  handleScrollAt,
  handleWheel,
-  scrollbarRef,
+  scrollbarRef: _scrollbarRef,
  scrollDirection,
  scrollIsAtLeft,
  scrollIsAtRight,
@@ -69,7 +69,7 @@ useTabsDrag(props, emit);
      class="size-full flex-1 overflow-hidden"
    >
      <VbenScrollbar
-        ref="scrollbarRef"
+        ref="_scrollbarRef"
        :shadow-bottom="false"
        :shadow-top="false"
        class="h-full"