hac/src/layout/index.vue

<template>
    <el-container class="hc-layout-box">
        <el-aside :class="[isCollapse?'is-collapse':'']" :width="isCollapse?'90px':'200px'"
                  class="hc-aside-box">
            <div class="hc-aside-user-info">
                <img :alt="userInfo['account']" :src="userInfo['avatar'] || avatarPng" class="user-avatar" @click="toUserInfo">
                <div class="user-name" @click="toUserInfo">{{ userInfo['real_name'] }}</div>
            </div>
            <div class="hc-aside-menu-box">
                <el-scrollbar>
                    <MenuBar :collapse="isCollapse" :cur="MenuBarKey" :datas="MenuBarData" @change="MenuBarChange"/>
                </el-scrollbar>
            </div>
        </el-aside>
        <el-container class="hc-container-view">
            <el-header class="hc-header-view">
                <div id="hc-header-page-name" class="hc-header-page-name">
                    <span class="collapse-menu-icon" @click="collapseChange(false)" v-if="isCollapse">
                        <HcIcon name="menu-unfold"/>
                    </span>
                    <span class="collapse-menu-icon" @click="collapseChange(true)" v-else>
                        <HcIcon name="menu-fold"/>
                    </span>
                    <span class="project-name">项目管控平台</span>
                </div>
                <div class="hc-header-top-menu-bar">
                    <TopMenuBar/>
                </div>
                <div class="hc-header-content">
                    <UserInfoBar/>
                </div>
            </el-header>
            <el-main id="hc-main-box" class="hc-main-box">
                <router-view v-if="reloadRouter" v-slot="{Component}">
                    <transition name="fade-transform">
                        <keep-alive :max="10" :exclude="[]">
                            <component :is="Component"/>
                        </keep-alive>
                    </transition>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {useRouter, useRoute} from 'vue-router'
import {useAppStore} from "~src/store";
import avatarPng from '~src/assets/images/avatar.png';
import MenuBar from "./modules/MenuBar.vue"
import UserInfoBar from "./modules/UserInfoBar.vue"
import TopMenuBar from "./modules/TopMenuBar.vue"
import {setImageColorStyle} from "js-fast-way";
import {initButtons} from "~sto/app";

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

//路由参数
const reloadRouter = ref(true)
const BarMenuKey = useRoutes?.name ?? 'home-index';

//主题和色调变量
const AppColor = ref(useAppState.getColor);

//顶部菜单数据和相关处理
const MenuBarKey = ref(BarMenuKey);
const MenuBarData = ref(useAppState.getMenus)
const isCollapse = ref(useAppState.getCollapse)
const userInfo = ref(useAppState.getUserInfo);

//渲染完成
onMounted(() => {
    initButtons()
    setLogoImageColor()
    setRouteParentMenu(useRoutes?.meta?.parentMenu)
})

//监听
watch(() => [
    useAppState.getMenus,
    useRoutes?.name,
    useAppState.getCollapse,
], ([userMenus, RouteName, collapse]) => {
    MenuBarData.value = userMenus
    MenuBarKey.value = RouteName ?? 'home-index'
    isCollapse.value = collapse
})

//监听
watch(() => [
    useAppState.getColor,
], ([ColorVal]) => {
    AppColor.value = ColorVal
    setLogoImageColor()
})

//监听
watch(() => [
    useRoutes?.meta,
], ([meta]) => {
    setRouteParentMenu(meta?.parentMenu)
}, {deep: true})

//设置路由选中父级菜单
const setRouteParentMenu = (parentMenu) => {
    if (parentMenu) {
        nextTick(() => {
            MenuBarKey.value = parentMenu;
        })
    }
}

//设置Logo图片颜色
const setLogoImageColor = () => {
    setImageColorStyle('logo-icon', AppColor.value?.color)
}

//是否折叠
const collapseChange = (bool) => {
    isCollapse.value = bool
    useAppState.setCollapse(bool)
}

//菜单被点击
const MenuBarChange = (item) => {
    MenuBarKey.value = item?.code;
    router.push({name: item?.code});
}

//跳转到个人中心
const toUserInfo = () => {
    router.push({name: 'user-index'});
}
</script>

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