traffic-laser/src/views/scene/menus/pane.vue

<template>
  <ActionMenus
      v-if="!store.child.value"
      class="menus"
      :menus="store.menus as any"
      :active-key="store.activeMenuKey.value"
      dire="column"
  />
  <scene-menus
      v-if="store.child.value"
      @back="store.child.value = null"
      :menus="store.child.value as MenuRaw[]"
      :level="level + 1"
  />
</template>

<script lang="ts" setup>
import ActionMenus from "@/components/group-button/index.vue";
import {generateMixMenus, MenuRaw, menus} from './menus'
import {joinActions} from './actions'
import {computed, onUnmounted} from "vue";

const props = withDefaults(
  defineProps<{ menus?: MenuRaw[], level?: number }>(),
  {level: 1}
)
const emit = defineEmits<{ (e: 'back'): void }>();
const backMenu = {
  icon: "",
  text: "返回",
  key: "back",
  onClick: () => emit("back")
}

const menusMix = computed(() =>
  props.level === 1 ? menus : [backMenu, ...props.menus]
)
const store = generateMixMenus(
  'children',
  m => m,
  menusMix.value
)
onUnmounted(joinActions(store.itemActiveKey));
</script>
<script lang="ts"> export default {name: 'scene-menus'}</script>

<style lang="scss" scoped>
.menus {
  position: absolute;
  left: var(--boundMargin);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
</style>