Exam_registration/frontend/src/layouts/BasicLayout.vue

<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <div class="logo">考试信息管理系统</div>
      <a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys">
        <a-menu-item key="dashboard">
          <template #icon><DashboardOutlined /></template>
          <router-link to="/dashboard">首页</router-link>
        </a-menu-item>
        <a-menu-item key="exam">
          <template #icon><BookOutlined /></template>
          <router-link to="/exam/list">考试管理</router-link>
        </a-menu-item>
        <a-sub-menu key="registration">
          <template #title>报名管理</template>
          <template #icon><FileOutlined /></template>
          <a-menu-item key="my-registration">
            <router-link to="/registration/my">我的报名</router-link>
          </a-menu-item>
          <a-menu-item key="registration-list">
            <router-link to="/registration/list">报名列表</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="notice">
          <template #icon><BellOutlined /></template>
          <router-link to="/notice/list">考试通知</router-link>
        </a-menu-item>
        <a-sub-menu key="score">
          <template #title>成绩管理</template>
          <template #icon><TrophyOutlined /></template>
          <a-menu-item key="score-query">
            <router-link to="/score/query">成绩查询</router-link>
          </a-menu-item>
          <a-menu-item key="score-manage">
            <router-link to="/score/manage">成绩录入</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="profile">
          <template #icon><UserOutlined /></template>
          <router-link to="/user/profile">个人中心</router-link>
        </a-menu-item>
      </a-menu>
      <div class="user-info">
        <a-dropdown>
          <span class="ant-dropdown-link" @click.prevent>
            {{ userInfo?.username }}
            <DownOutlined />
          </span>
          <template #overlay>
            <a-menu>
              <a-menu-item key="logout" @click="handleLogout">退出登录</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-layout-header>
    <a-layout-content class="content">
      <router-view />
    </a-layout-content>
    <a-layout-footer class="footer">
      考试信息管理系统 ©2024 Created by Exam Team
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  DashboardOutlined,
  BookOutlined,
  FileOutlined,
  BellOutlined,
  TrophyOutlined,
  UserOutlined,
  DownOutlined
} from '@ant-design/icons-vue'
import { getUserInfo } from '@/api/user'

const router = useRouter()
const route = useRoute()
const selectedKeys = ref([])
const userInfo = ref(null)

onMounted(async () => {
  try {
    userInfo.value = await getUserInfo()
  } catch (error) {
    console.error(error)
  }
})

// 根据当前路由更新菜单选中状态
const updateSelectedKeys = () => {
  const path = route.path
  if (path.includes('/exam')) {
    selectedKeys.value = ['exam']
  } else if (path.includes('/registration')) {
    selectedKeys.value = ['registration']
  } else if (path.includes('/notice')) {
    selectedKeys.value = ['notice']
  } else if (path.includes('/score')) {
    selectedKeys.value = ['score']
  } else if (path.includes('/user')) {
    selectedKeys.value = ['profile']
  } else {
    selectedKeys.value = ['dashboard']
  }
}

updateSelectedKeys()

const handleLogout = () => {
  localStorage.removeItem('token')
  message.success('已退出登录')
  router.push('/login')
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout {
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #001529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.logo {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-right: 40px;
  white-space: nowrap;
}

.content {
  margin: 24px 16px;
  padding: 24px;
  background: #fff;
  min-height: 280px;
  border-radius: 4px;
}

.user-info {
  color: white;
}

.ant-dropdown-link {
  color: white;
  cursor: pointer;
}

.footer {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  padding: 20px;
}
</style>