feat: 增加了登录选项

src/components/Navbar.vue

@@ -7,20 +7,7 @@
           role="button"
           class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
-          </svg>
+          <MenuIcon />
         </div>
         <ul
           tabindex="0"
@@ -79,12 +66,58 @@
       </router-link>
     </div>
     <div class="navbar-end">
-      <router-link
-        to="/login"
-        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
-      >
-        登录
-      </router-link>
+      <!-- 未登录状态 -->
+      <template v-if="!isLoggedIn">
+        <router-link
+          to="/login"
+          class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
+        >
+          登录
+        </router-link>
+      </template>
+
+      <!-- 已登录状态 -->
+      <template v-else>
+        <div class="dropdown dropdown-end mr-3">
+          <div
+            tabindex="0"
+            role="button"
+            class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
+            @click="isUserMenuOpen = !isUserMenuOpen"
+          >
+            <User class="h-5 w-5" />
+            <span class="font-medium">{{ userName }}</span>
+            <ChevronDownIcon
+              class="icon"
+              :class="{ 'rotate-180': isUserMenuOpen }"
+            />
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-48 p-2 shadow-lg transition-all duration-300 ease-in-out"
+          >
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <router-link
+                to="/user"
+                class="text-base font-medium flex items-center gap-2"
+              >
+                <User class="icon" />
+                用户中心
+              </router-link>
+            </li>
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <button
+                @click="handleLogout"
+                class="text-base font-medium flex items-center gap-2 w-full text-left hover:bg-error hover:text-error-content"
+              >
+                <LogOutIcon class="icon" />
+                退出登录
+              </button>
+            </li>
+          </ul>
+        </div>
+      </template>
+
       <div class="ml-2 transition-all duration-500 hover:rotate-12">
         <ThemeControlButton />
       </div>
@@ -93,17 +126,68 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { onBeforeRouteUpdate, useRouter } from "vue-router";
 import ThemeControlButton from "./ThemeControlButton.vue";
 import {
-  SquareActivity,
+  MenuIcon,
   FileText,
   BookOpenText,
-  Video,
   FlaskConical,
   House,
   User,
   PencilRuler,
+  LogOutIcon,
+  ChevronDownIcon,
 } from "lucide-vue-next";
+import { AuthManager } from "@/utils/AuthManager";
+
+const router = useRouter();
+
+// 响应式数据
+const userName = ref<string>("");
+const isUserMenuOpen = ref<boolean>(false);
+const isLoggedIn = ref<boolean>(false); // 改为响应式变量
+
+// 方法
+const loadUserInfo = async () => {
+  try {
+    const authenticated = await AuthManager.isAuthenticated();
+    if (authenticated) {
+      const client = AuthManager.createAuthenticatedClient();
+      const userInfo = await client.getUserInfo();
+      userName.value = userInfo.name;
+      isLoggedIn.value = true;
+    } else {
+      userName.value = "";
+      isLoggedIn.value = false;
+    }
+  } catch (error) {
+    console.error("Failed to load user info:", error);
+    // 如果获取用户信息失败，清除token
+    AuthManager.clearToken();
+    userName.value = "";
+    isLoggedIn.value = false;
+  }
+};
+
+const handleLogout = () => {
+  AuthManager.logout();
+  userName.value = "";
+  isLoggedIn.value = false;
+  router.push("/");
+};
+
+// 生命周期钩子
+onMounted(() => {
+  loadUserInfo();
+  
+  // 监听路由变化
+  router.afterEach(() => {
+    console.log("Route is changing, reloading user info...");
+    loadUserInfo();
+  });
+});
 </script>
 
 <style scoped>