FactorySystemWeb/src/layouts/BaseLayout.vue

<template>
	<lay-config-provider :themeVariable="appStore.themeVariable" :theme="appStore.theme">
		<lay-layout :class="[collapseState ? 'collapse' : '']">
			<!-- side -->
			<lay-side :width="sideWidth">
				<lay-logo v-if="collapseState" style="color:#fff;">华宝</lay-logo>
				<lay-logo v-else style="color:#fff;">配方物料协同系统</lay-logo>
				<lay-scroll style="height: calc(100% - 62px)">
					<global-menu :collapse="collapseState"></global-menu>
				</lay-scroll>
			</lay-side>
			<lay-layout style="width:0">
				<!-- header -->
				<lay-header style="position: relative;">
					<lay-menu class="layui-layout-left" @mouseleave="navBarOpacity=0,navBarWidth=0">
						<lay-menu-item @click="collapse" @mouseenter="mouseenter($event)">
							<lay-icon v-if="collapseState" type="layui-icon-spread-left"></lay-icon>
							<lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
						</lay-menu-item>
						<lay-menu-item @click="refresh" @mouseenter="mouseenter($event)">
							<lay-icon type="layui-icon-refresh-one"></lay-icon>
						</lay-menu-item>
					</lay-menu>
					<lay-menu class="layui-layout-right" @mouseleave="navBarOpacity=0,navBarWidth=0">
						<lay-menu-item>
							<a href="javascript:void(0)">
								<lay-switch class="switch" v-model="appStore.theme" onswitch-value="dark"
									unswitch-value="light" onswitch-color="rgba(255, 255, 255, 0.05)"
									unswitch-color="rgba(255, 255, 255, 0.05)" style="display:inline-flex">
									<template #onswitch-icon>
										<light-icon></light-icon>
									</template>
									<template #unswitch-icon>
										<dark-icon></dark-icon>
									</template>
								</lay-switch>
							</a>
						</lay-menu-item>

						<lay-menu-item @mouseenter="mouseenter($event)">
							<lay-fullscreen v-slot="{ enter, exit, isFullscreen }">
								<lay-icon type="layui-icon-screen-full" v-if="!isFullscreen" @click="enter()">
								</lay-icon>
								<lay-icon type="layui-icon-screen-restore" v-else @click="exit()"></lay-icon>
							</lay-fullscreen>
						</lay-menu-item>
						<!-- 						<lay-dropdown @mouseenter="mouseenter($event)">
							<lay-menu-item>
								<lay-icon type="layui-icon-notice"></lay-icon>
							</lay-menu-item>
							<template #content> 内容 </template>
						</lay-dropdown> -->
						<lay-dropdown @mouseenter="mouseenter($event)">
							<lay-menu-item>
								<lay-icon type="layui-icon-username"></lay-icon>
							</lay-menu-item>
							<template #content>
								<lay-dropdown-menu>
									<!-- 									<lay-dropdown-menu-item>用户信息</lay-dropdown-menu-item> -->
									<lay-dropdown-menu-item @click="_loginOutSure">注 销</lay-dropdown-menu-item>
								</lay-dropdown-menu>
							</template>
						</lay-dropdown>
						<lay-menu-item @click="changeVisible" @mouseenter="mouseenter($event)">
							<lay-icon type="layui-icon-more-vertical"></lay-icon>
						</lay-menu-item>
					</lay-menu>
					<span class="layui-nav-bar" style="top: 0;left:unset"
						:style="{opacity: navBarOpacity,width:navBarWidth+'px',left:navBarLeft+'px'}"></span>
				</lay-header>
				<!-- content -->
				<lay-body>
					<global-tab style="height: 42px;"></global-tab>
					<global-content></global-content>
				</lay-body>
				<lay-footer></lay-footer>
			</lay-layout>
		</lay-layout>
		<global-setup v-model="visible"></global-setup>
	</lay-config-provider>
</template>

<script lang="ts">
	import {
		ref
	} from "vue";
	import DarkIcon from "../components/DarkIcon.vue"
	import LightIcon from "../components/LightIcon.vue"
	import {
		layer
	} from '@layui/layer-vue'
	import {
		useAppStore
	} from "../store/app";
	import {
		loginOut
	} from "../../src/api/api/user";
	import GlobalSetup from "./Global/GlobalSetup.vue";
	import GlobalContent from "./Global/GlobalContent.vue";
	import GlobalTab from "./Global/GlobalTab.vue";
	import GlobalMenu from "./Global/GlobalMenu.vue";
	import '@layui/layui-vue/es/checkbox/index.css';

	export default {
		components: {
			GlobalSetup,
			GlobalContent,
			GlobalTab,
			GlobalMenu,
			DarkIcon,
			LightIcon
		},
		setup() {

			const appStore = useAppStore();
			const collapseState = ref(false);
			const visible = ref(false);
			const sideWidth = ref("230px");

			const changeVisible = function() {
				visible.value = !visible.value;
			};

			// 侧边状态
			const collapse = function() {
				collapseState.value = !collapseState.value;
				sideWidth.value = collapseState.value ? "60px" : "230px";
			};

			// 路由刷新
			const refresh = function() {
				appStore.routerAlive = false;
				setTimeout(function() {
					appStore.routerAlive = true;
				}, 500);
			};
			const navBarOpacity = ref(0)
			const navBarWidth = ref(0)
			const navBarLeft = ref(0)
			const mouseenter = (e: MouseEvent) => {
				navBarOpacity.value = 1
				// @ts-ignore
				navBarWidth.value = e.target.offsetWidth
				// @ts-ignore
				navBarLeft.value = e.target.offsetLeft + e.target.parentNode.offsetLeft
			}
			// return instance
			return {
				sideWidth,
				changeVisible,
				collapseState,
				collapse,
				appStore,
				refresh,
				visible,
				mouseenter,
				navBarOpacity,
				navBarWidth,
				navBarLeft
			};
		},
		methods: {
			_loginOutSure() {
				let $this = this;
				layer.confirm("您确定要注销吗？", {
					title: "提示",
					btn: [{
							text: '确定',
							callback: function(id) {
								layer.close(id);
								$this.__loginOutSure();
							}
						},
						{
							text: '取消',
							callback: function(id) {
								layer.close(id);
							}
						}
					]
				});
			},
			async __loginOutSure() {
				let idx = layer.load(2);
				let result = await loginOut({});
				localStorage.removeItem('token');
				setTimeout((item) => {
					window.location.href = result;
					layer.close(idx);
				}, 500);
			}
		}
	};
</script>

<style>
	.layui-layout .layui-header .layui-form-switch {
		border: 1px solid rgba(60, 60, 60, 0.29);
		background-color: #f1f1f1 !important;
		margin-top: -8px;
	}

	.layui-layout .layui-header .layui-form-switch svg {
		position: absolute;
		width: 12px;
		height: 12px;
		top: 3px;
		left: 3px;
	}
</style>