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