by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(other): The menu supports jumping to external links and fixing some known problems

Browse Source
This commit is contained in:
vben
2024-05-21 21:45:48 +08:00
parent 399334ac57
commit c31d21be50
43 changed files with 505 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/@vben-core/shared/typings/global.d.ts vendored
View File

@@ -80,6 +80,10 @@ declare module 'vue-router' {
* 用于路由->菜单排序
*/
orderNo?: number;
/**
* 外链-跳转路径
*/
target?: string;
/**
* 标题名称
*/

7
packages/@vben-core/uikit/menu-ui/src/components/menu-item.vue
View File

@@ -100,12 +100,7 @@ onBeforeUnmount(() => {
</VbenTooltip>
<div v-show="!showTooltip" :class="[e('content')]">
<VbenMenuBadge v-bind="props" />
<VbenIcon
v-if="isTopLevelMenuItem"
:class="nsMenu.e('icon')"
:icon="icon"
fallback
/>
<VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />
<slot></slot>
<slot name="title"></slot>

7
packages/@vben-core/uikit/menu-ui/src/components/menu.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { IcRoundMoreHoriz } from '@vben-core/iconify';
import { useNamespace } from '@vben-core/toolkit';
import { isHttpUrl, useNamespace } from '@vben-core/toolkit';
import { UseResizeObserverReturn, useResizeObserver } from '@vueuse/core';
import {
@@ -241,7 +241,10 @@ function handleMenuItemClick(data: MenuItemClicked) {
if (!path || !parentPaths) {
return;
}
activePath.value = path;
if (!isHttpUrl(path)) {
activePath.value = path;
}
emit('select', path, parentPaths);
}

2
packages/@vben-core/uikit/menu-ui/src/components/sub-menu-content.vue
View File

@@ -86,7 +86,7 @@ const iconArrowStyle = computed(() => {
<slot></slot>
<VbenIcon
v-if="isTopLevelMenuSubmenu && !isMenuMore"
v-if="!isMenuMore"
:class="nsMenu.e('icon')"
:icon="icon"
fallback

2
packages/@vben-core/uikit/menu-ui/src/styles/index.scss
View File

@@ -16,7 +16,7 @@
--menu-item-collapse-margin-y: 4px;
--menu-item-collapse-margin-x: 0px;
--menu-item-radius: 0px;
--menu-item-indent: 24px;
--menu-item-indent: 16px;
--menu-font-size: 14px;
--menu-dark-background: 0deg 0% 100% / 10%;
--menu-light-background: 192deg 1% 93%;

4
packages/@vben-core/uikit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Icon } from '@vben-core/iconify';
import { VbenIcon } from '@vben-core/shadcn-ui';
import type { IBreadcrumb } from './interface';
@@ -32,7 +32,7 @@ function handleClick(path?: string) {
<li>
<a href="javascript:void 0" @click.stop="handleClick(item.path)">
<span class="flex-center h-full">
<Icon
<VbenIcon
v-if="item.icon && showIcon"
class="mr-1 size-5 flex-shrink-0"
:icon="item.icon"

36
packages/@vben-core/uikit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { IcRoundKeyboardArrowDown, Icon } from '@vben-core/iconify';
import { IcRoundKeyboardArrowDown } from '@vben-core/iconify';
import { VbenIcon } from '@vben-core/shadcn-ui';
import {
Breadcrumb,
@@ -49,7 +50,7 @@ function handleClick(path?: string) {
<div v-if="item.items?.length ?? 0 > 0">
<DropdownMenu>
<DropdownMenuTrigger class="flex items-center gap-1">
<Icon
<VbenIcon
v-if="item.icon && showIcon"
class="size-5"
:icon="item.icon"
@@ -74,21 +75,26 @@ function handleClick(path?: string) {
href="javascript:void 0"
@click.stop="handleClick(item.path)"
>
<Icon
v-if="item.icon && showIcon"
class="size-4"
:class="{ 'size-5': item.isHome }"
:icon="item.icon"
/>
{{ item.title }}
<div class="flex-center">
<VbenIcon
v-if="item.icon && showIcon"
class="mr-1 size-4"
:class="{ 'size-5': item.isHome }"
:icon="item.icon"
/>
{{ item.title }}
</div>
</BreadcrumbLink>
<BreadcrumbPage v-else>
<Icon
v-if="item.icon && showIcon"
class="size-4"
:icon="item.icon"
/>
{{ item.title }}
<div class="flex-center">
<VbenIcon
v-if="item.icon && showIcon"
class="mr-1 size-4"
:class="{ 'size-5': item.isHome }"
:icon="item.icon"
/>
{{ item.title }}
</div>
</BreadcrumbPage>
</BreadcrumbItem>
<BreadcrumbSeparator

2
packages/@vben-core/uikit/tabs-ui/src/components/tabs.vue
View File

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{ close: [string]; unPushPin: [TabItem] }>();
const gap = 7;
const gap = 6;
const active = defineModel<string>('active');
const { b, e, is } = useNamespace('tabs-ui');

31
packages/@vben-core/uikit/tabs-ui/src/styles/tabs.scss
View File

@@ -2,7 +2,7 @@
@include b('tabs-ui') {
--tabs-background: hsl(var(--color-background));
--tabs-gap: 8px;
--tabs-gap: 10px;
--tabs-divider: hsl(var(--color-border));
--tabs-hover: hsl(var(--color-heavy));
--tabs-active-background: hsl(var(--color-primary) / 15%);
@@ -30,7 +30,6 @@
color: hsl(var(--color-muted-foreground));
cursor: pointer;
user-select: none;
// mask-image: linear-gradient(to right, #000 calc(100% - 0px), transparent);
@include is('active') {
z-index: 1;
@@ -49,10 +48,10 @@
background-color: var(--tabs-active-background);
}
// .#{$namespace}-tab-background__before,
// .#{$namespace}-tab-background__after {
// fill: var(--tabs-active-background);
// }
.#{$namespace}-tab-background__before,
.#{$namespace}-tab-background__after {
fill: var(--tabs-active-background);
}
}
@include e('content') {
@@ -95,7 +94,7 @@
height: 100%;
font-size: 12px;
border-radius: 50%;
// transition: all 0.15s ease;
transition: all 0.15s ease;
&:hover {
color: hsl(var(--color-foreground));
@@ -185,15 +184,15 @@
height: 100%;
margin: 0 7px;
&::before {
position: absolute;
top: 20%;
right: 100%;
width: 1px;
height: 60%;
content: '';
background-color: var(--tabs-divider);
}
// &::before {
// position: absolute;
// top: 20%;
// right: 100%;
// width: 1px;
// height: 60%;
// content: '';
// background-color: var(--tabs-divider);
// }
// &::after {
// position: absolute;