2201 lines
64 KiB
Vue
2201 lines
64 KiB
Vue
<route lang="json5" type="page">
|
||
{
|
||
layout: 'default',
|
||
style: {
|
||
navigationBarHidden: true,
|
||
},
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<div class="flex flex-col h-screen bg-#ffffff tops">
|
||
<!-- Navigation Bar -->
|
||
<div
|
||
class="flex-none flex items-center justify-between px-5 py-3 bg-white shadow-md h-20 pt-10 z-999 fixed top-0 w-full box-border"
|
||
>
|
||
<image src="/static/aichat/black.png" class="w-3 h-4.5" @click="goBack" />
|
||
<div class="text-lg font-medium ml-12">小墨</div>
|
||
<div class="flex items-center space-x-3">
|
||
<!-- v-if="rawList.length > 0" -->
|
||
<image src="/static/aichat/time.png" class="w-5 h-5 mr-4" @click="openPopup" />
|
||
<image src="/static/aichat/new.png" class="w-5 h-5" @click="newChat" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息区 -->
|
||
<div
|
||
:class="[
|
||
'flex fixed top-0 w-full p-b-10 box-border mt-20',
|
||
showActions ? (uploadList.length ? 'h-118' : 'h-151') : 'h-171',
|
||
]"
|
||
>
|
||
<!-- 背景层 -->
|
||
<div
|
||
v-if="!messages.length"
|
||
class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none bg-#ffffff"
|
||
>
|
||
<image src="/static/aichat/logo.png" class="w-20 h-24 mb-4" @click="newChat" />
|
||
<view class="text-xl font-medium mb-1">嗨！ 我是小墨</view>
|
||
<view class="text-gray-400">开启新的聊天吧</view>
|
||
</div>
|
||
|
||
<div
|
||
ref="scrollEl"
|
||
class="flex-1 overflow-y-auto bg-#ffffff"
|
||
:class="showActions ? 'pb-44' : 'pb-16'"
|
||
>
|
||
<div :class="['relative z-10 px-4 py-6', showActions ? 'mb--11 h-105' : 'mb--21']">
|
||
<template v-for="(msg, idx) in messages" :key="idx">
|
||
<view v-if="shouldShowTimestamp(idx)" class="text-center text-xs text-gray-500 mt--3">
|
||
{{ formatDayGroup(msg.timestamp) }}
|
||
</view>
|
||
<view
|
||
class="flex items-start"
|
||
:class="msg.role === 'assistant' ? 'justify-start mt-0.3' : 'justify-end mt-2 '"
|
||
>
|
||
<image
|
||
v-if="msg.role === 'assistant'"
|
||
src="/static/aichat/logo-message.png"
|
||
class="w-8 h-8 rounded-full mr-2 mt-1"
|
||
/>
|
||
<view
|
||
class="relative max-w-[76.5%] mt-5"
|
||
:class="idx === messages.length - 1 ? 'mb-20' : 'mb-3'"
|
||
>
|
||
<view
|
||
:class="[
|
||
'absolute -top-5 text-xs text-gray-400 w-20 text-right ',
|
||
msg.role === 'assistant' ? 'left--4' : 'right-0',
|
||
]"
|
||
>
|
||
{{ formatTimeShort(msg.timestamp) }}
|
||
</view>
|
||
<view
|
||
:class="[
|
||
'py-3 pl-3 rounded-md break-words mb-3 tracking-[2rpx] min-w-10 min-h-2 ',
|
||
msg.role === 'assistant'
|
||
? 'bg-[#f9f8fd] text-black shadow '
|
||
: 'bg-[#45299e] text-white ',
|
||
msg.type === 'text' ? 'pr-0' : 'pr-3',
|
||
]"
|
||
>
|
||
<wd-loading
|
||
v-show="msg.role === 'assistant' && msgLoading && idx === messages.length - 1"
|
||
:size="20"
|
||
color="#e3e3e3"
|
||
custom-class="loading-black"
|
||
:class="[
|
||
'absolute top-1.5 text-xs text-gray-400 w-20 text-right',
|
||
msg.role === 'assistant' ? 'left-1' : 'right-0',
|
||
]"
|
||
/>
|
||
<!-- 图片消息 -->
|
||
<scroll-view
|
||
scroll-x
|
||
v-if="msg.type === 'image'"
|
||
vif="msg.type === uploadFileTypeEm.image"
|
||
@scroll="onScroll"
|
||
>
|
||
<view class="flex pr-1">
|
||
<view
|
||
v-for="(file, fileIdx) in msg.content.slice(0, 4)"
|
||
:key="fileIdx"
|
||
class="relative rounded-md overflow-hidden ml-2"
|
||
:class="{
|
||
'w-60 h-60': msg.content.length == 1,
|
||
'w-15 h-15': msg.content.length == 2,
|
||
'w-30 h-15 ': msg.content.length == 3,
|
||
'w-80 h-15 ': msg.content.length > 3,
|
||
}"
|
||
>
|
||
<view
|
||
v-if="msg.content.length > 4 && fileIdx >= 3"
|
||
class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70 z-80"
|
||
@click="previewMoreImg(msg.content)"
|
||
>
|
||
+ {{ msg.content.length - 4 }}
|
||
</view>
|
||
<image
|
||
vif="file.uploadFileType === uploadFileTypeEm.image"
|
||
:src="file?.image_url?.url"
|
||
class="w-full h-full object-cover"
|
||
@click="handleImageClick(file.image_url.url)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 文件消息 -->
|
||
|
||
<scroll-view
|
||
scroll-x
|
||
v-else-if="msg.type === uploadFileTypeEm.file"
|
||
@scroll="onScroll"
|
||
>
|
||
<view class="flex pr-1">
|
||
<view
|
||
v-for="(file, fileIdx) in msg.content"
|
||
:key="fileIdx"
|
||
style="flex: 0 0 6rem"
|
||
class="relative text-xs h-12 px-2 py-2 rounded-md overflow-hidden mr-1 bg-white c-black"
|
||
:class="{
|
||
'w-25 h-15': msg.content.length == 1,
|
||
'w-50 h-15': msg.content.length == 2,
|
||
'w-30 h-15 ': msg.content.length == 3,
|
||
'h-15 flex-grow-0 flex-shrink-0 basis-10 mr-1': msg.content.length >= 4,
|
||
}"
|
||
@click="previewFile(file.content)"
|
||
>
|
||
<view>{{ file.name ? file.name : file.content }}</view>
|
||
<!-- <view>--{{ file }}--</view> -->
|
||
<!-- <view>{{ file }}</view> -->
|
||
<view>{{ calcFileSize(file.size) }}</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 视频 -->
|
||
<view v-else-if="msg.type === uploadFileTypeEm.video">
|
||
<view
|
||
v-for="(file, fileIdx) in msg.content"
|
||
:key="fileIdx"
|
||
style="flex: 0 0 6rem"
|
||
class="relative text-xs h-32 w-80 rounded-md overflow-hidden mr-1 c-black"
|
||
>
|
||
<!-- @click="previewVideo(msg.content)"-->
|
||
<video
|
||
:src="file?.video_url?.url"
|
||
class="w-60 h-30"
|
||
controls
|
||
:poster="file?.video_url?.poster"
|
||
></video>
|
||
<!-- <video
|
||
:src="file.tempFilePath"
|
||
class="w-60 h-30"
|
||
controls
|
||
:poster="file.url"
|
||
></video> -->
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 文本消息 -->
|
||
<view v-else class="pr-2">
|
||
{{ msg.content }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="msg.role === 'assistant' && msg.type === 'text'"
|
||
class="absolute bottom--3.5 flex space-x-3 ml-1"
|
||
>
|
||
<image src="/static/aichat/copy.png" class="w-4 h-4" @click="copyText(msg)" />
|
||
<image src="/static/aichat/resect.png" class="w-4.3 h-4" @click="refreshText()" />
|
||
</view>
|
||
</view>
|
||
<image
|
||
v-if="msg.role === 'user'"
|
||
:src="userAvatar"
|
||
class="w-8 h-8 rounded-full ml-2 mt-1 bg-gray"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</div>
|
||
<!-- 聊天信息区域 -->
|
||
<!-- <view class="" style="height: 72px"></view> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部上传预览 + 输入区 -->
|
||
<div
|
||
:class="[
|
||
'fixed bottom-0 left-0 right-0 bg-white z-[80] overflow-hidden transition-all duration-300',
|
||
showActions ? (uploadList.length ? 'h-40' : 'h-40') : 'h-20',
|
||
]"
|
||
>
|
||
<!-- 上传列表 -->
|
||
<div
|
||
v-if="uploadList.length"
|
||
:class="[
|
||
'flex px-4 py-2 overflow-x-auto space-x-3 bg-transparent',
|
||
showActions
|
||
? uploadList.length
|
||
? ' fixed bottom-40'
|
||
: 'fixed bottom-19'
|
||
: 'fixed bottom-19',
|
||
]"
|
||
:style="{
|
||
transform: `rotate(0deg)`,
|
||
transition: 'transform 0.3s ease',
|
||
}"
|
||
>
|
||
<div class="flex overflow-x-auto space-x-3 py-2 w-88 flex-nowrap">
|
||
<div
|
||
v-for="item in uploadList"
|
||
:key="item.id"
|
||
class="relative w-20 h-16 rounded overflow-hidden flex-shrink-0"
|
||
>
|
||
<!-- 预览图，成功后用后端返回的 URL；上传中可以先用本地预览 -->
|
||
|
||
<!-- <img
|
||
v-if="videoFileType.includes(isFileType(item.name))"
|
||
src="/static/aichat/ic_video.png"
|
||
class="w-full h-full object-cover"
|
||
@click="handleImageClick(item.ori_url)"
|
||
/>
|
||
<img
|
||
v-else-if="officeFileTypeList.includes(isFileType(item.name))"
|
||
src="/static/aichat/word.png"
|
||
class="w-full h-full object-cover"
|
||
@click="handleImageClick(item.url)"
|
||
/>
|
||
<img
|
||
v-else-if="picFileType.includes(isFileType(item.name))"
|
||
:src="item.tempFilePath"
|
||
class="w-full h-full object-cover"
|
||
@click="handleImageClick(item.url)"
|
||
/> -->
|
||
<img
|
||
v-if="picFileType.includes(isFileType(item.name))"
|
||
:src="item.tempFilePath || item.url"
|
||
class="w-full h-full object-cover"
|
||
@click="handleImageClick(item.ori_url)"
|
||
/>
|
||
<view v-else class="text-xs text-gray-400 mt-1" @click="previewFile(item.ori_url)">
|
||
{{ item.name }}
|
||
</view>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<div
|
||
class="absolute top-1 right-1 w-4 h-4 rounded-full bg-black bg-opacity-50 flex items-center justify-center cursor-pointer text-white text-xs z-5"
|
||
@click="removeImage(item.id)"
|
||
>
|
||
×
|
||
</div>
|
||
|
||
<!-- 重试 -->
|
||
<span
|
||
v-if="item.status === 'error'"
|
||
class="absolute w-full h-full bg-black bg-opacity-40 pt-1 left-0 top-0 text-center color-white text-3xl"
|
||
@click.stop="retry(item)"
|
||
>
|
||
↻
|
||
</span>
|
||
|
||
<!-- 进度 / 成功 / 失败 -->
|
||
<div
|
||
class="absolute bottom-0 left-0 w-full text-xs text-center py-1 bg-black bg-opacity-50"
|
||
:class="{
|
||
'text-black': item.status === 'uploading',
|
||
'text-green': item.status === 'success',
|
||
'text-red': item.status === 'error',
|
||
}"
|
||
>
|
||
<template v-if="item.status === 'uploading'">
|
||
<view class="text-white">{{ item.progress }}%</view>
|
||
</template>
|
||
<template v-else-if="item.status === 'success'">✔ 成功</template>
|
||
<template v-else>✖ 失败</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 知识库-->
|
||
<div
|
||
@click="toggleKnowledge"
|
||
v-if="!uploadList.length"
|
||
class="fixed left-[32rpx] right-0 z-[90] h-8 w-23 flex items-center justify-between px-3 box-border rounded-1 transition-all duration-300"
|
||
:class="[
|
||
knowledgeOpen ? 'bg-#eee9f8' : 'bg-[#F9F9F9]',
|
||
showActions ? (uploadList.length ? 'bottom-31' : 'bottom-41') : 'bottom-21',
|
||
]"
|
||
>
|
||
<image
|
||
:src="
|
||
knowledgeOpen
|
||
? '/static/aichat/Knowledge-open.png'
|
||
: '/static/aichat/Knowledge-close.png'
|
||
"
|
||
class="w-4 h-3.5 mt-1"
|
||
/>
|
||
<div
|
||
:class="['text-[26rpx] transition-colors', knowledgeOpen ? 'text-#46299D' : 'text-black']"
|
||
>
|
||
知识库
|
||
</div>
|
||
<!-- <button @click="reload()">refresh</button> -->
|
||
</div>
|
||
|
||
<!-- 输入 + 切换 -->
|
||
<view class="flex items-center px-4 py-2.5 border-t border-t-solid border-[#E7E7E7]">
|
||
<input
|
||
v-model="inputText"
|
||
@focus="onFocus"
|
||
@confirm="sendText"
|
||
placeholder="想对我说点什么～"
|
||
class="flex-1 h-10 px-3 border border-gray-100 bg-[#f9f9f9] rounded-1 focus:outline-none"
|
||
/>
|
||
<!-- 将keyup替换为confirm -->
|
||
<image
|
||
v-show="!knowledgeOpen"
|
||
src="/static/aichat/add-circle.png"
|
||
class="w-7 h-7 mx-3"
|
||
@click="toggleActions"
|
||
:style="{
|
||
transform: `rotate(${rotation}deg)`,
|
||
transition: 'transform 0.3s ease',
|
||
}"
|
||
/>
|
||
<image
|
||
v-if="sendTextLoading && inputText.length <= 0"
|
||
src="/static/aichat/enter-no.png"
|
||
class="w-7 h-7"
|
||
@click="sendText()"
|
||
:disabled="loading"
|
||
:class="[knowledgeOpen ? 'ml-2' : 'ml-0']"
|
||
/>
|
||
<image
|
||
v-else-if="sendTextLoading"
|
||
src="/static/aichat/enter.png"
|
||
class="w-7 h-7"
|
||
@click="sendText()"
|
||
:disabled="loading"
|
||
:class="[knowledgeOpen ? 'ml-2' : 'ml-0']"
|
||
/>
|
||
<image
|
||
v-else
|
||
src="/static/aichat/stop.png"
|
||
class="w-7 h-7"
|
||
@click="stopMsg()"
|
||
:class="[knowledgeOpen ? 'ml-2' : 'ml-0']"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 操作面板 -->
|
||
<transition name="slide-up">
|
||
<view
|
||
v-show="showActions"
|
||
:class="[
|
||
'flex justify-around items-center h-10 bg-white border-t border-t-solid border-[#E7E7E7]',
|
||
showActions ? (uploadList.length ? 'pt-10' : 'pt-10') : 'pt-0',
|
||
]"
|
||
>
|
||
<view class="flex flex-col items-center">
|
||
<image src="/static/aichat/phone-img.png" class="w-13 h-13" @click="onPickImage" />
|
||
<span class="text-xs mt-1 text-gray-500">照片</span>
|
||
</view>
|
||
<view class="flex flex-col items-center">
|
||
<image src="/static/aichat/photo.png" class="w-13 h-13" @click="onPickVideo" />
|
||
<span class="text-xs mt-1 text-gray-500">视频</span>
|
||
</view>
|
||
<view class="flex flex-col items-center">
|
||
<image src="/static/aichat/files.png" class="w-13 h-13" @click="onPickFile" />
|
||
<span class="text-xs mt-1 text-gray-500">文件</span>
|
||
</view>
|
||
</view>
|
||
</transition>
|
||
</div>
|
||
|
||
<!-- 弹窗遮罩 + 容器 -->
|
||
<view v-if="showPopup" class="overlay" @click.self="closePopup">
|
||
<view :class="['popup', { fullscreen }]">
|
||
<!-- Header -->
|
||
<view class="popup-header">
|
||
<view>
|
||
<image src="/static/aichat/close.png" class="w4 h4" @click="closePopup" />
|
||
<image
|
||
:src="fullscreen ? '/static/aichat/shirk-cl.png' : '/static/aichat/shrink.png'"
|
||
class="w5 h5 ml-4"
|
||
@click="toggleFullscreen"
|
||
/>
|
||
</view>
|
||
|
||
<text class="title ml--14">历史记录</text>
|
||
</view>
|
||
<!-- 内容区 -->
|
||
<view v-if="!rawList.length" class="flex-1 flex flex-col items-center justify-center">
|
||
<image
|
||
src="/static/aichat/empty.png"
|
||
class="w-[400rpx] h-[400rpx] mb-[20rpx] opacity-50"
|
||
mode="widthFix"
|
||
/>
|
||
<text class="text-[28rpx] text-gray-500">暂无数据</text>
|
||
</view>
|
||
<scroll-view
|
||
v-else
|
||
scroll-y
|
||
class="popup-body"
|
||
@scrolltolower="scrolltolowerLoadData"
|
||
:scroll-top="scrollTop"
|
||
>
|
||
<template v-for="group in groups" :key="group.date">
|
||
<view class="date-label">{{ group.label }}</view>
|
||
<view
|
||
v-for="item in group.items"
|
||
:key="item.id"
|
||
class="history-item"
|
||
@click="goChat(item.listUuid)"
|
||
>
|
||
<text class="history-text">{{ item.title }}</text>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<view
|
||
v-if="showPreview"
|
||
class="fixed inset-0 bg-black bg-opacity-90 z-999 flex justify-center items-start pt-10"
|
||
@click="closePreview"
|
||
>
|
||
<view
|
||
class="absolute w-full max-w-full h-full mt-8 p-5 box-border flex justify-center items-start"
|
||
>
|
||
<image
|
||
v-if="previewUrl"
|
||
class="w-full max-h-[calc(100vh-90px)] object-contain"
|
||
:src="previewUrl"
|
||
mode="widthFix"
|
||
@click.stop
|
||
/>
|
||
<video
|
||
class="w-full max-h-[calc(100vh-90px)] object-contain"
|
||
v-else-if="previewVideoUrl"
|
||
:src="previewVideoUrl"
|
||
></video>
|
||
<view
|
||
class="absolute top--8 right-5 text-white text-3xl z-1000 w-10 h-10 text-center leading-10"
|
||
@click.stop="closePreview"
|
||
>
|
||
×
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, nextTick, watchEffect, watch } from 'vue'
|
||
import dayjs from 'dayjs'
|
||
import { useUserStore } from '@/store'
|
||
import { getEnvBaseUrl } from '@/utils'
|
||
import guid from '@/utils/guid.js'
|
||
import type { IGptRequestBody } from '@/service/index/foo'
|
||
import {
|
||
calcFileSize,
|
||
formatParams,
|
||
formatData,
|
||
readFile,
|
||
fileSuffix,
|
||
officeFileTypeList as fileType,
|
||
videoFileType as videoType,
|
||
picFileType as picType,
|
||
} from './utils/index'
|
||
import 'dayjs/locale/zh-cn'
|
||
import { showToastErr, showToastOk, time_format3 } from '@/utils/tools'
|
||
import { uploadFileChunk } from './utils/api.js'
|
||
// import { TOKEN, AVATAR } from './utils/test'
|
||
import { deepClone } from 'wot-design-uni/components/common/util'
|
||
import { log } from 'console'
|
||
|
||
dayjs.locale('zh-cn')
|
||
|
||
interface UploadFile {
|
||
id: string
|
||
formName: string
|
||
name: string
|
||
size: number
|
||
type: string
|
||
progress: number // 上传进度 0-100
|
||
status: 'uploading' | 'success' | 'error'
|
||
tempFilePath: string // 本地临时路径，用于预览
|
||
url?: string // 本地预览URL或服务器返回的URL
|
||
uploadFileType: 'image' | 'video' | 'file'
|
||
ori_url?: string // 本地视频
|
||
suffix: string
|
||
}
|
||
|
||
interface IMessage {
|
||
role: 'user' | 'assistant'
|
||
type: 'text' | 'image' | 'video' | 'file'
|
||
content: string | any[]
|
||
timestamp: Date
|
||
}
|
||
const MAX_FILE_SIZE = 10 * 1024 * 1024 // 5mb属于大文件
|
||
const FILE_SLICE_SIZE = 10 * 1024 * 1024 // 分片大小
|
||
const userAvatar = ref()
|
||
const chatMode = ref('qwen-vl-plus')
|
||
let isUserOk = false // 用户确认使用 tongyi-app
|
||
|
||
const baseUrl = getEnvBaseUrl()
|
||
const messages = reactive([])
|
||
//获取用户上下文
|
||
const historyUserMsgs = reactive<any[]>([])
|
||
const inputText = ref('')
|
||
const loading = ref(false)
|
||
const showActions = ref(false)
|
||
const scrollEl = ref<HTMLElement>()
|
||
//显示图片更多遮罩层
|
||
const showImageMask = ref(false)
|
||
//已上传文件列表
|
||
const uploadList = reactive<UploadFile[]>([])
|
||
// 上传队列
|
||
const uploadQueue = reactive([])
|
||
// 上传中文件数量
|
||
const uploadingCount = ref(0)
|
||
// 最大并行上传数
|
||
const MAX_CONCURRENT_UPLOADS = 5 // 6
|
||
|
||
// ------------------
|
||
// 控制弹窗显隐 & 全屏/底部模式
|
||
// ------------------
|
||
const showPopup = ref(false)
|
||
const fullscreen = ref(false)
|
||
|
||
const officeFileTypeList = ref(fileType)
|
||
const otherFileType = ref(['.txt']) // 不在使用
|
||
const videoFileType = ref(videoType)
|
||
const picFileType = ref(picType)
|
||
|
||
// ------------------
|
||
// 历史记录数据 & 分组逻辑
|
||
// ------------------
|
||
interface HistoryRecord {
|
||
id: number
|
||
listUuid: string
|
||
title: string
|
||
createdAt: number // Unix 时间戳（秒）
|
||
}
|
||
const rawList = ref<HistoryRecord[]>([])
|
||
|
||
const groups = computed(() => {
|
||
const map: Record<string, HistoryRecord[]> = {}
|
||
rawList.value.length > 0 &&
|
||
rawList.value.forEach((item) => {
|
||
const key = dayjs.unix(item.createdAt).format('YYYY-MM-DD')
|
||
;(map[key] ||= []).push(item)
|
||
})
|
||
return Object.keys(map)
|
||
.sort((a, b) => dayjs(b).valueOf() - dayjs(a).valueOf())
|
||
.map((key) => {
|
||
const today = dayjs().format('YYYY-MM-DD')
|
||
const yesterday = dayjs().add(-1, 'day').format('YYYY-MM-DD')
|
||
let label = ''
|
||
if (key === today) label = '今天'
|
||
else if (key === yesterday) label = '昨天'
|
||
else label = dayjs(key).format('YYYY/MM/DD')
|
||
return { date: key, label, items: map[key] }
|
||
})
|
||
})
|
||
|
||
// 点击历史记录条目，跳转聊天页面
|
||
async function goChat(listUuid: string) {
|
||
await fetchHistoryDiets(listUuid)
|
||
showPopup.value = false
|
||
}
|
||
// qwen-vl-plus
|
||
/** 1. 创建聊天会话 */
|
||
const listUuid = ref('')
|
||
|
||
async function createChatSession() {
|
||
try {
|
||
const createResp: any = await uni.request({
|
||
url: `${baseUrl}/chat/app/create`,
|
||
method: 'POST',
|
||
data: {
|
||
gptModel: chatMode.value,
|
||
},
|
||
header: {
|
||
Authorization: token.value,
|
||
},
|
||
})
|
||
// 如果后台返回新的会话信息，可以在这里处理，比如拿到 listUuid 等
|
||
listUuid.value = createResp.data.data.listUuid
|
||
} catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
// ------------------
|
||
// 拉取历史记录接口（替换为你自己的 API）
|
||
// ------------------
|
||
|
||
/** 2. 拉取历史记录列表 */
|
||
const state = reactive({
|
||
page: 0,
|
||
pageSize: 20,
|
||
total: null,
|
||
loading: false,
|
||
})
|
||
const scrollTop = ref(0)
|
||
async function fetchHistoryList() {
|
||
// if(state.page*state.pageSize>state.total && state.total!==null){
|
||
// return
|
||
// }
|
||
if (state.loading) {
|
||
return
|
||
}
|
||
state.loading = true
|
||
try {
|
||
const resp: any = await uni.request({
|
||
url: `${baseUrl}/chat/app/list`,
|
||
method: 'POST',
|
||
data: {
|
||
page: state.page,
|
||
pageSize: state.pageSize,
|
||
},
|
||
header: {
|
||
Authorization: token.value,
|
||
},
|
||
})
|
||
if (resp.data && resp.data.data) {
|
||
rawList.value = rawList.value.concat(resp.data.data.data)
|
||
state.total = resp.data.data.count //Math.ceil(resp.data.count/state.page)
|
||
// scrollTop.value+=60;
|
||
}
|
||
} catch (err) {
|
||
console.log('err: ', err)
|
||
} finally {
|
||
state.loading = false
|
||
}
|
||
}
|
||
const scrolltolowerLoadData = (e) => {
|
||
state.page++
|
||
}
|
||
watch(
|
||
() => state.page,
|
||
async () => {
|
||
await fetchHistoryList()
|
||
},
|
||
{ deep: true },
|
||
)
|
||
async function openPopup() {
|
||
state.page++
|
||
showPopup.value = true
|
||
}
|
||
function closePopup() {
|
||
showPopup.value = false
|
||
}
|
||
function toggleFullscreen() {
|
||
fullscreen.value = !fullscreen.value
|
||
}
|
||
/** 3. 拉取历史记录详情 */
|
||
|
||
async function fetchHistoryDiets(value) {
|
||
try {
|
||
const resp: any = await uni.request({
|
||
url: `${baseUrl}/chat/app/detail`,
|
||
method: 'POST',
|
||
data: {
|
||
listUuid: value,
|
||
gptModel: chatMode.value,
|
||
},
|
||
header: {
|
||
Authorization: token.value,
|
||
},
|
||
})
|
||
if (resp && resp.data && resp.data.data) {
|
||
const rawList = resp.data.data.detail // 假设后端直接返回消息数组
|
||
listUuid.value = resp.data.data.listUuid
|
||
// const newMessages = parseBackendMessages(JSON.parse(rawList))
|
||
// 用解析后的消息替换当前消息列表
|
||
messages.splice(0, messages.length, ...JSON.parse(rawList))
|
||
}
|
||
} catch (err) {
|
||
console.log('err: ', err)
|
||
}
|
||
}
|
||
function parseBackendMessages(chatList: any[]): IMessage[] {
|
||
console.log('chatList: ', chatList)
|
||
const chatHistory = []
|
||
const requestArrData = [] // 请求数组
|
||
chatList.forEach((item) => {
|
||
const arr = JSON.parse(item.message)
|
||
console.log('item.CreatedAt: ', item.UpdatedAt)
|
||
const date = time_format3(item.CreatedAt)
|
||
|
||
if (item.role === 'user') {
|
||
const videoContent = []
|
||
const imageContent = []
|
||
let textContent = {}
|
||
const requestData = {
|
||
// 单个请求对象
|
||
content: [],
|
||
role: item.user,
|
||
}
|
||
arr.forEach((chat) => {
|
||
if (chat.type === 'image_url') {
|
||
imageContent.push(chat)
|
||
requestData.content.push(chat)
|
||
} else if (chat.type === 'video_url') {
|
||
videoContent.push(chat)
|
||
requestData.content.push(chat)
|
||
} else {
|
||
// if(item.type==="text")
|
||
textContent.type = 'text'
|
||
textContent.text = chat.text
|
||
requestArrData.push({
|
||
content: chat.text,
|
||
role: 'user',
|
||
})
|
||
}
|
||
})
|
||
if (requestData.content.length > 0) {
|
||
requestArrData.push({
|
||
role: item.role,
|
||
content: requestData,
|
||
})
|
||
}
|
||
|
||
if (videoContent.length > 0) {
|
||
const videoMessage = {
|
||
role: item.role,
|
||
type: 'video',
|
||
content: videoContent, // string []
|
||
timestamp: date,
|
||
}
|
||
chatHistory.push(videoMessage)
|
||
}
|
||
if (imageContent.length > 0) {
|
||
const imageMessage = {
|
||
role: item.role,
|
||
type: 'image',
|
||
content: imageContent, // string []
|
||
timestamp: date,
|
||
}
|
||
chatHistory.push(imageMessage)
|
||
}
|
||
if (textContent.type === 'text') {
|
||
const msg = {
|
||
role: item.role,
|
||
type: 'text',
|
||
content: textContent.text, // string []
|
||
timestamp: date,
|
||
}
|
||
chatHistory.push(msg)
|
||
}
|
||
} else if (item.role === 'system') {
|
||
const content = []
|
||
const requestData = {
|
||
// 单个请求对象
|
||
content: '', // 文件链接
|
||
role: item.user,
|
||
}
|
||
arr.forEach((chat) => {
|
||
const isFile = officeFileTypeList.value.includes(fileSuffix(chat.text)) //检测是否属于文档类
|
||
if (chat.type === 'text' && !isFile) {
|
||
const textContent = {
|
||
role: 'user',
|
||
type: 'text',
|
||
text: chat.text,
|
||
}
|
||
chatHistory.push(textContent)
|
||
requestArrData.push({
|
||
content: chat.text,
|
||
role: 'user',
|
||
})
|
||
} else {
|
||
// 当content为文件链接时
|
||
content.push({
|
||
role: chat.role,
|
||
type: 'file',
|
||
content: chat.text, // string []
|
||
timestamp: date,
|
||
})
|
||
requestArrData.push({
|
||
content: chat.text,
|
||
name: chat.text,
|
||
role: 'system',
|
||
})
|
||
}
|
||
})
|
||
const message = {
|
||
role: item.role,
|
||
type: 'file',
|
||
content: content, // string []
|
||
timestamp: date,
|
||
}
|
||
chatHistory.push(message)
|
||
|
||
console.log('-----chatHistory: ', chatHistory)
|
||
} else if (item.role === 'assistant') {
|
||
arr.forEach((chat) => {
|
||
chatHistory.push({
|
||
role: 'assistant',
|
||
type: 'text',
|
||
content: chat.text,
|
||
timestamp: date,
|
||
})
|
||
requestArrData.push({
|
||
content: chat.text,
|
||
role: 'assistant',
|
||
type: 'text',
|
||
})
|
||
})
|
||
}
|
||
})
|
||
historyUserMsgs.splice(0, historyUserMsgs.length, ...requestArrData)
|
||
console.log('chatHistory: ', chatHistory)
|
||
return chatHistory
|
||
}
|
||
function parseBackendMessages1(rawList: any[]): IMessage[] {
|
||
const messageList: IMessage[] = []
|
||
|
||
rawList.forEach((item) => {
|
||
const rawContent: string = item.text ?? item.content ?? item.message ?? ''
|
||
// 先尝试 map[...] 的老逻辑
|
||
let parts: ParsedPart[] | null = tryParseMapFormat(rawContent)
|
||
|
||
// 如果没命中 map[...]，再看看是不是一个标准的 JSON 数组字符串
|
||
if (!parts && rawContent.startsWith('[') && rawContent.endsWith(']')) {
|
||
try {
|
||
const arr = JSON.parse(rawContent) as Array<{ text: string; type: string }>
|
||
if (Array.isArray(arr)) {
|
||
parts = arr.map((el) => {
|
||
if (el.type === 'file_url') {
|
||
return {
|
||
type: 'video',
|
||
content: [{ url: el.text, uploadFileType: 'video' }],
|
||
}
|
||
} else if (el.type === 'image_url' || el.type === 'image') {
|
||
return {
|
||
type: 'image',
|
||
content: [{ url: el.text, uploadFileType: 'image' }],
|
||
}
|
||
} else if (el.type === 'text') {
|
||
return { type: 'text', content: el.text }
|
||
}
|
||
|
||
// 其他类型按需扩展
|
||
return { type: el.type, content: el.text }
|
||
})
|
||
}
|
||
} catch {
|
||
// 解析失败就继续下面的 fallback
|
||
}
|
||
}
|
||
|
||
if (parts) {
|
||
// 拆分成多条消息推入
|
||
parts.forEach((part) => {
|
||
messageList.push({
|
||
role: item.role,
|
||
type: part.type as any, // 'text' 或 'image'
|
||
content: part.content,
|
||
timestamp: (item.CreatedAt ?? 0) * 1000,
|
||
})
|
||
})
|
||
} else {
|
||
// 你原来的 fallback 分支（单条，直接塞 content，type 也补成 'text'）
|
||
messageList.push({
|
||
role: item.role,
|
||
type: 'text',
|
||
content: rawContent,
|
||
timestamp: (item.CreatedAt ?? 0) * 1000,
|
||
})
|
||
}
|
||
})
|
||
|
||
return messageList
|
||
}
|
||
interface ParsedPart {
|
||
type: string
|
||
content: string | UploadFile[]
|
||
}
|
||
|
||
function tryParseMapFormat(str: string): ParsedPart[] | null {
|
||
if (!str || !str.startsWith('[') || !str.endsWith(']') || !str.includes('map[')) {
|
||
return null // 不符合 [map[...] ...] 格式
|
||
}
|
||
|
||
const result: ParsedPart[] = []
|
||
// 提取所有 map[...] 子串
|
||
const pattern = /map\[([^\]]+)\]/g
|
||
let match: RegExpExecArray | null
|
||
while ((match = pattern.exec(str)) !== null) {
|
||
const contentBlock = match[1] // 如 "text:这种 type:text"
|
||
const typeIndex = contentBlock.indexOf(' type:')
|
||
if (typeIndex === -1) {
|
||
continue // 安全检查，正常情况下一定有 ' type:' 分隔
|
||
}
|
||
// 拆分内容部分和类型部分
|
||
const contentPart = contentBlock.substring(0, typeIndex).trim() // "text:这种"
|
||
const typeValue = contentBlock.substring(typeIndex + 6).trim() // 跳过 " type:" 得到 "text" 或 "image_url"
|
||
// 解析内容键和值
|
||
const colonIndex = contentPart.indexOf(':')
|
||
if (colonIndex === -1) {
|
||
continue
|
||
}
|
||
const key = contentPart.substring(0, colonIndex).trim() // 键，比如 "text" 或 "image_url"
|
||
let value = contentPart.substring(colonIndex + 1).trim() // 值，比如 "这种" 或 "https://cdn.xx/xxx.jpg"
|
||
// 去掉包裹在值两端的引号（如果有的话）
|
||
if (
|
||
(value.startsWith('"') && value.endsWith('"')) ||
|
||
(value.startsWith("'") && value.endsWith("'"))
|
||
) {
|
||
value = value.substring(1, value.length - 1)
|
||
}
|
||
|
||
// 根据类型构造 ParsedPart 对象
|
||
if (typeValue === 'text' && key === 'text') {
|
||
result.push({
|
||
type: 'text',
|
||
content: value,
|
||
})
|
||
} else if (typeValue === 'image_url' && key === 'image_url') {
|
||
// 将图片URL封装为 UploadFile 对象数组
|
||
result.push({
|
||
type: 'image', // 前端统一用 'image' 作为图片消息类型
|
||
content: [{ url: value, uploadFileType: 'image' }],
|
||
})
|
||
} else {
|
||
// 其他类型的内容，可根据需要扩展处理
|
||
result.push({
|
||
type: typeValue,
|
||
content: value,
|
||
})
|
||
}
|
||
}
|
||
|
||
// 如果成功解析出至少一个片段，则返回数组；否则返回 null
|
||
return result.length > 0 ? result : null
|
||
}
|
||
|
||
const token = ref<string>()
|
||
const userInfo = ref<any>({})
|
||
const refreshToken = ref<string>('')
|
||
const statusBarHeight = ref<number>(0)
|
||
const mask = ref('')
|
||
// ---- 页面初始化 ----
|
||
|
||
onMounted(async () => {
|
||
// 1. 定义一个 init 函数，拿 Extras 并依次调用接口
|
||
try {
|
||
const init = async () => {
|
||
const wv = plus.webview.currentWebview() // 获取当前页面所属的 Webview 对象。
|
||
token.value = wv.token || uni.getStorageSync('token') || import.meta.env.VITE_DEV_TOKEN
|
||
userInfo.value = JSON.parse(wv.userInfo) || {}
|
||
refreshToken.value = wv.refreshToken || uni.getStorageSync('refreshToken')
|
||
statusBarHeight.value = wv.statusBarHeight || uni.getSystemInfoSync().statusBarHeight
|
||
userAvatar.value = userInfo.value.Avatar
|
||
mask.value = userInfo.value.ID
|
||
await createChatSession()
|
||
}
|
||
init()
|
||
} catch (e) {
|
||
console.error('onMounted e: ', e)
|
||
} finally {
|
||
}
|
||
})
|
||
|
||
function scrollToBottom() {
|
||
const el = scrollEl.value!
|
||
nextTick(() => {
|
||
// el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
|
||
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
|
||
})
|
||
}
|
||
|
||
//图片滚动事件
|
||
const onScroll = (e) => {
|
||
showImageMask.value = e.detail.scrollLeft <= 0
|
||
}
|
||
|
||
//查看更多图片
|
||
const previewMoreImg = (files) => {
|
||
uni.removeStorageSync('previewImages')
|
||
uni.removeStorageSync('previewVideos')
|
||
|
||
uni.setStorageSync('previewImages', files)
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/preview/index`,
|
||
})
|
||
}
|
||
|
||
//查看视频
|
||
const previewVideo = (files) => {
|
||
uni.removeStorageSync('previewVideos')
|
||
uni.removeStorageSync('previewImages')
|
||
|
||
uni.setStorageSync('previewVideos', files)
|
||
|
||
uni.navigateTo({
|
||
url: `/pages/preview/index`,
|
||
})
|
||
}
|
||
|
||
function addMessage(msg) {
|
||
console.log('msg: ', msg)
|
||
messages.push(msg)
|
||
scrollToBottom()
|
||
}
|
||
|
||
const shouldShowTimestamp = (i: number) => {
|
||
if (i === 0) return true
|
||
return !dayjs(messages[i].timestamp).isSame(messages[i - 1].timestamp, 'day')
|
||
}
|
||
const formatDayGroup = (d: Date) => dayjs(d).format('YYYY/MM/DD HH:mm')
|
||
const formatTimeShort = (d: Date) => dayjs(d).format('MM/DD HH:mm')
|
||
|
||
function goBack() {
|
||
const wv = plus.webview.currentWebview()
|
||
wv.close('slide-out-right', 300) // 或者直接 wv.close()
|
||
}
|
||
function viewHistory() {
|
||
uni.navigateTo({ url: '/pages/history/history' })
|
||
}
|
||
async function newChat() {
|
||
messages.splice(0)
|
||
await createChatSession()
|
||
inputText.value = ''
|
||
}
|
||
const rotation = ref(0)
|
||
function toggleActions() {
|
||
uni.hideKeyboard()
|
||
|
||
rotation.value += 45
|
||
|
||
console.log(rotation.value, '2')
|
||
showActions.value = !showActions.value
|
||
|
||
scrollToBottom()
|
||
}
|
||
|
||
// 上传文件formData类型
|
||
const uploadFileTypeEm = {
|
||
image: 'image',
|
||
video: 'video',
|
||
file: 'file',
|
||
text: 'text',
|
||
}
|
||
// const url=baseUrl
|
||
// 上传配置
|
||
const uploadConfig = reactive({
|
||
url: `${baseUrl}/upload/img`,
|
||
formData: {
|
||
source: 'chat',
|
||
mask: mask.value,
|
||
type: uploadFileTypeEm.image,
|
||
},
|
||
image: {
|
||
maxSize: 10 * 1024 * 1024, // 图片最大10MB
|
||
limitMsg: '图片大小不能超过10MB',
|
||
supportType: ['.jpeg', '.png', '.jpg'],
|
||
},
|
||
video: {
|
||
maxSize: 100 * 1024 * 1024, // 视频最大100MB
|
||
limitMsg: '视频大小不能超过100MB',
|
||
supportType: ['.mp4', '.mov', '.wmv'],
|
||
},
|
||
file: {
|
||
maxSize: 100 * 1024 * 1024, // 文件最大100MB
|
||
limitMsg: '文件大小不能超过300MB',
|
||
supportType: ['.pdf', '.doc', '.xlsx', '.txt'],
|
||
},
|
||
})
|
||
|
||
//监听上传文件状态更新loading
|
||
watchEffect(() => {
|
||
const allSuccess = uploadList.every((item) => item.status === 'success')
|
||
loading.value = !allSuccess
|
||
})
|
||
|
||
//添加上传队列
|
||
const addUploadQueue = (tempFiles: any[], uploadFileType: string) => {
|
||
// 添加到上传队列
|
||
const files = tempFiles.map((item: any, index: number) => ({
|
||
id: guid.getGuid(),
|
||
tempFilePath: item.path,
|
||
progress: 0,
|
||
status: 'pending',
|
||
name: item.name,
|
||
size: item.size,
|
||
type: item.type,
|
||
uploadFileType: uploadFileType,
|
||
formName: 'file',
|
||
}))
|
||
|
||
//剔除掉大小超过限制的文件
|
||
const _files = []
|
||
files.forEach((file: any) => {
|
||
const size = file.size
|
||
const fileMaxSize = uploadConfig[uploadFileType].maxSize
|
||
const fileLimitMsg = uploadConfig[uploadFileType].limitMsg
|
||
|
||
if (size > fileMaxSize) {
|
||
uni.showToast({
|
||
title: fileLimitMsg,
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
_files.push(file)
|
||
})
|
||
|
||
// 添加到上传文件列表
|
||
uploadList.push(..._files)
|
||
|
||
// 添加到队列
|
||
uploadQueue.push(..._files)
|
||
|
||
// 更新上传文件类型
|
||
uploadConfig.formData.type = uploadFileType
|
||
|
||
// 开始上传
|
||
startUploads()
|
||
}
|
||
|
||
// 开始上传文件
|
||
const startUploads = () => {
|
||
// 获取待上传文件
|
||
const pendingFiles: Array<any> = uploadQueue.filter((file) => file.status === 'pending')
|
||
|
||
// 限制最大并行上传数
|
||
const filesToUpload = pendingFiles.slice(0, MAX_CONCURRENT_UPLOADS - uploadingCount.value)
|
||
|
||
filesToUpload.forEach((file) => {
|
||
// uploadFile(file);
|
||
let url = null
|
||
if (file.size > MAX_FILE_SIZE) {
|
||
bigFileUpload(file)
|
||
.then((res) => {
|
||
console.log('全部成功 res: ', res)
|
||
// const length=res.length;
|
||
url = res.FullFileUrl
|
||
file.status = 'success'
|
||
uploadingCount.value--
|
||
})
|
||
.catch((rej) => {
|
||
console.log('失败rej: ', rej)
|
||
file.status = 'error'
|
||
// uploadingCount.value--
|
||
})
|
||
} else {
|
||
uploadFile(file)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 上传单个文件
|
||
const uploadFile = (file: UploadFile) => {
|
||
// 更新状态为上传中
|
||
file.status = 'uploading'
|
||
uploadingCount.value++
|
||
|
||
// 创建上传任务
|
||
const uploadTask = uni.uploadFile({
|
||
url: uploadConfig.url,
|
||
filePath: file.tempFilePath,
|
||
name: file.formName,
|
||
formData: uploadConfig.formData,
|
||
success: (res) => {
|
||
const result = JSON.parse(res.data)
|
||
|
||
if (res.statusCode === 200 && result.code === 0) {
|
||
// 更新文件状态
|
||
file.status = 'success'
|
||
file.progress = 100
|
||
file.url = result.data.cover_url || result.data.ori_url || file.tempFilePath
|
||
file.ori_url = result.data.ori_url || ''
|
||
uni.showToast({
|
||
title: res.msg || '文件上传成功',
|
||
icon: 'none',
|
||
})
|
||
} else {
|
||
file.status = 'error'
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
file.status = 'error'
|
||
if (err.errMsg === 'uploadFile:fail timeout') {
|
||
uni.showToast({
|
||
title: '上传文件超时',
|
||
icon: 'none',
|
||
duration: 3000,
|
||
})
|
||
}
|
||
},
|
||
complete: () => {
|
||
// 更新上传文件列表状态
|
||
uploadList.forEach((item) => {
|
||
if (item.id === file.id) {
|
||
item.status = file.status
|
||
item.url = file.url
|
||
item.progress = file.progress
|
||
}
|
||
})
|
||
|
||
uploadingCount.value--
|
||
|
||
// 检查是否还有待上传的文件
|
||
const remainingPendingFiles = uploadQueue.filter((file) => file.status === 'pending')
|
||
if (remainingPendingFiles.length > 0) {
|
||
startUploads()
|
||
} else if (uploadingCount.value === 0) {
|
||
// 所有文件上传完成
|
||
// uni.showToast({
|
||
// title: '全部上传完成',
|
||
// icon: 'success',
|
||
// })
|
||
loading.value = false
|
||
}
|
||
},
|
||
})
|
||
|
||
// 监听上传进度
|
||
uploadTask.onProgressUpdate((res) => {
|
||
uploadList.forEach((item) => {
|
||
if (item.id === file.id) {
|
||
item.progress = res.progress === 100 ? 99 : res.progress
|
||
}
|
||
})
|
||
})
|
||
}
|
||
function bigFileUpload(file) {
|
||
file.status = 'uploading'
|
||
uploadingCount.value++
|
||
|
||
console.log('file: ', file) //progress
|
||
return new Promise(async (resolve, reject) => {
|
||
const md5 = file.id
|
||
const fileName = file.name
|
||
const tempFilePath = file.tempFilePath
|
||
const maxSize = FILE_SLICE_SIZE
|
||
const chunksList = await readFile(file, maxSize)
|
||
const chunksLength = chunksList.length
|
||
const requestList = []
|
||
const maxConcurrency = 3 // 一次最多3个
|
||
let currentRunning = 0
|
||
let index = 0
|
||
let success = null
|
||
const errors = []
|
||
let isOver = false
|
||
const next = () => {
|
||
while (currentRunning < maxConcurrency && index < chunksLength) {
|
||
if (isOver) {
|
||
// 有一个失败就立刻取消之后的请求
|
||
return
|
||
}
|
||
const chunkIndex = index++
|
||
const chunk = chunksList[chunkIndex]
|
||
const params = {
|
||
FileMd5: md5,
|
||
Chunk: chunk,
|
||
ChunkFileName: `${fileName}_${chunkIndex}`,
|
||
Total: chunksLength,
|
||
UseType: 100,
|
||
FileName: fileName,
|
||
Source: 'aiChat',
|
||
}
|
||
currentRunning++
|
||
// send request
|
||
uploadFileChunk({ formData: params, tempFilePath })
|
||
.then((res) => {
|
||
if (res.statusCode === 200) {
|
||
file.progress = Math.ceil(((chunkIndex + 1) / chunksLength) * 100)
|
||
if (file.progress > 100) {
|
||
file.progress = 100
|
||
}
|
||
const data = JSON.parse(res.data)
|
||
if (data.status === 0) {
|
||
// success.push(data.data)
|
||
success = data.data
|
||
if (data.data && data.data.FullFileUrl) {
|
||
file.url = data.data.FullFileUrl
|
||
file.ori_url = data.data.FullFileUrl
|
||
} else if (data.data && data.data.CoverUrl) {
|
||
file.url = data.data.CoverUrl
|
||
file.ori_url = data.data.CoverUrl
|
||
}
|
||
} else if (data.status === 1 && data.code === 401) {
|
||
showToastErr(data.msg)
|
||
reject(data)
|
||
// throw Error(data.msg);
|
||
}
|
||
// console.log('res: ',data);
|
||
} else {
|
||
errors.push(res.data)
|
||
throw new Error('上传失败')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
reject(err)
|
||
isOver = true
|
||
file.status = 'error'
|
||
// console.error(`第 ${chunkIndex} 片上传失败`, err)
|
||
errors.push(err)
|
||
})
|
||
.finally(() => {
|
||
currentRunning--
|
||
if (chunkIndex === chunksLength - 1) {
|
||
if (errors.length === 0) {
|
||
file.status = 'success'
|
||
resolve(success)
|
||
} else {
|
||
file.status = 'error'
|
||
reject(errors)
|
||
}
|
||
} else if (index < chunksLength) {
|
||
next()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
next()
|
||
// const request = (chunks, i) => {
|
||
// const chunk = chunks.shift()
|
||
// const params = {
|
||
// FileMd5: md5,
|
||
// Chunk: chunk,
|
||
// ChunkFileName: `${fileName}_${i}`,
|
||
// Total: chunksLength,
|
||
// UseType: 100,
|
||
// FileName: fileName,
|
||
// Source: 'aiChat',
|
||
// }
|
||
|
||
// uploadFileChunk({ formData: params, tempFilePath: tempFilePath })
|
||
// .then((res) => {
|
||
// // requestList.push(Promise.resolve(res))
|
||
// if (res.status === 0) {
|
||
// file.progress = Math.ceil(((i + 1) / chunksLength) * 100)
|
||
// Promise.resolve(JSON.parse(res.data))
|
||
// } else {
|
||
// Promise.reject(res)
|
||
// }
|
||
// })
|
||
// .catch((rej) => {
|
||
// // requestList.push(Promise.resolve(rej))
|
||
// Promise.reject(rej)
|
||
// })
|
||
// .finally(() => {
|
||
// if (chunks.length > 0) {
|
||
// request(chunks, ++i)
|
||
// }
|
||
// })
|
||
// }
|
||
// console.log('success,next: ', success, errors);
|
||
// const promiseList=chunksList.map(request);
|
||
// request(chunksList, 0)
|
||
// return Promise.all(chunksList)
|
||
// .then((res) => {
|
||
// console.log('all res: ', res)
|
||
// })
|
||
// .catch((rej) => {
|
||
// console.log('all rej: ', rej)
|
||
// })
|
||
})
|
||
}
|
||
|
||
// 照片
|
||
const onPickImage = () => {
|
||
loading.value = true
|
||
uni.chooseImage({
|
||
count: 9, // 最多选择9张
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album'],
|
||
// extension: ['.rar', '.png', '.jpg'],
|
||
// extension: ['jpeg', 'png', 'jpg'],
|
||
success: (res: any) => {
|
||
console.log(res)
|
||
|
||
// 开始上传
|
||
addUploadQueue(res.tempFiles, uploadFileTypeEm.image)
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '选择照片失败',
|
||
icon: 'none',
|
||
})
|
||
loading.value = false
|
||
},
|
||
})
|
||
}
|
||
|
||
// 视频
|
||
const onPickVideo = () => {
|
||
uni.chooseVideo({
|
||
sourceType: ['album', 'camera'],
|
||
compressed: true,
|
||
// extension: uploadConfig.video.supportType,
|
||
success: (res: any) => {
|
||
console.log(res)
|
||
|
||
const tempFile = res.tempFile
|
||
tempFile.path = res.tempFilePath
|
||
|
||
// 开始上传
|
||
addUploadQueue([tempFile], uploadFileTypeEm.video)
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '选取视频失败',
|
||
icon: 'none',
|
||
})
|
||
},
|
||
})
|
||
}
|
||
const fileInput = ref(null)
|
||
// extension: [
|
||
// 'txt', // 文本
|
||
// 'pdf', // PDF
|
||
// 'doc',
|
||
// 'docx', // Word
|
||
// 'xls',
|
||
// 'xlsx', // Excel
|
||
// 'ppt',
|
||
// 'pptx', // PowerPoint
|
||
// ],
|
||
// 文件
|
||
const onPickFile = () => {
|
||
uni.chooseFile({
|
||
count: 9,
|
||
type: 'all',
|
||
|
||
success: (res: any) => {
|
||
console.log(res)
|
||
// 开始上传
|
||
addUploadQueue(res.tempFiles, uploadFileTypeEm.file)
|
||
},
|
||
fail: (err) => {
|
||
uni.showToast({
|
||
title: '选择文件失败',
|
||
})
|
||
},
|
||
})
|
||
}
|
||
|
||
// 点击重试
|
||
function retry(item: UploadFile) {
|
||
item.status = 'uploading'
|
||
item.progress = 0
|
||
if (item.size > MAX_FILE_SIZE) {
|
||
bigFileUpload(item)
|
||
.then((res) => {
|
||
// const length=res.length;
|
||
// item.url=res.FullFileUrl;
|
||
// item.ori_url=res.FullFileUrl;
|
||
item.status = 'success'
|
||
})
|
||
.catch((rej) => {
|
||
item.status = 'error'
|
||
})
|
||
} else {
|
||
uploadFile(item) // 如果需要 detail，可缓存后传入
|
||
}
|
||
}
|
||
|
||
// 删除
|
||
function removeImage(id: string) {
|
||
const findIndex = uploadList.findIndex((item) => item.id === id)
|
||
if (findIndex > -1) {
|
||
uploadList.splice(findIndex, 1)
|
||
}
|
||
}
|
||
|
||
// 预览（可自行实现 uni.previewImage 等）
|
||
function previewImage(url: string) {
|
||
uni.previewImage({ urls: [url] })
|
||
}
|
||
|
||
// 预览文件
|
||
// 统一替换掉原来的 previewFile
|
||
const previewFile = (url: string) => {
|
||
if (typeof url !== 'string') {
|
||
return
|
||
}
|
||
if (typeof plus !== 'undefined') {
|
||
// 在 App 里直接用原生下载 + 打开
|
||
downloadAndOpenFile(url)
|
||
} else {
|
||
// H5 或者调试环境回退到 WebView
|
||
uni.navigateTo({
|
||
url: '/pages/webview/index?link=' + encodeURIComponent(url),
|
||
})
|
||
}
|
||
}
|
||
|
||
// 下载并打开文件
|
||
const downloadAndOpenFile = (downloadUrl: string) => {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
|
||
if (!downloadUrl) {
|
||
uni.hideLoading()
|
||
return uni.showToast({ title: '文件路径无效', icon: 'none' })
|
||
}
|
||
|
||
// 将文件存放到应用私有下载目录，保证权限可读可写
|
||
const options = {
|
||
// “_downloads/” 会自动映射到应用的 Documents/download 目录
|
||
filename: '_downloads/',
|
||
}
|
||
|
||
const dtask = plus.downloader.createDownload(downloadUrl, options, (d, status) => {
|
||
uni.hideLoading()
|
||
if (status === 200) {
|
||
const savedPath = d.filename
|
||
if (savedPath) {
|
||
// 用系统默认的方式打开任意类型文件（PDF/Word/Excel/图片/视频 都通用）
|
||
plus.runtime.openFile(savedPath, {}, () => {
|
||
// 打开失败的回调可选
|
||
})
|
||
} else {
|
||
uni.showToast({ title: '文件保存失败', icon: 'none' })
|
||
}
|
||
} else {
|
||
uni.showToast({ title: '下载失败', icon: 'error' })
|
||
}
|
||
})
|
||
|
||
dtask.start()
|
||
}
|
||
const msgLoading = ref(true)
|
||
interface EventTargetSendText {
|
||
detail: { value: string }
|
||
}
|
||
type EventTypeTarget = string | EventTargetSendText
|
||
const sendTextLoading = ref(true) // false可以发送消息，true不可以发送，因为上一次发送未结束
|
||
const refreshSend = ref(false)
|
||
let stopStreamMsg = false
|
||
const stopMsg = () => {
|
||
stopStreamMsg = true
|
||
}
|
||
async function sendText() {
|
||
console.log('uploadList: ', uploadList)
|
||
if (uploadList.length > 0) {
|
||
const isUpLoading = uploadList.some((file) => {
|
||
// return file.status==="error" || file.status==="pending"
|
||
return file.status === 'uploading' || file.status === 'pending'
|
||
})
|
||
const isError = uploadList.some((file) => {
|
||
// return file.status==="error" || file.status==="pending"
|
||
return file.status === 'error'
|
||
})
|
||
if (isUpLoading) {
|
||
return showToastErr('有文件正在上传')
|
||
} else if (isError) {
|
||
return showToastErr('有文件上传失败')
|
||
}
|
||
}
|
||
const msg = inputText.value.trim()
|
||
if (!msg && !refreshSend.value) {
|
||
return showToastErr('不可以发送空消息!')
|
||
}
|
||
// if (uploadList.length > 0) {
|
||
// return showToastErr('请等待文件上传完成!')
|
||
// }
|
||
if (!sendTextLoading.value) {
|
||
sendTextLoading.value = true
|
||
return showToastErr('正在接收消息请稍后')
|
||
}
|
||
// 开启加载状态
|
||
sendTextLoading.value = false
|
||
// 文本消息
|
||
|
||
// 先判断是否上传文件，若有文件在判断文件类型，视频+图片不能与文档类文件同时上传
|
||
|
||
// let body: IGptRequestBody;
|
||
let body = {}
|
||
let aiMsg = {}
|
||
if (uploadList.length > 0 && !isUserOk) {
|
||
let photo = [] // 媒体文件 参数中的content
|
||
let video = [] // 媒体文件 参数中的content
|
||
let fileList = [] // 文档文件
|
||
// 格式化请求参数
|
||
const { photoList, videoList, file } = formatParams(uploadList)
|
||
if ((photoList.length > 0 || videoList.length > 0) && file.length > 0) {
|
||
sendTextLoading.value = true
|
||
// 媒体文件与文档同时上传时
|
||
return showToastErr('视频或图片不能与文件同时上传')
|
||
}
|
||
addMessage({
|
||
role: 'user',
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
mask: 'new',
|
||
})
|
||
|
||
if (photoList.length > 0 && file.length <= 0) {
|
||
// 仅上传了媒体文件时
|
||
chatMode.value = 'qwen-vl-max'
|
||
aiMsg = {
|
||
role: 'assistant',
|
||
// role:"user",
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
}
|
||
addMessage({
|
||
role: 'user',
|
||
// role:"user",
|
||
type: 'image',
|
||
content: deepClone(photoList),
|
||
timestamp: new Date(),
|
||
mask: 'new',
|
||
})
|
||
|
||
photoList.push({
|
||
type: 'text',
|
||
text: msg,
|
||
})
|
||
const lastMsg = {
|
||
role: 'user',
|
||
// role: 'assistant',
|
||
type: 'image',
|
||
content: photoList,
|
||
mask: 'new',
|
||
}
|
||
historyUserMsgs.push(lastMsg)
|
||
body = {
|
||
model: chatMode.value, // 模型选择
|
||
max_tokens: 1000,
|
||
top_p: 1,
|
||
presence_penalty: 0,
|
||
frequency_penalty: 0,
|
||
messages: deepClone(historyUserMsgs), // text ? [aiMsg] : historyUserMsgs,
|
||
stream: true,
|
||
listUuid: listUuid.value, // "eff18a10-1719-4528-ad63-ee5c01d0a412"
|
||
}
|
||
// 开始发请求 api
|
||
}
|
||
if (videoList.length > 0 && file.length <= 0) {
|
||
chatMode.value = 'qwen-vl-max'
|
||
aiMsg = {
|
||
role: 'assistant',
|
||
// role:"user",
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
}
|
||
// let content = video;
|
||
addMessage({
|
||
role: 'user',
|
||
type: 'video',
|
||
content: deepClone(videoList),
|
||
timestamp: new Date(),
|
||
mask: 'new',
|
||
})
|
||
|
||
videoList.forEach((item) => {
|
||
// item.video_url.poster
|
||
if (item.type == 'video_url') {
|
||
delete item.video_url.poster
|
||
}
|
||
})
|
||
videoList.push({
|
||
type: 'text',
|
||
text: msg,
|
||
})
|
||
const lastMsg = {
|
||
role: 'user',
|
||
// role: 'assistant',
|
||
content: videoList,
|
||
mask: 'new',
|
||
}
|
||
historyUserMsgs.push(lastMsg)
|
||
body = {
|
||
model: chatMode.value, // 模型选择
|
||
max_tokens: 1000,
|
||
top_p: 1,
|
||
presence_penalty: 0,
|
||
frequency_penalty: 0,
|
||
messages: deepClone(historyUserMsgs), // text ? [aiMsg] : historyUserMsgs,
|
||
stream: true,
|
||
listUuid: listUuid.value,
|
||
// listUuid:"eff18a10-1719-4528-ad63-ee5c01d0a412"
|
||
}
|
||
} else if (photoList.length <= 0 && videoList.length <= 0 && file.length > 0) {
|
||
// 仅上传了文档类文件时
|
||
chatMode.value = 'qwen-long'
|
||
aiMsg = {
|
||
role: 'assistant',
|
||
// role:"user",
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
}
|
||
addMessage({
|
||
role: 'user',
|
||
type: 'file',
|
||
content: deepClone(file),
|
||
mask: 'new',
|
||
timestamp: new Date(),
|
||
})
|
||
file.push({
|
||
role: 'user',
|
||
content: msg,
|
||
mask: 'new',
|
||
})
|
||
historyUserMsgs.push(...file)
|
||
body = {
|
||
model: chatMode.value, // 模型选择
|
||
// max_tokens: 1000,
|
||
// top_p: 1,
|
||
// presence_penalty: 0,
|
||
// frequency_penalty: 0,
|
||
messages: deepClone(historyUserMsgs), // text ? [aiMsg] : historyUserMsgs,
|
||
stream: true,
|
||
listUuid: listUuid.value,
|
||
// listUuid:"eff18a10-1719-4528-ad63-ee5c01d0a412"
|
||
}
|
||
}
|
||
} else {
|
||
if (!refreshSend.value) {
|
||
//不重发时触发
|
||
addMessage({
|
||
role: 'user',
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
mask: 'new',
|
||
})
|
||
}
|
||
// 纯文本时发送
|
||
chatMode.value = 'tongyi-app' //'tongyi-app'; qwen-long
|
||
|
||
//更新上下文消息
|
||
historyUserMsgs.push({
|
||
role: 'user',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
})
|
||
aiMsg = {
|
||
role: 'assistant',
|
||
type: 'text',
|
||
content: msg,
|
||
timestamp: new Date(),
|
||
}
|
||
|
||
body = {
|
||
model: chatMode.value, // 模型选择
|
||
max_tokens: 1000,
|
||
top_p: 1,
|
||
presence_penalty: 0,
|
||
frequency_penalty: 0,
|
||
messages: deepClone(historyUserMsgs), // text ? [aiMsg] : historyUserMsgs,
|
||
stream: true,
|
||
listUuid: listUuid.value,
|
||
// listUuid:"eff18a10-1719-4528-ad63-ee5c01d0a412"
|
||
}
|
||
}
|
||
// 第一次发送纯文本消息，第二次发送图片+视频，第三次发送文档，此时因为历史消息都要一起发送给后端，
|
||
// 所以要想办法在遇到这种情况时，截断历史记录，主动为用户建立一个新的回话，但是不需要清空历史记录
|
||
|
||
console.log('message: ', messages)
|
||
uploadList.splice(0, uploadList.length) // 清空上传的文件
|
||
const list = formatData(messages)
|
||
|
||
body.messages = list
|
||
body.detail = JSON.stringify(messages)
|
||
aiMsg.content = ''
|
||
addMessage(aiMsg)
|
||
// return
|
||
// return
|
||
// 没有上传文件，仅文字消息
|
||
try {
|
||
// aiMsg.content = ''
|
||
// 发送问题到后端
|
||
inputText.value = ''
|
||
const controller = new AbortController()
|
||
const signal = controller.signal
|
||
const resp = await fetch(baseUrl + '/chat/app/completion', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Authorization: token.value },
|
||
body: JSON.stringify(body),
|
||
signal: signal,
|
||
})
|
||
|
||
const reader = resp.body!.getReader()
|
||
const decoder = new TextDecoder()
|
||
let buffer = ''
|
||
let done = false
|
||
|
||
while (!done) {
|
||
if (stopStreamMsg) {
|
||
// 立刻停下
|
||
// reader.cancel();
|
||
controller.abort()
|
||
stopStreamMsg = false
|
||
}
|
||
const { value, done: streamDone } = await reader.read()
|
||
done = streamDone
|
||
if (value) {
|
||
buffer += decoder.decode(value, { stream: true })
|
||
const lines = buffer.split(/\r?\n/)
|
||
buffer = lines.pop()!
|
||
|
||
for (const line of lines) {
|
||
// 只处理以 "data: " 开头的行
|
||
if (!line.startsWith('data: ')) continue
|
||
const chunk = line.slice(6).trim()
|
||
|
||
if (chunk === '[DONE]') {
|
||
done = true
|
||
console.log('sss')
|
||
break
|
||
}
|
||
try {
|
||
const json = JSON.parse(chunk)
|
||
const delta = json.choices?.[0]?.delta?.content
|
||
if (delta) {
|
||
msgLoading.value = false
|
||
aiMsg.content += delta
|
||
//每次更新messages消息，实现流式输出
|
||
messages[messages.length - 1] = { ...aiMsg }
|
||
scrollToBottom()
|
||
}
|
||
} catch {}
|
||
}
|
||
|
||
//更新上下文消息
|
||
done && historyUserMsgs.push(aiMsg)
|
||
historyUserMsgs.forEach((item) => {
|
||
if (Array.isArray(item)) {
|
||
item.forEach((ele) => {
|
||
if (ele.mask === 'new') {
|
||
ele.mask = ''
|
||
}
|
||
})
|
||
} else if (item.role === 'system') {
|
||
item.mask = ''
|
||
} else {
|
||
item.mask = ''
|
||
}
|
||
})
|
||
messages.forEach((item) => {
|
||
if (item.mask === 'new') {
|
||
item.mask = ''
|
||
}
|
||
})
|
||
console.log('chunk------------------: ')
|
||
}
|
||
}
|
||
scrollToBottom()
|
||
} catch (err) {
|
||
// aiMsg.content = '请重新发送'
|
||
// //更新messages消息
|
||
// messages[messages.length - 1] = { ...aiMsg }
|
||
console.error(err)
|
||
} finally {
|
||
sendTextLoading.value = true
|
||
showActions.value = false
|
||
refreshSend.value = false // 重发已经结束 关闭重发
|
||
msgLoading.value = false
|
||
}
|
||
}
|
||
function copyText(msg: IMessage) {
|
||
if (typeof msg.content === 'string') {
|
||
uni.setClipboardData({
|
||
data: msg.content,
|
||
success() {
|
||
uni.showToast({ title: '已复制', icon: 'success' })
|
||
},
|
||
fail(err) {
|
||
console.error('复制失败', err)
|
||
uni.showToast({ title: '复制失败', icon: 'error' })
|
||
},
|
||
})
|
||
}
|
||
}
|
||
|
||
function refreshText() {
|
||
if (!sendTextLoading.value) {
|
||
// 正在接收消息，不可以重发
|
||
return
|
||
}
|
||
if (uploadList.length > 0) {
|
||
return
|
||
}
|
||
// 1. 找到最后两条用户消息（用于处理图文混合场景）
|
||
const userMessages = messages.filter((msg) => msg.role === 'user')
|
||
// const lastTwoUserMsgs = userMessages.slice(-2)
|
||
const [msg1, msg2] = deepClone(userMessages.slice(-2))
|
||
// let text=lastTwoUserMsgs[0] // lastTwoUserMsgs.every((msg)=>msg.type==="text" || msg.type==="image" || msg.type==="video" || msg.type==="file")
|
||
// let file=lastTwoUserMsgs[1] // lastTwoUserMsgs.every((msg)=>msg.type==="text" || msg.type==="image" || msg.type==="video" || msg.type==="file")
|
||
|
||
// 2. 提取文本内容和文件列表
|
||
let refreshText = null
|
||
const refreshFiles: UploadFile[] = []
|
||
if (msg1 && msg1.type === 'text' && msg2 && msg2.type !== 'text') {
|
||
msg1.mask = 'new'
|
||
msg2.mask = 'new'
|
||
refreshFiles.push(msg1)
|
||
refreshFiles.push(msg2)
|
||
} else if (msg1.type === 'text' && msg1.role === 'user' && !msg2) {
|
||
msg1.mask = 'new'
|
||
refreshFiles.push(msg1)
|
||
} else if (msg2.type === 'text' && msg2.role === 'user' && !msg1) {
|
||
msg2.mask = 'new'
|
||
refreshFiles.push(msg2)
|
||
} else {
|
||
msg2.mask = 'new'
|
||
refreshFiles.push(msg2)
|
||
}
|
||
|
||
// lastTwoUserMsgs.forEach((msg,i) => {
|
||
// console.log('msg: ',msg);
|
||
// if (msg.type === 'text' && msg.role==="user") {
|
||
// refreshText = msg.content // 总是取最新的文本
|
||
// refreshFiles.push({
|
||
// content:msg.content,
|
||
// type:"text",
|
||
// role:"user",
|
||
// timestamp:new Date(),
|
||
// mask:"new"
|
||
// })
|
||
// } else if(msg.type==="video"){
|
||
// msg.mask="new"
|
||
// refreshFiles.push(msg)
|
||
// // msg.content.forEach((file : any) => {
|
||
// // console.log('lastTwoUserMsgs file: ',file);
|
||
|
||
// // refreshFiles.push({
|
||
// // id: guid.getGuid(),
|
||
// // url: file.video_url.url,
|
||
// // status: 'success',
|
||
// // name: file.name || '未命名文件',
|
||
// // size: file.size || 0,
|
||
// // uploadFileType: file.uploadFileType || detectFileType(file.video_url.url),
|
||
// // })
|
||
// // })
|
||
// }else if(msg.type==="image"){
|
||
// msg.mask="new"
|
||
// refreshFiles.push(msg)
|
||
// // msg.content.forEach((file : any) => {
|
||
// // console.log('lastTwoUserMsgs file: ',file);
|
||
// // refreshFiles.push({
|
||
// // id: guid.getGuid(),
|
||
// // url: file.image_url.url,
|
||
// // status: 'success',
|
||
// // name: file.name || '未命名文件',
|
||
// // size: file.size || 0,
|
||
// // uploadFileType: file.uploadFileType || detectFileType(file.image_url.url),
|
||
// // })
|
||
// // })
|
||
// }else{
|
||
// msg.mask="new"
|
||
// refreshFiles.push(msg)
|
||
// // msg.content.forEach((file : any) => {
|
||
// // console.log('lastTwoUserMsgs file: ',file);
|
||
// // refreshFiles.push({
|
||
// // id: guid.getGuid(),
|
||
// // url: file.content,
|
||
// // status: 'success',
|
||
// // name: file.name || '未命名文件',
|
||
// // size: file.size || 0,
|
||
// // uploadFileType: file.uploadFileType || detectFileType(file.content),
|
||
// // })
|
||
// // })
|
||
// }
|
||
// })
|
||
|
||
// 3. 更新输入框和上传列表
|
||
// inputText.value = refreshText
|
||
// uploadList.splice(0, uploadList.length, ...refreshFiles)
|
||
refreshFiles.forEach((ele) => {
|
||
messages.push(ele)
|
||
})
|
||
refreshSend.value = true
|
||
// inputText.value = refreshText
|
||
// 4. 自动触发发送（模拟用户点击发送按钮）
|
||
setTimeout(() => {
|
||
sendText()
|
||
}, 100)
|
||
}
|
||
|
||
// 文件类型检测函数（根据URL后缀）
|
||
function detectFileType(url: string) {
|
||
console.log('url: ', url)
|
||
const ext = url.split('.').pop()?.toLowerCase()
|
||
if (['jpg', 'png', 'jpeg', 'gif'].includes(ext!)) return uploadFileTypeEm.image
|
||
if (['mp4', 'mov', 'avi'].includes(ext!)) return uploadFileTypeEm.video
|
||
return uploadFileTypeEm.file
|
||
}
|
||
const knowledgeOpen = ref(false)
|
||
async function toggleKnowledge() {
|
||
if (chatMode.value !== 'tongyi-app') {
|
||
chatMode.value = 'tongyi-app'
|
||
isUserOk = true // 用户确认 tongyi-app
|
||
await createChatSession()
|
||
messages.splice(0, messages.length)
|
||
} else {
|
||
chatMode.value = 'qwen-vl-plus'
|
||
isUserOk = false // 取消确认 tongyi-app
|
||
}
|
||
knowledgeOpen.value = !knowledgeOpen.value
|
||
showActions.value = false
|
||
rotation.value = 0
|
||
}
|
||
|
||
//收起键盘
|
||
const closeKeyboard = () => {
|
||
uni.hideKeyboard()
|
||
rotation.value = 0
|
||
}
|
||
|
||
//输入框聚焦事件
|
||
const onFocus = () => {
|
||
showActions.value = false
|
||
rotation.value = 0
|
||
}
|
||
|
||
const showPreview = ref(false)
|
||
const previewUrl = ref('') // 预览图片
|
||
const previewVideoUrl = ref('') // 预览视频
|
||
const previewTop = ref(30) // 距离顶部30px
|
||
const handleImageClick = (src) => {
|
||
// let fileList = officeFileTypeList.value
|
||
// officeFileTypeList=ref(['.docx','.doc','.excel','.pdf'])
|
||
// const otherFileType=ref(['.txt'])
|
||
// const otherFileType=ref(['.txt'])
|
||
if (picFileType.value.includes(isFileType(src))) {
|
||
previewUrl.value = src
|
||
showPreview.value = true
|
||
} else if (videoFileType.value.includes(isFileType(src))) {
|
||
previewVideoUrl.value = src
|
||
showPreview.value = true
|
||
} else if (officeFileTypeList.value.includes(isFileType(src))) {
|
||
previewFile(src)
|
||
}
|
||
}
|
||
|
||
const closePreview = () => {
|
||
showPreview.value = false
|
||
previewUrl.value = ''
|
||
previewVideoUrl.value = ''
|
||
}
|
||
const reload = () => {
|
||
const currentWebview = plus.webview.currentWebview()
|
||
currentWebview.reload(true)
|
||
}
|
||
|
||
const isFileType = (name: string) => {
|
||
let reg = /\.[\w\d]+$/
|
||
let match = name.match(reg)
|
||
return match ? match[0] : null
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.slide-up-enter-active,
|
||
.slide-up-leave-active {
|
||
transition: transform 0.3s ease-out;
|
||
}
|
||
|
||
.slide-up-enter-from,
|
||
.slide-up-leave-to {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
.slide-up-enter-to,
|
||
.slide-up-leave-from {
|
||
transform: translateY(0%);
|
||
}
|
||
|
||
.font-pf {
|
||
font-family: PingFangSC-Medium, sans-serif;
|
||
}
|
||
|
||
.page {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f8f8f8;
|
||
}
|
||
/* 顶部导航 */
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.nav-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
/* 遮罩 */
|
||
.overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.4);
|
||
}
|
||
/* 弹窗容器 */
|
||
.popup {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 60%;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
border-radius: 12rpx 12rpx 0 0;
|
||
}
|
||
|
||
.popup.fullscreen {
|
||
height: 90%;
|
||
border-radius: 0;
|
||
}
|
||
/* Header */
|
||
.popup-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
padding: 0 24rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.popup-header .icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.popup-header .title {
|
||
flex: 1;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
/* 内容区 */
|
||
.popup-body {
|
||
flex: 1;
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
.date-label {
|
||
padding: 0 32rpx;
|
||
margin-top: 24rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.history-item {
|
||
padding: 24rpx 32rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
|
||
.history-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.tops {
|
||
padding-top: var(--status-bar-height);
|
||
}
|
||
.flex-i {
|
||
display: flex !important;
|
||
}
|
||
</style>
|