yuzhiran
396 lines
15 KiB
Vue
396 lines
15 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="topbar">
|
||
<view class="topbar-inner">
|
||
<view class="back-btn" @click="confirmExit"><text class="back-arrow">‹</text></view>
|
||
<view class="topbar-center">
|
||
<view class="topbar-pos-row">
|
||
<text class="topbar-position">{{ position || 'AI面试' }}</text>
|
||
<text class="topbar-status">面试中</text>
|
||
</view>
|
||
<view class="progress-track" v-if="interviewId">
|
||
<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
|
||
</view>
|
||
<text class="topbar-timer">⏱ {{ formatTime }}</text>
|
||
</view>
|
||
<view class="topbar-right">
|
||
<text class="avatar-toggle" @click="avatarMode = !avatarMode">
|
||
{{ avatarMode ? '💬' : '👤' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Avatar mode -->
|
||
<view class="avatar-section" v-if="avatarMode">
|
||
<digital-human
|
||
ref="dhRef"
|
||
:text="aiSpeechText"
|
||
:audio-url="aiAudioUrl"
|
||
:amplitude-data="aiAmplitudeData"
|
||
:position="position"
|
||
:auto-play="true"
|
||
@speaking-start="onAvatarSpeaking"
|
||
@speaking-end="onAvatarSilent"
|
||
/>
|
||
</view>
|
||
|
||
<!-- Chat area (both modes) -->
|
||
<scroll-view class="chat-area" scroll-y :scroll-into-view="scrollToId" :scroll-with-animation="true" :class="{ 'chat-compact': avatarMode }">
|
||
<view v-for="(msg, idx) in messages" :key="idx" :id="'msg-' + idx" class="msg-row" :class="msg.role">
|
||
<view class="msg-bubble" :class="msg.role">
|
||
<text>{{ msg.content }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="msg-row ai" v-if="aiLoading">
|
||
<view class="typing">
|
||
<view class="typing-dot"></view>
|
||
<view class="typing-dot"></view>
|
||
<view class="typing-dot"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view id="msg-bottom" style="height: 16rpx;"></view>
|
||
</scroll-view>
|
||
|
||
<view class="input-bar" v-if="!isComplete">
|
||
<view class="mic-btn" :class="{ recording: isRecording }" @touchstart="startRecord" @touchend="stopRecord" @touchcancel="stopRecord" @mousedown="startRecord" @mouseup="stopRecord" @mouseleave="stopRecord">
|
||
<text class="mic-icon">🎤</text>
|
||
</view>
|
||
<view class="input-box">
|
||
<textarea class="input-area" v-model="inputText" placeholder="输入你的回答..." :auto-height="true" :maxlength="2000" :disabled="aiLoading" @confirm="sendAnswer" />
|
||
</view>
|
||
<view class="send-btn" :class="{ disabled: (!inputText.trim() && !isRecording) || aiLoading }" @click="sendAnswer">
|
||
<text class="send-icon">{{ isRecording ? '◉' : '➤' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="disclaimer-bar" v-if="!isComplete">AI 生成内容仅供参考，请核实重要信息</view>
|
||
|
||
<view class="complete-bar" v-else>
|
||
<button class="cta-btn" @click="goResult">查看面试报告</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { api, API_ENDPOINTS } from '../../config'
|
||
import DigitalHuman from '../../components/digital-human.vue'
|
||
|
||
const messages = ref([{ role: 'ai', content: '你好！我是 AI 面试官，请选择岗位开始模拟面试！' }])
|
||
const inputText = ref('')
|
||
const aiLoading = ref(false)
|
||
const interviewId = ref('')
|
||
const answeredCount = ref(0)
|
||
const isComplete = ref(false)
|
||
const scrollToId = ref('')
|
||
const position = ref('')
|
||
const avatarMode = ref(true)
|
||
const aiSpeechText = ref('')
|
||
const aiAudioUrl = ref('')
|
||
const aiAmplitudeData = ref([])
|
||
const isSpeaking = ref(false)
|
||
const dhRef = ref(null)
|
||
const isRecording = ref(false)
|
||
let recorder = null
|
||
|
||
let timerSeconds = 0
|
||
let timerInterval = null
|
||
|
||
let MAX_QUESTIONS = 10
|
||
const progressPercent = computed(() => Math.min((answeredCount.value / MAX_QUESTIONS) * 100, 100))
|
||
const formatTime = computed(() => {
|
||
const m = Math.floor(timerSeconds / 60); const s = timerSeconds % 60
|
||
return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
|
||
})
|
||
const token = () => uni.getStorageSync('token') || ''
|
||
|
||
onLoad((options) => {
|
||
if (options?.position) {
|
||
const pos = decodeURIComponent(options.position)
|
||
position.value = pos
|
||
messages.value = [{ role: 'ai', content: `你好！我是你的专属 ${pos} 面试官，准备好了就开始吧！` }]
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
timerInterval = setInterval(() => timerSeconds++, 1000)
|
||
if (token()) startInterview()
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
clearInterval(timerInterval)
|
||
})
|
||
|
||
const checkLogin = () => {
|
||
if (!token()) {
|
||
uni.showModal({
|
||
title: '请先登录', content: '登录后即可开始 AI 模拟面试', confirmText: '去登录',
|
||
success: (r) => { if (r.confirm) uni.navigateTo({ url: '/pages/login/login' }) },
|
||
})
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
|
||
const startInterview = async () => {
|
||
if (!checkLogin()) return
|
||
aiLoading.value = true
|
||
try {
|
||
const res = await uni.request({
|
||
url: api('/interview/create'), method: 'POST',
|
||
header: { 'Authorization': `Bearer ${token()}`, 'Content-Type': 'application/json' },
|
||
data: { position: position.value },
|
||
})
|
||
if (res.statusCode === 200 && res.data) {
|
||
interviewId.value = res.data.id
|
||
messages.value = res.data.messages || messages.value
|
||
answeredCount.value = res.data.questionCount || 0
|
||
if (res.data.totalQuestions) MAX_QUESTIONS = res.data.totalQuestions
|
||
// Speak first question in avatar mode
|
||
if (avatarMode.value && res.data.messages?.length) {
|
||
const last = res.data.messages[res.data.messages.length - 1]
|
||
if (last?.role === 'ai') await speakAiText(last.content)
|
||
}
|
||
} else {
|
||
const msg = res.data?.message || '创建面试失败'
|
||
messages.value.push({ role: 'ai', content: msg })
|
||
}
|
||
} catch {
|
||
messages.value.push({ role: 'ai', content: '创建面试失败，请重试' })
|
||
} finally {
|
||
aiLoading.value = false
|
||
scrollToBottom()
|
||
}
|
||
}
|
||
|
||
const sendAnswer = async () => {
|
||
if (!inputText.value.trim() || aiLoading.value || isComplete.value) return
|
||
if (!token()) { checkLogin(); return }
|
||
if (!interviewId.value) {
|
||
await startInterview()
|
||
if (!interviewId.value) return // creation failed, don't discard answer
|
||
}
|
||
|
||
const answer = inputText.value.trim()
|
||
messages.value.push({ role: 'user', content: answer })
|
||
inputText.value = ''
|
||
scrollToBottom()
|
||
aiLoading.value = true
|
||
|
||
try {
|
||
const res = await uni.request({
|
||
url: api(`/interview/${interviewId.value}/answer`), method: 'POST',
|
||
header: { 'Authorization': `Bearer ${token()}`, 'Content-Type': 'application/json' },
|
||
data: avatarMode.value ? { answer, avatar: true } : { answer },
|
||
})
|
||
if (res.statusCode === 200 && res.data?.messages) {
|
||
const aiMsg = res.data.messages.find(m => m.role === 'ai')
|
||
// Only push AI messages from response to avoid duplicating the user message already added above
|
||
const newAiMessages = res.data.messages.filter(m => m.role === 'ai')
|
||
if (newAiMessages.length > 0) messages.value.push(...newAiMessages)
|
||
if (avatarMode.value && aiMsg) {
|
||
await speakAiText(aiMsg.content, res.data.ttsHash, res.data.ttsAmplitude)
|
||
}
|
||
answeredCount.value = res.data.questionCount || answeredCount.value + 1
|
||
if (res.data.totalQuestions) MAX_QUESTIONS = res.data.totalQuestions
|
||
} else if (res.statusCode === 403) {
|
||
messages.value.push({ role: 'ai', content: res.data?.message || '面试次数已用完' })
|
||
isComplete.value = true
|
||
} else {
|
||
messages.value.push({ role: 'ai', content: res.data?.message || '回答提交失败' })
|
||
}
|
||
} catch {
|
||
messages.value.push({ role: 'ai', content: '回答提交失败，请重试' })
|
||
} finally {
|
||
aiLoading.value = false
|
||
scrollToBottom()
|
||
}
|
||
}
|
||
|
||
async function speakAiText(text, ttsHash, ttsAmplitude) {
|
||
aiSpeechText.value = text
|
||
aiAmplitudeData.value = ttsAmplitude || []
|
||
if (ttsHash) {
|
||
aiAudioUrl.value = api(API_ENDPOINTS.TTS.AUDIO(ttsHash))
|
||
} else {
|
||
try {
|
||
const synthRes = await uni.request({
|
||
url: api('/tts/synthesize'), method: 'POST',
|
||
header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token()}` },
|
||
data: { text },
|
||
})
|
||
if (synthRes.statusCode === 200 && synthRes.data?.hash) {
|
||
aiAudioUrl.value = api(API_ENDPOINTS.TTS.AUDIO(synthRes.data.hash))
|
||
aiAmplitudeData.value = synthRes.data?.amplitudeData || []
|
||
}
|
||
} catch {}
|
||
}
|
||
}
|
||
|
||
function onAvatarSpeaking() {
|
||
isSpeaking.value = true
|
||
}
|
||
|
||
function onAvatarSilent() {
|
||
isSpeaking.value = false
|
||
}
|
||
|
||
const goResult = () => uni.navigateTo({ url: `/pages/report/report?interviewId=${interviewId.value}` })
|
||
const scrollToBottom = () => {
|
||
nextTick(() => { scrollToId.value = ''; setTimeout(() => { scrollToId.value = 'msg-bottom' }, 100) })
|
||
}
|
||
|
||
const confirmExit = () => {
|
||
uni.showModal({
|
||
title: '退出面试', content: interviewId.value ? '确定退出吗？当前进度将不会保存。' : '确定退出？',
|
||
success: (r) => { if (r.confirm) uni.navigateBack() },
|
||
})
|
||
}
|
||
|
||
function startRecord() {
|
||
if (aiLoading.value || isComplete.value) return
|
||
// #ifdef MP-WEIXIN
|
||
isRecording.value = true
|
||
recorder = uni.getRecorderManager()
|
||
recorder.onStart(() => {})
|
||
recorder.onError(() => { isRecording.value = false })
|
||
recorder.start({ format: 'mp3' })
|
||
uni.vibrateShort({ type: 'medium' })
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
uni.showToast({ title: '语音输入仅支持小程序', icon: 'none' })
|
||
// #endif
|
||
}
|
||
|
||
function stopRecord() {
|
||
if (!recorder || !isRecording.value) return
|
||
isRecording.value = false
|
||
recorder.stop()
|
||
recorder.onStop(async (res) => {
|
||
if (!res.tempFilePath) return
|
||
const audioPath = res.tempFilePath
|
||
try {
|
||
const uploadRes = await uni.uploadFile({
|
||
url: api(API_ENDPOINTS.TTS.ASR),
|
||
filePath: audioPath,
|
||
name: 'audio',
|
||
header: { 'Authorization': `Bearer ${token()}` },
|
||
})
|
||
console.log('[ASR] upload response:', uploadRes.statusCode, typeof uploadRes.data === 'string' ? uploadRes.data.slice(0, 200) : JSON.stringify(uploadRes.data).slice(0, 200))
|
||
if (uploadRes.statusCode === 200 && uploadRes.data) {
|
||
const data = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
|
||
if (data.text) {
|
||
inputText.value = data.text
|
||
uni.vibrateShort({ type: 'light' })
|
||
return
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.error('[ASR] upload error:', e?.message || e)
|
||
}
|
||
uni.showToast({ title: '语音识别失败，请手动输入', icon: 'none' })
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { height: 100vh; display: flex; flex-direction: column; background: #F8F9FC; }
|
||
|
||
.topbar {
|
||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
|
||
padding-top: 20rpx; flex-shrink: 0;
|
||
}
|
||
.topbar-inner {
|
||
display: flex; align-items: center; padding: 16rpx 24rpx 20rpx; gap: 16rpx;
|
||
}
|
||
.back-btn {
|
||
width: 60rpx; height: 60rpx; background: rgba(255,255,255,0.15);
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
}
|
||
.back-arrow { font-size: 36rpx; color: #FFFFFF; font-weight: 300; line-height: 1; }
|
||
.topbar-center { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
|
||
.topbar-pos-row { display: flex; align-items: center; gap: 10rpx; }
|
||
.topbar-position { font-size: 26rpx; color: #FFFFFF; font-weight: 600; }
|
||
.topbar-status { font-size: 18rpx; color: #FFFFFF; background: rgba(255,255,255,0.2); padding: 2rpx 12rpx; border-radius: 20rpx; }
|
||
.progress-track { height: 6rpx; background: rgba(255,255,255,0.2); border-radius: 3rpx; overflow: hidden; }
|
||
.progress-fill { height: 100%; background: #FFFFFF; border-radius: 3rpx; transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
|
||
.topbar-timer { font-size: 20rpx; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
|
||
.topbar-right { width: 60rpx; flex-shrink: 0; text-align: center; }
|
||
.avatar-toggle { font-size: 36rpx; cursor: pointer; }
|
||
|
||
/* Avatar section */
|
||
.avatar-section {
|
||
background: linear-gradient(180deg, #EEF2FF 0%, #F8F9FC 100%);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* Chat */
|
||
.chat-area { flex: 1; padding: 24rpx 20rpx; overflow-y: auto; }
|
||
.chat-compact { max-height: 40vh; }
|
||
.msg-row { display: flex; margin-bottom: 24rpx; }
|
||
.msg-row.ai { justify-content: flex-start; }
|
||
.msg-row.user { justify-content: flex-end; }
|
||
|
||
.msg-bubble { max-width: 560rpx; padding: 20rpx 24rpx; line-height: 1.7; font-size: 26rpx; }
|
||
.msg-bubble.ai {
|
||
background: #FFFFFF; color: var(--color-text);
|
||
border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
|
||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||
}
|
||
.msg-bubble.user {
|
||
background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
|
||
color: #FFFFFF;
|
||
border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
|
||
}
|
||
|
||
/* Typing */
|
||
.typing {
|
||
background: #FFFFFF; padding: 20rpx 28rpx;
|
||
border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
|
||
display: flex; gap: 8rpx; align-items: center;
|
||
box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
||
}
|
||
.typing-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #D1D5DB; animation: blink 1.4s infinite; }
|
||
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
|
||
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
|
||
@keyframes blink { 0%,80%,100% { opacity: 0.3 } 40% { opacity: 1 } }
|
||
|
||
/* Input */
|
||
.input-bar {
|
||
background: #FFFFFF; padding: 16rpx 20rpx;
|
||
padding-bottom: calc(16rpx + var(--safe-bottom));
|
||
display: flex; align-items: flex-end; gap: 12rpx;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.04); flex-shrink: 0;
|
||
}
|
||
.input-box { flex: 1; background: var(--color-bg); border-radius: var(--radius-md); padding: 12rpx 20rpx; }
|
||
.input-area { width: 100%; font-size: 26rpx; color: var(--color-text); max-height: 160rpx; line-height: 1.5; }
|
||
.mic-btn {
|
||
width: 64rpx; height: 64rpx; border-radius: 50%; background: #F3F4F6;
|
||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
transition: all 0.2s;
|
||
}
|
||
.mic-btn:active { transform: scale(0.9); }
|
||
.mic-btn.recording { background: #FEE2E2; animation: mic-pulse 1s infinite; }
|
||
.mic-icon { font-size: 28rpx; }
|
||
@keyframes mic-pulse {
|
||
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
|
||
50% { box-shadow: 0 0 0 16rpx rgba(239, 68, 68, 0); }
|
||
}
|
||
.send-btn {
|
||
width: 80rpx; height: 80rpx; background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
transition: all 0.2s ease;
|
||
}
|
||
.send-btn:active { transform: scale(0.9); }
|
||
.send-btn.disabled { background: var(--color-border); }
|
||
.send-icon { font-size: 32rpx; color: #FFFFFF; transform: translateY(2rpx); }
|
||
|
||
.complete-bar { background: #FFFFFF; padding: 20rpx 24rpx; padding-bottom: calc(20rpx + var(--safe-bottom)); }
|
||
.cta-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid)); color: #FFFFFF; border-radius: var(--radius-md); font-size: 28rpx; font-weight: 600; border: none; }
|
||
.disclaimer-bar { text-align: center; font-size: 20rpx; color: var(--color-text-tertiary); padding: 8rpx 24rpx; background: #FFFFFF; border-top: 1rpx solid var(--color-border); }
|
||
</style>
|