mversion-ui/src/pages/Layout/rightMenuGroup.vue

<template>
  <div class="mj-right-menu-group">
    <div class="user-header-container">
      <div class="action-group">
        <div class="action-item">
          <el-tooltip content="管理中心">
            <el-icon :size="16" @click="onStageManage"><Monitor /></el-icon>
          </el-tooltip>
        </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.nickname }}</span>
            <span class="userinfo-role">SUPER ADMIN</span>
          </div>
          <name-avatar :name="userInfo.nickname" :src="userInfo.avatar" :size="30" />
        </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 TokenManager from "@/utils/storage";
import NameAvatar from "@/components/nameAvatar/index.vue";
import { useUserStore } from "@/store";
defineOptions({ name: "RightMenuGroup" });
const userStore = useUserStore();
const tokenManager = TokenManager.getInstance();
const router = useRouter();

const emits = defineEmits(["on-stage-manage"]);
const handleCommand = (command: string) => {
  if (command === "logout") {
    // 退出登录
    ElMessageBox.confirm(
      "确认退出登录?",
      "提示",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }
    )
      .then(() => {
        tokenManager.clearStorage();
        window.location.reload();
      })
      .catch(() => {
        console.log('cancel')
      });
  }
};

const onStageManage = () => {
  emits("on-stage-manage",'/stage');
};

// 获取当前的用户的数据信息
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>