SKILL

@rd-element/ui（Rodel UI）Agent 编写指南。正文随 npm 包发布在 skill/ 目录。

推荐接入（装包 + 薄指针）

pnpm add @rd-element/ui
mkdir -p .cursor/skills/rd-element-ui
cp node_modules/@rd-element/ui/skill/POINTER.md .cursor/skills/rd-element-ui/SKILL.md
# Codex 可选：
# mkdir -p .agents/skills/rd-element-ui
# cp node_modules/@rd-element/ui/skill/POINTER.md .agents/skills/rd-element-ui/SKILL.md

之后升级组件库即可拿到新 skill，不必再下载替换全文。

无 npm 环境时，可用下方浏览器下载 zip 兜底。

正文随 @rd-element/ui 发布在 node_modules/@rd-element/ui/skill/ 。推荐：复制 POINTER.md 到 .cursor/skills/rd-element-ui/SKILL.md ；无 npm 时可下载 zip 兜底。

SKILL.md

@rd-element/ui（Rodel UI 0.6.949）

企业级 Vue 3 组件库。前缀 Rd* / CSS rd- / token --rd-*。基于 Element Plus 二次封装（peer，不打包 EP）。

Agent 原则： 先按下方「选型」选组件，再按需打开 catalog.md / recipes.md。不要去翻 docs/components/，本 skill 已覆盖用法。

安装与接入

pnpm add @rd-element/ui element-plus @lucide/vue vue@^3.5.0
# 图表另需：
pnpm add echarts vue-echarts
# 富文本另需独立包：
pnpm add @rd-element/editor

CSS 顺序不能反：

import 'element-plus/dist/index.css'
import '@rd-element/ui/dist/style.css'
import '@rd-element/editor/dist/style.css' // 若使用富文本
import RodelUi from '@rd-element/ui'
import RodelEditor from '@rd-element/editor'
// 可选图表：
import { installCharts } from '@rd-element/ui/chart'

createApp(App).use(RodelUi).use(RodelEditor).use(installCharts).mount('#app')

• install 不会 app.use(ElementPlus)，只注册 Rd*；业务自行挂 EP 或用 Resolver。
• 库 CSS 全局覆盖 .el-button 等；el-tag 仅将 primary 固定为 EP 默认蓝（不跟品牌橙）。
• 命令式 toast / rdConfirm 必须显式 import；Resolver 管不了。
• 富文本：RdRichEditor 在 @rd-element/editor；需自行加载 TinyMCE 5.10.x 到 window.tinymce。RodelUiResolver 已把 RdRichEditor 指到该包。

按需：

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { RodelUiResolver } from '@rd-element/ui/resolver'

Components({
  resolvers: [
    ElementPlusResolver({ importStyle: false }),
    RodelUiResolver(),
  ],
})

纯按需且要用 rdConfirm 时：入口调用 setConfirmAppContext(app._context)。

选型决策树（写业务先看这个）

按钮 / 标签 / 搜索框 / 复制 / 气泡？
  → el-button / el-tag / el-input(#prefix|suffix-icon) / ElPopover + rd-popover-popper
  → 主按钮+更多菜单 → RdButtonGroupMore（表格行操作加 class="table-row-actions"）
  → 并列按钮+末位⋯ → el-button-group 内嵌 RdButtonGroupMore（勿传 title）

轻提示？ → toast.success/error/warning/info
删除/危险确认？ → rdConfirm.confirm({ type: 'danger' })
居中弹窗？ → RdDialog（v-model:visible）
侧滑面板？ → RdDrawer（variant form|workspace）
列表「全部筛选」抽屉？ → RdListPageFilterDrawer

筛选栏外壳？ → RdInputGroup（#left 标签 | 默认槽放控件）
  ├─ 普通输入/下拉 → el-input / el-select
  ├─ 日期（必加 popper-class） → el-date-picker + popper-class="filter-date-popper"
  ├─ 地区等单路径级联 → RdFilterCascader
  ├─ 多 Tab 异构树级联（叶子即选） → RdTabbedCascader
  ├─ 组织/人员树（多选） → RdOrgHierarchySearch
  ├─ 可创建选项 → RdCreatableSelect
  └─ 左分类+右选项 → RdGroupedCategorySelect（prop 名 options，组内 children）

文件上传？ → RdFileUpload（组件不上传云端；onChange 里业务上传 + 回写 status/url）
富文本？ → RdRichEditor（@rd-element/editor；imagesUploadHandler / fetchTextPhrases 回调；需 window.tinymce）
只读详情字段？ → RdSection + RdFieldGrid + RdField
表单编辑？ → el-form + el-*（库皮肤）

CRM/后台列表页？ → RdListPage* 拼装（见 recipes）
应用布局侧栏？ → RdSidebar + #logo→RdLogo + #footer→RdSidebarUser（@logout）
表格增强？ → el-table + RdTableCellLink / InlineEdit / InlineSelect / ColumnSettings / RdPagination
图表？ → RdChartCard / RdStatCard（主包）+ RdChartLine/Bar/…（@rd-element/ui/chart）
列表 Hero 指标小卡？ → RdMetricCard，放进 RdListPageHero `#stats`；主题区（侧栏+表）→ 同卡 `#content` 放 RdListPageContentRow
空状态 / 骨架？ → RdEmpty / RdSkeletonBone
分段 Tab？ → RdTabs + List/Trigger/Content
步骤 / 时间线 / 聊天？ → RdSteps / RdTimeline / RdChat

明确不存在（禁止 invent）

不要找	改用
RdButton / RdTag	el-button / el-tag
RdSearchInput / RdCopyText	el-input + Lucide #prefix / :suffix-icon
RdHoverCard	ElPopover + popper-class="rd-popover-popper"
RdSelect / RdDatePicker	el-select / el-date-picker（日期必须 popper-class="filter-date-popper"，可包在 RdInputGroup）

命名约定

类型	规则	例
包	@rd-element/ui	图表子路径 @rd-element/ui/chart
组件	Rd + PascalCase	RdDialog
弹层显隐	v-model:visible	不是默认 v-model
图标	@lucide/vue	业务传入 icon prop
Token	--rd-color-primary 等	主题覆盖见下

:root {
  --rd-color-primary: #ea543f;
  --rd-color-primary-hover: #d94432;
  --rd-color-primary-active: #c73b2b;
}

Agent 编写规则

1. 优先 Rd* 有封装的场景；没有就用 el-* + 库全局皮肤。
2. 不要再包一层 RdButton；图标一律 Lucide。
3. Dialog/Drawer 用 v-model:visible；默认 maskClosable=false（点遮罩抖动不关）。
4. el-date-picker 必须加 popper-class="filter-date-popper"，否则库内日期面板样式不生效。
5. 组织树 value 必须是业务唯一 type_id，用 fieldNames 映射接口字段，勿用手改成 label/value 除非必要。
6. 上传：在 onChange 上传；fileUrl/url 已是 http(s):// 时不要拼 ossBase。
7. 列表页用 RdListPage* 积木，不要从零 invent 布局类名。
8. 图表从 @rd-element/ui/chart 引入；主包 use(RodelUi) 不注册图表。
9. Rd* 内置文案默认中文（零配置兼容）；英文需 ElConfigProvider 合并 @rd-element/ui/locale（{ ...en, ...rdEn }）。
10. 需要 props/事件细节 → 打开 catalog.md，搜 ### 组件名（如 ### RdDialog）读 Attributes / Events / Slots；需要复制模板 → recipes.md。不要通读整个 catalog。

延伸

• 组件全集与 API 表：catalog.md（搜 ### RdXxx）
• 业务复制配方：recipes.md
• 本仓库源码：packages/rodel-ui；联调 pnpm build 后 link

catalog.md

@rd-element/ui 组件目录（API）

从 @rd-element/ui 具名导入（图表除外）。Peers：vue ^3.5、element-plus ^2.8、@lucide/vue ^1；图表另需 echarts + vue-echarts。

Agent 用法： 选型后在本文件搜 ### 组件名（如 ### RdDialog），读 Attributes / Events / Slots。不要通读全文。无事件/插槽的小节会省略对应表。

内部勿直接用：RdOverflowTagsPopover、RdConfirmDialog（优先 rdConfirm）、RdToast（优先 toast）。

---

命令式 API

toast / useToast

import { toast } from '@rd-element/ui'
toast.success('保存成功')
toast.error('失败', '请重试') // (title, body?, duration?)
toast.warning('警告')
toast.info('提示')
toast.remove(id); toast.clear()
toast.config({ maxVisible: 4, offset: 24, zIndex: 9999 })

自动挂载 host。duration: 0 常驻直到 remove。

rdConfirm / useConfirm

import { rdConfirm } from '@rd-element/ui'
const ok = await rdConfirm.confirm({
  title: '删除客户',
  body: '不可恢复',
  type: 'danger', // warning | danger | info
  confirmText: '确认删除',
  cancelText: '取消',
})
if (!ok) return

需 app.use(RodelUi) 或 setConfirmAppContext(app._context)。遮罩点击抖动不关。优先命令式。

rdConfirm options

名	类型	默认	说明
title	string	—	标题
body	string	—	说明文案
type	'warning' | 'danger' | 'info'	'warning'	语义色与图标
confirmText	string	'确定'	确认按钮文案
cancelText	string	'取消'	取消按钮文案

---

反馈 / 弹层

组件	用途
RdDialog	贴顶弹窗（可拖/缩放）
RdDrawer	侧滑 form / workspace
RdEmpty	空/错状态
RdSkeletonBone	骨架块
RdBadge	角标

气泡：<ElPopover popper-class="rd-popover-popper" … />

RdDialog

贴顶弹窗。必须 v-model:visible（勿用裸 v-model）。

Attributes

名	类型	默认	说明
v-model:visible	boolean	false	是否显示
title	string	''	标题
description	string	''	副标题 / 说明
width	string | number	'520px'	宽度；复杂表单可传 720px
maskClosable	boolean	false	点击遮罩是否关闭；false 时抖动不关闭
showClose	boolean	true	是否显示关闭按钮
alignCenter	boolean	false	垂直居中；默认 false，距顶 10vh
destroyOnClose	boolean	false	关闭时销毁内容

默认可拖标题栏；右下角可缩放；关闭后复位。

Events

名	签名	说明
open / opened	() => void	打开时 / 打开动画结束
close / closed	() => void	关闭时 / 关闭动画结束

Slots

名	说明
default	正文
header	自定义标题区
footer	底栏操作

RdDrawer

侧滑面板。嵌套用 useRdDrawerStack。

Attributes

名	类型	默认	说明
v-model:visible	boolean	false	是否显示
variant	'form' | 'workspace'	'form'	form 窄抽屉带标题；workspace 宽工作区
title	string	''	标题栏文案（withHeader 时）
description	string	''	副标题
maskClosable	boolean	false	点外侧：true 直接关闭；false 抖动不关闭
showClose	boolean	—	关闭按钮
withHeader	boolean	—	是否展示标题栏（默认 form 有、workspace 无）
nested	boolean	false	多层嵌套标记
…	—	size 默认 form=400px、workspace=80%	其余透传 el-drawer（size / direction / destroy-on-close 等）

Events

名	签名	说明
open / opened	() => void	打开时 / 打开动画结束
close / closed	() => void	关闭时 / 关闭动画结束

Slots

名	说明
default	正文
footer	底栏操作

RdEmpty

空/错状态。

Attributes

名	类型	默认	说明
title	string	—	主文案
hint	string	—	辅助说明
variant	'search' | 'data' | 'error' | 'permission'	'search'	场景图标
size	'sm' | 'md' | 'lg'	'md'	尺寸
showAction	boolean	false	是否显示操作按钮
actionLabel	string	—	操作按钮文案

Events

名	签名	说明
action	() => void	点击操作按钮

Slots

名	说明
action	自定义底部操作区（覆盖默认按钮）

RdSkeletonBone

骨架占位。

Attributes

名	类型	默认	说明
width	string	'100%'	宽度
height	string	'14px'	高度
circle	boolean	false	圆形（头像）
pill	boolean	false	胶囊形
rounded	'sm' | 'md' | 'pill'	'sm'	圆角级别

RdBadge

角标。筛选项用 el-tag，不要用 Badge 当标签。

Attributes

名	类型	默认	说明
value	number | string	—	数字或文案；variant=dot 时可省略
variant	'count' | 'dot'	'count'	样式
tone	'primary' | 'success' | 'warning' | 'error' | 'neutral'	'primary'	语义色
max	number	99	超过显示 max+
showZero	boolean	false	值为 0 时仍显示

---

按钮 / 输入外壳

组件	用途
el-button	按钮（库全局皮肤；无 RdButton）
RdButtonGroupMore	主按钮 + ⋯ 更多
RdInputGroup	筛选/表单组合外壳
RdPagination	分页

搜索 / 复制：

<el-input v-model="q" clearable>
  <template #prefix><Search :size="14" /></template>
</el-input>
<el-input :model-value="code" readonly :suffix-icon="Copy" />

RdButtonGroupMore

主按钮 + ⋯。表格行：size="small" + class="table-row-actions"。并列按钮末位 ⋯：嵌进 el-button-group，勿传 title。

Attributes

名	类型	默认	说明
title	string	—	主按钮文案；有值时渲染主按钮
icon	Component	—	主按钮图标（Lucide）
children	RdButtonGroupMoreItem[]	—	下拉子项；空则不显示 ⋯
type	'primary' | 'success' | 'warning' | 'danger' | 'info' | ''	''	按钮类型
size	'large' | 'default' | 'small'	'default'	尺寸
trigger	'click' | 'hover'	'click'	⋯ 下拉触发方式
ariaLabel	string	'更多'	⋯ 按钮无障碍标签
showTimeout	number	80	hover 展开延迟（ms）
hideTimeout	number	120	hover 收起延迟（ms）

RdButtonGroupMoreItem

名	类型	默认	说明
title	string	—	子项文案
icon	Component	—	子项图标
onClick	() => void	—	点击回调
show	boolean	true	是否展示
disabled	boolean	false	是否禁用
divided	boolean	false	项前分割线
command	string | number | Record	—	command 事件载荷；缺省取 title

Events

名	签名	说明
click	(event: MouseEvent) => void	主按钮点击
command	(cmd: string | number | Record) => void	下拉项点击

RdInputGroup

筛选栏外壳。中间放 el-* / Rd*；el-date-picker 必须 popper-class="filter-date-popper"。

Attributes

名	类型	默认	说明
hint	string	—	底部提示文案
disabled	boolean	false	整组禁用
leftDivider	boolean	true	有 #left 时右侧竖线
rightDivider	boolean	true	有 #right 时左侧竖线

Slots

名	说明
left	左侧标签 / 图标
default	中间控件
right	右侧按钮 / 文案
hint	底部提示（覆盖 hint prop）

RdPagination

Attributes

名	类型	默认	说明
v-model:current-page	number	—	当前页
v-model:page-size	number	—	每页条数
total	number	—	总条数

sizes 固定 [10,50,100,500,1000]。

Events

名	签名	说明
update:currentPage	(page: number) => void	页码变更
update:pageSize	(size: number) => void	每页条数变更

---

表单选择器

组件	用途
RdCreatableSelect	可创建下拉
RdGroupedCategorySelect	左分类 + 右选项
RdFilterCascader	单路径级联
RdTabbedCascader	多 Tab 异构树级联
RdOrgHierarchySearch	组织/人员树多选
RdFileUpload	选文件列表（不上传 HTTP）
RdRichEditor	富文本（@rd-element/editor）

固定枚举无创建 → el-select。多选组织树 → RdOrgHierarchySearch。多 Tab → RdTabbedCascader。

RdCreatableSelect

Attributes

名	类型	默认	说明
v-model	string | string[]	—	选中值
options	{ label, value, custom? }[]	—	选项列表
label	string	—	表单字段标签
placeholder	string	—	未选占位
multiple	boolean	false	多选
clearable	boolean	true	可清空
allowCreate	boolean	true	底部自定义添加
filterable	boolean	false	顶部搜索框
searchPlaceholder	string	'搜索'	搜索框占位
remote	boolean	false	远程搜索（父更新 options）
remoteMethod	(query: string) => void	—	远程搜索方法
remoteDebounce	number	300	防抖 ms
loading	boolean	false	远程加载中
filterMethod	(query, option) => boolean	—	自定义本地过滤
emptyText	string	'无匹配选项'	无匹配文案
customInputPlaceholder	string	—	自定义输入占位
addButtonLabel	string	—	添加按钮文案
collapseTags	boolean	true	多选折叠标签
maxCollapseTags	number	1	折叠前可见标签数
panelWidth	number | string	—	面板宽度
embedded	boolean	false	嵌筛选栏去边框
disabled	boolean	false	禁用

Events

名	签名	说明
update:modelValue	(value: string | string[]) => void	值变更
change	(value: string | string[]) => void	值变更（确认）
option-add	(option) => void	新增自定义选项
search	(query: string) => void	搜索关键词变化

RdGroupedCategorySelect

prop 名是 options（不是 groups）；组内字段 children。

Attributes

名	类型	默认	说明
v-model	string | number | array | null	—	选中值
options	{ key, label, children: { value, label, enLabel? }[] }[]	—	分组选项
multiple	boolean	false	多选
placeholder	string	'请选择'	占位
disabled	boolean	false	禁用
clearable	boolean	true	可清空
maxTagCount	number	3	多选标签上限

Events

名	签名	说明
update:modelValue	(value) => void	值变更
change	(value) => void	值变更

RdFilterCascader

单路径级联（string[]）。确认后才 change。

Attributes

名	类型	默认	说明
v-model	string[]	[]	选中路径 value 数组
options	{ label, value, children? }[]	—	级联树
placeholder	string	'全部'	未选占位
rootLabel	string	'全部'	根节点标签
searchPlaceholder	string	'搜索'	搜索占位
confirmLabel	string	—	确认按钮文案
emptyText	string	—	无结果文案
checkStrictly	boolean	true	允许只选父级

Events

名	签名	说明
update:modelValue	(value: string[]) => void	路径变更
change	(value: string[]) => void	确认选择

RdTabbedCascader

多 Tab 树级联：面板搜索 + 面包屑；点叶子即选中。data 可为树或 string[]；Tab 设 creatable 可底部自定义输入。

Attributes

名	类型	默认	说明
v-model	TabbedCascaderValue | null	null	{ tab, path, labels }；null 未选
options	{ label, value, data, creatable? }[]	—	Tab 列表
options[].creatable	boolean | { prefix, append, placeholder }	—	该 Tab 底部自定义输入
fieldNames	全局或按 tab.value 映射	label/value/children	同事树常用 name / type_id
placeholder	string	'请选择'	未选占位
rootLabel	string	'全部'	面包屑根文案
searchPlaceholder	string	'搜索'	面板搜索占位
emptyText	string	'未找到匹配项…'	搜索无结果
clearable	boolean	true	可清空
disabled	boolean	false	禁用

Events

名	签名	说明
update:modelValue	(value | null) => void	选中或清空
change	(value | null) => void	同 update（叶子选中或清空）
clear	() => void	点击清空

Slots

名	说明
append	覆盖 creatable 输入框后缀

工具：encodeTabbedCascaderValue → `${tab}-${path.join('.')}`。Expose：encodeValue。

RdOrgHierarchySearch

组织/人员多栏树。

Attributes

名	类型	默认	说明
v-model	string[][] | string[] | null	null	形态由 valueMode 决定
valueMode	'path' | 'value'	'path'	path=完整路径；value=仅 type_id
options	unknown[]	—	组织树；配合 fieldNames
fieldNames	OrgFieldNames	label/value/children	常映射 name / type_id
placeholder	string	'选择组织或人员'	触发器占位
rootLabel	string	'全公司'	根标签（不可勾选）
searchPlaceholder	string	—	搜索占位
confirmLabel	string	—	确认文案
emptyText	string	—	无结果文案
collapseTags	boolean	true	多选折叠
maxCollapseTags	number	1	折叠前可见数
checkStrictly	boolean	true	允许选任意层级
checkCascade	boolean	false	父子联动（value 须唯一 type_id）

Events

名	签名	说明
update:modelValue	(value) => void	选中变更
change	(value) => void	确认选择

坑： value 必须是业务唯一 type_id，勿用会撞号的裸 id。

Expose：getOrgLeafValues(id | id[]): string[]。工具：normalizeOrgTree findOrgPathByValue matchOrgSelections formatOrgSelectionsLabel 等。

RdFileUpload

只负责选文件/列表/预览，不上传 HTTP。在 change / 业务钩子里上传并回写 status/url。

Attributes

名	类型	默认	说明
v-model	UploadFileItem[]	[]	文件列表
accept	string	常见文档/图片	accept
multiple	boolean	true	多文件
disabled	boolean	false	禁用
maxCount	number	5	最大文件数
maxSizeMb	number	10	单文件上限 MB
hint	string	自动生成	底部提示
onChange	(file, files) => void	—	deprecated；添加 ready、success/fail 时触发；下一主版本移除
ossBase	string	''	拼相对 fileUrl；已是 http(s) 不拼

UploadFileItem：uid name size type file? status? url? fileUrl? fileName? fileSha1? fileSize? fileSuffix? …

本地新选：status:'ready' + file。远程回显：无 file，status:'success' + fileUrl。

Events

名	签名	说明
update:modelValue	(files) => void	列表变更
change	(files) => void	整表变更（新代码请用此事件）

Slots

名	参数	说明
upload	RdFileUploadSlotProps	接管上传入口、图标和提示；未传入时使用内置 fallback。
file-list	RdFileUploadSlotProps	接管文件列表、预览和操作按钮；未传入时使用内置 fallback。

RdFileUploadSlotProps 提供 files、disabled、dragOver、pasteReady、canSelect、defaultHint，以及 open、remove(uid)、preview(uid)、getPreviewUrl、isImageFile、displayName、displaySize、fileIcon 等渲染和交互辅助方法。

RdRichEditor（@rd-element/editor）

独立分包。需业务加载 TinyMCE 5.10.x 到 window.tinymce。

Attributes

名	类型	默认	说明
v-model	string	''	HTML
plugins / menubar / toolbar / toolbar_mode	—	内置默认	TinyMCE 配置
language	string	zh_CN	语言包名
languageUrl	string	—	语言包 JS 路径
min_height	number	480	最小高度
height	number	—	固定高度
includes / excludes	object	—	在默认 plugins/menubar/toolbar 上追加 / 移除
imagesUploadHandler	(blob) => Promise<url>	—	组件不发 HTTP
textPhrase	boolean	false	# 快捷短语
fetchTextPhrases	() => Promise<TextPhraseItem[]>	—	短语列表
tinymceBaseUrl	string	—	静态资源 base

Events

名	签名	说明
update:modelValue	(value: string) => void	内容变更
change	(value, e) => void	编辑器 change
input	(e: Event) => void	编辑器 input

Slots

名	说明
footer-bar	编辑器底部栏

Expose：getEditor getContent setContent insertContent validate。

import { RdRichEditor } from '@rd-element/editor'
import '@rd-element/editor/dist/style.css'

---

详情展示

组件	用途
RdField	只读字段
RdFieldGrid	字段网格
RdSection	可折叠区块
RdFieldSettings	字段显隐/排序
RdAvatar	姓名首字头像
RdLogo	品牌 Logo
RdScrollArea	滚动容器
RdSteps	步骤条
RdTimeline	时间线
RdTabs (+ List/Trigger/Content)	分段 Tab
RdChat	聊天面板

可编辑表单用 el-form，不用 RdField。

RdField

Attributes

名	类型	默认	说明
label	string	—	字段标签
value	string	'—'	展示值
href	string	—	链接地址
link	boolean	false	链接样式
empty	boolean	false	强制空态

RdFieldGrid

Attributes

名	类型	默认	说明
columns	1 | 2 | 3	3	列数

Slots

名	说明
default	字段内容（RdField 等）

RdSection

Attributes

名	类型	默认	说明
title	string	—	区块标题
collapsible	boolean	true	可折叠
defaultExpanded	boolean	true	默认展开

Slots

名	说明
title	自定义标题
actions	标题右侧操作
default	正文

RdFieldSettings

Attributes

名	类型	默认	说明
items	{ key, label, visible, fixed?, order }[]	—	字段列表
customized	boolean	—	是否已定制（影响恢复按钮）
title	string	—	浮层标题
hint	string	—	浮层说明

Events

名	签名	说明
toggle	(key: string) => void	勾选切换
reorder	(from, to) => void	拖拽排序
reset	() => void	恢复默认

RdAvatar

Attributes

名	类型	默认	说明
name	string	—	姓名（首字与配色）
size	'sm' | 'md' | 'lg'	'md'	尺寸
shape	'rounded' | 'circle'	'rounded'	形状
color	string	—	自定义底色；不传按 name 哈希

工具：avatarColor(name) AVATAR_PALETTE。

RdLogo

Attributes

名	类型	默认	说明
collapsed	boolean	false	true 时仅图标
iconSrc	string	内置 svg	折叠态图
fullSrc	string	内置 svg	展开态图

RdScrollArea

Attributes

名	类型	默认	说明
height	number | string	—	固定高度
maxHeight	number | string	—	最大高度
orientation	'vertical' | 'horizontal' | 'both'	'vertical'	滚动方向

Slots

名	说明
default	可滚动内容

RdSteps

Attributes

名	类型	默认	说明
steps	{ label, done? }[]	—	步骤列表

RdTimeline

Attributes

名	类型	默认	说明
items	{ time, title, meta? }[]	—	时间点列表

RdTabs

Attributes

名	类型	默认	说明
v-model	string	—	当前 Tab
defaultValue	string	—	非受控初始值

Slots

名	说明
default	List / Trigger / Content

RdTabsList

Attributes

名	类型	默认	说明
fullWidth	boolean	false	触发器均分铺满

RdTabsTrigger

Attributes

名	类型	默认	说明
value	string	—	Tab 值
disabled	boolean	false	禁用

RdTabsContent

Attributes

名	类型	默认	说明
value	string	—	对应 Tab 值
bordered	boolean	true	内容区边框卡片

RdChat

Attributes

名	类型	默认	说明
messages	ChatMessage[]	[]	消息列表
title / subtitle	string	—	顶部标题与欢迎语
assistantName	string	'AI'	AI 头像名
loading	boolean	false	生成中（禁用输入）
placeholder	string	'发送消息…'	输入占位
showAttach	boolean	true	附件按钮
maxHeight	string	'600px'	容器最大高度

Events

名	签名	说明
send	(content: string) => void	发送
attach	() => void	附件
refresh	() => void	刷新

---

表格辅助

组件	用途
RdTableCellLink	单元格链接
RdTableInlineEdit	行内文本编辑
RdTableInlineSelect	行内下拉
RdTableColumnSettings	列显隐/固定/自定义动作
RdFilterLayoutSettings	筛选项布局

行操作：RdButtonGroupMore。

RdTableCellLink

Attributes

名	类型	默认	说明
variant	'primary' | 'muted'	'primary'	样式
block	boolean	false	块级占满宽度
title	string	—	native title
icon	Component	—	自定义图标
showIcon	boolean	true	显示外链图标

Events

名	签名	说明
click	(event: MouseEvent) => void	点击

Slots

名	说明
default	链接文案

RdTableInlineEdit

Attributes

名	类型	默认	说明
v-model	string | number	''	单元格值
title	string	'编辑'	浮层标题
description	string	''	浮层说明
placeholder	string	—	输入占位
inputType	'text' | 'textarea'	'text'	输入类型
disabled	boolean	false	禁用
ariaLabel	string	—	无障碍标签
showEditIcon	boolean	true	编辑图标
width	number | string	280	浮层宽度
placement	PopoverPlacement	'bottom-start'	浮层位置
confirmText / cancelText	string	—	按钮文案

Events

名	签名	说明
update:modelValue	(value) => void	值变更
save	(value) => void	保存
cancel	() => void	取消
open / close	() => void	浮层开/关

Slots

名	说明
display	展示态
editor	自定义编辑器（draft / setDraft / save / cancel / close）

RdTableInlineSelect

Attributes

名	类型	默认	说明
v-model	string | number	—	选中值
options	{ label, value }[]	—	下拉选项
disabled	boolean	false	禁用
ariaLabel	string	—	无障碍标签
showEditIcon	boolean	true	编辑图标

Events

名	签名	说明
update:modelValue	(value) => void	值变更
change	(value) => void	选择变更

Slots

名	说明
display	展示态

RdTableColumnSettings

Attributes

名	类型	默认	说明
items	TableColumnSettingItem[]	—	visible / fixed 锁定 / tableFixed / flags
customized	boolean	—	是否已定制
showPinLeft	boolean	true	展示「固定左侧」
showPinRight	boolean	false	展示「固定右侧」
extraActions	TableColumnSettingAction[]	[]	自定义动作列
hint	string	—	覆盖面板提示

Events

名	签名	说明
toggle	(key: string) => void	显隐
toggleTableFixed	(key, side: 'left' | 'right') => void	左/右固定互斥
toggleAction	(columnKey, actionKey) => void	自定义动作开关
reorder	(from, to) => void	拖拽排序
reset	() => void	恢复默认

Slots

名	说明
append	触发按钮右侧扩展

业务用 item.flags[actionKey] 存自定义开关；库不实现合并等表格行为。

RdFilterLayoutSettings

Attributes

名	类型	默认	说明
items	FilterFieldSettingItem[]	—	inlineVisible / quick / order / fixed
customized	boolean	—	是否已定制

Events

名	签名	说明
toggle	(key: string) => void	栏内显示
toggleQuick	(key: string) => void	快捷筛选项
reorder	(from, to) => void	拖拽排序
reset	() => void	恢复默认

---

列表页积木

拼装 CRM/后台列表（表格仍用 el-table）。类型：ListPageStatCard SidebarGroup FilterFieldSettingItem TableColumnDefinition 等从主包导出。

组件	用途
RdListPageLayout	页壳
RdListPageHero	标题+操作+统计+主题区
RdMetricCard	指标小卡
RdListPageScopeTabs	我的/团队
RdListPageSidebar	客群树
RdListPageSidebarNode	侧栏节点（仅 Sidebar 内）
RdListPageContentRow	侧栏+主区壳
RdListPageDataPanel	主内容卡
RdListPagePanelHeader	面板头
RdListPageStatusTabs	状态 Tab
RdListPageFilterBar	行内筛选+列设置
RdListPageFilterChips	已选标签
RdListPageFilterDrawer	全部筛选
RdListPageBulkBar	批量栏
RdListPageTableArea	表区
RdListPageTableEmpty	表空

RdListPageLayout

Attributes

名	类型	默认	说明
loading	boolean	—	true 时渲染 skeleton

Slots

名	说明
skeleton	loading 骨架
default	正文

RdListPageHero

统一 padding --page-hero-pad-*。

Attributes

名	类型	默认	说明
title	string	—	主标题
subtitle	string	—	副标题
statsLabel	string	—	#stats aria-label

Slots

名	说明
leading	标题左侧
title-extra	标题下方扩展
actions	右上角操作
meta	元信息
stats	指标卡（RdMetricCard）
content	同卡主题区（常放 ContentRow）

RdMetricCard

Attributes

名	类型	默认	说明
icon	Component	—	左侧图标；不传不显示
overline	string	—	上标题；有值才显示
title	string	—	主文案/大数字
caption	string	—	下标题
tone	'primary' | 'success' | 'violet' | 'accent'	'primary'	icon 底色
class	string	—	可用 --rd-metric-card-bg / --rd-metric-card-color

RdListPageScopeTabs

Attributes

名	类型	默认	说明
v-model	string	—	当前范围
tabs	ListPageScopeTab[]	—	范围 Tab
ariaLabel	string	'数据范围'	tablist aria-label
size	'md' | 'sm'	'md'	尺寸
bordered	boolean	true	外框边框

Events

名	签名	说明
update:modelValue	(value: string) => void	范围切换

RdListPageSidebar

无面板收起（交给 ContentRow）。

Attributes

名	类型	默认	说明
v-model	string	—	选中节点 id；空串=「全部」
groups	SidebarGroup[]	—	分组树
totalCount	number	—	「全部」行计数
totalLabel	string	'全部'	「全部」文案

Events

名	签名	说明
update:modelValue	(id: string) => void	选中变更；再点同一节点清空

RdListPageSidebarNode

仅在 Sidebar 内使用。

Attributes

名	类型	默认	说明
node	SidebarNode	—	节点
depth	number	0	嵌套深度

RdListPageContentRow

Attributes

名	类型	默认	说明
showAside	boolean	true	是否渲染左侧栏
asideTitle	string	'客群列表'	左侧标题
collapsible	boolean	true	允许收起
defaultCollapsed	boolean	false	初始收起
asideActive	boolean	false	收起态选中小圆点
merged	boolean	true	合并大卡片外观

Events

名	签名	说明
update:collapsed	(value: boolean) => void	收起状态

Slots

名	说明
aside	左侧（Sidebar）
aside-actions	左侧工具栏右侧操作
default	主区（DataPanel）

RdListPageDataPanel

无 props。

Slots

名	说明
header	粘性顶栏：PanelHeader / StatusTabs
toolbar	粘性顶栏：筛选工具条
default	表格 / 主体
footer	分页等

RdListPagePanelHeader

Attributes

名	类型	默认	说明
tabs	boolean	—	tabs 行样式
title	string	—	左侧标题
count	number	—	结果条数
showClear	boolean	—	「清除筛选」按钮

Events

名	签名	说明
clear	() => void	清除筛选

Slots

名	说明
left	覆盖左侧 title/count
right	覆盖右侧清除按钮

RdListPageStatusTabs

Attributes

名	类型	默认	说明
v-model	string	—	当前状态
tabs	ListPageStatusTab[]	—	可带 count

Events

名	签名	说明
update:modelValue	(value: string) => void	状态切换

RdListPageFilterBar

Attributes

名	类型	默认	说明
drawerFilterCount	number	—	「全部筛选」角标
columnItems	TableColumnSettingItem[]	—	列设置项
columnsCustomized	boolean	—	列是否已定制
showPinLeft	boolean	true	透传列设置
showPinRight	boolean	false	透传列设置
extraActions	TableColumnSettingAction[]	[]	透传自定义动作
columnSettingsHint	string	—	透传 hint

Events

名	签名	说明
openDrawer	() => void	打开全部筛选
toggleColumn	(key: string) => void	列显隐
toggleColumnTableFixed	(key, side) => void	列固定
toggleColumnAction	(columnKey, actionKey) => void	自定义动作
reorderColumns	(from, to) => void	重排列
resetColumns	() => void	重置列

Slots

名	说明
default	主筛选项（RdInputGroup 等）
append	列设置按钮右侧扩展

RdListPageFilterChips

Attributes

名	类型	默认	说明
tags	{ key, label, remove }[]	—	已选标签；空数组不渲染

关闭走 tag.remove 回调，无组件级事件。

RdListPageFilterDrawer

Attributes

名	类型	默认	说明
v-model:visible	boolean	—	是否显示
v-model:tab	'filters' | 'layout'	'filters'	当前 Tab
filterLayoutItems	FilterFieldSettingItem[]	—	筛选项布局
filterLayoutCustomized	boolean	—	布局是否已定制
title	string	'全部筛选'	抽屉标题

Events

名	签名	说明
apply	() => void	确定应用
reset	() => void	重置筛选条件
toggleFilter	(key: string) => void	筛选项显隐
toggleFilterQuick	(key: string) => void	快捷筛选项
reorderFilters	(from, to) => void	重排筛选项
resetFilterLayout	() => void	重置布局

Slots

名	说明
filters	「筛选条件」Tab
footer-prepend	底栏前置扩展

RdListPageBulkBar

Attributes

名	类型	默认	说明
count	number	—	已选条数；≤0 不显示
showCrossPage	boolean	false	跨页全选入口
crossPageActive	boolean	false	跨页已全选
crossPageTotal	number	0	筛选结果总数
flush	boolean	false	去掉左右外边距

Events

名	签名	说明
clear	() => void	取消选择
toggleCrossPage	() => void	切换跨页全选

Slots

名	说明
left-extra	左侧计数旁扩展
actions	右侧批量操作

RdListPageTableArea

Attributes

名	类型	默认	说明
loading	boolean	—	loading 样式
headerSticky	'page' | 'container' | false	'page'	表头吸顶；抽屉内 page 自动按 container；表内 height/max-height 用 false

Slots

名	说明
default	el-table 等

RdListPageTableEmpty

Attributes

名	类型	默认	说明
title	string	—	空态标题
hint	string	—	说明
showAction	boolean	—	操作按钮
actionLabel	string	—	按钮文案

Events

名	签名	说明
action	() => void	点击操作

---

应用布局侧栏

与 RdListPageSidebar（列表页左栏分类）不同。无 vue-router：点击只 emit，业务 router.push(item.path)。

组件	用途
RdSidebar	应用导航侧栏
RdSidebarUser	底部用户卡

类型/工具：RdNavItem RdNavGroup；resolveActiveMenu resolveMenuOpeneds 等。

RdSidebar

Attributes

名	类型	默认	说明
v-model:collapsed	boolean	—	是否折叠
groups	RdNavGroup[]	—	导航分组
activePath	string	''	当前高亮 path（通常 route.path）
showCollapse	boolean	true	折叠按钮

Events

名	签名	说明
update:collapsed	(value: boolean) => void	折叠变更
toggle-collapse	() => void	点击折叠按钮
select	(item: RdNavItem) => void	叶子菜单点击
logo-click	() => void	Logo 区点击

Slots

名	说明
logo	Logo 区（作用域 collapsed）；放 RdLogo
footer	底部（作用域 collapsed）；放 RdSidebarUser

RdSidebarUser

Attributes

名	类型	默认	说明
collapsed	boolean	false	侧栏折叠态
name	string	—	显示名
role	string	''	角色 / 副标题
avatarText	string	—	头像文字；默认 name 首字

Events

名	签名	说明
logout	() => void	退出登录

---

图表

入口	组件
@rd-element/ui	RdChartCard RdStatCard RdMetricCard CHART_PALETTE
@rd-element/ui/chart	RdChartLine Bar Area Pie Combo Rank Radar Gauge Heatmap Funnel RdChartBase installCharts

app.use(RodelUi) 不注册图表组件。图内文字/线宽按容器缩放。

图表通性（RdChart* 除 Card/Stat/Base 外壳）

Attributes（共有）

名	类型	默认	说明
height	string	见图	高度
loading	boolean	false	加载中
empty	boolean	false	空态
emptyTitle / emptyHint	string	—	空态文案
error	boolean	false	错误态
errorTitle / errorHint	string	—	错误文案

Events

名	签名	说明
retry	() => void	错误态重试

以下各图只列差异 props（另含通性）。

RdChartCard

Attributes

名	类型	默认	说明
title	string	''	标题
subtitle	string	''	副标题
plain	boolean	false	无边框紧凑嵌套

Slots

名	说明
header	自定义标题区
actions	操作区
default	图表内容

RdStatCard

Attributes

名	类型	默认	说明
label / value / unit	string	—	指标名与数值
momLabel / momValue / momTrend	string / StatCardTrend	'环比' / — / 'flat'	环比
yoyLabel / yoyValue / yoyTrend	string / StatCardTrend	'同比' / — / 'flat'	同比
compareLabel / compareValue / trend	—	trend='flat'	单条对比（有 mom/yoy 时忽略）
extra	{ label, value }[]	—	附加指标
extraLayout	'vertical' | 'horizontal'	'vertical'	extra 布局
sparkline	number[]	—	迷你折线
color	StatCardColor	'default'	强调色
loading	boolean	false	加载
animate / enterDelay	boolean / number	true / 0	动效

Slots

名	说明
icon	标题右侧图标
trend	覆盖环比/同比区
right	右侧扩展（如 Gauge）
default	主内容底部追加

RdChartBase

原始 ECharts option 包装。

Attributes

名	类型	默认	说明
option	EChartsOption	—	必填
height	string	'280px'	高度
autoresize	boolean	true	自适应
+ 通性 loading/empty/error

RdChartLine

名	类型	默认	说明
categories / series	string[] / LineSeriesData[]	—	横轴与系列
legend / smooth	boolean	true	图例 / 平滑
yAxisLabel	string	—	Y 轴名
yFormatter	(v: number) => string	—	Y 格式化

RdChartBar

名	类型	默认	说明
categories / series	string[] / BarSeriesData[]	—	类目与系列
stack / horizontal	boolean	false	堆叠 / 水平条
legend	boolean	true	图例
yFormatter	(v) => string	—	Y 格式化

RdChartArea

名	类型	默认	说明
categories / series	string[] / AreaSeriesData[]	—	类目与系列
stack	boolean	true	堆叠
legend / smooth	boolean	true	图例 / 平滑
yFormatter	(v) => string	—	Y 格式化

RdChartPie

名	类型	默认	说明
data	PieItem[]	—	name / value
innerRadius	string	'60%'	内半径（0=实心）
centerLabel / centerValue	string	—	环形中心文案
legend	boolean	true	图例
height	string	'260px'	高度

RdChartCombo

名	类型	默认	说明
categories / series	string[] / ComboSeriesData[]	—	柱/线系列；yAxisIndex 0|1
unit	string	''	全图默认单位
showUnit	boolean	true	是否展示单位
series[].unit	string	—	覆盖全图 unit
yFormatter / yFormatterRight	(v) => string	—	左/右轴格式化
yAxisLabel / yAxisLabelRight	string	—	轴名称
legend / smooth	boolean	true	图例 / 平滑

RdChartRank

名	类型	默认	说明
data	RankItem[]	—	名称 + 数值
valueFormatter	(v) => string	—	数值格式化
highlightTop	number	3	高亮前 N

RdChartRadar

名	类型	默认	说明
indicators	RadarIndicator[]	—	维度轴
series	RadarSeriesData[]	—	多系列
legend	boolean	true	图例

RdChartGauge

名	类型	默认	说明
value / max	number	— / 100	当前值与上限
label / sublabel	string	—	中心主/副文案
color	string	'#EA543F'	主色
height	string	'220px'	高度

RdChartHeatmap

名	类型	默认	说明
data	[YYYY-MM-DD, number][]	—	日期 + 强度
month	string	data 首条月	展示年月
max / color	number / string	auto / '#EA543F'	visualMap
height	string	'220px'	高度

RdChartFunnel

名	类型	默认	说明
data	FunnelItem[]	—	阶段名称与数量
showName / showValue / showRate	boolean	true	图形内文案
showTable	boolean	true	底部阶段列表
unit	string	''	数量单位
showUnit	boolean	true	是否展示单位
height	string	'300px'	高度

---

Composables / 工具

导出	用途
useRdDrawerStack createRdDrawerStack RD_DRAWER_STACK_KEY	嵌套抽屉
useChartAdaptiveScale	图表字号/尺寸按容器缩放
setConfirmAppContext	按需 confirm 上下文
avatarColor AVATAR_PALETTE	头像色
Org utils	见 OrgHierarchy 一节
RodelUiResolver	@rd-element/ui/resolver

recipes.md

@rd-element/ui 业务配方

复制后改字段即可。选型先看 SKILL.md，API 细节见 catalog.md。

Toast / Confirm

import { toast, rdConfirm } from '@rd-element/ui'

toast.success('保存成功')
toast.error('提交失败', err.message)

const ok = await rdConfirm.confirm({
  title: '删除客户',
  body: '删除后不可恢复',
  type: 'danger',
  confirmText: '确认删除',
})
if (!ok) return
await api.remove(id)
toast.success('已删除')

Dialog / Drawer

<script setup lang="ts">
import { ref } from 'vue'
import { RdDialog, RdDrawer } from '@rd-element/ui'

const dialogOpen = ref(false)
const drawerOpen = ref(false)
</script>

<template>
  <RdDialog v-model:visible="dialogOpen" title="新建客户" width="720px">
    <!-- el-form … -->
    <template #footer>
      <el-button @click="dialogOpen = false">取消</el-button>
      <el-button type="primary" @click="onSave">保存</el-button>
    </template>
  </RdDialog>

  <!-- 筛选/表单侧栏：默认 maskClosable=false，点外侧抖动 -->
  <RdDrawer v-model:visible="drawerOpen" variant="form" title="全部筛选">
    …
  </RdDrawer>

  <!-- 详情宽抽屉：点外侧直接关闭 -->
  <RdDrawer v-model:visible="drawerOpen" variant="workspace" size="80%" :mask-closable="true">
    …
  </RdDrawer>
</template>

筛选栏（Filter Shell）

<script setup lang="ts">
import { Search } from '@lucide/vue'
import { RdInputGroup, RdFilterCascader, RdOrgHierarchySearch } from '@rd-element/ui'
</script>

<template>
  <RdInputGroup>
    <template #left>关键词</template>
    <el-input v-model="keyword" clearable placeholder="公司、联系人">
      <template #prefix><Search :size="14" /></template>
    </el-input>
  </RdInputGroup>

  <RdInputGroup>
    <template #left>状态</template>
    <el-select v-model="status" multiple collapse-tags clearable>
      <el-option label="活跃" value="Active" />
    </el-select>
  </RdInputGroup>

  <RdInputGroup>
    <template #left>地区</template>
    <RdFilterCascader v-model="region" :options="regionOptions" />
  </RdInputGroup>

  <RdInputGroup>
    <template #left>订单日期</template>
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      format="YYYY/MM/DD"
      range-separator="至"
      start-placeholder="开始"
      end-placeholder="结束"
      popper-class="filter-date-popper"
      clearable
    />
  </RdInputGroup>

  <RdInputGroup>
    <template #left>组织</template>
    <RdOrgHierarchySearch
      v-model="orgValues"
      :options="orgTree"
      :field-names="{ label: 'name', value: 'type_id' }"
      value-mode="value"
      check-cascade
    />
  </RdInputGroup>
</template>

可创建 / 分组选择

<RdCreatableSelect v-model="tags" :options="tagOpts" multiple allow-create />

<RdGroupedCategorySelect
  v-model="cats"
  :options="groups"
  multiple
/>
<!-- groups: { key, label, children: { value, label }[] }[] -->

文件上传（云端钩子 + 回显）

<script setup lang="ts">
import { ref } from 'vue'
import { RdFileUpload, type UploadFile } from '@rd-element/ui'

const OSS_BASE = 'https://xxx.oss-cn-shenzhen.aliyuncs.com'
const files = ref<UploadFile[]>([])

async function onChange(file: UploadFile, list: UploadFile[]) {
  if (file.status !== 'ready' || !file.file) return
  file.status = 'uploading'
  files.value = [...list]
  try {
    const res = await uploadToOss(file.file)
    file.status = 'success'
    file.url = res.fullUrl
    file.fileUrl = res.file_url
  } catch {
    file.status = 'fail'
  }
  files.value = [...files.value]
}

// 回显
// files.value = api.map(f => ({
//   uid: f.file_sha1, name: f.file_name, size: Number(f.file_size),
//   type: '', status: 'success', fileUrl: f.file_url, fileName: f.file_name, …
// }))
</script>

<template>
  <RdFileUpload
    v-model="files"
    :oss-base="OSS_BASE"
    :on-change="onChange"
  />
</template>

富文本（独立包）

<!-- index.html -->
<script src="/static/tinymce/tinymce.min.js"></script>

<script setup lang="ts">
import { ref } from 'vue'
import { RdRichEditor, type TextPhraseItem } from '@rd-element/editor'
import '@rd-element/editor/dist/style.css'

const html = ref('')

async function imagesUploadHandler(blob: Blob) {
  const fd = new FormData()
  fd.append('file', blob)
  const res = await fileUpload(fd) // 业务 API
  return res.data.file.full_url as string
}

async function fetchTextPhrases(): Promise<TextPhraseItem[]> {
  const res = await emailTextPhraseOptions()
  return res.data.list || []
}
</script>

<template>
  <RdRichEditor
    v-model="html"
    text-phrase
    :images-upload-handler="imagesUploadHandler"
    :fetch-text-phrases="fetchTextPhrases"
  >
    <template #footer-bar>
      <span @click="openTemplate">邮件模板</span>
    </template>
  </RdRichEditor>
</template>

只读详情

<RdSection title="基本信息">
  <RdFieldGrid :columns="3">
    <RdField label="客户名称" :value="detail.name" />
    <RdField label="官网" :value="detail.site" :href="detail.site" />
    <RdField label="备注" value="—" />
  </RdFieldGrid>
</RdSection>

按钮组 + 末位 ⋯

并列操作放 el-button，末位只放 RdButtonGroupMore（不要传 title），圆角并入同一组。

<script setup lang="ts">
import { RdButtonGroupMore, type RdButtonGroupMoreItem } from '@rd-element/ui'

const moreItems: RdButtonGroupMoreItem[] = [
  { title: '编辑', command: 'edit' },
  { title: '删除', command: 'delete', divided: true },
]
</script>

<template>
  <el-button-group>
    <el-button>关注</el-button>
    <el-button>客户分析</el-button>
    <el-button>客户移交</el-button>
    <RdButtonGroupMore
      aria-label="更多"
      :children="moreItems"
      @command="onMoreCommand"
    />
  </el-button-group>
</template>

独立「主按钮 + ⋯」不要再外包一层 el-button-group：

<RdButtonGroupMore
  title="保存"
  type="primary"
  :children="moreItems"
  @click="onSave"
  @command="onMoreCommand"
/>

表格行操作 / 行内编辑

<script setup lang="ts">
import { Mail, Archive } from '@lucide/vue'
import {
  RdButtonGroupMore,
  RdTableCellLink,
  RdTableInlineEdit,
  RdTableInlineSelect,
  type RdButtonGroupMoreItem,
} from '@rd-element/ui'

const more: RdButtonGroupMoreItem[] = [
  { title: '发邮件', icon: Mail, command: 'mail' },
  { title: '归档', icon: Archive, command: 'archive', divided: true },
]
</script>

<template>
  <RdTableCellLink @click="openDetail(row)">{{ row.name }}</RdTableCellLink>

  <RdTableInlineEdit
    :model-value="row.remark"
    title="备注"
    @save="(v) => saveRemark(row.id, v)"
  />

  <RdTableInlineSelect
    v-model="row.status"
    :options="statusOpts"
    @change="(v) => saveStatus(row.id, v)"
  />

  <RdButtonGroupMore
    class="table-row-actions"
    size="small"
    :children="more"
    @command="onRowCommand"
  />
</template>

列表页骨架（最小拼装）

<script setup lang="ts">
import {
  RdListPageLayout,
  RdListPageHero,
  RdMetricCard,
  RdListPageScopeTabs,
  RdListPageContentRow,
  RdListPageSidebar,
  RdListPageDataPanel,
  RdListPagePanelHeader,
  RdListPageStatusTabs,
  RdListPageFilterBar,
  RdListPageFilterChips,
  RdListPageFilterDrawer,
  RdListPageBulkBar,
  RdListPageTableArea,
  RdListPageTableEmpty,
  RdPagination,
} from '@rd-element/ui'
</script>

<template>
  <RdListPageLayout :loading="bootLoading">
    <RdListPageHero title="客户" stats-label="客户指标">
      <template #actions>
        <el-button type="primary" @click="openCreate">新建</el-button>
      </template>
      <template #stats>
        <RdMetricCard
          v-for="card in statCards"
          :key="card.key"
          :icon="card.icon"
          :title="card.value"
          :caption="card.label"
          :tone="card.tone"
        />
      </template>
      <template #content>
        <RdListPageScopeTabs v-model="scope" :tabs="scopeTabs" />

        <RdListPageContentRow
          aside-title="客群列表"
          :aside-active="!!sidebarId"
          merged
        >
          <template #aside>
            <RdListPageSidebar
              v-model="sidebarId"
              :groups="sidebarGroups"
            />
          </template>

          <RdListPageDataPanel>
            <template #header>
              <RdListPagePanelHeader title="客户列表" :count="total" />
              <RdListPageStatusTabs v-model="status" :tabs="statusTabs" />
            </template>

            <template #toolbar>
              <RdListPageFilterBar
                :column-items="columns"
                @open-drawer="filterOpen = true"
                @toggle-column="onToggleCol"
                @reorder-columns="onReorderCol"
                @reset-columns="onResetCol"
              >
                <!-- RdInputGroup 筛选项 -->
              </RdListPageFilterBar>
              <RdListPageFilterChips :tags="filterTags" />
            </template>

            <RdListPageBulkBar v-if="selected.length" :count="selected.length" @clear="selected = []">
              <template #actions>
                <el-button size="small" @click="bulkExport">导出</el-button>
              </template>
            </RdListPageBulkBar>

            <!-- 列表页默认 headerSticky="page"；抽屉内可省略（自动 container）或显式传；表内滚动用 :header-sticky="false" -->
            <RdListPageTableArea :loading="tableLoading">
              <el-table :data="rows" …>
                <template #empty>
                  <RdListPageTableEmpty title="暂无数据" />
                </template>
              </el-table>
            </RdListPageTableArea>

            <template #footer>
              <RdPagination
                v-model:current-page="page"
                v-model:page-size="pageSize"
                :total="total"
              />
            </template>
          </RdListPageDataPanel>
        </RdListPageContentRow>
      </template>
    </RdListPageHero>

    <RdListPageFilterDrawer
      v-model:visible="filterOpen"
      v-model:tab="filterTab"
      :filter-layout-items="filterLayout"
      @apply="applyFilters"
    >
      <template #filters><!-- 完整筛选项 --></template>
    </RdListPageFilterDrawer>
  </RdListPageLayout>
</template>

应用布局侧栏

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { RdSidebar, RdLogo, RdSidebarUser, type RdNavGroup, type RdNavItem } from '@rd-element/ui'

const route = useRoute()
const router = useRouter()
const collapsed = ref(false)
const groups: RdNavGroup[] = [/* … */]

function onSelect(item: RdNavItem) {
  if (item.external && item.path) {
    window.open(item.path, '_blank', 'noopener')
    return
  }
  if (item.path) router.push(item.path)
}

function onLogout() {
  // 清 token / router.push('/login')
}
</script>

<template>
  <RdSidebar
    v-model:collapsed="collapsed"
    :groups="groups"
    :active-path="route.path"
    @select="onSelect"
    @logo-click="router.push('/')"
  >
    <template #logo="{ collapsed: c }">
      <RdLogo :collapsed="c" />
    </template>
    <template #footer="{ collapsed: c }">
      <RdSidebarUser
        :collapsed="c"
        name="张明"
        role="管理员"
        @logout="onLogout"
      />
    </template>
  </RdSidebar>
</template>

图表

<script setup lang="ts">
import { RdChartCard, RdStatCard } from '@rd-element/ui'
import { RdChartLine, RdChartPie, RdChartFunnel, RdChartGauge } from '@rd-element/ui/chart'
</script>

<template>
  <RdStatCard
    label="本月成交"
    value="128"
    mom-value="+12%"
    mom-trend="up"
    yoy-value="+5%"
    yoy-trend="up"
    :extra="[{ label: '上月', value: '114' }, { label: '去年同期', value: '102' }]"
    extra-layout="horizontal"
  >
    <template #right>
      <RdChartGauge :value="84" height="128px" label="84%" sublabel="目标达成" />
    </template>
  </RdStatCard>

  <RdChartCard title="趋势">
    <RdChartLine :categories="cats" :series="[{ name: '成交', data: vals }]" />
  </RdChartCard>

  <RdChartCard title="占比">
    <RdChartPie :data="[{ name: 'A', value: 40 }, { name: 'B', value: 60 }]" />
  </RdChartCard>

  <RdChartCard title="转化漏斗">
    <RdChartFunnel
      :data="[
        { name: '曝光', value: 10000 },
        { name: '询价', value: 3200 },
        { name: '成交', value: 480 },
      ]"
      :show-table="true"
      unit="次"
      height="240px"
    />
  </RdChartCard>
</template>

入口需 installCharts(app) 或 Resolver；并安装 echarts vue-echarts。

• RdStatCard：extra 附加指标；extra-layout="horizontal" 左标签右数值（默认 vertical 上下）。
• RdChartCombo：unit / showUnit；series[].unit 覆盖全图单位；tooltip 展示单位；未传 yFormatter 时轴刻度追加单位。
• RdChartFunnel：unit 数量单位（默认空）；showUnit 控制是否展示（默认开）；showName / showValue / showRate 控制图形内文案；showTable 控制底部阶段列表。