fuse-code/src/layout/edit/fuse-edit.vue

<template>
  <template v-if="loaded" style="height: 100%">
    <Model :type="FUSE" />
    <Header></Header>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </template>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { currentMeta, router } from '@/router'
import { showLeftPanoStack, showRightPanoStack } from '@/env'
import { togetherCallback } from '@/utils'
import { Model, FUSE } from '../model/index.vue'
import { 
  enterEdit, 
  isOld, 
  save, 
  initialTaggingStyles, 
  initialTaggings, 
  initialGuides 
} from '@/store'

import Header from './header/index.vue'

const loaded = ref(false)
Promise.all([
  initialTaggingStyles(),
  initialTaggings(),
  initialGuides()
])
.then(() => loaded.value = true)

router.beforeEach(async (to, from, next) => {
  if (to.params.save && isOld.value) {
    await save()
  }
  next()
})
watch(currentMeta, (meta, _, onClean) => {
  if (meta && 'full' in meta && meta.full) {
    enterEdit(() => router.back())
    onClean(togetherCallback([
      showLeftPanoStack.push(ref(false)),
      showRightPanoStack.push(ref(false)),
    ]))
  }
}, { flush: 'post' })
</script>