对话完成
This commit is contained in:
14
src/App.vue
14
src/App.vue
@@ -7,4 +7,16 @@ import { RouterView } from 'vue-router'
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,13 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [],
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'aiChatPage',
|
||||
component: () => import('../views/AiChatPage.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
516
src/views/AiChatPage.vue
Normal file
516
src/views/AiChatPage.vue
Normal file
@@ -0,0 +1,516 @@
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
AttachmentsProps,
|
||||
BubbleListProps,
|
||||
ConversationsProps,
|
||||
PromptsProps,
|
||||
} from 'ant-design-x-vue'
|
||||
import type { VNode } from 'vue'
|
||||
import {
|
||||
CloudUploadOutlined,
|
||||
CommentOutlined,
|
||||
EllipsisOutlined,
|
||||
FireOutlined,
|
||||
HeartOutlined,
|
||||
PaperClipOutlined,
|
||||
PlusOutlined,
|
||||
ReadOutlined,
|
||||
ShareAltOutlined,
|
||||
SmileOutlined,
|
||||
} from '@ant-design/icons-vue'
|
||||
import { Badge, Button, Flex, Space, Typography, theme } from 'ant-design-vue'
|
||||
import {
|
||||
Attachments,
|
||||
Bubble,
|
||||
Conversations,
|
||||
Prompts,
|
||||
Sender,
|
||||
Welcome,
|
||||
} from 'ant-design-x-vue'
|
||||
import { computed, h, ref, watch } from 'vue'
|
||||
|
||||
const { token } = theme.useToken()
|
||||
|
||||
const styles = computed(() => {
|
||||
return {
|
||||
layout: {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
'border-radius': '0',
|
||||
display: 'flex',
|
||||
background: `${token.value.colorBgContainer}`,
|
||||
'font-family': `AlibabaPuHuiTi, ${token.value.fontFamily}, sans-serif`,
|
||||
},
|
||||
menu: {
|
||||
background: `${token.value.colorBgLayout}80`,
|
||||
width: '280px',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
},
|
||||
conversations: {
|
||||
padding: '0 12px',
|
||||
flex: 1,
|
||||
'overflow-y': 'auto',
|
||||
},
|
||||
chat: {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
'max-width': '1300px',
|
||||
margin: '0 auto',
|
||||
'box-sizing': 'border-box',
|
||||
display: 'flex',
|
||||
'flex-direction': 'column',
|
||||
padding: `${token.value.paddingLG}px`,
|
||||
gap: '16px',
|
||||
},
|
||||
messages: {
|
||||
flex: 1,
|
||||
},
|
||||
placeholder: {
|
||||
'padding-top': '32px',
|
||||
'text-align': 'left',
|
||||
flex: 1,
|
||||
},
|
||||
sender: {
|
||||
'box-shadow': token.value.boxShadow,
|
||||
},
|
||||
logo: {
|
||||
display: 'flex',
|
||||
height: '72px',
|
||||
'align-items': 'center',
|
||||
'justify-content': 'start',
|
||||
padding: '0 24px',
|
||||
'box-sizing': 'border-box',
|
||||
},
|
||||
'logo-img': {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
display: 'inline-block',
|
||||
},
|
||||
'logo-span': {
|
||||
display: 'inline-block',
|
||||
margin: '0 8px',
|
||||
'font-weight': 'bold',
|
||||
color: token.value.colorText,
|
||||
'font-size': '16px',
|
||||
},
|
||||
addBtn: {
|
||||
background: '#1677ff0f',
|
||||
border: '1px solid #1677ff34',
|
||||
width: 'calc(100% - 24px)',
|
||||
margin: '0 12px 24px 12px',
|
||||
},
|
||||
} as const
|
||||
})
|
||||
|
||||
defineOptions({ name: 'PlaygroundIndependentSetup' })
|
||||
|
||||
function renderTitle(icon: VNode, title: string) {
|
||||
return h(Space, { align: 'start' }, () => [icon, h('span', title)])
|
||||
}
|
||||
|
||||
// 对话列表记录
|
||||
const defaultConversationsItems = [
|
||||
{
|
||||
key: '0',
|
||||
label: '什么是Ant Design X Vue?',
|
||||
},
|
||||
]
|
||||
|
||||
// 提示集列表记录
|
||||
const placeholderPromptsItems: PromptsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
label: renderTitle(h(FireOutlined, { style: { color: '#FF4D4F' } }), '热门话题'),
|
||||
description: '你感兴趣的话题是什么？',
|
||||
children: [
|
||||
{
|
||||
key: '1-1',
|
||||
description: `X的新功能是什么？`,
|
||||
},
|
||||
{
|
||||
key: '1-2',
|
||||
description: `什么是AGI？`,
|
||||
},
|
||||
{
|
||||
key: '1-3',
|
||||
description: `文档在哪里？`,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: renderTitle(h(ReadOutlined, { style: { color: '#1890FF' } }), '设计指南'),
|
||||
description: '如何设计一个好的产品？',
|
||||
children: [
|
||||
{
|
||||
key: '2-1',
|
||||
icon: h(HeartOutlined),
|
||||
description: `知道它的好处`,
|
||||
},
|
||||
{
|
||||
key: '2-2',
|
||||
icon: h(SmileOutlined),
|
||||
description: `给AI设定一个角色`,
|
||||
},
|
||||
{
|
||||
key: '2-3',
|
||||
icon: h(CommentOutlined),
|
||||
description: `表达感受`,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const senderPromptsItems: PromptsProps['items'] = [
|
||||
{
|
||||
key: '1',
|
||||
description: '热点话题',
|
||||
icon: h(FireOutlined, { style: { color: '#FF4D4F' } }),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
description: '设计指南',
|
||||
icon: h(ReadOutlined, { style: { color: '#1890FF' } }),
|
||||
},
|
||||
]
|
||||
|
||||
const roles: BubbleListProps['roles'] = {
|
||||
ai: {
|
||||
placement: 'start',
|
||||
typing: false, // 禁用打字机动画，使用后端流式显示
|
||||
styles: {
|
||||
content: {
|
||||
borderRadius: '16px',
|
||||
},
|
||||
},
|
||||
},
|
||||
local: {
|
||||
placement: 'end',
|
||||
variant: 'shadow',
|
||||
},
|
||||
}
|
||||
|
||||
// ==================== State ====================
|
||||
const headerOpen = ref(false)
|
||||
const content = ref('')
|
||||
const conversationsItems = ref(defaultConversationsItems)
|
||||
const activeKey = ref(defaultConversationsItems[0]?.key)
|
||||
const attachedFiles = ref<AttachmentsProps['items']>([])
|
||||
const agentRequestLoading = ref(false)
|
||||
|
||||
// 消息列表
|
||||
interface Message {
|
||||
id: string
|
||||
role: 'user' | 'ai'
|
||||
content: string
|
||||
status: 'loading' | 'success' | 'error'
|
||||
}
|
||||
|
||||
const messages = ref<Message[]>([])
|
||||
let messageIdCounter = 0
|
||||
|
||||
// ==================== Runtime ====================
|
||||
async function sendMessage(userMessage: string) {
|
||||
console.log('📝 [Submit] 用户提交消息:', userMessage)
|
||||
if (!userMessage) return
|
||||
|
||||
// 添加用户消息
|
||||
const userMsg: Message = {
|
||||
id: `user_${messageIdCounter++}`,
|
||||
role: 'user',
|
||||
content: userMessage,
|
||||
status: 'success',
|
||||
}
|
||||
messages.value.push(userMsg)
|
||||
|
||||
// 添加 AI 消息占位符
|
||||
const aiMsg: Message = {
|
||||
id: `ai_${messageIdCounter++}`,
|
||||
role: 'ai',
|
||||
content: '',
|
||||
status: 'loading',
|
||||
}
|
||||
messages.value.push(aiMsg)
|
||||
const aiMsgIndex = messages.value.length - 1
|
||||
|
||||
agentRequestLoading.value = true
|
||||
|
||||
try {
|
||||
const convId = parseInt(activeKey.value || '0')
|
||||
const requestBody = {
|
||||
message: userMessage,
|
||||
conversionId: convId,
|
||||
}
|
||||
console.log('📤 [Request] 请求体:', JSON.stringify(requestBody, null, 2))
|
||||
|
||||
// 调用后端接口
|
||||
const response = await fetch('http://localhost:8080/dashscope/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(requestBody),
|
||||
})
|
||||
|
||||
console.log('📥 [Response] 响应状态:', response.status, response.statusText)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`请求失败: ${response.status} ${response.statusText}`)
|
||||
}
|
||||
|
||||
// 处理 SSE 流式响应
|
||||
if (response.body) {
|
||||
const reader = response.body.getReader()
|
||||
const decoder = new TextDecoder()
|
||||
let buffer = ''
|
||||
|
||||
console.log('🌊 [Stream] 开始读取流数据...')
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { done, value } = await reader.read()
|
||||
|
||||
if (done) {
|
||||
console.log('✅ [Stream] 流读取完成')
|
||||
const msg = messages.value[aiMsgIndex]
|
||||
if (msg) {
|
||||
msg.status = 'success'
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
// 解码数据
|
||||
const text = decoder.decode(value, { stream: true })
|
||||
buffer += text
|
||||
console.log('📦 [Stream] 收到原始数据:', text)
|
||||
|
||||
// 解析 SSE 格式: data: content\n\n
|
||||
const lines = buffer.split('\n\n')
|
||||
|
||||
// 保留最后一个可能不完整的块
|
||||
if (!text.endsWith('\n\n')) {
|
||||
buffer = lines.pop() || ''
|
||||
} else {
|
||||
buffer = ''
|
||||
}
|
||||
|
||||
for (const block of lines) {
|
||||
if (block.startsWith('data:')) {
|
||||
// 提取 data: 后面的内容
|
||||
const content = block.substring(5)
|
||||
console.log('✨ [Parse] 解析后的内容:', JSON.stringify(content))
|
||||
|
||||
// 直接累积到消息内容
|
||||
const msg = messages.value[aiMsgIndex]
|
||||
if (msg) {
|
||||
msg.content += content
|
||||
console.log('🔄 [Update] 更新消息, 当前长度:', msg.content.length)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ [Error] 请求错误:', error)
|
||||
const msg = messages.value[aiMsgIndex]
|
||||
if (msg) {
|
||||
msg.status = 'error'
|
||||
msg.content = '抱歉，发生了错误，请稍后重试。'
|
||||
}
|
||||
} finally {
|
||||
agentRequestLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
activeKey,
|
||||
() => {
|
||||
if (activeKey.value !== undefined) {
|
||||
console.log('🔄 [Conversation] 切换会话:', activeKey.value)
|
||||
messages.value = []
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// ==================== Event ====================
|
||||
function onSubmit(nextContent: string) {
|
||||
if (!nextContent) return
|
||||
sendMessage(nextContent)
|
||||
content.value = ''
|
||||
}
|
||||
|
||||
const onPromptsItemClick: PromptsProps['onItemClick'] = (info) => {
|
||||
sendMessage(info.data.description as string)
|
||||
}
|
||||
|
||||
function onAddConversation() {
|
||||
conversationsItems.value = [
|
||||
...conversationsItems.value,
|
||||
{
|
||||
key: `${conversationsItems.value.length}`,
|
||||
label: `New Conversation ${conversationsItems.value.length}`,
|
||||
},
|
||||
]
|
||||
activeKey.value = `${conversationsItems.value.length}`
|
||||
}
|
||||
|
||||
const onConversationClick: ConversationsProps['onActiveChange'] = (key) => {
|
||||
activeKey.value = key
|
||||
}
|
||||
|
||||
const handleFileChange: AttachmentsProps['onChange'] = (info) =>
|
||||
(attachedFiles.value = info.fileList)
|
||||
|
||||
// ==================== Nodes ====================
|
||||
const placeholderNode = computed(() =>
|
||||
h(Space, { direction: 'vertical', size: 16, style: styles.value.placeholder }, () => [
|
||||
h(Welcome, {
|
||||
variant: 'borderless',
|
||||
icon: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp',
|
||||
title: "Hello, I'm Ant Design X",
|
||||
description: '基于Ant Design，AGI产品界面解决方案，创造更美好的智能愿景~',
|
||||
extra: h(Space, {}, () => [
|
||||
h(Button, { icon: h(ShareAltOutlined) }),
|
||||
h(Button, { icon: h(EllipsisOutlined) }),
|
||||
]),
|
||||
}),
|
||||
h(Prompts, {
|
||||
title: '想要了是吧?',
|
||||
items: placeholderPromptsItems,
|
||||
styles: {
|
||||
list: {
|
||||
width: '100%',
|
||||
},
|
||||
item: {
|
||||
flex: 1,
|
||||
},
|
||||
},
|
||||
onItemClick: onPromptsItemClick,
|
||||
}),
|
||||
]),
|
||||
)
|
||||
|
||||
const items = computed<BubbleListProps['items']>(() => {
|
||||
console.log('🎨 [Items] 计算 items, messages数量:', messages.value.length)
|
||||
|
||||
if (messages.value.length === 0) {
|
||||
console.log('🎨 [Items] 显示占位符')
|
||||
return [{ content: placeholderNode, variant: 'borderless' }]
|
||||
}
|
||||
|
||||
const result = messages.value.map(({ id, role, content, status }) => {
|
||||
console.log('🎨 [Items] 处理消息:', { id, role, status, contentLength: content?.length })
|
||||
return {
|
||||
key: id,
|
||||
loading: status === 'loading',
|
||||
role: role === 'user' ? 'local' : 'ai',
|
||||
content: content,
|
||||
}
|
||||
})
|
||||
|
||||
console.log('🎨 [Items] 最终 items:', result)
|
||||
return result
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="styles.layout">
|
||||
<div :style="styles.menu">
|
||||
<!-- 🌟 Logo -->
|
||||
<div :style="styles.logo">
|
||||
<img
|
||||
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
|
||||
draggable="false"
|
||||
alt="logo"
|
||||
:style="styles['logo-img']"
|
||||
/>
|
||||
<span :style="styles['logo-span']">Ant Design X Vue</span>
|
||||
</div>
|
||||
|
||||
<!-- 🌟 添加会话 -->
|
||||
<Button type="link" :style="styles.addBtn" @click="onAddConversation">
|
||||
<PlusOutlined />
|
||||
New Conversation
|
||||
</Button>
|
||||
|
||||
<!-- 🌟 会话管理 -->
|
||||
<Conversations
|
||||
:items="conversationsItems"
|
||||
:style="styles.conversations"
|
||||
:active-key="activeKey"
|
||||
@active-change="onConversationClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div :style="styles.chat">
|
||||
<!-- 🌟 消息列表 -->
|
||||
<Bubble.List :items="items" :roles="roles" :style="styles.messages" />
|
||||
|
||||
<!-- 🌟 提示词 -->
|
||||
<Prompts :items="senderPromptsItems" @item-click="onPromptsItemClick" />
|
||||
|
||||
<!-- 🌟 输入框 -->
|
||||
<Sender
|
||||
:value="content"
|
||||
:style="styles.sender"
|
||||
:loading="agentRequestLoading"
|
||||
@submit="onSubmit"
|
||||
@change="(value) => (content = value)"
|
||||
>
|
||||
<template #prefix>
|
||||
<Badge :dot="(attachedFiles?.length ?? 0) > 0 && !headerOpen">
|
||||
<Button type="text" @click="() => (headerOpen = !headerOpen)">
|
||||
<template #icon>
|
||||
<PaperClipOutlined />
|
||||
</template>
|
||||
</Button>
|
||||
</Badge>
|
||||
</template>
|
||||
|
||||
<template #header>
|
||||
<Sender.Header
|
||||
title="Attachments"
|
||||
:open="headerOpen"
|
||||
:styles="{ content: { padding: 0 } }"
|
||||
@open-change="(open) => (headerOpen = open)"
|
||||
>
|
||||
<Attachments
|
||||
:before-upload="() => false"
|
||||
:items="attachedFiles"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<template #placeholder="type">
|
||||
<Flex
|
||||
v-if="type && type.type === 'inline'"
|
||||
align="center"
|
||||
justify="center"
|
||||
vertical
|
||||
gap="2"
|
||||
>
|
||||
<Typography.Text style="font-size: 30px; line-height: 1">
|
||||
<CloudUploadOutlined />
|
||||
</Typography.Text>
|
||||
<Typography.Title :level="5" style="margin: 0; font-size: 14px; line-height: 1.5">
|
||||
Upload files
|
||||
</Typography.Title>
|
||||
<Typography.Text type="secondary">
|
||||
Click or drag files to this area to upload
|
||||
</Typography.Text>
|
||||
</Flex>
|
||||
<Typography.Text v-if="type && type.type === 'drop'">
|
||||
Drop file here
|
||||
</Typography.Text>
|
||||
</template>
|
||||
</Attachments>
|
||||
</Sender.Header>
|
||||
</template>
|
||||
</Sender>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user