vben
authored
|
1
2
|
<template>
<Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
|
vben
authored
|
3
|
<span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
|
|
4
|
<img :class="`${prefixCls}__header`" :src="getUserInfo.avatar" />
|
vben
authored
|
5
6
7
8
|
<span :class="`${prefixCls}__info hidden md:block`">
<span :class="`${prefixCls}__name `" class="truncate">
{{ getUserInfo.realName }}
</span>
|
vben
authored
|
9
10
11
12
|
</span>
</span>
<template #overlay>
|
|
13
|
<Menu>
|
vben
authored
|
14
15
16
|
<MenuItem
key="doc"
:text="t('layout.header.dropdownItemDoc')"
|
|
17
|
@click="openDoc"
|
vben
authored
|
18
|
icon="ion:document-text-outline"
|
vben
authored
|
19
20
|
v-if="getShowDoc"
/>
|
Vben
authored
|
21
|
<MenuDivider v-if="getShowDoc" />
|
vben
authored
|
22
|
<MenuItem
|
Vben
authored
|
23
|
v-if="getUseLockPage"
|
vben
authored
|
24
|
key="lock"
|
|
25
|
@click="handleLock"
|
vben
authored
|
26
27
28
29
|
:text="t('layout.header.tooltipLock')"
icon="ion:lock-closed-outline"
/>
<MenuItem
|
vben
authored
|
30
|
key="logout"
|
|
31
|
@click="handleLoginOut"
|
vben
authored
|
32
|
:text="t('layout.header.dropdownItemLoginOut')"
|
vben
authored
|
33
|
icon="ion:power-outline"
|
vben
authored
|
34
35
36
37
|
/>
</Menu>
</template>
</Dropdown>
|
vben
authored
|
38
|
<LockAction @register="register" />
|
vben
authored
|
39
40
41
42
43
44
45
46
47
|
</template>
<script lang="ts">
// components
import { Dropdown, Menu } from 'ant-design-vue';
import { defineComponent, computed } from 'vue';
import { DOC_URL } from '/@/settings/siteSetting';
|
Vben
authored
|
48
|
import { useUserStore } from '/@/store/modules/user';
|
vben
authored
|
49
50
51
|
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
|
vben
authored
|
52
53
|
import { useModal } from '/@/components/Modal';
|
vben
authored
|
54
|
import headerImg from '/@/assets/images/header.jpg';
|
vben
authored
|
55
56
57
58
|
import { propTypes } from '/@/utils/propTypes';
import { openWindow } from '/@/utils';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
vben
authored
|
59
|
|
|
60
|
//type MenuEvent = 'logout' | 'doc' | 'lock';
|
vben
authored
|
61
62
63
64
65
66
67
68
|
export default defineComponent({
name: 'UserDropdown',
components: {
Dropdown,
Menu,
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')),
MenuDivider: Menu.Divider,
|
vben
authored
|
69
|
LockAction: createAsyncComponent(() => import('../lock/LockModal.vue')),
|
vben
authored
|
70
71
72
73
74
75
76
|
},
props: {
theme: propTypes.oneOf(['dark', 'light']),
},
setup() {
const { prefixCls } = useDesign('header-user-dropdown');
const { t } = useI18n();
|
Vben
authored
|
77
|
const { getShowDoc, getUseLockPage } = useHeaderSetting();
|
Vben
authored
|
78
|
const userStore = useUserStore();
|
vben
authored
|
79
80
|
const getUserInfo = computed(() => {
|
|
81
82
|
const { realName = '', avatar, desc } = userStore.getUserInfo || {};
return { realName, avatar: avatar || headerImg, desc };
|
vben
authored
|
83
84
|
});
|
vben
authored
|
85
86
87
88
89
90
|
const [register, { openModal }] = useModal();
function handleLock() {
openModal(true);
}
|
vben
authored
|
91
92
93
94
95
96
97
98
99
100
|
// login out
function handleLoginOut() {
userStore.confirmLoginOut();
}
// open doc
function openDoc() {
openWindow(DOC_URL);
}
|
|
101
102
103
104
105
106
107
108
109
110
111
112
113
|
// function handleMenuClick(e: { key: MenuEvent }) {
// switch (e.key) {
// case 'logout':
// handleLoginOut();
// break;
// case 'doc':
// openDoc();
// break;
// case 'lock':
// handleLock();
// break;
// }
// }
|
vben
authored
|
114
115
116
117
118
|
return {
prefixCls,
t,
getUserInfo,
|
|
119
|
// handleMenuClick,
|
vben
authored
|
120
|
getShowDoc,
|
vben
authored
|
121
|
register,
|
Vben
authored
|
122
|
getUseLockPage,
|
|
123
124
125
|
handleLoginOut,
openDoc,
handleLock,
|
vben
authored
|
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
};
},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-header-user-dropdown';
.@{prefix-cls} {
height: @header-height;
padding: 0 0 0 10px;
padding-right: 10px;
overflow: hidden;
font-size: 12px;
cursor: pointer;
align-items: center;
img {
|
Vben
authored
|
143
144
|
width: 24px;
height: 24px;
|
vben
authored
|
145
146
147
148
149
150
151
152
153
154
155
156
157
|
margin-right: 12px;
}
&__header {
border-radius: 50%;
}
&__name {
font-size: 14px;
}
&--dark {
&:hover {
|
Vben
authored
|
158
|
background-color: @header-dark-bg-hover-color;
|
vben
authored
|
159
160
161
162
|
}
}
&--light {
|
|
163
164
165
|
&:hover {
background-color: @header-light-bg-hover-color;
}
|
Vben
authored
|
166
|
|
vben
authored
|
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
.@{prefix-cls}__name {
color: @text-color-base;
}
.@{prefix-cls}__desc {
color: @header-light-desc-color;
}
}
&-dropdown-overlay {
.ant-dropdown-menu-item {
min-width: 160px;
}
}
}
</style>
|