weipengfei c3799d8eb7 ss
2023-10-13 17:48:46 +08:00

296 lines
7.6 KiB
Vue

<script setup lang='ts'>
import { computed, reactive, ref, watch } from 'vue'
import { NDropdown, useMessage } from 'naive-ui'
import AvatarComponent from './Avatar.vue'
import TextComponent from './Text.vue'
import { SvgIcon } from '@/components/common'
import { useIconRender } from '@/hooks/useIconRender'
import { t } from '@/locales'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import { copyToClip } from '@/utils/copy'
interface Props {
dateTime?: string
text?: string
mp3?: Array<any>
inversion?: boolean
error?: boolean
loading?: boolean
}
interface Emit {
(ev: 'regenerate'): void
(ev: 'delete'): void
(ev: 'changeNowStatus'): string
}
const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const { isMobile } = useBasicLayout()
const { iconRender } = useIconRender()
const message = useMessage()
const textRef = ref<HTMLElement>()
const asRawText = ref(props.inversion)
const messageRef = ref<HTMLElement>()
const options = computed(() => {
const common = [
{
label: t('chat.copy'),
key: 'copyText',
icon: iconRender({ icon: 'ri:file-copy-2-line' }),
},
{
label: t('common.delete'),
key: 'delete',
icon: iconRender({ icon: 'ri:delete-bin-line' }),
},
]
if (!props.inversion) {
common.unshift({
label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
key: 'toggleRenderType',
icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
})
}
return common
})
function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
switch (key) {
case 'copyText':
handleCopy()
return
case 'toggleRenderType':
asRawText.value = !asRawText.value
return
case 'delete':
emit('delete')
}
}
function handleRegenerate() {
messageRef.value?.scrollIntoView()
emit('regenerate')
}
async function handleCopy() {
try {
await copyToClip(props.text || '')
message.success('复制成功')
}
catch {
message.error('复制失败')
}
}
const playStatus = ref('end')
let playing = 0
let sok = false
async function radioPlay() {
console.log('播放', props.mp3)
audioElements.length = 0
emit('changeNowStatus', 'loding')
const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
sok = true
const promise = () => {
return new Promise((resolve, reject) => {
// 监听WebSocket连接打开事件
socket.onopen = () => {
console.log('socket已连接')
playing = 0
resolve(null)
}
})
}
await promise()
// 监听WebSocket关闭事件
socket.onclose = (event: any) => {
sok = false
console.log('连接已关闭: ', event, sok)
console.log('sok状态', sok);
}
// socket.send(JSON.stringify({
// data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
// }))
socket.send(JSON.stringify({
data: props.text,
data: props.text,
}))
playStatus.value = 'playing'
let i = 0
// 监听WebSocket接收消息事件
socket.onmessage = (event: any) => {
const msg = JSON.parse(event.data)
console.log(i, msg.mp3)
if(msg.key=='false'){
return socket.close();
}
const a = new Audio(msg.mp3)
a.addEventListener('ended', () => {
onAudioEnd()
})
audioElements.push(a)
if (i == 0)
playAudio(i)
i++
}
// for (let i = 0; i < props.mp3.length; i++) {
// const a = new Audio(props.mp3[i])
// a.addEventListener('ended', () => {
// onAudioEnd(i)
// })
// audioElements.push(a)
// }
// playAudio()
}
let playFlag = false
const onAudioEnd = (index: any) => {
console.log('ok', playing)
playing++
playFlag = false
if (playing < audioElements.length) {
playFlag = true
audioElements[playing].play()
emit('changeNowStatus', 'playing')
}
else {
playStatus.value = 'end';
emit('changeNowStatus', 'input')
}
}
// 创建音频对象的数组
const audioElements = reactive([])
// 播放音频
const playAudio = (playIndex: any) => {
// for (let i = 0; i < audioElements.length; i++)
audioElements[0].play()
emit('changeNowStatus', 'playing')
}
watch(() => audioElements.length, (newVal, oldVal) => {
if (playStatus.value == 'pause')
return
if (newVal > playing && playFlag == false && newVal > 0) {
audioElements[playing].play()
playStatus.value = 'playing'
}
})
let pauseIndex = -1
// 暂停音频
const pauseAudio = () => {
pauseIndex = playing + 0
playStatus.value = 'pause'
emit('changeNowStatus', 'input')
for (let i = 0; i < audioElements.length; i++)
audioElements[i].pause()
}
const noPauseAudio = () => {
playStatus.value = 'playing'
emit('changeNowStatus', 'playing')
audioElements[pauseIndex].play()
pauseIndex = -1
}
</script>
<template>
<div
ref="messageRef"
class="flex w-full mb-6 overflow-hidden"
:class="[{ 'flex-row-reverse': inversion }]"
>
<div
class="flex items-center justify-center flex-shrink-0 h-8 overflow-hidden rounded-full basis-8"
:class="[inversion ? 'ml-2' : 'mr-2']"
>
<AvatarComponent :image="inversion" />
</div>
<div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
<p class="text-xs text-[#b4bbc4]" :class="[inversion ? 'text-right' : 'text-left']">
{{ dateTime }}
</p>
<div
class=" items-end gap-1 mt-2"
:class="[inversion ? 'flex-row-reverse' : 'flex-row']"
>
<TextComponent
ref="textRef"
:inversion="inversion"
:error="error"
:text="text"
:loading="loading"
:as-raw-text="asRawText"
/>
<div class="flex-col btn">
<button
v-if="!inversion && sok == false && playStatus == 'end'"
class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
@click="radioPlay"
>
播放
<!-- <SvgIcon icon="ri:restart-line" /> -->
</button>
<button
v-if="!inversion && playStatus == 'playing'"
class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
@click="pauseAudio"
>
暂停
<!-- <SvgIcon icon="ri:restart-line" /> -->
</button>
<button
v-if="!inversion && playStatus == 'pause'"
class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
@click="noPauseAudio"
>
继续
<!-- <SvgIcon icon="ri:restart-line" /> -->
</button>
<!-- <button
v-if="!inversion"
class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
@click="handleRegenerate"
>
<SvgIcon icon="ri:restart-line" />
</button> -->
<NDropdown
v-if="!inversion"
:trigger="isMobile ? 'click' : 'hover'"
:placement="!inversion ? 'right' : 'left'"
:options="options"
@select="handleSelect"
>
<button class="transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200">
<SvgIcon icon="ri:more-2-fill" />
</button>
</NDropdown>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.btn{
padding: 10px;
}
</style>