低代码 CRUD 前端架构全景报告.md 25 KB
低代码 CRUD 前端架构全景报告
一、整体架构定位
该系统有两条平行的 CRUD 建设路径，最终共用同一套运行时渲染器：
路径 A：AI 生成 (useCrudGenerator)
↓ 生成 JSON Schema (searchSchema / columns / editSchema / apiConfig)
↓ 保存为 crud_config 记录
→ 运行时: AiCrudPage + Template Catalog
路径 B：低代码可视化搭建 (LowcodeBuilder)
↓ Step1: LowcodeModelDesigner → modelSchema (字段 + 数据库配置)
↓ Step2: LowcodePageBuilder → pageSchema (zones + fieldRefs + canvas)
↓ Step3: LowcodePreviewPane (前端预览)
↓ Step4: PublishPanel (建表 + 菜单发布)
→ 运行时: 通过 crudConfigRender(configKey) 同样走 AiCrudPage / TreeCrudTemplate
两条路径产出同一种数据格式（configKey 对应的配置记录），共用同一个运行时入口 /ai/crud-page/:configKey。
---
二、目录结构与职责
src/
├── views/ai/
│ ├── crud-config.vue # CRUD 配置管理列表（卡片视图）
│ ├── crud-generator.vue # AI 生成向导（3 面板 + SSE 流）
│ ├── crud-page.vue # 运行时页面入口（动态加载模板）
│ ├── lowcode-apps.vue # 低代码应用列表
│ ├── lowcode-builder.vue # 4 步向导主页面
│ └── components/
│ ├── SchemaFieldEditor.vue # JSON Schema 字段表格编辑器
│ ├── ApiConfigEditor.vue # API 配置编辑
│ ├── DictConfigPanel.vue # 字典配置
│ ├── EncryptConfigPanel.vue
│ ├── DesensitizeConfigPanel.vue
│ ├── TransConfigPanel.vue
│ └── ...
├── components/
│ ├── ai-form/
│ │ ├── AiCrudPage.vue # 核心运行时 CRUD 页面
│ │ ├── AiSearch.vue # 查询栏（含 AiForm + 查询/重置按钮）
│ │ ├── AiForm.vue # 动态表单渲染引擎
│ │ ├── AiFormItem.vue # 单字段渲染（20+ 控件类型）
│ │ ├── AiTable.vue # 数据表格（table/card 双模式）
│ │ ├── AiCrudPageProps.js # AiCrudPage Props 定义
│ │ └── schemaHelper.js # 运行时 Schema 动态更新工具
│ ├── lowcode-builder/
│ │ ├── model/
│ │ │ ├── LowcodeModelDesigner.vue # 数据模型设计器（主容器）
│ │ │ ├── ModelFieldTable.vue # 字段列表表格（可拖排）
│ │ │ ├── ModelFieldPropertyPanel.vue # 字段属性面板
│ │ │ ├── model-schema.js # 字段选项/默认值/工具函数
│ │ │ └── shared/
│ │ │ ├── DictTypeSelect.vue
│ │ │ └── FieldTypeSelect.vue
│ │ ├── page/
│ │ │ ├── LowcodePageBuilder.vue # 页面搭建主容器（2 tab）
│ │ │ ├── StructuredListPageDesigner.vue # 列表页配置（查询集/列表/详情）
│ │ │ ├── FormCreateDesignerAdapter.vue # 编辑表单设计器适配器
│ │ │ └── page-schema.js # 页面 Schema 核心逻辑
│ │ ├── preview/
│ │ │ └── LowcodePreviewPane.vue # 实时预览（前端模拟）
│ │ └── publish/
│ │ └── PublishPanel.vue # DDL + 发布 + 版本回滚
│ └── page-templates/
│ ├── SimpleCrudTemplate.vue # 标准 CRUD 模板
│ └── TreeCrudTemplate.vue # 左树右表模板
├── catalog/
│ └── index.js # templateKey → 异步 Vue 组件注册表
├── api/
│ ├── lowcode-crud.js # 低代码后端 API (9 个接口)
│ └── ...
├── composables/
│ └── useCrudGenerator.js # AI 生成全部状态管理（SSE + 保存）
└── router/
└── index.js # 路由配置
---
三、路由结构
手工注册的关键路由（src/router/index.js）：
┌──────────────────────────┬─────────────────────────┬───────────────────────────────────────────────────────────┐
│ 路径 │ 组件 │ 说明 │
├──────────────────────────┼─────────────────────────┼───────────────────────────────────────────────────────────┤
│ /ai/crud-page/:configKey │ AiCrudPageDynamic │ CRUD 运行时入口，支持 configKey/params/query 三种方式注入 │
├──────────────────────────┼─────────────────────────┼───────────────────────────────────────────────────────────┤
│ /ai/lowcode-builder/:id? │ AiLowcodeBuilderDynamic │ 低代码搭建器（id 可选，新建时无 id） │
└──────────────────────────┴─────────────────────────┴───────────────────────────────────────────────────────────┘
其余路由（含 /ai/crud-config、/ai/crud-generator、/ai/lowcode-apps）通过 vue-router/auto-routes 按文件系统自动生成。
---
四、数据模型层（modelSchema）
由 /components/lowcode-builder/model/model-schema.js 定义。字段对象结构：
{
field: 'contractName', // camelCase 字段名
columnName: 'contract_name', // snake_case DB 列名
label: '合同名称',
dataType: 'varchar', // varchar/int/bigint/decimal/tinyint/date/datetime/text/json
componentType: 'input', // input/textarea/select/radio/checkbox/switch/date/datetime/number/upload/imageUpload/fileUpload
length: 255,
precision: 0,
required: false,
searchable: false, // 是否出现在查询集
listVisible: true, // 是否出现在列表列
formVisible: true, // 是否出现在编辑/详情表单
queryType: 'LIKE', // EQ/LIKE/BETWEEN/GT/LT/GTE/LTE/NE/IN
dictType: '', // 绑定字典类型
sensitiveType: '', // 脱敏类型
encryptAlgorithm: '', // SM4/AES
width: null, // 列宽（px）
remark: '',
}
模型容器：
{
businessName: '合同管理',
tableName: 'contract_manage',
tableMode: 'STANDARD', // STANDARD/ARCHIVE
appType: 'NORMAL', // NORMAL/TREE
treeConfig: { keyField, parentField, labelField, childrenField, treeTitle },
fields: [...]
}
---
五、页面 Schema 层（pageSchema）
由 /components/lowcode-builder/page/page-schema.js 定义。完整结构：
{
layoutType: 'simple-crud', // simple-crud / tree-crud
zones: [
{
zoneKey: 'search',
componentKey: 'search-form',
enabled: true,
fieldRefs: ['field1', 'field2'], // 明确排序的字段引用
props: {
canvas: { // 画布布局（内部计算，不暴露给设计器 UI）
width: 1040,
height: 300,
snap: 8,
items: [{
id: 'search_query_set',
componentKey: 'query-set',
fieldRefs: [...],
x: 32, y: 36, w: 700, h: 132, zIndex: 1,
style: { labelWidth: 86, radius: 6, fill: '#fff', stroke: '#cbd5e1' },
props: { fieldRefs: [...] }
}]
}
}
},
{ zoneKey: 'table', ... props: { showImport, showExport, enableCustomQuery, treeConfig, canvas } },
{ zoneKey: 'edit', ... props: { formCreateRule: [...], canvas } }, // @form-create 规则
{ zoneKey: 'detail', enabled: false, ... }
]
}
字段引用解析优先级（resolveFields / resolveFieldRefsFromFormCreateRules）：
1. zone.props.formCreateRule（仅 edit zone，@form-create Designer 输出）
2. zone.fieldRefs（StructuredListPageDesigner 维护）
3. zone.props.canvas.items[*].fieldRefs（画布推断）
4. modelSchema.fields 按 flag 过滤（最终兜底）
---
六、组件层次与数据流
低代码搭建器
lowcode-builder.vue (reactive draft: { modelSchema, pageSchema })
├── LowcodeModelDesigner (v-model: draft.modelSchema)
│ ├── ModelFieldTable (vuedraggable 拖排 + inline 编辑)
│ └── ModelFieldPropertyPanel (字段详细属性，右侧面板)
├── LowcodePageBuilder (v-model: draft.pageSchema, :model-schema)
│ ├── StructuredListPageDesigner (列表页 tab)
│ │ ├── ComponentPreviewControl (inline defineComponent, disabled 控件预览)
│ │ └── FieldOrderEditor (inline defineComponent, vuedraggable 字段排序)
│ └── FormCreateDesignerAdapter (编辑表单 tab)
│ └── FcDesigner (@form-create/designer, ElementUI)
├── LowcodePreviewPane (:draft 只读)
└── PublishPanel (:app-id, :draft)
数据流：draft.modelSchema 变化时，syncPageSchemaWithModel 自动清理孤立 fieldRef、补全缺失 zone，保持 pageSchema 与 modelSchema 一致。
运行时渲染
crud-page.vue (resolves configKey → crudConfig)
└── template catalog[layoutType].component (lazy import)
├── SimpleCrudTemplate.vue
│ └── AiCrudPage (searchSchema, columns, editSchema, apiConfig)
│ ├── AiSearch → AiForm → AiFormItem × N
│ ├── AiTable (NDataTable / card 模式)
│ └── AiForm (编辑表单，在 NModal/NDrawer 内)
└── TreeCrudTemplate.vue
├── NTree (左侧树，注入 parentId 到 publicParams)
└── AiCrudPage (右侧，同上)
---
七、AI 生成流程（useCrudGenerator）
SSE 流式 7 阶段生成：
analyzing → generating-meta → generating-search → generating-columns
→ generating-edit → generating-api → generating-sql
- [STAGE:xxx] 标记在流中切换阶段
- thinking-phase 标记分离推理内容与输出内容
- parseRawContentFallback() 在流中 JSON 不完整时做容错解析
- 生成完成后由 saveConfig() 写入后端数据库
- 支持 initWithConfigKey(ck) 从现有配置初始化，复用生成结果
---
八、API 接口层
低代码构建 API（/src/api/lowcode-crud.js）：
┌──────────────────────┬──────┬────────────────────────────────────────────────────────────────────────────┐
│ 函数 │ 方法 │ 路径 │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeAppPage │ GET │ /ai/lowcode/app/page │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeAppDetail │ GET │ /ai/lowcode/app/{id} │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeSaveDraft │ POST │ /ai/lowcode/app/draft │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodePreview │ POST │ /ai/lowcode/app/{id}/preview │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodePublish │ POST │ /ai/lowcode/app/{id}/publish（deployMode: SKIP_DDL / ONLINE_CREATE_TABLE） │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeVersions │ GET │ /ai/lowcode/app/{id}/versions │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeRollback │ POST │ /ai/lowcode/app/{id}/rollback/{versionId} │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeValidateModel │ POST │ /ai/lowcode/model/validate │
├──────────────────────┼──────┼────────────────────────────────────────────────────────────────────────────┤
│ lowcodeDdlPreview │ POST │ /ai/lowcode/model/ddl/preview │
└──────────────────────┴──────┴────────────────────────────────────────────────────────────────────────────┘
---
九、状态管理方式
无 Vuex/Pinia，完全基于组合式函数：
- lowcode-builder.vue：reactive(draft) 单一状态源，通过 watch 进行三路同步（appName↔businessName↔menuName，appType↔layoutType，modelSchema→pageSchema）
- LowcodePageBuilder.vue：ref(localSchema) + watch(props.modelValue) + watch(props.modelSchema) 实现双向外部同步
- useCrudGenerator.js：自成体系的 composable，内聚所有 AI 生成状态
- AiCrudPage.vue：内部 ref 维护分页/选中/loading 等运行时状态
---
十、关键依赖
┌─────────────────────────┬───────────────────────────────────────────────┐
│ 依赖 │ 用途 │
├─────────────────────────┼───────────────────────────────────────────────┤
│ Naive UI │ 主 UI 库（全体 NaiveUI 组件） │
├─────────────────────────┼───────────────────────────────────────────────┤
│ @form-create/designer │ 编辑表单拖拽设计器（ElementUI 生态） │
├─────────────────────────┼───────────────────────────────────────────────┤
│ @form-create/element-ui │ 配套 form-create 运行时 │
├─────────────────────────┼───────────────────────────────────────────────┤
│ element-plus │ 为 FcDesigner 所需，动态挂载到 app 实例 │
├─────────────────────────┼───────────────────────────────────────────────┤
│ vuedraggable │ 字段拖排（ModelFieldTable、FieldOrderEditor） │
├─────────────────────────┼───────────────────────────────────────────────┤
│ vue-router/auto-routes │ 文件系统路由自动生成 │
├─────────────────────────┼───────────────────────────────────────────────┤
│ @vicons/ionicons5 │ 图标库 │
└─────────────────────────┴───────────────────────────────────────────────┘
混用 UI 库的隔离策略：FormCreateDesignerAdapter 通过检查 app.__lowcodeFormCreateInstalled 标记，仅在首次使用时调用 app.use(ElementPlus) 和 app.use(formCreate)，避免重复注册。
---
十一、当前能力 vs 完整低代码平台的差距
已具备
- 数据模型设计（字段 CRUD、类型映射、安全属性）
- 页面 Schema 与模型的自动同步机制
- 查询集字段排序（含 vuedraggable 拖排）
- 列表字段排序与导入/导出/自定义查询开关
- 详情页字段排序
- 编辑表单拖拽设计（借助 @form-create/designer）
- 树形结构（left-tree right-table）内置支持
- canvas 位置数据结构（x/y/w/h/zIndex）已在 page-schema 完整建模
- DDL 预览、在线建表、版本发布、版本回滚
- AI 辅助生成（7 阶段 SSE 流，含推理展示）
- 运行时 20+ 控件类型、字典集成、脱敏/加密
缺口与待建
1. 自由画布设计器未实现：page-schema.js 已建模了完整的 canvas（items 含 x/y/w/h/zIndex），但前端没有对应的可视化拖拽画布 UI，StructuredListPageDesigner 仅做字段排序，不暴露画布。这是当前最大的功能空白。
2. 列表操作列缺乏配置：操作列（编辑/删除/查看详情/自定义按钮）在当前设计器中固定写死，没有可配置的操作按钮 builder。
3. 详情页缺乏启用后的配置入口：detailZone.enabled 默认为 false，StructuredListPageDesigner 提供了 enable 开关和字段排序，但没有更细粒度的详情布局控制。
4. 查询条件类型不可设计器内调整：queryType（EQ/LIKE/BETWEEN 等）只在模型层设置，页面设计器无法覆盖。
5. 条件联动/级联逻辑无可视化配置：schemaHelper.js 提供了 createCascadeUpdater 等运行时工具，但构建阶段没有可视化的联动规则编辑器。
6. 模板体系单薄：catalog/index.js 目前只注册了 simple-crud 和 tree-crud 两种模板，缺少看板、统计图表、日历、表单流程等扩展模板。
7. 发布后的菜单权限配置：PublishPanel 仅处理 DDL 和菜单创建，没有集成权限/角色绑定流程。
8. 多步骤表单 / 标签页表单：FormCreateDesignerAdapter 支持任意 @form-create 布局，但 lowcode builder 入口没有针对多 step 表单的向导辅助。
业务模型设计布局： ┌─────────────────────────────────────────────────────────────────────┐ │ 顶部导航: Logo | 面包屑 | 搜索 | 预览/保存/发布按钮 │ ├──────────┬──────────────────────────────────────────────────────────┤ │ │ ┌────────────┬───────────────────┬──────────────────┐ │ │ 左侧菜单 │ │ 模型基础 │ 字段设计表格-放在模型基础信息下面 │ 字段属性面板 │ │ │ (树形) │ │ 信息 │ (主工作区) │ (右侧抽屉) │ │ │ ~240px │ │ │ │ │ │ │ │ ├────────────┴───────────────────┴──────────────────┤ │ │ │ │ ER 关系图 (可视化) │ │ │ │ ├─────────────────────────────────────────────────────┤ │ │ │ │ 底部工具栏: 添加字段 | 导入 | 生成 | 保存 | 发布 │ │ └──────────┴──────────────────────────────────────────────────────────┘