fuse-code/src/layout/main.vue

<template>
  <ui-editor-layout 
    @click.stop 
    id="layout-app" 
    class="editor-layout" 
    :style="layoutStyles" 
    :class="layoutClassNames"
  >
    <div :ref="el => appEl = el as HTMLDivElement">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </ui-editor-layout>
</template>

<script lang="ts" setup>
import { custom } from '@/env'
import { computed } from 'vue'
import { isEdit, appEl } from '@/store'

const layoutClassNames = computed(() => {
  return {
    [`sys-view-${custom.viewMode}`]: true,
    'edit-mode': isEdit.value || custom.showToolbar,
    'setting-mode': custom.showToolbar,
    'hide-right-box-mode': !custom.showRightPano,
    'hide-left-box-mode': !custom.showLeftPano,
    'show-bottom-box-mode': custom.showBottomBar,
    'hide-top-bar-mode': !custom.showHeadBar
  }
})

const layoutStyles = computed(() => {
  const styles: {[key in string]: string} = {}
  if (custom.showBottomBar) {
    styles['--editor-menu-bottom'] = custom.bottomBarHeight
  }

  return styles
})

</script>

<style scoped lang="scss">
.editor-layout {
  --editor-menu-bottom: 0px;
  --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
}

.sys-view-full {
  --header-top: var(--hide-header-top);
  --editor-menu-right: calc(-1 * var(--editor-toolbox-width)) !important;
  --editor-menu-left: calc(-1 * var(--editor-menu-width));
  --search-left: 52px;
}


.sys-view-auto {
  --header-top: var(--show-header-top);
  --search-left: 0px;
}


.hide-top-bar-mode {
  --header-top: var(--hide-header-top);
}

.hide-right-box-mode {
  --editor-menu-right: calc(-1 * var(--editor-toolbox-width)) !important;
}

.hide-left-box-mode {
  --left-pano-left: calc(var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)) !important;
}
.edit-mode {
  --editor-menu-left: calc(-1 * var(--editor-menu-width));
}

.laser-layer {
  position: absolute;
  z-index: 1;
  inset: 0;

  .scene {
    width: 100%;
    height: 100%;
    background-color: #ccc;
  }
}
</style>