marking-paper-struct-web/src/layout/left-menu.vue

<template>
  <div class="menu">
    <div class="menu-header">
      <img class="web-logo" src="@imgs/layout/web-logo.png" alt="" />
    </div>
    <div class="menu-content">
      <MenuItem
        class="root-menu-item"
        v-for="menuItem in menu"
        :key="menuItem.label"
        :menu-item="menuItem"
      />
    </div>
    <div class="menu-footer">
      <div class="user-info">
        <div class="user-name">{{ mainStore.systemUserInfo?.name }}</div>
        <div class="exit-login" @click="handleExitLogin">
          <SvgIcon class="exit-icon" name="exit-icon" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="LayoutLeftMenu">
import MenuItem from "@/layout/menu-item.vue";
import { exitLogin } from "@/utils/common";
import { useMainStore } from "@/store/main";

const mainStore = useMainStore();
const menu = [
  { path: "/school", label: "学校管理", iconName: "school-icon" },
  {
    path: "",
    label: "考试管理",
    children: [
      { path: "/exam", label: "考试批次管理", iconName: "exam-icon" },
      { path: "/subjects", label: "科目试卷结构", iconName: "paper-icon" },
    ],
  },
  { path: "/user", label: "用户管理", iconName: "user-icon" },
];

const handleExitLogin = () => {
  exitLogin();
};
</script>

<style scoped lang="less">
.menu {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  .menu-header {
    padding: 0 16px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    .web-logo {
      height: 22px;
      max-width: 100%;
      object-fit: contain;
    }
  }
  .menu-content {
    flex: 1 1 0;
    padding: 0 32px;
    overflow-y: auto;
    .root-menu-item {
      padding: 25px 0;
      border-bottom: 1px solid @border-color;
      &:first-child {
        border-top: 1px solid @border-color;
      }
    }
  }
  .menu-footer {
    padding: 16px;
    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding: 0 16px;
      background-color: @bg-color;
      border-radius: @border-radius-base;
      background-image: url("@imgs/layout/user-info-bg.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-size: contain;
      .user-name {
        font-size: @font-size-small;
      }
      .exit-login {
        color: @font-color;
        padding: 6px;
        cursor: pointer;
        .exit-icon {
          width: 16px;
          height: 16px;
        }
        &:hover {
          color: @font-light-color;
        }
      }
    }
  }
}
</style>