初始化

frontend/src/layouts/components/Main/components/Maximize.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="maximize" @click="exitMaximize">
+    <i :class="'iconfont icon-tuichu'"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from "@/stores/modules/global";
+
+const globalStore = useGlobalStore();
+const exitMaximize = () => {
+  globalStore.setGlobalState("maximize", false);
+};
+</script>
+
+<style scoped lang="scss">
+.maximize {
+  position: fixed;
+  top: -25px;
+  right: -25px;
+  z-index: 999;
+  width: 55px;
+  height: 55px;
+  cursor: pointer;
+  background-color: var(--el-color-info);
+  border-radius: 50%;
+  opacity: 0.9;
+  &:hover {
+    background-color: var(--el-color-info-dark-2);
+  }
+  .iconfont {
+    position: relative;
+    top: 46%;
+    left: 19%;
+    font-size: 14px;
+    color: #ffffff;
+  }
+}
+</style>

frontend/src/layouts/components/Main/index.scss

@@ -0,0 +1,12 @@
+.el-main {
+  box-sizing: border-box;
+  min-height: 0;
+  padding: 15px;//主体padding
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--el-bg-color-page);
+}
+.el-footer {
+  height: auto;
+  padding: 0;
+}

frontend/src/layouts/components/Main/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <Maximize v-show="maximize" />
+    <Tabs v-if="tabs && showMenuFlag" />
+    <el-main>
+        <router-view v-slot="{ Component, route }" style="height: 100%">
+            <!-- {{ keepAliveName}} -->
+            <!-- <transition  name="slide-right" mode="out-in"> -->
+            <keep-alive :include="tabsMenuList">
+                <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+            <!-- </transition> -->
+        </router-view>
+    </el-main>
+    <el-footer>
+        <Footer />
+    </el-footer>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useDebounceFn } from '@vueuse/core'
+import { useGlobalStore } from '@/stores/modules/global'
+import { useKeepAliveStore } from '@/stores/modules/keepAlive'
+import Maximize from './components/Maximize.vue'
+import Tabs from '@/layouts/components/Tabs/index.vue'
+import Footer from '@/layouts/components/Footer/index.vue'
+import { useAuthStore } from '@/stores/modules/auth'
+import { useTabsStore } from '@/stores/modules/tabs'
+
+const tabStore = useTabsStore()
+const globalStore = useGlobalStore()
+const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
+const authStore = useAuthStore()
+const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore)
+const keepAliveStore = useKeepAliveStore()
+const { keepAliveName } = storeToRefs(keepAliveStore)
+//是否显示导航栏
+const showMenuFlag = computed(() => authStore.showMenuFlagGet)
+// 注入刷新页面方法
+const isRouterShow = ref(true)
+const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val)
+provide('refresh', refreshCurrentPage)
+
+// 监听当前页面是否最大化，动态添加 class
+watch(
+    () => maximize.value,
+    () => {
+        const app = document.getElementById('app') as HTMLElement
+        if (maximize.value) app.classList.add('main-maximize')
+        else app.classList.remove('main-maximize')
+    },
+    { immediate: true }
+)
+
+// 监听布局变化，在 body 上添加相对应的 layout class
+watch(
+    () => layout.value,
+    () => {
+        const body = document.body as HTMLElement
+        body.setAttribute('class', layout.value)
+    },
+    { immediate: true }
+)
+
+// 监听窗口大小变化，折叠侧边栏
+const screenWidth = ref(0)
+const listeningWindow = useDebounceFn(() => {
+    screenWidth.value = document.body.clientWidth
+    if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState('isCollapse', true)
+    if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState('isCollapse', false)
+}, 100)
+window.addEventListener('resize', listeningWindow, false)
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', listeningWindow)
+})
+</script>
+
+<style scoped lang="scss">
+@use './index.scss';
+</style>