123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <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>
|