fuse-code/src/app.vue

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


  <PwdModel v-if="inputPwd" @close="inputPwd = false" />
</template>

<script lang="ts" setup>
import { custom, params } from '@/env'
import { computed, ref, watch, watchEffect, nextTick } from 'vue'
import { isEdit, prefix, appEl, initialSetting, caseProject, refreshCase } from '@/store'
import router, { currentLayout, RoutesName } from './router';
import { loadPack } from '@/utils'
import PwdModel from '@/layout/pwd.vue'

const loaded = ref(false)
const inputPwd = ref(false)
const stopWatch = watch(currentLayout, async (layout) => {
  if (!layout) {
    return;
  } else if (layout === RoutesName.signModel || layout === RoutesName.error) {
    loaded.value = true;
    return;
  }

  // 单页面 非自己查看需要密码校验
  if (currentLayout.value === RoutesName.show && !params.share) {
    inputPwd.value = true
    await new Promise<void>(resolve => {
      const stopInputWatch = watchEffect(() => {
        if (!inputPwd.value) {
          stopInputWatch()
          resolve()
        }
      })
    })
  }

  params.share = true
  try {
    await refreshCase()
  if (caseProject.value) {
    await loadPack(initialSetting)
    prefix.value = caseProject.value!.caseTitle
  } else {
    await router.replace({name: RoutesName.error})
  }  
  } catch (error) {
    await router.replace({name: RoutesName.error})
  }

  stopWatch()
  loaded.value = true
  console.log(loaded.value)
}, { immediate: true })

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>