fuse-code/src/app.vue

<template>
  <ConfigProvider v-bind="config" v-if="!showLogin">
    <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"
        class="app-con"
      >
        <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>

  <ui-dialog v-else>
    <template v-slot:header>
      <span>用户登录</span>
    </template>
    <div>
      <ui-input
        type="text"
        placeholder="请输入账号"
        v-model="username"
        style="width: 360px"
      />
      <br />
      <ui-input
        type="password"
        placeholder="请输入密码"
        v-model="password"
        style="width: 360px; margin-top: 20px"
      />
      <br />
      <ui-input
        type="checkbox"
        @click.stop
        label="记住密码"
        style="margin-top: 20px"
        :modelValue="mark"
        @update:modelValue="(select: any) => mark = select"
      />
      <!-- <ui-input
        type="checkbox"
        label="记住密码"
        v-model="mark"
        style="margin-top: 20px"
      /> -->
    </div>
    <template v-slot:footer>
      <ui-button type="submit" @click="login(username, password)">登录</ui-button>
    </template>
  </ui-dialog>
</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 { asyncTimeout, encodePwd, 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";
import GAxios from "axios";

import { addReqErrorHandler, addResErrorHandler, ResCode, setToken } from "./api";

const gotoLogin = () => {
  if (import.meta.env.DEV) {
    login("super-admin", "Aa123456");
  } else {
    showLogin.value = true;
  }
};

addResErrorHandler((data: any) => {
  data = data.data;
  if (data.code === ResCode.TOKEN_INVALID) {
    gotoLogin();
  } else if (data.code === ResCode.UN_AUTH) {
    gotoLogin();
  }
});
addReqErrorHandler(gotoLogin);

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

watchEffect(() => {
  prefix.value = caseProject.value?.fusionTitle || "多元融合";
});

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;
});

const showLogin = ref(false);
const username = ref(localStorage.getItem("fuse-username") || "");
const password = ref(localStorage.getItem("fuse-password") || "");
const mark = ref(!!localStorage.getItem("fuse-mark"));
const login = (username: string, password: string) => {
  GAxios.post("/service/manage/login", {
    password: encodePwd(password),
    userName: username,
    username: username,
  }).then((res) => {
    setToken(res.data.data.token);

    setTimeout(() => {
      const p = new URLSearchParams(location.search);
      p.delete("token");
      location.search = "?" + p.toString();
    }, 100);

    loaded.value = false;
    if (mark.value) {
      localStorage.setItem("fuse-username", username);
      localStorage.setItem("fuse-password", password);
      localStorage.setItem("fuse-mark", "1");
    } else {
      localStorage.removeItem("fuse-username");
      localStorage.removeItem("fuse-password");
      localStorage.removeItem("fuse-mark");
    }
  });
};
</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>