|
|
|
@ -2,7 +2,6 @@
|
|
|
|
|
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue' |
|
|
|
|
import { onBeforeRouteLeave } from 'vue-router' |
|
|
|
|
import { Button, Image, Spin, UploadDragger, message } from 'ant-design-vue' |
|
|
|
|
import type { UploadChangeParam, UploadProps } from 'ant-design-vue' |
|
|
|
|
import { SvgIcon } from '@/components/SvgIcon' |
|
|
|
|
import { AppTextarea } from '@/components/AppTextarea' |
|
|
|
|
import { AppContainerBox } from '@/components/AppContainerBox' |
|
|
|
@ -141,6 +140,7 @@ async function handleSubMenuChange(index: number, item?: SubMenuItem) {
|
|
|
|
|
// item有的话说明是点击切换,需要重新获取历史消息,否则是不是点击切换调用,不需要获取历史记录 |
|
|
|
|
if (item) { |
|
|
|
|
getHistoryMessage() |
|
|
|
|
fileList.value = [] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -176,6 +176,7 @@ async function handleSend(value: string) {
|
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
sendMessage(conversationData.value.id, value) |
|
|
|
|
fileList.value = [] |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -260,7 +261,7 @@ async function sendMessage(conversationId: string, question: string): Promise<vo
|
|
|
|
|
messageStore.setMessageStatus(MessageStatusEnum.LOADING) |
|
|
|
|
messageStore.setMessagePushItem({ |
|
|
|
|
messageType: MessageTypeEnum.USER, |
|
|
|
|
content: question, |
|
|
|
|
content: `${question}`, |
|
|
|
|
time: String(new Date().getTime()), |
|
|
|
|
avatar: '', |
|
|
|
|
}) |
|
|
|
@ -323,9 +324,9 @@ function handleModel(index: number) {
|
|
|
|
|
* @description: 图片上传前的处理 |
|
|
|
|
*/ |
|
|
|
|
function handleBeforeUpload(file: File) { |
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' |
|
|
|
|
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' |
|
|
|
|
if (!isJpgOrPng) { |
|
|
|
|
message.error('只能上传JPG、PNG格式图片!') |
|
|
|
|
message.error('只能上传JPG、JPEG、PNG、GIF格式图片!') |
|
|
|
|
} |
|
|
|
|
const isLt10M = file.size / 1024 / 1024 < 10 |
|
|
|
|
if (!isLt10M) { |
|
|
|
@ -435,59 +436,60 @@ onBeforeRouteLeave(() => {
|
|
|
|
|
> |
|
|
|
|
</AppConversationDefault> |
|
|
|
|
|
|
|
|
|
<!-- 消息列表 --> |
|
|
|
|
<AppMessage |
|
|
|
|
v-if="!conversationDefaultShow && appMessageShow" |
|
|
|
|
ref="appMessageRef" |
|
|
|
|
class="pl-27 pr-5" |
|
|
|
|
height="calc(100% - 160px)" |
|
|
|
|
:el-index="elIndex" |
|
|
|
|
:list="messageList" |
|
|
|
|
@on-scroll-top="onScrollTop" |
|
|
|
|
@reload-message="reloadMessage" |
|
|
|
|
> |
|
|
|
|
</AppMessage> |
|
|
|
|
</Spin> |
|
|
|
|
|
|
|
|
|
<!-- 发送框 --> |
|
|
|
|
<div v-if="!fileList.length" class="upload-box absolute right-0 bottom-5 pl-52 pr-32 mt-10s w-full"> |
|
|
|
|
<UploadDragger |
|
|
|
|
name="file" |
|
|
|
|
:multiple="false" |
|
|
|
|
:max-count="1" |
|
|
|
|
:show-upload-list="false" |
|
|
|
|
:custom-request="handleCustomRequest" |
|
|
|
|
:before-upload="handleBeforeUpload" |
|
|
|
|
> |
|
|
|
|
<SvgIcon class="upload-icon" name="image"></SvgIcon> |
|
|
|
|
<p class="ant-upload-text"> |
|
|
|
|
拖拽图片到这里,或者点击添加 |
|
|
|
|
</p> |
|
|
|
|
<p class="ant-upload-hint"> |
|
|
|
|
图片格式支持jpg、jpeg、png、gif、webp |
|
|
|
|
</p> |
|
|
|
|
</UploadDragger> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="w-full" |
|
|
|
|
> |
|
|
|
|
<div class="absolute left-0 bottom-35 pl-52 pr-32 mt-10 "> |
|
|
|
|
已上传图片: |
|
|
|
|
<Image |
|
|
|
|
class="rounded" |
|
|
|
|
:width="60" |
|
|
|
|
:height="60" |
|
|
|
|
:src="fileList[0]" |
|
|
|
|
fallback="data:image/png;base64,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" |
|
|
|
|
></Image> |
|
|
|
|
<div class="h-full flex flex-col"> |
|
|
|
|
<!-- 消息列表 --> |
|
|
|
|
<AppMessage |
|
|
|
|
v-if="!conversationDefaultShow && appMessageShow" |
|
|
|
|
ref="appMessageRef" |
|
|
|
|
class="pl-27 pr-5" |
|
|
|
|
height="calc(100% - 200px)" |
|
|
|
|
:el-index="elIndex" |
|
|
|
|
:list="messageList" |
|
|
|
|
@on-scroll-top="onScrollTop" |
|
|
|
|
@reload-message="reloadMessage" |
|
|
|
|
> |
|
|
|
|
</AppMessage> |
|
|
|
|
|
|
|
|
|
<!-- 发送框 --> |
|
|
|
|
<div v-if="!fileList.length" class="upload-box absolute right-0 bottom-5 pl-44 pr-24 mt-10s w-full"> |
|
|
|
|
<UploadDragger |
|
|
|
|
name="file" |
|
|
|
|
:multiple="false" |
|
|
|
|
:max-count="1" |
|
|
|
|
:show-upload-list="false" |
|
|
|
|
:custom-request="handleCustomRequest" |
|
|
|
|
:before-upload="handleBeforeUpload" |
|
|
|
|
> |
|
|
|
|
<SvgIcon class="upload-icon" name="image"></SvgIcon> |
|
|
|
|
<p class="ant-upload-text"> |
|
|
|
|
拖拽图片到这里,或者点击添加 |
|
|
|
|
</p> |
|
|
|
|
<p class="ant-upload-hint"> |
|
|
|
|
图片格式支持jpg、jpeg、png、gif、webp |
|
|
|
|
</p> |
|
|
|
|
</UploadDragger> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
v-else |
|
|
|
|
class="w-full" |
|
|
|
|
> |
|
|
|
|
<div class="pl-44 pr-24 mt-2"> |
|
|
|
|
<Image |
|
|
|
|
class="rounded" |
|
|
|
|
:width="60" |
|
|
|
|
:height="60" |
|
|
|
|
:src="fileList[0]" |
|
|
|
|
fallback="data:image/png;base64,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" |
|
|
|
|
></Image> |
|
|
|
|
</div> |
|
|
|
|
<AppTextarea |
|
|
|
|
class="pl-44 pr-24 mt-2" |
|
|
|
|
:btn-loading="sendBtnLoading" |
|
|
|
|
@send="handleSend" |
|
|
|
|
></AppTextarea> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<AppTextarea |
|
|
|
|
class="pl-52 pr-32 mt-10 " |
|
|
|
|
:btn-loading="sendBtnLoading" |
|
|
|
|
@send="handleSend" |
|
|
|
|
></AppTextarea> |
|
|
|
|
</div> |
|
|
|
|
</Spin> |
|
|
|
|
</template> |
|
|
|
|
</AppContainerBox> |
|
|
|
|
</template> |
|
|
|
|