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