<template> <div v-if="store.targetChatId == null" class="no-message-container" > <el-icon :size="180" color="#0078d7" > <ChatDotSquare /> </el-icon> <p>欢迎使用GodoOS</p> </div> <div v-else class="user-info-container" > <div class="user-details" v-if=" store.targetUserInfo && Object.keys(store.targetUserInfo).length > 0 " > <p>昵称: {{ store.targetUserInfo.displayName }}</p> <p>邮箱: {{ store.targetUserInfo.email }}</p> <p>电话: {{ store.targetUserInfo.phone }}</p> <p>描述: {{ store.targetUserInfo.desc }}</p> <p>工号: {{ store.targetUserInfo.jobNumber }}</p> <p>工作地点: {{ store.targetUserInfo.workPlace }}</p> <p>入职日期: {{ store.targetUserInfo.hiredDate }}</p> </div> <el-button style="background-color: #0078d4; color: #fff" @click="sendMessage(store.targetChatId)" >发送消息</el-button > </div> </template> <script lang="ts" setup> import { useChatStore } from "@/stores/chat"; const store = useChatStore(); const sendMessage = (chatId: string) => { store.currentNavId = 0; store.addChatListAndGetChatHistory(chatId); }; </script> <style scoped> .no-message-container { height: 100%; margin: 0px auto; text-align: center; font-size: 14px; } .user-info-container { height: 100%; margin: 0px auto; text-align: center; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .user-details { margin-bottom: 20px; text-align: left; max-width: 300px; } .user-details p { margin: 5px 0; } .el-button { width: 100%; max-width: 300px; } </style>