mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2026-02-22 22:27:00 +00:00
114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<script setup>
|
|
import TopNav from '@/layout/TopNav.vue'
|
|
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
|
|
import { useTabsViewStore } from '@/stores/TabsViewStore'
|
|
import { GlobalLayoutMode } from '@/consts/GlobalConstants'
|
|
import { useBreadcrumbConfigStore } from '@/stores/BreadcrumbConfigStore'
|
|
import { APP_VERSION } from '@/config'
|
|
import { getParentRootKey } from '@/route/RouteUtils'
|
|
import { onKeyStroke } from '@vueuse/core'
|
|
|
|
const globalConfigStore = useGlobalConfigStore()
|
|
const tabsViewStore = useTabsViewStore()
|
|
const breadcrumbConfigStore = useBreadcrumbConfigStore()
|
|
|
|
const toggleMainFullscreen = () => {
|
|
tabsViewStore.toggleMainFullscreen()
|
|
}
|
|
|
|
onKeyStroke('Escape', (e) => {
|
|
if (tabsViewStore.isMainMaximized) {
|
|
e.preventDefault()
|
|
tabsViewStore.isMainMaximized = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<el-container class="height100">
|
|
<el-header>
|
|
<top-nav />
|
|
</el-header>
|
|
<el-header
|
|
v-if="globalConfigStore.layoutMode === GlobalLayoutMode.TOP && globalConfigStore.isShowBreadcrumb"
|
|
class="breadcrumb-header"
|
|
style="height: 40px"
|
|
>
|
|
<common-breadcrumb
|
|
style="padding-top:15px"
|
|
:show-icon="tabsViewStore.isShowTabIcon"
|
|
:label-config="breadcrumbConfigStore.breadcrumbConfig"
|
|
/>
|
|
</el-header>
|
|
<el-header
|
|
v-if="tabsViewStore.isTabMode"
|
|
class="tabs-header tabMode"
|
|
>
|
|
<common-tabs-view />
|
|
</el-header>
|
|
<el-main
|
|
class="home-main"
|
|
:class="{ 'is-maximized': tabsViewStore.isMainMaximized }"
|
|
>
|
|
<div
|
|
class="fullscreen-btn"
|
|
@click="toggleMainFullscreen"
|
|
>
|
|
<common-icon
|
|
:icon="tabsViewStore.isMainMaximized ? 'FullscreenExitFilled' : 'FullscreenFilled'"
|
|
:size="20"
|
|
/>
|
|
</div>
|
|
<router-view v-slot="{ Component, route }">
|
|
<transition
|
|
:name="route.meta?.transition!==false?'slide-fade':''"
|
|
mode="out-in"
|
|
>
|
|
<KeepAlive
|
|
v-if="tabsViewStore.isTabMode&&tabsViewStore.isCachedTabMode"
|
|
:include="tabsViewStore.cachedTabs"
|
|
:max="tabsViewStore.maxCacheCount"
|
|
>
|
|
<component
|
|
:is="Component"
|
|
:key="getParentRootKey(route)"
|
|
/>
|
|
</KeepAlive>
|
|
<component
|
|
:is="Component"
|
|
v-else
|
|
:key="route.fullPath"
|
|
/>
|
|
</transition>
|
|
</router-view>
|
|
<el-container class="text-center padding-10 flex-center">
|
|
<span>
|
|
<el-text>Copyright © 2024 Version: {{ APP_VERSION }}</el-text>
|
|
<el-link
|
|
href="https://github.com/fugary/simple-element-plus-template"
|
|
type="primary"
|
|
target="_blank"
|
|
>
|
|
https://github.com/fugary/simple-element-plus-template
|
|
</el-link>
|
|
</span>
|
|
</el-container>
|
|
<el-backtop
|
|
v-common-tooltip="$t('common.label.backtop')"
|
|
target=".home-main"
|
|
:right="50"
|
|
:bottom="50"
|
|
/>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tabs-header {
|
|
padding-top: 6px !important;
|
|
height: auto !important;
|
|
border-bottom: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|