fix: 修复执行: check:cspell 命令路径参数传入没有转义导致检测路径失效。添加菜单右键功能。优化:多余监听 activePath 变化，自动滚动到激活项 watch

3 weeks ago · 173e6b08c9
9 changed files with 77 additions and 44 deletions
--- a/package.json
+++ b/package.json
@ -37,7 +37,7 @@
    "changeset": "pnpm exec changeset",
    "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
    "check:circular": "vsh check-circular",
-    "check:cspell": "cspell lint **/*.ts **/README.md .changeset/*.md --no-progress",
+    "check:cspell": "cspell lint \"**/*.ts\" \"**/README.md\" \".changeset/*.md\" --no-progress",
    "check:dep": "vsh check-dep",
    "check:type": "turbo run typecheck",
    "clean": "node ./scripts/clean.mjs",
@ -59,7 +59,7 @@
    "reinstall": "pnpm clean --del-lock && pnpm install",
    "test:unit": "vitest run --dom",
    "test:e2e": "turbo run test:e2e",
-    "update:deps": "npx taze -r -w",
+    "up te:deps": "npx taze -r -w",
    "version": "pnpm exec changeset version && pnpm install --no-frozen-lockfile",
    "catalog": "pnpx codemod pnpm/catalog"
  },
--- a/packages/@core/base/typings/src/menu-record.ts
+++ b/packages/@core/base/typings/src/menu-record.ts
@ -1,6 +1,8 @@
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';

+import type { Recordable } from './helper';
+
 /**
 * 扩展路由原始对象
 */
@ -66,6 +68,10 @@ interface MenuRecordRaw extends MenuRecordBadgeRaw {
   * 菜单路径，唯一，可当作key
   */
  path: string;
+  /**
+   * 菜单参数
+   */
+  query?: Recordable<any>;
  /**
   * 是否显示菜单
   * @default true
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@ -306,13 +306,13 @@ const handleDragSidebar = (e: MouseEvent) => {
    ref="asideRef"
    :style="style"
    class="fixed left-0 top-0 h-full transition-all duration-150"
+    :class="theme"
    @mouseenter="handleMouseenter"
    @mouseleave="handleMouseleave"
  >
    <div
      class="h-full"
      :class="[
-        theme,
        {
          'bg-sidebar-deep': isSidebarMixed,
          'border-r border-border bg-sidebar': !isSidebarMixed,
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@ -43,6 +43,10 @@
    "@vben-core/shared": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "catalog:",
+    "qs": "catalog:",
    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@types/qs": "catalog:"
  }
 }
--- a/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@ -6,6 +6,8 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
 import { useNamespace } from '@vben-core/composables';
 import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';

+import qs from 'qs';
+
 import { MenuBadge } from '../components';
 import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';

@ -54,6 +56,7 @@ const item: MenuItemRegistered = reactive({
  active,
  parentPaths: parentPaths.value,
  path: props.path || '',
+  query: props.query,
 });

 /**
@ -81,42 +84,50 @@ onBeforeUnmount(() => {
 });
 </script>
 <template>
-  <li
-    :class="[
-      rootMenu.theme,
-      b(),
-      is('active', active),
-      is('disabled', disabled),
-      is('collapse-show-title', collapseShowTitle),
-    ]"
-    role="menuitem"
-    @click.stop="handleClick"
+  <a
+    :href="
+      (item.parentPaths.at(-1) ?? '') +
+      (item?.query ? `?${qs.stringify(item?.query)}` : '')
+    "
+    @click.prevent.stop="handleClick"
  >
-    <VbenTooltip
-      v-if="showTooltip"
-      :content-class="[rootMenu.theme]"
-      side="right"
+    <li
+      :class="[
+        rootMenu.theme,
+        b(),
+        is('active', active),
+        is('disabled', disabled),
+        is('collapse-show-title', collapseShowTitle),
+      ]"
+      role="menuitem"
    >
-      <template #trigger>
-        <div :class="[nsMenu.be('tooltip', 'trigger')]">
-          <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
-          <slot></slot>
-          <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
-            <slot name="title"></slot>
-          </span>
-        </div>
-      </template>
-      <slot name="title"></slot>
-    </VbenTooltip>
-    <div v-show="!showTooltip" :class="[e('content')]">
-      <MenuBadge
-        v-if="rootMenu.props.mode !== 'horizontal'"
-        class="right-2"
-        v-bind="props"
-      />
-      <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
-      <slot></slot>
-      <slot name="title"></slot>
-    </div>
-  </li>
+      <!-- -->
+      <VbenTooltip
+        v-if="showTooltip"
+        :content-class="[rootMenu.theme]"
+        side="right"
+      >
+        <template #trigger>
+          <div :class="[nsMenu.be('tooltip', 'trigger')]">
+            <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
+            <slot></slot>
+            <span v-if="collapseShowTitle" :class="nsMenu.e('name')">
+              <slot name="title"></slot>
+            </span>
+          </div>
+        </template>
+        <slot name="title"></slot>
+      </VbenTooltip>
+      <div v-show="!showTooltip" :class="[e('content')]">
+        <MenuBadge
+          v-if="rootMenu.props.mode !== 'horizontal'"
+          class="right-2"
+          v-bind="props"
+        />
+        <VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
+        <slot></slot>
+        <slot name="title"></slot>
+      </div>
+    </li>
+  </a>
 </template>
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@ -212,15 +212,15 @@ const enableScroll = computed(
  () => props.scrollToActive && props.mode === 'vertical' && !props.collapse,
 );

-const { scrollToActiveItem } = useMenuScroll(activePath, {
+useMenuScroll(activePath, {
  enable: enableScroll,
  delay: 320,
 });

 // 监听 activePath 变化，自动滚动到激活项
-watch(activePath, () => {
-  scrollToActiveItem();
-});
+// watch(activePath, () => {
+//   scrollToActiveItem();
+// });

 // 默认展开菜单
 function initMenu() {
--- a/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/sub-menu.vue
@ -41,6 +41,7 @@ const hasChildren = computed(() => {
    :badge-variants="menu.badgeVariants"
    :icon="menu.icon"
    :path="menu.path"
+    :query="menu.query"
  >
    <template #title>
      <span>{{ menu.name }}</span>
--- a/packages/@core/ui-kit/menu-ui/src/types.ts
+++ b/packages/@core/ui-kit/menu-ui/src/types.ts
@ -1,6 +1,10 @@
 import type { Component, Ref } from 'vue';

-import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
+import type {
+  MenuRecordBadgeRaw,
+  Recordable,
+  ThemeModeType,
+} from '@vben-core/typings';

 interface MenuProps {
  /**
@ -91,12 +95,17 @@ interface MenuItemProps extends MenuRecordBadgeRaw {
   * @zh_CN menuitem 名称
   */
  path: string;
+  /**
+   * @zh_CN 菜单所携带的参数
+   */
+  query?: Recordable<any>;
 }

 interface MenuItemRegistered {
  active: boolean;
  parentPaths: string[];
  path: string;
+  query?: Recordable<any>;
 }

 interface MenuItemClicked {
--- a/packages/utils/src/helpers/generate-menus.ts
+++ b/packages/utils/src/helpers/generate-menus.ts
@ -43,6 +43,7 @@ function generateMenus(
      link,
      order,
      title = '',
+      query,
    } = meta;

    // 确保菜单名称不为空
@ -71,6 +72,7 @@ function generateMenus(
      badgeVariants,
      icon,
      name,
+      query,
      order,
      parent: route.parent,
      parents: route.parents,