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