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

fix: fix a series of known problems,fixed #54

Browse Source
This commit is contained in:
vince
2024-07-18 21:59:18 +08:00
parent 01e95e029f
commit 276ef2ebc3
36 changed files with 314 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -397,7 +397,7 @@ $namespace: vben;
&:hover {
.#{$namespace}-menu__icon {
transform: scale(1.3);
transform: scale(1.2);
}
}
@@ -422,7 +422,7 @@ $namespace: vben;
.#{$namespace}-menu__popup-container,
.#{$namespace}-menu {
--menu-title-width: 140px;
--menu-item-icon-width: 20px;
--menu-item-icon-size: 16px;
--menu-item-height: 38px;
--menu-item-padding-y: 22px;
--menu-item-padding-x: 12px;
@@ -430,7 +430,7 @@ $namespace: vben;
--menu-item-popup-padding-x: 12px;
--menu-item-margin-y: 3px;
--menu-item-margin-x: 0px;
--menu-item-collapse-padding-y: 25px;
--menu-item-collapse-padding-y: 23.5px;
--menu-item-collapse-padding-x: 0px;
--menu-item-collapse-margin-y: 4px;
--menu-item-collapse-margin-x: 0px;
@@ -701,10 +701,9 @@ $namespace: vben;
&__icon {
flex-shrink: 0;
// width: var(--menu-item-icon-width);
max-height: var(--menu-item-icon-width);
margin-right: 12px;
font-size: 20px;
width: var(--menu-item-icon-size);
height: var(--menu-item-icon-size);
margin-right: 8px;
text-align: center;
vertical-align: middle;
}
@@ -810,7 +809,7 @@ $namespace: vben;
width: inherit;
margin-top: -8px;
margin-right: 0;
font-size: 16px;
// font-size: 16px;
font-weight: normal;
opacity: 1;
transition: transform 0.25s ease;

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

@@ -25,14 +25,6 @@ const emit = defineEmits<{
}>();
const { b, e, is } = useNamespace('normal-menu');
function handleClick(menu: MenuRecordRaw) {
emit('select', menu);
}
function handleMouseenter(menu: MenuRecordRaw) {
emit('enter', menu);
}
</script>
<template>
@@ -49,8 +41,8 @@ function handleMouseenter(menu: MenuRecordRaw) {
<template v-for="menu in menus" :key="menu.path">
<li
:class="[e('item'), is('active', activePath === menu.path)]"
@click="handleClick(menu)"
@mouseenter="handleMouseenter(menu)"
@click="() => emit('select', menu)"
@mouseenter="() => emit('enter', menu)"
>
<VbenIcon :class="e('icon')" :icon="menu.icon" fallback />
<span :class="e('name')" class="truncate"> {{ menu.name }}</span>
@@ -64,10 +56,9 @@ $namespace: vben;
.#{$namespace}-normal-menu {
--menu-item-margin-y: 4px;
--menu-item-margin-x: 0px;
--menu-item-padding-y: 8px;
--menu-item-padding-y: 9px;
--menu-item-padding-x: 0px;
--menu-item-radius: 0px;
--menu-dark-background: 0deg 0% 100% / 10%;
height: calc(100% - 4px);
@@ -82,12 +73,9 @@ $namespace: vben;
&:not(.is-active):hover {
color: hsl(var(--primary-foreground));
background-color: hsl(var(--menu-dark-background));
}
&.is-active {
background-color: hsl(var(--menu-dark-background));
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
color: hsl(var(--primary-foreground));
@@ -129,7 +117,7 @@ $namespace: vben;
border-color 0.15s ease;
&.is-active {
@apply text-primary bg-primary/20;
@apply text-primary bg-primary/15 dark:bg-accent;
.#{$namespace}-normal-menu__name,
.#{$namespace}-normal-menu__icon {
@@ -138,14 +126,12 @@ $namespace: vben;
}
&:not(.is-active):hover {
@apply text-foreground;
background-color: hsl(var(--menu-dark-background));
@apply dark:bg-accent text-primary bg-heavy dark:text-foreground;
}
&:hover {
.#{$namespace}-normal-menu__icon {
transform: scale(1.3);
transform: scale(1.2);
}
}
}