chore: 删除无效文件
This commit is contained in:
@@ -1,317 +0,0 @@
|
||||
<template>
|
||||
<div class="asistant-container flex flex-column">
|
||||
<div class="header">
|
||||
<HeaderTitle hasSetting styleType="3" @clickProfile="handleClickProfile" />
|
||||
</div>
|
||||
<div class="content flex-1">
|
||||
<NoticeList
|
||||
ref="noticeListRef"
|
||||
:list="messageList"
|
||||
:is-streaming="isStreaming"
|
||||
:streaming-message="currentStreamingMessage"
|
||||
/>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<InputArea @send-message="handleSendMessage" />
|
||||
<div class="continue flex">
|
||||
<div class="btn flex flex-center" @click="handleContinue">Generate</div>
|
||||
</div>
|
||||
</div>
|
||||
<Profile ref="profileRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import NoticeList from './components/NoticeList.vue'
|
||||
import InputArea from './components/InputArea.vue'
|
||||
import Profile from '../Workshop/profile.vue'
|
||||
import { ref, onMounted, onUnmounted, onActivated } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserInfoStore, useGenerateStore } from '@/stores'
|
||||
import { streamChatAddress } from '@/api/workshop'
|
||||
import { generateUUID } from '@/utils/tools'
|
||||
import { showToast } from 'vant'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const generateStore = useGenerateStore()
|
||||
const userInfoStore = useUserInfoStore()
|
||||
|
||||
defineOptions({
|
||||
name: 'asistant'
|
||||
})
|
||||
|
||||
// 定义NoticeList组件引用类型
|
||||
interface NoticeListRef {
|
||||
simulateSendMessage: () => void
|
||||
scrollToBottom: () => void
|
||||
}
|
||||
// 定义消息类型
|
||||
interface ChatMessage {
|
||||
sessionId: string | number
|
||||
type: string
|
||||
content: string
|
||||
timestamp: string
|
||||
id?: string
|
||||
self?: boolean
|
||||
}
|
||||
|
||||
const profileRef = ref<InstanceType<typeof Profile> | null>(null)
|
||||
const handleClickProfile = () => {
|
||||
profileRef.value.open()
|
||||
}
|
||||
|
||||
const noticeListRef = ref<NoticeListRef | null>(null)
|
||||
const messageList = ref<ChatMessage[]>([])
|
||||
|
||||
// 流式消息相关状态
|
||||
const isStreaming = ref<boolean>(false)
|
||||
const currentStreamingMessage = ref<ChatMessage | null>(null)
|
||||
const sessionId = ref<string>('')
|
||||
|
||||
const sendPrefilledMessage = () => {
|
||||
const { message, ...restQuery } = route.query
|
||||
if (typeof message === 'string' && message.trim()) {
|
||||
handleSendMessage(message)
|
||||
router.replace({
|
||||
path: route.path,
|
||||
query: restQuery
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('1111111111111');
|
||||
|
||||
sessionId.value = Math.floor(Date.now() / 1000).toString()
|
||||
generateStore.setSessionId(sessionId.value)
|
||||
})
|
||||
|
||||
onActivated(() => {
|
||||
sendPrefilledMessage()
|
||||
noticeListRef.value?.scrollToBottom()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
abort.abort()
|
||||
})
|
||||
|
||||
const handleSendMessage = (message: string): void => {
|
||||
console.log('发送:', message)
|
||||
|
||||
// 添加用户消息到列表
|
||||
const userMessage: ChatMessage = {
|
||||
id: generateUUID(),
|
||||
type: 'text',
|
||||
content: message,
|
||||
timestamp: new Date().toISOString(),
|
||||
sessionId: sessionId.value,
|
||||
self: true
|
||||
}
|
||||
messageList.value.push(userMessage)
|
||||
|
||||
// 开始流式接收AI回复
|
||||
handleFetchMessage(message)
|
||||
}
|
||||
|
||||
const abort = new AbortController()
|
||||
const handleFetchMessage = (message: string) => {
|
||||
const params = {
|
||||
message: message,
|
||||
sessionId: sessionId.value,
|
||||
gender: userInfoStore.state.generateParams.sex
|
||||
}
|
||||
|
||||
// 创建AI消息对象
|
||||
const aiMessage: ChatMessage = {
|
||||
id: generateUUID(),
|
||||
type: 'text',
|
||||
content: '',
|
||||
timestamp: new Date().toISOString(),
|
||||
sessionId: sessionId.value
|
||||
}
|
||||
|
||||
// 添加到消息列表
|
||||
isStreaming.value = true
|
||||
messageList.value.push(aiMessage)
|
||||
currentStreamingMessage.value = aiMessage
|
||||
|
||||
// 直接使用 fetch 进行流式请求
|
||||
const token = userInfoStore.state.token
|
||||
const baseURL = import.meta.env.MODE === 'development' ? '' : import.meta.env.VITE_APP_URL
|
||||
|
||||
// 构建查询参数
|
||||
const queryParams = new URLSearchParams()
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
queryParams.append(key, String(value))
|
||||
})
|
||||
|
||||
const url = `${baseURL}${streamChatAddress}?${queryParams.toString()}`
|
||||
|
||||
fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
Authorization: token,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
credentials: 'include'
|
||||
})
|
||||
.then(async (response) => {
|
||||
// 检查响应内容类型，判断是否为流式响应
|
||||
const contentType = response.headers.get('content-type') || ''
|
||||
const isStreamResponse =
|
||||
contentType.includes('text/event-stream') || contentType.includes('stream')
|
||||
|
||||
if (!response.ok) {
|
||||
// 非流式错误响应，使用 text() 读取错误信息
|
||||
const errorText = await response.text()
|
||||
console.error('请求错误:', errorText)
|
||||
showToast({
|
||||
message: `failed to fetch: ${response.status}`,
|
||||
position: 'top',
|
||||
icon: 'none'
|
||||
})
|
||||
throw new Error(`发起对话错误--- ${response.status}: ${errorText}`)
|
||||
}
|
||||
|
||||
// 不是流式响应，使用 text()读取错误信息
|
||||
if (!isStreamResponse) {
|
||||
const text = await response.text()
|
||||
|
||||
try {
|
||||
const errorData = JSON.parse(text)
|
||||
if (errorData.message || errorData.error) {
|
||||
showToast({
|
||||
message: errorData.message || errorData.error || '请求失败',
|
||||
position: 'top',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
// 如果不是 JSON，直接显示文本内容
|
||||
showToast({
|
||||
message: text || '请求失败',
|
||||
position: 'top',
|
||||
icon: 'none'
|
||||
})
|
||||
throw new Error(text || '请求失败')
|
||||
}
|
||||
|
||||
isStreaming.value = false
|
||||
currentStreamingMessage.value = null
|
||||
return
|
||||
}
|
||||
|
||||
// 流式响应处理
|
||||
let contentBody = ''
|
||||
let buffer = ''
|
||||
const reader = response.body?.getReader()
|
||||
if (!reader) throw new Error('无法获取流读取器')
|
||||
|
||||
const decoder = new TextDecoder()
|
||||
|
||||
try {
|
||||
let flag = true
|
||||
while (flag) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) {
|
||||
console.log('传输结束 end---', contentBody)
|
||||
isStreaming.value = false
|
||||
currentStreamingMessage.value = null
|
||||
flag = false
|
||||
break
|
||||
}
|
||||
|
||||
buffer += decoder.decode(value, { stream: true })
|
||||
|
||||
// 优先按空行拆分事件块（SSE标准）
|
||||
let events = buffer.split(/\n\n/)
|
||||
buffer = events.pop() // 保留不完整块
|
||||
|
||||
for (let event of events) {
|
||||
if (!event.trim()) continue
|
||||
|
||||
// 过滤掉 id: 等字段，只取 data:
|
||||
const dataLines = event
|
||||
.split(/\n/)
|
||||
.filter((line) => line.startsWith('data:'))
|
||||
.map((line) => line.replace(/^data:\s*/, '').trim())
|
||||
|
||||
if (dataLines.length === 0) continue
|
||||
const jsonText = dataLines.join('\n')
|
||||
|
||||
try {
|
||||
const jsonData = JSON.parse(jsonText)
|
||||
if (jsonData.content && jsonData.content.length > 0 && jsonData.type !== 'end') {
|
||||
contentBody += jsonData.content
|
||||
currentStreamingMessage.value.content = contentBody
|
||||
}
|
||||
} catch (e) {
|
||||
// JSON 不完整：保留到下一次循环
|
||||
if (!jsonText.trim().endsWith('}')) {
|
||||
buffer = 'data: ' + jsonText // 重新放回缓存
|
||||
continue
|
||||
} else {
|
||||
console.warn('⚠️ JSON 格式错误，跳过:', jsonText)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('流式传输错误:', error)
|
||||
isStreaming.value = false
|
||||
currentStreamingMessage.value = null
|
||||
} finally {
|
||||
reader.releaseLock()
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('fetch请求失败:', error)
|
||||
isStreaming.value = false
|
||||
currentStreamingMessage.value = null
|
||||
})
|
||||
}
|
||||
|
||||
const handleContinue = () => {
|
||||
// router.push('/workshop/selectStyle')
|
||||
// 模拟接口之后再跳转
|
||||
generateStore.clearProductData()
|
||||
router.push('/workshop/selectStyle')
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.asistant-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
|
||||
.continue {
|
||||
font-family: 'satoshiRegular';
|
||||
font-size: 3.6rem;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
padding: 2.6rem 4.5rem;
|
||||
flex-direction: row-reverse;
|
||||
.btn {
|
||||
border-radius: 0.7rem;
|
||||
background-color: #000;
|
||||
width: 24.6rem;
|
||||
height: 6.7rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user