From 1622a4d80dd86d0fde35af6908937f9be670fee3 Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期二, 17 十二月 2024 10:13:00 +0800 Subject: [PATCH] 停止生成 --- src/components/chat/components/playBar/PlayBar.vue | 76 +++++++++++++++++++++++++++---------- 1 files changed, 55 insertions(+), 21 deletions(-) diff --git a/src/components/chat/components/playBar/PlayBar.vue b/src/components/chat/components/playBar/PlayBar.vue index c448f23..673813b 100644 --- a/src/components/chat/components/playBar/PlayBar.vue +++ b/src/components/chat/components/playBar/PlayBar.vue @@ -2,7 +2,7 @@ <div class="playInput hl_input rounded-[22px] input-border input-shadow"> <!-- 搴旂敤鍦烘櫙 --> <div class="application-scenarios absolute bottom-[114%] left-4"> - <div class="flex-items-center space-x-2"> + <div class="flex-items-center space-x-2" :class="isHome ? 'set-next-group-type' : ''"> <div class="border border-gray-400 border-solid h-8 flex-items-center px-3 py-2 rounded-2xl cursor-pointer space-x-1 hover:bg-[#cae3ff]" :class="{ 'bg-[#c5e0ff]': activeGroupType === item, '!text-[#1c86ff]': activeGroupType === item }" @@ -65,8 +65,8 @@ class="absolute rounded-md bg-white border border-solid border-gray-400 py-2 z-10" :style="{ left: popUpPosition.left + 'px', bottom: popUpPosition.bottom + 'px' }" > - <div class="font-bold text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">Ctrl+鏁板瓧蹇嵎杈撳叆</div> - <div class="text-gray-400 text-sm text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">{{ inputValue }}</div> + <div class="font-bold text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">Ctrl+鏁板瓧蹇嵎杈撳叆</div> + <div class="text-gray-400 text-nowrap overflow-hidden text-ellipsis max-w-80 mb-1 px-2">{{ inputValue }}</div> <div class="max-w-96 flex flex-col"> <div class="hover:bg-gray-300 py-2 cursor-pointer px-5 text-nowrap overflow-hidden text-ellipsis" @@ -74,7 +74,7 @@ :key="index" @click="similarClick(item)" > - <span class="text-sm text-gray-500 pr-1.5">{{ index + 1 }}</span> + <span class="text-gray-500 pr-1.5">{{ index + 1 }}</span> <template v-if="sentenceSplitMap?.[item.question]"> <template v-for="part in sentenceSplitMap[item.question]"> <span v-if="part.isKeyword" class="text-blue-400 font-bold cursor-pointer">{{ part.partStr }}</span> @@ -94,11 +94,31 @@ <!-- <el-button title="AI璇煶瀵硅瘽" class="cursor-pointer" link style="margin-left: unset" @click="audioChangeWord"> <img src="/static/images/wave/HeadImg.png" class="set-img-icon box-border" /> </el-button> --> + <el-button + title="娓呴櫎" + class="cursor-pointer" + link + style="margin-left: unset" + @click="clearTextarea" + icon="ele-Close" + v-if="inputValue" + > + </el-button> + <el-button class="cursor-pointer" link> + <el-tooltip placement="top" content="鍋滄鐢熸垚" v-if="isTalking"> + <div + class="size-[28px] stop-breathe rounded-full flex-center border-2 border-solid border-black text-black" + @click="emits('stopGenClick')" + > + <span class="ywifont ywicon-jieshu"></span> + </div> + </el-tooltip> - <el-button title="鍙戦��" class="cursor-pointer" link @click="emits('sendClick')"> - <div class="send"> - <img src="/static/images/wave/QueryImg.png" /> - </div> + <el-tooltip v-else placement="top" content="鍙戦��"> + <div class="size-[36px] rounded-full bg-black flex-center" @click="emits('sendClick')"> + <img src="/static/images/wave/QueryImg.png" /> + </div> + </el-tooltip> </el-button> </div> </div> @@ -116,7 +136,6 @@ :isHome="isHome" ref="commonPhrasesRef" @updateCommonChatInput="updateCommonChatInput" - /> </div> </template> @@ -125,7 +144,7 @@ import { onClickOutside } from '@vueuse/core'; import type { InputInstance } from 'element-plus'; import { ElMessage } from 'element-plus'; -import _ from 'lodash'; +import { sortBy } from 'lodash-es'; import getCaretCoordinates from 'textarea-caret'; import { computed, nextTick, ref, toRefs, watch } from 'vue'; import InfoDetail from './InfoDetail.vue'; @@ -133,7 +152,7 @@ import VoicePage from './voicePage/VoicePage.vue'; import { getMetricsNames, querySimilarityHistory } from '/@/api/ai/chat'; import { activeGroupType, groupTypeList, groupTypeMapIcon } from '/@/stores/chatRoom'; -const emits = defineEmits(['sendClick', 'showUpChatClick', 'showDownChatClick']); +const emits = defineEmits(['sendClick', 'showUpChatClick', 'showDownChatClick', 'stopGenClick']); const props = defineProps({ isTalking: Boolean, isHome: Boolean, @@ -208,7 +227,9 @@ onClickOutside(tipEleRef, () => { triggerShow.value = false; }); - +const clearTextarea = () => { + inputValue.value = ''; +}; const inputText = (text) => { nextTick(() => { setTimeout(() => { @@ -316,7 +337,7 @@ }; // 鎸� startIndex 鎺掑簭锛屾秷闄ゅ郊姝や箣闂撮噸鍚堝厓绱� - sentenceMatchList = _.sortBy(sentenceMatchList, (item) => item.startIndex).filter((value, index, array) => { + sentenceMatchList = sortBy(sentenceMatchList, (item) => item.startIndex).filter((value, index, array) => { if (nextIsMerge) { checkNextIsMerge(value, index, array); return false; @@ -454,20 +475,20 @@ //#region ====================== 甯哥敤璇姛鑳� ====================== const commonPhrasesRef = ref(null); -const isMessageBoxVisible = ref(false); // 甯哥敤璇姛鑳界偣鍑� const commonPhrasesClick = () => { isShowPhrase.value = true; }; // 鍖哄煙鍏抽棴甯哥敤璇姛鑳介潰鏉� -onClickOutside(commonPhrasesRef, () => { - const messageBoxElement = document.querySelector('.el-message-box'); - if (messageBoxElement) { - isMessageBoxVisible.value = true; - return; +onClickOutside( + commonPhrasesRef, + () => { + isShowPhrase.value = false; + }, + { + ignore: ['.el-message-box'], } - isShowPhrase.value = false; -}); +); // 甯哥敤璇姛鑳借緭鍏ユ鏇存柊 const updateCommonChatInput = (val) => { inputValue.value = val; @@ -616,4 +637,17 @@ } } } + +.stop-breathe { + @keyframes breathe { + 0%, + 100% { + transform: scale(1); + } + 50% { + transform: scale(1.35); + } + } + animation: breathe 3s infinite ease-in-out; +} </style> -- Gitblit v1.9.3