Skip to content

组件库总览

vome-core/admin/components 提供 Admin 业务通用组件:侧栏壳层、组织树、权限选择、图标与视图路径等。与 CRUD 组件(列表页 search/table/upsert)职责分离,不依赖 vm-crud Context,可单独使用。

宿主 admin 中由 unplugin-vue-components 自动引入,无需手动 import。

各组件文档含 交互示例<DemoLibrary preset="…" />)及在业务页 / upsert 中的集成说明。

组件索引

组件典型场景文档
vm-aside左栏壳层:标题、搜索、刷新/新增vm-aside
vm-dept-tree组织架构树 + 部门 CRUDvm-dept-tree
vm-check-tree勾选树(菜单/部门权限)vm-check-tree
vm-role-picker用户表单内多选角色vm-role-picker
vm-icon-picker菜单图标选择(Remix Icon)vm-icon-picker
vm-group-cascader通用分组级联选择vm-group-cascader
vm-eps-perm-pickerEPS 接口权限多选vm-eps-perm-picker
vm-auto-perm-dialog按 Controller 批量生成权限菜单vm-auto-perm-dialog
vm-markdownMarkdown 编辑 / 预览(v-model / modelValuevm-markdown
vm-empty空状态插图vm-empty
vm-ri-iconRemix Icon 包装vm-ri-icon
vm-view-path-picker菜单绑定业务视图路径vm-view-path-picker
vm-split-layout左栏 + 主区壳层vm-split-layout
vm-aside-list-item侧栏可选列表项vm-split-layout
vm-action-btn工具栏操作按钮vm-split-layout
vm-perm-section权限表单区块vm-split-layout
vm-card / vm-card-grid卡片网格页vm-split-layout

在业务页中的组合

页面使用的组件说明
字典管理vm-aside左侧类型列表 + 右侧 CRUD
用户管理vm-dept-treevm-role-picker部门筛选 + 表单选角色
角色权限vm-check-tree菜单树、部门数据权限
菜单管理vm-icon-pickervm-eps-perm-pickervm-auto-perm-dialogvm-view-path图标、权限、自动权限、视图路径
前端角色vm-eps-perm-pickerside="app"前端 EPS 权限
侧栏导航vm-ri-icon菜单图标渲染

与 CRUD / shadcn 的关系

目录何时用
CRUDvome-core/admin/crud标准列表页骨架与字段控件
组件库vome-core/admin/components跨页面复用的业务块
shadcnadmin/src/components/ui原子 UI(Button、Input、Dialog)

UI 选型见 components/ui