UserDropdown.tsx
2.61 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// components
import { Dropdown, Menu, Divider } from 'ant-design-vue';
import { defineComponent, computed, unref } from 'vue';
// res
import headerImg from '/@/assets/images/header.jpg';
import Icon from '/@/components/Icon/index';
import { userStore } from '/@/store/modules/user';
import { DOC_URL } from '/@/settings/siteSetting';
import { appStore } from '/@/store/modules/app';
const prefixCls = 'user-dropdown';
export default defineComponent({
name: 'UserDropdown',
setup() {
const getProjectConfigRef = computed(() => {
return appStore.getProjectConfig;
});
const getUserInfo = computed(() => {
const { realName = '', desc } = userStore.getUserInfoState || {};
return { realName, desc };
});
/**
* @description: 退出登录
*/
function handleLoginOut() {
userStore.confirmLoginOut();
}
// 打开文档
function openDoc() {
window.open(DOC_URL, '__blank');
}
function handleMenuClick(e: any) {
if (e.key === 'loginOut') {
handleLoginOut();
}
if (e.key === 'doc') {
openDoc();
}
}
function renderItem({ icon, text, key }: { icon: string; text: string; key: string }) {
return (
<Menu.Item key={key}>
{() => (
<span class="flex items-center">
<Icon icon={icon} class="mr-1" />
<span>{text}</span>
</span>
)}
</Menu.Item>
);
}
return () => {
const { realName } = unref(getUserInfo);
const {
headerSetting: { showDoc },
} = unref(getProjectConfigRef);
return (
<Dropdown placement="bottomLeft">
{{
default: () => (
<section class={prefixCls}>
<img class={`${prefixCls}__header`} src={headerImg} />
<section class={`${prefixCls}__info`}>
<section class={`${prefixCls}__name`}>{realName}</section>
</section>
</section>
),
overlay: () => (
<Menu slot="overlay" onClick={handleMenuClick}>
{() => (
<>
{showDoc && renderItem({ key: 'doc', text: '文档', icon: 'gg:loadbar-doc' })}
{showDoc && <Divider />}
{renderItem({
key: 'loginOut',
text: '退出系统',
icon: 'ant-design:poweroff-outlined',
})}
</>
)}
</Menu>
),
}}
</Dropdown>
);
};
},
});