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

src/layouts/BasicLayout/components/GlobalHeader/components/UserAvatar.vue

@@ -0,0 +1,45 @@
+<template>
+  <n-dropdown :options="options" @select="handleDropdown">
+    <header-item class="px-12px">
+      <n-avatar :src="avatar" :round="true" />
+      <span class="pl-8px text-16px font-medium">Soybean</span>
+    </header-item>
+  </n-dropdown>
+</template>
+
+<script lang="ts" setup>
+import { NDropdown, NAvatar } from 'naive-ui';
+import { UserAvatar, Logout } from '@vicons/carbon';
+import { dynamicIconRender } from '@/utils';
+import HeaderItem from './HeaderItem.vue';
+import avatar from '@/assets/img/common/logo-fill.png';
+import { useAuthStore } from '@/store';
+
+type DropdownKey = 'user-center' | 'logout';
+
+const { resetAuthState } = useAuthStore();
+
+const options = [
+  {
+    label: '用户中心',
+    key: 'user-center',
+    icon: dynamicIconRender(UserAvatar)
+  },
+  {
+    type: 'divider',
+    key: 'divider'
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: dynamicIconRender(Logout)
+  }
+];
+
+function handleDropdown(key: DropdownKey) {
+  if (key === 'logout') {
+    resetAuthState();
+  }
+}
+</script>
+<style scoped></style>

src/layouts/BasicLayout/components/GlobalHeader/components/index.ts

@@ -1,3 +1,4 @@
+import UserAvatar from './UserAvatar.vue';
 import HeaderItem from './HeaderItem.vue';
 
-export { HeaderItem };
+export { UserAvatar, HeaderItem };

src/layouts/BasicLayout/components/GlobalHeader/index.vue

@@ -10,6 +10,7 @@
           <icon-gridicons-fullscreen-exit v-if="isFullscreen" class="text-16px" />
           <icon-gridicons-fullscreen v-else class="text-16px" />
         </header-item>
+        <user-avatar />
         <header-item class="w-40px h-full" @click="openSettingDrawer">
           <icon-mdi-light-cog class="text-16px" />
         </header-item>
@@ -23,7 +24,7 @@ import { computed } from 'vue';
 import { NLayoutHeader } from 'naive-ui';
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore, useThemeStore } from '@/store';
-import { HeaderItem } from './components';
+import { UserAvatar, HeaderItem } from './components';
 import { GlobalLogo } from '../common';
 
 defineProps({

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

@@ -1,18 +1,21 @@
 <template>
-  <router-link to="/" class="nowrap-hidden flex-center h-64px">
+  <a :href="homePath" class="nowrap-hidden flex-center h-64px cursor-pointer">
     <img src="@/assets/img/common/logo.png" alt="" class="w-32px h-32px" />
     <h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold">{{ title }}</h2>
-  </router-link>
+  </a>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useAppStore, useThemeStore } from '@/store';
 import { useAppTitle } from '@/hooks';
+import { EnumRoutePath } from '@/enum';
 
 const app = useAppStore();
 const theme = useThemeStore();
-const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
 const title = useAppTitle();
+
+const showTitle = computed(() => !app.menu.collapsed && theme.navStyle.mode !== 'vertical-mix');
+const homePath = EnumRoutePath['dashboard-analysis'];
 </script>
 <style scoped></style>

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>