组件总览

Rodel UI（@rd-element/ui）提供企业级 Vue 3 基础组件，CSS 命名空间前缀 rd-。

按钮

Button 按钮

el-button 全局皮肤 + RdButtonGroupMore。

标签

Tag 标签

el-tag；仅 primary 固定为 EP 默认蓝。

表单

Filter Shell 筛选外壳

RdInputGroup + EP 控件；级联用 RdFilterCascader。

InputGroup

#left | el-input | #right 输入组合。

CreatableSelect 可创建选择

下拉 + 底部自定义添加；单选 / 多选。

OrgHierarchy 组织筛选

七层组织树多栏浏览与搜索。

GroupedSelect 分组选择

左栏分类 + 右栏选项的分组下拉。

FileUpload 文件上传

点击 / 拖拽 / 粘贴上传与图片预览。

RichEditor 富文本

独立包 @rd-element/editor；TinyMCE 5 封装。

Form Basic 基础表单

EP 输入、下拉、多选、单选与开关；主题靠库全局 CSS。

FilterCascader 级联筛选

双栏浏览 + 搜索的列表级联筛选。

TabbedCascader 多 Tab 级联

多数据源 Tab + 面包屑钻取；叶子即选；结构化 v-model。

反馈

Feedback 反馈提示

Toast · 确认弹窗 · 空状态 · Tooltip · 角标。

布局

Sidebar 布局侧栏

RdSidebar + RdSidebarUser：菜单、Logo/用户插槽；select / logout 交业务。

通用

Field / Section

详情字段栅格、可折叠区块与显示字段配置。

Avatar / Logo

头像配色与品牌 Logo。

Popover

原生 ElPopover + rd-popover-popper。

Dialog / Drawer

弹层与侧滑面板（遮罩抖动）。

Tabs 分段

RdTabs 分段 + el-tabs 线型（选中/滑块品牌蓝）。

Steps / Timeline / Scroll

流程、时间轴与滚动区。

Search / Copy / Pagination

el-input 搜索/复制约定 + RdPagination。

Chat 对话

页内助手对话与发送。

数据报表

MetricCard 指标小卡

icon + 上标题 / 主题 / 下标题；常放 ListPageHero #stats。

Chart 图表

RdStatCard、RdChartCard 与 RdChartLine / Bar / Pie / Gauge / Funnel / Heatmap 等 ECharts 封装。

骨架

Skeleton 骨架屏

RdSkeletonBone shimmer 加载占位。

表格

Table 表格增强

行内编辑 / 下拉、链接单元格、分页；行操作用 RdButtonGroupMore。

列表页

List Page 列表页

Hero、侧栏、筛选面板、批量栏等列表页规范组件。

配置

Settings 配置面板

列设置与筛选项布局配置。

使用方式

请先阅读 快速开始，完成安装与引入配置后再使用组件。