slibra-module-web/src/components/Layout/TheMenu.vue

<script setup lang="jsx">
import { h, watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { NMenu, NScrollbar } from 'naive-ui'
import SvgIcon from '@/components/SvgIcon/index.vue'

const route = useRoute();
const router = useRouter();

const activeMenuKey = ref(route.path);

watch(() => route.path, currentPath => {
  activeMenuKey.value = currentPath;
})

function renderIcon (props) {
  return () => h(SvgIcon, { ...props })
}

function renderChildrenIcon ({ name, size = '20' }) {
  return () => (
    <div class="flex items-center justify-center">
      {renderIcon({ name, size, class: ['icon-default'] })()}
      {renderIcon({ name: name + '-active', size, class: ['icon-active', 'hidden'] })()}
    </div>
  )
}

function renderLabel (val, url) {
  return url ? (<a href={ url } target="_blank" class="pl-1">{ val }</a>) : (<span class="">{ val }</span>) ;
}

const menuOptions = [
  {
    label: () => renderLabel('智慧总控'),
    icon: renderIcon({ name: 'menu-control' }),
    key: '/'
  },
  {
    label: () => renderLabel('专家问答'),
    icon: renderIcon({ name: 'menu-answers' }),
    key: '/answer'
  },
  {
    label: () => renderLabel('工艺管控'),
    icon: renderIcon({ name: 'menu-analyse' }),
    key: '/analyse',
    children: [
      {
        label: '水质报警',
        icon: renderChildrenIcon({ name: 'menu-analyse-water' }),
        key: '/water-warn',
      },
      {
        label: '生化报警',
        icon: renderChildrenIcon({ name: 'menu-analyse-pymol' }),
        key: '/pymol-warn',
      },
      {
        label: '预测预警',
        icon: renderChildrenIcon({ name: 'menu-analyse-notice' }),
        key: '/forecast-warn',
      },
      {
        label: '智能工单',
        icon: renderChildrenIcon({ name: 'menu-analyse-order' }),
        key: '/work-order',
      }
    ]
  },
  {
    label: () => renderLabel('成本管控'),
    icon: renderIcon({ name: 'menu-cost-control' }),
    key: '/control',
    children: [
      {
        label: '智能投药',
        icon: renderChildrenIcon({ name: 'menu-cost-drug' }),
        key: 'medicate',
      },
      {
        label: '精准曝气',
        icon: renderChildrenIcon({ name: 'menu-cost-accurate' }),
        key: 'normal-2',
      },
      {
        label: '微生物镜检',
        icon: renderChildrenIcon({ name: 'menu-cost-microorganism' }),
        key: 'normal-3',
      },
    ]
  },
  {
    label: () => renderLabel('智慧办公'),
    icon: renderIcon({ name: 'menu-work' }),
    key: '/work'
  },
  {
    label: () => renderLabel('用户中心'),
    icon: renderIcon({ name: 'menu-user' }),
    key: '/user',
  },
]

const handleUpdateValue = (key, { url }) => {
  if (url) return window.open(url);
  if (key.includes('normal')) return;
  router.push(key);
}

</script>

<template>
  <n-scrollbar style="height: 100%">
    <n-menu :options="menuOptions" :icon-size="30" v-model:value="activeMenuKey" @update:value="handleUpdateValue">
    </n-menu>
  </n-scrollbar>
</template>

<style scoped lang="scss"></style>

<style lang="scss">
@mixin sub-menu-active {
  .n-menu-item-content__icon {
    .icon-default {
      display: none;
    }

    .icon-active {
      display: block;
    }
  }

  .n-menu-item-content-header {
    font-weight: bold;
  }

}

.n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
  border: 1px solid #fff;
  background: #FCFDFE;
}

// 子菜单hover
.n-submenu-children {
  .n-menu-item-content:hover {
    @include sub-menu-active();
  }
}

// reset - 选中状态
.n-menu-item-content--selected {
  @include sub-menu-active();

  &:not(.n-menu-item-content--disabled)::before {
    border: 1px solid #fff;
    background: #FCFDFE;
  }
}

// reset - 选中状态
// .n-menu-item-content--selected {
//   font-weight: bold;
// }
// .n-base-icon {
//   background: url('@/assets/svgs/menu/arrow.svg') center center no-repeat;
//   svg {
//     display: none;
//   }
// }
</style>