/ src / renderer / components / layouts / DefaultLayout.vue
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>