fix:联调登录接口
This commit is contained in:
unknown
197
src/pages/Layout/rightMenuGroup.vue
Normal file
197
src/pages/Layout/rightMenuGroup.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="mj-right-menu-group">
|
||||
<div class="user-header-container">
|
||||
<div class="action-group">
|
||||
<div class="action-item">
|
||||
<el-icon :size="16"><Monitor /></el-icon>
|
||||
</div>
|
||||
<div class="action-item">
|
||||
<el-badge is-dot class="notice-badge">
|
||||
<el-icon :size="16"><Bell /></el-icon>
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown placement="bottom" trigger="click" @command="handleCommand">
|
||||
<div class="user-info">
|
||||
<div class="text-meta">
|
||||
<span class="userinfo-username">{{ userInfo.username }}</span>
|
||||
<span class="userinfo-role">SUPER ADMIN</span>
|
||||
</div>
|
||||
<el-avatar :size="30" :src="userInfo.avatar" />
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">
|
||||
<div class="logout-section-content">
|
||||
<svg
|
||||
class="logout-section-icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<span class="logout-section-text">退出登录</span>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Monitor, Bell } from "@element-plus/icons-vue";
|
||||
import TokenManager from "@/utils/storage";
|
||||
import { useUserStore } from "@/store";
|
||||
defineOptions({ name: "RightMenuGroup" });
|
||||
const userStore = useUserStore();
|
||||
const tokenManager = TokenManager.getInstance();
|
||||
const router = useRouter();
|
||||
const handleCommand = (command: string) => {
|
||||
if (command === "logout") {
|
||||
// 退出登录
|
||||
tokenManager.clearStorage();
|
||||
router.replace({ name: "Login" });
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前的用户的数据信息
|
||||
const userInfo = computed(() => {
|
||||
return userStore.userInfo;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.mj-right-menu-group {
|
||||
$text-main: #303133;
|
||||
$text-secondary: #909399;
|
||||
$border-color: #e4e7ed;
|
||||
$bg-capsule: #f5f7fa;
|
||||
.user-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
gap: 24px;
|
||||
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
||||
|
||||
// 左侧胶囊形状容器
|
||||
.action-group {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: $bg-capsule;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 30px;
|
||||
padding: 6px 16px;
|
||||
box-sizing: border-box;
|
||||
.action-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: $text-secondary;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #d3dce9;
|
||||
margin: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 调整 ElementPlus badge 小红点位置
|
||||
:deep(.el-badge__content.is-fixed.is-dot) {
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
background-color: #ff5722;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息区域
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 2px 4px 2px 16px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 30px;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s ease, background-color 0.3s ease-in-out;
|
||||
.el-avatar {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
border-color: $border-color;
|
||||
.el-avatar {
|
||||
transform: scale(1.06);
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.text-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end; // 文字向右对齐
|
||||
line-height: 1.2;
|
||||
|
||||
.userinfo-username {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
color: $text-main;
|
||||
}
|
||||
|
||||
.userinfo-role {
|
||||
font-size: 12px;
|
||||
color: #9b9ea3;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-avatar {
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-section-content {
|
||||
width: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
.logout-section-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #8c8c8c;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.logout-section-text {
|
||||
font-size: 14px;
|
||||
color: #ff4d4f;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user