Element Plus X 二次封装

Element Plus X 模块使用 Ai* 命名空间，适合 Element/Element Plus 视觉体系的 Vue2.6 后台系统。组件能力来自 vue-element-plus-x，本项目提供统一封装、类型导出、按需入口和 Vue2.6 SDK 挂载边界。

Vue2.6 推荐接入

Vue2.6 业务页面通过 mountAiChat 挂载聊天面板。Vue2 负责数据、接口、权限和页面生命周期；Lingxi UI 负责 Vue3 组件渲染。

工程化 Vue2 用法

import { mountAiChat } from '@zhiyongui/lingxi-ui/sdk'
import '@zhiyongui/lingxi-ui/style.css'

export default {
  mounted() {
    this.instance = mountAiChat({
      container: this.$refs.chatContainer,
      props: {
        title: '智能助手',
        messages: this.messages,
        prompts: ['生成周报', '总结报告'],
        onSend: this.handleSend
      }
    })
  },
  beforeDestroy() {
    this.instance && this.instance.unmount()
  }
}

Vue3 直接引入

import { AiBubble, AiSender, useSend, ElementXRequest } from '@zhiyongui/lingxi-ui/element-x'
import '@zhiyongui/lingxi-ui/element-x/style.css'

按需引入

import { AiBubble } from '@zhiyongui/lingxi-ui/ai-bubble'
import '@zhiyongui/lingxi-ui/ai-bubble/style.css'

组件映射

本项目导出	上游能力	说明
AiAttachments	Attachments	附件上传和文件列表
AiBubble	Bubble	单条消息气泡
AiBubbleList	BubbleList	消息列表
AiConfigProvider	ConfigProvider	主题变量配置
AiConversations	Conversations	会话列表
AiFilesCard	FilesCard	文件卡片
AiPrompts	Prompts	提示词列表
AiRichContent	-	AI 富内容文档渲染与编辑
AiSender	Sender / MentionSender / EditorSender	输入框；封装层根据用法适配上游 Sender、MentionSender、EditorSender
AiThinking	Thinking	思考过程展示
AiThoughtChain	ThoughtChain	思维链步骤
AiWelcome	Welcome	欢迎页
AiXMarkdown	XMarkdown	Markdown 渲染
useRecord	useRecord	录音 Hook
useSend	useSend	请求发送 Hook
useXStream	useXStream	流式解析 Hook
ElementXRequest	XRequest	为避免和 Ant X XRequest 冲突增加别名

源码功能示例

下面的示例来自 Element Plus X 源码文档，用于对照完整上游 API 和视觉效果。Vue2.6 项目实际接入仍建议使用上面的 SDK 边界。