组件文档
本模块说明 @grow-admin-rock/components 中与业务强相关的组件用法,按两类组织:
| 类型 | 含义 | 典型组件 |
|---|---|---|
| 契约组件 | 三库共有能力的薄封装,靠驱动映射到 EP / Naive / Antdv | GrowButton、GrowInput… |
| 预设组件 | 框架内置业务封装(isPresetComponent),不依赖具体 UI 驱动实现 | GrowSearchBar、GrowColumnBar、GrowIconify… |
先读什么?
文档目录
组件库基础
| 章节 | 说明 |
|---|---|
| 组件驱动架构 | Grow* 与三套 UI 驱动的桥接原理 |
| Grow 契约组件 | 模板里使用契约组件的通用写法 |
| 命令式 API | Message / Notice / Dialog 等统一调用 |
| 切换组件库 | 全局切换 Element Plus / Naive UI / Ant Design Vue |
| 局部覆盖组件库 | 单页或局部子树使用不同 UI 库 |
预设业务组件
| 组件 | 说明 | 演示 |
|---|---|---|
| SearchBar 高级搜索栏 | 可组合查询条件弹层 | 功能示例 → 高级搜索栏 |
| ColumnBar 表格列设置 | 列显隐树形配置 | 功能示例 → 表格列设置 |
| AbstractEle 动态表单项 | 按配置渲染 Grow 表单控件 | 配合 SearchBar |
其他组件
| 组件 | 说明 |
|---|---|
| 其他组件 | Iconify、SplitPane 等 |
| 代码沙箱 | 独立模块:编辑器 / 依赖 / SFC 预览 |
| 页面设计器 | 低代码页面设计 |
| 报表设计器 | 图表看板设计与渲染 |
| 数据库建模 | 表 / 字段 / 关联可视化建模(PostgreSQL) |
| 数据准备 | Dataset:选表、Join、维度 / 度量 |
引入方式
多数组件在宿主 onSetup 后已全局注册,模板可直接使用:
vue
<GrowSearchBar :search="searchList" @search="onSearch" />
<GrowColumnBar :columns="columns" @confirm="onConfirm" />需要类型或具名导出时:
ts
import type { SearchBarField } from '@grow-admin-rock/components/search-bar'
import { GrowSearchBar } from '@grow-admin-rock/components/search-bar'
import type { ColumnBarItem } from '@grow-admin-rock/components/column-bar'
import { GrowColumnBar } from '@grow-admin-rock/components/column-bar'国际化
预设组件文案依赖 @grow-admin-rock/locale,相关 key:
| 命名空间 | 用途 |
|---|---|
PUBLIC.* | 查询 / 重置 / 确认 / 暂无数据等公共文案 |
SEARCH_BAR.* | 高级搜索栏 |
COLUMN_BAR.* | 列设置(如全选) |
Grow Admin