traffic-laser/src/views/sys/menu/index.vue

<template>
  <ui-editor-menu
    :menu="menu"
    class="menu global-menu"
    :class="{ show: !isEdit, disabled: showToolbar, readonly: disabledGoto }"
  >
    <!--    <template #first v-if="!os.isPc">-->
    <!--      <div class="menu-close" @click="customMap.sysView = 'full'">-->
    <!--        <ui-icon type="close"></ui-icon>-->
    <!--      </div>-->
    <!--    </template>-->

    <template v-slot="{ raw }">
      <Item :menu="raw" :active="active" @select="gotoMenuItem">
        <template #attach="{ raw, active }">
          <slot name="attach" :raw="raw" :active="active"></slot>
        </template>
      </Item>
    </template>
  </ui-editor-menu>
</template>

<script setup lang="ts">
import Item from "./item/index.vue";
import { findMenuLocals, MenuAtom, MenuRaw } from "./menu";
import { isEdit, showToolbar } from "@/store";
import { computed } from "vue";
import { router } from "@/router";
import { os } from "@/utils";
import { customMap } from "@/hook";
import { currentApp } from "@/store/app";

const props = defineProps<{
  disabledGoto?: boolean;
  menu: MenuRaw;
  activeKey?: string;
}>();
const emit = defineEmits<{
  (e: "update:activeKey", v: MenuAtom["name"]): void;
}>();

const gotoMenuItem = (item: MenuAtom) => {
  console.error(item)
  //test
  if(item['key'] =='structure'){
    item.onClick()
    return
  }

  if (!props.disabledGoto) {
    if (item.onClick) {
      item.onClick();
    } else if (item.isRoute) {
      router.push({ name: item.name as string });
    }
    emit("update:activeKey", item.name);
  }
};

const active = computed(() =>
  findMenuLocals(
    props.activeKey || (router.currentRoute.value.name as string),
    currentApp.menu.value.relation as any
  )
);
</script>

<style lang="sass" scoped>
@import './style.scss'
</style>

<style lang="scss">
.global-menu {
  display: flex;
  flex-direction: column;

  .ui-editor-menu-item {
    position: relative;
  }

  > div:not(.logo, .menu-close) {
    flex: 1;
  }

  .logo {
    flex: none;
    width: auto;
    height: auto;

    a {
      color: inherit;
      text-decoration: none;
    }
  }
}
.global-menu,
.menu-children {
  .ui-menu-item span {
    font-size: 14px;
  }
  .ui-menu-item .icon {
    font-size: 20px !important;
  }
}

.readonly .menu-item {
  cursor: inherit;
  pointer-events: none;
  color: var(--editor-men-color) !important;
}
</style>