## 💡 前言：当智能对话遇到技术难题大模型出来后，对话需求蹭蹭上涨，之前手撸了几个对话 demo，费时费力，效果还不太满意。我必须说：**Ant Design X 的出现，就像在沙漠里找到冰可乐一样爽！**（虽然它和官方[AntD X](https://x.ant.design/components/overview-cn)的关系...懂的都懂🤫）使用过程中遇到并解决的一些问题： 1. 输入框展开面板会挤压页面，影响对话区域的展示 2. 输入框上传附件后需要展示并清除附件 3. 使用 `BubbleList` 渲染流式 `md` 格式数据（不会一段一段的显示，很丝滑） 4. 组件提供的 loading 方法无法使用在接口响应前 5. 组件提供的滚动触发的是浏览器自带的滚动条，会挤压页面（不好看） ## 🌟 安装 1. 首先按照[官方教程](https://antd-design-x-vue.netlify.app/development/introduce.html)安装`ant design x vue`。我使用的是`pnpm`安装 ```shell pnpm add ant-design-x-vue --save ``` 2. 本文中还使用到了`vue3`、`antdv4.x` 、`tailwindcss`、`ts` 、`pinia`、`scss` 3. 另外，我在使用`Ant Design X Vue`时官方还没有提供`setup`的组件示例，是我自己根据`tsx`改写的，若有和官方文档不一致的，请以官网为准。 ### 自动导入 > 官方教程里都有，已配置的可以直接跳过 1. 安装 `unplugin-vue-components` 插件 ```shell pnpm install unplugin-vue-components -D ``` 2. 在 `Vite` 的配置文件中，添加以下依赖和插件 ```ts // vite.config.ts import vue from '@vitejs/plugin-vue'; import { defineConfig } from 'vite'; // add the following dependencies import components from 'unplugin-vue-components/vite'; import { AntDesignXVueResolver } from 'ant-design-x-vue/resolver'; export default defineConfig({ // ... plugins: [ // add the following plugin components({ resolvers: [AntDesignXVueResolver()] }) ] }); ``` 3. 在项目中，以 `AX` 开头的组件，将被自动解析为 `ant-design-x-vue` 组件并导入到文件中，你可以直接在模板中使用它们： ```html ``` ## 🛠️ 核心实现步骤 ### 功能要点 1. 没有聊天内容时显示欢迎页面 2. 可以发送文本和附件（本文仅展示了 excel和 csv文件作为附件上传） * 附件可选择从本地上传，也可以选择’系统‘文件 * 选择文件展示在输入框头部，支持预览和删除 3. 接口响应中（对话中）禁止发送消息 4. 渲染内容为流式输出的 md 文本格式 5. 需要自动滚动到最新输出内容 6. 接口响应前需要增加 `loading` 7. 对话数据全部使用 `pinia` 管理 ### 代码结构 1. `pinia` 对话数据管理：`/src/store/moudles/dialogues.ts` 2. `AIChat.vue` 对话父级页面：`/src/components/chat/AIChat.vue` 包含了欢迎页面、对话气泡列表和消息发送框。 ![欢迎页面.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5f2edac57edd49c4a25f4dc274d45fc3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Yas5p6z:q75.awebp?rk3s=f64ab15b&x-expires=1768288928&x-signature=m0ZWiA7HmHmX9WI05diRZJc5XjM%3D) ![对话页面模块.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/695856f3bd7c4be294773afcb823d757~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Yas5p6z:q75.awebp?rk3s=f64ab15b&x-expires=1768288928&x-signature=d5nTSWfChiJySBe89ysa64mIRqc%3D) 2. `ChatBubble.vue` 子组件：对话气泡列表 3. `SenderInput` 子组件：消息发送框 4. `WelcomeIndex.vue` 子组件：欢迎页面（可以自由实现。下文会简单带过） ### 代码实现 #### 1. 数据管理`dialogues.ts` ```ts // 文件路径：src/dataTypes/chatType.ts' // 这个结构是根据 antd X Vue的 XChat 工具返回的数据结构定义的。所以对接的后端数据最好也能返回这个格式，如果不能的话需要前端自己转化 export interface MessageItem { id: string; message: string; status: 'local' | 'ai'; loading?: boolean; } ``` ```ts // 文件路径：/src/store/moudles/dialogues.ts import { MessageItem } from '@/dataTypes/chatType.ts'; export const useDialogueStore = defineStore('dialogue', () => { const currentFile = ref(); // 选中的附件 const currentConversitionUuid = ref(''); // 当前对话 uuid const dialogueRecord = ref>([]); // 对话记录 const showHistory = ref(false); // 是否是展示对话历史 const isChatting = ref(false); // 正在对话中 // 获取上面定义的变量值 const getCurrentFileUuid = computed(() => currentFile.value.uuid); const getCurrentFilename = computed(() => currentFile.value.filename); const getCurrentConversitionUuid = computed( () => currentConversitionUuid.value ); const getDialogueRecord = computed(() => dialogueRecord.value); const getShowHistory = computed(() => showHistory.value); const getIsChatting = computed(() => isChatting.value); // 为上面定义的变量值赋值 function setCurrentFileInfo(file: any) { currentFile.value = file; } function setCurrentConversitionUuid(uuid: string | undefined) { currentConversitionUuid.value = uuid; } function setDialogueRecord(record: MessageItem[]) { dialogueRecord.value = record; } function setIsChatting(status: boolean) { isChatting.value = status; } function setShowHistory(status: boolean) { showHistory.value = status; } function resetHistory() { currentConversitionUuid.value = undefined; dialogueRecord.value = []; showHistory.value = false; } return { ... }; }); ``` #### 2. 父级页面`AIChat.vue` > 实现对话页面整体布局 ```html ``` #### 3. 子组件`SenderInput.vue` > 用户发送消息，可以选择附件 * 用到了官网提供的`Sender`组件，地址在这：[Sender](https://antd-design-x-vue.netlify.app/component/sender.html) * 使用了官方提供的 `useXAgent` 向模型发送消息，地址：[useXAgent](https://antd-design-x-vue.netlify.app/component/use-x-agent.html) * 使用该组件的展开面板实现附件上传功能 * 对展开面板进行了改造，既可以直接上传附件，又能从文件列表中选择文件 * 对发送框进行了改造，选择的附件直接展示在消息框中，可以预览和删除 * 示例图片： ![消息发送框展开.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/05a7bc1a94194a4092cf717a0cc90ec4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Yas5p6z:q75.awebp?rk3s=f64ab15b&x-expires=1768288928&x-signature=NA9KOfX4XNj95Y1LQ3isZSPwrgE%3D) ![选中文件输入框.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7748f37a47ed45ba9feeae34a4c6b2f4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Yas5p6z:q75.awebp?rk3s=f64ab15b&x-expires=1768288928&x-signature=Ov8skFiCJhzjdoizZyJPylTwzaI%3D) ```html ``` #### 4. 子组件`ChatBubble.vue` > 流式对话，自定义渲染为 md格式 * 使用了官网提供的 `Bubble` 和 `BubbleList` 组件，地址在这：[Bubble](https://antd-design-x-vue.netlify.app/component/bubble.html) * 在接口响应前展示`loading` * 自动滚动到底部（自定义不占位滚动条） * 这里使用的是`BubbleList`组件渲染`md`格式的流式内容，官方没有给出明确的示例，但应该是这么用的😁 * `md` 预览组件使用的是`v-md-editor`，官方地址：[VMdPreview](https://code-farmer-i.github.io/vue-markdown-editor/zh/examples/preview-demo.html) * 使用了`SimpleBar` 滚动条插件，不占位不挤压页面，只用滚动时出现，其余时候不会显示。但是会使`BubbleList`自带的滚动效果失效，需要自己实现滚动。（按需取舍即可）。官方地址：[SimpleBar](https://www.npmjs.com/package/simplebar) ```html ``` #### 5. 子组件`WelcomeIndex.vue` > 没有对话内容时的欢迎页面，仅供参考 * 使用了官网提供的`Welcome`组件，地址：[Welcome](https://antd-design-x-vue.netlify.app/component/welcome.html) * 使用了官网提供的`Prompts`组件，地址：[Prompts](https://antd-design-x-vue.netlify.app/component/prompts.html) ```html ``` ## demo地址 [demo 上传到了 github](https://github.com/star-devil/antdXVue_chat_demo)，对某些功能做了简化，接口均为 mock的，仅供参考～欢迎 star～ ## 🤔 沉思时间虽然 `AntD X Vue` 用着真香，但必须说句大实话： ⚠️ 文档里的坑得自己填不过...比起从头造轮子，我选择站在巨人的肩膀上🐒 **最后送大家一句话**： "能用第三方库解决的问题，千万不要自己写！" *** > **免责声明**：本文示例代码均经过脱敏处理，仅供技术交流参考。 ***