Skip to main content

主界面总览



CodeFun 的 IDE 主界面是用户日常操作设计稿的主要界面,它一共由六个板块组成,
  1. 画布

  2. 工具栏

  3. 常用操作

  4. DOM 树

  5. 属性面板

  6. 代码操作

以下分别介绍各个子板块功能和支持的相关操作。

画布



此区域展示通过用户设计稿生成的 HTML 页面效果,为用户对设计稿进行二次加工提供图形化操作界面。

当用户通过插件(Sketch、PS 等)或 IDE 界面上传设计稿到 CodeFun 后台系统后,CodeFun 后台算法系统会对用户设计稿进行一系列算法加工处理,最终生成符合用户最佳习惯的 HTML、CSS 代码。

当用户进入设计稿详情页面后,CodeFun 网页前端就会从后台系统拉取处理后的设计稿数据,并将数据渲染到画布展示区。

用户通过画布可以完成如下功能:

  • 查看设计稿生成的 HTML 页面整体效果

  • 选中(单选或多选) HTML 元素节点

  • 查看节点类型

  • 删除节点

  • 拖动画布

工具栏



工具栏包含了一些实用工具,如上图所示,从上到下的功能分别为:
  • 高亮显示绝对定位元素。

  • 高亮显示元素边框。

常用操作



常用操作为用户编辑画布中的元素节点提供快速编辑功能,如上图所示,从左到右的功能分别为:
  • 撤销/重做。用于快速撤销/重做用户在画布中的最后一个或多个操作

  • 编组。用于为画布中选择的元素增加一个父节点

  • 解组。用于删除一个 View 节点,但是在界面上保留该 View 节点的所有子孙节点

  • 切图。将画布中选中的节点转换为图片节点

  • 标记组件。为画布中某个节点打上一个组件标签,以便生成更合理的 HTML 代码

  • 数据绑定。为画布中某个节点设置数据来源

DOM 树



DOM 树通过树形结构来展示用户设计稿生成的 HTML 页面结构。用户通过 DOM 树,可以完成如下功能:
  • 选中画布中的元素节点

  • 折叠或展开 View 节点

  • 查看元素节点当前标签

  • 查看元素节点的 CSS 类名

  • 删除元素节点

属性面板



当用户选中画布中某个元素节点后,可以通过属性面板来查看和配置该节点的相关属性。

属性面板包含三个子功能:

样式配置

用于查看和调整节点样式相关的属性,通过该面板用户可以配置:

  • 设置生成代码的样式长度单位,目前支持 px、rpx、rem 等长度单位

  • 修改节点 CSS 类名

  • 查看节点 CSS 属性和对应的属性值

  • 为节点添加注释。生成代码后,在此添加的注释会被保留

交互配置

用于配置当用户在最终生成的代码中点击节点后,页面的交互行为,目前可以配置:

  • 跳转页面。用户点击节点后,跳转到指定的页面

  • 返回上一级。用户点击节点后,返回上一级页面

组件配置

组件配置因不同的组件而不同,具体配置项请参考具体的组件介绍页面。

代码操作



代码操作板块主要包含一些和最终代码生成相关的一些功能。目前主要包含三个功能:
  • 资源管理器。用于查看和管理当前设计稿用到的全部资源图片。

  • 预览。用于在线预览当前设计稿页面或整个项目的设计稿页面。

  • 查看代码。用于查看和拷贝当前页面的 HTML、CSS、JS、全局样式等代码。用户还可以配置代码生成平台、样式长度单位、样式代码格式(CSS/LESS)

  • 下载查看。用于下载当项目面的 HTML、CSS、JS、全局样式等代码。用户还可以配置代码生成平台、样式长度单位、样式代码格式(CSS/LESS)