fuse-code/src/views/animation/index.vue

<template>
  <div :class="{ focusAM: focusAM }" class="animation-layout">
    <Left v-model:focus="focusAM" class="animation-left" />
    <Right v-if="focusAM" :am="focusAM" class="animation-right" />
    <Bottom v-if="focusAM" :am="focusAM" class="animation-toolbar" />
  </div>
</template>

<script lang="ts" setup>
import Left from "./left.vue";
import Right from "./right.vue";
import Bottom from "./bottom/bottom.vue";
import router from "@/router";
import { enterEdit } from "@/store";
import { useViewStack } from "@/hook";
import {
  AnimationModel,
  autoSaveAnimationModel,
  initAnimationActions,
  initialAnimationModels,
} from "@/store/animation";
import { ref } from "vue";

enterEdit(() => router.back());
initialAnimationModels();
initAnimationActions();
useViewStack(autoSaveAnimationModel);

const focusAM = ref<AnimationModel>();
</script>

<style lang="scss" scoped>
.animation-layout {
  --bottom-height: 0px;
  &.focusAM {
    --bottom-height: 225px;
  }
}

.animation-left {
  height: calc(100vh - var(--bottom-height));
  position: absolute;
  width: var(--left-pano-width);
}

.animation-right {
  height: calc(100vh - var(--bottom-height));
  padding-top: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.animation-toolbar {
  height: var(--bottom-height);
  width: 100vw;
  display: block;
}
</style>