DefaultLayout.vue
1 <script setup lang="tsx"> 2 import HeaderLayout from '@/renderer/components/layouts/HeaderLayout.vue' 3 import SidebarLayout from '@/renderer/components/layouts/SidebarLayout.vue' 4 import FooterLayout from '@/renderer/components/layouts/FooterLayout.vue' 5 import { useRouteFeatures } from '@/renderer/composables/useRouteFeatures' 6 import { useSnackbarStore } from '@/renderer/store/snackbar' 7 const snackbarStore = useSnackbarStore() 8 const { hasComponent } = useRouteFeatures() 9 </script> 10 11 <template> 12 <v-app> 13 <v-layout> 14 <v-snackbar 15 v-model="snackbarStore.isShow" 16 timeout="4000" 17 :color="snackbarStore.type" 18 location="top" 19 > 20 <div class="d-flex align-center"> 21 <v-icon class="mr-2">{{ snackbarStore.getIcon() }}</v-icon> 22 <span class="snack-span">{{ $t(snackbarStore.message) }}</span> 23 </div> 24 25 <template #actions> 26 <v-btn 27 icon="mdi-close-box" 28 rounded="lg" 29 variant="plain" 30 @click="snackbarStore.isShow = false" 31 > 32 </v-btn> 33 </template> 34 </v-snackbar> 35 <SidebarLayout v-if="hasComponent('sideDrawer').value"> 36 <router-view name="sideDrawer" /> 37 <template #append> 38 <router-view v-if="hasComponent('sideDock').value" name="sideDock" /> 39 </template> 40 </SidebarLayout> 41 <HeaderLayout /> 42 <v-main class="d-flex justify-center custom-scroll" scrollable> 43 <v-container> 44 <v-sheet> 45 <router-view name="centralStage" /> 46 <router-view /> 47 </v-sheet> 48 </v-container> 49 </v-main> 50 <FooterLayout v-if="hasComponent('bottomConsole').value"> 51 <router-view name="bottomConsole" /> 52 </FooterLayout> 53 </v-layout> 54 </v-app> 55 </template> 56 57 <style> 58 .snack-span { 59 word-break: break-word; 60 } 61 62 .custom-scroll .v-main__scroller { 63 overflow-y: scroll !important; 64 } 65 </style>