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>
    <template #attach>
      <div class="logo">
        <a :href="void 0" target="_blank">
          <img src="@/assets/images/Logo_4DVison.png" />
        </a>
      </div>
    </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) => {
  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-menu-item span {
    font-size: 12px;
  }

  .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;
    }
  }
}

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