UserInfo.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <script setup lang="ts">
  2. import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox } from 'element-plus'
  3. import { useI18n } from '@/hooks/web/useI18n'
  4. import { useCache } from '@/hooks/web/useCache'
  5. import { useRouter } from 'vue-router'
  6. import { useDesign } from '@/hooks/web/useDesign'
  7. import avatarImg from '@/assets/imgs/avatar.gif'
  8. import { useUserStore } from '@/store/modules/user'
  9. import { useTagsViewStore } from '@/store/modules/tagsView'
  10. const { t } = useI18n()
  11. const { wsCache } = useCache()
  12. const { push, replace } = useRouter()
  13. const userStore = useUserStore()
  14. const tagsViewStore = useTagsViewStore()
  15. const { getPrefixCls } = useDesign()
  16. const prefixCls = getPrefixCls('user-info')
  17. const user = wsCache.get('user')
  18. const avatar = user.user.avatar ? user.user.avatar : avatarImg
  19. const userName = user.user.nickname ? user.user.nickname : 'Admin'
  20. const loginOut = () => {
  21. ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
  22. confirmButtonText: t('common.ok'),
  23. cancelButtonText: t('common.cancel'),
  24. type: 'warning'
  25. })
  26. .then(async () => {
  27. userStore.loginOut()
  28. tagsViewStore.delAllViews
  29. replace('/login?redirect=/index')
  30. })
  31. .catch(() => {})
  32. }
  33. const toProfile = async () => {
  34. push('/userinfo/profile')
  35. }
  36. const toDocument = () => {
  37. window.open('https://doc.iocoder.cn/')
  38. }
  39. </script>
  40. <template>
  41. <ElDropdown :class="prefixCls" trigger="click">
  42. <div class="flex items-center">
  43. <img :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
  44. <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">
  45. {{ userName }}
  46. </span>
  47. </div>
  48. <template #dropdown>
  49. <ElDropdownMenu>
  50. <ElDropdownItem>
  51. <Icon icon="ep:tools" />
  52. <div @click="toProfile">{{ t('common.profile') }}</div>
  53. </ElDropdownItem>
  54. <ElDropdownItem>
  55. <Icon icon="ep:menu" />
  56. <div @click="toDocument">{{ t('common.document') }}</div>
  57. </ElDropdownItem>
  58. <ElDropdownItem divided>
  59. <Icon icon="ep:switch-button" />
  60. <div @click="loginOut">{{ t('common.loginOut') }}</div>
  61. </ElDropdownItem>
  62. </ElDropdownMenu>
  63. </template>
  64. </ElDropdown>
  65. </template>