fuse-code/src/app.vue

<template>
  <ConfigProvider v-bind="config">
    <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>

    <ui-editor-layout
      @click.stop
      @contextmenu.prevent
      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>

      <!-- <span
        v-if="fuseModels.length > 0 || scenes.length === 0"
        class="taggle map-type"
        @click="isStandard = !isStandard"
        @touchend="isStandard = !isStandard"
      >
        <img :src="isStandard ? 'images/satellite.jpg' : 'images/standard.jpg'" />
      </span> -->
    </ui-editor-layout>

    <PwdModel v-if="inputPwd" @close="inputPwd = false" />
  </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,
  fuseModels,
  scenes,
} 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";
import { sdk, sdkLoaded } from "./sdk";
// https://192.168.0.13:7173/index.html?caseId=509&sign=vGxCu4X5321fkWpZN6HnqYBiE6iI71DDWzdgjEaUKIh7vDWo3o5yhqHdHhGr4Z3W#/show
const isStandard = ref(true);
watchEffect(() => {
  if (sdkLoaded.value && !params.testMap) {
    sdk.switchMapType(isStandard.value ? "satellite" : "standard");
  }
});

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;
  background: #000;
  --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;
  }
}

.taggle {
  position: absolute;
  font-size: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  z-index: 9999999;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;

  &.map-type {
    transition: all 0.3s ease;
    top: calc(var(--header-top) + var(--editor-head-height) + 10px);
    right: calc(var(--editor-toolbox-width) + var(--editor-menu-right) + 30px);
    width: 42px;
    height: 42px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>