sl-sfy-safety/src/components/UserInfo.vue

<template>
  <el-dropdown trigger="click">
    <div class="user-info">
      <img :src="UserAvatar" class="user-avatar" />
      <el-tooltip
        class="box-item"
        effect="light"
        :content="userStore.info?.realname"
        placement="top"
        :disabled="userStore.info?.realname.length < 10"
      >
        <span class="user-name">{{ userStore.info?.realname }}</span>
      </el-tooltip>
      <img :src="ArrowIcon" class="dropdown-icon" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="switchAccount">切换账号</el-dropdown-item>
        <el-dropdown-item @click="showUpdatePwd">修改密码</el-dropdown-item>
        <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
  import UserAvatar from 'assets/images/user-avatar@1X.png';
  import ArrowIcon from 'assets/svg/arrow.svg';
  import { useUserStore } from '@/store/modules/user';
  import router from '@/router';
  const userStore = useUserStore();

  const handleLogout = async () => {
    userStore.logout();
    await router.push({ path: '/home' });
    window.location.reload();
  };

  const switchAccount = () => {
    userStore.showSwitchAccount = true;
  };

  const showUpdatePwd = () => {
    userStore.showUpdatePwd = true;
  };
</script>

<style lang="scss" scoped>
  .user-info {
    @include flex-center;
    gap: 4cpx;
  }
  .user-avatar {
    width: 30cpx;
    height: 30cpx;
  }
  .user-name {
    font-weight: 400;
    font-size: 14cpx;
    color: $text-color;
    max-width: 180px;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  .dropdown-icon {
    width: 25px;
    height: 25px;
  }
  :deep(.el-dropdown-menu__item) {
    padding: 4px 37px;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
    &:hover {
      background-color: $primary-color;
      color: $white-color;
      border-radius: 4px;
    }
  }
</style>