FPGA_WebLab/src/components/Navbar.vue

<template>
  <div class="navbar bg-base-100 shadow-xl">
    <div class="navbar-start">
      <div class="dropdown">
        <div
          tabindex="0"
          role="button"
          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
        >
          <MenuIcon />
        </div>
        <ul
          tabindex="0"
          class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-52 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="/" class="text-base font-medium">
              <House class="icon" />
              首页
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/user" class="text-base font-medium">
              <User class="icon" />
              用户界面
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/project" class="text-base font-medium">
              <PencilRuler class="icon" />
              工程界面
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/test" class="text-base font-medium">
              <FlaskConical class="icon" />
              测试功能
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <router-link to="/markdown-test" class="text-base font-medium">
              <FileText class="icon" />
              Markdown测试
            </router-link>
          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <a
              href="http://localhost:5000/swagger"
              target="_self"
              rel="noopener noreferrer"
              class="text-base font-medium"
            >
              <BookOpenText class="icon" />
              OpenAPI文档
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-center lg:flex">
      <router-link
        to="/"
        class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105"
      >
        <span class="text-primary">FPGA</span> Web Lab
      </router-link>
    </div>
    <div class="navbar-end">
      <!-- 未登录状态 -->
      <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"
          >
            <User class="h-5 w-5" />
            <span class="font-medium">{{ userName }}</span>
            <ChevronDownIcon
              class="icon transition-transform duration-300 dropdown-icon"
            />
          </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>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import ThemeControlButton from "./ThemeControlButton.vue";
import {
  MenuIcon,
  FileText,
  BookOpenText,
  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.createAuthenticatedDataClient();
      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(() => {
    loadUserInfo();
  });
});
</script>

<style scoped lang="postcss">
@import "../assets/main.css";

.icon {
  @apply h-5 w-5 opacity-70;
}

.dropdown[open] .dropdown-icon,
.dropdown:focus-within .dropdown-icon {
  transform: rotate(180deg);
}
</style>