mirror of
https://github.com/zclzone/vue-naive-admin.git
synced 2025-05-01 06:39:01 +08:00
64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<!--------------------------------
|
||
- @Author: Ronnie Zhang
|
||
- @LastEditor: Ronnie Zhang
|
||
- @LastEditTime: 2023/12/16 18:49:42
|
||
- @Email: zclzone@outlook.com
|
||
- Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
|
||
--------------------------------->
|
||
|
||
<template>
|
||
<n-config-provider
|
||
class="wh-full"
|
||
:locale="zhCN"
|
||
:date-locale="dateZhCN"
|
||
:theme="appStore.isDark ? darkTheme : undefined"
|
||
:theme-overrides="appStore.naiveThemeOverrides"
|
||
>
|
||
<router-view v-if="Layout" v-slot="{ Component, route: curRoute }">
|
||
<component :is="Layout">
|
||
<KeepAlive :include="keepAliveNames">
|
||
<component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
|
||
</KeepAlive>
|
||
</component>
|
||
|
||
<LayoutSetting v-if="layoutSettingVisible" class="fixed right-12 top-1/2 z-999" />
|
||
</router-view>
|
||
</n-config-provider>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
|
||
import { layoutSettingVisible } from './settings'
|
||
import { LayoutSetting } from '@/components'
|
||
import { useAppStore, useTabStore } from '@/store'
|
||
|
||
const layouts = new Map()
|
||
function getLayout(name) {
|
||
// 利用map将加载过的layout缓存起来，防止重新加载layout导致页面闪烁
|
||
if (layouts.get(name))
|
||
return layouts.get(name)
|
||
const layout = markRaw(defineAsyncComponent(() => import(`@/layouts/${name}/index.vue`)))
|
||
layouts.set(name, layout)
|
||
return layout
|
||
}
|
||
|
||
const route = useRoute()
|
||
const appStore = useAppStore()
|
||
if (appStore.layout === 'default')
|
||
appStore.setLayout('')
|
||
const Layout = computed(() => {
|
||
if (!route.matched?.length)
|
||
return null
|
||
return getLayout(route.meta?.layout || appStore.layout)
|
||
})
|
||
|
||
const tabStore = useTabStore()
|
||
const keepAliveNames = computed(() => {
|
||
return tabStore.tabs.filter(item => item.keepAlive).map(item => item.name)
|
||
})
|
||
|
||
watchEffect(() => {
|
||
appStore.setThemeColor(appStore.primaryColor, appStore.isDark)
|
||
})
|
||
</script>
|