gitee/snowy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

【新增】新增左上角折叠菜单功能

Browse Source
This commit is contained in:
xiaonuobase 2023-04-03 15:01:01 +08:00
parent a4cfc69126
commit 1521fcc529
4 changed files with 33 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
snowy-admin-web/src/layout/components/moduleMenu.vue
View File

@ -21,7 +21,7 @@
</a-menu-item>
</a-menu>
</div>
<div v-else>
<div v-else class="panel-item hidden-sm-and-down">
<a-popover v-if="menu.length > 1" placement="bottomLeft">
<template #content>
<a-row :gutter="[0, 5]" class="module-row">
@ -35,9 +35,7 @@
</div>
</a-row>
</template>
<div class="module-comp">
<appstore-outlined />
</div>
</a-popover>
</div>
</template>
@ -123,18 +121,6 @@
color: white;
font-size: 8px;
}
.module-comp {
display: flex;
padding: 0 15px;
height: 49px;
text-align: center;
justify-content: center;
align-items: center;
cursor: pointer;
}
.module-comp:hover {
background: var(--header-color-split);
}
.ant-menu-horizontal > .ant-menu-item::after,
.ant-menu-horizontal > .ant-menu-submenu::after {
content: none;

12
snowy-admin-web/src/layout/components/userbar.vue
View File

@ -204,18 +204,6 @@
align-items: center;
height: 100%;
}
.user-bar .panel-item {
padding: 0 10px;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
}
.user-bar .panel-item i {
}
.user-bar .panel-item:hover {
background: var(--header-color-split);
}
.user-bar .user-avatar {
height: 49px;
display: flex;

28
snowy-admin-web/src/layout/index.vue
View File

@ -28,17 +28,21 @@
@select="onSelect"
@openChange="onOpenChange"
>
<NavMenu :nav-menus="menu"></NavMenu>
<NavMenu :nav-menus="menu" />
</a-menu>
</div>
</div>
</a-layout-sider>
<!-- 手机端情况下的左侧菜单 -->
<Side-m v-if="ismobile"></Side-m>
<Side-m v-if="ismobile" />
<!-- 右侧布局 -->
<a-layout>
<div id="snowyHeader" class="snowy-header">
<div class="snowy-header-left" style="padding-left: 0px">
<div v-if="!ismobile" class="panel-item hidden-sm-and-down" @click="menuIsCollapseClick">
<MenuUnfoldOutlined v-if="menuIsCollapse" />
<MenuFoldOutlined v-else />
</div>
<moduleMenu @switchModule="switchModule" />
<Topbar v-if="!ismobile && breadcrumbOpen" />
</div>
@ -47,7 +51,7 @@
</div>
</div>
<!-- 多标签 -->
<Tags v-if="!ismobile && layoutTagsOpen"></Tags>
<Tags v-if="!ismobile && layoutTagsOpen" />
<a-layout-content class="main-content-wrapper">
<div id="adminui-main" class="adminui-main">
<router-view v-slot="{ Component }">
@ -55,7 +59,7 @@
<component :is="Component" :key="$route.name" v-if="routeShow" />
</keep-alive>
</router-view>
<iframe-view></iframe-view>
<iframe-view />
<div class="main-bottom-wrapper">
<a style="color: #a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
sysBaseConfig.SNOWY_SYS_COPYRIGHT
@ -132,14 +136,18 @@
:theme="secondMenuSideTheme"
@select="onSelect"
>
<NavMenu :nav-menus="nextMenu"></NavMenu>
<NavMenu :nav-menus="nextMenu" />
</a-menu>
</a-layout-sider>
<!-- 手机端情况下的左侧菜单 -->
<Side-m v-if="ismobile"></Side-m>
<Side-m v-if="ismobile" />
<a-layout>
<div id="snowyHeader" class="snowy-header">
<div class="snowy-header-left" style="padding-left: 0px">
<div v-if="!ismobile" class="panel-item hidden-sm-and-down" @click="menuIsCollapseClick">
<MenuUnfoldOutlined v-if="menuIsCollapse" />
<MenuFoldOutlined v-else />
</div>
<moduleMenu @switchModule="switchModule" />
<Topbar v-if="!ismobile && breadcrumbOpen" />
</div>
@ -156,7 +164,7 @@
<component :is="Component" v-if="routeShow" :key="$route.name" />
</keep-alive>
</router-view>
<iframe-view></iframe-view>
<iframe-view />
<div class="main-bottom-wrapper">
<a style="color: #a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
sysBaseConfig.SNOWY_SYS_COPYRIGHT
@ -184,7 +192,7 @@
import moduleMenu from './components/moduleMenu.vue'
import { ThemeModeEnum } from '@/utils/enum'
import { globalStore, keepAliveStore } from '@/store'
import { mapState, mapActions } from 'pinia'
import { mapState, mapStores, mapActions } from 'pinia'
import tool from '@/utils/tool'
export default defineComponent({
@ -213,6 +221,7 @@
}
},
computed: {
...mapStores(globalStore),
...mapState(globalStore, [
'theme',
'ismobile',
@ -454,6 +463,9 @@
})
return newMap
},
menuIsCollapseClick() {
this.globalStore.toggleConfig('menuIsCollapse')
},
// 退出最大化
exitMaximize() {
document.getElementById('app').classList.remove('main-maximize')

11
snowy-admin-web/src/style/index.less
View File

@ -236,6 +236,17 @@ a, button, input, textarea {
align-items: center;
}
.panel-item {
padding: 0 10px;
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
}
.panel-item:hover {
background: var(--header-color-split);
}
/* 多标签 */
.snowy-tags {
height: 40px;