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

snowy-admin-web/src/layout/components/moduleMenu.vue

@@ -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 />
-				<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;

snowy-admin-web/src/layout/components/userbar.vue

@@ -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;

snowy-admin-web/src/layout/index.vue

@@ -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')

snowy-admin-web/src/style/index.less

@@ -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;