mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-02-13 18:04:26 +08:00
merge v4.1.6
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>
|
||||
@@ -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">
|
||||
|
||||
@@ -70,7 +70,6 @@ const props = defineProps({
|
||||
});
|
||||
const emits = defineEmits(['selected']);
|
||||
const show = ref(false)
|
||||
const fileList = ref([])
|
||||
const scrollbarRef = ref(null)
|
||||
const fileData = reactive({
|
||||
items:[],
|
||||
@@ -116,7 +115,7 @@ const afterRead = (file) => {
|
||||
formData.append('file', file.file, file.name);
|
||||
// 执行上传操作
|
||||
httpPost('/api/upload', formData).then((res) => {
|
||||
fileList.value.unshift(res.data)
|
||||
fileData.items.unshift(res.data)
|
||||
ElMessage.success({message: "上传成功", duration: 500})
|
||||
}).catch((e) => {
|
||||
ElMessage.error('图片上传失败:' + e.message)
|
||||
@@ -125,7 +124,7 @@ const afterRead = (file) => {
|
||||
|
||||
const removeFile = (file) => {
|
||||
httpGet('/api/upload/remove?id=' + file.id).then(() => {
|
||||
fileList.value = removeArrayItem(fileList.value, file, (v1, v2) => {
|
||||
fileData.items = removeArrayItem(fileData.items, file, (v1, v2) => {
|
||||
return v1.id === v2.id
|
||||
})
|
||||
ElMessage.success("文件删除成功！")
|
||||
|
||||
335
web/src/components/RealtimeConversation.vue
Normal file
335
web/src/components/RealtimeConversation.vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<template>
|
||||
<el-container class="realtime-conversation" :style="{height: height}">
|
||||
<!-- connection animation -->
|
||||
<el-container class="connection-container" v-if="!isConnected">
|
||||
<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">{{ connectingText }}</div>
|
||||
<audio ref="backgroundAudio" loop>
|
||||
<source src="/medias/calling.mp3" type="audio/mp3" />
|
||||
您的浏览器不支持音频元素。
|
||||
</audio>
|
||||
<audio ref="hangUpAudio">
|
||||
<source src="/medias/hang-up.mp3" type="audio/mp3" />
|
||||
您的浏览器不支持音频元素。
|
||||
</audio>
|
||||
</el-container>
|
||||
|
||||
<!-- conversation body -->
|
||||
<div class="conversation-container" v-else>
|
||||
<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="clientCanvasRef"></canvas>
|
||||
</div>
|
||||
<div class="voice-indicator right">
|
||||
<canvas ref="serverCanvasRef"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="call-controls">
|
||||
<el-tooltip content="长按发送语音" placement="top" effect="light">
|
||||
<ripple-button>
|
||||
<button class="call-button answer" @mousedown="startRecording" @mouseup="stopRecording">
|
||||
<i class="iconfont icon-mic-bold"></i>
|
||||
</button>
|
||||
</ripple-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="结束通话" placement="top" effect="light">
|
||||
<button class="call-button hangup" @click="hangUp">
|
||||
<i class="iconfont icon-hung-up"></i>
|
||||
</button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-container>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import RippleButton from "@/components/ui/RippleButton.vue";
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { RealtimeClient } from '@openai/realtime-api-beta';
|
||||
import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js';
|
||||
import { instructions } from '@/utils/conversation_config.js';
|
||||
import { WavRenderer } from '@/utils/wav_renderer';
|
||||
import {showMessageError} from "@/utils/dialog";
|
||||
import {getUserToken} from "@/store/session";
|
||||
|
||||
// eslint-disable-next-line no-unused-vars,no-undef
|
||||
const props = defineProps({
|
||||
height: {
|
||||
type: String,
|
||||
default: '100vh'
|
||||
}
|
||||
})
|
||||
// eslint-disable-next-line no-undef
|
||||
const emits = defineEmits(['close']);
|
||||
|
||||
/********************** connection animation code *************************/
|
||||
const fullText = "正在接通中...";
|
||||
const connectingText = ref("")
|
||||
let index = 0;
|
||||
const typeText = () => {
|
||||
if (index < fullText.length) {
|
||||
connectingText.value += fullText[index];
|
||||
index++;
|
||||
setTimeout(typeText, 200); // 每300毫秒显示一个字
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
connectingText.value = '';
|
||||
index = 0;
|
||||
typeText();
|
||||
}, 1000); // 等待1秒后重新开始
|
||||
}
|
||||
}
|
||||
/*************************** end of code ****************************************/
|
||||
|
||||
/********************** conversation process code ***************************/
|
||||
const leftVoiceActive = ref(false);
|
||||
const rightVoiceActive = ref(false);
|
||||
|
||||
const animateVoice = () => {
|
||||
leftVoiceActive.value = Math.random() > 0.5;
|
||||
rightVoiceActive.value = Math.random() > 0.5;
|
||||
};
|
||||
|
||||
|
||||
|
||||
const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
|
||||
const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
|
||||
let host = process.env.VUE_APP_WS_HOST
|
||||
if (host === '') {
|
||||
if (location.protocol === 'https:') {
|
||||
host = 'wss://' + location.host;
|
||||
} else {
|
||||
host = 'ws://' + location.host;
|
||||
}
|
||||
}
|
||||
const client = ref(
|
||||
new RealtimeClient({
|
||||
url: `${host}/api/realtime`,
|
||||
apiKey: getUserToken(),
|
||||
dangerouslyAllowAPIKeyInBrowser: true,
|
||||
})
|
||||
);
|
||||
// // Set up client instructions and transcription
|
||||
client.value.updateSession({
|
||||
instructions: instructions,
|
||||
turn_detection: null,
|
||||
input_audio_transcription: { model: 'whisper-1' },
|
||||
voice: 'alloy',
|
||||
});
|
||||
|
||||
// set voice wave canvas
|
||||
const clientCanvasRef = ref(null);
|
||||
const serverCanvasRef = ref(null);
|
||||
const isConnected = ref(false);
|
||||
const isRecording = ref(false);
|
||||
const backgroundAudio = ref(null);
|
||||
const hangUpAudio = ref(null);
|
||||
function sleep(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
const connect = async () => {
|
||||
if (isConnected.value) {
|
||||
return
|
||||
}
|
||||
// 播放背景音乐
|
||||
if (backgroundAudio.value) {
|
||||
backgroundAudio.value.play().catch(error => {
|
||||
console.error('播放失败，可能是浏览器的自动播放策略导致的:', error);
|
||||
});
|
||||
}
|
||||
// 模拟拨号延时
|
||||
await sleep(3000)
|
||||
try {
|
||||
await client.value.connect();
|
||||
await wavRecorder.value.begin();
|
||||
await wavStreamPlayer.value.connect();
|
||||
console.log("对话连接成功！")
|
||||
if (!client.value.isConnected()) {
|
||||
return
|
||||
}
|
||||
|
||||
isConnected.value = true;
|
||||
backgroundAudio.value?.pause()
|
||||
backgroundAudio.value.currentTime = 0
|
||||
client.value.sendUserMessageContent([
|
||||
{
|
||||
type: 'input_text',
|
||||
text: '你好，我是极客学长!',
|
||||
},
|
||||
]);
|
||||
if (client.value.getTurnDetectionType() === 'server_vad') {
|
||||
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
};
|
||||
|
||||
// 开始语音输入
|
||||
const startRecording = async () => {
|
||||
if (isRecording.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isRecording.value = true;
|
||||
try {
|
||||
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
|
||||
if (trackSampleOffset?.trackId) {
|
||||
const { trackId, offset } = trackSampleOffset;
|
||||
client.value.cancelResponse(trackId, offset);
|
||||
}
|
||||
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
};
|
||||
|
||||
// 结束语音输入
|
||||
const stopRecording = async () => {
|
||||
try {
|
||||
isRecording.value = false;
|
||||
await wavRecorder.value.pause();
|
||||
client.value.createResponse();
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
};
|
||||
|
||||
// const changeTurnEndType = async (value) => {
|
||||
// if (value === 'none' && wavRecorder.value.getStatus() === 'recording') {
|
||||
// await wavRecorder.value.pause();
|
||||
// }
|
||||
// client.value.updateSession({
|
||||
// turn_detection: value === 'none' ? null : { type: 'server_vad' },
|
||||
// });
|
||||
// if (value === 'server_vad' && client.value.isConnected()) {
|
||||
// await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
|
||||
// }
|
||||
// canPushToTalk.value = value === 'none';
|
||||
// };
|
||||
|
||||
// 初始化 WaveRecorder 组件和 RealtimeClient 事件处理
|
||||
const initialize = async () => {
|
||||
// Set up render loops for the visualization canvas
|
||||
let isLoaded = true;
|
||||
const render = () => {
|
||||
if (isLoaded) {
|
||||
if (clientCanvasRef.value) {
|
||||
const canvas = clientCanvasRef.value;
|
||||
if (!canvas.width || !canvas.height) {
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
}
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
const result = wavRecorder.value.recording
|
||||
? wavRecorder.value.getFrequencies('voice')
|
||||
: { values: new Float32Array([0]) };
|
||||
WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8);
|
||||
}
|
||||
}
|
||||
if (serverCanvasRef.value) {
|
||||
const canvas = serverCanvasRef.value;
|
||||
if (!canvas.width || !canvas.height) {
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
}
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (ctx) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
const result = wavStreamPlayer.value.analyser
|
||||
? wavStreamPlayer.value.getFrequencies('voice')
|
||||
: { values: new Float32Array([0]) };
|
||||
WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
};
|
||||
render();
|
||||
|
||||
client.value.on('error', (event) => {
|
||||
showMessageError(event.error)
|
||||
});
|
||||
|
||||
client.value.on('realtime.event', (re) => {
|
||||
if (re.event.type === 'error') {
|
||||
showMessageError(re.event.error)
|
||||
}
|
||||
});
|
||||
|
||||
client.value.on('conversation.interrupted', async () => {
|
||||
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
|
||||
if (trackSampleOffset?.trackId) {
|
||||
const { trackId, offset } = trackSampleOffset;
|
||||
client.value.cancelResponse(trackId, offset);
|
||||
}
|
||||
});
|
||||
|
||||
client.value.on('conversation.updated', async ({ item, delta }) => {
|
||||
// console.log('item updated', item, delta)
|
||||
if (delta?.audio) {
|
||||
wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const voiceInterval = ref(null);
|
||||
onMounted(() => {
|
||||
initialize()
|
||||
// 启动聊天进行中的动画
|
||||
voiceInterval.value = setInterval(animateVoice, 200);
|
||||
typeText()
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(voiceInterval.value);
|
||||
client.value.reset();
|
||||
});
|
||||
|
||||
// 挂断通话
|
||||
const hangUp = async () => {
|
||||
try {
|
||||
isConnected.value = false
|
||||
// 停止播放拨号音乐
|
||||
if (backgroundAudio.value?.currentTime) {
|
||||
backgroundAudio.value?.pause()
|
||||
backgroundAudio.value.currentTime = 0
|
||||
}
|
||||
// 断开客户端的连接
|
||||
client.value.reset()
|
||||
// 中断语音输入和输出服务
|
||||
await wavRecorder.value.end()
|
||||
await wavStreamPlayer.value.interrupt()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
// 播放挂断音乐
|
||||
hangUpAudio.value?.play()
|
||||
emits('close')
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
defineExpose({ connect,hangUp });
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
|
||||
@import "@/assets/css/realtime.styl"
|
||||
|
||||
</style>
|
||||
@@ -33,7 +33,7 @@
|
||||
{{ threeItem.title }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :index="subItem.index">
|
||||
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
|
||||
<i v-if="subItem.icon" :class="'iconfont icon-'+subItem.icon"></i>
|
||||
{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
@@ -64,8 +64,8 @@ const logo = ref('')
|
||||
|
||||
// 加载系统配置
|
||||
httpGet('/api/admin/config/get?key=system').then(res => {
|
||||
title.value = res.data['admin_title']
|
||||
logo.value = res.data['logo']
|
||||
title.value = res.data.admin_title
|
||||
logo.value = res.data.logo
|
||||
}).catch(e => {
|
||||
ElMessage.error("加载系统配置失败: " + e.message)
|
||||
})
|
||||
@@ -101,7 +101,7 @@ const items = [
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
icon: 'api-key',
|
||||
index: '/admin/apikey',
|
||||
@@ -137,6 +137,16 @@ const items = [
|
||||
index: '/admin/chats',
|
||||
title: '对话管理',
|
||||
},
|
||||
{
|
||||
icon: 'image',
|
||||
index: '/admin/images',
|
||||
title: '绘图管理',
|
||||
},
|
||||
{
|
||||
icon: 'mp3',
|
||||
index: '/admin/medias',
|
||||
title: '音视频管理',
|
||||
},
|
||||
{
|
||||
icon: 'role',
|
||||
index: '/admin/manger',
|
||||
|
||||
102
web/src/components/ui/RippleButton.vue
Normal file
102
web/src/components/ui/RippleButton.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<button
|
||||
class="ripple-button"
|
||||
@mousedown="startRipples"
|
||||
@mouseup="stopRipples"
|
||||
@mouseleave="stopRipples"
|
||||
>
|
||||
<slot></slot>
|
||||
<span
|
||||
v-for="ripple in ripples"
|
||||
:key="ripple.id"
|
||||
class="ripple"
|
||||
:style="getRippleStyle(ripple)"
|
||||
></span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const ripples = ref([]);
|
||||
let rippleCount = 0;
|
||||
let animationId;
|
||||
|
||||
const startRipples = (event) => {
|
||||
const button = event.currentTarget;
|
||||
const rect = button.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
// const x = event.clientX - rect.left;
|
||||
// const y = event.clientY - rect.top;
|
||||
const x = rect.right - rect.left - size/2;
|
||||
const y = rect.bottom - rect.top - size/2;
|
||||
|
||||
const createRipple = () => {
|
||||
ripples.value.push({
|
||||
id: rippleCount++,
|
||||
x,
|
||||
y,
|
||||
size: 0,
|
||||
opacity: 0.5
|
||||
});
|
||||
|
||||
if (ripples.value.length > 3) {
|
||||
ripples.value.shift();
|
||||
}
|
||||
};
|
||||
|
||||
const animate = () => {
|
||||
ripples.value.forEach(ripple => {
|
||||
ripple.size += 2;
|
||||
ripple.opacity -= 0.01;
|
||||
});
|
||||
|
||||
ripples.value = ripples.value.filter(ripple => ripple.opacity > 0);
|
||||
|
||||
if (ripples.value.length < 3) {
|
||||
createRipple();
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
createRipple();
|
||||
animate();
|
||||
};
|
||||
|
||||
const stopRipples = () => {
|
||||
cancelAnimationFrame(animationId);
|
||||
ripples.value = [];
|
||||
};
|
||||
|
||||
const getRippleStyle = (ripple) => ({
|
||||
left: `${ripple.x}px`,
|
||||
top: `${ripple.y}px`,
|
||||
width: `${ripple.size}px`,
|
||||
height: `${ripple.size}px`,
|
||||
opacity: ripple.opacity
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="stylus">
|
||||
.ripple-button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
outline: none;
|
||||
margin 0
|
||||
padding 0
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user