chore: update vite 8

2026-03-13 15:51:28 +08:00
parent 0e4bf80bf4
commit 443e4b04cd
12 changed files with 867 additions and 257 deletions
--- a/packages/@core/base/typings/src/basic.d.ts
+++ b/packages/@core/base/typings/src/basic.d.ts
@@ -30,6 +30,12 @@ interface BasicUserInfo {
  username: string;
 }

-type ClassType = Array<object | string> | object | string;
+type ClassType =
+  | Array<ClassType>
+  | boolean
+  | null
+  | object
+  | string
+  | undefined;

 export type { BasicOption, BasicUserInfo, ClassType, SelectOption, TabOption };
--- a/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
@@ -57,12 +57,10 @@ function menuIcon(menu: MenuRecordRaw) {
    </template>
  </ul>
 </template>
-<style lang="scss" scoped>
-$namespace: vben;
-
+<style scoped>
@reference "@vben-core/design/theme";

-.#{$namespace}-normal-menu {
+.vben-normal-menu {
  --menu-item-margin-y: 4px;
  --menu-item-margin-x: 0px;
  --menu-item-padding-y: 9px;
@@ -70,96 +68,93 @@ $namespace: vben;
  --menu-item-radius: 0px;

  height: calc(100% - 4px);
+}

-  &.is-rounded {
-    --menu-item-radius: 6px;
-    --menu-item-margin-x: 8px;
-  }
+.vben-normal-menu.is-rounded {
+  --menu-item-radius: 6px;
+  --menu-item-margin-x: 8px;
+}

-  &.is-dark {
-    .#{$namespace}-normal-menu__item {
-      @apply text-foreground/80;
-      // color: hsl(var(--foreground) / 80%);
+.vben-normal-menu.is-dark .vben-normal-menu__item {
+  @apply text-foreground/80;
+}

-      &:not(.is-active):hover {
-        @apply text-foreground;
-      }
+.vben-normal-menu.is-dark .vben-normal-menu__item:not(.is-active):hover {
+  @apply text-foreground;
+}

-      &.is-active {
-        .#{$namespace}-normal-menu__name,
-        .#{$namespace}-normal-menu__icon {
-          @apply text-foreground;
-        }
-      }
-    }
-  }
+.vben-normal-menu.is-dark
+  .vben-normal-menu__item.is-active
+  .vben-normal-menu__name,
+.vben-normal-menu.is-dark
+  .vben-normal-menu__item.is-active
+  .vben-normal-menu__icon {
+  @apply text-foreground;
+}

-  &.is-collapse {
-    .#{$namespace}-normal-menu__name {
-      width: 0;
-      height: 0;
-      margin-top: 0;
-      overflow: hidden;
-      opacity: 0;
-    }
+.vben-normal-menu.is-collapse .vben-normal-menu__name {
+  width: 0;
+  height: 0;
+  margin-top: 0;
+  overflow: hidden;
+  opacity: 0;
+}

-    .#{$namespace}-normal-menu__icon {
-      font-size: calc(var(--font-size-base, 16px) * 1.25);
-    }
-  }
+.vben-normal-menu.is-collapse .vben-normal-menu__icon {
+  font-size: calc(var(--font-size-base, 16px) * 1.25);
+}

-  &__item {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    // max-width: 64px;
-    // max-height: 64px;
-    padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
-    margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
-    color: hsl(var(--foreground) / 90%);
-    cursor: pointer;
-    border-radius: var(--menu-item-radius);
-    transition:
-      background 0.15s ease,
-      padding 0.15s ease,
-      border-color 0.15s ease;
+.vben-normal-menu__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;

-    &.is-active {
-      @apply bg-primary text-primary dark:bg-accent;
+  /* max-width: 64px; */

-      .#{$namespace}-normal-menu__name,
-      .#{$namespace}-normal-menu__icon {
-        @apply text-primary-foreground font-semibold;
-      }
-    }
+  /* max-height: 64px; */
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
+  color: hsl(var(--foreground) / 90%);
+  cursor: pointer;
+  border-radius: var(--menu-item-radius);
+  transition:
+    background 0.15s ease,
+    padding 0.15s ease,
+    border-color 0.15s ease;
+}

-    &:not(.is-active):hover {
-      @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
-    }
+.vben-normal-menu__item.is-active {
+  @apply bg-primary text-primary dark:bg-accent;
+}

-    &:hover {
-      .#{$namespace}-normal-menu__icon {
-        transform: scale(1.2);
-      }
-    }
-  }
+.vben-normal-menu__item.is-active .vben-normal-menu__name,
+.vben-normal-menu__item.is-active .vben-normal-menu__icon {
+  @apply text-primary-foreground font-semibold;
+}

-  &__icon {
-    max-height: 20px;
-    font-size: calc(var(--font-size-base, 16px) * 1.25);
-    transition: all 0.25s ease;
-  }
+.vben-normal-menu__item:not(.is-active):hover {
+  @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
+}

-  &__name {
-    width: 100%;
-    margin-top: 8px;
-    margin-bottom: 0;
-    font-size: calc(var(--font-size-base, 16px) * 0.75);
-    font-weight: 400;
-    text-align: center;
-    transition: all 0.25s ease;
-  }
+.vben-normal-menu__item:hover .vben-normal-menu__icon {
+  transform: scale(1.2);
+}
+
+.vben-normal-menu__icon {
+  max-height: 20px;
+  font-size: calc(var(--font-size-base, 16px) * 1.25);
+  transition: all 0.25s ease;
+}
+
+.vben-normal-menu__name {
+  width: 100%;
+  margin-top: 8px;
+  margin-bottom: 0;
+  font-size: calc(var(--font-size-base, 16px) * 0.75);
+  font-weight: 400;
+  text-align: center;
+  transition: all 0.25s ease;
 }
 </style>
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -1,6 +1,6 @@
 import type { Component, Ref } from 'vue';

-import type { MaybePromise } from '@vben-core/typings';
+import type { ClassType, MaybePromise } from '@vben-core/typings';

 import type { ModalApi } from './modal-api';

@@ -30,7 +30,7 @@ export interface ModalProps {
   */
  centered?: boolean;

-  class?: string;
+  class?: ClassType;

  /**
   * 是否显示右上角的关闭按钮
@@ -60,7 +60,7 @@ export interface ModalProps {
   * 确定按钮文字
   */
  confirmText?: string;
-  contentClass?: string;
+  contentClass?: ClassType;
  /**
   * 弹窗描述
   */
@@ -79,7 +79,7 @@ export interface ModalProps {
   * @default true
   */
  footer?: boolean;
-  footerClass?: string;
+  footerClass?: ClassType;
  /**
   * 是否全屏
   * @default false
@@ -95,7 +95,7 @@ export interface ModalProps {
   * @default true
   */
  header?: boolean;
-  headerClass?: string;
+  headerClass?: ClassType;
  /**
   * 弹窗是否显示
   * @default false
--- 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
@@ -175,39 +175,38 @@ function onMouseDown(e: MouseEvent, tab: TabConfig) {
 <style scoped>
@reference "@vben-core/design/theme";

-.tabs-chrome {
-  &__item:not(.dragging) {
-    @apply cursor-pointer;
+.tabs-chrome__item:not(.dragging) {
+  @apply cursor-pointer;
+}

-    &:hover:not(.is-active) {
-      & + .tabs-chrome__item {
-        .tabs-chrome__divider {
-          @apply opacity-0;
-        }
-      }
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  + .tabs-chrome__item
+  .tabs-chrome__divider {
+  @apply opacity-0;
+}

-      .tabs-chrome__divider {
-        @apply opacity-0;
-      }
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__divider {
+  @apply opacity-0;
+}

-      .tabs-chrome__background {
-        @apply pb-[2px];
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__background {
+  @apply pb-[2px];
+}

-        &-content {
-          @apply bg-accent mx-[2px] rounded-md;
-        }
-      }
-    }
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__background-content {
+  @apply bg-accent mx-[2px] rounded-md;
+}

-    &.is-active {
-      @apply z-[2];
+.tabs-chrome__item:not(.dragging).is-active {
+  @apply z-[2];
+}

-      & + .tabs-chrome__item {
-        .tabs-chrome__divider {
-          @apply !opacity-0;
-        }
-      }
-    }
-  }
+.tabs-chrome__item:not(.dragging).is-active
+  + .tabs-chrome__item
+  .tabs-chrome__divider {
+  @apply !opacity-0;
 }
 </style>
--- a/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
+++ b/packages/effects/common-ui/src/components/captcha/slider-captcha/index.vue
@@ -51,8 +51,10 @@ defineExpose({

 const wrapperRef = useTemplateRef<HTMLDivElement>('wrapperRef');
 const barRef = useTemplateRef<InstanceType<typeof SliderCaptchaBar>>('barRef');
-const contentRef = useTemplateRef<InstanceType<typeof SliderCaptchaContent>>('contentRef');
-const actionRef = useTemplateRef<InstanceType<typeof SliderCaptchaAction>>('actionRef');
+const contentRef =
+  useTemplateRef<InstanceType<typeof SliderCaptchaContent>>('contentRef');
+const actionRef =
+  useTemplateRef<InstanceType<typeof SliderCaptchaAction>>('actionRef');

 watch(
  () => state.isPassing,
@@ -83,20 +85,19 @@ function handleDragStart(e: MouseEvent | TouchEvent) {
  if (state.isPassing) {
    return;
  }
-  if (!actionRef.value) return;
+  const actionEl = actionRef.value;
+  const actionStyle = actionEl?.getStyle();
+  if (!actionEl || !actionStyle) return;
  emit('start', e);

  state.moveDistance =
    getEventPageX(e) -
-    Number.parseInt(
-      actionRef.value.getStyle().left.replace('px', '') || '0',
-      10,
-    );
+    Number.parseInt(actionStyle.left.replace('px', '') || '0', 10);
  state.startTime = Date.now();
  state.isMoving = true;
 }

-function getOffset(actionEl: HTMLDivElement) {
+function getOffset(actionEl?: HTMLDivElement | null) {
  const wrapperWidth = wrapperRef.value?.offsetWidth ?? 220;
  const actionWidth = actionEl?.offsetWidth ?? 40;
  const offset = wrapperWidth - actionWidth - 6;
@@ -109,7 +110,9 @@ function handleDragMoving(e: MouseEvent | TouchEvent) {
    const actionEl = unref(actionRef);
    const barEl = unref(barRef);
    if (!actionEl || !barEl) return;
-    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
+    const actionNode = actionEl.getEl();
+    if (!actionNode) return;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionNode);
    const moveX = getEventPageX(e) - moveDistance;

    emit('move', {
@@ -138,14 +141,18 @@ function handleDragOver(e: MouseEvent | TouchEvent) {
    const barEl = unref(barRef);
    if (!actionEl || !barEl) return;
    const moveX = getEventPageX(e) - moveDistance;
-    const { actionWidth, offset, wrapperWidth } = getOffset(actionEl.getEl());
+    const actionNode = actionEl.getEl();
+    if (!actionNode) return;
+    const { actionWidth, offset, wrapperWidth } = getOffset(actionNode);
    if (moveX < offset) {
      if (props.isSlot) {
        setTimeout(() => {
          if (modelValue.value) {
            const contentEl = unref(contentRef);
-            if (contentEl) {
-              contentEl.getEl().style.width = `${Number.parseInt(barEl.getEl().style.width)}px`;
+            const contentNode = contentEl?.getEl();
+            const barNode = barEl.getEl();
+            if (contentNode && barNode) {
+              contentNode.style.width = `${Number.parseInt(barNode.style.width || '0', 10)}px`;
            }
          } else {
            resume();
@@ -185,7 +192,10 @@ function resume() {
  const contentEl = unref(contentRef);
  if (!actionEl || !barEl || !contentEl) return;

-  contentEl.getEl().style.width = '100%';
+  const contentNode = contentEl.getEl();
+  if (!contentNode) return;
+
+  contentNode.style.width = '100%';
  state.toLeft = true;
  useTimeoutFn(() => {
    state.toLeft = false;
--- a/packages/stores/src/setup.ts
+++ b/packages/stores/src/setup.ts
@@ -7,6 +7,28 @@ import SecureLS from 'secure-ls';

 let pinia: Pinia;

+type SecureLSStorage = {
+  get(key: string): any;
+  set(key: string, value: unknown): void;
+};
+
+type SecureLSCtor = new (config?: {
+  encodingType?: string;
+  encryptionSecret?: string;
+  isCompression?: boolean;
+  metaKey?: string;
+}) => SecureLSStorage;
+
+const secureLSModule = SecureLS as unknown as {
+  SecureLS?: SecureLSCtor;
+  default?: SecureLSCtor;
+};
+
+const SecureLSConstructor =
+  secureLSModule.default ??
+  secureLSModule.SecureLS ??
+  (SecureLS as unknown as SecureLSCtor);
+
 export interface InitStoreOptions {
  /**
   * @zh_CN 应用名,由于 @vben/stores 是公用的，后续可能有多个app，为了防止多个app缓存冲突，可在这里配置应用名,应用名将被用于持久化的前缀
@@ -21,7 +43,7 @@ export async function initStores(app: App, options: InitStoreOptions) {
  const { createPersistedState } = await import('pinia-plugin-persistedstate');
  pinia = createPinia();
  const { namespace } = options;
-  const ls = new SecureLS({
+  const ls = new SecureLSConstructor({
    encodingType: 'aes',
    encryptionSecret: import.meta.env.VITE_APP_STORE_SECURE_KEY,
    isCompression: true,