129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
<template>
|
|
<n-config-provider
|
|
:theme-overrides="store.state.themeOverrides"
|
|
:theme="store.theme === 'dark' ? darkTheme : null"
|
|
:locale="zhCN"
|
|
:date-locale="dateZhCN"
|
|
style="height: 100%"
|
|
>
|
|
<n-loading-bar-provider>
|
|
<n-dialog-provider>
|
|
<SideBar />
|
|
<MainLayout />
|
|
</n-dialog-provider>
|
|
</n-loading-bar-provider>
|
|
</n-config-provider>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { darkTheme, zhCN, dateZhCN } from "naive-ui";
|
|
import { computed, onBeforeUnmount, onMounted, getCurrentInstance,onBeforeMount,reactive,watch } from "vue";
|
|
import { DeviceType } from "@/types/store";
|
|
import { useLayoutStore } from "@/components/skeleton/index.js";
|
|
import autofit from "autofit.js";
|
|
import { Session, Local } from "@/utils/storage.js";
|
|
import SideBar from '@/components/skeleton/sidebar/SideBar.vue'
|
|
import MainLayout from '@/components/skeleton/MainLayout.vue'
|
|
const store = useLayoutStore();
|
|
const isShowHeader = computed(() => store?.isShowHeader());
|
|
const state = reactive({
|
|
ResolutionRatio: false,
|
|
});
|
|
onMounted(() => {
|
|
handleScreenResize();
|
|
window.addEventListener("resize", handleScreenResize);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", handleScreenResize);
|
|
});
|
|
onBeforeMount(() => {
|
|
getUser();
|
|
});
|
|
watch(
|
|
() => state.ResolutionRatio,
|
|
(newValue, oldValue) => {
|
|
if (newValue) {
|
|
console.log("newValue", newValue);
|
|
autofit.init({
|
|
dh: 924,
|
|
dw: 1872,
|
|
el: "#app",
|
|
resize: true
|
|
}, false)
|
|
} else {
|
|
autofit.init()
|
|
autofit.off()
|
|
}
|
|
}
|
|
);
|
|
const currentInstance = getCurrentInstance();
|
|
const { $request, $hadRule } =
|
|
currentInstance.appContext.config.globalProperties;
|
|
const getUser = async () => {
|
|
$request.HTTP.permission
|
|
.userDetail({ ID: Local.get("userInfo") ? Local.get("userInfo").ID : "" })
|
|
.then((res) => {
|
|
if (res.status == 0) {
|
|
state.ResolutionRatio = res.data.Extend.ResolutionRatio;
|
|
} else {
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
});
|
|
};
|
|
function handleScreenResize() {
|
|
const width = document.body.clientWidth;
|
|
if (width <= 768) {
|
|
store?.changeDevice(DeviceType.MOBILE);
|
|
store?.toggleCollapse(true);
|
|
} else if (width < 992 && width > 768) {
|
|
store?.changeDevice(DeviceType.PAD);
|
|
store?.toggleCollapse(true);
|
|
} else if (width < 1200 && width >= 992) {
|
|
store?.changeDevice(DeviceType.PC);
|
|
store?.toggleCollapse(false);
|
|
} else {
|
|
store?.changeDevice(DeviceType.PC);
|
|
store?.toggleCollapse(false);
|
|
}
|
|
}
|
|
function closeMenu() {
|
|
store?.toggleCollapse(true);
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/assets/styles/variables.scss";
|
|
.vaw-layout-container {
|
|
height: 100%;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
.mobile-shadow {
|
|
display: none;
|
|
}
|
|
.layout-mode-ttb {
|
|
margin-top: $logoHeight;
|
|
transition: all $transitionTime;
|
|
}
|
|
}
|
|
.is-mobile {
|
|
.mobile-shadow {
|
|
background-color: #000000;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 997;
|
|
}
|
|
.close-shadow {
|
|
display: none;
|
|
}
|
|
.show-shadow {
|
|
display: block;
|
|
opacity: 0.5;
|
|
transition: all $transitionTime;
|
|
}
|
|
}
|
|
</style>
|