554 lines
16 KiB
Vue
554 lines
16 KiB
Vue
<route lang="json5" type="page">
|
||
{
|
||
layout: 'default',
|
||
style: {
|
||
navigationBarHidden: true,
|
||
},
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<div class="flex flex-col h-screen bg-gray-50">
|
||
<!-- Navigation Bar -->
|
||
<div class="flex-none flex items-center justify-between px-5 py-3 bg-white shadow-md h-10">
|
||
<image src="/static/aichat/back.png" class="w-2 h-4" @click="goBack" />
|
||
<div class="text-lg font-medium">小墨</div>
|
||
<div class="flex items-center space-x-3">
|
||
<image src="/static/aichat/time.png" class="w-5 h-5" @click="viewHistory" />
|
||
<image src="/static/aichat/new.png" class="w-5 h-5" @click="newChat" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息区 -->
|
||
<div :class="['flex relative', showActions ? 'h-105' : 'h-130']">
|
||
<!-- 背景层 -->
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||
<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>
|
||
z
|
||
<div
|
||
ref="scrollEl"
|
||
class="flex-1 overflow-y-auto bg-gray-50"
|
||
:class="showActions ? 'pb-44' : 'pb-16'"
|
||
>
|
||
<div :class="['relative z-10 px-4 py-6', showActions ? 'mb--11 h-105' : 'mb--21 h-135']">
|
||
<template v-for="(msg, idx) in messages" :key="idx">
|
||
<view v-if="shouldShowTimestamp(idx)" class="text-center text-xs text-gray-500 my-2">
|
||
{{ formatDayGroup(msg.timestamp) }}
|
||
</view>
|
||
<view
|
||
class="flex items-start"
|
||
:class="msg.role === 'assistant' ? 'justify-start' : 'justify-end'"
|
||
>
|
||
<image
|
||
v-if="msg.role === 'assistant'"
|
||
:src="assistantAvatar"
|
||
class="w-8 h-8 rounded-full mr-2 mt-1"
|
||
/>
|
||
<view class="relative max-w-[70%] mt-4 mb-3">
|
||
<view
|
||
:class="[
|
||
'absolute -top-4 text-xs text-gray-400',
|
||
msg.role === 'assistant' ? 'left-0' : 'right-0',
|
||
]"
|
||
>
|
||
{{ formatTimeShort(msg.timestamp) }}
|
||
</view>
|
||
<view
|
||
:class="[
|
||
'py-2 px-3 rounded-lg break-words mt-1',
|
||
msg.role === 'assistant'
|
||
? 'bg-[#f9f8fd] text-black shadow'
|
||
: 'bg-[#45299e] text-white',
|
||
]"
|
||
>
|
||
{{ msg.content }}
|
||
</view>
|
||
<view
|
||
v-if="msg.role === 'assistant' && msg.type === 'text'"
|
||
class="absolute bottom-0 flex space-x-3"
|
||
>
|
||
<image src="/static/aichat/copy.png" class="w-4 h-4" @click="copyText(msg)" />
|
||
<image
|
||
src="/static/aichat/resect.png"
|
||
class="w-4 h-4"
|
||
@click="refreshText(msg)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<image
|
||
v-if="msg.role === 'user'"
|
||
:src="userAvatar"
|
||
class="w-8 h-8 rounded-full ml-2 mt-1"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部上传预览 + 输入区 -->
|
||
<div
|
||
:class="[
|
||
'fixed bottom-0 left-0 right-0 bg-white z-[80] overflow-hidden transition-all duration-300',
|
||
showActions ? 'h-45' : 'h-20',
|
||
]"
|
||
>
|
||
<!-- 上传列表 -->
|
||
<div v-if="uploadList.length" class="flex px-4 py-2 overflow-x-auto space-x-3 bg-white">
|
||
<div
|
||
v-for="item in uploadList"
|
||
:key="item.id"
|
||
class="relative w-16 h-16 rounded overflow-hidden"
|
||
>
|
||
<!-- 预览图，成功后用后端返回的 URL；上传中可以先用本地预览 -->
|
||
<img
|
||
:src="item.url || item.localPath"
|
||
class="w-full h-full object-cover"
|
||
@click="previewImage(item.url || item.localPath)"
|
||
/>
|
||
|
||
<!-- 关闭按钮 -->
|
||
<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"
|
||
@click="removeImage(item.id)"
|
||
>
|
||
×
|
||
</div>
|
||
|
||
<!-- 进度 / 成功 / 失败 -->
|
||
<div
|
||
class="absolute bottom-0 left-0 w-full text-xs text-center text-white py-1"
|
||
:class="{
|
||
'bg-black bg-opacity-50': item.status === 'uploading',
|
||
'bg-green-600 bg-opacity-50': item.status === 'success',
|
||
'bg-red-600 bg-opacity-50': item.status === 'fail',
|
||
}"
|
||
>
|
||
<template v-if="item.status === 'uploading'">{{ item.progress }}%</template>
|
||
<template v-else-if="item.status === 'success'">✔ 成功</template>
|
||
<template v-else>
|
||
✖ 失败
|
||
<span class="cursor-pointer" @click.stop="retry(item)">↻</span>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输入 + 切换 -->
|
||
<view class="flex items-center px-4 py-2.5 border-t border-solid border-[#E7E7E7]">
|
||
<input
|
||
v-model="inputText"
|
||
@keyup.enter="sendText"
|
||
placeholder="想对我说点什么～"
|
||
class="flex-1 h-10 px-3 border border-gray-100 bg-[#f9f9f9] rounded-full focus:outline-none"
|
||
/>
|
||
<image src="/static/aichat/add-circle.png" class="w-7 h-7 mx-3" @click="toggleActions" />
|
||
<image
|
||
src="/static/aichat/enter.png"
|
||
class="w-7 h-7"
|
||
@click="sendText"
|
||
:disabled="loading"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 操作面板 -->
|
||
<transition name="slide-up">
|
||
<view
|
||
v-show="showActions"
|
||
class="flex justify-around items-center h-20 border-t border-solid border-[#E7E7E7] bg-white"
|
||
>
|
||
<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="onTakePhoto" />
|
||
<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>
|
||
</div>
|
||
1
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, nextTick } from 'vue'
|
||
import dayjs from 'dayjs'
|
||
import { useUserStore } from '@/store'
|
||
import { getEnvBaseUrl } from '@/utils'
|
||
import type { IGptRequestBody } from '@/service/index/foo'
|
||
interface IUpload {
|
||
id: number
|
||
url: string
|
||
filePath: string
|
||
status: 'uploading' | 'success' | 'fail'
|
||
progress: number
|
||
detail: string
|
||
mask: string
|
||
}
|
||
interface IMessage {
|
||
role: 'user' | 'assistant'
|
||
type: 'text' | 'images'
|
||
content: string | string[]
|
||
timestamp: Date
|
||
}
|
||
interface UploadItem {
|
||
id: string
|
||
localPath: string // 本地临时路径，用于预览
|
||
url: string // 后端返回的在线 URL
|
||
status: 'uploading' | 'success' | 'fail'
|
||
progress: number // 上传进度 %
|
||
}
|
||
const assistantAvatar =
|
||
'https://dci-file-new.bj.bcebos.com/fonchain-main/test/runtime/image/avatar/40/b8ed6fea-6662-416d-8bb3-1fd8a8197061.jpg'
|
||
const userAvatar = assistantAvatar
|
||
const baseUrl = getEnvBaseUrl()
|
||
const token = useUserStore().userInfo.token || import.meta.env.VITE_DEV_TOKEN || ''
|
||
const messages = reactive<IMessage[]>([])
|
||
const inputText = ref('')
|
||
const loading = ref(false)
|
||
const showActions = ref(false)
|
||
const scrollEl = ref<HTMLElement>()
|
||
const uploadList = reactive<IUpload[]>([])
|
||
const uploadId = ref(0)
|
||
|
||
function scrollToBottom() {
|
||
const el = scrollEl.value!
|
||
nextTick(() => {
|
||
el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })
|
||
})
|
||
}
|
||
function addMessage(msg: IMessage) {
|
||
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() {
|
||
window.history.back()
|
||
}
|
||
function viewHistory() {
|
||
uni.navigateTo({ url: '/pages/history/history' })
|
||
}
|
||
function newChat() {
|
||
messages.splice(0)
|
||
inputText.value = ''
|
||
}
|
||
|
||
function toggleActions() {
|
||
showActions.value = !showActions.value
|
||
scrollToBottom()
|
||
}
|
||
|
||
// 相册
|
||
function onPickImage() {
|
||
uni.chooseImage({
|
||
count: 10,
|
||
success: (res: any) => {
|
||
res.tempFilePaths.forEach((path) => {
|
||
uploadId.value += 1
|
||
const id = uploadId.value
|
||
const upload: IUpload = { id, url: path, filePath: path, status: 'uploading', progress: 0 }
|
||
uploadList.push(upload)
|
||
uploadFile(path, upload)
|
||
})
|
||
},
|
||
})
|
||
}
|
||
// 拍照
|
||
function onTakePhoto() {
|
||
uni.chooseImage({
|
||
sourceType: ['camera'],
|
||
count: 1,
|
||
success: (res: any) => {
|
||
const path = res.tempFilePaths[0]
|
||
uploadId.value += 1
|
||
const id = uploadId.value
|
||
const upload: IUpload = { id, url: path, filePath: path, status: 'uploading', progress: 0 }
|
||
uploadList.push(upload)
|
||
uploadFile(path, upload)
|
||
},
|
||
})
|
||
}
|
||
// 文件
|
||
// 触发文件选择后，或拍照后，或其它入口都调用这个
|
||
function onPickFile(path: string, detail = '') {
|
||
const id = Date.now().toString()
|
||
const item: UploadItem = {
|
||
id,
|
||
localPath: path,
|
||
url: '',
|
||
status: 'uploading',
|
||
progress: 0,
|
||
}
|
||
uploadList.push(item)
|
||
startUpload(item, detail)
|
||
}
|
||
|
||
interface UploadFile {
|
||
uid: string
|
||
name: string
|
||
size: number
|
||
progress: number // 上传进度 0-100
|
||
status: 'uploading' | 'success' | 'error'
|
||
file: File
|
||
url?: string // 本地预览URL或服务器返回的URL
|
||
}
|
||
const filesList = ref<UploadFile[]>([])
|
||
async function startUpload(item: UploadItem, detail: string) {
|
||
const userStore = useUserStore()
|
||
|
||
// 标记开始上传
|
||
item.status = 'uploading'
|
||
item.progress = 0
|
||
|
||
// 发起上传 (不带 success/fail 回调)
|
||
// @ts-ignore: uni.uploadFile 返回 UploadTask 兼具 Promise 接口
|
||
const uploadTask: UniApp.UploadTask & Promise<UniApp.UploadFileRes> = uni.uploadFile({
|
||
// url: 'http://114.218.158.24:9020/upload/multi',
|
||
url: 'https://ukw0y1.laf.run/upload',
|
||
filePath: item.localPath,
|
||
name: 'k1', // 这里的 name 依然是 formData 里的字段名，后端会以此为 key
|
||
formData: {
|
||
source: 'chat',
|
||
mask: '2076',
|
||
detail,
|
||
type: 'image',
|
||
},
|
||
})
|
||
|
||
// 监听进度
|
||
uploadTask.onProgressUpdate((res: { progress: number }) => {
|
||
item.progress = res.progress
|
||
})
|
||
|
||
// 3s 超时自动 abort
|
||
const timeoutId = setTimeout(() => {
|
||
if (item.status === 'uploading') {
|
||
uploadTask.abort()
|
||
item.status = 'fail'
|
||
}
|
||
}, 3000)
|
||
|
||
try {
|
||
// 等待上传完成
|
||
const res = await uploadTask
|
||
clearTimeout(timeoutId)
|
||
|
||
// 解析后端 JSON
|
||
const resp = JSON.parse(res.data) as {
|
||
code: number
|
||
data: Record<string, string>
|
||
}
|
||
console.log(resp, 'resp')
|
||
if (resp.code === 0 && resp.data) {
|
||
// 遍历 data 对象，找第一个非空值
|
||
const urls = Object.values(resp.data).filter((u) => !!u)
|
||
if (urls.length > 0) {
|
||
item.url = urls[0]
|
||
item.status = 'success'
|
||
} else {
|
||
console.warn('没有拿到任何上传后的 URL')
|
||
item.status = 'fail'
|
||
}
|
||
} else {
|
||
console.warn('后端返回异常 code=', resp.code)
|
||
item.status = 'fail'
|
||
}
|
||
} catch (err) {
|
||
clearTimeout(timeoutId)
|
||
console.error('uploadFile 出错：', err)
|
||
item.status = 'fail'
|
||
}
|
||
}
|
||
// 点击重试
|
||
function retry(item: UploadItem) {
|
||
item.status = 'uploading'
|
||
item.progress = 0
|
||
startUpload(item, '') // 如果需要 detail，可缓存后传入
|
||
}
|
||
// 删除
|
||
function removeImage(id: string) {
|
||
const idx = uploadList.findIndex((i) => i.id === id)
|
||
if (idx >= 0) uploadList.splice(idx, 1)
|
||
}
|
||
// 预览（可自行实现 uni.previewImage 等）
|
||
function previewImage(url: string) {
|
||
uni.previewImage({ urls: [url] })
|
||
}
|
||
// 上传使用 postUpload
|
||
async function uploadFile(path: string, upload: IUpload) {
|
||
// 标记开始
|
||
upload.status = 'uploading'
|
||
|
||
try {
|
||
// @ts-ignore uni.uploadFile 返回 Promise
|
||
const res: UniApp.UploadFileRes = await uni.uploadFile({
|
||
// url: 'http://114.218.158.24:9020/upload/multi',
|
||
url: 'https://ukw0y1.laf.run/upload',
|
||
filePath: path,
|
||
name: 'file', // 这个 name 依然是 formData key，后端会把它用在 data.data 对象里
|
||
formData: {
|
||
source: 'chat',
|
||
mask: '2076',
|
||
type: 'image',
|
||
k1: 'xxxx.png',
|
||
k2: 'xxxx.png',
|
||
},
|
||
})
|
||
|
||
// 解析后端 JSON
|
||
const resp = JSON.parse(res.data) as {
|
||
code: number
|
||
data: Record<string, string>
|
||
}
|
||
|
||
if (resp.code === 0 && resp.data) {
|
||
// 找到 data 对象里第一个有值的字段并赋给 upload.url
|
||
let found = false
|
||
for (const key in resp.data) {
|
||
const url = resp.data[key]
|
||
if (url) {
|
||
upload.url = url
|
||
found = true
|
||
break
|
||
}
|
||
}
|
||
|
||
if (found) {
|
||
upload.status = 'success'
|
||
} else {
|
||
console.warn('没有取到任何上传后的 URL')
|
||
upload.status = 'fail'
|
||
}
|
||
} else {
|
||
console.warn('后端返回异常 code=', resp.code)
|
||
upload.status = 'fail'
|
||
}
|
||
} catch (err) {
|
||
console.error('uploadFile 出错：', err)
|
||
upload.status = 'fail'
|
||
}
|
||
}
|
||
async function sendText() {
|
||
const text = inputText.value.trim()
|
||
if (!text || loading.value) return
|
||
|
||
addMessage({ role: 'user', type: 'text', content: text, timestamp: new Date() })
|
||
inputText.value = ''
|
||
loading.value = true
|
||
|
||
const aiMsg: IMessage = {
|
||
role: 'assistant',
|
||
type: 'text',
|
||
content: '',
|
||
timestamp: new Date(),
|
||
}
|
||
addMessage(aiMsg)
|
||
|
||
const body: IGptRequestBody = {
|
||
model: 'gpt-4-vision-preview',
|
||
max_tokens: 1000,
|
||
temperature: 1,
|
||
top_p: 1,
|
||
presence_penalty: 0,
|
||
frequency_penalty: 0,
|
||
messages: [{ role: 'user', content: [{ type: 'text', text }] }],
|
||
stream: true,
|
||
}
|
||
|
||
try {
|
||
const resp = await fetch(baseUrl + '/chat/completion', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', Authorization: token },
|
||
body: JSON.stringify(body),
|
||
})
|
||
const reader = resp.body!.getReader()
|
||
const decoder = new TextDecoder()
|
||
let buffer = ''
|
||
let done = false
|
||
|
||
while (!done) {
|
||
const { value, done: streamDone } = await reader.read()
|
||
done = streamDone
|
||
if (value) {
|
||
buffer += decoder.decode(value, { stream: true })
|
||
const parts = buffer.split('data: ')
|
||
buffer = parts.pop()!
|
||
for (const part of parts) {
|
||
scrollToBottom()
|
||
console.log('1')
|
||
const chunk = part.trim()
|
||
if (chunk === '[DONE]') {
|
||
done = true
|
||
break
|
||
}
|
||
try {
|
||
const json = JSON.parse(chunk)
|
||
const delta = json.choices?.[0]?.delta?.content
|
||
if (delta) {
|
||
aiMsg.content += delta
|
||
scrollToBottom()
|
||
console.log('2')
|
||
}
|
||
} catch {}
|
||
}
|
||
}
|
||
}
|
||
scrollToBottom()
|
||
} catch (err) {
|
||
console.error(err)
|
||
} finally {
|
||
loading.value = false
|
||
showActions.value = false
|
||
}
|
||
}
|
||
|
||
function copyText(msg: IMessage) {
|
||
if (typeof msg.content === 'string') {
|
||
navigator.clipboard.writeText(msg.content)
|
||
alert('已复制')
|
||
}
|
||
}
|
||
function refreshText(msg: IMessage) {
|
||
if (typeof msg.content === 'string') {
|
||
inputText.value = msg.content
|
||
const idx = messages.indexOf(msg)
|
||
messages.splice(idx, 1)
|
||
sendText()
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
</style>
|