marking-cet-web/src/layout/main/index.vue

<template>
  <div class="flex main-layout">
    <div class="flex direction-column main-layout-left" :class="{ 'is-collapse': mainLayoutStore.collapse }">
      <div class="drag flex items-center justify-center dou-yu main-layout-left-logo">
        <span v-if="mainLayoutStore.collapse">CET</span>
        <img v-else src="../../assets/images/logo.png" />
        <!-- <span v-show="!mainLayoutStore.collapse"> 电子阅卷</span> -->
      </div>
      <div class="flex-1 scroll-y-auto">
        <left-menu></left-menu>
      </div>
    </div>
    <div class="flex flex-1 direction-column scroll-auto main-layout-right">
      <main-header :reply-user-id="replyUserId" :message-visible="messageVisible" :in-layout="true"></main-header>
      <div class="flex-1 scroll-auto main-layout-right-content">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="MainLayout">
import { ref, provide } from 'vue'
import LeftMenu from './LeftMenu.vue'
import MainHeader from './MainHeader.vue'
import useMainLayoutStore from '@/store/layout'

const mainLayoutStore = useMainLayoutStore()

const replyUserId = ref<number>()

const messageVisible = ref<boolean>(false)

const setReplyUserId = (id: number) => {
  replyUserId.value = id
}

const setMessageVisible = (visible: boolean) => {
  messageVisible.value = visible
}

provide('setReplyUserId', setReplyUserId)
provide('setMessageVisible', setMessageVisible)
</script>

<style scoped lang="scss">
.main-layout {
  width: 100%;
  height: 100%;
  .main-layout-left {
    width: $LayoutLeftMenuWidth;
    // background-color: $LayoutLeftMenuBg;
    background-color: #333;
    transition: $LayoutLeftMenuTransition;
    border-right: $OnePixelLine;
    &.is-collapse {
      width: $LayoutLeftMenuCollapseWidth;
    }
    .main-layout-left-logo {
      min-height: $MainLayoutHeaderHeight;
      margin: 0 $BaseGapSpace;
      // border-bottom: $OnePixelLine;
      border-bottom: 1px solid #eee;
      font-size: $MainLayoutHeaderLogoFontSize;
      // color: $MainLayoutHeaderLogoFontColor;
      color: #fff;
    }
  }
  .main-layout-right {
    .main-layout-right-content {
      width: 100%;
    }
  }
}
</style>