组件库总览
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 | 组织架构树 + 部门 CRUD | vm-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-picker | EPS 接口权限多选 | vm-eps-perm-picker |
vm-auto-perm-dialog | 按 Controller 批量生成权限菜单 | vm-auto-perm-dialog |
vm-markdown | Markdown 编辑 / 预览(v-model / modelValue) | vm-markdown |
vm-empty | 空状态插图 | vm-empty |
vm-ri-icon | Remix 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-tree、vm-role-picker | 部门筛选 + 表单选角色 |
| 角色权限 | vm-check-tree | 菜单树、部门数据权限 |
| 菜单管理 | vm-icon-picker、vm-eps-perm-picker、vm-auto-perm-dialog、vm-view-path | 图标、权限、自动权限、视图路径 |
| 前端角色 | vm-eps-perm-picker(side="app") | 前端 EPS 权限 |
| 侧栏导航 | vm-ri-icon | 菜单图标渲染 |
与 CRUD / shadcn 的关系
| 层 | 目录 | 何时用 |
|---|---|---|
| CRUD | vome-core/admin/crud | 标准列表页骨架与字段控件 |
| 组件库 | vome-core/admin/components | 跨页面复用的业务块 |
| shadcn | admin/src/components/ui | 原子 UI(Button、Input、Dialog) |
UI 选型见 components/ui。
