优化对话列表样式,添加头像
This commit is contained in:
@@ -18,6 +18,8 @@ import {
|
|||||||
ShareAltOutlined,
|
ShareAltOutlined,
|
||||||
SmileOutlined,
|
SmileOutlined,
|
||||||
} from '@ant-design/icons-vue'
|
} from '@ant-design/icons-vue'
|
||||||
|
import { UserOutlined } from '@ant-design/icons-vue'
|
||||||
|
import type { CSSProperties } from 'vue'
|
||||||
import { Badge, Button, Flex, Space, theme } from 'ant-design-vue'
|
import { Badge, Button, Flex, Space, theme } from 'ant-design-vue'
|
||||||
import { Attachments, Bubble, Conversations, Prompts, Sender, Welcome } from 'ant-design-x-vue'
|
import { Attachments, Bubble, Conversations, Prompts, Sender, Welcome } from 'ant-design-x-vue'
|
||||||
import markdownit from 'markdown-it'
|
import markdownit from 'markdown-it'
|
||||||
@@ -75,8 +77,14 @@ md.use(markdownItHighlightJs, {
|
|||||||
|
|
||||||
md.use(MarkdownItMathJaX3PRO, {
|
md.use(MarkdownItMathJaX3PRO, {
|
||||||
tex: {
|
tex: {
|
||||||
inlineMath: [['$', '$'], ['\\(', '\\)']],
|
inlineMath: [
|
||||||
displayMath: [['$$', '$$'], ['\\[', '\\]']],
|
['$', '$'],
|
||||||
|
['\\(', '\\)'],
|
||||||
|
],
|
||||||
|
displayMath: [
|
||||||
|
['$$', '$$'],
|
||||||
|
['\\[', '\\]'],
|
||||||
|
],
|
||||||
tags: 'ams',
|
tags: 'ams',
|
||||||
packages: ['base', 'ams', 'newcommand', 'configmacros'],
|
packages: ['base', 'ams', 'newcommand', 'configmacros'],
|
||||||
},
|
},
|
||||||
@@ -251,8 +259,19 @@ const senderPromptsItems: PromptsProps['items'] = [
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const fooAvatar: CSSProperties = {
|
||||||
|
color: '#f56a00',
|
||||||
|
backgroundColor: '#fde3cf',
|
||||||
|
}
|
||||||
|
|
||||||
|
const barAvatar: CSSProperties = {
|
||||||
|
color: '#fff',
|
||||||
|
backgroundColor: '#87d068',
|
||||||
|
}
|
||||||
|
|
||||||
const roles: BubbleListProps['roles'] = {
|
const roles: BubbleListProps['roles'] = {
|
||||||
ai: {
|
ai: {
|
||||||
|
avatar: { icon: h(UserOutlined), style: fooAvatar },
|
||||||
placement: 'start',
|
placement: 'start',
|
||||||
typing: false, // 禁用打字机动画,使用后端流式显示
|
typing: false, // 禁用打字机动画,使用后端流式显示
|
||||||
styles: {
|
styles: {
|
||||||
@@ -265,6 +284,7 @@ const roles: BubbleListProps['roles'] = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
local: {
|
local: {
|
||||||
|
avatar: { icon: h(UserOutlined), style: barAvatar },
|
||||||
placement: 'end',
|
placement: 'end',
|
||||||
variant: 'shadow',
|
variant: 'shadow',
|
||||||
},
|
},
|
||||||
@@ -324,7 +344,7 @@ async function sendMessage(userMessage: string) {
|
|||||||
console.log('[Request] 请求体:', JSON.stringify(requestBody, null, 2))
|
console.log('[Request] 请求体:', JSON.stringify(requestBody, null, 2))
|
||||||
|
|
||||||
// 调用后端接口 - POST 请求 SSE 流式响应
|
// 调用后端接口 - POST 请求 SSE 流式响应
|
||||||
const response = await fetch('http://localhost:8080/dashscope/generateStream', {
|
const response = await fetch('http://localhost:8080/ai/chat', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
|
|||||||
Reference in New Issue
Block a user