mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2025-11-12 14:27:49 +00:00
73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup>
|
|
import LeftMenu from '@/layout/LeftMenu.vue'
|
|
import TopNav from '@/layout/TopNav.vue'
|
|
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
|
|
import { useTabsViewStore } from '@/stores/TabsViewStore'
|
|
import { useMenuStore } from '@/stores/MenuStore'
|
|
import { GlobalLayoutMode } from '@/consts/GlobalConstants'
|
|
import { computed } from 'vue'
|
|
import GlobalSettings from '@/views/components/global/GlobalSettings.vue'
|
|
const globalConfigStore = useGlobalConfigStore()
|
|
const menuStore = useMenuStore()
|
|
const tabsViewStore = useTabsViewStore()
|
|
const showLeftMenu = computed(() => {
|
|
return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT
|
|
})
|
|
menuStore.loadBaseTopMenus()
|
|
menuStore.loadBusinessMenus()
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="index-container">
|
|
<el-aside
|
|
v-if="showLeftMenu"
|
|
class="index-aside"
|
|
width="auto"
|
|
>
|
|
<left-menu />
|
|
</el-aside>
|
|
<el-container>
|
|
<el-header>
|
|
<top-nav />
|
|
</el-header>
|
|
<el-header
|
|
v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
|
|
class="tabs-header"
|
|
>
|
|
<common-breadcrumb />
|
|
</el-header>
|
|
<el-header
|
|
v-if="tabsViewStore.isTabMode"
|
|
class="tabs-header"
|
|
>
|
|
<common-tabs-view />
|
|
</el-header>
|
|
<el-main>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition
|
|
name="slide-fade"
|
|
mode="out-in"
|
|
>
|
|
<KeepAlive
|
|
:include="tabsViewStore.cachedTabs"
|
|
:max="10"
|
|
>
|
|
<component
|
|
:is="Component"
|
|
:key="route.fullPath"
|
|
/>
|
|
</KeepAlive>
|
|
</transition>
|
|
</router-view>
|
|
</el-main>
|
|
<global-settings />
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
<style scoped>
|
|
.tabs-header {
|
|
margin-top: 5px;
|
|
height: 40px
|
|
}
|
|
</style>
|