feat: 重构前端

web/src/components/NavBar.vue

@@ -0,0 +1,35 @@
+<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>