feat(projects): 菜单数据及组件接入

src/layouts/BasicLayout/components/common/GlobalMenu.vue

@@ -1,11 +1,35 @@
 <template>
-  <div>
-    <h3 class="text-center text-18px text-error">菜单</h3>
-    <div class="flex-center h-48px">
-      <router-link to="/login" class="text-primary text-18px">登录页</router-link>
-    </div>
-  </div>
+  <n-menu
+    :value="activeKey"
+    :collapsed="app.menu.collapsed"
+    :collapsed-width="theme.menuStyle.collapsedWidth"
+    :collapsed-icon-size="22"
+    :options="menus"
+    @update:value="handleUpdateMenu"
+  />
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { NMenu } from 'naive-ui';
+import { useThemeStore, useAppStore } from '@/store';
+import { menus } from '@/router';
+import { GlobalMenuOption } from '@/interface';
+
+const theme = useThemeStore();
+const app = useAppStore();
+const router = useRouter();
+const route = useRoute();
+
+const activeKey = computed(() => getActiveKey());
+
+function getActiveKey() {
+  return route.name as string;
+}
+
+function handleUpdateMenu(key: string, menuItem: GlobalMenuOption) {
+  router.push(menuItem.routePath);
+}
+</script>
 <style scoped></style>