forked from Leaf/amber-ui
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { NLayout } from "naive-ui";
|
|
import { useUserStore } from "../stores/user";
|
|
import Guest from "../pages/guest/index.vue";
|
|
import router from "../router";
|
|
import Header from "./Header.vue";
|
|
import { useAppStore } from "@/stores/app";
|
|
import element from "@/config/element";
|
|
import { useIsMobile } from "@/utils/composables";
|
|
const currentRoute = computed(() => router.currentRoute.value.name);
|
|
|
|
const userStore = useUserStore();
|
|
const route = useRoute();
|
|
|
|
const isMobile = useIsMobile();
|
|
|
|
const mainContainer = ref();
|
|
|
|
onMounted(() => {
|
|
element.mainContainer = mainContainer.value;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Header
|
|
v-show="userStore.logined"
|
|
style="
|
|
min-height: var(--header-height);
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
"
|
|
></Header>
|
|
|
|
<n-layout
|
|
:native-scrollbar="isMobile"
|
|
position="absolute"
|
|
style="margin-top: var(--header-height)"
|
|
ref="mainContainer"
|
|
>
|
|
<!-- <n-layout-sider
|
|
v-if="userStore.logined && !isMobile"
|
|
:collapsed-width="0"
|
|
:native-scrollbar="false"
|
|
:show-collapsed-content="false"
|
|
:width="240"
|
|
bordered
|
|
collapse-mode="width"
|
|
show-trigger="arrow-circle"
|
|
class="select-none"
|
|
@collapse="menuCollapsed.left = true"
|
|
@expand="menuCollapsed.left = false"
|
|
>
|
|
<Menu v-show="!isMobile"></Menu>
|
|
</n-layout-sider> -->
|
|
<n-back-top v-if="!isMobile" :right="100" />
|
|
|
|
<n-layout :native-scrollbar="isMobile">
|
|
<!-- <Guest v-if="!userStore.logined && currentRoute != '/auth/login'" />
|
|
<Container v-else /> -->
|
|
<Guest
|
|
v-if="!userStore.logined && !currentRoute?.startsWith('/auth')"
|
|
style="min-height: 85vh"
|
|
/>
|
|
<div v-else class="pt-2">
|
|
<!-- <div style="height: calc(var(--header-height)*2)"></div> -->
|
|
|
|
<router-view :key="route.path"> </router-view>
|
|
|
|
<!-- <Container /> -->
|
|
<!-- <div class="p-4 pt-0 pb-0 mb-0 h-screen">
|
|
<router-view v-slot="{ Component }" :key="route.path">
|
|
<transition mode="out-in" name="fade">
|
|
<component :is="Component" />
|
|
</transition>
|
|
</router-view>
|
|
</div> -->
|
|
</div>
|
|
</n-layout>
|
|
</n-layout>
|
|
</template>
|