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

apps/web-antd/package.json

@@ -42,7 +42,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
-    "ant-design-vue": "^4.2.3",
+    "ant-design-vue": "^4.2.4",
     "cropperjs": "^1.6.2",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.13",
@@ -52,7 +52,7 @@
     "pinia": "2.2.2",
     "tinymce": "^7.3.0",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",

apps/web-ele/package.json

@@ -42,10 +42,10 @@
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "dayjs": "^1.11.13",
-    "element-plus": "^2.8.2",
+    "element-plus": "^2.8.3",
     "pinia": "2.2.2",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "unplugin-element-plus": "^0.8.0"

apps/web-naive/package.json

@@ -44,6 +44,6 @@
     "naive-ui": "^2.39.0",
     "pinia": "2.2.2",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

cspell.json

@@ -51,7 +51,13 @@
     "vitepress",
     "vnode",
     "vueuse",
-    "yxxx"
+    "yxxx",
+    "echarts",
+    "sortablejs",
+    "etag",
+    "naiveui",
+    "uicons",
+    "iconoir"
   ],
   "ignorePaths": [
     "**/node_modules/**",

internal/lint-configs/commitlint-config/package.json

@@ -23,8 +23,8 @@
     }
   },
   "dependencies": {
-    "@commitlint/cli": "^19.4.1",
+    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.4.1",
+    "@commitlint/config-conventional": "^19.5.0",
     "@vben/node-utils": "workspace:*",
     "commitlint-plugin-function-rules": "^4.0.0",
     "cz-git": "^1.9.4",

internal/lint-configs/eslint-config/package.json

@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "eslint-config-turbo": "^2.1.1",
+    "eslint-config-turbo": "^2.1.2",
-    "eslint-plugin-command": "^0.2.4",
+    "eslint-plugin-command": "^0.2.5",
     "eslint-plugin-import-x": "^4.2.1"
   },
   "devDependencies": {
@@ -39,7 +39,7 @@
     "eslint": "^9.10.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-jsdoc": "^50.2.2",
+    "eslint-plugin-jsdoc": "^50.2.3",
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-n": "^17.10.2",
     "eslint-plugin-no-only-tests": "^3.3.0",
@@ -47,7 +47,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-regexp": "^2.6.0",
     "eslint-plugin-unicorn": "^55.0.0",
-    "eslint-plugin-unused-imports": "^4.1.3",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^9.28.0",
     "globals": "^15.9.0",

internal/tailwind-config/package.json

@@ -46,7 +46,7 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.246",
+    "@iconify/json": "^2.2.247",
     "@iconify/tailwind": "^1.1.3",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.15",

internal/tsconfig/package.json

@@ -20,6 +20,6 @@
   ],
   "dependencies": {
     "@vben/types": "workspace:*",
-    "vite": "^5.4.3"
+    "vite": "^5.4.5"
   }
 }

internal/vite-config/package.json

@@ -27,7 +27,7 @@
     }
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@intlify/unplugin-vue-i18n": "^5.0.0",
     "@jspm/generator": "^2.3.0",
     "archiver": "^7.0.1",
     "cheerio": "1.0.0",
@@ -37,7 +37,7 @@
     "resolve.exports": "^2.0.2",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-pwa": "^0.20.5",
-    "vite-plugin-vue-devtools": "^7.4.4"
+    "vite-plugin-vue-devtools": "^7.4.5"
   },
   "devDependencies": {
     "@types/archiver": "^6.0.2",
@@ -50,7 +50,7 @@
     "rollup": "^4.21.3",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.78.0",
-    "vite": "^5.4.3",
+    "vite": "^5.4.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "4.2.1",
     "vite-plugin-html": "^3.2.2"

package.json

@@ -86,10 +86,10 @@
     "lint-staged": "^15.2.10",
     "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.11",
-    "turbo": "^2.1.1",
+    "turbo": "^2.1.2",
     "typescript": "^5.6.2",
     "unbuild": "^2.0.0",
-    "vite": "^5.4.3",
+    "vite": "^5.4.5",
     "vitest": "^2.1.0",
     "vue": "^3.5.4",
     "vue-tsc": "^2.1.6"

packages/@core/base/design/src/css/global.css

@@ -37,10 +37,10 @@
   }
 
   body {
-    @apply !pointer-events-auto;
-
     min-height: 100vh;
 
+    /* pointer-events: auto !important; */
+
     /* overflow: overlay; */
 
     /* -webkit-font-smoothing: antialiased; */

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

@@ -50,3 +50,22 @@ export function getElementVisibleRect(
     width: Math.max(0, right - left),
   };
 }
+
+export function getScrollbarWidth() {
+  const scrollDiv = document.createElement('div');
+
+  scrollDiv.style.visibility = 'hidden';
+  scrollDiv.style.overflow = 'scroll';
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.top = '-9999px';
+
+  document.body.append(scrollDiv);
+
+  const innerDiv = document.createElement('div');
+  scrollDiv.append(innerDiv);
+
+  const scrollbarWidth = scrollDiv.offsetWidth - innerDiv.offsetWidth;
+
+  scrollDiv.remove();
+  return scrollbarWidth;
+}

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

@@ -39,6 +39,6 @@
   },
   "dependencies": {
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

packages/@core/composables/src/index.ts

@@ -2,6 +2,7 @@ export * from './use-content-style';
 export * from './use-is-mobile';
 export * from './use-namespace';
 export * from './use-priority-value';
+export * from './use-scroll-lock';
 export * from './use-simple-locale';
 export * from './use-sortable';
 export {

packages/@core/composables/src/use-scroll-lock.ts

@@ -0,0 +1,48 @@
+import { getScrollbarWidth } from '@vben-core/shared/utils';
+
+import {
+  useScrollLock as _useScrollLock,
+  tryOnBeforeMount,
+  tryOnBeforeUnmount,
+} from '@vueuse/core';
+
+export const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
+
+export function useScrollLock() {
+  const isLocked = _useScrollLock(document.body);
+  const scrollbarWidth = getScrollbarWidth();
+
+  tryOnBeforeMount(() => {
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+
+    const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
+      `.${SCROLL_FIXED_CLASS}`,
+    );
+    const nodes = [...layoutFixedNodes];
+    if (nodes.length > 0) {
+      nodes.forEach((node) => {
+        node.dataset.transition = node.style.transition;
+        node.style.transition = 'none';
+        node.style.paddingRight = `${scrollbarWidth}px`;
+      });
+    }
+    isLocked.value = true;
+  });
+
+  tryOnBeforeUnmount(() => {
+    isLocked.value = false;
+    const layoutFixedNodes = document.querySelectorAll<HTMLElement>(
+      `.${SCROLL_FIXED_CLASS}`,
+    );
+    const nodes = [...layoutFixedNodes];
+    if (nodes.length > 0) {
+      nodes.forEach((node) => {
+        node.style.paddingRight = '';
+        requestAnimationFrame(() => {
+          node.style.transition = node.dataset.transition || '';
+        });
+      });
+    }
+    document.body.style.paddingRight = '';
+  });
+}

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

@@ -4,6 +4,7 @@ import type { VbenLayoutProps } from './vben-layout';
 import type { CSSProperties } from 'vue';
 import { computed, ref, watch } from 'vue';
 
+import { SCROLL_FIXED_CLASS } from '@vben-core/composables';
 import { Menu } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 
@@ -478,9 +479,12 @@ function handleHeaderToggle() {
       class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
     >
       <div
-        :class="{
+        :class="[
-          'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+          {
-        }"
+            'shadow-[0_16px_24px_hsl(var(--background))]': scrollY > 20,
+          },
+          SCROLL_FIXED_CLASS,
+        ]"
         :style="headerWrapperStyle"
         class="overflow-hidden transition-all duration-200"
       >

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

@@ -39,6 +39,7 @@ export class DrawerApi {
       isOpen: false,
       loading: false,
       modal: true,
+      openAutoFocus: false,
       showCancelButton: true,
       showConfirmButton: true,
       title: '',

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

@@ -52,6 +52,10 @@ export interface DrawerProps {
    * @default true
    */
   modal?: boolean;
+  /**
+   * 是否自动聚焦
+   */
+  openAutoFocus?: boolean;
   /**
    * 是否显示取消按钮
    * @default true

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

@@ -51,6 +51,7 @@ const {
   footer: showFooter,
   loading: showLoading,
   modal,
+  openAutoFocus,
   showCancelButton,
   showConfirmButton,
   title,
@@ -87,10 +88,21 @@ function pointerDownOutside(e: Event) {
     e.preventDefault();
   }
 }
+
+function handerOpenAutoFocus(e: Event) {
+  if (!openAutoFocus.value) {
+    e?.preventDefault();
+  }
+}
+
+function handleFocusOutside(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
 </script>
 <template>
   <Sheet
-    :modal="modal"
+    :modal="false"
     :open="state?.isOpen"
     @update:open="() => drawerApi?.close()"
   >
@@ -100,8 +112,13 @@ function pointerDownOutside(e: Event) {
           '!w-full': isMobile,
         })
       "
+      :modal="modal"
+      :open="state?.isOpen"
+      @close-auto-focus="handleFocusOutside"
       @escape-key-down="escapeKeyDown"
+      @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
+      @open-auto-focus="handerOpenAutoFocus"
       @pointer-down-outside="pointerDownOutside"
     >
       <SheetHeader

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

@@ -95,7 +95,7 @@ async function checkProps(api: ExtendedDrawerApi, attrs: Record<string, any>) {
   const stateKeys = new Set(Object.keys(state));
 
   for (const attr of Object.keys(attrs)) {
-    if (stateKeys.has(attr)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
       // connectedComponent存在时，不要传入Drawer的props，会造成复杂度提升，如果你需要修改Drawer的props，请使用 useVbenDrawer 或者api
       console.warn(
         `[Vben Drawer]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Drawer, please use useVbenDrawer or api.`,

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

@@ -123,6 +123,7 @@ function handleFullscreen() {
 function interactOutside(e: Event) {
   if (!closeOnClickModal.value) {
     e.preventDefault();
+    e.stopPropagation();
   }
 }
 function escapeKeyDown(e: KeyboardEvent) {
@@ -143,12 +144,18 @@ function pointerDownOutside(e: Event) {
   const isDismissableModal = !!target?.dataset.dismissableModal;
   if (!closeOnClickModal.value || !isDismissableModal) {
     e.preventDefault();
+    e.stopPropagation();
   }
 }
+
+function handleFocusOutside(e: Event) {
+  e.preventDefault();
+  e.stopPropagation();
+}
 </script>
 <template>
   <Dialog
-    :modal="modal"
+    :modal="false"
     :open="state?.isOpen"
     @update:open="() => modalApi?.close()"
   >
@@ -166,9 +173,13 @@ function pointerDownOutside(e: Event) {
           },
         )
       "
+      :modal="modal"
+      :open="state?.isOpen"
       :show-close="closable"
       close-class="top-3"
+      @close-auto-focus="handleFocusOutside"
       @escape-key-down="escapeKeyDown"
+      @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
       @open-auto-focus="handerOpenAutoFocus"
       @pointer-down-outside="pointerDownOutside"

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

@@ -107,7 +107,7 @@ async function checkProps(api: ExtendedModalApi, attrs: Record<string, any>) {
   const stateKeys = new Set(Object.keys(state));
 
   for (const attr of Object.keys(attrs)) {
-    if (stateKeys.has(attr)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
       // connectedComponent存在时，不要传入Modal的props，会造成复杂度提升，如果你需要修改Modal的props，请使用 useModal 或者api
       console.warn(
         `[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useVbenModal or api.`,

packages/@core/ui-kit/shadcn-ui/build.config.ts

@@ -7,6 +7,7 @@ export default defineBuildConfig({
     {
       builder: 'mkdist',
       input: './src',
+
       pattern: ['**/*'],
     },
     {

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

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@radix-icons/vue": "^1.0.0",
+    "@vben-core/composables": "workspace:*",
     "@vben-core/icons": "workspace:*",
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",

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

@@ -9,16 +9,19 @@ import {
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
-  DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
+import DialogOverlay from './DialogOverlay.vue';
+
 const props = withDefaults(
   defineProps<
     {
       class?: any;
       closeClass?: any;
+      modal?: boolean;
+      open?: boolean;
       showClose?: boolean;
     } & DialogContentProps
   >(),
@@ -27,7 +30,13 @@ const props = withDefaults(
 const emits = defineEmits<{ close: [] } & DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, showClose: __, ...delegated } = props;
+  const {
+    class: _,
+    modal: _modal,
+    open: _open,
+    showClose: __,
+    ...delegated
+  } = props;
 
   return delegated;
 });
@@ -43,11 +52,7 @@ defineExpose({
 
 <template>
   <DialogPortal>
-    <DialogOverlay
+    <DialogOverlay v-if="open && modal" @click="() => emits('close')" />
-      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]"
-      data-dismissable-modal="true"
-      @click="() => emits('close')"
-    />
     <DialogContent
       ref="contentRef"
       v-bind="forwarded"

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+</script>
+<template>
+  <div
+    class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-overlay fixed inset-0 z-[1000]"
+    data-dismissable-modal="true"
+  ></div>
+</template>

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

@@ -7,15 +7,17 @@ import {
   DialogContent,
   type DialogContentEmits,
   type DialogContentProps,
-  DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue';
 
 import { type SheetVariants, sheetVariants } from './sheet';
+import SheetOverlay from './SheetOverlay.vue';
 
 interface SheetContentProps extends DialogContentProps {
   class?: any;
+  modal?: boolean;
+  open?: boolean;
   side?: SheetVariants['side'];
 }
 
@@ -28,7 +30,13 @@ const props = defineProps<SheetContentProps>();
 const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, side: _side, ...delegated } = props;
+  const {
+    class: _,
+    modal: _modal,
+    open: _open,
+    side: _side,
+    ...delegated
+  } = props;
 
   return delegated;
 });
@@ -38,10 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
   <DialogPortal>
-    <DialogOverlay
+    <SheetOverlay v-if="open && modal" />
-      class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
-      data-dismissable-modal="true"
-    />
     <DialogContent
       :class="cn(sheetVariants({ side }), 'z-[1000]', props.class)"
       v-bind="{ ...forwarded, ...$attrs }"

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+
+useScrollLock();
+</script>
+<template>
+  <div
+    class="bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[1000]"
+    data-dismissable-modal="true"
+  ></div>
+</template>

packages/effects/common-ui/package.json

@@ -41,7 +41,7 @@
     "vue": "^3.5.4",
     "vue-codemirror6": "^1.3.4",
     "vue-json-pretty": "^2.4.0",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/qrcode": "^1.5.5"

packages/effects/hooks/package.json

@@ -26,7 +26,7 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4",
+    "vue-router": "^4.4.5",
     "watermark-js-plus": "^1.5.6"
   }
 }

packages/effects/layouts/package.json

@@ -37,6 +37,6 @@
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -22,7 +22,7 @@ defineProps<{ showIcon?: boolean; theme?: string }>();
 
 const route = useRoute();
 const tabbarStore = useTabbarStore();
-const { toggleMaximize } = useContentMaximize();
+const { contentIsMaximize, toggleMaximize } = useContentMaximize();
 const { refreshTab, unpinTab } = useTabs();
 
 const {
@@ -73,7 +73,7 @@ if (!preferences.tabbar.persist) {
     <TabsToolMore v-if="preferences.tabbar.showMore" :menus="menus" />
     <TabsToolScreen
       v-if="preferences.tabbar.showMaximize"
-      :screen="preferences.sidebar.hidden"
+      :screen="contentIsMaximize"
       @change="toggleMaximize"
       @update:screen="toggleMaximize"
     />

packages/locales/package.json

@@ -20,9 +20,9 @@
     }
   },
   "dependencies": {
-    "@intlify/core-base": "^9.14.0",
+    "@intlify/core-base": "^10.0.1",
     "@vben-core/composables": "workspace:*",
     "vue": "^3.5.4",
-    "vue-i18n": "^9.14.0"
+    "vue-i18n": "^10.0.1"
   }
 }

packages/stores/package.json

@@ -23,8 +23,8 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "pinia": "2.2.2",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "pinia-plugin-persistedstate": "^4.0.1",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

packages/stores/src/modules/access.ts

@@ -65,7 +65,7 @@ export const useAccessStore = defineStore('core-access', {
   },
   persist: {
     // 持久化
-    paths: ['accessToken', 'refreshToken', 'accessCodes'],
+    pick: ['accessToken', 'refreshToken', 'accessCodes'],
   },
   state: (): AccessState => ({
     accessCodes: [],

packages/stores/src/modules/lock.ts

@@ -24,7 +24,7 @@ export const useLockStore = defineStore('core-lock', {
     },
   },
   persist: {
-    paths: ['isLockScreen', 'lockScreenPassword'],
+    pick: ['isLockScreen', 'lockScreenPassword'],
   },
   state: (): AppState => ({
     isLockScreen: false,

packages/stores/src/modules/tabbar.ts

@@ -465,7 +465,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
   persist: [
     // tabs不需要保存在localStorage
     {
-      paths: ['tabs'],
+      pick: ['tabs'],
       storage: sessionStorage,
     },
   ],

packages/types/package.json

@@ -22,6 +22,6 @@
   "dependencies": {
     "@vben-core/typings": "workspace:*",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

packages/utils/package.json

@@ -24,6 +24,6 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

playground/package.json

@@ -42,10 +42,10 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "^11.0.3",
-    "ant-design-vue": "^4.2.3",
+    "ant-design-vue": "^4.2.4",
     "dayjs": "^1.11.13",
     "pinia": "2.2.2",
     "vue": "^3.5.4",
-    "vue-router": "^4.4.4"
+    "vue-router": "^4.4.5"
   }
 }

playground/src/router/routes/modules/demos.ts

@@ -110,6 +110,7 @@ const routes: RouteRecordRaw[] = [
             path: '/demos/features/icons',
             component: () => import('#/views/demos/features/icons/index.vue'),
             meta: {
+              icon: 'lucide:annoyed',
               title: $t('page.demos.features.icons'),
             },
           },
@@ -119,6 +120,7 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import('#/views/demos/features/watermark/index.vue'),
             meta: {
+              icon: 'lucide:tags',
               title: $t('page.demos.features.watermark'),
             },
           },
@@ -171,6 +173,7 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import('#/views/demos/features/full-screen/index.vue'),
             meta: {
+              icon: 'lucide:fullscreen',
               title: $t('page.demos.features.fullScreen.title'),
             },
           },
@@ -180,6 +183,7 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import('#/views/demos/features/clipboard/index.vue'),
             meta: {
+              icon: 'lucide:copy',
               title: $t('page.demos.features.clipboard'),
             },
           },
@@ -189,6 +193,7 @@ const routes: RouteRecordRaw[] = [
             component: () =>
               import('#/views/demos/features/vue-query/index.vue'),
             meta: {
+              icon: 'lucide:git-pull-request-arrow',
               title: 'Tanstack Query',
             },
           },

scripts/turbo-run/src/run.ts

@@ -23,30 +23,32 @@ export async function run(options: RunOptions) {
     return (pkg?.packageJson as Record<string, any>)?.scripts?.[command];
   });
 
-  const selectPkg = await select<any, string>({
+  let selectPkg: string | symbol;
-    message: `Select the app you need to run [${command}]:`,
+  if (selectPkgs.length > 1) {
-    options: selectPkgs.map((item) => ({
+    selectPkg = await select<any, string>({
-      label: item?.packageJson.name,
+      message: `Select the app you need to run [${command}]:`,
-      value: item?.packageJson.name,
+      options: selectPkgs.map((item) => ({
-    })),
+        label: item?.packageJson.name,
-  });
+        value: item?.packageJson.name,
+      })),
+    });
 
-  if (isCancel(selectPkg) || !selectPkg) {
+    if (isCancel(selectPkg) || !selectPkg) {
-    cancel('👋 Has cancelled');
+      cancel('👋 Has cancelled');
-    process.exit(0);
+      process.exit(0);
+    }
+  } else {
+    selectPkg = selectPkgs[0]?.packageJson?.name ?? '';
+  }
+
+  if (!selectPkg) {
+    console.error('No app found');
+    process.exit(1);
   }
 
   execaCommand(`pnpm --filter=${selectPkg} run ${command}`, {
     stdio: 'inherit',
   });
-  // const filters = [];
-  // for (const app of selectApps) {
-  //   filters.push(`--filter=${app}`);
-  // }
-  // $.verbose = true;
-  // execaCommand(`turbo run ${command} ${filters}`, {
-  //   stdio: 'inherit',
-  // });
 }
 
 /**