组件总览
组件是管理端二开的高频入口。这里不先讲实现细节，而是先帮你按使用场景找到入口，再进入具体文档。
先看什么？
| 你要做什么 | 推荐组件 |
|---|---|
| 快速搭建增删改查页面 | CURD 快速开发 |
| 让表单自动选字典值 | DictSelect 字典选择器 |
| 让表格展示字典标签 | DictTag 字典标签 |
| 在表单里选图标 | IconSelect 图标选择器 |
| 在弹窗里选一条记录 | TableSelect 表格选择器 |
| 上传图片或文件 | Upload 上传 |
| 查看图表、滚动文本、复制按钮 | 展示组件 |
| 调整布局、主题、语言 | 布局组件 |
组件分类
表单组件
| 组件 | 说明 | 文档 |
|---|---|---|
| IconSelect | 图标选择器，支持搜索和分页 | 查看 |
| DictSelect | 字典选择器，支持下拉、单选、复选 | 查看 |
| DictTag | 字典标签，用于展示字典值 | 查看 |
| TableSelect | 表格选择器，支持单选和多选 | 查看 |
| InputTag | 标签输入组件 | 查看 |
上传组件
| 组件 | 说明 | 文档 |
|---|---|---|
| SingleImageUpload | 单图上传 | 查看 |
| MultiImageUpload | 多图上传 | 查看 |
| FileUpload | 文件上传 | 查看 |
| WangEditor | 富文本编辑器 | 查看 |
展示组件
| 组件 | 说明 | 文档 |
|---|---|---|
| ECharts | 图表组件，支持柱状图、折线图、饼图 | 查看 |
| TextScroll | 文字滚动组件 | 查看 |
| CopyButton | 复制按钮组件 | 查看 |
CURD 组件
| 组件 | 说明 | 文档 |
|---|---|---|
| PageSearch | 搜索表单组件 | 查看 |
| PageContent | 数据列表组件 | 查看 |
| PageModal | 表单弹窗组件 | 查看 |
| usePage | 页面逻辑组合函数 | 查看 |
布局组件
| 组件 | 说明 | 文档 |
|---|---|---|
| Breadcrumb | 面包屑导航 | 查看 |
| Hamburger | 菜单折叠按钮 | 查看 |
| Fullscreen | 全屏切换组件 | 查看 |
| ThemeSwitch | 主题切换组件 | 查看 |
| SizeSelect | 尺寸选择组件 | 查看 |
| LangSelect | 语言选择组件 | 查看 |
| TenantSwitcher | 租户切换组件 | 查看 |
功能组件
| 组件 | 说明 | 文档 |
|---|---|---|
| CommandPalette | 命令面板，快捷搜索菜单 | 查看 |
| NoticeDropdown | 通知下拉组件 | 查看 |
| Pagination | 分页组件 | 查看 |
| OperationColumn | 操作列组件 | 查看 |
使用方式
自动导入
项目使用 unplugin-vue-components 实现组件自动导入，无需手动注册。
vue
<template>
<div>
<IconSelect v-model="icon" />
<DictSelect v-model="value" code="gender" />
</div>
</template>示例页面
所有组件都在 src/views/demo 目录下提供了完整的使用示例。
- 启动项目：
pnpm run dev - 登录系统
- 导航到「功能演示」菜单
下一步
- 先看 CURD 快速开发 把常用页面跑起来。
- 需要某个表单或展示能力时，直接从上面的分类表里找。
- 想看可复用逻辑，继续看 Composables。