104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
<template>
|
|
<n-menu
|
|
:inverted="inverted"
|
|
:style="style"
|
|
v-model:value="activeKey"
|
|
:collapsed="collapsed"
|
|
:collapsed-width="64"
|
|
:collapsed-icon-size="22"
|
|
:options="menuOptions"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { h, computed, type Component } from 'vue'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
|
|
import { NIcon } from 'naive-ui'
|
|
import type { MenuOption } from 'naive-ui'
|
|
|
|
import * as iconComponents from '@vicons/fluent'
|
|
|
|
const props = defineProps({
|
|
inverted: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
invertedBackgroundColor: {
|
|
type: String,
|
|
default: '#282c34',
|
|
},
|
|
collapsed: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const style = computed(() => {
|
|
return props.inverted ? { '--n-color': props.invertedBackgroundColor } : { '--n-color': '#ffffff' }
|
|
})
|
|
|
|
// MenuOptions
|
|
const icons: Map<string, Component> = new Map(Object.entries(iconComponents))
|
|
|
|
function renderIcon(icon: string) {
|
|
const iconComponent = icons.get(icon)
|
|
return () =>
|
|
h(NIcon, null, {
|
|
default: () => h(iconComponent ? iconComponent : iconComponents.QuestionCircle20Regular),
|
|
})
|
|
}
|
|
|
|
const menuOptions: MenuOption[] = [
|
|
{
|
|
label: () =>
|
|
h(
|
|
RouterLink,
|
|
{
|
|
to: {
|
|
name: '404',
|
|
params: {
|
|
lang: 'zh-CN',
|
|
},
|
|
},
|
|
},
|
|
{ default: () => '回家' }
|
|
),
|
|
key: '404',
|
|
icon: renderIcon('Home20Regular'),
|
|
},
|
|
{
|
|
label: () =>
|
|
h(
|
|
RouterLink,
|
|
{
|
|
to: '/login',
|
|
},
|
|
{ default: () => '上班' }
|
|
),
|
|
key: '/login',
|
|
icon: renderIcon('Desktop20Regular'),
|
|
},
|
|
{
|
|
label: () =>
|
|
h(
|
|
'a',
|
|
{
|
|
href: 'http://zhouxy.xyz',
|
|
target: '_blank',
|
|
rel: 'noopenner noreferrer',
|
|
},
|
|
'ZhouXY'
|
|
),
|
|
key: 'hear-the-wind-sing',
|
|
icon: renderIcon('BookOpen20Filled'),
|
|
},
|
|
]
|
|
|
|
// ActiveKey
|
|
const route = useRoute()
|
|
const activeKey = computed(() => {
|
|
return route.name
|
|
})
|
|
</script>
|