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

<template>
  <ActionMenus
    v-if="!store.child.value"
    class="menus abc"
    :class="{ level: level === 2 }"
    :menus="store.menus"
    :active-key="store.activeMenuKey.value"
    dire="column"
  />
  <scene-menus
    :parentKey="store.activeMenuKey.value"
    @active="(data) => (childActive = data)"
    v-if="store.child.value"
    @back="store.child.value = null"
    :menus="store.child.value"
    :level="level + 1"
  />
</template>

<script lang="ts" setup>
import ActionMenus from "@/components/group-button/index.vue";

import { generateMixMenus, MenuRaw, menus, findMenuByKey } from "./menus";
import { joinActions } from "./actions";
import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
import { disabledMap, laserModeStack } from "@/hook";
import { Mode } from "@/sdk";

const props = withDefaults(
  defineProps<{ menus?: MenuRaw[]; level?: number; parentKey?: string }>(),
  { level: 1 }
);
const emit = defineEmits<{
  (e: "back"): void;
  (e: "active", data: string[]): void;
  (e: "enterChild"): void;
  (e: "leaveChild"): void;
}>();
const backMenu = {
  icon: "return",
  text: "",
  key: "back",
  onClick: () => emit("back"),
};

const menusMix = computed(() => (props.level === 1 ? menus : [backMenu, ...props.menus]));
const store = generateMixMenus("children", (m) => m, menusMix.value);
const childActive = ref<string[]>([]);

watchEffect(() => {
  const currentActive = store.activeMenuKey.value || store.itemActiveKey.value;
  console.log(props.level, currentActive);
  if (currentActive) {
    emit("active", [currentActive, ...childActive.value]);
  } else {
    emit("active", []);
  }
});

watchEffect(() => {
  const menu = findMenuByKey(store.itemActiveKey.value as any);
  if (menu?.disabled && menu?.disabled()) {
    store.itemActiveKey.value = null;
  }
});

watchEffect((onCleanup) => {
  const menu = store.activeMenuKey.value && findMenuByKey(store.activeMenuKey.value);
  if (store.child && menu?.onClick) {
    const leaveHook = menu.onClick();
    leaveHook && onCleanup(leaveHook);
  } else {
    onCleanup(() => {});
  }
});
if (props.level === 1) {
  watchEffect(() => {
    disabledMap.photo = !store.child.value?.length;
  });
  watchEffect(() => {
    if (store.child.value) {
      emit("enterChild");
    } else {
      emit("leaveChild");
    }
  });
}

const stopWatch = joinActions(store.itemActiveKey);
onUnmounted(() => {
  stopWatch();
  if (props.parentKey === "measure") {
    laserModeStack.pop();
  }
});
onMounted(() => {
  if (props.level > 1) {
    const defaultMenu = props.menus.find((menu) => {
      if (typeof menu.defaultSelect === "function") {
        return menu.defaultSelect();
      } else {
        return menu.defaultSelect;
      }
    });
    store.itemActiveKey.value = defaultMenu?.key;
    // store.activeMenuKey.value =
    if (props.parentKey === "measure") {
      laserModeStack.push(ref(Mode.cloud));
    }
  }
});
</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>

<style lang="scss">
.level div:first-child {
  background-color: rgba(255, 255, 255, 0.3);
  height: 50px;
  width: 50px;
  min-width: 50px;
  border-radius: 50%;
  margin-bottom: 30px !important;
  position: relative;
  i {
    font-size: 16px !important;
  }

  &:after {
    position: absolute;
    content: "";
    height: 1px;
    left: 10px;
    right: 10px;
    bottom: -15px;
    background-color: rgba(255, 255, 255, 0.2);
  }
}
</style>