admin-govern/src/layouts/admin/index.vue

<template>
    <component :is='config.layout.layoutMode'></component>
</template>

<script setup lang='ts'>
import { reactive } from 'vue'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useAdminInfo } from '@/stores/adminInfo'
import { useRoute } from 'vue-router'
import Default from '@/layouts/admin/container/default.vue'
import Classic from '@/layouts/admin/container/classic.vue'
import Streamline from '@/layouts/admin/container/streamline.vue'
import Double from '@/layouts/admin/container/double.vue'
import { onMounted, onBeforeMount } from 'vue'
import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
import router from '@/router/index'
import { useEventListener } from '@vueuse/core'
import { isEmpty } from 'lodash-es'
import { setNavTabsWidth } from '@/utils/layout'
import { adminBaseRoutePath } from '@/router/static'

defineOptions({
    components: { Default, Classic, Streamline, Double }
})

const navTabs = useNavTabs()
const config = useConfig()
const route = useRoute()
const adminInfo = useAdminInfo()

const state = reactive({
    autoMenuCollapseLock: false
})

onMounted(() => {
    // if (!adminInfo.token) return router.push({ name: 'login' })

    init()
    setNavTabsWidth()
    useEventListener(window, 'resize', setNavTabsWidth)
})
onBeforeMount(() => {
    onAdaptiveLayout()
    useEventListener(window, 'resize', onAdaptiveLayout)
})

const init = () => {
    /**
     * 后台初始化请求，获取站点配置，动态路由等信息
     */
    handleAdminRoute([
        {
            id: 1,
            pid: 0,
            type: 'menu',
            title: '控制台',
            name: 'dashboard',
            path: 'dashboard',
            icon: 'fa fa-dashboard',
            menu_type: 'tab',
            url: '',
            component: '/src/views/dashboard/index.vue',
            keepalive: 'dashboard',
            extend: 'none',
            children: [
                {
                    id: 94,
                    pid: 1,
                    type: 'button',
                    title: '查看',
                    name: 'dashboard/index',
                    path: '',
                    icon: '',
                    menu_type: null,
                    url: '',
                    component: '',
                    keepalive: 0,
                    extend: 'none'
                }
            ]
        }
    ])
    // 预跳转到上次路径
    if (route.params.to) {
        const lastRoute = JSON.parse(route.params.to as string)
        if (lastRoute.path != adminBaseRoutePath) {
            let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
            routePush({ path: lastRoute.path, query: query })
            return
        }
    }

    // 跳转到第一个菜单
    let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
    if (firstRoute) routePush(firstRoute.path)
}

const onAdaptiveLayout = () => {
    let defaultBeforeResizeLayout = {
        layoutMode: config.layout.layoutMode,
        menuCollapse: config.layout.menuCollapse
    }

    const clientWidth = document.body.clientWidth
    if (clientWidth < 1024) {
        /**
         * 锁定窗口改变自动调整 menuCollapse
         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
         */
        if (!state.autoMenuCollapseLock) {
            state.autoMenuCollapseLock = true
            config.setLayout('menuCollapse', true)
        }
        config.setLayout('shrink', true)
        config.setLayoutMode('Classic')
    } else {
        state.autoMenuCollapseLock = false
        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
        config.setLayout('shrink', false)
        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
    }
}
</script>