You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
141 lines
3.2 KiB
141 lines
3.2 KiB
<script lang="ts" setup>
|
|
import { computed, inject, onMounted, ref } from 'vue'
|
|
import { useUser } from '@/store/modules/user'
|
|
import { getImgUrl } from '@/utils/urlUtils'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'logout'): void
|
|
}>()
|
|
|
|
const userStore = useUser()
|
|
|
|
const useInfo = userStore.getUserInfo
|
|
|
|
const aiDisabled = ref(false)
|
|
|
|
function handleSelect(key: string) {
|
|
userStore.updateTenantId(key)
|
|
location.reload()
|
|
}
|
|
|
|
function logIt(e) {
|
|
return false
|
|
}
|
|
|
|
const mousetrap = inject('mousetrap') as any
|
|
onMounted(() => {
|
|
mousetrap.bind('g i', logIt)
|
|
mousetrap.bind(['command+k', 'ctrl+k'], logIt)
|
|
})
|
|
|
|
const showPopover = ref(false)
|
|
const popRef = ref(null)
|
|
|
|
const iconName = computed(() => {
|
|
return showPopover.value ? 'expand' : 'collapse'
|
|
})
|
|
|
|
function handleUpdateShow(show: boolean) {
|
|
showPopover.value = show
|
|
}
|
|
|
|
function logOut() {
|
|
(popRef.value as any).setShow(false)
|
|
emit('logout')
|
|
}
|
|
|
|
const currentCompanyName = computed(() => {
|
|
const tenantList = useInfo.tenantList
|
|
const currentId = userStore.getTenantId
|
|
const current = tenantList.find(item => item.id === currentId)
|
|
return current.name || 'name'
|
|
})
|
|
|
|
const options = computed(() => {
|
|
const tenantList = useInfo.tenantList
|
|
return tenantList.map((item) => {
|
|
return {
|
|
label: item.name,
|
|
key: item.id,
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<n-popover
|
|
ref="popRef" style="border-radius: 10px" placement="bottom-end" raw :show-arrow="false" trigger="click"
|
|
@update:show="handleUpdateShow"
|
|
>
|
|
<template #trigger>
|
|
<div class="setting">
|
|
<span>{{ useInfo.username }}</span>
|
|
<SvgIcon style="margin-left: 6px;" :name="iconName" size="14" />
|
|
</div>
|
|
</template>
|
|
<div class="container">
|
|
<div class="header">
|
|
<n-avatar :src="getImgUrl(useInfo.usericon)" round size="medium" />
|
|
<div style="margin-left: 10px">
|
|
<span style="display: block; font-size: 20px">{{ useInfo.username }}</span>
|
|
<span style="display: block; font-size: '20px'">{{ useInfo.departname }}</span>
|
|
</div>
|
|
</div>
|
|
<n-dropdown placement="left-start" trigger="hover" :options="options" @select="handleSelect">
|
|
<div class="trigger">
|
|
<span>{{ currentCompanyName }}</span>
|
|
<span>icon</span>
|
|
</div>
|
|
</n-dropdown>
|
|
<div class="item">
|
|
<span>AI设置开关</span>
|
|
<n-switch v-model:value="aiDisabled" />
|
|
</div>
|
|
<div class="trigger">
|
|
联系我们
|
|
</div>
|
|
<n-divider style="margin-top: 0px; margin-bottom: 10px" />
|
|
<div class="trigger" @click="logOut">
|
|
退出登录
|
|
</div>
|
|
</div>
|
|
</n-popover>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.setting {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 10px;
|
|
justify-content: center;
|
|
background-color: #ffffff;
|
|
|
|
.header {
|
|
border-radius: 10px 10px 0px 0px;
|
|
background-color: #7a92ff;
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.trigger,
|
|
.item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.trigger:hover {
|
|
background-color: #e8f2ff;
|
|
}
|
|
}
|
|
</style>
|