40 lines
799 B
Vue
40 lines
799 B
Vue
<template>
|
|
<n-menu
|
|
mode="horizontal"
|
|
:options="menuOptions"
|
|
:value="activeMenu"
|
|
responsive
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MenuOption } from 'naive-ui'
|
|
import { h, computed } from 'vue'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
|
|
const menuOptions: MenuOption[] = [
|
|
renderMenuItem('dashboard', '仪表盘'),
|
|
renderMenuItem('keys', '密钥管理'),
|
|
renderMenuItem('logs', '日志'),
|
|
renderMenuItem('settings', '系统设置'),
|
|
]
|
|
|
|
const route = useRoute()
|
|
const activeMenu = computed(() => route.name)
|
|
|
|
function renderMenuItem(key: string, label: string): MenuOption {
|
|
return {
|
|
label: () => h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: key,
|
|
}
|
|
},
|
|
{ default: () => label }
|
|
),
|
|
key,
|
|
}
|
|
}
|
|
</script>
|