Situation-Awareness-Platform-Frontend/src/components/Header/UserAvatar.vue

<template>
  <div class="g-user-avatar flex-center ml-1" @click="toggleDropDown">
    <GAvatar :width="28" :height="28" :name="accountInfo.username" :src="accountInfo.avatar"></GAvatar>
  </div>
  <d-drawer v-model="visible" class="g-user-drawer-container">
    <div class="g-user-drawer">
      <div class="g-user-drawer-info">
        <div class="g-user-avatar">
          <GAvatar style="width: 28px" :name="accountInfo.username" :src="accountInfo.avatar"></GAvatar>
        </div>
        <div class="g-user-drawer-info-list">
          <div class="g-user-drawer-info-list-name">
            <span class="break-all">{{ accountInfo.username ? accountInfo.username[0] : '' }}</span>
            <GIcon class="close-icon" name="gt-close" size="12" @click="handleClose" />
          </div>
          <div class="g-user-drawer-info-list-id break-all">@{{ accountInfo.username }}</div>
        </div>
      </div>
      <div class="g-user-drawer-block" v-for="(block, index) in blockList" :key="index">
        <OptionLink v-for="item in block" :key="item.id" v-bind="item" @click="handleClick(item)">
          <GIcon v-if="item.icon" :name="item.icon" size="14px" />{{ item.label }}
        </OptionLink>
      </div>
    </div>
  </d-drawer>
</template>

<script setup>
import { ref } from 'vue';
import { useAccount } from '@/utils/hooks/useAccount';
import { toLogout } from '@/api/user';
import { devLogout } from '@/api/org/devIndex';
import { useRouter, useRoute } from 'vue-router';
import { reqCatch } from '@/utils/catch';
import { orgInfoStore } from '@/stores/Org/index';
import { repoInfoStore } from '@/stores/Repo';
import { storeToRefs } from 'pinia';

const { accountInfo, RemoveInfo } = useAccount();
const { repoInfo } = storeToRefs(repoInfoStore()); // pinia直接解构会失去响应式
const { orgInfo } = storeToRefs(orgInfoStore()); // pinia直接解构会失去响应式

const router = useRouter();
const route = useRoute();

const visible = ref(false);
const toggleDropDown = (isShow) => {
  if (typeof isShow === 'boolean') {
    visible.value = isShow;
  } else {
    visible.value = !visible.value;
  }
};

const logout = async () => {
  RemoveInfo(); // 目前先强制清除用户信息，后面接口通了再调
  const res = await toLogout();
  await reqCatch(devLogout, {}); // 清除社区登录
  if (!res.error) {
    RemoveInfo();
    // 有权限刷新当前页，无权限需要登录返回首页
    if (
      route.meta?.needLogin ||
      (route.meta?.type === 'repo' && repoInfo.value?.visibility === 'private') ||
      orgInfo.value?.visibility === 'private'
    ) {
      router.push('/');
    } else {
      router.go(0);
    }
  }
  // 退出系统刷新页面
  setTimeout(() => {
    location.reload();
  }, 100);
};

const handleClick = (item) => {
  if (item?.action) {
    item.action();
  }

  toggleDropDown(false);
};

const handleClose = () => {
  toggleDropDown(false);
};

// 使用router-link跳转，默认参数结构如下：
const DEFAULT_ROUTER_PARAMS = Object.freeze({
  name: '',
  params: {
    namespace: accountInfo.value.username
  },
  query: {}
});
// 获取router跳转参数
const getRouterLink = (params) => {
  if (typeof params === 'string') {
    return {
      ...DEFAULT_ROUTER_PARAMS,
      name: params
    };
  }

  return {
    ...DEFAULT_ROUTER_PARAMS,
    ...params
  };
};

const blockList = ref([
  [{ id: 'myPage', label: '个人中心', to: getRouterLink('PersonalCenter') }],
  // [
  //   // { id: 'dashboard', label: '工作台', icon: 'gt-member-c', to: getRouterLink('dashboard') },
  //   // { id: 'myIssues', label: '我的 Issue', icon: 'gt-issue-c', to: getRouterLink('issues') },
  //   // { id: 'myDiscuss', label: '我的讨论', icon: 'gt-comment-c', to: getRouterLink('discussionCreated') },
  //   // { id: 'myMR', label: '我的合并请求', icon: 'gt-me-merge-c', to: getRouterLink('merge') },
  //   { id: 'notice', label: '消息通知', icon: 'gt-remind-c', to: getRouterLink({ name: 'notice', query: { status: 'all' }}) }
  // ],
  // [
  //   { id: 'myOrg', label: '我的组织', icon: 'gt-organizations-c', to: getRouterLink({ name: 'settingOrganization' }) },
  //   // { id: 'myRepo', label: '我的项目', icon: 'gt-folder-c', to: getRouterLink('userRepos') },
  //   // { id: 'myStar', label: '我的 Star', icon: 'gt-star-c', to: getRouterLink('userStars') }
  // ],
  // [
  //   { id: 'personalSetting', label: '个人设置', icon: 'gt-setting-c', to: getRouterLink('setting') },
  //   { id: 'help', label: '帮助文档', icon: 'gt-file-c', href: 'https://gitcode.com/Gitcode-offical-team/GitCode-Docs/wiki' }
  // ],
  [{ id: 'logout', label: '退出登录', icon: 'gt-exit', action: logout }]
]);
</script>

<style lang="scss" scoped>
@import 'devui-theme/styles-var/devui-var.scss';
.g-user {
  &-avatar {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 2px;
  }
  &-drawer {
    padding: 24px;
    &-info {
      display: flex;
      align-items: flex-start;
      padding-bottom: 16px;
      gap: 16px;
      .g-user-avatar {
        cursor: inherit;
      }
      &-list {
        flex: 1;
        &-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-weight: 500;
          color: #2d2d2e;
          line-height: 20px;
          .close-icon {
            cursor: pointer;
          }
        }
        &-id {
          font-size: 12px;
          color: #707a87;
          line-height: 16px;
        }
      }
    }
    &-block {
      display: flex;
      flex-direction: column;
      padding: 16px 0;
      & + & {
        border-top: 1px solid var(--color-border-light);
      }
      :deep(.g-option-link) {
        line-height: 36px;
        font-size: 15px;
      }
    }
  }
}
</style>

<style>
.g-user-drawer-container {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-radius: 0 !important;
}
</style>