admin/src/layouts/components/UserArea.vue

<script setup lang="ts">
import { ChevronDownIcon } from 'tdesign-icons-vue-next'
import type { DropdownOption } from 'tdesign-vue-next'
import { useAppStore } from '@/stores/app'
import type { User } from '@/models/user'
const appStore = useAppStore()
const currentUser: User = appStore.currentUser
const options: DropdownOption[] = [
  {
    content: '退出登录',
    onClick() {
      appStore.logout()
    }
  }
]
</script>

<template>
  <div>
    <TDropdown :options="options" :minColumnWidth="100">
      <TButton variant="text">
        <div class="flex gap-2 items-center">
          <TAvatar size="24px" image="https://tdesign.gtimg.com/site/avatar.jpg"></TAvatar>
          {{ currentUser.username }}
          <ChevronDownIcon />
        </div>
      </TButton>
    </TDropdown>
  </div>
</template>

<style scoped></style>