Reader

🎨Element Plus X 上新! 组件升级🥳

| 掘金本周最热 | Default

Element-Plus-X 组件库 v1.1.6 更新！🌟

同志萌好，🙉是嘉悦。Element-Plus-X 开源快两个月了。

这次更新，主要复刻了 Ant Design X 的 思维链组件 和 快捷指令组件。

💖 在复刻的同时，我们进行了较多的拓展。

方便 Vue开发者 更快捷、舒爽的搭建 自己的AI项目

🥩咱们先来看看原有组件的更新，有没有符合你的口味🥩

Typewriter 打字器 上新 雾化效果 🎀

打字器组件上新雾化效果，实现是使用伪类选择器，支持动态的调整 伪类标签的背景色，和雾化的透明宽度。同时支持 md 和 纯文本两种模式

// 这是 scss 片段实现代码 
// 具体实现 可在源码中查看 https://github.com/HeJiaYue520/Element-Plus-X/blob/main/packages/components/src/components/Typewriter/index.vue 


.typer-content.typing-cursor-foggy {
  position: relative;
  overflow: hidden;

  &:last-child:after {
    content: '';
    width: var(--cursor-fog-width);
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--cursor-fog-bg-color));
    position: absolute;
    margin-left: calc(-1 * var(--cursor-fog-width));
  }
}
  • 雾化 md 内容

4ff38f70165940f76d33b23a5d2dc70.png

  • 雾化 纯文本内容

4ff38f70165940f76d33b23a5d2dc70.png

BubbleList 气泡列表 交互增强 💖

💩 我们调研了 多个大模型公司的 GPT 产品，参考了交流群的反馈。决定将 BubbleList组件 进行升级。将回到底部按钮，直接内置到 BubbleList组件中。按钮是仿豆包的。

image.png

  • 滚动条默认隐藏，鼠标悬停后展示。
  • 支持设置 loading 状态控制。支持直接设置按钮颜色、图标大小和按钮位置。

🙊 后续会给大家呈现 索引删除，复制md内容等更多相关功能

Sender 输入框 大升级 🐳

功能类型详情
新增功能- 新增上下结构变体属性
- 新增底部自定义插槽
- 新增 input-style 支持样式透传
- 新增指令弹框及回调事件
交互优化- v-model 为空时禁用发送按钮及 @submit 事件
- 新增 submit-btn-disabled 属性控制按钮禁用状态

Sender-🍁 上下结构变体

通过 variant 属性设置输入框的变体。

  • 默认 'default'
  • 上下结构 'updown'

image.png

image.png

Sender-🍉 #footer 底部插槽

通过 #footer 插槽设置输入框 底部内容

image.png

Sender-🌳 input-style 属性

方便开发者更好的设置输入框样式

image.png

Sender-🍀 指令弹框和回调事件

这个指令，并不完全是对 ant-design-x 的复刻，更多的是为了方便快捷的设置指令弹框内容和触发事件。和 指令列表勾选 还是有区别。

  • 通过 triggerStrings 属性，设置 指令触发字符，类型是一个字符数组 ['/', '@']
  • 通过 v-model 绑定 triggerPopoverVisible 属性，控制指令弹框是否可见 v-model:trigger-popover-visible="triggerVisible"
  • 通过 triggerPopoverWidth 属性，设置指令弹框宽度 默认 'fit-content'
  • 通过 triggerPopoverLeft 属性，设置指令弹框距离左侧距离 默认 '0px'
  • 通过 triggerPopoverOffset 属性，设置指令弹框和输入框的距离 默认 8
  • 通过 triggerPopoverPlacement 属性，设置指令弹框弹出位置 同 el-popover 的 placement 属性一致，默认 'top-start'
  • 多指令区分

image.png

image.png

image.png

  • Sender输入框 是支持多字符触发指令的。在指令触发的回调事件，在这里你可以做很多操作，比如这样，打开一个弹框，或者侧边栏抽屉等

4ff38f70165940f76d33b23a5d2dc70.png

优化内容就不赘述了，详细说明，可以移步 👉 Sender 输入框 体验。

仅仅是一种弹框样式去处理指令，这当然不妥。我们推出一个新的输入框组件丰富交互 于是

新成员-MentionSender 提及输入框🦥

他和 Sender组件 的功能基本一样，唯一的区别就是 指令的弹框 相关的属性和方法 不同。点击此处快速了解区别 👉 MentionSender 提及输入框

他是 Sender组件 指令下拉勾选的实现

4ff38f70165940f76d33b23a5d2dc70.png

🐒 后续我们还会推出 EditorSender编辑输入框 组件, 类似豆包的这个输入框。🐒

💖 让我们小小期待一下吧~

image.png

当然还有思考组件

我们参考 ant-design-x 的思维链组件，推出两种 思考组件...

新成员-Thinking 思考中 🍓

  • 多种状态控制

image.png

  • 支持结束后自动收起

image.png

  • 支持插槽，各种自定义

image.png

💌 很多朋友 不知道怎么这些组件怎么使用。我们后续会出一个 实战模版。请耐心等待，目前有一个在线预览的 demo，是 Thinking + BubbleList + Sender 组件的组合使用，直接调用的是 硅基流动 申请的 免费大模型接口。

这里是使用效果 👉 Thinking Demo 在线预览

这里是 Demo 源码地址

💟 感兴趣的 Bro 可以瞅瞅，给个 star 支持一下 🙉

image.png

新成员-ThoughtChain 思维链 🔗

这个组件是对 ant-design-x 中思维链组件 element plus 风格的体现

支持定义图标大小、自定义 icon、支持颜色渐变、内置打字器组件

image.png

image.png

image.png

未来规划 🐠

目前，关于 ant-design-x 的组件复刻，还剩余三个组件

image.png

🦜 我们预计在 五一 假期结束前，为大家带来

  • 主题：暗黑模式、跟随系统等
  • md 渲染组件：支持图标，数学函数公式等
  • 实战模版：仿豆包或者通义

后续还会带来更多的 AI相关的组件 和 更好的开发体验

🐳 我们也会有计划针对 移动端、n8n 工作流编排节点、前后端 MCP、3D+AI技术等相关AI领域的 开发项目，进行调研寻找契合点。

有感兴趣的伙伴，可以进 交流群，一起研究推进 开发计划

快速链接 📢

资源类型链接
文档📖 开发文档
在线演示👁️ 在线预览
代码仓库🐙 GitHub 欢迎 star 助力开源！👊
NPM 包📦 npm
问题反馈🐛 提交 Bug
交流群🍉 二维码地址 加入微信交流群，获取最新动态和技术支持

如果您也觉得项目不错，可以在 github 上留下您宝贵的 star，您的 star 将是我们开源团队 这辈子的荣耀 🐋