- 新增数据库迁移脚本 (practice_rooms, practice_room_messages) - 新增后端 API: 房间创建/加入/消息同步/报告生成 - 新增前端页面: 入口页/对练房间/报告页 - 新增 AI 双人评估服务和提示词
This commit is contained in:
yuliang_guo
187
frontend/src/api/duoPractice.ts
Normal file
187
frontend/src/api/duoPractice.ts
Normal file
@@ -0,0 +1,187 @@
|
||||
/**
|
||||
* 双人对练 API
|
||||
*/
|
||||
import request from '@/api/request'
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
|
||||
export interface CreateRoomRequest {
|
||||
scene_id?: number
|
||||
scene_name?: string
|
||||
scene_type?: string
|
||||
scene_background?: string
|
||||
role_a_name?: string
|
||||
role_b_name?: string
|
||||
role_a_description?: string
|
||||
role_b_description?: string
|
||||
host_role?: 'A' | 'B'
|
||||
room_name?: string
|
||||
}
|
||||
|
||||
export interface CreateRoomResponse {
|
||||
room_code: string
|
||||
room_id: number
|
||||
room_name: string
|
||||
my_role: string
|
||||
my_role_name: string
|
||||
}
|
||||
|
||||
export interface JoinRoomResponse {
|
||||
room_code: string
|
||||
room_id: number
|
||||
room_name: string
|
||||
status: string
|
||||
my_role: string
|
||||
my_role_name: string
|
||||
}
|
||||
|
||||
export interface RoomUser {
|
||||
id: number
|
||||
username: string
|
||||
full_name: string
|
||||
avatar_url?: string
|
||||
}
|
||||
|
||||
export interface RoomInfo {
|
||||
id: number
|
||||
room_code: string
|
||||
room_name?: string
|
||||
scene_id?: number
|
||||
scene_name?: string
|
||||
scene_type?: string
|
||||
scene_background?: string
|
||||
role_a_name: string
|
||||
role_b_name: string
|
||||
role_a_description?: string
|
||||
role_b_description?: string
|
||||
host_role: string
|
||||
status: string
|
||||
created_at?: string
|
||||
started_at?: string
|
||||
ended_at?: string
|
||||
duration_seconds: number
|
||||
total_turns: number
|
||||
role_a_turns: number
|
||||
role_b_turns: number
|
||||
}
|
||||
|
||||
export interface RoomDetailResponse {
|
||||
room: RoomInfo
|
||||
host_user?: RoomUser
|
||||
guest_user?: RoomUser
|
||||
host_role_name?: string
|
||||
guest_role_name?: string
|
||||
my_role?: string
|
||||
my_role_name?: string
|
||||
is_host: boolean
|
||||
}
|
||||
|
||||
export interface RoomMessage {
|
||||
id: number
|
||||
room_id: number
|
||||
user_id?: number
|
||||
message_type: 'chat' | 'system' | 'join' | 'leave' | 'start' | 'end'
|
||||
content?: string
|
||||
role_name?: string
|
||||
sequence: number
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface MessagesResponse {
|
||||
messages: RoomMessage[]
|
||||
room_status: string
|
||||
last_sequence: number
|
||||
}
|
||||
|
||||
export interface RoomListItem {
|
||||
id: number
|
||||
room_code: string
|
||||
room_name?: string
|
||||
scene_name?: string
|
||||
status: string
|
||||
is_host: boolean
|
||||
created_at?: string
|
||||
duration_seconds: number
|
||||
total_turns: number
|
||||
}
|
||||
|
||||
// ==================== API 函数 ====================
|
||||
|
||||
/**
|
||||
* 创建房间
|
||||
*/
|
||||
export function createRoom(data: CreateRoomRequest) {
|
||||
return request.post<CreateRoomResponse>('/api/v1/practice/rooms', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 加入房间
|
||||
*/
|
||||
export function joinRoom(roomCode: string) {
|
||||
return request.post<JoinRoomResponse>('/api/v1/practice/rooms/join', {
|
||||
room_code: roomCode
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取房间详情
|
||||
*/
|
||||
export function getRoomDetail(roomCode: string) {
|
||||
return request.get<RoomDetailResponse>(`/api/v1/practice/rooms/${roomCode}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始对练
|
||||
*/
|
||||
export function startPractice(roomCode: string) {
|
||||
return request.post(`/api/v1/practice/rooms/${roomCode}/start`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束对练
|
||||
*/
|
||||
export function endPractice(roomCode: string) {
|
||||
return request.post(`/api/v1/practice/rooms/${roomCode}/end`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 离开房间
|
||||
*/
|
||||
export function leaveRoom(roomCode: string) {
|
||||
return request.post(`/api/v1/practice/rooms/${roomCode}/leave`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
export function sendMessage(roomCode: string, content: string) {
|
||||
return request.post<RoomMessage>(`/api/v1/practice/rooms/${roomCode}/message`, {
|
||||
content
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消息列表
|
||||
*/
|
||||
export function getMessages(roomCode: string, sinceSequence: number = 0) {
|
||||
return request.get<MessagesResponse>(`/api/v1/practice/rooms/${roomCode}/messages`, {
|
||||
params: { since_sequence: sinceSequence }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取我的房间列表
|
||||
*/
|
||||
export function getMyRooms(status?: string, limit: number = 20) {
|
||||
return request.get<{ rooms: RoomListItem[] }>('/api/v1/practice/rooms', {
|
||||
params: { status, limit }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成分享链接
|
||||
*/
|
||||
export function generateShareLink(roomCode: string): string {
|
||||
const baseUrl = window.location.origin
|
||||
return `${baseUrl}/trainee/duo-practice/join/${roomCode}`
|
||||
}
|
||||
@@ -120,6 +120,30 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'AIPracticeCoze',
|
||||
component: () => import('@/views/trainee/ai-practice-coze.vue'),
|
||||
meta: { title: 'AI陪练会话', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'duo-practice',
|
||||
name: 'DuoPractice',
|
||||
component: () => import('@/views/trainee/duo-practice.vue'),
|
||||
meta: { title: '双人对练', icon: 'Connection' }
|
||||
},
|
||||
{
|
||||
path: 'duo-practice/room/:code',
|
||||
name: 'DuoPracticeRoom',
|
||||
component: () => import('@/views/trainee/duo-practice-room.vue'),
|
||||
meta: { title: '对练房间', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'duo-practice/join/:code',
|
||||
name: 'DuoPracticeJoin',
|
||||
component: () => import('@/views/trainee/duo-practice-room.vue'),
|
||||
meta: { title: '加入对练', hidden: true }
|
||||
},
|
||||
{
|
||||
path: 'duo-practice/report/:id',
|
||||
name: 'DuoPracticeReport',
|
||||
component: () => import('@/views/trainee/duo-practice-report.vue'),
|
||||
meta: { title: '对练报告', hidden: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
413
frontend/src/stores/duoPracticeStore.ts
Normal file
413
frontend/src/stores/duoPracticeStore.ts
Normal file
@@ -0,0 +1,413 @@
|
||||
/**
|
||||
* 双人对练状态管理
|
||||
*/
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import * as duoPracticeApi from '@/api/duoPractice'
|
||||
import type {
|
||||
RoomInfo,
|
||||
RoomUser,
|
||||
RoomMessage,
|
||||
CreateRoomRequest
|
||||
} from '@/api/duoPractice'
|
||||
|
||||
export const useDuoPracticeStore = defineStore('duoPractice', () => {
|
||||
// ==================== 状态 ====================
|
||||
|
||||
/** 房间码 */
|
||||
const roomCode = ref<string>('')
|
||||
|
||||
/** 房间信息 */
|
||||
const roomInfo = ref<RoomInfo | null>(null)
|
||||
|
||||
/** 房主信息 */
|
||||
const hostUser = ref<RoomUser | null>(null)
|
||||
|
||||
/** 嘉宾信息 */
|
||||
const guestUser = ref<RoomUser | null>(null)
|
||||
|
||||
/** 我的角色 */
|
||||
const myRole = ref<string>('')
|
||||
|
||||
/** 我的角色名称 */
|
||||
const myRoleName = ref<string>('')
|
||||
|
||||
/** 是否是房主 */
|
||||
const isHost = ref<boolean>(false)
|
||||
|
||||
/** 消息列表 */
|
||||
const messages = ref<RoomMessage[]>([])
|
||||
|
||||
/** 最后消息序号（用于轮询） */
|
||||
const lastSequence = ref<number>(0)
|
||||
|
||||
/** 是否正在加载 */
|
||||
const isLoading = ref<boolean>(false)
|
||||
|
||||
/** 是否已连接（轮询中） */
|
||||
const isConnected = ref<boolean>(false)
|
||||
|
||||
/** 轮询定时器 */
|
||||
let pollingTimer: number | null = null
|
||||
|
||||
/** 输入框内容 */
|
||||
const inputMessage = ref<string>('')
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
|
||||
/** 房间状态 */
|
||||
const roomStatus = computed(() => roomInfo.value?.status || 'unknown')
|
||||
|
||||
/** 是否等待中 */
|
||||
const isWaiting = computed(() => roomStatus.value === 'waiting')
|
||||
|
||||
/** 是否就绪 */
|
||||
const isReady = computed(() => roomStatus.value === 'ready')
|
||||
|
||||
/** 是否对练中 */
|
||||
const isPracticing = computed(() => roomStatus.value === 'practicing')
|
||||
|
||||
/** 是否已完成 */
|
||||
const isCompleted = computed(() => roomStatus.value === 'completed')
|
||||
|
||||
/** 对方用户 */
|
||||
const partnerUser = computed(() => {
|
||||
if (isHost.value) {
|
||||
return guestUser.value
|
||||
} else {
|
||||
return hostUser.value
|
||||
}
|
||||
})
|
||||
|
||||
/** 对方角色名称 */
|
||||
const partnerRoleName = computed(() => {
|
||||
if (!roomInfo.value) return ''
|
||||
const partnerRole = myRole.value === 'A' ? 'B' : 'A'
|
||||
return partnerRole === 'A' ? roomInfo.value.role_a_name : roomInfo.value.role_b_name
|
||||
})
|
||||
|
||||
/** 聊天消息（过滤系统消息） */
|
||||
const chatMessages = computed(() => {
|
||||
return messages.value.filter(m => m.message_type === 'chat')
|
||||
})
|
||||
|
||||
/** 系统消息 */
|
||||
const systemMessages = computed(() => {
|
||||
return messages.value.filter(m => m.message_type !== 'chat')
|
||||
})
|
||||
|
||||
// ==================== 方法 ====================
|
||||
|
||||
/**
|
||||
* 创建房间
|
||||
*/
|
||||
const createRoom = async (request: CreateRoomRequest) => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res: any = await duoPracticeApi.createRoom(request)
|
||||
if (res.code === 200) {
|
||||
roomCode.value = res.data.room_code
|
||||
myRole.value = res.data.my_role
|
||||
myRoleName.value = res.data.my_role_name
|
||||
isHost.value = true
|
||||
|
||||
// 获取房间详情
|
||||
await fetchRoomDetail()
|
||||
|
||||
return res.data
|
||||
} else {
|
||||
throw new Error(res.message || '创建房间失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '创建房间失败')
|
||||
throw error
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 加入房间
|
||||
*/
|
||||
const joinRoom = async (code: string) => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res: any = await duoPracticeApi.joinRoom(code.toUpperCase())
|
||||
if (res.code === 200) {
|
||||
roomCode.value = res.data.room_code
|
||||
myRole.value = res.data.my_role
|
||||
myRoleName.value = res.data.my_role_name
|
||||
isHost.value = false
|
||||
|
||||
// 获取房间详情
|
||||
await fetchRoomDetail()
|
||||
|
||||
return res.data
|
||||
} else {
|
||||
throw new Error(res.message || '加入房间失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '加入房间失败')
|
||||
throw error
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取房间详情
|
||||
*/
|
||||
const fetchRoomDetail = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
try {
|
||||
const res: any = await duoPracticeApi.getRoomDetail(roomCode.value)
|
||||
if (res.code === 200) {
|
||||
roomInfo.value = res.data.room
|
||||
hostUser.value = res.data.host_user
|
||||
guestUser.value = res.data.guest_user
|
||||
myRole.value = res.data.my_role || myRole.value
|
||||
myRoleName.value = res.data.my_role_name || myRoleName.value
|
||||
isHost.value = res.data.is_host
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取房间详情失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始对练
|
||||
*/
|
||||
const startPractice = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res: any = await duoPracticeApi.startPractice(roomCode.value)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('对练开始！')
|
||||
await fetchRoomDetail()
|
||||
} else {
|
||||
throw new Error(res.message || '开始失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '开始对练失败')
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束对练
|
||||
*/
|
||||
const endPractice = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res: any = await duoPracticeApi.endPractice(roomCode.value)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('对练结束')
|
||||
await fetchRoomDetail()
|
||||
stopPolling()
|
||||
return res.data
|
||||
} else {
|
||||
throw new Error(res.message || '结束失败')
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '结束对练失败')
|
||||
throw error
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 离开房间
|
||||
*/
|
||||
const leaveRoom = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
try {
|
||||
await duoPracticeApi.leaveRoom(roomCode.value)
|
||||
resetState()
|
||||
} catch (error) {
|
||||
console.error('离开房间失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
const sendMessage = async (content?: string) => {
|
||||
const msg = content || inputMessage.value.trim()
|
||||
if (!msg || !roomCode.value) return
|
||||
|
||||
try {
|
||||
const res: any = await duoPracticeApi.sendMessage(roomCode.value, msg)
|
||||
if (res.code === 200) {
|
||||
inputMessage.value = ''
|
||||
// 消息会通过轮询获取
|
||||
}
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '发送失败')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取消息
|
||||
*/
|
||||
const fetchMessages = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
try {
|
||||
const res: any = await duoPracticeApi.getMessages(roomCode.value, lastSequence.value)
|
||||
if (res.code === 200) {
|
||||
const newMessages = res.data.messages
|
||||
if (newMessages.length > 0) {
|
||||
messages.value.push(...newMessages)
|
||||
lastSequence.value = res.data.last_sequence
|
||||
}
|
||||
|
||||
// 检查房间状态变化
|
||||
if (res.data.room_status !== roomInfo.value?.status) {
|
||||
await fetchRoomDetail()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取消息失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始轮询消息
|
||||
*/
|
||||
const startPolling = () => {
|
||||
if (pollingTimer) return
|
||||
|
||||
isConnected.value = true
|
||||
|
||||
// 立即获取一次
|
||||
fetchMessages()
|
||||
|
||||
// 每500ms轮询一次
|
||||
pollingTimer = window.setInterval(() => {
|
||||
fetchMessages()
|
||||
}, 500)
|
||||
|
||||
console.log('[DuoPractice] 开始轮询消息')
|
||||
}
|
||||
|
||||
/**
|
||||
* 停止轮询
|
||||
*/
|
||||
const stopPolling = () => {
|
||||
if (pollingTimer) {
|
||||
clearInterval(pollingTimer)
|
||||
pollingTimer = null
|
||||
}
|
||||
isConnected.value = false
|
||||
console.log('[DuoPractice] 停止轮询消息')
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置状态
|
||||
*/
|
||||
const resetState = () => {
|
||||
stopPolling()
|
||||
roomCode.value = ''
|
||||
roomInfo.value = null
|
||||
hostUser.value = null
|
||||
guestUser.value = null
|
||||
myRole.value = ''
|
||||
myRoleName.value = ''
|
||||
isHost.value = false
|
||||
messages.value = []
|
||||
lastSequence.value = 0
|
||||
inputMessage.value = ''
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成分享链接
|
||||
*/
|
||||
const getShareLink = () => {
|
||||
if (!roomCode.value) return ''
|
||||
return duoPracticeApi.generateShareLink(roomCode.value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制房间码
|
||||
*/
|
||||
const copyRoomCode = async () => {
|
||||
if (!roomCode.value) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(roomCode.value)
|
||||
ElMessage.success('房间码已复制')
|
||||
} catch (error) {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制分享链接
|
||||
*/
|
||||
const copyShareLink = async () => {
|
||||
const link = getShareLink()
|
||||
if (!link) return
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(link)
|
||||
ElMessage.success('链接已复制')
|
||||
} catch (error) {
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 返回 ====================
|
||||
|
||||
return {
|
||||
// 状态
|
||||
roomCode,
|
||||
roomInfo,
|
||||
hostUser,
|
||||
guestUser,
|
||||
myRole,
|
||||
myRoleName,
|
||||
isHost,
|
||||
messages,
|
||||
lastSequence,
|
||||
isLoading,
|
||||
isConnected,
|
||||
inputMessage,
|
||||
|
||||
// 计算属性
|
||||
roomStatus,
|
||||
isWaiting,
|
||||
isReady,
|
||||
isPracticing,
|
||||
isCompleted,
|
||||
partnerUser,
|
||||
partnerRoleName,
|
||||
chatMessages,
|
||||
systemMessages,
|
||||
|
||||
// 方法
|
||||
createRoom,
|
||||
joinRoom,
|
||||
fetchRoomDetail,
|
||||
startPractice,
|
||||
endPractice,
|
||||
leaveRoom,
|
||||
sendMessage,
|
||||
fetchMessages,
|
||||
startPolling,
|
||||
stopPolling,
|
||||
resetState,
|
||||
getShareLink,
|
||||
copyRoomCode,
|
||||
copyShareLink
|
||||
}
|
||||
})
|
||||
544
frontend/src/views/trainee/duo-practice-report.vue
Normal file
544
frontend/src/views/trainee/duo-practice-report.vue
Normal file
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<div class="duo-practice-report">
|
||||
<!-- 页头 -->
|
||||
<div class="report-header">
|
||||
<el-button text @click="handleBack">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<h1>对练报告</h1>
|
||||
</div>
|
||||
|
||||
<div class="report-content" v-loading="isLoading">
|
||||
<!-- 概览卡片 -->
|
||||
<div class="overview-section">
|
||||
<div class="overview-card">
|
||||
<div class="overview-item">
|
||||
<div class="label">场景</div>
|
||||
<div class="value">{{ roomInfo?.scene_name || '双人对练' }}</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="label">时长</div>
|
||||
<div class="value">{{ formatDuration(roomInfo?.duration_seconds || 0) }}</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="label">对话轮次</div>
|
||||
<div class="value">{{ roomInfo?.total_turns || 0 }} 轮</div>
|
||||
</div>
|
||||
<div class="overview-item">
|
||||
<div class="label">互动质量</div>
|
||||
<div class="value score">{{ analysisResult?.overall_evaluation?.interaction_quality || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 双人评估对比 -->
|
||||
<div class="evaluation-section">
|
||||
<h2>双方表现</h2>
|
||||
<div class="evaluation-cards">
|
||||
<!-- 用户A评估 -->
|
||||
<div class="evaluation-card" v-if="analysisResult?.user_a_evaluation">
|
||||
<div class="card-header">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="48">{{ analysisResult.user_a_evaluation.user_name?.[0] }}</el-avatar>
|
||||
<div>
|
||||
<div class="user-name">{{ analysisResult.user_a_evaluation.user_name }}</div>
|
||||
<div class="role-name">{{ analysisResult.user_a_evaluation.role_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-score">
|
||||
<div class="score-value">{{ analysisResult.user_a_evaluation.total_score }}</div>
|
||||
<div class="score-label">综合评分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- 维度评分 -->
|
||||
<div class="dimensions">
|
||||
<div
|
||||
class="dimension-item"
|
||||
v-for="(dim, key) in analysisResult.user_a_evaluation.dimensions"
|
||||
:key="key"
|
||||
>
|
||||
<div class="dim-header">
|
||||
<span class="dim-name">{{ getDimensionName(key) }}</span>
|
||||
<span class="dim-score">{{ dim.score }}</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="dim.score"
|
||||
:stroke-width="8"
|
||||
:show-text="false"
|
||||
:color="getScoreColor(dim.score)"
|
||||
/>
|
||||
<div class="dim-comment">{{ dim.comment }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 亮点 -->
|
||||
<div class="highlights" v-if="analysisResult.user_a_evaluation.highlights?.length">
|
||||
<h4>亮点</h4>
|
||||
<ul>
|
||||
<li v-for="(h, i) in analysisResult.user_a_evaluation.highlights" :key="i">
|
||||
{{ h }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 改进建议 -->
|
||||
<div class="improvements" v-if="analysisResult.user_a_evaluation.improvements?.length">
|
||||
<h4>改进建议</h4>
|
||||
<div
|
||||
class="improvement-item"
|
||||
v-for="(imp, i) in analysisResult.user_a_evaluation.improvements"
|
||||
:key="i"
|
||||
>
|
||||
<div class="issue">{{ imp.issue }}</div>
|
||||
<div class="suggestion">{{ imp.suggestion }}</div>
|
||||
<div class="example" v-if="imp.example">示例：{{ imp.example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户B评估 -->
|
||||
<div class="evaluation-card" v-if="analysisResult?.user_b_evaluation">
|
||||
<div class="card-header">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="48">{{ analysisResult.user_b_evaluation.user_name?.[0] }}</el-avatar>
|
||||
<div>
|
||||
<div class="user-name">{{ analysisResult.user_b_evaluation.user_name }}</div>
|
||||
<div class="role-name">{{ analysisResult.user_b_evaluation.role_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-score">
|
||||
<div class="score-value">{{ analysisResult.user_b_evaluation.total_score }}</div>
|
||||
<div class="score-label">综合评分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- 维度评分 -->
|
||||
<div class="dimensions">
|
||||
<div
|
||||
class="dimension-item"
|
||||
v-for="(dim, key) in analysisResult.user_b_evaluation.dimensions"
|
||||
:key="key"
|
||||
>
|
||||
<div class="dim-header">
|
||||
<span class="dim-name">{{ getDimensionName(key) }}</span>
|
||||
<span class="dim-score">{{ dim.score }}</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="dim.score"
|
||||
:stroke-width="8"
|
||||
:show-text="false"
|
||||
:color="getScoreColor(dim.score)"
|
||||
/>
|
||||
<div class="dim-comment">{{ dim.comment }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 亮点 -->
|
||||
<div class="highlights" v-if="analysisResult.user_b_evaluation.highlights?.length">
|
||||
<h4>亮点</h4>
|
||||
<ul>
|
||||
<li v-for="(h, i) in analysisResult.user_b_evaluation.highlights" :key="i">
|
||||
{{ h }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 改进建议 -->
|
||||
<div class="improvements" v-if="analysisResult.user_b_evaluation.improvements?.length">
|
||||
<h4>改进建议</h4>
|
||||
<div
|
||||
class="improvement-item"
|
||||
v-for="(imp, i) in analysisResult.user_b_evaluation.improvements"
|
||||
:key="i"
|
||||
>
|
||||
<div class="issue">{{ imp.issue }}</div>
|
||||
<div class="suggestion">{{ imp.suggestion }}</div>
|
||||
<div class="example" v-if="imp.example">示例：{{ imp.example }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 整体评价 -->
|
||||
<div class="overall-section" v-if="analysisResult?.overall_evaluation?.overall_comment">
|
||||
<h2>整体评价</h2>
|
||||
<div class="overall-comment">
|
||||
{{ analysisResult.overall_evaluation.overall_comment }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载中或无数据 -->
|
||||
<el-empty v-if="!isLoading && !analysisResult" description="暂无报告数据" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 状态
|
||||
const isLoading = ref(false)
|
||||
const roomInfo = ref<any>(null)
|
||||
const analysisResult = ref<any>(null)
|
||||
|
||||
// 方法
|
||||
const handleBack = () => {
|
||||
router.push('/trainee/duo-practice')
|
||||
}
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins}分${secs}秒`
|
||||
}
|
||||
|
||||
const getDimensionName = (key: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'role_immersion': '角色代入',
|
||||
'communication': '沟通表达',
|
||||
'professional_knowledge': '专业知识',
|
||||
'response_quality': '回应质量',
|
||||
'goal_achievement': '目标达成'
|
||||
}
|
||||
return map[key] || key
|
||||
}
|
||||
|
||||
const getScoreColor = (score: number) => {
|
||||
if (score >= 80) return '#67c23a'
|
||||
if (score >= 60) return '#e6a23c'
|
||||
return '#f56c6c'
|
||||
}
|
||||
|
||||
// 加载报告数据
|
||||
const loadReport = async () => {
|
||||
const roomId = route.params.id
|
||||
if (!roomId) return
|
||||
|
||||
isLoading.value = true
|
||||
try {
|
||||
// TODO: 调用 API 获取报告
|
||||
// const res = await getDuoPracticeReport(roomId)
|
||||
// roomInfo.value = res.data.room
|
||||
// analysisResult.value = res.data.analysis
|
||||
|
||||
// 模拟数据
|
||||
roomInfo.value = {
|
||||
scene_name: '销售场景对练',
|
||||
duration_seconds: 300,
|
||||
total_turns: 15
|
||||
}
|
||||
|
||||
analysisResult.value = {
|
||||
overall_evaluation: {
|
||||
interaction_quality: 85,
|
||||
scene_restoration: 82,
|
||||
overall_comment: '本次双人对练整体表现良好，双方都能够较好地代入角色，对话流畅自然。销售顾问在产品介绍和需求挖掘方面表现出色，顾客也能够提出合理的疑问和需求。建议在处理异议时可以更加灵活，增加更多情感共鸣的表达。'
|
||||
},
|
||||
user_a_evaluation: {
|
||||
user_name: '张三',
|
||||
role_name: '销售顾问',
|
||||
total_score: 86,
|
||||
dimensions: {
|
||||
role_immersion: { score: 88, comment: '完全进入角色状态，语言风格符合销售顾问身份' },
|
||||
communication: { score: 85, comment: '表达清晰，逻辑通顺，用词专业' },
|
||||
professional_knowledge: { score: 82, comment: '产品知识展示较为全面' },
|
||||
response_quality: { score: 88, comment: '回应及时准确，针对性强' },
|
||||
goal_achievement: { score: 85, comment: '有效推进了销售进程' }
|
||||
},
|
||||
highlights: [
|
||||
'开场白自然得体，快速建立信任',
|
||||
'善于使用提问技巧挖掘客户需求',
|
||||
'产品利益点阐述清晰有力'
|
||||
],
|
||||
improvements: [
|
||||
{
|
||||
issue: '处理价格异议时略显被动',
|
||||
suggestion: '可以先肯定客户的关注点，再引导关注价值',
|
||||
example: '您说得对，预算确实是重要的考虑因素。不过您有没有想过...'
|
||||
}
|
||||
]
|
||||
},
|
||||
user_b_evaluation: {
|
||||
user_name: '李四',
|
||||
role_name: '顾客',
|
||||
total_score: 83,
|
||||
dimensions: {
|
||||
role_immersion: { score: 80, comment: '基本符合顾客角色设定' },
|
||||
communication: { score: 85, comment: '表达自己的需求和疑虑' },
|
||||
professional_knowledge: { score: 78, comment: '对产品有基本了解' },
|
||||
response_quality: { score: 82, comment: '能够合理回应销售话术' },
|
||||
goal_achievement: { score: 80, comment: '配合完成了对练场景' }
|
||||
},
|
||||
highlights: [
|
||||
'提出的问题具有代表性',
|
||||
'表现出真实顾客的犹豫和考虑'
|
||||
],
|
||||
improvements: [
|
||||
{
|
||||
issue: '可以增加更多挑战性的问题',
|
||||
suggestion: '尝试提出一些竞品对比、售后保障等深度问题',
|
||||
example: '我听说XX品牌的产品价格更低，你们有什么优势？'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载报告失败:', error)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadReport()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duo-practice-report {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.report-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.overview-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
.overview-card {
|
||||
display: flex;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
color: #fff;
|
||||
|
||||
.overview-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
&.score {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.evaluation-section {
|
||||
margin-bottom: 32px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.evaluation-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.evaluation-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #f8f9fc;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.role-name {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.total-score {
|
||||
text-align: center;
|
||||
|
||||
.score-value {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
|
||||
.dimensions {
|
||||
.dimension-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.dim-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.dim-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dim-score {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
}
|
||||
}
|
||||
|
||||
.dim-comment {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlights, .improvements {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.highlights {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
color: #67c23a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.improvements {
|
||||
.improvement-item {
|
||||
background: #fdf6ec;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.issue {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #e6a23c;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.example {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overall-section {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.overall-comment {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
572
frontend/src/views/trainee/duo-practice-room.vue
Normal file
572
frontend/src/views/trainee/duo-practice-room.vue
Normal file
@@ -0,0 +1,572 @@
|
||||
<template>
|
||||
<div class="duo-practice-room">
|
||||
<!-- 顶部信息栏 -->
|
||||
<div class="room-header">
|
||||
<div class="header-left">
|
||||
<el-button text @click="handleBack">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
返回
|
||||
</el-button>
|
||||
<div class="room-title">
|
||||
<h2>{{ store.roomInfo?.room_name || '双人对练' }}</h2>
|
||||
<div class="room-code-display">
|
||||
房间码：<span class="code">{{ store.roomCode }}</span>
|
||||
<el-button text size="small" @click="store.copyRoomCode">
|
||||
<el-icon><CopyDocument /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-tag :type="statusType" size="large">{{ statusText }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体区域 -->
|
||||
<div class="room-body">
|
||||
<!-- 左侧：参与者和操作 -->
|
||||
<div class="participants-panel">
|
||||
<h3>参与者</h3>
|
||||
|
||||
<!-- 房主 -->
|
||||
<div class="participant-card host">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="48" :src="store.hostUser?.avatar_url">
|
||||
{{ store.hostUser?.full_name?.[0] || 'H' }}
|
||||
</el-avatar>
|
||||
<el-tag class="role-tag" size="small" type="warning">房主</el-tag>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ store.hostUser?.full_name || '等待中...' }}</div>
|
||||
<div class="role">扮演：{{ hostRoleName }}</div>
|
||||
</div>
|
||||
<div class="badge" v-if="store.isHost">
|
||||
<el-tag type="primary" size="small">我</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 嘉宾 -->
|
||||
<div class="participant-card guest" :class="{ empty: !store.guestUser }">
|
||||
<template v-if="store.guestUser">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="48" :src="store.guestUser?.avatar_url">
|
||||
{{ store.guestUser?.full_name?.[0] || 'G' }}
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ store.guestUser?.full_name }}</div>
|
||||
<div class="role">扮演：{{ guestRoleName }}</div>
|
||||
</div>
|
||||
<div class="badge" v-if="!store.isHost">
|
||||
<el-tag type="primary" size="small">我</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="empty-placeholder">
|
||||
<el-icon :size="32"><Plus /></el-icon>
|
||||
<span>等待对方加入</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 分享区域 -->
|
||||
<div class="share-section" v-if="store.isWaiting">
|
||||
<h4>邀请伙伴加入</h4>
|
||||
<div class="share-code">
|
||||
<span class="big-code">{{ store.roomCode }}</span>
|
||||
</div>
|
||||
<el-button type="primary" @click="store.copyShareLink" block>
|
||||
<el-icon><Share /></el-icon>
|
||||
复制邀请链接
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<template v-if="store.isHost && store.isReady">
|
||||
<el-button type="primary" size="large" @click="store.startPractice" :loading="store.isLoading">
|
||||
开始对练
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-if="store.isPracticing">
|
||||
<el-button type="danger" size="large" @click="handleEndPractice">
|
||||
结束对练
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-if="store.isCompleted">
|
||||
<el-button type="primary" size="large" @click="viewReport">
|
||||
查看报告
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button @click="handleLeave" v-if="!store.isPracticing">
|
||||
离开房间
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：对话区域 -->
|
||||
<div class="chat-panel">
|
||||
<div class="chat-header">
|
||||
<span>对话记录</span>
|
||||
<span class="turn-count" v-if="store.roomInfo">
|
||||
{{ store.roomInfo.total_turns }} 轮对话
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="chat-messages" ref="messagesContainer">
|
||||
<!-- 系统消息 -->
|
||||
<div
|
||||
v-for="msg in store.messages"
|
||||
:key="msg.id"
|
||||
class="message"
|
||||
:class="getMessageClass(msg)"
|
||||
>
|
||||
<template v-if="msg.message_type === 'chat'">
|
||||
<div class="message-avatar">
|
||||
<el-avatar :size="36">
|
||||
{{ msg.role_name?.[0] || '?' }}
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
<div class="message-header">
|
||||
<span class="sender-name">{{ msg.role_name }}</span>
|
||||
<span class="message-time">{{ formatMessageTime(msg.created_at) }}</span>
|
||||
</div>
|
||||
<div class="message-body">{{ msg.content }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="system-message">
|
||||
{{ msg.content }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div v-if="store.messages.length === 0" class="empty-chat">
|
||||
<el-empty description="对练开始后，对话将显示在这里" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<div class="chat-input" v-if="store.isPracticing">
|
||||
<el-input
|
||||
v-model="store.inputMessage"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="输入消息..."
|
||||
@keydown.enter.ctrl="store.sendMessage()"
|
||||
/>
|
||||
<el-button type="primary" @click="store.sendMessage()" :disabled="!store.inputMessage.trim()">
|
||||
发送
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { ArrowLeft, CopyDocument, Plus, Share } from '@element-plus/icons-vue'
|
||||
import { useDuoPracticeStore } from '@/stores/duoPracticeStore'
|
||||
import type { RoomMessage } from '@/api/duoPractice'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useDuoPracticeStore()
|
||||
const messagesContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
// 计算属性
|
||||
const statusType = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
'waiting': 'warning',
|
||||
'ready': 'info',
|
||||
'practicing': 'success',
|
||||
'completed': '',
|
||||
'canceled': 'danger'
|
||||
}
|
||||
return map[store.roomStatus] || ''
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
const map: Record<string, string> = {
|
||||
'waiting': '等待加入',
|
||||
'ready': '准备就绪',
|
||||
'practicing': '对练中',
|
||||
'completed': '已完成',
|
||||
'canceled': '已取消'
|
||||
}
|
||||
return map[store.roomStatus] || store.roomStatus
|
||||
})
|
||||
|
||||
const hostRoleName = computed(() => {
|
||||
if (!store.roomInfo) return ''
|
||||
return store.roomInfo.host_role === 'A'
|
||||
? store.roomInfo.role_a_name
|
||||
: store.roomInfo.role_b_name
|
||||
})
|
||||
|
||||
const guestRoleName = computed(() => {
|
||||
if (!store.roomInfo) return ''
|
||||
return store.roomInfo.host_role === 'A'
|
||||
? store.roomInfo.role_b_name
|
||||
: store.roomInfo.role_a_name
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleBack = () => {
|
||||
router.push('/trainee/duo-practice')
|
||||
}
|
||||
|
||||
const handleLeave = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要离开房间吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await store.leaveRoom()
|
||||
router.push('/trainee/duo-practice')
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
|
||||
const handleEndPractice = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要结束对练吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
await store.endPractice()
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
|
||||
const viewReport = () => {
|
||||
router.push(`/trainee/duo-practice/report/${store.roomInfo?.id}`)
|
||||
}
|
||||
|
||||
const getMessageClass = (msg: RoomMessage) => {
|
||||
if (msg.message_type !== 'chat') return 'system'
|
||||
const isMe = msg.user_id && (
|
||||
(store.isHost && msg.user_id === store.hostUser?.id) ||
|
||||
(!store.isHost && msg.user_id === store.guestUser?.id)
|
||||
)
|
||||
return isMe ? 'mine' : 'other'
|
||||
}
|
||||
|
||||
const formatMessageTime = (time: string) => {
|
||||
const date = new Date(time)
|
||||
return date.toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
nextTick(() => {
|
||||
if (messagesContainer.value) {
|
||||
messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听消息变化，自动滚动到底部
|
||||
watch(() => store.messages.length, () => {
|
||||
scrollToBottom()
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onMounted(async () => {
|
||||
const roomCode = route.params.code as string
|
||||
if (roomCode) {
|
||||
store.roomCode = roomCode
|
||||
await store.fetchRoomDetail()
|
||||
|
||||
// 开始轮询消息
|
||||
store.startPolling()
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
store.stopPolling()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duo-practice-room {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.room-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.room-title {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.room-code-display {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
|
||||
.code {
|
||||
font-family: monospace;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.room-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.participants-panel {
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
border-right: 1px solid #eee;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.participant-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: #f8f9fc;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
|
||||
.role-tag {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.role {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty {
|
||||
border: 2px dashed #ddd;
|
||||
background: transparent;
|
||||
justify-content: center;
|
||||
min-height: 80px;
|
||||
|
||||
.empty-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
|
||||
span {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.share-section {
|
||||
margin-top: 24px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
color: #fff;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.share-code {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.big-code {
|
||||
font-size: 32px;
|
||||
font-family: monospace;
|
||||
font-weight: 700;
|
||||
letter-spacing: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-weight: 500;
|
||||
|
||||
.turn-count {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px;
|
||||
|
||||
.message {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&.mine {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.message-content {
|
||||
align-items: flex-end;
|
||||
|
||||
.message-body {
|
||||
background: #667eea;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.other {
|
||||
display: flex;
|
||||
|
||||
.message-content {
|
||||
.message-body {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.system {
|
||||
.system-message {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
padding: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 60%;
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.sender-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.message-body {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-chat {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #eee;
|
||||
|
||||
.el-textarea {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
401
frontend/src/views/trainee/duo-practice.vue
Normal file
401
frontend/src/views/trainee/duo-practice.vue
Normal file
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<div class="duo-practice-page">
|
||||
<div class="page-header">
|
||||
<h1>双人对练</h1>
|
||||
<p class="subtitle">与伙伴一起进行角色扮演对练，提升实战能力</p>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 创建/加入房间卡片 -->
|
||||
<div class="action-cards">
|
||||
<!-- 创建房间 -->
|
||||
<div class="action-card create-card" @click="showCreateDialog = true">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="48"><Plus /></el-icon>
|
||||
</div>
|
||||
<h3>创建房间</h3>
|
||||
<p>创建对练房间，邀请伙伴加入</p>
|
||||
</div>
|
||||
|
||||
<!-- 加入房间 -->
|
||||
<div class="action-card join-card" @click="showJoinDialog = true">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="48"><Connection /></el-icon>
|
||||
</div>
|
||||
<h3>加入房间</h3>
|
||||
<p>输入房间码，加入对练</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的房间列表 -->
|
||||
<div class="my-rooms" v-if="myRooms.length > 0">
|
||||
<h2>我的对练记录</h2>
|
||||
<div class="room-list">
|
||||
<div
|
||||
v-for="room in myRooms"
|
||||
:key="room.id"
|
||||
class="room-item"
|
||||
@click="enterRoom(room)"
|
||||
>
|
||||
<div class="room-info">
|
||||
<span class="room-name">{{ room.room_name || room.scene_name || '双人对练' }}</span>
|
||||
<span class="room-code">{{ room.room_code }}</span>
|
||||
</div>
|
||||
<div class="room-meta">
|
||||
<el-tag :type="getStatusType(room.status)" size="small">
|
||||
{{ getStatusText(room.status) }}
|
||||
</el-tag>
|
||||
<span class="room-time">{{ formatTime(room.created_at) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 创建房间对话框 -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
title="创建对练房间"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="createForm" label-width="100px">
|
||||
<el-form-item label="场景名称">
|
||||
<el-input v-model="createForm.scene_name" placeholder="如：销售场景对练" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色A名称">
|
||||
<el-input v-model="createForm.role_a_name" placeholder="如：销售顾问" />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色B名称">
|
||||
<el-input v-model="createForm.role_b_name" placeholder="如：顾客" />
|
||||
</el-form-item>
|
||||
<el-form-item label="我扮演">
|
||||
<el-radio-group v-model="createForm.host_role">
|
||||
<el-radio label="A">{{ createForm.role_a_name || '角色A' }}</el-radio>
|
||||
<el-radio label="B">{{ createForm.role_b_name || '角色B' }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="场景背景">
|
||||
<el-input
|
||||
v-model="createForm.scene_background"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="描述对练场景的背景信息（可选）"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showCreateDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleCreateRoom" :loading="isCreating">
|
||||
创建房间
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 加入房间对话框 -->
|
||||
<el-dialog
|
||||
v-model="showJoinDialog"
|
||||
title="加入对练房间"
|
||||
width="400px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form>
|
||||
<el-form-item label="房间码">
|
||||
<el-input
|
||||
v-model="joinRoomCode"
|
||||
placeholder="请输入6位房间码"
|
||||
maxlength="6"
|
||||
style="font-size: 24px; text-align: center; letter-spacing: 8px;"
|
||||
@keyup.enter="handleJoinRoom"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showJoinDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleJoinRoom" :loading="isJoining">
|
||||
加入房间
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Connection } from '@element-plus/icons-vue'
|
||||
import { useDuoPracticeStore } from '@/stores/duoPracticeStore'
|
||||
import { getMyRooms, type RoomListItem } from '@/api/duoPractice'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useDuoPracticeStore()
|
||||
|
||||
// 状态
|
||||
const showCreateDialog = ref(false)
|
||||
const showJoinDialog = ref(false)
|
||||
const isCreating = ref(false)
|
||||
const isJoining = ref(false)
|
||||
const joinRoomCode = ref('')
|
||||
const myRooms = ref<RoomListItem[]>([])
|
||||
|
||||
// 创建表单
|
||||
const createForm = ref({
|
||||
scene_name: '',
|
||||
role_a_name: '销售顾问',
|
||||
role_b_name: '顾客',
|
||||
host_role: 'A' as 'A' | 'B',
|
||||
scene_background: ''
|
||||
})
|
||||
|
||||
// 加载我的房间列表
|
||||
const loadMyRooms = async () => {
|
||||
try {
|
||||
const res: any = await getMyRooms()
|
||||
if (res.code === 200) {
|
||||
myRooms.value = res.data.rooms
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载房间列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 创建房间
|
||||
const handleCreateRoom = async () => {
|
||||
if (!createForm.value.scene_name) {
|
||||
ElMessage.warning('请输入场景名称')
|
||||
return
|
||||
}
|
||||
|
||||
isCreating.value = true
|
||||
try {
|
||||
await store.createRoom(createForm.value)
|
||||
showCreateDialog.value = false
|
||||
|
||||
// 跳转到房间页面
|
||||
router.push(`/trainee/duo-practice/room/${store.roomCode}`)
|
||||
} catch (error) {
|
||||
// 错误已在 store 中处理
|
||||
} finally {
|
||||
isCreating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加入房间
|
||||
const handleJoinRoom = async () => {
|
||||
if (!joinRoomCode.value || joinRoomCode.value.length < 6) {
|
||||
ElMessage.warning('请输入6位房间码')
|
||||
return
|
||||
}
|
||||
|
||||
isJoining.value = true
|
||||
try {
|
||||
await store.joinRoom(joinRoomCode.value)
|
||||
showJoinDialog.value = false
|
||||
|
||||
// 跳转到房间页面
|
||||
router.push(`/trainee/duo-practice/room/${store.roomCode}`)
|
||||
} catch (error) {
|
||||
// 错误已在 store 中处理
|
||||
} finally {
|
||||
isJoining.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 进入房间
|
||||
const enterRoom = (room: RoomListItem) => {
|
||||
router.push(`/trainee/duo-practice/room/${room.room_code}`)
|
||||
}
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'waiting': 'warning',
|
||||
'ready': 'info',
|
||||
'practicing': 'success',
|
||||
'completed': '',
|
||||
'canceled': 'danger'
|
||||
}
|
||||
return map[status] || ''
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
'waiting': '等待加入',
|
||||
'ready': '准备就绪',
|
||||
'practicing': '对练中',
|
||||
'completed': '已完成',
|
||||
'canceled': '已取消'
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time?: string) => {
|
||||
if (!time) return ''
|
||||
const date = new Date(time)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMyRooms()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.duo-practice-page {
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-cards {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-bottom: 48px;
|
||||
|
||||
.action-card {
|
||||
width: 280px;
|
||||
padding: 40px 24px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.create-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
|
||||
.card-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&.join-card {
|
||||
border-color: #667eea;
|
||||
|
||||
.card-icon {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #764ba2;
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-rooms {
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.room-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.room-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.room-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.room-name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.room-code {
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
color: #667eea;
|
||||
background: #f0f2ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.room-time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user