优化对话列表样式,添加头像

This commit is contained in:
2025-10-25 17:28:52 +08:00
parent e4ecfdf269
commit 61b61b88c7

View File

@@ -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',