chore: update vite 8

internal/vite-config/package.json

@@ -51,6 +51,7 @@
     "rollup": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "sass": "catalog:",
+    "sass-embedded": "catalog:",
     "vite": "catalog:",
     "vite-plugin-compression": "catalog:",
     "vite-plugin-dts": "catalog:",

internal/vite-config/src/config/application.ts

@@ -6,7 +6,7 @@ import path, { relative } from 'node:path';
 
 import { findMonorepoRoot } from '@vben/node-utils';
 
-import { NodePackageImporter } from 'sass';
+import { NodePackageImporter } from 'sass-embedded';
 import { defineConfig, loadEnv, mergeConfig } from 'vite';
 
 import { defaultImportmapOptions, getDefaultPwaOptions } from '../options';
@@ -58,25 +58,23 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
     const applicationConfig: UserConfig = {
       base,
       build: {
-        rollupOptions: {
+        rolldownOptions: {
           output: {
             assetFileNames: '[ext]/[name]-[hash].[ext]',
             chunkFileNames: 'js/[name]-[hash].js',
             entryFileNames: 'jse/index-[name]-[hash].js',
+            minify: isBuild
+              ? {
+                  compress: {
+                    dropDebugger: true,
+                  },
+                }
+              : false,
           },
         },
         target: 'es2015',
       },
       css: createCssOptions(injectGlobalScss),
-      esbuild: {
-        drop: isBuild
-          ? [
-              // 'console',
-              'debugger',
-            ]
-          : [],
-        legalComments: 'none',
-      },
       plugins,
       server: {
         host: true,

internal/vite-config/src/config/library.ts

@@ -40,7 +40,7 @@ function defineLibraryConfig(userConfigPromise?: DefineLibraryOptions) {
           fileName: () => 'index.mjs',
           formats: ['es'],
         },
-        rollupOptions: {
+        rolldownOptions: {
           external: (id) => {
             return externalPackages.some(
               (pkg) => id === pkg || id.startsWith(`${pkg}/`),

internal/vite-config/src/plugins/index.ts

@@ -77,11 +77,13 @@ async function loadCommonPlugins(
     },
     {
       condition: isBuild && !!visualizer,
-      plugins: () => [<PluginOption>viteVisualizerPlugin({
+      plugins: () => [
+        viteVisualizerPlugin({
           filename: './node_modules/.cache/visualizer/stats.html',
           gzipSize: true,
           open: true,
-        })],
+        }) as PluginOption,
+      ],
     },
   ];
 }

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

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>
+<style scoped>
-$namespace: vben;
-
 @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,52 +68,52 @@ $namespace: vben;
   --menu-item-radius: 0px;
 
   height: calc(100% - 4px);
+}
 
-  &.is-rounded {
+.vben-normal-menu.is-rounded {
   --menu-item-radius: 6px;
   --menu-item-margin-x: 8px;
-  }
+}
 
-  &.is-dark {
+.vben-normal-menu.is-dark .vben-normal-menu__item {
-    .#{$namespace}-normal-menu__item {
   @apply text-foreground/80;
-      // color: hsl(var(--foreground) / 80%);
+}
 
-      &:not(.is-active):hover {
+.vben-normal-menu.is-dark .vben-normal-menu__item:not(.is-active):hover {
   @apply text-foreground;
-      }
+}
 
-      &.is-active {
+.vben-normal-menu.is-dark
-        .#{$namespace}-normal-menu__name,
+  .vben-normal-menu__item.is-active
-        .#{$namespace}-normal-menu__icon {
+  .vben-normal-menu__name,
+.vben-normal-menu.is-dark
+  .vben-normal-menu__item.is-active
+  .vben-normal-menu__icon {
   @apply text-foreground;
-        }
+}
-      }
-    }
-  }
 
-  &.is-collapse {
+.vben-normal-menu.is-collapse .vben-normal-menu__name {
-    .#{$namespace}-normal-menu__name {
   width: 0;
   height: 0;
   margin-top: 0;
   overflow: hidden;
   opacity: 0;
-    }
+}
 
-    .#{$namespace}-normal-menu__icon {
+.vben-normal-menu.is-collapse .vben-normal-menu__icon {
   font-size: calc(var(--font-size-base, 16px) * 1.25);
-    }
+}
-  }
 
-  &__item {
+.vben-normal-menu__item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-    // max-width: 64px;
+
-    // max-height: 64px;
+  /* 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%);
@@ -125,34 +123,32 @@ $namespace: vben;
     background 0.15s ease,
     padding 0.15s ease,
     border-color 0.15s ease;
+}
 
-    &.is-active {
+.vben-normal-menu__item.is-active {
   @apply bg-primary text-primary dark:bg-accent;
+}
 
-      .#{$namespace}-normal-menu__name,
+.vben-normal-menu__item.is-active .vben-normal-menu__name,
-      .#{$namespace}-normal-menu__icon {
+.vben-normal-menu__item.is-active .vben-normal-menu__icon {
   @apply text-primary-foreground font-semibold;
-      }
+}
-    }
 
-    &:not(.is-active):hover {
+.vben-normal-menu__item:not(.is-active):hover {
   @apply bg-heavy text-primary dark:bg-accent dark:text-foreground;
-    }
+}
 
-    &:hover {
+.vben-normal-menu__item:hover .vben-normal-menu__icon {
-      .#{$namespace}-normal-menu__icon {
   transform: scale(1.2);
-      }
+}
-    }
-  }
 
-  &__icon {
+.vben-normal-menu__icon {
   max-height: 20px;
   font-size: calc(var(--font-size-base, 16px) * 1.25);
   transition: all 0.25s ease;
-  }
+}
 
-  &__name {
+.vben-normal-menu__name {
   width: 100%;
   margin-top: 8px;
   margin-bottom: 0;
@@ -160,6 +156,5 @@ $namespace: vben;
   font-weight: 400;
   text-align: center;
   transition: all 0.25s ease;
-  }
 }
 </style>

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

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 {
+.tabs-chrome__item:not(.dragging) {
-  &__item:not(.dragging) {
   @apply cursor-pointer;
+}
 
-    &:hover:not(.is-active) {
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
-      & + .tabs-chrome__item {
+  + .tabs-chrome__item
   .tabs-chrome__divider {
   @apply opacity-0;
-        }
+}
-      }
 
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
   .tabs-chrome__divider {
   @apply opacity-0;
-      }
+}
 
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
   .tabs-chrome__background {
   @apply pb-[2px];
+}
 
-        &-content {
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__background-content {
   @apply bg-accent mx-[2px] rounded-md;
-        }
+}
-      }
-    }
 
-    &.is-active {
+.tabs-chrome__item:not(.dragging).is-active {
   @apply z-[2];
+}
 
-      & + .tabs-chrome__item {
+.tabs-chrome__item:not(.dragging).is-active
+  + .tabs-chrome__item
   .tabs-chrome__divider {
   @apply !opacity-0;
-        }
-      }
-    }
-  }
 }
 </style>

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 contentRef =
-const actionRef = useTemplateRef<InstanceType<typeof SliderCaptchaAction>>('actionRef');
+  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(
+    Number.parseInt(actionStyle.left.replace('px', '') || '0', 10);
-      actionRef.value.getStyle().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) {
+            const contentNode = contentEl?.getEl();
-              contentEl.getEl().style.width = `${Number.parseInt(barEl.getEl().style.width)}px`;
+            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;

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,

pnpm-workspace.yaml

@@ -42,12 +42,14 @@ catalog:
   '@nolebase/vitepress-plugin-git-changelog': ^2.18.2
   '@playwright/test': ^1.58.2
   '@pnpm/workspace.read-manifest': ^1000.3.0
+  '@shikijs/vitepress-twoslash': ^4.0.2
   '@stylistic/stylelint-plugin': ^5.0.1
   '@tailwindcss/typography': ^0.5.19
   '@tailwindcss/vite': ^4.2.1
   '@tanstack/vue-query': ^5.92.9
   '@tanstack/vue-store': ^0.9.2
   '@types/archiver': ^7.0.0
+  '@types/express': ^5.0.6
   '@types/html-minifier-terser': ^7.0.2
   '@types/json-bigint': ^1.0.4
   '@types/jsonwebtoken': ^9.0.10
@@ -64,6 +66,7 @@ catalog:
   '@vitejs/plugin-vue': ^6.0.5
   '@vitejs/plugin-vue-jsx': ^5.1.5
   '@vitest/eslint-plugin': ^1.6.11
+  '@voidzero-dev/vitepress-theme': ^4.8.3
   '@vue/shared': ^3.5.30
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^14.2.1
@@ -112,6 +115,7 @@ catalog:
   eslint-plugin-vue: ^10.8.0
   eslint-plugin-yml: ^3.3.1
   execa: ^9.6.1
+  feed: ^5.2.0
   find-up: ^8.0.0
   get-port: ^7.1.0
   globals: ^17.4.0
@@ -124,11 +128,13 @@ catalog:
   lefthook: ^2.1.4
   lodash.clonedeep: ^4.5.0
   lucide-vue-next: ^0.577.0
+  markdown-it-image-size: ^15.0.1
   medium-zoom: ^1.1.0
   naive-ui: ^2.44.1
   nitropack: ^2.13.1
   nprogress: ^0.2.0
   ora: ^9.3.0
+  oxc-minify: ^0.115.0
   pinia: ^3.0.4
   pinia-plugin-persistedstate: ^4.7.1
   pkg-types: ^2.3.0
@@ -146,6 +152,7 @@ catalog:
   rollup: ^4.59.0
   rollup-plugin-visualizer: ^7.0.1
   sass: ^1.98.0
+  sass-embedded: ^1.98.0
   secure-ls: ^2.0.0
   sortablejs: ^1.15.7
   stylelint: ^17.4.0
@@ -154,7 +161,7 @@ catalog:
   stylelint-config-recommended-scss: ^17.0.0
   stylelint-config-recommended-vue: ^1.6.1
   stylelint-config-standard: ^40.0.0
-  stylelint-order: ^7.0.1
+  stylelint-order: ^8.0.0
   stylelint-prettier: ^5.0.3
   stylelint-scss: ^7.0.0
   tailwind-merge: ^3.5.0
@@ -168,7 +175,7 @@ catalog:
   unbuild: ^3.6.1
   unplugin-element-plus: ^0.11.2
   vee-validate: ^4.15.1
-  vite: ^7.3.1
+  vite: ^8.0.0
   vite-plugin-compression: ^0.5.1
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
@@ -176,7 +183,9 @@ catalog:
   vite-plugin-pwa: ^1.2.0
   vite-plugin-vue-devtools: ^8.1.0
   vitepress: ^1.6.4
+  vitepress-plugin-graphviz: ^0.0.1
   vitepress-plugin-group-icons: ^1.7.1
+  vitepress-plugin-llms: ^1.11.0
   vitest: ^4.1.0
   vue: ^3.5.30
   vue-eslint-parser: ^10.4.0
@@ -185,9 +194,12 @@ catalog:
   vue-router: ^5.0.3
   vue-tippy: ^6.7.1
   vue-tsc: ^3.2.5
-  vxe-pc-ui: ^4.13.4
+  vxe-pc-ui: ^4.13.5
   vxe-table: ^4.18.2
   watermark-js-plus: ^1.6.3
   yaml-eslint-parser: ^2.0.0
   zod: ^3.25.76
   zod-defaults: 0.1.3
+catalogs:
+  conflicts_vitepress_h2_0_0malpha_16:
+    vitepress: ^2.0.0-alpha.16