系统组件
1. 常用组件
1.1 Vben Vxe Table 表格
Vben 提供的 Table 列表组件，基于 vxe-table，结合 Vben Form 表单进行了二次封装，支持树形结构。
- 源码位置：
@vben/common-ui中的useVbenVxeTable - Vben 文档：Vben Vxe Table 表格 (opens new window)
- Vben 示例：playground/src/views/examples/vxe-table (opens new window)
- 实战案例（分页列表）：
- 实战案例（树形列表）：
1.2 TableAction 表格操作
表格行操作按钮组件，用于展示编辑、删除等操作按钮。
- 源码位置：
- 实战案例：
- antd 版本：apps/web-antd/src/views/system/user/index.vue (opens new window) 的 TableAction 部分
- ele 版本：apps/web-ele/src/views/system/user/index.vue (opens new window) 的 TableAction 部分
1.3 Vben Modal 模态框
Vben 提供的模态框组件，支持拖拽、全屏、自动高度、loading 等功能。
- 源码位置：
@vben/common-ui中的useVbenModal - Vben 文档：Vben Modal 模态框 (opens new window)
- Vben 示例：playground/src/views/examples/modal (opens new window)
- 实战案例：
1.4 Vben Drawer 抽屉
Vben 提供的抽屉组件，类似 Modal 但以侧边栏形式展示。
- 源码位置：
@vben/common-ui中的useVbenDrawer - Vben 文档：Vben Drawer 抽屉 (opens new window)
- Vben 示例：playground/src/views/examples/drawer (opens new window)
- 实战案例：
1.5 Vben Form 表单
Vben 提供的表单组件，可适配 Element Plus、Ant Design Vue、Naive UI 等框架。支持表单验证、表单联动、自定义组件等功能。
- 源码位置：
@vben/common-ui中的useVbenForm - Vben 文档：Vben Form 表单 (opens new window)
- Vben 示例：playground/src/views/examples/form (opens new window)
- 实战案例：
1.6 Description 描述列表
项目提供的详情组件，可适配 Element Plus、Ant Design Vue、Naive UI 等框架。类似 Form，支持多列布局。
- 源码位置：
- 实战案例：
1.7 Vben ApiComponent API 组件包装器
Vben 提供的 API “包装器”，它一般不独立使用，主要用于包装其它组件，为目标组件提供自动获取远程数据的能力，但仍然保持了目标组件的原始用法。
- 源码位置：
@vben/common-ui中的ApiComponent - Vben 文档：Vben ApiComponent (opens new window)
- Vben 示例：playground/src/views/examples/form/api.vue (opens new window)
- 实战案例（ApiSelect）：
- antd 版本：apps/web-antd/src/views/system/user/data.ts (opens new window) 的
postIds字段 - ele 版本：apps/web-ele/src/views/system/user/data.ts (opens new window) 的
postIds字段
- antd 版本：apps/web-antd/src/views/system/user/data.ts (opens new window) 的
- 实战案例（ApiTreeSelect）：
- antd 版本：apps/web-antd/src/views/system/user/data.ts (opens new window) 的
deptId字段 - ele apps/web-ele/src/views/system/user/data.ts (opens new window) 的
deptId字段
- antd 版本：apps/web-antd/src/views/system/user/data.ts (opens new window) 的
1.8 Upload 上传
文件上传组件，支持单（多）文件、单（多）图片上传等。
- 源码位置：
- 实战案例（文件 FileUpload）：
- antd 版本：apps/web-antd/src/views/erp/stock/check/data.ts (opens new window) 的
fileUrl字段 - ele 版本：apps/web-ele/src/views/erp/stock/check/data.ts (opens new window) 的
fileUrl字段
- antd 版本：apps/web-antd/src/views/erp/stock/check/data.ts (opens new window) 的
- 实战案例（图片 ImageUpload）：
- antd 版本：apps/web-antd/src/views/mall/product/brand/data.ts (opens new window) 的
picUrl字段 - ele 版本：apps/web-ele/src/views/mall/product/brand/data.ts (opens new window) 的
picUrl字段
- antd 版本：apps/web-antd/src/views/mall/product/brand/data.ts (opens new window) 的
1.9 TinyMCE 富文本编辑器
基于 TinyMCE 的富文本编辑器组件。
- 源码位置：
- 实战案例：
- antd 版本：apps/web-antd/src/views/system/notice/data.ts (opens new window) 的 `content 字段（对应 RichTextarea 组件）
- ele 版本：apps/web-ele/src/views/system/notice/data.ts (opens new window) 的 `content 字段（对应 RichTextarea 组件）
1.10 Vben Alert 轻量提示框
Vben 提供的一些用于轻量提示的弹窗，仅使用 js 代码即可快速动态创建提示，而不需要在 template 写任何代码。
- 源码位置：
@vben/common-ui中的VbenAlert - Vben 文档：Vben Alert 轻量提示框 (opens new window)
- Vben 示例：playground/src/views/examples/alert (opens new window)
- 实战案例（
confirm提示）：
- antd 版本：apps/web-antd/src/views/system/user/index.vue (opens new window) 的
handleDeleteBatch方法 - ele 版本：apps/web-ele/src/views/system/user/index.vue (opens new window) 的
handleDeleteBatch方法
- antd 版本：apps/web-antd/src/views/system/user/index.vue (opens new window) 的
- 实战案例（
alert提示）：不太使用，基本还是用 antd、ele 自带的。
1.11 OperateLog 操作日志
用于展示操作日志的组件。
- 源码位置：
- 实战案例：
- antd 版本：apps/web-antd/src/views/crm/customer/detail/index.vue (opens new window) 的 OperateLog 部分
- ele 版本：apps/web-ele/src/views/crm/customer/detail/index.vue (opens new window) 的 OperateLog 部分
1.12 ECharts 图表
基于 Vben 提供的 ECharts 插件，用于展示各类图表。
- 源码位置：
@vben/plugins/echarts中的EchartsUI、useEcharts - Vben 文档：Vben ECharts (opens new window)
- 实战案例：
ps：ERP、CRM、MALL 等等模块，也有很多 ECharts 例子，也可以参考下！
2. 不常用组件
2.1 form-create 动态表单生成器
动态表单生成器，支持通过 JSON 配置生成表单。
- 官方文档：form-create (opens new window)
- 实战案例（FcDesigner 表单设计器）：
- 实战案例（FormCreate 表单渲染）：
ps：表单管理，可以看看 [工作流程 -> 流程管理 -> 流程表单] 菜单。
2.2 bpmn-js 工作流组件
基于 bpmn-js 的工作流设计和展示组件。
- 官方文档：bpmn-js (opens new window)
- 源码位置（流程设计器 MyProcessDesigner）：
- 源码位置（流程查看器 MyProcessViewer）：
- 实战案例（MyProcessDesigner 流程设计器：使用 MyProcessDesigner、MyProcessPenal 组件）：
- 实战案例（MyProcessViewer 流程查看器：流程实例详情页的流程图查看）：
TODO @芋艿：截图
2.1 Vben CountToAnimator 数字动画
数字动画组件，用于展示数字的动画效果。
- 源码位置：
@vben/common-ui中的CountToAnimator - Vben 文档：Vben CountToAnimator (opens new window)
- Vben 示例：playground/src/views/examples/count-to-animator (opens new window)
- 实战案例（AnalysisOverview 组件，内部使用 CountToAnimator））：
2.2 Vben EllipsisText 省略文本
文本省略组件，用于展示超长文本。
- 源码位置：
@vben/common-ui中的EllipsisText - Vben 文档：Vben EllipsisText (opens new window)
- Vben 示例：playground/src/views/examples/ellipsis (opens new window)
- 实战案例：暂未使用
2.3 MarkdownView Markdown 预览
Markdown 内容预览组件。
- 源码位置：
- 实战案例（AI 对话消息渲染）：
2.4 ShortcutDateRangePicker 快捷日期范围选择
快捷日期范围选择组件，提供预设的日期范围选项。
- 源码位置：
- 实战案例（商品统计的时间筛选）：
2.5 CronTab Cron 表达式编辑
Cron 表达式可视化编辑组件。
- 源码位置：
- 实战案例：
- antd 版本：apps/web-antd/src/views/infra/job/data.ts (opens new window) 的
cronExpression字段 - ele 版本：apps/web-ele/src/views/infra/job/data.ts (opens new window) 的
cronExpression字段
- antd 版本：apps/web-antd/src/views/infra/job/data.ts (opens new window) 的
2.6 Cropper 图片裁剪
图片裁剪组件，支持旋转、缩放等操作。
- 源码位置：
- 实战案例（个人中心头像上传，使用 CropperAvatar 组件）：
2.7 CodeEditor 代码编辑器
基于 Code Mirror 的代码编辑器组件。
- 源码位置：
@vben/plugins/code-editor - Vben 示例：playground/src/views/examples/code-editor (opens new window)
- 实战案例（代码生成器预览）：
2.8 Markmap 思维导图
基于 Markmap 的思维导图组件。
- 源码位置：
@vben/plugins/markmap - Vben 示例：playground/src/views/examples/markmap (opens new window)
- 实战案例（AI 思维导图）：
2.9 Captcha 验证码
Vben 提供的验证码组件，支持滑块验证、点选验证等多种验证方式。
- 源码位置：
@vben/common-ui中的SliderCaptcha、PointSelectionCaptcha、Verification等 - Vben 文档：Vben Captcha 验证码 (opens new window)
- Vben 示例：playground/src/views/examples/captcha (opens new window)
- 实战案例（登录页验证码，使用 Verification 组件）：
2.10 JsonViewer JSON 查看器
JSON 数据可视化查看组件，支持折叠展开、复制等功能。
- 源码位置：
@vben/common-ui中的JsonViewer - Vben 示例：playground/src/views/examples/json-viewer (opens new window)
- 实战案例：暂未使用