需求背景

通过下发json配置进行客户端的菜单、指标、表头等等类型的配置来进行客户端配置，主要的需求就是将不同配置的类型模板化，然后将这些模板转换成表单供运营人员的配置。

配置模板化

那首先就要将配置模板化。比如一份配置如下

{
	"indicate_id":3001,
	"name": "指标A"
}

那么这份配置就可以抽成

{
  "indicate_id": {
      "type": "number",
      "title": "指标id"
    },
    "name": {
      "type": "string",
      "title": "指标名称"
    }
}

而这份配置用json schema表达的话，长下面这样。

{
  "type": "object",
  "title": "title",
  "properties": {
    "indicate_id": {
      "type": "number",
      "title": "指标id"
    },
    "name": {
      "type": "string",
      "title": "指标名称"
    }
  },
  "required": [
    "indicate_id",
    "name"
  ]
}

json schema其实在可视化接口平台用的很多，比如yapi，postman, apifox里面。上面那份json-schema在yapi里导入后长这样

所以。模板化可以通过json schema进行实现。

模板可视化

那么配置模板化了之后，就要将模板进行可视化了。这样运营人员才知道怎么配这个配置吧。毕竟你要求运营人员去学json，还是比较不切实际的，而且配置过程中可能出现很多问题，比如json格式错误，比如数据错位，数据格式错误等等。那么格式化成什么样呢。

其实最简单的还是把配置格式化成表单，比如下面这样

但是这样不符合我们的需求。因为我们可能会配置嵌套配置

{
	"page_id": 100,
	"page_name": "页面A",
	"indicate_list": [
		"indicate_id": "3000",
		"indicate_name": "指标A"
	]
}

比如这样，如果表单化的话，层级嵌套的就不太行了。后面又想到能不能把配置格式化成树形。点击每个节点展示节点下的基本表单。但是好像前端实现有点难度。所以就在想，不可能只有我们有这种需求吧。所以就开始在网上找。找啊找，还真被我找到一个符合我们需求的编辑器

Json Schema Editor(Antd) - json-schemaeditor-antd (gitee.io)

如上所示，可以支持基础表单，也可以多层级嵌套。而且这个也是可以根据json schema模板进行表单生成，就很完美。

好了。分享到此结束。有兴趣的同学自己去编辑器官网看看。