shangyun/Web/src/components/common/topbar.vue

<template>
  <div class="width-100 flex-row flex-justify-between flex-align-center"
    style="height: 60px;border-bottom: 1px solid #F0F2F5;">
    <div>
      <img :src="logoSrc" style="width: 30px;height: 30px;">
    </div>
    <div style="cursor: pointer;" class="height-100 fz16 flex-row flex-justify-between flex-align-center">
      <a-dropdown>
        <div class="height-100">
          <span class="fz20 mt20" style="border: 2px solid white; border-radius: 50%; display: inline-flex;">
            <UserOutlined />
          </span>
          <span class="ml10 mr10" style="float: right;">{{ username }}</span>
        </div>
        <template #overlay>
          <a-menu class="flex-column flex-justify-between flex-align-center">
            <a-menu-item>
              <span class="mr10" style="font-size: 16px;">
                <PoweroffOutlined />
              </span>
              <span @click="logout">退出登录</span>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { UserOutlined, PoweroffOutlined } from '@ant-design/icons-vue'
import logoSrc from '/@/assets/icons/cloudapi.png'
import { getRoot } from '/@/root'
import { getPlatformInfo } from '/@/api/manage'
import { ELocalStorageKey, ERouterName } from '/@/types'

const root = getRoot()

const username = ref(localStorage.getItem(ELocalStorageKey.Username))
const workspaceName = ref('')

onMounted(() => {
  getPlatformInfo().then(res => {
    workspaceName.value = res.data.workspace_name
  })
})

const onClickToWorkspace = () => {
  root.$router.push(ERouterName.WORKSPACE)
}

const logout = () => {
  localStorage.clear()
  root.$router.push(ERouterName.PROJECT)
}
</script>

<style lang="scss" scoped>
@import '/@/styles/index.scss';

.fontBold {
  font-weight: 500;
  font-size: 18px;
}
</style>