analysis/src/layout/index.vue

<template>
    <el-container class="hc-layout-main">
        <el-aside class="hc-layout-aside" width="200px">
            <hc-body class="hc-layout-aside-body">
                <div class="hc-layout-aside-logo hc-flex-center h-[46px]">
                    <img :src="logoPng" alt="logo" class="w-[26px]">
                    <span class="ml-[6px] text-[22px] font-bold">数据分析系统</span>
                    <hc-upload-bar />
                </div>
                <div class="hc-layout-aside-menu">
                    <MenuBar :cur="menuBarKey" :datas="menuBarData" @change="menuBarChange" />
                </div>
                <div class="hc-layout-aside-user">
                    <UserInfoBar @load="userInfoLoad" />
                </div>
            </hc-body>
        </el-aside>
        <el-main class="hc-layout-page">
            <hc-body id="hc-main-box">
                <router-view />
            </hc-body>
        </el-main>
    </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useAppStore } from '~src/store'
import { useRoute, useRouter } from 'vue-router'
import { getMenuData } from '~src/router/routers'
import { initButtons } from '~store/app'

//logo文件
import logoPng from '~src/assets/logo/logo.png'

//初始组合式
const router = useRouter()
const useRoutes = useRoute()
const store = useAppStore()

//子组件
import MenuBar from './modules/MenuBar.vue'
import UserInfoBar from './modules/UserInfoBar.vue'

//菜单数据
const menuBarKey = ref(useRoutes?.meta?.parent || useRoutes.name)
const menuBarData = ref(store.menus)
// const menuBarData = ref([])

//渲染完成
onMounted(async () => {
    initButtons()
    menuBarData.value = await getMenuData()
    console.log(menuBarData.value, 'menuBarData')
})

//菜单被点击
const menuBarChange = ({ code }) => {
    menuBarKey.value = code
    router.push({ name: code })
}

//用户信息
const userInfoLoad = (data) => {
    console.log('用户信息', data)
}
</script>

<style lang="scss">
@import "./index.scss";
</style>