for_client/src/layout/modules/MenuStretchBar.vue

<template>
    <el-tooltip content="显示/隐藏 菜单记录" placement="top">
        <div class="header-icon-bar" @click="toMenuBarShowClick">
            <HcIcon :class="menuBarShow?'text-main':''" :fill="menuBarShow" class="header-icon" name="apps"/>
        </div>
    </el-tooltip>
</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";

//初始化变量
const useAppState = useAppStore()
const menuBarShow = ref(useAppState.menuBarShow)

//监听
watch(() => [
    useAppState.menuBarShow
], ([show]) => {
    menuBarShow.value = show
})

const toMenuBarShowClick = () => {
    useAppState.menuBarShow = !menuBarShow.value
}
</script>

<style lang="scss" scoped>
.header-icon-bar {
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 30px;
    font-size: 26px;
    border: 1px solid #00000000;
    background: #f1f5f8;
    color: #202532;
    box-shadow: var(--hc-shadow);
}
.hc-layout-box .hc-container-view.home .hc-header-view .hc-header-content .header-icon-bar {
    border: 1px solid white;
    color: inherit;
    box-shadow: initial;
    background: initial;
}
</style>