🚀 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

📚 使用案例

• 按需引入

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

• 全局引入

// 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');

• CDN 引入

<!-- 该方法 有待测试 -->
<!-- CDN 引入 -->

🌟 已实现 组件 和 Hooks

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

🎯开发计划 (每周更新)

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

🤝 参与贡献

• Fork 仓库 → 2. 创建 Feature 分支 → 3. 提交 Pull Request

详情可以移步👉 开发指南

我们欢迎：

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

👥 贡献者

👥 社区支持

📋 版本策略

版本号规则

我们采用语义化版本号（SemVer）：MAJOR.MINOR.PATCH

• MAJOR: 重大版本更新，可能包含破坏性变更
• MINOR: 新功能添加，向后兼容
• PATCH: Bug 修复，向后兼容
• 预发布标识: -beta.0, -rc.1 等

安装方式

# 安装稳定版（推荐）
pnpm install vue-element-plus-x
安装 beta 版本
pnpm install vue-element-plus-x@beta
安装指定版本
pnpm install vue-element-plus-x@2.0.0-beta.0

版本发布渠道

| 渠道 | npm tag | 说明 | | ------ | -------- | ---------------------- | | 稳定版 | latest | 生产环境推荐使用 | | 测试版 | beta | 新功能预览，可能不稳定 |

🏷️ 组件徽标说明

文档中的组件可能带有以下徽标：

| 徽标 | 含义 | | ------------- | ------------------------ | | 🆕 新增 | 新增的组件或功能 | | 🔄 更新 | 最近有重大更新的组件 | | ⚠️ 废弃 | 即将废弃的组件 | | 🔬 实验性 | 实验性功能，API 可能变化 |

🚀 发布流程

发布 Beta 版本

• 更新 packages/core/package.json 中的版本号为 X.X.X-beta.X
• 运行 pnpm changeset 创建变更记录
• 提交代码并创建 tag: git tag vX.X.X-beta.X
• 推送 tag: git push origin vX.X.X-beta.X
• CI 自动发布到 npm @beta tag

发布正式版本

• 更新版本号为正式版本
• 更新 CHANGELOG.md
• 创建并推送 tag
• CI 自动发布到 npm @latest tag

🔧 本地开发

# 克隆仓库
git clone https://github.com/HeJiaYue520/Element-Plus-X.git
安装依赖
pnpm install
启动文档开发服务器
pnpm run dev:docs
启动组件开发服务器 (Storybook)
pnpm run dev:core
构建组件库
pnpm run build:core