Browse Source

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

- 引入 isHttpUrl 工具函数用于判断 URL 类型
- 添加 isHttp 计算属性检测父路径是否为 HTTP 链接
- 修改菜单项渲染逻辑,对外部链接直接使用原地址跳转
- 调整 HTML 结构,将链接属性移到正确位置
- 确保内部路由和外部链接都能正常工作
pull/7667/head
lmx 4 days ago
parent
commit
e2fb3602f1
  1. 78
      packages/@core/ui-kit/menu-ui/src/components/menu-item.vue

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

Loading…
Cancel
Save