D2C PRO

Appearance

快速开始 ​

使用研发模式 D2C PRO 功能，你需要拥有一个企业版的 研发席位 或 编辑席位 的账号。

启动研发模式 ​

先进入 MasterGo 并打开任意一个设计文件，点击顶部的 研发模式 开关，或者 Shift + D 即可进入研发模式。如果你的账号是研发席位的权益 ，则自动进入研发模式。

生成代码 ​

进入到研发模式，点击右边的D2C选项即可访问D2C PRO的界面。然后选中设计稿的任意一个元素，即可生成对应的代码。

生成代码

小提示

如果你只需要将设计稿中的元素生成 HTML 代码和内联样式，则无需编写任何配置。

解析和映射 ​

如果需要自定义解析生成的代码，可以在 DSM (设计系统管理平台) 中进行配置。

打开团队库的DSM ​

配置文件界面

编辑配置文件 ​

配置文件界面

我们为你提供了4个配置项，你可以根据你的需求来决定编写哪种配置，它们都是json格式的。

编写配置文件 ​

了解你的需求并根据这些需求创建配置文件，可以帮助你节省时间。

  • 特征设置 ：用于定义项目特征，如预览界面、框架类型、忽略图层等。
  • 样式映射 ：用于定义样式映射，将 MasterGo 输出的样式映射到 Class name。
  • 样式解析器 ：用于定义自定义样式解析器，你可以控制解析设计稿的哪些样式。
  • 组件解析器 ：如果你要生成前端组件库的代码，你可以定义自定义的组件解析器。

特征设置 feature ​

你可以先粘贴这些内容到对应的文件中，以便你快速开始。详细的说明请参考 左侧菜单的 配置 分类里的内容。

json
{
  "playground_url": "http://your.playground_url.com",
  "component_prefix": "el-",
  "ignore_prefixes": [
    "_"
  ]
}

特征配置征库用于定义项目特征，如预览界面、组件前缀、忽略前缀等。

样式映射 Mappings ​

将画布输出的样式映射到 Class name。如下：

json
{
  // "css属性": {
  //   "设计稿的样式名称": "输出你要的 Class name",
  // },

  "display": {
    "flex": "flex",
  },
  "justify-content": {
    "flex-start": "items-left",
    "center": "items-center",
    "flex-end": "items-right",
    "space-between": "items-between"
  },
  "align-items": {
    "flex-start": "items-top",
    "center": "items-middle",
    "flex-end": "items-bottom"
  }
}

样式解析器 Style parsers ​

由于画布的描述信息与 css 样式描述信息存在一定的差异性，所以 D2C PRO 暂时支持以下样式解析。不必太过担心，这些样式已经足够生成一个完整的且具有响应式的布局代码了。

json
{
  "width": {},
  "height": {},
  "minWidth": {},
  "minHeight": {},
  "maxWidth": {},
  "maxHeight": {},
  "display": {},
  "flex": {},
  "justifyContent": {},
  "alignItems": {},
  "direction": {},
  "gap": {},
  "text": {},
  "color": {},
  "fontSize": {},
  "fontFamily": {},
  "textAlign": {},
  "fontWeight": {},
  "lineHeight": {},
  "letterSpacing": {},
  "padding": {},
  "background": {},
  "borderStyle": {},
  "borderColor": {},
  "borderWidth": {},
  "radius": {},
  "opacity": {},
  "boxshadow": {},
  "position": {}
}

组件解析器 Component parsers ​

以下的配置演示了如何输出一个前端组件的代码。

json
{
  "button": {
    "props": {},
    "type": {
      "valueFrom": "background"
    },
    "text": {
      "nodeName": "_text"
    },
    "disabled": {},
    "flex": {},
    "traverse": {}
  }
}

具体的配置方式请参考 组件解析器。

在任意文件中使用 ​

现在开始，你可以在 MasterGo 的任意文件中使用 D2C PRO 来生成高保真代码了。