基础用法 ​

本文说明 GrowReportDesigner / GrowReportRenderer 的接入、工具栏、左轨页面数据、区块配置与预览注意点。图表视觉与绑定见专页。

演示模块接入 ​

菜单：设计器 → 报表设计器，path：report-designer-playground。

依赖 @grow-admin-rock/report-designer（并间接依赖 @grow-admin-rock/designer 的页面级面板）。装配见 业务模块开发、低代码设计器。

在页面中使用 GrowReportDesigner ​

<template>
  <div class="report-designer-playground">
    <GrowReportDesigner ref="designerRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { GrowReportDesigner } from '@grow-admin-rock/report-designer'

const designerRef = ref<InstanceType<typeof GrowReportDesigner>>()

const save = () => {
  const schema = designerRef.value?.getSchema()
  // 持久化 schema…
}
</script>

defineExpose（设计器） ​

无 props / emits。

界面总览 ​

┌──────────────────────────────────────────────────────────────┐
│ [添加区块] [清空] [预览]    左侧配置页面数据；悬停区块可操作…   │
├────┬───────────────┬────────────────────────┬────────────────┤
│轨  │ 页面配置/数据  │ 24 列 GridLayout        │ 区块配置浮层    │
│道  │ 源/请求/事件  │ 拖拽缩放图表卡片        │ 图表/绑定/基础  │
└────┴───────────────┴────────────────────────┴────────────────┘

空态：GrowEmpty「点击上方「添加区块」开始设计」。

工具栏 ​

左侧轨道（复用页面设计器面板） ​

数据源 / 请求表单文案与校验与页面设计器一致，见 数据源与数据请求。

页面配置常用字段 ​

默认由 createDefaultPageConfig 提供，设计器可改：

画布与区块操作 ​

右侧区块配置（BlockConfigPanel） ​

三 Tab：

1. 报表配置（图表视觉） ​

• 图表类型网格：约 17 种（REPORT_CHART_TYPE_OPTIONS：直角坐标、雷达、地图、热力、漏斗等）
• 切换类型会确认：「从「A」切换为「B」将清空当前图表配置…」，确认「清空并切换」
• 下方 ChartOptionFields 按类型展示轴、系列、颜色等视觉项（不含业务 data）

详见 图表配置。

2. 数据绑定 ​

按图表类型显示可绑槽位，例如：

BindRefEditor：

• placeholder「请输入或绑定变量」
• 快捷 chip：页面数据项 → state.{name}
• f 打开代码绑定（mode: 'code'，须 return）

不要在报表里直选 Dataset；经数据请求写入 state 后再绑。见 数据绑定、低代码设计器。

3. 基础信息 ​

预览与 GrowReportRenderer ​

<template>
  <GrowReportRenderer
    :schema="reportSchema"
    :http-client="myHttpClient"
  >
    <template #empty>暂无内容</template>
  </GrowReportRenderer>
</template>

<script setup lang="ts">
import {
  GrowReportRenderer,
  createReportSchema,
  type ReportSchema,
} from '@grow-admin-rock/report-designer'
</script>

Props ​

defineExpose（渲染器） ​

运行时与页面设计器相同：buildRuntimeState → API → GROW_RUNTIME_STATE → 各区块 resolveBlockDataBinding → buildEChartsOption。

工厂函数 ​

import {
  createReportSchema,
  createDefaultPageConfig,
  createDefaultChartConfig,
  REPORT_CHART_TYPE_OPTIONS,
} from '@grow-admin-rock/report-designer'

相关文档 ​

• 数据绑定
• 数据模型
• 图表配置
• 页面设计器 · 数据源
• 数据准备
• 低代码设计器