前端架构

"packages": [
    {
      "package": "element-ui",
      "version": "2.5.12",
      "urls": [
        "https://unpkg.com/element-ui/lib/index.js",
        "https://unpkg.com/element-ui/lib/theme-chalk/index.css"
      ],
      "library": "ELEMENT"
    },
    {
      "package": "vant",
      "version": "2.12.53",
      "urls": [
        "https://unpkg.com/vant@2.12/lib/vant.min.js",
        "https://unpkg.com/vant@2.12/lib/index.css"
      ],
      "library": "vant"
    }
  ],

{
  "category": "基础组件",
  "componentName": "ElRow",
  "npm": {
    "package": "element-ui",
    "version": "2.30.6",
    "exportName": "Row",
    "destructuring": true
  }
}

"props": [
    {
      "name": "gutter",
      "propType": "number"
    },
    {
      "name": "type",
      "propType": "string",
      "defaultValue": "flex"
    },
    {
      "name": "justify",
      "propType": {
        "type": "oneOf",
        "value": ["start", "end", "center", "space-around", "space-between"]
      },
      "defaultValue": "start"
    },
    {
      "name": "align",
      "propType": {
        "type": "oneOf",
        "value": ["top", "middle", "bottom"]
      }
    },
    {
      "name": "tag",
      "propType": "string",
      "defaultValue": "div"
    }
]

"configure": {
    "supports": {
      "events": ["click", "change"],
      "loop": true,
      "condition": true,
      "style": true
    },
    "component": {
      "isContainer": true,
      "isLayout": true
    },
    "props": [
      {
        "type": "group",
        "title": "布局样式",
        "display": "block",
        "items": [
          {
            "type": "field",
            "title": "类型",
            "name": "type",
            "defaultValue": "flex",
            "condition": false
          },
          {
            "type": "field",
            "title": "栅格间隔",
            "name": "gutter",
            "setter": "NumberSetter"
          },
          {
            "type": "field",
            "title": "水平排列",
            "name": "justify",
            "setter": {
              "componentName": "SelectSetter",
              "defaultValue": "start",
              "props": {
                "options": [
                  { "title": "start", "value": "start" },
                  { "title": "end", "value": "end" },
                  { "title": "center", "value": "center" },
                  { "title": "space-around", "value": "space-around" },
                  { "title": "space-between", "value": "space-between" }
                ]
              }
            }
          },
          {
            "type": "field",
            "title": "垂直排列",
            "name": "align",
            "setter": {
              "componentName": "SelectSetter",
              "defaultValue": "start",
              "props": {
                "options": [
                  { "title": "top", "value": "top" },
                  { "title": "middle", "value": "middle" },
                  { "title": "bottom", "value": "bottom" }
                ]
              }
            }
          }
        ]
      }
    ]
  }

const getValue = function (target, fieldValue) {
  const map = target.getNode().children.map((child) => {
    const primaryKey = child.getPropValue('primaryKey')
      ? String(child.getPropValue('primaryKey'))
      : child.id
    return {
      primaryKey: primaryKey,
      title: child.getPropValue('title'),
    }
  })
  return map
}

const setValue = function (target, value) {
  const node = target.getNode()

  const map = {}
  if (!Array.isArray(value)) {
    value = []
  }
  value.forEach((item) => {
    const tabitem = Object.assign({}, item)
    map[item.primaryKey] = tabitem
  })
  node.children.mergeChildren(
    (child) => {
      const primaryKey = String(child.getPropValue('primaryKey'))
      if (Object.hasOwnProperty.call(map, primaryKey)) {
        child.setPropValue('title', map[primaryKey].title)
        delete map[primaryKey]
        return false
      }
      return true
    },
    () => {
      const items = []
      for (const primaryKey in map) {
        if (Object.hasOwnProperty.call(map, primaryKey)) {
          items.push({
            componentName: 'van-tab',
            props: map[primaryKey],
          })
        }
      }
      return items
    },
    (child1, child2) => {
      const a = value.findIndex(
        (item) => String(item.primaryKey) === String(child1.getPropValue('primaryKey'))
      )
      const b = value.findIndex(
        (item) => String(item.primaryKey) === String(child2.getPropValue('primaryKey'))
      )
      return a - b
    }
  )
}

{
  "configure": {
    // 支持的事件枚举
    "supports": {
      // 支持事件列表
      "events": ["click", "change"],
      // 支持循环设置
      "loop": true,
      // 支持条件设置
      "condition": true,
      // 支持样式设置
      "style": true
    }
  }
}

{
  configure: {
    component: {
      // 组件是否是容器组件(可拖入，类似于插槽)
      isContainer: true,
      isModal: false,
      descriptor: 'title',
      nestingRule: {
        childWhitelist: ['SelectOption'],
        parentWhitelist: ['Select', 'Table'],
      },
      rootSelector: '.next-dialog',
      disableBehaviors: ['copy', 'remove'],
      actions: {
        name: 'copy', // string;
        content: '＋', // string | ReactNode | ActionContentObject;
        items: [], // ComponentAction[];
        condition: 'always', // boolean | ((currentNode: any) => boolean) | 'always';
        important: true, // boolean;
      },
    },
  },
}

{
  configure: {
    advanced: {
      callbacks: {
        onNodeAdd: (dragment, currentNode) => {
          const layoutPNode = currentNode.document.createNode({
            componentName: "WsCard",
            title: "卡片组件",
            props: { },
            children: [dragment.schema],
          });
          setTimeout(() => {
            if (!currentNode.getChildren().has(dragment)) {
              return;
            }
            const newNode = currentNode.document.createNode(
              Object.assign(layoutPNode.schema)
            );
            currentNode.insertBefore(newNode, dragment, false);
            dragment.remove(false);
            newNode.getChildren().get(0).select();
          }, 1);
        }
      },
      getResizingHandlers: () => {
        return [ 'E' ];
      },
      initials: [
        {
          name: 'linkType',
          initial: () => 'link'
        },
      ]
    },
  }
}

"title": {
  "label": "自定义搜索逻辑",
  "tip": "第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中"
},

"componentList": [
  {
    "title": "WSHOTO_PC 组件",
    "children": [
      {
        "componentName": "WeShineExportButton",
        "library": "WSHOTO_PC_UI",
        "snippets": [
          {
            "screenshot": "https://helios-allpublic-1257616148.cos.ap-shanghai.myqcloud.com/img/input.png",
            "title": "导出列表",
            "schema": {
              "componentName": "WeShineExportButton",
              "props": {
                "moduleId": "demo",
                "moduleFileName": "导出列表文件",
                "btnText": "导出列表",
                "getParams": {
                  "type": "JSFunction",
                  "value": "function getParams() {\n          return {};\n        }"
                },
                "createFn": {
                  "type": "JSFunction",
                  "value": "function createFn(data) {\n       return { url: '/v3/base-auditlog/api/audit/log/download/jobId', method: 'post', data};\n        }"
                },
                "getProgressFn": {
                  "type": "JSFunction",
                  "value": "function getProgressFn(options) {\n       return { url: '/v3/base-auditlog/api/audit/log/download/progress', method: 'get',  params: {...options}}; \n        }"
                },
                "getUrlFn": {
                  "type": "JSFunction",
                  "value": "function getProgressFn(options) {\n       return { url: '/v3/base-auditlog/api/audit/log/download/file', method: 'get',  params: {...options}}; \n        }"
                }
              }
            }
          }
        ]
      }
    ]
  }
]

{
  "name": "justify",
  "propType": {
    "type": "oneOf",
    "value": ["start", "end", "center", "space-around", "space-between"]
  }
}

{
  "name": "v-model",
  "description": "绑定的值",
  "propType": {
    "type": "oneOfType",
    "value": [
      "string",
      "bool",
      "number"
    ]
  }
},

"propType": {
    "type": "shape",
    "value": [
      {
        "name": "span",
        "description": "span",
        "propType": "number"
      },
      {
        "name": "offset",
        "description": "offset",
        "propType": "number"
      }
    ]
},

{
  "name": "inactive-color",
  "title": "关闭时的背景色",
  "setter": "ColorSetter"
}

{
  "version": "0.0.1",
  "components": [
    {
      "category": "基础组件",
      "componentName": "ElRow",
      "npm": {
        "package": "element-ui",
        "version": "2.30.6",
        "exportName": "Row",
        "destructuring": true
      },
      "props": [
        {
          "name": "gutter",
          "propType": "number"
        },
        {
          "name": "type",
          "propType": "string",
          "defaultValue": "flex"
        },
        {
          "name": "justify",
          "propType": {
            "type": "oneOf",
            "value": ["start", "end", "center", "space-around", "space-between"]
          },
          "defaultValue": "start"
        },
        {
          "name": "align",
          "propType": {
            "type": "oneOf",
            "value": ["top", "middle", "bottom"]
          }
        },
        {
          "name": "tag",
          "propType": "string",
          "defaultValue": "div"
        }
      ],
      "configure": {
        "supports": {
          "loop": true,
          "condition": true,
          "style": true
        },
        "component": {
          "isContainer": true,
          "isLayout": true
        },
        "props": [
          {
            "type": "group",
            "title": "布局样式",
            "display": "block",
            "items": [
              {
                "type": "field",
                "title": "类型",
                "name": "type",
                "defaultValue": "flex",
                "condition": false
              },
              {
                "type": "field",
                "title": "栅格间隔",
                "name": "gutter",
                "setter": "NumberSetter"
              },
              {
                "type": "field",
                "title": "水平排列",
                "name": "justify",
                "setter": {
                  "componentName": "SelectSetter",
                  "defaultValue": "start",
                  "props": {
                    "options": [
                      {
                        "title": "start",
                        "value": "start"
                      },
                      {
                        "title": "end",
                        "value": "end"
                      },
                      {
                        "title": "center",
                        "value": "center"
                      },
                      {
                        "title": "space-around",
                        "value": "space-around"
                      },
                      {
                        "title": "space-between",
                        "value": "space-between"
                      }
                    ]
                  }
                }
              },
              {
                "type": "field",
                "title": "垂直排列",
                "name": "align",
                "setter": {
                  "componentName": "SelectSetter",
                  "defaultValue": "start",
                  "props": {
                    "options": [
                      {
                        "title": "top",
                        "value": "top"
                      },
                      {
                        "title": "middle",
                        "value": "middle"
                      },
                      {
                        "title": "bottom",
                        "value": "bottom"
                      }
                    ]
                  }
                }
              }
            ]
          }
        ]
      }
    },
    {
      "category": "基础组件",
      "componentName": "ElCol",
      "npm": {
        "package": "element-ui",
        "version": "2.30.6",
        "exportName": "Col",
        "destructuring": true
      },
      "configure": {
        "supports": {
          "loop": true,
          "condition": true,
          "style": true
        },
        "component": {
          "isContainer": true,
          "isLayout": true,
          "nestingRule": {
            "descendantBlacklist": ["ElCol"],
            "parentWhitelist": ["ElRow"]
          }
        },
        "props": [
          {
            "type": "group",
            "title": "布局样式",
            "display": "block",
            "items": [
              {
                "type": "field",
                "title": "占据列宽",
                "name": "span",
                "setter": "NumberSetter"
              },
              {
                "type": "field",
                "title": "左侧间隔",
                "name": "offset",
                "setter": "NumberSetter"
              },
              {
                "type": "field",
                "title": "向右移动",
                "name": "push",
                "setter": "NumberSetter"
              },
              {
                "type": "field",
                "title": "向左移动",
                "name": "pull",
                "setter": "NumberSetter"
              }
            ]
          }
        ]
      }
    }
  ],
  "componentList": [
    {
      "title": "布局组件",
      "children": [
        {
          "componentName": "ElRow",
          "library": "element-ui",
          "snippets": [
            {
              "screenshot": "https://helios-allpublic-1257616148.cos.ap-shanghai.myqcloud.com/img/card.png",
              "title": "栅格-行",
              "schema": {
                "componentName": "ElRow",
                "children": []
              }
            }
          ]
        }
      ]
    },
    {
      "title": "布局组件",
      "children": [
        {
          "componentName": "ElCol",
          "library": "element-ui",
          "snippets": [
            {
              "screenshot": "https://helios-allpublic-1257616148.cos.ap-shanghai.myqcloud.com/img/card.png",
              "title": "栅格-列",
              "schema": {
                "componentName": "ElCol",
                "children": []
              }
            }
          ]
        }
      ]
    }
  ]
}

{
  "version": "0.0.1",
  "components": [
    {
      "category": "基础组件",
      "componentName": "van-grid",
      "npm": {
        "package": "vant",
        "version": "2.12.53",
        "exportName": "Grid",
        "destructuring": true
      },
      "props": [
        {
          "name": "column-num",
          "title": "列数",
          "propType": "number",
          "defaultValue": "4"
        },
        {
          "name": "gutter",
          "title": "格子间隔",
          "propType": "number",
          "defaultValue": "0"
        },
        {
          "name": "direction",
          "title": "排列方向",
          "propType": {
            "type": "oneOf",
            "value": ["vertical", "horizontal"]
          },
          "defaultValue": "vertical"
        },
        {
          "name": "border",
          "propType": "bool",
          "title": "显示边框",
          "defaultValue": true
        },
        {
          "name": "center",
          "propType": "bool",
          "title": "居中显示",
          "defaultValue": true
        },
        {
          "name": "square",
          "propType": "bool",
          "title": "显示正方形",
          "defaultValue": false
        },
        {
          "name": "clickable",
          "propType": "bool",
          "title": "开启点击反馈",
          "defaultValue": false
        }
      ],
      "configure": {
        "supports": {
          "events": ["click"],
          "loop": true,
          "condition": true,
          "style": true
        },
        "component": {
          "isContainer": true
        }
      }
    },
    {
      "category": "基础组件",
      "componentName": "van-grid-item",
      "npm": {
        "package": "vant",
        "version": "2.12.53",
        "exportName": "GridItem",
        "destructuring": true
      },
      "props": [
        {
          "name": "default",
          "title": "默认插槽",
          "propType": "node"
        },
        {
          "name": "text",
          "description": "文本内容",
          "propType": {
            "type": "oneOfType",
            "value": ["string", "node"]
          },
          "defaultValue": ""
        },
        {
          "name": "icon",
          "propType": {
            "type": "oneOfType",
            "value": ["string", "node"]
          },
          "defaultValue": ""
        },
        {
          "name": "dot",
          "propType": "bool",
          "defaultValue": false
        },
        {
          "name": "badge",
          "propType": "string",
          "defaultValue": ""
        },
        {
          "name": "url",
          "propType": "string",
          "defaultValue": ""
        },
        {
          "name": "to",
          "propType": "string",
          "defaultValue": ""
        },
        {
          "name": "replace",
          "propType": "bool",
          "defaultValue": false
        }
      ],
      "configure": {
        "supports": {
          "events": ["onClick"],
          "loop": true,
          "condition": true,
          "style": true
        },
        "component": {
          "isContainer": false
        }
      }
    }
  ],
  "componentList": [
    {
      "title": "布局组件",
      "children": [
        {
          "componentName": "van-grid",
          "library": "vant",
          "snippets": [
            {
              "screenshot": "https://helios-allpublic-1257616148.cos.ap-shanghai.myqcloud.com/img/card.png",
              "title": "宫格-容器",
              "schema": {
                "componentName": "van-grid",
                "children": []
              }
            }
          ]
        }
      ]
    },
    {
      "title": "布局组件",
      "children": [
        {
          "componentName": "van-grid-item",
          "library": "vant",
          "snippets": [
            {
              "screenshot": "https://helios-allpublic-1257616148.cos.ap-shanghai.myqcloud.com/img/card.png",
              "title": "宫格-子项",
              "schema": {
                "componentName": "van-grid-item",
                "children": []
              }
            }
          ]
        }
      ]
    }
  ]
}