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