-
产品/测试/运营/实施/顾问 80%
-
开发配置/二开 20%
-
功能不打折
-
易用
-
好用
-
易扩展
-
低代码平台：前端趋近从 0 开始
-
现有组件直接复用的几率不大
参考 nocobase
数据驱动
协议驱动
表单表格驱动
实现原理
https://zhuanlan.zhihu.com/p/451340998
https://zhuanlan.zhihu.com/p/452251297
https://www.zhihu.com/column/reversible-computation
这类方案很容易面临不断膨胀的私有 JSON 协议。并且，私有协议扩展性和灵活性差，难以达到图灵完备状
可视化编辑 > 可视化编程
- 「声明式」html css 直接描述最终效果，不关心如何实现。可以直接从展现结果，所见即所得
- 「命令式」canvas 关注如何实现，明确怎么一步步达到这个效果。无法做到反向推
生成代码的方式
- 强依赖研发，无法做到给非研发使用，因为后续代码需要编译上线。
- 无法持续可视化编辑，因为代码无法可视化编辑，生成代码后只要有修改就没法再反向还原成低代码的形式，后续只能代码编辑。
- 难以实现完全用低代码开发应用，因为不能生成太复杂的代码，使得这种方案一般不包括交互行为，通常是只有前端界面支持可视化编辑。
- 无法做到向下兼容，因为生成的那一瞬间代码依赖的框架版本就固定了，目前还没见过哪款前后前端框架做过到完全向下兼容
JSON 描述页面
- 低代码平台编辑器几乎都是基于 Web 实现，JavaScript 可以方便操作 JSON。
- JSON 可以支持双向编辑，它的读取和写入是一一对应
- 不支持注释
- 不支持多行字符串
- 语法过于严格，比如不支持单引号，不能在最后多写一个
nocobase
bad
- 开源协议 agpl
- install build 时间太长
- 插件上传后报错，启用后报错
- 画布交互
- 没有 panel，弹框交互
good
- 数据库 er 图，类百度
- 工作流
- 技术栈
- react antd formily dnd-kit
插件
- 路由
- 新增页面
- add route
- 替换页面
- replace route
- replace component
- 插件页面
- 路由层面
- 新增页面
- Provider
- 提供全局共享的上下文
- 提供全局内容展示
- 拦截作用，根据条件渲
- Component Scope
- 全局，局部
- Component: 组件
- Scope props
- 页面
- 后台建库，建表
- 前台
- 页面
- 数据交互（后台）
- SchemaInitializer
- 区块
- 简单区块
- 数据区块
- Action
- 区块内嵌的 Initializer
- 区块
- SchemaSettings
接口提供梳理：
- 以什么维度标识数据源
接口要求：
- id parentId
- json 数据的可读性
- upsert 统一结构
对于数据源：
- 异步校验类
- delete
- 入参：主键/唯一
- 单个/批量
- 关联关系
- query
- 入参
- 分页
- 过滤
- 排序
- 出参
- 入参
- upsert
- insert
- update
UI Schema (DSL)
- formily: https://formilyjs.org/zh-CN/guide#%E5%8D%8F%E8%AE%AE%E9%A9%B1%E5%8A%A8
- procomponents schema
- 阿里 低代码引擎资产包协议规范： https://lowcode-engine.cn/site/docs/specs/material-spec#22-%E4%BD%8E%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83
- react-jsonschema-form： https://github.com/rjsf-team/react-jsonschema-form
- https://json-schema.org/
- 是实现 JSON 数据一致性、有效性和大规模互操作性的词汇表
- amis: https://aisuda.bce.baidu.com/amis/zh-CN/docs/types/schemanode
- nocobase
功能拆解
画布
primary
- 布局
- 拖拽
- handle
- nest
- 属性面板
- 组件联动
- 区块联动
secondary - 层级
- 网格线
- 调整大小
- 吸附
- 移动端
- 撤销/重做
- 复制/粘贴
- 多组件的组合拆分
- 快捷键
表单
多语言
自定义组件
扩展
权限
nest
- sub grid 1 中的 item 拖到 sub grid 2 中
- sub grid 1 拖到 sub grid 2 中
- outside 拖到 sub grid 中
- 删除 sub grid
- 拖拽 sub grid
- 大小调整 sub grid
- item 调整，sub grid 跟随调整
formily
表单拆分>提交
布局
-
FormLayout： 包裹所有 FormItem 组件 控制所有 FormItem 的默认样式
-
FormItem：包裹具体组件 Input, Select 等
-
Space：行内元素并排紧挨布局
-
FormGrid：
-
列数：一行 2 个，一行 3 个，一行 1 个。。。
-
宽度：1:1/1:2/1:2:1
-
grid 某个 col 独占一行 ✅ https://github.com/alibaba/formily/discussions/3858
<FormLayout>
<FormGrid>
<FormItem>
<Input />
</FormItem>
<FormItem>
<Space>
<FormItem>
<Input />
</FormItem>
<FormItem>
<Input />
</FormItem>
</Space>
</FormItem>
</FormGrid>
</FormLayout>
<FormProvider form={form}>
<SchemaField schema={schema} />
</FormProvider>
校验
- 校验时机：triggerType
- 规则校验 registerValidateRules
- 格式校验 registerValidateFormats
- 异步校验
- 能获取其它字段值 field.query(‘linkage’).get(‘value’) form.values
- 请求数据，调用其它方法？
- 联动校验：x-reactions selfErrors
- 提示信息 ‘x-validator’: [
{ required: true, message: ’ 必填 ’ },
{ maxLength: 3, message: ’ 最大长度 3’ },
], - 动态校验规则
交互
主动
- target
- 一对多
被动 - dependencies
- 多对一
动态 schema
动态显示/隐藏/禁用某些字段
自定义组件
参考 formily/antd
Table
- 表头分组 ❌ https://github.com/alibaba/formily/issues/3900
- tree table ❌ https://github.com/alibaba/formily/discussions/3270
formily 表单，数据录入
table card 数据展示（bi）
共同不足
- 难以调试
- 过于复杂的逻辑难以配置/实现使用成本高
- er, 数据库关系图，少的时候可看，多了不可看
其它产品
阿里
出码
网易
ESTree 基于 ast
sandpack
| amis | formily |
|---|---|
| 页面解决方案 | 表单解决方案 |
二开/自定义页面/组件
注入 css/js
- css
- class
- 填写类型，外部注入
- style
- 属性填写
- class