Переглянути джерело

fix: 修复菜单项外部链接跳转问题

- 引入 isHttpUrl 工具函数用于判断 URL 类型
- 添加 isHttp 计算属性检测父路径是否为 HTTP 链接
- 修改菜单项渲染逻辑,对外部链接直接使用原地址跳转
- 调整 HTML 结构,将链接属性移到正确位置
- 确保内部路由和外部链接都能正常工作
lmx 2 місяців тому
батько
коміт
e2fb3602f1
1 змінених файлів з 40 додано та 38 видалено
  1. 40 38
      packages/@core/ui-kit/menu-ui/src/components/menu-item.vue

+ 40 - 38
packages/@core/ui-kit/menu-ui/src/components/menu-item.vue

@@ -5,6 +5,7 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
 
 import { useNamespace } from '@vben-core/composables';
 import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
+import { isHttpUrl } from '@vben-core/shared/utils';
 
 import qs from 'qs';
 
@@ -33,6 +34,8 @@ const menuIcon = computed(() =>
   active.value ? props.activeIcon || props.icon : props.icon,
 );
 
+const isHttp = computed(() => isHttpUrl(item.parentPaths.at(-1)));
+
 const isTopLevelMenuItem = computed(
   () => parentMenu.value?.type.name === 'Menu',
 );
@@ -92,45 +95,44 @@ onBeforeUnmount(() => {
       (item?.query ? `?${qs.stringify(item?.query)}` : '')
     "
   >
-    <a :href="href" @click.prevent.stop="handleClick">
-      <li
-        :class="[
-          rootMenu.theme,
-          b(),
-          is('active', active),
-          is('disabled', disabled),
-          is('collapse-show-title', collapseShowTitle),
-        ]"
-        role="menuitem"
+    <a
+      :href="isHttp ? item.parentPaths.at(-1) : href"
+      :class="[
+        rootMenu.theme,
+        b(),
+        is('active', active),
+        is('disabled', disabled),
+        is('collapse-show-title', collapseShowTitle),
+      ]"
+      role="menuitem"
+      @click.prevent.stop="handleClick"
+    >
+      <VbenTooltip
+        v-if="showTooltip"
+        :content-class="[rootMenu.theme]"
+        side="right"
       >
-        <!-- -->
-        <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>
+        <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>
     </a>
   </router-link>
 </template>