Academic-Affairs-System/web/src/layouts/AdminLayout.vue

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  Collection,
  DataAnalysis,
  OfficeBuilding,
  Operation,
  Reading,
  Tickets,
  Calendar,
  User,
  UserFilled,
} from '@element-plus/icons-vue'
import { useAuthStore } from '../stores/auth'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const collapsed = ref(false)
const mobileMenu = ref(false)

const pageTitle = computed(() => {
  const titles: Record<string, string> = {
    dashboard: '教务总览',
    'base-data': '基础数据',
    personnel: '人员档案',
    courses: '课程库',
    curriculum: '培养方案',
    'teaching-tasks': '教学任务',
    schedules: '排课与课表',
    users: '用户与权限',
  }
  return titles[String(route.name)] ?? '教务管理'
})

function signOut() {
  auth.logout()
  router.push('/login')
}

onMounted(() => auth.refresh().catch(() => undefined))
</script>

<template>
  <div class="shell" :class="{ 'is-collapsed': collapsed }">
    <aside class="sidebar" :class="{ 'is-mobile-open': mobileMenu }">
      <div class="brand">
        <div class="brand-mark" aria-hidden="true">
          <span v-for="index in 9" :key="index" />
        </div>
        <div v-if="!collapsed">
          <strong>明序教务</strong>
          <small>ACADEMIC OFFICE</small>
        </div>
      </div>

      <div v-if="!collapsed" class="term-stamp">
        <span>当前工作区</span>
        <b>校级教务管理</b>
      </div>

      <el-menu
        router
        :default-active="route.path"
        :collapse="collapsed"
        class="nav-menu"
        @select="mobileMenu = false"
      >
        <el-menu-item index="/dashboard">
          <el-icon><DataAnalysis /></el-icon>
          <template #title>教务总览</template>
        </el-menu-item>
        <el-menu-item index="/base-data">
          <el-icon><OfficeBuilding /></el-icon>
          <template #title>基础数据</template>
        </el-menu-item>
        <el-menu-item
          v-if="auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Counselor'].includes(role))"
          index="/personnel"
        >
          <el-icon><UserFilled /></el-icon>
          <template #title>人员档案</template>
        </el-menu-item>
        <el-menu-item index="/courses">
          <el-icon><Collection /></el-icon>
          <template #title>课程库</template>
        </el-menu-item>
        <el-menu-item
          v-if="auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin'].includes(role))"
          index="/curriculum"
        >
          <el-icon><Reading /></el-icon>
          <template #title>培养方案</template>
        </el-menu-item>
        <el-menu-item
          v-if="auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin'].includes(role))"
          index="/teaching-tasks"
        >
          <el-icon><Tickets /></el-icon>
          <template #title>教学任务</template>
        </el-menu-item>
        <el-menu-item
          v-if="auth.user?.roles.some((role) => ['SuperAdmin', 'AcademicAdmin'].includes(role))"
          index="/schedules"
        >
          <el-icon><Calendar /></el-icon>
          <template #title>排课与课表</template>
        </el-menu-item>
        <el-menu-item v-if="auth.isSuperAdmin" index="/users">
          <el-icon><User /></el-icon>
          <template #title>用户与权限</template>
        </el-menu-item>
      </el-menu>

      <div v-if="!collapsed" class="phase-note">
        <span>第一阶段 · 核心可用版</span>
        <p>主数据、培养方案与教学运行已就绪</p>
      </div>
    </aside>

    <div v-if="mobileMenu" class="mobile-mask" @click="mobileMenu = false" />

    <main class="main-area">
      <header class="topbar">
        <button class="menu-toggle desktop-only" type="button" @click="collapsed = !collapsed">
          <el-icon><Operation /></el-icon>
        </button>
        <button class="menu-toggle mobile-only" type="button" @click="mobileMenu = true">
          <el-icon><Operation /></el-icon>
        </button>
        <div class="page-heading">
          <span>教务工作台</span>
          <h1>{{ pageTitle }}</h1>
        </div>
        <div class="user-block">
          <div class="avatar">{{ auth.user?.displayName?.slice(0, 1) ?? '管' }}</div>
          <div class="user-copy">
            <b>{{ auth.user?.displayName ?? '系统管理员' }}</b>
            <span>{{ auth.user?.roles?.[0] ?? '教务人员' }}</span>
          </div>
          <el-button text @click="signOut">退出</el-button>
        </div>
      </header>
      <section class="content">
        <RouterView />
      </section>
    </main>
  </div>
</template>