2.5

<template>

  <a-row id="globalHeader" align="center" :wrap="false">

    <a-col flex="auto">

      <a-menu

        mode="horizontal"

        :selected-keys="selectedKeys"

        @menu-item-click="doMenuClick"

      >

        <a-menu-item

          key="0"

          :style="{ padding: 0, marginRight: '38px' }"

          disabled

        >

          <div class="title-bar">

            <img src="../assets/logo.jpg" alt="logo" class="logo" />

            <div class="title">Ren OJ</div>

          </div>

        </a-menu-item>

        <a-menu-item

          class="menu-item"

          v-for="item in visibleRoutes"

          :key="item.path"

        >

          {{ item.name }}

        </a-menu-item>

      </a-menu>

    </a-col>

    <a-col flex="100px">

      <div>

        {{ store.state.user?.loginUser?.userName ?? "未登录" }}

      </div>

    </a-col>

  </a-row>

</template>

<script setup lang="ts">

import ACCESS_ENUM from "@/access/accessEnum";

import checkAccess from "@/access/checkAccess";

import { routes } from "@/router/routes";

import { computed, ref } from "vue";

import { useRouter } from "vue-router";

import { useStore } from "vuex";

const router = useRouter();

const store = useStore();

//展示在菜单的路由

const visibleRoutes = computed(() => {

  return routes.filter((item, index) => {

    if (item.meta?.hideInMenu) {

      return false;

    }

    if (

      !checkAccess(store.state.user.loginUser, item?.meta?.access as string)

    ) {

      return false;

    }

    return true;

  });

});

// 默认主页

const selectedKeys = ref(["/"]);

//路由跳转后,更新选中的菜单项

router.afterEach((to, from, next) => {

  selectedKeys.value = [to.path];

});

setTimeout(() => {

  store.dispatch("user/getLoginUser", {

    userName: "鱼皮管理员",

    userRole: ACCESS_ENUM.ADMIN,

  });

}, 3000);

const doMenuClick = (key: string) => {

  router.push({

    path: key,

  });

};

</script>

<style scoped>

.title-bar {

  display: flex;

  align-items: center;

}

.logo {

  height: 68px;

  margin-right: 16px;

}

.title {

  color: #444;

  font-size: 24px;

}

.menu-item {

  font-size: 18px;

  margin-left: 10px;

}

</style>