2025-03-26

src/layouts/components/Main/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <Maximize v-if="maximize" />
+    <Tabs v-if="tabs" />
+    <el-main>
+        <router-view v-slot="{ Component, route }">
+            <transition appear name="fade-transform" mode="out-in">
+                <keep-alive :include="keepAliveName">
+                    <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
+                </keep-alive>
+            </transition>
+        </router-view>
+    </el-main>
+</template>
+
+<script setup lang="ts">
+//onBeforeUnmount
+import { ref, provide, 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";
+
+const globalStore = useGlobalStore();
+//isCollapse
+const { maximize, layout, tabs } = storeToRefs(globalStore);
+
+const keepAliveStore = useKeepAliveStore();
+const { keepAliveName } = storeToRefs(keepAliveStore);
+// 注入刷新页面方法
+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">
+@import "./index.scss";
+</style>