| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { ElMessageBox } from 'element-plus' |
| 3 | ||
| 4 | import avatarImg from '@/assets/imgs/avatar.gif' | |
| 5 | import { useDesign } from '@/hooks/web/useDesign' | |
| 6 | import { useTagsViewStore } from '@/store/modules/tagsView' | |
| 7 | import { useUserStore } from '@/store/modules/user' | |
| 8 | import LockDialog from './components/LockDialog.vue' | |
| 9 | import LockPage from './components/LockPage.vue' | |
| 10 | import { useLockStore } from '@/store/modules/lock' | |
| 11 | ||
| 12 | defineOptions({ name: 'UserInfo' }) | |
| 13 | ||
| 14 | const { t } = useI18n() | |
| 15 | ||
| 16 | const { push, replace } = useRouter() | |
| 17 | ||
| 18 | const userStore = useUserStore() | |
| 19 | ||
| 20 | const tagsViewStore = useTagsViewStore() | |
| 21 | ||
| 22 | const { getPrefixCls } = useDesign() | |
| 23 | ||
| 24 | const prefixCls = getPrefixCls('user-info') | |
| 25 | ||
| 3e359e | 26 | const avatar = computed(() => userStore.user.avatar || avatarImg) |
| 820397 | 27 | const userName = computed(() => userStore.user.nickname ?? 'Admin') |
| H | 28 | |
| 29 | // 锁定屏幕 | |
| 30 | const lockStore = useLockStore() | |
| 31 | const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false) | |
| 32 | const dialogVisible = ref<boolean>(false) | |
| 33 | const lockScreen = () => { | |
| 34 | dialogVisible.value = true | |
| 35 | } | |
| 36 | ||
| 37 | const loginOut = async () => { | |
| 38 | try { | |
| 39 | await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), { | |
| 40 | confirmButtonText: t('common.ok'), | |
| 41 | cancelButtonText: t('common.cancel'), | |
| 42 | type: 'warning' | |
| 43 | }) | |
| 44 | await userStore.loginOut() | |
| 45 | tagsViewStore.delAllViews() | |
| 46 | replace('/login?redirect=/index') | |
| 47 | } catch {} | |
| 48 | } | |
| 49 | const toProfile = async () => { | |
| 50 | push('/user/profile') | |
| 51 | } | |
| 52 | const toDocument = () => { | |
| 3e359e | 53 | window.open('https://doc.iocoder.cn/') |
| 820397 | 54 | } |
| H | 55 | </script> |
| 56 | ||
| 57 | <template> | |
| 58 | <ElDropdown class="custom-hover" :class="prefixCls" trigger="click"> | |
| 59 | <div class="flex items-center"> | |
| 60 | <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" /> | |
| 61 | <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden"> | |
| 62 | {{ userName }} | |
| 63 | </span> | |
| 64 | </div> | |
| 65 | <template #dropdown> | |
| 66 | <ElDropdownMenu> | |
| 67 | <ElDropdownItem> | |
| 68 | <Icon icon="ep:tools" /> | |
| 69 | <div @click="toProfile">{{ t('common.profile') }}</div> | |
| 70 | </ElDropdownItem> | |
| 71 | <ElDropdownItem> | |
| 72 | <Icon icon="ep:menu" /> | |
| 73 | <div @click="toDocument">{{ t('common.document') }}</div> | |
| 74 | </ElDropdownItem> | |
| 75 | <ElDropdownItem divided> | |
| 76 | <Icon icon="ep:lock" /> | |
| 77 | <div @click="lockScreen">{{ t('lock.lockScreen') }}</div> | |
| 78 | </ElDropdownItem> | |
| 79 | <ElDropdownItem divided @click="loginOut"> | |
| 80 | <Icon icon="ep:switch-button" /> | |
| 81 | <div>{{ t('common.loginOut') }}</div> | |
| 82 | </ElDropdownItem> | |
| 83 | </ElDropdownMenu> | |
| 84 | </template> | |
| 85 | </ElDropdown> | |
| 86 | ||
| 87 | <LockDialog v-if="dialogVisible" v-model="dialogVisible" /> | |
| 88 | ||
| 89 | <teleport to="body"> | |
| 90 | <transition name="fade-bottom" mode="out-in"> | |
| 91 | <LockPage v-if="getIsLock" /> | |
| 92 | </transition> | |
| 93 | </teleport> | |
| 94 | </template> | |
| 95 | ||
| 96 | <style scoped lang="scss"> | |
| 97 | .fade-bottom-enter-active, | |
| 98 | .fade-bottom-leave-active { | |
| 99 | transition: | |
| 100 | opacity 0.25s, | |
| 101 | transform 0.3s; | |
| 102 | } | |
| 103 | ||
| 104 | .fade-bottom-enter-from { | |
| 105 | opacity: 0; | |
| 106 | transform: translateY(-10%); | |
| 107 | } | |
| 108 | ||
| 109 | .fade-bottom-leave-to { | |
| 110 | opacity: 0; | |
| 111 | transform: translateY(10%); | |
| 112 | } | |
| 113 | </style> | |
