kankan-mix/src/layout/show/index.vue

<template>
  <template v-if="loaded">
    <div
      :class="{ hideLeft: !custom.showLeftPano }"
      :style="hasSingle ? { '--left-pano-left': '0px' } : ''"
    >
      <SlideMenu
        v-if="!hasSingle"
        :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>
    </div>
  </template>
</template>

<script lang="ts" setup>
import { custom, params } from "@/env";
import { computed, nextTick, ref, watch, watchEffect } from "vue";
import { router, RoutesName } from "@/router";
import { loadModel, fuseModel } from "@/model";
import SlideMenu from "./slide-menu.vue";
import { sdk } from "@/sdk";
import {
  initialFloders,
  initialFloderTypes,
  initialFuseModels,
  initialRecords,
  initialScenes,
  initialViews,
  defTitle,
  initialTaggingStyles,
  initialTaggings,
  initialMeasures,
  initialGuides,
  scenes,
  fuseModels,
  appEl,
} from "@/store";

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

const loaded = ref(false);
const initialSys = async () => {
  await Promise.all([
    initialFuseModels(),
    initialScenes(),
    initialViews(),
    initialRecords(),
    initialFloders(),
    initialFloderTypes(),
    initialTaggingStyles(),
    initialTaggings(),
    initialGuides(),
  ]);
  await initialMeasures();
  loaded.value = true;
  await loadModel(fuseModel);
  sdk.hideGrid();
  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>