fe init

fe/src/components/NavBar.vue

@@ -0,0 +1,38 @@
+<template>
+  <n-menu
+    mode="horizontal"
+    :options="menuOptions"
+    :value="activeMenu"
+    responsive
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, 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>