mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 04:33:42 +08:00
integrated openai realtime console
This commit is contained in:
RockYang
130
web/src/components/Calling.vue
Normal file
130
web/src/components/Calling.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<!--拨号组件-->
|
||||
<el-container class="calling-container" :style="{height: height}">
|
||||
<div class="phone-container">
|
||||
<div class="signal"></div>
|
||||
<div class="signal"></div>
|
||||
<div class="signal"></div>
|
||||
<div class="phone"></div>
|
||||
</div>
|
||||
<div class="status-text">{{ text }}</div>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
|
||||
const fullText = "正在接通中...";
|
||||
const text = ref("")
|
||||
let index = 0;
|
||||
const props = defineProps({
|
||||
height: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
}
|
||||
})
|
||||
|
||||
function typeText() {
|
||||
if (index < fullText.length) {
|
||||
text.value += fullText[index];
|
||||
index++;
|
||||
setTimeout(typeText, 300); // 每300毫秒显示一个字
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
text.value = '';
|
||||
index = 0;
|
||||
typeText();
|
||||
}, 1000); // 等待1秒后重新开始
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
typeText()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
|
||||
.calling-container {
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: Arial, sans-serif;
|
||||
width 100vw
|
||||
|
||||
.phone-container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.phone {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: #00ffcc;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
mask-size: cover;
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
-webkit-mask-size: cover;
|
||||
animation: shake 0.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.signal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 2px dashed #00ffcc;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: signal 2s linear infinite;
|
||||
}
|
||||
|
||||
.signal:nth-child(2) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.signal:nth-child(3) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #00ffcc;
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
height: 1.2em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
25% { transform: translate(-52%, -48%) rotate(-5deg); }
|
||||
75% { transform: translate(-48%, -52%) rotate(5deg); }
|
||||
}
|
||||
|
||||
@keyframes signal {
|
||||
0% {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
161
web/src/components/Conversation .vue
Normal file
161
web/src/components/Conversation .vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<!--语音通话组件-->
|
||||
<div class="video-call-container" :style="{height: height}">
|
||||
<div class="wave-container">
|
||||
<div class="wave-animation">
|
||||
<div v-for="i in 5" :key="i" class="wave-ellipse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 其余部分保持不变 -->
|
||||
<div class="voice-indicators">
|
||||
<div class="voice-indicator left">
|
||||
<canvas ref="canvasClientRef" width="600" height="200"></canvas>
|
||||
</div>
|
||||
<div class="voice-indicator right">
|
||||
<canvas ref="canvasServerRef" width="600" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-controls">
|
||||
<button class="call-button hangup" @click="hangUp">
|
||||
<i class="iconfont icon-hung-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, onUnmounted, ref} from "vue";
|
||||
|
||||
const leftVoiceActive = ref(false);
|
||||
const rightVoiceActive = ref(false);
|
||||
const props = defineProps({
|
||||
height: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
}
|
||||
})
|
||||
const emits = defineEmits(['hangUp']);
|
||||
|
||||
const animateVoice = () => {
|
||||
leftVoiceActive.value = Math.random() > 0.5;
|
||||
rightVoiceActive.value = Math.random() > 0.5;
|
||||
};
|
||||
|
||||
let voiceInterval;
|
||||
|
||||
onMounted(() => {
|
||||
voiceInterval = setInterval(animateVoice, 500);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(voiceInterval);
|
||||
});
|
||||
|
||||
const hangUp = () => {
|
||||
console.log('Call hung up');
|
||||
emits('hangUp')
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
|
||||
.video-call-container {
|
||||
background: linear-gradient(to right, #2c3e50, #4a5568, #6b46c1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
width 100vw
|
||||
|
||||
.wave-container {
|
||||
padding 3rem
|
||||
.wave-animation {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.wave-ellipse {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: white;
|
||||
border-radius: 20px;
|
||||
animation: wave 0.8s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(odd) {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(even) {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
0%, 100% {
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(4) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.wave-ellipse:nth-child(5) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.call-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 3rem;
|
||||
padding 3rem
|
||||
|
||||
.call-button {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
.iconfont {
|
||||
font-size 24px
|
||||
}
|
||||
}
|
||||
.hangup {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.answer {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-container class="chat-file-list">
|
||||
<div v-for="file in fileList">
|
||||
<div v-for="file in fileList" :key="file.url">
|
||||
<div class="image" v-if="isImage(file.ext)">
|
||||
<el-image :src="file.url" fit="cover"/>
|
||||
<div class="action">
|
||||
|
||||
Reference in New Issue
Block a user