Files
MoviePilot-Frontend/src/layouts/components/UserProfile.vue
2023-06-24 17:26:00 +08:00

90 lines
2.6 KiB
Vue

<script setup lang="ts">
import router from "@/router";
import avatar1 from "@images/avatars/avatar-1.png";
// 执行注销操作
const logout = () => {
// 清除登录状态信息,例如删除令牌
localStorage.removeItem("token");
// 重定向到登录页面或其他适当的页面
router.push("/login");
};
</script>
<template>
<VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
<VAvatar class="cursor-pointer" color="primary" variant="tonal">
<VImg :src="avatar1" />
<!-- SECTION Menu -->
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
<VList>
<!-- 👉 User Avatar & Name -->
<VListItem>
<template #prepend>
<VListItemAction start>
<VBadge
dot
location="bottom right"
offset-x="3"
offset-y="3"
color="success"
>
<VAvatar color="primary" variant="tonal">
<VImg :src="avatar1" />
</VAvatar>
</VBadge>
</VListItemAction>
</template>
<VListItemTitle class="font-weight-semibold"> 管理员 </VListItemTitle>
<VListItemSubtitle>Admin</VListItemSubtitle>
</VListItem>
<VDivider class="my-2" />
<!-- 👉 Profile -->
<VListItem link>
<template #prepend>
<VIcon class="me-2" icon="mdi-account-outline" size="22" />
</template>
<VListItemTitle>个人中心</VListItemTitle>
</VListItem>
<!-- 👉 Settings -->
<VListItem link>
<template #prepend>
<VIcon class="me-2" icon="mdi-cog-outline" size="22" />
</template>
<VListItemTitle>设置</VListItemTitle>
</VListItem>
<!-- 👉 FAQ -->
<VListItem link>
<template #prepend>
<VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
</template>
<VListItemTitle>帮助</VListItemTitle>
</VListItem>
<!-- Divider -->
<VDivider class="my-2" />
<!-- 👉 Logout -->
<VListItem @click="logout">
<template #prepend>
<VIcon class="me-2" icon="mdi-logout" size="22" />
</template>
<VListItemTitle>注销</VListItemTitle>
</VListItem>
</VList>
</VMenu>
<!-- !SECTION -->
</VAvatar>
</VBadge>
</template>