RunForge-Frontend/src/components/Header/index.vue

<template>
    <div class="root">
        <a-menu mode="horizontal" class="menu" :selected-keys="['99']">
            <a-menu-item key="0"
                :style="{ cursor: 'pointer', padding: 0, marginRight: '650px', background: 'transparent', color: props.color }"
                disabled>
                <div class="logo" @click="$router.push('/')">
                    <img alt="RunForge" src="/logo.svg" height="40">
                    <span class="title">RunForge</span>
                </div>
            </a-menu-item>

            <a-menu-item key="4" :style="{ background: 'transparent', color: props.color }" v-if="!user"
                @click="$router.push('/login')">
                用户登录
            </a-menu-item>
            <a-sub-menu key="5" :style="{ background: 'transparent', color: props.color }" v-else>
                <template #expand-icon-down></template>
                <template #title>
                    <div class="userinfo">
                        <a-avatar :size="30"><img alt="avatar" :src="user.avatar" /></a-avatar>
                        <span>{{ user.username }}</span>
                    </div>
                </template>
                <a-menu-item key="5_0" @click="$router.push('/user')"><icon-user /> 个人中心</a-menu-item>
                <a-menu-item key="5_1" @click="logout"><icon-export /> 退出登录</a-menu-item>
            </a-sub-menu>
        </a-menu>
    </div>

</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'

const props = defineProps({
    color: {
        type: String,
        default: 'black'
    }
})

const user = ref('')
const getuser = async () => {
    const userStore = useUserStore()
    let userInfo = await userStore.getInfo()
    if (userInfo?.avatar && userInfo?.username && userInfo?.uuid && userInfo?.session)
        user.value = userInfo
}

const logout = () => {
    Modal.confirm({
        title: '退出登录',
        content: '您即将退出登录，是否继续？',
        onOk: () => {
            const userStore = useUserStore()
            userStore.logout()
            Message.success('退出成功!')
            setTimeout(() => { window.location.reload() }, 1000)
        },
        onCancel: () => {

        }
    });
}

getuser()

</script>

<style scoped>
.root {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    min-width: 1280px;
    z-index: 100;
    user-select: none;
}

.menu {
    width: 100%;
    background: transparent;
}

.logo {
    display: flex;
}

.logo span {
    font-size: 1.5em;
    margin: 5px 8px;
}

.userinfo {
    margin-top: -15px;
    transform: translateY(23px);
}

.userinfo span {
    margin-left: 7px;
}
</style>