FE_sandTable/src/layout/components/AppHeader.vue

<template>
  <div class="width-[100%] flex justify-between items-center w-full py-6 px-5 overflow-hidden bg-transparent">
    <logo :collapse="collapse" />
    <div class="inline-flex items-center">
      <el-tooltip effect="light"
                  content="退出实训"
                  placement="bottom">
        <img class="mr-3 cursor-pointer"
             src="@/assets/images/2.png"
             alt=""
             @click="logout" />
      </el-tooltip>
      <el-tooltip effect="light"
                  content="返回关卡"
                  placement="bottom">
        <img class="mr-3 cursor-pointer"
             src="@/assets/images/3.png"
             alt=""
             @click="toLevel" />
      </el-tooltip>
      <el-tooltip effect="light"
                  content="返回选择角色"
                  placement="bottom">
        <img class="cursor-pointer"
             src="@/assets/images/4.png"
             alt=""
             @click="toRole" />
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { currentUser, perm, logout } from '@/store/useCurrentUser';
import Cookies from 'js-cookie';
import Logo from './Logo.vue';

const router = useRouter();

onMounted(() => {});

// 返回关卡
const toLevel = () => {
  router.push('/');
};
// 返回角色
const toRole = () => {
  router.push(`/role?levelId=${Cookies.get('sand-level')}`);
};
</script>

<style lang="scss" scoped></style>