exam-score-statistic-web/src/components/Layout.vue

<template>
  <div class="tw-h-screen tw-flex">
    <div class="tw-bg-white">
      <div class="tw-text-center tw-py-10">qm logo</div>
      <a-menu style="width: 240px" mode="inline" :open-keys="['sub1', 'sub2']">
        <a-sub-menu key="sub1">
          <template #icon> icon </template>
          <template #title>基础管理</template>
          <a-menu-item key="11">
            <router-link active-class="active-route" to="/basic/rootOrg">
              顶级机构管理
            </router-link>
          </a-menu-item>
          <a-menu-item key="12">
            <router-link active-class="active-route" to="/basic/subOrg">
              机构管理
            </router-link>
          </a-menu-item>
          <a-menu-item key="13">角色管理</a-menu-item>
          <a-menu-item key="14">用户管理</a-menu-item>
          <a-menu-item key="15">科目管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #icon> icon </template>
          <template #title>项目管理</template>
          <a-menu-item key="21">项目列表</a-menu-item>
          <a-menu-item key="22">关联分析</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="tw-h-screen" style="width: calc(100% - 240px)">
      <div
        class="tw-bg-white tw-flex tw-justify-between"
        style="border-left: 1px solid var(--app-main-bg-color)"
      >
        <div>
          当前所在位置：<span class="location-teleport">{{
            store.currentLocation
          }}</span>
        </div>
        <div class="tw-flex tw-cursor-pointer">
          <div>{{ store.userInfo.displayName }}</div>

          <div @click="doLogout">退出</div>
        </div>
      </div>
      <router-view class="tw-m-8"></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { logout } from "@/api/loginPage";
import { routeLogout } from "@/router";
import { useMainStore } from "@/store";

const store = useMainStore();

async function doLogout() {
  logout().then(() => routeLogout({ cause: "主动退出", redirectTo: "/" }));
}
</script>

<style scoped>
.active-route {
  color: #4d66fd;
}
</style>