fuse-code/src/app.vue

<template>
  <ConfigProvider v-bind="config">
    <ui-editor-layout
      @click.stop
      id="layout-app"
      class="editor-layout"
      :style="layoutStyles"
      :class="layoutClassNames"
    >
      <div :ref="(el: any) => 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 v-for="needMount in needMounts">
      <Teleport :to="needMount[0]">
        <component
          :is="needMount[1]"
          v-bind="needMount[2]"
          :ref="(v: any) => needMount[3] && needMount[3](v)"
        />
      </Teleport>
    </template>
  </ConfigProvider>
</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, needMounts } from "@/utils";
import { ConfigProvider } from "ant-design-vue";
import PwdModel from "@/layout/pwd.vue";
import { config } from "./config";

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;
    await refreshCase();
    if (caseProject.value) {
      await loadPack(initialSetting);
      prefix.value = caseProject.value!.caseTitle;
    } else {
      await router.replace({ name: RoutesName.error });
    }
    stopWatch();
    loaded.value = true;
  },
  { 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>