502 lines
12 KiB
Vue
502 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="chat-window-container">
|
|||
|
|
<div class="chat-header">
|
|||
|
|
<div class="header-left">
|
|||
|
|
<h2>{{ mode === 'chat' ? 'AI对话' : mode === 'ai' ? 'AI智能面试' : '题库面试' }}</h2>
|
|||
|
|
<span class="status-indicator" :class="interviewStatus"></span>
|
|||
|
|
<span class="status-text">{{ statusText }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-right">
|
|||
|
|
<el-button v-if="mode !== 'chat'" @click="endInterview" size="small">结束面试</el-button>
|
|||
|
|
<el-button @click="$emit('close')" size="small" v-if="$emit('close')">关闭</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="messages-container" ref="messagesContainer">
|
|||
|
|
<div
|
|||
|
|
v-for="(message, index) in messages"
|
|||
|
|
:key="index"
|
|||
|
|
class="message-row"
|
|||
|
|
:class="'message-' + message.sender.toLowerCase()"
|
|||
|
|
>
|
|||
|
|
<el-avatar
|
|||
|
|
class="avatar"
|
|||
|
|
:style="{ backgroundColor: message.sender === 'AI' ? '#409EFF' : '#67C23A' }"
|
|||
|
|
>
|
|||
|
|
{{ message.sender === 'AI' ? 'AI' : candidateName.charAt(0) }}
|
|||
|
|
</el-avatar>
|
|||
|
|
|
|||
|
|
<div class="message-content">
|
|||
|
|
<div class="message-bubble" v-html="formatMessage(message.content)"></div>
|
|||
|
|
<div class="message-time">{{ formatTime(message.timestamp) }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- AI思考中的动画 -->
|
|||
|
|
<div v-if="isAiThinking" class="message-row message-ai">
|
|||
|
|
<el-avatar class="avatar" style="background-color: #409EFF;">AI</el-avatar>
|
|||
|
|
<div class="message-content">
|
|||
|
|
<div class="message-bubble thinking">
|
|||
|
|
<span></span><span></span><span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="input-area">
|
|||
|
|
<el-input
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="4"
|
|||
|
|
v-model="userAnswer"
|
|||
|
|
placeholder="在此输入您的回答..."
|
|||
|
|
:disabled="isLoading || interviewStatus === 'COMPLETED'"
|
|||
|
|
resize="none"
|
|||
|
|
class="answer-input"
|
|||
|
|
@keypress.enter.prevent="sendMessage"
|
|||
|
|
></el-input>
|
|||
|
|
|
|||
|
|
<div class="input-actions">
|
|||
|
|
<span class="char-counter">{{ userAnswer.length }} / 1000</span>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
@click="sendMessage"
|
|||
|
|
:loading="isLoading"
|
|||
|
|
:disabled="interviewStatus === 'COMPLETED' || !userAnswer.trim()"
|
|||
|
|
class="send-button"
|
|||
|
|
>
|
|||
|
|
发送回答
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 面试结束提示 -->
|
|||
|
|
<div v-if="interviewStatus === 'COMPLETED'" class="completion-overlay">
|
|||
|
|
<div class="completion-content">
|
|||
|
|
<el-result
|
|||
|
|
icon="success"
|
|||
|
|
title="面试已完成"
|
|||
|
|
sub-title="感谢您的参与！您可以查看面试报告或开始新的面试。"
|
|||
|
|
>
|
|||
|
|
<template #extra>
|
|||
|
|
<el-button type="primary" @click="$emit('end-interview')">返回</el-button>
|
|||
|
|
<el-button>查看报告</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-result>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'chat'
|
|||
|
|
},
|
|||
|
|
categories: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
candidateName: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
sessionId: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['end-interview', 'close'])
|
|||
|
|
|
|||
|
|
// 响应式状态
|
|||
|
|
const messages = ref([])
|
|||
|
|
const userAnswer = ref('')
|
|||
|
|
const isLoading = ref(false)
|
|||
|
|
const isAiThinking = ref(false)
|
|||
|
|
const interviewStatus = ref('ACTIVE') // ACTIVE, COMPLETED
|
|||
|
|
const messagesContainer = ref(null)
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
const statusText = computed(() => {
|
|||
|
|
return interviewStatus.value === 'ACTIVE' ? '进行中' : '已结束'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 生命周期
|
|||
|
|
onMounted(() => {
|
|||
|
|
initializeChat()
|
|||
|
|
scrollToBottom()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 初始化聊天
|
|||
|
|
const initializeChat = () => {
|
|||
|
|
let welcomeMessage = ''
|
|||
|
|
|
|||
|
|
if (props.mode === 'chat') {
|
|||
|
|
welcomeMessage = '您好！我是AI助手，很高兴与您对话。有什么我可以帮助您的吗？'
|
|||
|
|
} else if (props.mode === 'ai') {
|
|||
|
|
welcomeMessage = '您好！我是AI面试官，接下来将为您进行模拟面试。请简单介绍一下您自己。'
|
|||
|
|
} else {
|
|||
|
|
welcomeMessage = '您好！我将从您选择的题库中抽取题目进行面试。请简单介绍一下您自己。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
messages.value = [
|
|||
|
|
{
|
|||
|
|
sender: 'AI',
|
|||
|
|
content: welcomeMessage,
|
|||
|
|
timestamp: new Date()
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化消息
|
|||
|
|
const formatMessage = (content) => {
|
|||
|
|
return content ? content.replace(/\n/g, '<br />') : ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化时间
|
|||
|
|
const formatTime = (timestamp) => {
|
|||
|
|
return new Date(timestamp).toLocaleTimeString('zh-CN', {
|
|||
|
|
hour: '2-digit',
|
|||
|
|
minute: '2-digit'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
const scrollToBottom = () => {
|
|||
|
|
nextTick(() => {
|
|||
|
|
if (messagesContainer.value) {
|
|||
|
|
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发送消息
|
|||
|
|
const sendMessage = async () => {
|
|||
|
|
if (!userAnswer.value.trim()) return
|
|||
|
|
|
|||
|
|
const userMessage = {
|
|||
|
|
sender: 'USER',
|
|||
|
|
content: userAnswer.value,
|
|||
|
|
timestamp: new Date()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
messages.value.push(userMessage)
|
|||
|
|
const currentAnswer = userAnswer.value
|
|||
|
|
userAnswer.value = ''
|
|||
|
|
isAiThinking.value = true
|
|||
|
|
scrollToBottom()
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 模拟API调用延迟
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|||
|
|
|
|||
|
|
// 生成AI回复
|
|||
|
|
const aiResponse = generateAIResponse(currentAnswer)
|
|||
|
|
messages.value.push({
|
|||
|
|
sender: 'AI',
|
|||
|
|
content: aiResponse,
|
|||
|
|
timestamp: new Date()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 随机结束面试（仅面试模式）
|
|||
|
|
if (props.mode !== 'chat' && Math.random() > 0.8) {
|
|||
|
|
interviewStatus.value = 'COMPLETED'
|
|||
|
|
messages.value.push({
|
|||
|
|
sender: 'AI',
|
|||
|
|
content: '本次面试到此结束，感谢您的参与！您可以从左侧菜单查看面试报告。',
|
|||
|
|
timestamp: new Date()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('发送失败：' + error.message)
|
|||
|
|
} finally {
|
|||
|
|
isAiThinking.value = false
|
|||
|
|
scrollToBottom()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 生成AI回复（模拟）
|
|||
|
|
const generateAIResponse = (userAnswer) => {
|
|||
|
|
if (props.mode === 'chat') {
|
|||
|
|
const chatResponses = [
|
|||
|
|
"我理解您的意思，能详细说明一下吗？",
|
|||
|
|
"这是一个很好的问题！让我为您解释一下...",
|
|||
|
|
"根据您提供的信息，我建议您可以考虑...",
|
|||
|
|
"您还有其他相关问题吗？我很乐意帮助您。",
|
|||
|
|
"感谢分享，这对我来说很有启发。"
|
|||
|
|
]
|
|||
|
|
return chatResponses[Math.floor(Math.random() * chatResponses.length)]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const interviewResponses = [
|
|||
|
|
"很好，请继续。",
|
|||
|
|
"能详细说明一下吗？",
|
|||
|
|
"您在这方面有什么具体的经验？",
|
|||
|
|
"很有趣的观点，还有其他补充吗？",
|
|||
|
|
"感谢分享，接下来我们换个话题。"
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
// 如果是题库模式，可以从题库中抽取问题
|
|||
|
|
if (props.mode === 'local' && props.categories.length > 0) {
|
|||
|
|
const question = getQuestionFromBank()
|
|||
|
|
return question
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return interviewResponses[Math.floor(Math.random() * interviewResponses.length)]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从题库中获取问题（模拟）
|
|||
|
|
const getQuestionFromBank = () => {
|
|||
|
|
const questionsByCategory = {
|
|||
|
|
1: ["请解释一下什么是闭包？", "React和Vue有什么区别？", "如何优化前端性能？"],
|
|||
|
|
2: ["谈谈你对微服务的理解", "RESTful API的设计原则是什么？", "如何保证API的安全性？"],
|
|||
|
|
3: ["请实现一个快速排序算法", "二叉树和链表有什么区别？", "动态规划的核心思想是什么？"],
|
|||
|
|
4: ["数据库索引的原理是什么？", "SQL和NoSQL的区别是什么？", "如何设计一个高效的数据库 schema？"],
|
|||
|
|
5: ["TCP和UDP的区别是什么？", "HTTP和HTTPS有什么不同？", "什么是DNS解析过程？"],
|
|||
|
|
6: ["如何设计一个短链接服务？", "请设计一个电商系统的数据库结构", "如何设计一个高可用的系统？"],
|
|||
|
|
7: ["你最大的优点和缺点是什么？", "请描述一次你解决复杂问题的经历", "你如何处理团队冲突？"],
|
|||
|
|
8: ["为什么井盖是圆的？", "如何称出一头大象的重量？", "有多少个乒乓球能装满这个房间？"]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 从选中的分类中随机选择一个问题
|
|||
|
|
const randomCategory = props.categories[Math.floor(Math.random() * props.categories.length)]
|
|||
|
|
const questions = questionsByCategory[randomCategory] || ["请介绍一下你自己"]
|
|||
|
|
|
|||
|
|
return questions[Math.floor(Math.random() * questions.length)]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 结束面试
|
|||
|
|
const endInterview = () => {
|
|||
|
|
interviewStatus.value = 'COMPLETED'
|
|||
|
|
messages.value.push({
|
|||
|
|
sender: 'AI',
|
|||
|
|
content: '面试已手动结束，感谢您的参与！',
|
|||
|
|
timestamp: new Date()
|
|||
|
|
})
|
|||
|
|
scrollToBottom()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.chat-window-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-left {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-left h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-indicator {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #67C23A;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-indicator.COMPLETED {
|
|||
|
|
background: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-text {
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 24px;
|
|||
|
|
background: #f9fafb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-row {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
max-width: 80%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-ai {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-user {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
margin-left: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.avatar {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-right: 12px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-user .avatar {
|
|||
|
|
order: 2;
|
|||
|
|
margin-right: 0;
|
|||
|
|
margin-left: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
max-width: calc(100% - 52px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-bubble {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
word-wrap: break-word;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-ai .message-bubble {
|
|||
|
|
background-color: white;
|
|||
|
|
color: #303133;
|
|||
|
|
border-top-left-radius: 4px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-user .message-bubble {
|
|||
|
|
background-color: #409EFF;
|
|||
|
|
color: white;
|
|||
|
|
border-top-right-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-time {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: #909399;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
padding: 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-ai .message-time {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-user .message-time {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-area {
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
border-top: 1px solid #e6e8eb;
|
|||
|
|
background: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.answer-input {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-actions {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-counter {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-button {
|
|||
|
|
min-width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* AI思考动画 */
|
|||
|
|
.thinking span {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #909399;
|
|||
|
|
margin: 0 2px;
|
|||
|
|
animation: thinking-dots 1.4s infinite ease-in-out both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thinking span:nth-child(1) {
|
|||
|
|
animation-delay: -0.32s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thinking span:nth-child(2) {
|
|||
|
|
animation-delay: -0.16s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes thinking-dots {
|
|||
|
|
0%, 80%, 100% {
|
|||
|
|
transform: scale(0);
|
|||
|
|
}
|
|||
|
|
40% {
|
|||
|
|
transform: scale(1.0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 完成面试覆盖层 */
|
|||
|
|
.completion-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
z-index: 1000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.completion-content {
|
|||
|
|
text-align: center;
|
|||
|
|
max-width: 500px;
|
|||
|
|
padding: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.message-row {
|
|||
|
|
max-width: 90%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-header {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-left h2 {
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.messages-container {
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-area {
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|