453 lines
13 KiB
Vue
453 lines
13 KiB
Vue
<template>
|
||
<el-dialog
|
||
v-model="visible"
|
||
:title="`与 ${patientName} 聊天`"
|
||
width="900px"
|
||
top="10vh"
|
||
:close-on-click-modal="false"
|
||
@close="handleClose"
|
||
:destroy-on-close="true"
|
||
class="chat-dialog"
|
||
>
|
||
<div class="chat-container">
|
||
<div v-if="!isReady" class="loading-container">
|
||
<el-icon class="is-loading"><Loading /></el-icon>
|
||
<span>{{ loadingText }}</span>
|
||
</div>
|
||
<div v-else-if="error" class="error-container">
|
||
<el-alert :title="error" type="error" :closable="false" />
|
||
</div>
|
||
<div v-else class="chat-content">
|
||
<UIKitProvider language="zh-CN" theme="light">
|
||
<div class="chat-layout">
|
||
<ConversationList class="conversation-list" />
|
||
<Chat class="chat-area">
|
||
<MessageList :conversationID="conversationId" />
|
||
<MessageInput>
|
||
<template #headerToolbar>
|
||
<div class="message-toolbar">
|
||
<EmojiPicker />
|
||
<ImagePicker />
|
||
<FilePicker />
|
||
<!-- 仅在 TUICallKit 初始化成功后展示音视频入口，避免“初始化登录未完成”错误 -->
|
||
<AudioCallPicker v-if="isCallReady" />
|
||
<VideoCallPicker v-if="isCallReady" />
|
||
<!-- 群组视频通话（基于 TUICallKitServer.calls，多人通话入口） -->
|
||
<el-button
|
||
v-if="isCallReady"
|
||
size="small"
|
||
type="primary"
|
||
@click="startGroupVideoCall"
|
||
>
|
||
群视频
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</MessageInput>
|
||
</Chat>
|
||
</div>
|
||
</UIKitProvider>
|
||
</div>
|
||
</div>
|
||
<!-- 挂载 TUICallKit 组件（固定居中显示） -->
|
||
<TUICallKit
|
||
v-if="isCallReady"
|
||
:allowedMinimized="true"
|
||
:allowedFullScreen="true"
|
||
class="chat-dialog-call-kit"
|
||
/>
|
||
</el-dialog>
|
||
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, nextTick, watch } from 'vue'
|
||
import { Loading } from '@element-plus/icons-vue'
|
||
import { getCallSignature } from '@/api/tcm'
|
||
import feedback from '@/utils/feedback'
|
||
import useUserStore from '@/stores/modules/user'
|
||
import {
|
||
ConversationList,
|
||
Chat,
|
||
MessageList,
|
||
MessageInput,
|
||
UIKitProvider,
|
||
useLoginState,
|
||
useConversationListState,
|
||
EmojiPicker,
|
||
ImagePicker,
|
||
FilePicker,
|
||
AudioCallPicker,
|
||
VideoCallPicker
|
||
} from '@tencentcloud/chat-uikit-vue3'
|
||
import TencentCloudChat from '@tencentcloud/chat'
|
||
import '@/assets/chat-uikit.css'
|
||
import { TUICallKit, TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue'
|
||
const assistant_ids=ref('');
|
||
const visible = ref(false)
|
||
const isReady = ref(false)
|
||
const error = ref('')
|
||
const patientName = ref('')
|
||
const patientId = ref<number | null>(null)
|
||
const diagnosisId = ref<number | null>(null)
|
||
const loadingText = ref('正在初始化...')
|
||
const patientUserId = ref('')
|
||
const conversationId = ref('')
|
||
const isCallReady = ref(false)
|
||
const { login, logout } = useLoginState()
|
||
const { setActiveConversation, createC2CConversation, activeConversation } = useConversationListState()
|
||
const userStore = useUserStore()
|
||
|
||
// 更新用户头像到 IM
|
||
const updateUserAvatarToIM = async (avatarUrl: string,appid: number) => {
|
||
try {
|
||
if (!avatarUrl) {
|
||
console.warn('头像 URL 为空，跳过更新')
|
||
return
|
||
}
|
||
|
||
console.log('开始更新头像到 IM:', avatarUrl)
|
||
|
||
// 尝试通过 SDK 实例更新头像
|
||
// 在 UIKit 登录后，SDK 实例应该已初始化
|
||
const updateResult = await new Promise((resolve, reject) => {
|
||
// 延迟执行，确保 SDK 完全初始化
|
||
setTimeout(async () => {
|
||
try {
|
||
// 尝试多种方式获取 SDK 实例
|
||
|
||
let chat = TencentCloudChat.create( { SDKAppID: appid });
|
||
// 调用 updateMyProfile 更新用户头像
|
||
const response = await chat.updateMyProfile({
|
||
avatar: avatarUrl
|
||
})
|
||
|
||
console.log('IM 头像更新成功:', response)
|
||
resolve(response)
|
||
} catch (err) {
|
||
console.error('更新头像异常:', err)
|
||
resolve(null)
|
||
}
|
||
}, 500)
|
||
})
|
||
|
||
} catch (err: any) {
|
||
console.error('IM 头像更新失败:', err.message || err)
|
||
// 不中断主流程，头像更新失败不影响聊天功能
|
||
}
|
||
}
|
||
|
||
// 监听当前激活的会话变化，更新标题
|
||
watch(() => activeConversation.value, async (newConversation) => {
|
||
if (newConversation) {
|
||
// 更新标题为当前会话的显示名称
|
||
patientName.value = newConversation.getShowName() || patientName.value
|
||
console.log('会话切换:', newConversation.conversationID, '名称:', patientName.value, newConversation)
|
||
|
||
if (newConversation.userProfile.userID.includes("doctor")) {
|
||
console.log('当前会话是医生，跳过获取 assistant_id')
|
||
} else {
|
||
try {
|
||
const res = await getCallSignature({
|
||
patient_id: newConversation.userProfile.userID.replace("patient_", ""),
|
||
diagnosis_id: diagnosisId.value
|
||
})
|
||
patientUserId.value = res.patientUserId
|
||
assistant_ids.value = res.assistant_id
|
||
console.log('会话切换后获取到 assistant_id:', assistant_ids.value, '完整响应:', res)
|
||
} catch (err) {
|
||
console.error('获取 assistant_id 失败:', err)
|
||
}
|
||
}
|
||
|
||
console.log('会话切换完成，userID:', newConversation.userProfile.userID)
|
||
}
|
||
})
|
||
|
||
const open = async (data: { patientId: number; patientName: string; diagnosisId?: number }) => {
|
||
visible.value = true
|
||
patientName.value = data.patientName
|
||
patientId.value = data.patientId
|
||
diagnosisId.value = data.diagnosisId || null
|
||
error.value = ''
|
||
isReady.value = false
|
||
isCallReady.value = false
|
||
loadingText.value = '正在获取签名...'
|
||
|
||
try {
|
||
// 获取医生的签名信息
|
||
const res = await getCallSignature({
|
||
patient_id: data.patientId,
|
||
diagnosis_id: data.diagnosisId || 0
|
||
})
|
||
assistant_ids.value = res.assistant_id
|
||
console.log('后端返回的签名数据:', res)
|
||
console.log('assistant_id:', assistant_ids.value)
|
||
|
||
if (!res || !res.userSig) {
|
||
throw new Error('获取签名失败')
|
||
}
|
||
|
||
if (!res.assistant_id) {
|
||
console.warn('警告：后端未返回 assistant_id，群视频通话可能无法正常工作')
|
||
}
|
||
|
||
patientUserId.value = res.patientUserId || `patient_${data.patientId}`
|
||
|
||
loadingText.value = '正在登录聊天...'
|
||
|
||
// 登录 Chat UIKit
|
||
await login({
|
||
sdkAppId: Number(res.sdkAppId),
|
||
userId: res.userId,
|
||
userSig: res.userSig,
|
||
useUploadPlugin: true
|
||
})
|
||
const sdkAPPid = Number(res.sdkAppId)
|
||
|
||
// 初始化 TUICallKit（聊天内音视频通话依赖此初始化）；只需全局成功一次
|
||
if (!(window as any).__TUICallKitInited__) {
|
||
loadingText.value = '正在初始化通话能力...'
|
||
try {
|
||
await TUICallKitServer.init({
|
||
userID: res.userId,
|
||
userSig: res.userSig,
|
||
SDKAppID: sdkAPPid
|
||
})
|
||
;(window as any).__TUICallKitInited__ = true
|
||
} catch (err: any) {
|
||
console.warn('TUICallKit 初始化失败，聊天仍可用，音视频通话不可用:', err?.message || err)
|
||
}
|
||
}
|
||
isCallReady.value = !!(window as any).__TUICallKitInited__
|
||
console.log('Chat UIKit 登录成功，患者用户ID:', patientUserId.value)
|
||
|
||
loadingText.value = '加载聊天界面...'
|
||
|
||
// 等待 UIKit 初始化完成后创建并激活会话
|
||
setTimeout(async () => {
|
||
isReady.value = true
|
||
|
||
// 使用 nextTick 确保组件已渲染
|
||
await nextTick()
|
||
|
||
// 增加延迟，确保 TIM SDK 完全初始化
|
||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||
|
||
// 更新用户头像到 IM - 从 Pinia store 获取当前登录用户的头像
|
||
const avatar = userStore.userInfo?.avatar
|
||
console.log('准备更新头像，avatar:', avatar)
|
||
|
||
if (avatar) {
|
||
await updateUserAvatarToIM(avatar,sdkAPPid)
|
||
}
|
||
|
||
// 创建或获取与患者的单聊会话
|
||
try {
|
||
const conversation = await createC2CConversation(patientUserId.value)
|
||
conversationId.value = conversation.conversationID
|
||
console.log('已创建/获取会话:', conversationId.value)
|
||
|
||
// 激活该会话
|
||
setActiveConversation(conversationId.value)
|
||
console.log('已激活会话')
|
||
} catch (err) {
|
||
console.error('创建/激活会话失败:', err)
|
||
}
|
||
}, 800)
|
||
|
||
} catch (err: any) {
|
||
console.error('初始化聊天失败:', err)
|
||
error.value = err.message || '初始化聊天失败'
|
||
feedback.msgError(error.value)
|
||
}
|
||
}
|
||
|
||
// 群组视频通话（多人通话）：当前医生作为发起方，默认先邀请当前会话患者
|
||
const startGroupVideoCall = async () => {
|
||
if (!isCallReady.value) {
|
||
feedback.msgWarning('通话服务初始化中，请稍后再试')
|
||
return
|
||
}
|
||
|
||
if (!patientUserId.value) {
|
||
feedback.msgWarning('未找到患者通话ID，无法发起群视频')
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 确保 assistant_id 存在
|
||
if (!assistant_ids.value) {
|
||
console.warn('assistant_id 为空，尝试重新获取')
|
||
const res = await getCallSignature({
|
||
patient_id: patientId.value!,
|
||
diagnosis_id: diagnosisId.value
|
||
})
|
||
assistant_ids.value = res.assistant_id
|
||
console.log('重新获取 assistant_id:', assistant_ids.value)
|
||
}
|
||
|
||
// 构建用户列表，过滤掉空值
|
||
const userIDList = [patientUserId.value, assistant_ids.value].filter(id => id)
|
||
|
||
if (userIDList.length < 2) {
|
||
feedback.msgWarning('助理ID获取失败，无法发起群视频')
|
||
console.error('userIDList 不完整:', userIDList, 'assistant_ids:', assistant_ids.value)
|
||
return
|
||
}
|
||
|
||
console.log('发起群视频通话，参与者:', userIDList)
|
||
|
||
await TUICallKitServer.calls({
|
||
userIDList,
|
||
type: TUICallType.VIDEO_CALL
|
||
})
|
||
} catch (err: any) {
|
||
console.error('发起群视频失败:', err)
|
||
feedback.msgError(err?.message || '发起群视频失败')
|
||
}
|
||
}
|
||
|
||
const handleClose = async () => {
|
||
try {
|
||
// 登出 Chat
|
||
// await logout()
|
||
} catch (err) {
|
||
console.error('登出失败:', err)
|
||
}
|
||
|
||
visible.value = false
|
||
// isReady.value = false
|
||
// error.value = ''
|
||
// patientId.value = null
|
||
// diagnosisId.value = null
|
||
// patientUserId.value = ''
|
||
// conversationId.value = ''
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.chat-dialog {
|
||
:deep(.el-dialog__body) {
|
||
padding: 0;
|
||
height: 75vh;
|
||
overflow: visible;
|
||
}
|
||
|
||
:deep(.el-dialog__header) {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #e4e7ed;
|
||
}
|
||
|
||
// 确保对话框有合适的 z-index
|
||
:deep(.el-overlay) {
|
||
z-index: 2500;
|
||
}
|
||
|
||
// 确保对话框本身的 z-index 低于 TUICallKit
|
||
:deep(.el-dialog) {
|
||
z-index: 2501;
|
||
}
|
||
}
|
||
|
||
.chat-container {
|
||
height: 75vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: #909399;
|
||
|
||
.el-icon {
|
||
font-size: 32px;
|
||
}
|
||
}
|
||
|
||
.error-container {
|
||
width: 100%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.chat-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.chat-layout {
|
||
display: flex;
|
||
height: 100%;
|
||
width: 100%;
|
||
|
||
.conversation-list {
|
||
width: 285px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chat-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.empty-chat {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
/* 消息工具栏样式 */
|
||
.message-toolbar {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
/* TUICallKit 容器样式 - 限制在对话框内拖动 */
|
||
.chat-dialog-call-kit {
|
||
position: fixed !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
width: 600px !important;
|
||
height: 400px !important;
|
||
max-width: 90% !important;
|
||
max-height: 80% !important;
|
||
z-index: 300000 !important;
|
||
pointer-events: auto !important;
|
||
}
|
||
</style>
|
||
|
||
<style scoped lang="scss">
|
||
/* 全局样式：确保表情选择器等弹出层有足够高的 z-index */
|
||
.el-popper,
|
||
.el-picker-panel,
|
||
[data-reka-popper],
|
||
[data-reka-popper-content-wrapper],
|
||
[class*="emoji-picker"],
|
||
[class*="picker-popup"],
|
||
[class*="tui-picker"],
|
||
body > div[id^="el-popper-container"],
|
||
body > div[data-reka-focus-guard] {
|
||
z-index: 9999 !important;
|
||
}
|
||
|
||
/* 确保聊天对话框内的弹出层也能正确显示 */
|
||
.chat-dialog [data-reka-popper-content-wrapper] {
|
||
z-index: 9999 !important;
|
||
}
|
||
|
||
</style>
|