fuse-code/src/layout/show/index.vue

<template>
  <template v-if="loaded">
    <ui-icon
      class="screen-full"
      :class="{ fullScreen, pure: paramsRaw.pure }"
      v-if="paramsRaw.pure"
      style="margin-right: 10px"
      :type="fullScreen ? 'window_n' : 'window_m'"
      ctrl
      @click="fullHandler"
    />
    <div
      :class="{ hideLeft: !custom.showLeftPano }"
      :style="hasSingle ? { '--left-pano-left': '0px' } : ''"
    >
      <SlideMenu
        v-if="!hasSingle && !custom.full"
        :activeName="(router.currentRoute.value.name as RoutesName)"
        @change-item="(item) => router.push({ name: item.name })"
      />

      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
      <GlobalSearch />
    </div>
    <ViewSetting class="show-setting-layout" />
  </template>
</template>

<script lang="ts" setup>
import GlobalSearch from "@/components/global-search/index.vue";
import ViewSetting from "@/components/view-setting/index.vue";
import { custom, params, paramsRaw, showRightPanoStack } from "@/env";
import { ref, watchEffect } from "vue";
import { router, RoutesName } from "@/router";
import { loadModel, fuseModel } from "@/model";
import { asyncTimeout } from "@/utils";
import SlideMenu from "./slide-menu.vue";

import {
  // initialFloders,
  // initialFloderTypes,
  initialFuseModels,
  initialRecords,
  initialScenes,
  // initialViews,
  defTitle,
  initialTaggingStyles,
  initialTaggings,
  initialMeasures,
  initialGuides,
  scenes,
  fuseModels,
  appEl,
  initialPaths,
  initMonitors,
} from "@/store";
import { initialAnimationModels } from "@/store/animation";
import { fullView } from "@/utils/full";
import { watch } from "fs";

const hasSingle = new URLSearchParams(location.search).has("single");

watchEffect((onCleanup) => {
  if (router.currentRoute.value.name === RoutesName.show) {
    onCleanup(showRightPanoStack.push(ref(false)));
  }
});

const fullScreen = ref(false);
let quit: (() => void) | null = null;
const fullHandler = async () => {
  if (quit) {
    quit();
    fullScreen.value = false;
    params.pure = true;
    quit = null;
  } else {
    quit = await fullView(() => {
      fullScreen.value = false;
      params.pure = true;
      quit = null;
    }, false);
    fullScreen.value = true;
    params.pure = false;
  }
};

const loaded = ref(false);
const initialSys = async () => {
  await initialTaggingStyles();
  await Promise.all([
    initialFuseModels(),
    initialScenes(),
    // initialViews(),
    initialRecords(),
    // initialFloders(),
    // initialFloderTypes(),
    initialTaggings(),
    initialGuides(),
    initMonitors(),
    initialAnimationModels(),
  ]);
  await initialPaths();
  await initialMeasures();
  await loadModel(fuseModel);
  await asyncTimeout(1000);
  loaded.value = true;
  // custom.showLeftPano = true;
};
initialSys();
defTitle.value = "";
initialScenes();

watchEffect((onCleanup) => {
  if (loaded.value && appEl.value && scenes.value.length && !fuseModels.value.length) {
    loadModel(scenes.value[0] as any);
    // custom.showLeftPano = true;
  }
});
</script>

<style>
:root {
  --editor-menu-width: 80px;
  --editor-head-height: 0px;
}

.hideLeft {
  --editor-menu-left: calc(-1 * var(--editor-menu-width));
  --left-pano-left: calc(
    var(--editor-menu-left) + var(--editor-menu-width) - var(--left-pano-width)
  ) !important;
}
</style>

<style lang="scss" scoped>
.show-setting-layout {
  position: absolute;
  bottom: 20px;
  z-index: 99;
  right: calc(var(--editor-menu-right) + var(--editor-toolbox-width) + 20px);
}

.screen-full {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 999;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  font-size: 22px;
  color: #fff !important;
  &.fullScreen {
    right: calc(var(--editor-menu-right) + var(--editor-toolbox-width) + 20px);
  }
}
</style>