Skip to content

Commit 6b8eb94

Browse files
hoorayhooray
committed
refactor: 导航菜单尺寸调整
1 parent 4889f56 commit 6b8eb94

File tree

7 files changed

+41
-31
lines changed

7 files changed

+41
-31
lines changed

‎src/assets/styles/globals.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
// 明暗模式 CSS 变量
2020
/* stylelint-disable-next-line no-duplicate-selectors */
2121
:root {
22+
--g-box-shadow-color: rgb(0 0 0 / 12%);
23+
2224
&::view-transition-old(root),
2325
&::view-transition-new(root) {
2426
mix-blend-mode: normal;
@@ -33,18 +35,16 @@
3335
z-index: 9999;
3436
}
3537

36-
--g-box-shadow-color: rgb(0 0 0 / 12%);
37-
3838
&.dark {
39+
--g-box-shadow-color: rgb(0 0 0 / 72%);
40+
3941
&::view-transition-old(root) {
4042
z-index: 9999;
4143
}
4244

4345
&::view-transition-new(root) {
4446
z-index: 1;
4547
}
46-
47-
--g-box-shadow-color: rgb(0 0 0 / 72%);
4848
}
4949
}
5050

‎src/views/components/Header/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function handlerMouserScroll(event: WheelEvent) {
3535
<div class="menu h-full flex of-hidden transition-all">
3636
<template v-for="(item, index) in menuStore.allMenus" :key="index">
3737
<div
38-
class="menu-item relative transition-all" :class="{
38+
class="menu-item relative mx-1 py-2 transition-all" :class="{
3939
active: index === menuStore.actived,
4040
}"
4141
>
@@ -45,7 +45,7 @@ function handlerMouserScroll(event: WheelEvent) {
4545
}" :title="typeof item?.title === 'function' ? item?.title() : item?.title" @click="switchTo(index)"
4646
>
4747
<div class="inline-flex flex-1 items-center justify-center gap-1">
48-
<SvgIcon v-if="item?.icon" :name="item?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
48+
<SvgIcon v-if="item?.icon" :name="item?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
4949
<span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
5050
{{ typeof item?.title === 'function' ? item?.title() : item?.title }}
5151
</span>
@@ -137,7 +137,7 @@ header {
137137
}
138138
139139
.menu-item-container-icon {
140-
font-size: 24px !important;
140+
font-size: 20px !important;
141141
}
142142
}
143143

‎src/views/components/MainSidebar/index.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,30 @@ const { switchTo } = useMenu()
1717
<Transition name="main-sidebar">
1818
<div v-if="['side'].includes(settingsStore.settings.menu.mode)" class="main-sidebar-container">
1919
<Logo :show-title="false" class="sidebar-logo" />
20-
<!-- 侧边栏模式（含主导航） -->
21-
<div class="menu w-full flex flex-col of-hidden transition-all">
22-
<template v-for="(item, index) in menuStore.allMenus" :key="index">
23-
<div
24-
class="menu-item relative transition-all" :class="{
25-
active: index === menuStore.actived,
26-
}"
27-
>
20+
<div class="menu">
21+
<!-- 侧边栏模式（含主导航） -->
22+
<div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
23+
<template v-for="(item, index) in menuStore.allMenus" :key="index">
2824
<div
29-
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
30-
'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
31-
}" :title="typeof item?.title === 'function' ? item?.title() : item?.title" @click="switchTo(index)"
25+
class="menu-item relative px-2 py-1 transition-all" :class="{
26+
active: index === menuStore.actived,
27+
}"
3228
>
33-
<div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-1">
34-
<SvgIcon v-if="item?.icon" :name="item?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
35-
<span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
36-
{{ typeof item?.title === 'function' ? item?.title() : item?.title }}
37-
</span>
29+
<div
30+
v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
31+
'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
32+
}" :title="typeof item?.title === 'function' ? item?.title() : item?.title" @click="switchTo(index)"
33+
>
34+
<div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-1">
35+
<SvgIcon v-if="item?.icon" :name="item?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
36+
<span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
37+
{{ typeof item?.title === 'function' ? item?.title() : item?.title }}
38+
</span>
39+
</div>
3840
</div>
3941
</div>
40-
</div>
41-
</template>
42+
</template>
43+
</div>
4244
</div>
4345
</div>
4446
</Transition>
@@ -86,7 +88,7 @@ const { switchTo } = useMenu()
8688
}
8789
8890
.menu-item-container-icon {
89-
font-size: 24px !important;
91+
font-size: 20px !important;
9092
}
9193
}
9294

‎src/views/components/Menu/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ provide(rootMenuInjectionKey, reactive({
171171
<div
172172
class="h-full w-full flex flex-col of-hidden transition-all" :class="{
173173
'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
174+
'py-1': props.mode === 'vertical',
174175
}"
175176
>
176177
<template v-for="(item, index) in menu" :key="index">

‎src/views/components/Menu/item.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,14 @@ defineExpose({
5252
<template>
5353
<div
5454
ref="itemRef" class="menu-item relative transition-all" :class="{
55-
active: isItemActive,
55+
'active': isItemActive,
56+
'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
57+
'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
5658
}"
5759
>
5860
<HTooltip :enable="rootMenu.isMenuPopup && level === 0 && !subMenu" :text="typeof item?.title === 'function' ? item?.title() : item?.title" placement="right" class="h-full w-full">
5961
<div
60-
class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
62+
class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
6163
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
6264
'px-3!': rootMenu.isMenuPopup && level === 0,
6365
}" :title="typeof item?.title === 'function' ? item?.title() : item?.title"
@@ -70,7 +72,7 @@ defineExpose({
7072
'w-[50px]': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'horizontal',
7173
}" :style="indentStyle"
7274
>
73-
<SvgIcon v-if="icon" :name="icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
75+
<SvgIcon v-if="icon" :name="icon" :size="18" class="menu-item-container-icon transition-transform group-hover-scale-120" />
7476
<span
7577
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
7678
:class="{

‎src/views/components/Menu/sub.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,8 @@ function handleMouseleave() {
183183
v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
184184
'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
185185
'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
186-
'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
186+
'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
187+
'py-1': rootMenu.isMenuPopup,
187188
}"
188189
>
189190
<template v-for="item in menu.children" :key="JSON.stringify(item)">

‎src/views/components/SubSidebar/index.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,11 @@ onMounted(() => {
5959
<TransitionGroup name="sub-sidebar">
6060
<template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
6161
<div v-show="mainIndex === menuStore.actived">
62-
<Menu :menu="mainItem.children" value="" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.settings.menu.subMenuCollapse" class="menu" />
62+
<Menu
63+
:menu="mainItem.children" value="" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
64+
'-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
65+
}"
66+
/>
6367
</div>
6468
</template>
6569
</TransitionGroup>

0 commit comments

Comments
 (0)