slibra-official-web/components/BaseMenu.vue

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { NMenu } from 'naive-ui';
import type { MenuOption } from 'naive-ui';

defineProps<{
  mode : 'vertical' | 'horizontal';
}>();

const { t } = useI18n();
const emit = defineEmits(['on-menu-item']);

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

const activeMenuKey = ref(route.path);

const menuOptions: MenuOption[] = [
  {
    label: () => h('span', [t("menu.home")]),
    key: "/",
  },
  // {
  //   label: () => h('span', [t("menu.aiModel")]),
  //   key: "/ai/model",
  // },
  /**
   * TODO 待后续完善
   * */ 
  {
    label: () => h('span', [t("menu.aiModel")]),
    key: "/ai",
    children: [
      {
        label: () => h('span', [t("menu.aiModelSubVertica")]),
        key: "/ai/model"
      },
      {
        label: () => h('span', [t("menu.aiModelSubWater")]),
        key: "/ai/water"
      },
    ]
  },
  {
    label: () => h('span', [t("menu.libraCarbonNeutral")]),
    key: "/carbon",
    children: [
      {
        label: () => h('span', [t("menu.libraCarbonNeutralSubDevelopment")]),
        key: "/carbon/dmrv"
      },
      {
        label:() => h('span', [t("menu.libraCarbonNeutralSubSustainable")]),
        key: "/carbon/develop"
      },
      // {
      //   label: () => h('span', [t("menu.libraCarbonNeutralSubTrading")]),
      //   key: "/carbon/deal"
      // },
    ]
  },
  {
    label: () => h('span', [t("menu.news")]),
    key: "/news",
    langKey: "menu.news"
  },
  {
    label: () => h('span', [t("menu.about")]),
    key: "/about",
    langKey: "menu.about"
  }
];

const onMenuChange = (key: string) => {
  emit('on-menu-item');
  router.push(key);
}

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

<template>
  <NMenu v-model:value="activeMenuKey" :mode="mode" :options="menuOptions" @update:value="onMenuChange" />
</template>