feat(auth): 添加用户认证模块与登录页面

src/layouts/base-layout/base-layout-header/base-layout-header.vue

@@ -2,6 +2,7 @@
 import LanguageSwitchButton from './components/LanguageSwitchButton.vue';
 import ThemeSwitchButton from './components/ThemeSwitchButton.vue';
 import ToggleSiderButton from './components/ToggleSiderButton.vue';
+import UserDropdown from './components/UserDropdown.vue';
 </script>
 
 <template>
@@ -11,6 +12,7 @@ import ToggleSiderButton from './components/ToggleSiderButton.vue';
     <div class="flex items-center">
       <LanguageSwitchButton />
       <ThemeSwitchButton />
+      <UserDropdown />
     </div>
   </div>
 </template>

src/layouts/base-layout/base-layout-header/components/UserDropdown.vue

@@ -0,0 +1,45 @@
+<script setup lang="tsx">
+const router = useRouter();
+const userStore = useAuthStore();
+const dialog = useDialog();
+
+const options = computed(() => [
+  {
+    label: userStore.userInfo?.nickname || userStore.userInfo?.username || '用户',
+    key: 'user',
+    disabled: true,
+  },
+  {
+    type: 'divider',
+    key: 'd1',
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: () => <icon-material-symbols-logout class="w-4 h-4" />,
+  },
+]);
+
+function handleSelect(key: string) {
+  if (key === 'logout') {
+    dialog.warning({
+      title: '退出登录',
+      content: '确定要退出登录吗?',
+      positiveText: '确定',
+      negativeText: '取消',
+      onPositiveClick: () => {
+        userStore.clearToken('用户退出登录');
+        router.push('/login');
+      },
+    });
+  }
+}
+</script>
+
+<template>
+  <NDropdown :options="options" placement="bottom-end" @select="handleSelect">
+    <NButton quaternary circle>
+      <icon-material-symbols-account-circle w-5 h-5 />
+    </NButton>
+  </NDropdown>
+</template>

src/layouts/base-layout/the-base-layout.vue

@@ -49,14 +49,4 @@ const appStore = useAppStore();
 #__SCROLL_EL_ID__ {
   @include scrollbar;
 }
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.25s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
 </style>