124 lines
3.0 KiB
Vue
124 lines
3.0 KiB
Vue
<script lang="ts" setup>
|
|
import defaultAvatar from '@/assets/images/avatar.png'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import AppApi from '@/common/app/app-api.ts'
|
|
import { useAppUserStore } from '@/common/app/app-user-store.ts'
|
|
import UserInfoPanel from '@/pages/a-frame/UserInfoPanel.vue'
|
|
import PasswdPanel from '@/pages/a-frame/PasswdPanel.vue'
|
|
import LoginApi from '@/pages/login/login-api.ts'
|
|
import Evt from '@/common/utils/evt.ts'
|
|
|
|
const userInfoPanelIns = useTemplateRef<InstanceType<typeof UserInfoPanel>>('userInfoPanelIns')
|
|
|
|
const passwdPanelIns = useTemplateRef<InstanceType<typeof UserInfoPanel>>('passwdPanelIns')
|
|
|
|
const appUserStore = useAppUserStore()
|
|
|
|
const avatar = computed(() => {
|
|
return Strings.isBlank(appUserStore.avatar) ? defaultAvatar : AppApi.fileUrl(appUserStore.avatar!)
|
|
})
|
|
const tenantName = computed(() => {
|
|
return appUserStore.tenantName
|
|
})
|
|
const currentTab = ref<string>('1')
|
|
|
|
function dropdownChangeHandler() {
|
|
userInfoPanelIns.value?.reset()
|
|
passwdPanelIns.value?.reset()
|
|
}
|
|
|
|
function logoutHandler() {
|
|
LoginApi.logout().finally(() => {
|
|
Evt.emit('logout')
|
|
Evt.emit('disconnect_ws')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ElDropdown placement="bottom-end" trigger="click" @visible-change="dropdownChangeHandler">
|
|
<div class="user-info-container">
|
|
<div>
|
|
<div style="font-size: 16px">{{ appUserStore.nickname }}</div>
|
|
<div v-if="tenantName">{{ tenantName }}</div>
|
|
</div>
|
|
<ElAvatar :src="avatar"/>
|
|
</div>
|
|
<template #dropdown>
|
|
<div class="opt-panel">
|
|
<div>
|
|
<div>{{ appUserStore.nickname }}</div>
|
|
<div v-if="tenantName">{{ tenantName }}</div>
|
|
</div>
|
|
<ElTabs v-model="currentTab">
|
|
<ElTabPane label="基本资料" name="1">
|
|
<UserInfoPanel ref="userInfoPanelIns" class="user-info-panel"/>
|
|
</ElTabPane>
|
|
<ElTabPane label="修改密码" name="2">
|
|
<PasswdPanel ref="passwdPanelIns" class="passwd-panel"/>
|
|
</ElTabPane>
|
|
</ElTabs>
|
|
<div>
|
|
<ElButton type="danger" @click="logoutHandler">退出登录</ElButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ElDropdown>
|
|
</template>
|
|
|
|
<style lang="stylus" scoped>
|
|
.user-info-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor pointer
|
|
}
|
|
|
|
.opt-panel {
|
|
width 300px;
|
|
|
|
& > div:first-child {
|
|
box-sizing border-box
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
border-bottom: 1px solid var(--el-border-color-light);
|
|
padding: 12px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
& > div:nth-child(3) {
|
|
box-sizing border-box
|
|
width: 100%;
|
|
display flex
|
|
justify-content center
|
|
border-top: 1px solid #D3D7DE;
|
|
padding 8px
|
|
|
|
& > button {
|
|
width 50%
|
|
}
|
|
}
|
|
|
|
:deep(.el-tabs) {
|
|
width: 100%;
|
|
|
|
.el-tabs__nav-scroll {
|
|
width 100%
|
|
}
|
|
|
|
.el-tabs__nav {
|
|
width 100%
|
|
justify-content space-around
|
|
position relative
|
|
}
|
|
|
|
}
|
|
|
|
.user-info-panel, .passwd-panel {
|
|
padding 12px
|
|
}
|
|
}
|
|
</style>
|