guest-security-check-system/snowy-admin-web/src/layout/menu/leftMenu.vue

<template>
	<a-layout>
		<template v-if="isMobile">
			<!-- 手机端情况下的左侧菜单 -->
			<Side-m/>
			<!-- 右侧布局 -->
			<a-layout>
				<div id="snowyHeader" class="snowy-header">
					<div class="snowy-header-left xn-pl0">
						<div class="logo-bar is-mobile __hover" @click="toPortal">
							<img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO"/>
							<span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
						</div>
					</div>
					<div class="snowy-header-right">
						<user-bar/>
					</div>
				</div>
				<a-layout-content class="main-content-wrapper">
					<div id="admin-ui-main" class="admin-ui-main">
						<router-view v-slot="{ Component }">
							<keep-alive :include="kStore.keepLiveRoute">
								<component :is="Component" v-if="kStore.routeShow" :key="route.name"/>
							</keep-alive>
						</router-view>
						<iframe-view/>
						<div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
							<a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
									sysBaseConfig.SNOWY_SYS_COPYRIGHT
								}}</a>
						</div>
					</div>
				</a-layout-content>
			</a-layout>
		</template>
		<template v-else>
			<a-layout-header class="left-menu-header">
				<div id="snowyHeader" class="snowy-header">
					<div class="snowy-header-left xn-pl0">
						<div class="logo-bar __hover" @click="toPortal">
							<img class="logo" :src="sysBaseConfig.SNOWY_SYS_LOGO"/>
							<span>{{ sysBaseConfig.SNOWY_SYS_NAME }}</span>
						</div>
					</div>
					<div class="snowy-header-right">
						<user-bar/>
					</div>
				</div>
			</a-layout-header>
			<a-layout>
				<a-layout-sider
					:collapsed="menuIsCollapse"
					:trigger="null"
					collapsible
					:theme="sideTheme"
					width="190"
				>
					<div :class="menuIsCollapse ? 'admin-ui-side isCollapse' : 'admin-ui-side'">
						<div class="admin-ui-side-scroll">
							<a-menu
								v-bind:openKeys="openKeys"
								v-bind:selectedKeys="selectedKeys"
								:theme="sideTheme"
								mode="inline"
								@select="onSelect"
								@openChange="onOpenChange"
                :inlineIndent="18"
							>
								<NavMenu :nav-menus="menu"/>
							</a-menu>
						</div>
					</div>
				</a-layout-sider>
				<!-- 右侧布局 -->
				<a-layout>
					<Breadcrumb v-if="!isMobile && breadcrumbOpen"/>
					<!-- 多标签 -->
					<Tags v-if="!isMobile && layoutTagsOpen"/>
					<a-layout-content class="main-content-wrapper">
						<div id="admin-ui-main" class="admin-ui-main">
							<router-view v-slot="{ Component }">
								<keep-alive :include="kStore.keepLiveRoute">
									<component :is="Component" v-if="kStore.routeShow" :key="route.name"/>
								</keep-alive>
							</router-view>
							<iframe-view/>
							<div v-if="footerCopyrightOpen" class="main-bottom-wrapper">
								<a class="xn-color-a0a0a0" :href="sysBaseConfig.SNOWY_SYS_COPYRIGHT_URL" target="_blank">{{
										sysBaseConfig.SNOWY_SYS_COPYRIGHT
									}}</a>
							</div>
						</div>
					</a-layout-content>
				</a-layout>
			</a-layout>
		</template>
	</a-layout>
</template>

<script setup>
import {useRoute} from 'vue-router'

const route = useRoute()

import UserBar from '@/layout/components/userbar.vue'
import Tags from '@/layout/components/tags.vue'
import SideM from '@/layout/components/sideM.vue'
import NavMenu from '@/layout/components/NavMenu.vue'
import ModuleMenu from '@/layout/components/moduleMenu.vue'
import IframeView from '@/layout/components/iframeView.vue'
import Breadcrumb from '@/layout/components/breadcrumb.vue'
import {toPortal} from "@/views/auth/login/util";

const props = defineProps({
	layout: {type: String}, // 布局信息
	isMobile: {type: Boolean}, // 是否移动端
	menuIsCollapse: {type: Boolean}, // 菜单是否折叠
	sideTheme: {type: String},
	sysBaseConfig: {type: Object},
	openKeys: {type: Array},
	selectedKeys: {type: Array},
	menu: {type: Array}, // 菜单
	breadcrumbOpen: {type: Boolean}, //面包屑
	layoutTagsOpen: {type: Boolean},
	kStore: {type: Object}, // 获取的仓库数据
	footerCopyrightOpen: {type: Boolean}, //页脚版权信息
	moduleMenuShow: {type: Boolean}
})

const emit = defineEmits(['onSelect', 'onOpenChange', 'switchModule', 'menuIsCollapseClick'])
const onSelect = (obj) => {
	emit('onSelect', obj)
}
const onOpenChange = (keys) => {
	emit('onOpenChange', keys)
}
const switchModule = (id) => {
	emit('switchModule', id)
}
const menuIsCollapseClick = () => {
	emit('menuIsCollapseClick')
}
</script>
<style lang="less" scoped>
.xn-color-fff {
	color: #fff;
}

.xn-pdl25 {
	padding-left: 11px;
}

.xn-menu-line {
	text-align: center;
	height: auto;
	line-height: 20px;
	flex: none;
	display: block;
	padding: 12px 0 !important;
}

.xn-navmenu-line {
	min-width: 0;
	flex: 1 1 0%;
	overflow: hidden;
}

.xn-bb0 {
	border-bottom: none;
	position: relative;
}

.ant-layout-content {
	display: flex;
	flex-direction: column;
  background-color: #08112A;
}

.xn-pd1180 {
	padding: 10px 150px 0 150px;
}

.xn-pd050 {
	padding: 0 50px;
}

.xn-pl10 {
	padding-left: 10px;
}

.xn-mg050 {
	margin: 0px 150px;
}
.left-menu-header {
	padding: 0;
	height: 40px;
	.snowy-header {
		height: 100%;
		background-color: #266EFF;
		border: none;
		.snowy-header-left {
		}
		.snowy-header-right {
			color: #ffffff;
			:deep(.user-bar) {
				>* {
					font-size: 18px;
				}
			}
		}
	}
}
:deep(.ant-layout-sider) {
  background-image: url("./left-menu.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 190px auto;
  .ant-menu {
    background-color: transparent !important;
    .ant-menu-submenu-title {
      padding-right: 12px;
      padding-left: 10px !important;
      .ant-menu-submenu-arrow {
        inset-inline-end: 4px;
      }
    }
  }
}
</style>