You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.0 KiB
Vue
117 lines
4.0 KiB
Vue
<script setup>
|
|
import {useConfig, useCollapsed} from "~/store"
|
|
import {isDark} from '~/composables'
|
|
|
|
const $config = useConfig()
|
|
|
|
const layout_content_wrapper_background = ref($config.value.layout.background)
|
|
const layout_sider_wrapper_background = ref($config.value.layout.sider.background)
|
|
|
|
const layout_header_wrapper_height = ref(`${$config.value.layout.header}px`)
|
|
const layout_footer_wrapper_height = ref(`${$config.value.layout.footer}px`)
|
|
|
|
const layout_router_view_margin_bottom = ref('10px');
|
|
const layout_router_view_wrapper_min_height = ref(`calc(100vh - ${$config.value.layout.header}px - ${$config.value.layout.footer}px - 1px - ${layout_router_view_margin_bottom.value})`)
|
|
const layout_content_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px)`)
|
|
const layout_content_container_wrapper_height = ref(`calc(100vh - ${$config.value.layout.header}px)`)
|
|
|
|
const $collapsed = useCollapsed()
|
|
const collapsedOnUpdate = (e) => {
|
|
$collapsed.value = e
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="layout_wrapper">
|
|
<n-layout has-sider class="layout_header_container_wrapper">
|
|
<n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
|
|
collapse-mode="width" :collapsed-width="$config.layout.sider.close"
|
|
:width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
|
|
:native-scrollbar="false" bordered>
|
|
<Logo></Logo>
|
|
</n-layout-sider>
|
|
<n-layout>
|
|
<n-layout-header class="layout_header_wrapper" bordered>
|
|
<n-button ml-5 text @click="collapsedOnUpdate(!$collapsed)">
|
|
<Icon v-if="$collapsed" type="menu-unfold-one"></Icon>
|
|
<Icon v-else type="menu-fold-one"></Icon>
|
|
</n-button>
|
|
<Breadcrumb></Breadcrumb>
|
|
<User></User>
|
|
</n-layout-header>
|
|
</n-layout>
|
|
</n-layout>
|
|
<n-layout has-sider class="layout_content_container_wrapper">
|
|
<n-layout-sider :collapsed="$collapsed" :class="[isDark?'':'layout_sider_background']"
|
|
collapse-mode="width" :collapsed-width="$config.layout.sider.close"
|
|
:width="$config.layout.sider.open" :inverted="$config.layout.sider.inverted || isDark"
|
|
:native-scrollbar="false" bordered>
|
|
<Menu></Menu>
|
|
</n-layout-sider>
|
|
<n-layout :class="[isDark?'':'layout_content_background']">
|
|
<n-layout position="absolute" :native-scrollbar="false" class="layout_content_wrapper">
|
|
<div class="layout_router_view_wrapper" px-2>
|
|
<router-view v-slot="{ Component }">
|
|
<component :is="Component"/>
|
|
</router-view>
|
|
</div>
|
|
<n-layout-footer class="layout_footer_wrapper" text="xs center gray-500" bordered>
|
|
<span>{{ $config.version.desc }}</span>
|
|
<span mx-3>{{ $config.version.version }}</span>
|
|
<span>{{ $config.version.date }}</span>
|
|
</n-layout-footer>
|
|
</n-layout>
|
|
</n-layout>
|
|
</n-layout>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.layout_wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.layout_content_container_wrapper {
|
|
height: v-bind(layout_content_container_wrapper_height);
|
|
}
|
|
|
|
.layout_header_container_wrapper {
|
|
height: v-bind(layout_header_wrapper_height);
|
|
}
|
|
|
|
.layout_header_wrapper {
|
|
position: relative;
|
|
height: v-bind(layout_header_wrapper_height);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.layout_sider_background {
|
|
background: v-bind(layout_sider_wrapper_background);
|
|
}
|
|
|
|
.layout_content_background {
|
|
background: v-bind(layout_content_wrapper_background);
|
|
}
|
|
|
|
.layout_footer_wrapper {
|
|
line-height: v-bind(layout_footer_wrapper_height);
|
|
height: v-bind(layout_footer_wrapper_height);
|
|
}
|
|
|
|
.layout_content_wrapper {
|
|
top: 0.5rem;
|
|
background: #00000000;
|
|
height: v-bind(layout_content_wrapper_height);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layout_router_view_wrapper {
|
|
min-height: v-bind(layout_router_view_wrapper_min_height);
|
|
overflow: hidden;
|
|
margin-bottom: v-bind(layout_router_view_margin_bottom);
|
|
}
|
|
</style>
|