admin/012-kaopeilian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 初始化考培练系统项目

Browse Source 
- 从服务器拉取完整代码
- 按框架规范整理项目结构
- 配置 Drone CI 测试环境部署
- 包含后端(FastAPI)、前端(Vue3)、管理端

技术栈: Vue3 + TypeScript + FastAPI + MySQL
This commit is contained in:
111
2026-01-24 19:33:28 +08:00
commit 998211c483
1197 changed files with 228429 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
frontend/src/components/NotificationBell.vue Normal file
View File

@@ -0,0 +1,395 @@
<template>
<el-popover
placement="bottom"
:width="360"
trigger="click"
popper-class="notification-popover"
@show="handlePopoverShow"
>
<template #reference>
<el-button link class="notification-btn">
<el-icon :size="20"><Bell /></el-icon>
<el-badge
v-if="unreadCount > 0"
:value="unreadCount > 99 ? '99+' : unreadCount"
class="notification-badge"
/>
</el-button>
</template>
<div class="notification-panel">
<!-- 面板头部 -->
<div class="panel-header">
<span class="title">消息通知</span>
<el-button
v-if="unreadCount > 0"
link
type="primary"
size="small"
@click="handleMarkAllRead"
>
全部已读
</el-button>
</div>
<!-- 通知列表 -->
<div class="notification-list" v-loading="loading">
<template v-if="notifications.length > 0">
<div
v-for="item in notifications"
:key="item.id"
class="notification-item"
:class="{ unread: !item.is_read }"
@click="handleNotificationClick(item)"
>
<div class="item-icon" :class="getTypeClass(item.type)">
<el-icon>
<component :is="getTypeIcon(item.type)" />
</el-icon>
</div>
<div class="item-content">
<div class="item-title">{{ item.title }}</div>
<div class="item-desc">{{ item.content }}</div>
<div class="item-time">{{ formatTime(item.created_at) }}</div>
</div>
<div v-if="!item.is_read" class="unread-dot"></div>
</div>
</template>
<el-empty v-else description="暂无消息" :image-size="80" />
</div>
<!-- 面板底部 -->
<div class="panel-footer">
<el-button link type="primary" @click="goToNotificationCenter">
查看全部消息
</el-button>
</div>
</div>
</el-popover>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Bell, OfficeBuilding, Notebook, Clock, Document, InfoFilled } from '@element-plus/icons-vue'
import { notificationApi, type Notification, type NotificationType } from '@/api/notification'
const router = useRouter()
// 状态
const loading = ref(false)
const unreadCount = ref(0)
const notifications = ref<Notification[]>([])
// 轮询定时器
let pollTimer: number | null = null
/**
* 获取未读数量
*/
const fetchUnreadCount = async () => {
try {
const res = await notificationApi.getUnreadCount()
if (res.code === 200 && res.data) {
unreadCount.value = res.data.unread_count
}
} catch (error) {
console.error('获取未读数量失败:', error)
}
}
/**
* 获取通知列表
*/
const fetchNotifications = async () => {
loading.value = true
try {
const res = await notificationApi.getNotifications({ page: 1, page_size: 5 })
if (res.code === 200 && res.data) {
notifications.value = res.data.items
unreadCount.value = res.data.unread_count
}
} catch (error) {
console.error('获取通知列表失败:', error)
} finally {
loading.value = false
}
}
/**
* 弹窗显示时加载数据
*/
const handlePopoverShow = () => {
fetchNotifications()
}
/**
* 标记全部已读
*/
const handleMarkAllRead = async () => {
try {
await notificationApi.markAsRead()
unreadCount.value = 0
notifications.value = notifications.value.map(n => ({ ...n, is_read: true }))
ElMessage.success('已全部标记为已读')
} catch (error) {
ElMessage.error('操作失败')
}
}
/**
* 点击通知项
*/
const handleNotificationClick = async (item: Notification) => {
// 标记已读
if (!item.is_read) {
try {
await notificationApi.markAsRead([item.id])
item.is_read = true
unreadCount.value = Math.max(0, unreadCount.value - 1)
} catch (error) {
console.error('标记已读失败:', error)
}
}
// 根据类型跳转
if (item.related_type === 'course' && item.related_id) {
router.push(`/trainee/course/${item.related_id}`)
} else if (item.related_type === 'position') {
router.push('/trainee/course-center')
} else {
router.push('/user/notifications')
}
}
/**
* 跳转到消息中心
*/
const goToNotificationCenter = () => {
router.push('/user/notifications')
}
/**
* 获取通知类型图标
*/
const getTypeIcon = (type: NotificationType) => {
const iconMap: Record<NotificationType, any> = {
position_assign: OfficeBuilding,
course_assign: Notebook,
exam_remind: Clock,
task_assign: Document,
system: InfoFilled
}
return iconMap[type] || InfoFilled
}
/**
* 获取通知类型样式类
*/
const getTypeClass = (type: NotificationType) => {
const classMap: Record<NotificationType, string> = {
position_assign: 'type-position',
course_assign: 'type-course',
exam_remind: 'type-exam',
task_assign: 'type-task',
system: 'type-system'
}
return classMap[type] || 'type-system'
}
/**
* 格式化时间
*/
const formatTime = (time: string) => {
const date = new Date(time)
const now = new Date()
const diff = now.getTime() - date.getTime()
const minutes = Math.floor(diff / (1000 * 60))
const hours = Math.floor(diff / (1000 * 60 * 60))
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
if (minutes < 1) return '刚刚'
if (minutes < 60) return `${minutes}分钟前`
if (hours < 24) return `${hours}小时前`
if (days < 7) return `${days}天前`
return date.toLocaleDateString()
}
// 组件挂载
onMounted(() => {
fetchUnreadCount()
// 每30秒轮询一次未读数量
pollTimer = window.setInterval(fetchUnreadCount, 30000)
})
// 组件卸载
onUnmounted(() => {
if (pollTimer) {
clearInterval(pollTimer)
}
})
</script>
<style lang="scss" scoped>
.notification-btn {
position: relative;
padding: 8px;
border-radius: 8px;
transition: all 0.3s;
&:hover {
background-color: #f5f7fa;
}
.notification-badge {
position: absolute;
top: 2px;
right: 2px;
:deep(.el-badge__content) {
font-size: 10px;
height: 16px;
line-height: 16px;
padding: 0 4px;
}
}
}
.notification-panel {
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid #ebeef5;
.title {
font-size: 16px;
font-weight: 600;
color: #303133;
}
}
.notification-list {
max-height: 400px;
overflow-y: auto;
margin: 8px 0;
.notification-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
position: relative;
&:hover {
background-color: #f5f7fa;
}
&.unread {
background-color: rgba(102, 126, 234, 0.05);
}
.item-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.type-position {
background: rgba(103, 194, 58, 0.1);
color: #67c23a;
}
&.type-course {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
&.type-exam {
background: rgba(230, 162, 60, 0.1);
color: #e6a23c;
}
&.type-task {
background: rgba(144, 147, 153, 0.1);
color: #909399;
}
&.type-system {
background: rgba(64, 158, 255, 0.1);
color: #409eff;
}
}
.item-content {
flex: 1;
min-width: 0;
.item-title {
font-size: 14px;
font-weight: 500;
color: #303133;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-desc {
font-size: 12px;
color: #909399;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.item-time {
font-size: 11px;
color: #c0c4cc;
}
}
.unread-dot {
position: absolute;
top: 16px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #f56c6c;
}
}
}
.panel-footer {
text-align: center;
padding-top: 12px;
border-top: 1px solid #ebeef5;
}
}
</style>
<style>
/* 全局样式覆盖 popover */
.notification-popover {
padding: 16px !important;
}
</style>

457
frontend/src/components/TextChat.vue Normal file
View File

@@ -0,0 +1,457 @@
<template>
<div class="text-chat-wrapper">
<!-- 场景背景卡片（可折叠） -->
<el-card v-if="currentScene" class="scene-context" shadow="never">
<template #header>
<div class="card-header">
<span>场景背景与目标</span>
<el-button
text
:icon="showContext ? ArrowUp : ArrowDown"
@click="showContext = !showContext"
>
{{ showContext ? '收起' : '展开' }}
</el-button>
</div>
</template>
<div v-show="showContext" class="context-content">
<div class="context-section">
<h4>场景背景</h4>
<p>{{ currentScene.background }}</p>
</div>
<div class="context-section">
<h4>练习目标</h4>
<ul>
<li v-for="(obj, index) in currentScene.objectives" :key="index">
{{ obj }}
</li>
</ul>
</div>
<div v-if="currentScene.keywords && currentScene.keywords.length > 0" class="context-section">
<h4>关键词</h4>
<div class="keywords">
<el-tag
v-for="keyword in currentScene.keywords"
:key="keyword"
type="info"
size="small"
effect="plain"
>
{{ keyword }}
</el-tag>
</div>
</div>
</div>
</el-card>
<!-- 消息列表 -->
<div class="message-container" ref="messageContainerRef">
<div
v-for="message in messageList"
:key="message.id"
:class="['message-item', message.role]"
>
<div class="message-avatar">
<el-avatar
:src="message.role === 'user' ? userAvatar : botAvatar"
:size="36"
>
<el-icon v-if="message.role === 'user'"><User /></el-icon>
<el-icon v-else><Service /></el-icon>
</el-avatar>
</div>
<div class="message-bubble">
<div class="message-content" v-html="formatContent(message.content)"></div>
<div v-if="message.loading" class="typing-indicator">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- 空状态 -->
<div v-if="messageList.length === 0" class="empty-state">
<el-empty description="开始您的陪练对话吧！" />
</div>
</div>
<!-- 输入区域 -->
<div class="input-area">
<div class="input-wrapper">
<el-input
v-model="userInput"
type="textarea"
:autosize="{ minRows: 1, maxRows: 4 }"
placeholder="输入您的回复..."
:disabled="isLoading"
@keydown.ctrl.enter="handleSend"
class="message-input"
/>
<div class="input-actions">
<div class="action-buttons">
<!-- 切换到语音模式 -->
<el-button
type="info"
:icon="Microphone"
@click="switchToVoiceMode"
>
切换语音对话
</el-button>
<!-- 中断按钮 -->
<el-button
v-if="isLoading"
type="warning"
:icon="VideoPlay"
@click="handleAbort"
>
中断
</el-button>
<!-- 发送按钮 -->
<el-button
v-else
type="primary"
:icon="Position"
:disabled="!userInput.trim()"
@click="handleSend"
>
发送
</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, nextTick, watch, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { usePracticeStore } from '@/stores/practiceStore'
import { ElMessage } from 'element-plus'
import {
ArrowUp,
ArrowDown,
User,
Service,
Position,
VideoPlay,
Microphone
} from '@element-plus/icons-vue'
// Store
const practiceStore = usePracticeStore()
const { currentScene, messageList, isLoading } = storeToRefs(practiceStore)
// Refs
const userInput = ref<string>('')
const showContext = ref<boolean>(true)
const messageContainerRef = ref<HTMLElement | null>(null)
// 生命周期
onMounted(() => {
// 移动端默认收起场景信息
if (window.innerWidth <= 768) {
showContext.value = false
}
})
// 计算属性
const userAvatar = computed(() => {
// TODO: 从用户信息中获取头像
return ''
})
const botAvatar = computed(() => {
// TODO: 从Bot配置中获取头像
return ''
})
// 方法
const handleSend = async () => {
if (!userInput.value.trim()) {
return
}
const message = userInput.value.trim()
userInput.value = ''
await practiceStore.sendMessage(message)
// 滚动到底部
nextTick(() => {
scrollToBottom()
})
}
const handleAbort = () => {
practiceStore.abortChat()
}
const switchToVoiceMode = () => {
practiceStore.setChatModel('voice')
ElMessage.info('已切换到语音对话模式')
}
const formatContent = (content: string): string => {
// 简单的换行处理
return content.replace(/\n/g, '<br />')
}
const scrollToBottom = () => {
if (messageContainerRef.value) {
messageContainerRef.value.scrollTop = messageContainerRef.value.scrollHeight
}
}
// 监听消息列表变化，自动滚动
watch(() => messageList.value.length, () => {
nextTick(() => {
scrollToBottom()
})
})
</script>
<style lang="scss" scoped>
.text-chat-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #f5f7fa;
.scene-context {
margin: 16px;
border-radius: 8px;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.context-content {
.context-section {
margin-bottom: 16px;
&:last-child {
margin-bottom: 0;
}
h4 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: #303133;
}
p {
margin: 0;
line-height: 1.6;
color: #606266;
}
ul {
margin: 0;
padding-left: 20px;
li {
line-height: 1.8;
color: #606266;
}
}
.keywords {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
}
}
}
.message-container {
flex: 1;
overflow-y: auto;
padding: 20px;
.message-item {
display: flex;
margin-bottom: 20px;
gap: 12px;
animation: slideIn 0.3s ease-out;
&.user {
flex-direction: row-reverse;
.message-bubble {
background: #409eff;
color: white;
}
}
&.assistant {
flex-direction: row;
.message-bubble {
background: white;
color: #303133;
}
}
.message-avatar {
flex-shrink: 0;
}
.message-bubble {
max-width: 70%;
padding: 12px 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
.message-content {
line-height: 1.6;
word-break: break-word;
}
.typing-indicator {
display: flex;
gap: 4px;
margin-top: 8px;
span {
width: 8px;
height: 8px;
background: currentColor;
opacity: 0.3;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
&:nth-child(1) { animation-delay: -0.32s; }
&:nth-child(2) { animation-delay: -0.16s; }
}
}
}
}
.empty-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
}
.input-area {
flex-shrink: 0;
background: white;
padding: 16px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
.input-wrapper {
.message-input {
:deep(.el-textarea__inner) {
border-radius: 8px;
resize: none;
}
}
.input-actions {
margin-top: 12px;
.action-buttons {
display: flex;
justify-content: flex-end;
gap: 12px;
}
}
}
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
// 移动端适配
@media (max-width: 768px) {
.text-chat-wrapper {
.scene-context {
margin: 10px;
:deep(.el-card__header) {
padding: 10px 15px;
}
:deep(.el-card__body) {
padding: 15px;
}
}
.message-container {
padding: 10px;
.message-item {
margin-bottom: 16px;
gap: 8px;
.message-avatar {
:deep(.el-avatar) {
width: 32px;
height: 32px;
.el-icon {
font-size: 18px;
}
}
}
.message-bubble {
max-width: 85%;
padding: 10px 14px;
font-size: 15px;
}
}
}
.input-area {
padding: 10px;
.input-wrapper {
.message-input {
margin-bottom: 8px;
:deep(.el-textarea__inner) {
font-size: 16px; // 防止iOS缩放
}
}
.input-actions {
margin-top: 0;
.action-buttons {
.el-button {
padding: 8px 16px;
}
}
}
}
}
}
}
</style>

697
frontend/src/components/VoiceChat.vue Normal file
View File

@@ -0,0 +1,697 @@
<template>
<div class="voice-chat-wrapper">
<!-- 背景模糊效果 -->
<div class="blur-bg"></div>
<!-- 头部：Bot头像和状态（横向紧凑布局） -->
<div class="chat-header">
<div class="avatar-container">
<!-- Bot头像 -->
<el-avatar
:src="botAvatar"
:size="64"
class="bot-avatar"
/>
<!-- 信息区域（名字+状态） -->
<div class="info-area">
<!-- Bot名称 -->
<div class="bot-name">{{ currentScene?.name || 'AI陪练' }}</div>
<!-- 状态动画 -->
<div v-if="connectionStatus === 'listening'" class="status-indicator listening">
<div class="listening-dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="status-text">正在聆听...</div>
</div>
<div v-else-if="connectionStatus === 'speaking'" class="status-indicator speaking">
<div class="speaking-waves">
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
<span class="wave"></span>
</div>
<div class="status-text">AI回复中...</div>
</div>
<div v-else-if="connectionStatus === 'connecting'" class="status-indicator">
<el-icon class="is-loading"><Loading /></el-icon>
<div class="status-text">连接中...</div>
</div>
<div v-else-if="connectionStatus === 'error'" class="status-indicator error">
<el-icon><WarningFilled /></el-icon>
<div class="status-text">连接错误</div>
</div>
</div>
</div>
</div>
<!-- 字幕区域（始终显示） -->
<div class="subtitle-area" ref="subtitleContainer">
<div class="subtitle-list">
<TransitionGroup name="subtitle">
<div
v-for="message in messageList"
:key="message.id"
:class="['subtitle-item', message.role]"
>
<div class="role-label">
{{ message.role === 'user' ? '👤 学员' : '🤖 AI' }}
</div>
<div class="subtitle-content">
{{ message.content }}
<el-icon v-if="message.loading" class="loading-icon"><Loading /></el-icon>
</div>
<div class="subtitle-time">
{{ formatTime(message.timestamp) }}
</div>
</div>
</TransitionGroup>
</div>
</div>
<!-- 场景信息卡片 -->
<div class="scene-info-card" v-if="currentScene">
<div class="scene-objectives">
<div class="objectives-title">练习目标：</div>
<ul>
<li v-for="(objective, index) in currentScene.objectives" :key="index">
{{ objective }}
</li>
</ul>
</div>
</div>
<!-- 底部控制按钮 -->
<div class="control-buttons">
<!-- 保存并查看报告按钮（对话>3轮时显示） -->
<el-button
v-if="messageList.length > 3 && isSessionActive"
class="btn-save-report"
type="success"
size="large"
:icon="Document"
@click="handleSaveAndAnalyze"
>
保存并查看分析报告
</el-button>
<!-- 切换到文本模式 -->
<el-button
class="btn-switch-text"
type="info"
:icon="ChatLineRound"
@click="switchToTextMode"
>
切换文字对话
</el-button>
<!-- 打断AI按钮（AI说话时显示） -->
<el-button
v-if="connectionStatus === 'speaking'"
class="btn-interrupt"
type="warning"
circle
size="large"
:icon="VideoPause"
@click="handleInterrupt"
title="打断AI回复"
/>
<!-- 挂断按钮 -->
<el-button
class="btn-hangup"
type="danger"
circle
size="large"
:icon="PhoneFilled"
@click="handleHangup"
/>
<!-- 重新连接按钮（仅错误时显示） -->
<el-button
v-if="connectionStatus === 'error'"
class="btn-retry"
type="warning"
:icon="RefreshRight"
@click="handleRetry"
>
重新连接
</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { usePracticeStore } from '@/stores/practiceStore'
import { ElMessage } from 'element-plus'
import {
Loading,
WarningFilled,
ChatLineRound,
PhoneFilled,
RefreshRight,
VideoPause,
Document
} from '@element-plus/icons-vue'
// Store
const practiceStore = usePracticeStore()
const {
currentScene,
connectionStatus,
messageList,
isSessionActive
} = storeToRefs(practiceStore)
// Refs
const subtitleContainer = ref<HTMLElement | null>(null)
// 计算属性
const botAvatar = computed(() => {
// 使用 SVG 格式的 Bot 头像
return '/bot-avatar.svg'
})
// 方法
const switchToTextMode = () => {
practiceStore.setChatModel('text')
ElMessage.info('已切换到文字对话模式')
}
const handleHangup = () => {
practiceStore.disconnectVoice()
// 返回上一页或陪练中心
window.history.back()
}
const handleRetry = () => {
practiceStore.connectVoice()
}
const handleInterrupt = () => {
practiceStore.interruptAI()
ElMessage.info('已打断AI回复')
}
const handleSaveAndAnalyze = async () => {
await practiceStore.endSessionAndAnalyze()
}
const formatTime = (timestamp: number): string => {
const date = new Date(timestamp)
return date.toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
})
}
// 自动滚动到最新字幕
watch(() => messageList.value.length, () => {
nextTick(() => {
if (subtitleContainer.value) {
subtitleContainer.value.scrollTop = subtitleContainer.value.scrollHeight
}
})
})
// 生命周期
onMounted(() => {
// ⚠️ 不在这里调用connectVoice()
// 因为ai-practice.vue的setChatModel('voice')已经会触发连接
// 避免重复连接导致两次AI回复
console.log('[VoiceChat] 组件已挂载，等待连接...')
})
onUnmounted(() => {
// 页面卸载时断开连接
practiceStore.disconnectVoice()
})
</script>
<style lang="scss" scoped>
.voice-chat-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
.blur-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(20px);
background: rgba(0, 0, 0, 0.1);
z-index: 0;
}
.chat-header {
flex: 0 0 auto;
padding: 16px 20px;
z-index: 1;
.avatar-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
.bot-avatar {
flex-shrink: 0;
border: 3px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.info-area {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
.bot-name {
color: white;
font-size: 18px;
font-weight: 600;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.status-indicator {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.status-text {
color: white;
font-size: 13px;
font-weight: 500;
}
// 聆听动画
&.listening .listening-dots {
display: flex;
gap: 4px;
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #67c23a;
animation: bounce 1.4s infinite ease-in-out;
&:nth-child(1) { animation-delay: -0.32s; }
&:nth-child(2) { animation-delay: -0.16s; }
&:nth-child(3) { animation-delay: 0s; }
&:nth-child(4) { animation-delay: 0.16s; }
}
}
// 说话动画
&.speaking .speaking-waves {
display: flex;
gap: 3px;
align-items: flex-end;
height: 20px;
.wave {
width: 3px;
background: #409eff;
border-radius: 2px;
animation: wave 1.2s infinite ease-in-out;
&:nth-child(1) { animation-delay: -0.4s; }
&:nth-child(2) { animation-delay: -0.3s; }
&:nth-child(3) { animation-delay: -0.2s; }
&:nth-child(4) { animation-delay: -0.1s; }
&:nth-child(5) { animation-delay: 0s; }
}
}
// 错误状态
&.error {
color: #f56c6c;
.el-icon {
font-size: 18px;
}
}
.el-icon.is-loading {
font-size: 18px;
}
}
}
}
}
.subtitle-area {
flex: 1;
overflow-y: auto;
padding: 20px;
z-index: 1;
margin-bottom: 100px;
max-width: 100%;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.subtitle-list {
display: flex;
flex-direction: column;
gap: 16px;
.subtitle-item {
padding: 16px;
border-radius: 12px;
backdrop-filter: blur(10px);
animation: slideIn 0.3s ease-out;
max-width: 100%;
box-sizing: border-box;
&.user {
background: rgba(64, 158, 255, 0.25);
border-left: 4px solid #409eff;
}
&.assistant {
background: rgba(103, 194, 58, 0.25);
border-left: 4px solid #67c23a;
}
.role-label {
color: white;
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
opacity: 0.9;
}
.subtitle-content {
color: white;
font-size: 16px;
line-height: 1.6;
word-break: break-word;
.loading-icon {
margin-left: 8px;
animation: spin 1s linear infinite;
}
}
.subtitle-time {
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
margin-top: 6px;
text-align: right;
}
}
}
}
.scene-info-card {
position: absolute;
top: 20px;
right: 20px;
max-width: 280px;
padding: 16px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 12px;
z-index: 2;
.scene-objectives {
color: white;
.objectives-title {
font-weight: 600;
margin-bottom: 8px;
font-size: 14px;
}
ul {
margin: 0;
padding-left: 20px;
li {
font-size: 13px;
line-height: 1.6;
margin-bottom: 4px;
}
}
}
}
.control-buttons {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20px;
z-index: 2;
.btn-switch-text {
padding: 12px 24px;
font-size: 15px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.4);
color: white;
&:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.6);
}
}
.btn-interrupt {
width: 70px;
height: 70px;
border-radius: 50%;
font-size: 28px;
box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
box-shadow: 0 10px 28px rgba(230, 162, 60, 0.6);
}
&:active {
transform: scale(0.95);
}
}
.btn-hangup {
width: 80px;
height: 80px;
border-radius: 50%;
font-size: 32px;
box-shadow: 0 8px 24px rgba(245, 108, 108, 0.4);
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
box-shadow: 0 12px 32px rgba(245, 108, 108, 0.6);
}
&:active {
transform: scale(0.95);
}
}
.btn-retry {
padding: 12px 24px;
font-size: 15px;
border-radius: 24px;
animation: pulse 2s infinite;
}
.btn-save-report {
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
border-radius: 24px;
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
border: none;
color: white;
box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(103, 194, 58, 0.6);
}
&:active {
transform: translateY(0);
}
}
}
}
// 动画
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
@keyframes wave {
0%, 100% {
height: 8px;
}
50% {
height: 20px;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
// 过渡动画
.subtitle-enter-active,
.subtitle-leave-active {
transition: all 0.3s ease;
}
.subtitle-enter-from {
opacity: 0;
transform: translateY(10px);
}
.subtitle-leave-to {
opacity: 0;
transform: translateY(-10px);
}
// 移动端适配
@media (max-width: 768px) {
.voice-chat-wrapper {
.chat-header {
padding: 12px 16px;
.avatar-container {
.bot-avatar {
width: 48px !important;
height: 48px !important;
:deep(.el-avatar) {
width: 48px;
height: 48px;
}
}
.info-area {
.bot-name { font-size: 16px; }
}
}
}
.scene-info-card {
display: none; // 移动端隐藏场景卡片，避免遮挡
}
.subtitle-area {
padding: 16px;
margin-bottom: 160px; // 留出更多底部空间
.subtitle-list .subtitle-item {
font-size: 15px;
padding: 12px;
}
}
.control-buttons {
bottom: calc(30px + env(safe-area-inset-bottom));
width: 100%;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
.btn-switch-text {
padding: 10px 16px;
font-size: 13px;
height: 44px;
}
.btn-hangup {
width: 64px;
height: 64px;
font-size: 26px;
}
.btn-interrupt {
width: 56px;
height: 56px;
font-size: 22px;
}
// 移动端将保存报告按钮移到上方或全宽显示
.btn-save-report {
position: absolute;
bottom: 90px;
width: auto;
min-width: 200px;
padding: 10px 20px;
font-size: 14px;
}
}
}
}
</style>

49
frontend/src/components/common/EnvironmentBadge.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div class="env-badge" :class="envClass" v-if="showBadge">
<span>{{ envText }}</span>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { env } from '@/config/env'
const showBadge = computed(() => !env.isProduction)
const envClass = computed(() => ({
'env-development': env.isDevelopment,
'env-staging': env.isStaging
}))
const envText = computed(() => {
if (env.isDevelopment) return '开发环境'
if (env.isStaging) return '预发布'
return ''
})
</script>
<style scoped>
.env-badge {
position: fixed;
top: 10px;
right: 10px;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
z-index: 9999;
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.env-development {
background-color: #f56c6c;
}
.env-staging {
background-color: #e6a23c;
}
.env-badge:hover {
opacity: 0.8;
cursor: pointer;
}
</style>

41
frontend/src/components/common/README.md Normal file
View File

@@ -0,0 +1,41 @@
# 公共组件
## EnvironmentBadge - 环境标识徽章
用于在非生产环境下显示当前环境标识的组件。
### 功能特性
- 自动检测当前环境类型
- 仅在非生产环境显示
- 支持开发环境和预发布环境的不同样式
- 固定定位在页面右上角
### 使用方法
```vue
<template>
<div>
<EnvironmentBadge />
<!-- 其他内容 -->
</div>
</template>
<script setup>
import EnvironmentBadge from '@/components/common/EnvironmentBadge.vue'
</script>
```
### 环境配置
组件会根据 `VITE_APP_ENV` 环境变量显示不同的标识：
- `development`: 显示红色"开发环境"徽章
- `staging`: 显示黄色"预发布"徽章
- `production`: 不显示徽章
### 样式说明
- 使用固定定位，不会影响页面布局
- 具有较高的 z-index 确保始终在最上层
- 鼠标悬停时有透明度变化效果