admin/src/layout/index.vue

<template>
    <el-container id="hc-layout-box" class="hc-layout-box">
        <el-header class="hc-layout-header">
            <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '90px' : '200px'};`" @click="logoClick">
                <span v-if="!isCollapse" class="logo-name">{{ appLogoName }}</span>
                <span v-else class="logo-name sub">管理后台</span>
            </div>
            <div class="header-top-collapse-bar" @click="collapseChange">
                <hc-icon v-if="isCollapse" name="menu-unfold" />
                <hc-icon v-else name="menu-fold" />
            </div>
            <div class="header-top-menu-bar">
                <TopMenu />
            </div>
            <div class="header-content-bar">
                <hc-upload-bar />
                <HcRefresh />
                <HcColor />
                <HcTheme />
                <UserInfoBar @load="userInfoLoad" />
            </div>
        </el-header>
        <el-container class="hc-layout-container">
            <el-aside class="hc-layout-aside" :class="[isCollapse ? 'is-collapse' : '']" :width="isCollapse ? '90px' : '200px'">
                <MenuBar :collapse="isCollapse" :cur="menuBarKey" :datas="menuBarData" :msg-count="msgCount" @change="menuBarChange" />
            </el-aside>
            <el-main class="hc-layout-main">
                <div class="hc-router-menu-bar">
                    <RouterMenu @load="routerMenuLoad" />
                </div>
                <div id="hc-main-box" class="hc-main-page">
                    <MainBody />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

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

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

//子组件
import TopMenu from './modules/TopMenu.vue'
import MenuBar from './modules/MenuBar.vue'
import HcRefresh from './modules/Refresh.vue'
import HcColor from './modules/Color.vue'
import HcTheme from './modules/Theme.vue'
import UserInfoBar from './modules/UserInfoBar.vue'
import RouterMenu from './modules/RouterMenu.vue'
import MainBody from './modules/mainBody.vue'

//logo
const appLogoName = ref(store.getLogoName)

//菜单数据
const menuBarKey = ref('')
const menuBarData = ref(store.getMenus)

//渲染完成
onMounted(() => {
    initButtons()
})

//路由信息
const routerMenuLoad = ({ key }) => {
    menuBarKey.value = key
}

// 是否折叠
const isCollapse = ref(false)
const collapseChange = () => {
    const bool = !isCollapse.value
    isCollapse.value = bool
    store.setCollapse(bool)
}

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

//消息数量
const msgCount = ref({
    allCount: 0,
    taskCount: 0,
    messageCount: 0,
    messageCount_1: 0,
    messageCount_2: 0,
    messageCount_3: 0,
    messageCount_4: 0,
    messageCount_5: 0,
})

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

//首页
const logoClick = () => {
    router.push({ name: 'index' })
}
</script>

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