bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add breadcrumb navigation example

Browse Source
This commit is contained in:
vince
2024-07-19 01:26:13 +08:00
parent 0c245665a9
commit 9ec91ac16d
24 changed files with 188 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/@core/ui-kit/layout-ui/package.json
View File

@@ -40,7 +40,6 @@
"@vben-core/hooks": "workspace:*",
"@vben-core/icons": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.32"

6
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@@ -253,7 +253,7 @@ function handleMouseleave() {
},
]"
:style="style"
class="border-border fixed left-0 top-0 h-full border-r transition-all duration-150"
class="fixed left-0 top-0 h-full transition-all duration-150"
@mouseenter="handleMouseenter"
@mouseleave="handleMouseleave"
>
@@ -277,10 +277,10 @@ function handleMouseleave() {
v-if="isSidebarMixed"
ref="asideRef"
:class="{
'border-r': extraVisible,
'border-l': extraVisible,
}"
:style="extraStyle"
class="border-border bg-sidebar fixed top-0 h-full overflow-hidden transition-all duration-200"
class="border-border bg-sidebar fixed top-0 h-full overflow-hidden border-r transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"

1
packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
View File

@@ -106,6 +106,7 @@ onBeforeUnmount(() => {
<div v-show="!showTooltip" :class="[e('content')]">
<VbenMenuBadge
v-if="rootMenu.props.mode !== 'horizontal'"
class="right-2"
v-bind="props"
/>
<VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />

8
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -507,12 +507,12 @@ $namespace: vben;
}
&.is-light {
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-item-active-color: hsl(var(--primary-foreground));
--menu-item-active-background-color: hsl(var(--primary));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-active-color: hsl(var(--primary-foreground));
--menu-submenu-active-background-color: hsl(var(--primary));
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--accent));
}

11
packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
View File

@@ -69,16 +69,17 @@ $namespace: vben;
&.is-dark {
.#{$namespace}-normal-menu__item {
color: hsl(var(--foreground) / 80%);
@apply text-foreground/80;
// color: hsl(var(--foreground) / 80%);
&:not(.is-active):hover {
color: hsl(var(--primary-foreground));
@apply text-foreground;
}
&.is-active {
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
color: hsl(var(--primary-foreground));
@apply text-foreground;
}
}
}
@@ -117,11 +118,11 @@ $namespace: vben;
border-color 0.15s ease;
&.is-active {
@apply text-primary bg-primary/15 dark:bg-accent;
@apply text-primary bg-primary dark:bg-accent;
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
@apply text-primary font-semibold;
@apply text-primary-foreground font-semibold;
}
}

1
packages/@core/ui-kit/menu-ui/src/sub-menu.vue
View File

@@ -56,6 +56,7 @@ const hasChildren = computed(() => {
:badge="menu.badge"
:badge-type="menu.badgeType"
:badge-variants="menu.badgeVariants"
class="right-6"
/>
</template>
<template #title>{{ menu.name }}</template>

4
packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue
View File

@@ -43,13 +43,13 @@ const badgeStyle = computed(() => {
});
</script>
<template>
<span v-if="isDot || badge" :class="$attrs.class" class="absolute right-6">
<span v-if="isDot || badge" :class="$attrs.class" class="absolute">
<BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
<div
v-else
:class="badgeClass"
:style="badgeStyle"
class="text-primary-foreground rounded-xl px-1.5 py-0.5 text-xs"
class="text-primary-foreground flex-center rounded-xl px-1.5 py-0.5 text-[10px]"
>
{{ badge }}
</div>