150 lines
4.5 KiB
Vue
150 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-drawer
|
|
v-model="show"
|
|
:with-header="false"
|
|
class="chat-history-drawer"
|
|
direction="ltr"
|
|
:size="280"
|
|
style="--el-drawer-padding-primary: 0"
|
|
>
|
|
<HistoryPanel
|
|
:application-detail="applicationDetail"
|
|
:chat-log-data="chatLogData"
|
|
:left-loading="leftLoading"
|
|
:currentChatId="currentChatId"
|
|
@new-chat="newChat"
|
|
@clickLog="handleClickList"
|
|
@delete-log="deleteChatLog"
|
|
@refreshFieldTitle="refreshFieldTitle"
|
|
>
|
|
<div class="user-info p-16 cursor">
|
|
<el-avatar
|
|
:size="32"
|
|
v-if="
|
|
!chatUser.chat_profile?.authentication ||
|
|
chatUser.chat_profile.authentication_type === 'password'
|
|
"
|
|
>
|
|
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
|
</el-avatar>
|
|
<el-dropdown v-else trigger="click" type="primary" class="w-full">
|
|
<div class="flex align-center">
|
|
<el-avatar :size="32">
|
|
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
|
</el-avatar>
|
|
<span class="ml-8 color-text-primary">{{ chatUser.chatUserProfile?.nick_name }}</span>
|
|
</div>
|
|
|
|
<template #dropdown>
|
|
<el-dropdown-menu style="min-width: 260px">
|
|
<div class="flex align-center p-8">
|
|
<div class="mr-8 flex align-center">
|
|
<el-avatar :size="40">
|
|
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
|
|
</el-avatar>
|
|
</div>
|
|
<div>
|
|
<h4 class="medium mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h4>
|
|
<div class="color-secondary">
|
|
{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dropdown-item
|
|
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
|
class="border-t"
|
|
style="padding-top: 8px; padding-bottom: 8px"
|
|
@click="openResetPassword"
|
|
>
|
|
<el-icon><Lock /></el-icon>
|
|
{{ $t('views.login.resetPassword') }}
|
|
</el-dropdown-item>
|
|
<el-dropdown-item
|
|
v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
|
|
class="border-t"
|
|
style="padding-top: 8px; padding-bottom: 8px"
|
|
@click="logout"
|
|
>
|
|
<AppIcon iconName="app-export" />
|
|
{{ $t('layout.logout') }}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</HistoryPanel>
|
|
</el-drawer>
|
|
|
|
<ResetPassword
|
|
ref="resetPasswordRef"
|
|
emitConfirm
|
|
@confirm="handleResetPassword"
|
|
></ResetPassword>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, defineModel } from 'vue'
|
|
import useStore from '@/stores'
|
|
import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
|
|
import ResetPassword from '@/layout/layout-header/avatar/ResetPassword.vue'
|
|
import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
|
|
import chatAPI from '@/api/chat/chat'
|
|
import { useRouter } from 'vue-router'
|
|
const router = useRouter()
|
|
|
|
const show = defineModel<boolean>('show')
|
|
|
|
const props = defineProps<{
|
|
applicationDetail: any
|
|
chatLogData: any[]
|
|
leftLoading: boolean
|
|
currentChatId: string
|
|
}>()
|
|
|
|
const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
|
|
|
|
const { chatUser, chatLog } = useStore()
|
|
|
|
const newChat = () => {
|
|
emit('newChat')
|
|
}
|
|
|
|
const handleClickList = (item: any) => {
|
|
emit('clickLog', item)
|
|
}
|
|
|
|
const deleteChatLog = (row: any) => {
|
|
emit('deleteLog', row)
|
|
}
|
|
function refreshFieldTitle(chatId: string, abstract: string) {
|
|
emit('refreshFieldTitle', chatId, abstract)
|
|
}
|
|
|
|
const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
|
|
const openResetPassword = () => {
|
|
resetPasswordRef.value?.open()
|
|
}
|
|
|
|
const handleResetPassword = (param: ResetCurrentUserPasswordRequest) => {
|
|
chatAPI.resetCurrentPassword(param).then(() => {
|
|
logout()
|
|
})
|
|
}
|
|
|
|
const logout = () => {
|
|
chatUser.logout().then(() => {
|
|
router.push({ name: 'login' })
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.chat-history-drawer) {
|
|
.el-drawer__body {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
</style>
|