English | *简体中�?

🚀 Element-Plus-X

*开箱即用的企业�?AI 组件库（基于 Vue 3 + Element-Plus�?

📢 快速链�?

| 资源类型 | 链接 | | ----------------- | -------------------------------------------------------------------------------------------------------------------------- | | 文档 | 📖 开发文档 | | 在线演示 | 👁�?在线预览 | | 代码仓库 | 🐙 GitHub 🚠 Gitee | | *NPM �? | 📦 npm | | 问题反馈 | 🐛 提交 Bug | | 交流讨论 | 🐒 交流群 | | 模版项目 预览 | 👀 在线预览 | | 模版项目 源码 | 🐙 GitHub 🚠 Gitee |

🛠�?核心特�?

• �?企业�?AI 组件：内置聊天机器人、语音交互等场景化组�?- 🚀 **零配置集�?*：基�?Element-Plus 设计体系，开箱即�?- 📦 **按需加载**：提�?Tree Shaking 优化

📦 安装

# NPM
npm install vue-element-plus-x

# PNPM（推荐）
pnpm install vue-element-plus-x

# Yarn
yarn install vue-element-plus-x

📚 使用案例

1. 按需引入

<script setup>
import { BubbleList, XSender } from 'vue-element-plus-x';

const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user'
  }
];
</script>

<template>
  <div
    style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;"
  >
    <BubbleList :list="list" />
    <XSender />
  </div>
</template>

2. 全局引入

// main.ts
import { createApp } from 'vue';
import ElementPlusX from 'vue-element-plus-x';
import App from './App.vue';

const app = createApp(App);
// 使用 app.use() 全局引入
app.use(ElementPlusX);
app.mount('#app');

3. CDN 引入

<!-- 该方�?有待测试 -->
<!-- CDN 引入 -->
<script src="https://unpkg.com/[email protected]/dist/umd/index.js"></script>

⚠️ XMarkdown 组件迁移通知

XMarkdown 组件已独立为单独�?NPM 包，推荐使用新版本：

📦 **新包地址�?* x-markdown-vue 📂 **GitHub�?* element-plus-x/x-markdown

迁移方式

# 安装新包
pnpm add x-markdown-vue

<template>
  <MarkdownRenderer :markdown="content" />
</template>

<script setup lang="ts">
import { MarkdownRenderer } from 'x-markdown-vue';
import 'x-markdown-vue/style';

const content = ref('# Hello World');
</script>

新版本特性：

• 🚀 Vue 3 组合�?API
• 🎨 代码高亮（Shiki，支�?100+ 语言�?- 🌊 流式渲染（支�?AI 对话场景�?- 🧮 LaTeX 数学公式
• 📊 Mermaid 图表
• 🌗 深色模式
• 🔌 灵活的插件系�?

🌟 已实�?组件 �?Hooks

| 组件�? | 描述 | 文档链接 | | -------------------- | ---------------------------------- | --------------------------------------------------------------------- | | Bubble | 气泡消息组件 （拓展） | 📄 文档 | | BubbleList | 气泡消息列表 （拓展） | 📄 文档 | | Conversations | 会话管理组件 （拓展） | 📄 文档 | | Welcome | 欢迎组件 | 📄 文档 | | Prompts | 提示集组�? | 📄 文档 | | FilesCard | 文件卡片组件 | 📄 文档 | | Attachments | 上传附件组件 | 📄 文档 | | XSender | 智能输入框（含语音交互、提及功能） | 📄 文档 | | Thinking | 思考中组件 （拓展） | 📄 文档 | | ThoughtChain | 思考链组件 | 📄 文档 | | useRecord | 浏览器内置语音识�?API Hooks | 📄 文档 | | useXStream | 流模式接�?Hooks | 📄 文档 | | useSend & XRequest | 流模�?hooks 的拆�?（拓展） | 📄 文档 |

🎯开发计�?(每周更新)

🎀我们会在 issue 、交流群 等多方面收集大家的遇到的问题，和需求场景，制定短期和长期的开发计划，查看详情请移步�?开发计划

🤝 参与贡献

1. Fork 仓库 �?2. 创建 Feature 分支 �?3. 提交 Pull Request

详情可以移步👉 开发指南

我们欢迎�?

• 🐛 Bug 修复
• 💡 新功能提�?- 📝 文档完善
• 🎨 样式优化

👥 社区支持