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'
import { useUserStore } from '@/stores/modules/userStore';

let menuOptions = []
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

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 updateMenOptions = () => {
  if (userStore.isCheckUser) {
    menuOptions = [
      {
        label: () => renderLabel('专家问答'),
        icon: renderIcon({ name: 'menu-answers' }),
        key: '/answer'
      },
      {
        label: () => renderLabel('智慧办公'),
        icon: renderIcon({ name: 'menu-work' }),
        key: '/work'
      },
      {
        label: () => renderLabel('用户中心'),
        icon: renderIcon({ name: 'menu-user' }),
        key: '/user',
      }
    ]
  } else {
    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: 'medicinal',
          },
          // {
          //   label: '精准曝气',
          //   icon: renderChildrenIcon({ name: 'menu-cost-accurate' }),
          //   key: 'normal-2',
          // },
          // {
          //   label: '微生物镜检',
          //   icon: renderChildrenIcon({ name: 'menu-cost-microorganism' }),
          //   key: 'normal-3',
          // },
          {
            label: '碳排放管理',
            icon: renderChildrenIcon({ name: 'menu-carbon-emission' }),
            key: '/carbon',
          },
        ]
      },
      {
        label: () => renderLabel('智慧办公'),
        icon: renderIcon({ name: 'menu-work' }),
        key: '/work'
      },
      {
        label: () => renderLabel('用户中心'),
        icon: renderIcon({ name: 'menu-user' }),
        key: '/user',
      }
    ]
  }
}

updateMenOptions();

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>