ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: 处理控制台警告问题

Browse Source
This commit is contained in:
贾同学
2025-10-10 13:23:40 +08:00
parent 8e0b3be438
commit b319a89501
45 changed files with 6390 additions and 6341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
frontend/src/layouts/components/Main/index.vue
View File

@@ -1,83 +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 { ref, onBeforeUnmount, provide, watch, computed } 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">
@import "./index.scss";
</style>
<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>