基础用法 ​

本文覆盖 GrowSchemaDesigner 的接入、工具栏、左轨、浮层表单字段、画布连线规则与导出。方言固定为 PostgreSQL。

演示模块接入 ​

菜单：设计器 → 数据库建模，path：schema-designer-playground。

宿主需：

1. 依赖 @grow-admin-rock/schema-designer 与 @grow-admin-cornerstone/apps-designer
2. IOC 注册 apps-designer
3. 动态路由合并菜单

见 业务模块开发、DesignCornerstone、低代码设计器。

在页面中使用 ​

<template>
  <div class="schema-designer-playground">
    <GrowSchemaDesigner
      ref="designerRef"
      v-model="schema"
      @change="onChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  GrowSchemaDesigner,
  createDatabaseSchema,
  type DatabaseSchema,
} from '@grow-admin-rock/schema-designer'

const designerRef = ref<InstanceType<typeof GrowSchemaDesigner>>()
const schema = ref<DatabaseSchema>(createDatabaseSchema({ name: 'demo_db' }))

const onChange = (_next: DatabaseSchema) => {
  // 任意编辑后同步；也可只依赖 v-model
}

const persist = () => {
  const snapshot = designerRef.value?.getSchema()
  // 持久化 snapshot 到后端…
}

const reload = (fromServer: DatabaseSchema) => {
  designerRef.value?.setSchema(fromServer)
}
</script>

<style scoped>
.schema-designer-playground {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
</style>

Props / Events ​

外部修改 modelValue 会 clone 回填画布；内部每次提交也会向外 emit。本组件无服务端保存，持久化由宿主在 change / getSchema 时完成。

defineExpose ​

界面总览 ​

┌──────────────────────────────────────────────────────────────┐
│ [添加表] [清空] [复制 JSON] [导出 JSON]     操作提示文案…      │
├────┬───────────────┬─────────────────────────────────────────┤
│轨  │ 库信息/SQL    │ Vue Flow：表节点 + 关联边 + MiniMap      │
│道  │               │ 选中后浮层：表配置 / 关联配置            │
└────┴───────────────┴─────────────────────────────────────────┘

工具栏旁提示大意：拖拽字段圆点连线创建关联；拖动关联线端点可改接字段；悬停关联线可点垃圾桶删除。

工具栏 ​

左侧轨道 ​

再点同一轨可关闭侧栏。

库信息字段 ​

SQL 查询面板 ​

本版只做配置存档（不连真实库执行）。写入 schema.queries。

执行库展示为当前 schema.name（仅提示用）。数据准备消费的是已发布表结构，不会自动跑这里的 SQL。

浮层与抽屉 ​

表配置（选中表后） ​

标题类似「表 · {name}」。

规则要点：

• 设为主键：强制非空，全表仅一个主键；常建议同时开自增
• 删除被关联占用的字段：确认「该字段已被关联使用…」，确认后同步删关联
• 删除整表：确认「确定删除表「x」及其相关关联吗？」；若有 N:N，可能连带删中间表

关联配置（选中边后） ​

创建关联抽屉（连线后） ​

说明：

• 1:1 / 1:N：连线语义为「起点 = 被引用侧（通常 PK），终点 = 外键侧」；若终点表连到源表主键，可自动补 FK 列，命名常为 {sourceTable}_id
• N:N：自动生成 isJunction 中间表（节点上有「中间表」标识）

详见 表关联。

画布交互 ​

工厂与工具函数 ​

import {
  createDatabaseSchema,
  createSchemaTable,
  createSchemaColumn,
  createSchemaRelation,
  exportSchemaJson,
  downloadSchemaJson,
  copySchemaJson,
  SCHEMA_COLUMN_TYPE_OPTIONS,
  RELATION_TYPE_OPTIONS,
  clampIdentifier,
  MAX_DATABASE_NAME_LENGTH, // 63
} from '@grow-admin-rock/schema-designer'

持久化建议 ​

// 保存
await api.saveSchema(designerRef.value!.getSchema())

// 回填
designerRef.value!.setSchema(await api.loadSchema(id))
// 或
schema.value = await api.loadSchema(id) // 依赖 v-model 回填

导出给数据准备 / 后端时，保持 tables / relations / queries 完整；数据准备侧类型为对齐的 DataPrepDatabaseSchema，不会从 schema-designer 运行时 import Vue。

相关文档 ​

• 数据模型
• 表关联
• 数据准备
• 低代码设计器