Skip to content

Commit 35d31a0

Browse files
hoorayhooray
committed
style: 样式优化
1 parent 2b18c3f commit 35d31a0

File tree

4 files changed

+24
-23
lines changed

4 files changed

+24
-23
lines changed

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import type { MenuInjection, MenuProps } from './types'
3+
import { cn } from '@/utils'
34
import Item from './item.vue'
45
import SubMenu from './sub.vue'
56
import { rootMenuInjectionKey } from './types'
@@ -158,10 +159,10 @@ provide(rootMenuInjectionKey, reactive({
158159

159160
<template>
160161
<div
161-
class="h-full w-full flex flex-col of-hidden transition-all-300" :class="{
162-
'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
162+
:class="cn('h-full w-full flex flex-col of-hidden transition-all-300', {
163+
'flex-row w-auto': isMenuPopup && props.mode === 'horizontal',
163164
'py-1': props.mode === 'vertical',
164-
}"
165+
})"
165166
>
166167
<template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
167168
<template v-if="item.meta?.menu !== false">

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import type { SubMenuItemProps } from './types'
3+
import { cn } from '@/utils'
34
import { rootMenuInjectionKey } from './types'
45
56
defineOptions({
@@ -36,11 +37,11 @@ defineExpose({
3637

3738
<template>
3839
<div
39-
ref="itemRef" class="menu-item relative transition-all" :class="{
40+
ref="itemRef" :class="cn('menu-item relative transition-all', {
4041
'active': isItemActive,
4142
'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
4243
'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
43-
}"
44+
})"
4445
>
4546
<router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
4647
<FaTooltip :disabled="!rootMenu.isMenuPopup || level !== 0 || subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" :side="rootMenu.props.mode === 'vertical' ? 'right' : 'bottom'" class="h-full w-full">
@@ -51,41 +52,40 @@ defineExpose({
5152
target: item.meta?.link ? '_blank' : '_self',
5253
class: 'no-underline',
5354
}),
54-
}" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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="{
55+
}" :class="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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)])', {
5556
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
56-
'px-3!': rootMenu.isMenuPopup && level === 0,
57-
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
57+
'px-3': rootMenu.isMenuPopup && level === 0,
58+
})" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
5859
...(!subMenu && {
5960
click: navigate,
6061
}),
6162
}"
6263
>
6364
<div
64-
class="inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]" :class="{
65+
:class="cn('inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]', {
6566
'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
66-
'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
67+
'gap-1': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
6768
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
68-
}" :style="{
69+
})" :style="{
6970
'--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
7071
}"
7172
>
7273
<FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" class="menu-item-container-icon size-5 transition-transform group-hover-scale-120" />
7374
<span
74-
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
75-
:class="{
75+
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" :class="cn('w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width', {
7676
'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
7777
'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
78-
}"
78+
})"
7979
>
8080
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
8181
</span>
8282
</div>
8383
<i
84-
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]" :class="[
85-
expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]',
86-
rootMenu.isMenuPopup && level === 0 && 'opacity-0',
87-
rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
88-
]"
84+
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" :class="cn('relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]', {
85+
[expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]']: true,
86+
'opacity-0': rootMenu.isMenuPopup && level === 0,
87+
'-rotate-90 -top-[1.5px]': rootMenu.isMenuPopup && level !== 0,
88+
})"
8989
/>
9090
</component>
9191
</FaTooltip>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,12 @@ function handleMouseleave() {
191191
<Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
192192
<Transition v-bind="transitionClass" v-on="transitionEvent">
193193
<FaScrollArea
194-
v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" class="sub-menu static h-[calc-size(auto,size)] rounded-lg" :class="{
194+
v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg', {
195195
'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
196-
'border shadow-xl fixed! z-3000 w-[200px]': rootMenu.isMenuPopup,
196+
'border shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
197197
'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
198198
'py-1': rootMenu.isMenuPopup,
199-
}"
199+
})"
200200
>
201201
<template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
202202
<SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ watch(() => menuStore.actived, (val, oldVal) => {
6262
<div v-show="mainIndex === menuStore.actived">
6363
<Menu
6464
:menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
65-
'-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
65+
'-mt-2': !((settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse) || ['head', 'single'].includes(settingsStore.settings.menu.mode)),
6666
}"
6767
/>
6868
</div>

0 commit comments

Comments
 (0)