在小伙伴们热情提出
各种实际需求和建议的帮助下
CODE.FUN 经过大半年的飞速迭代
实战能力得到大幅提升！
在解放前端小伙伴们
枯燥手写页面的进程中再进一步
今天我想先给大家介绍下
产研团队这三个月的成果
01
CSS 编辑器
智能编辑， 高效“打码”
- 即时预览，无须切换
平时在写布局、样式代码时，需要比对设计稿和 CSS 代码，前端程序员经常在设计稿与编译器之间来回切换，这样操作下不仅耗时长，而且容易出错，动不动就写出不自觉的「bug」。
为了解决这个问题，上新支持在 CODE.FUN 直接编辑 CSS 代码功能，支持实时预览，无须切换即可查看代码，这样是不是有好太多了，提效分分钟 😄。
- 可视化编辑器，所见即所得
同时我们这次上新支持了图形化编辑界面，大家可以在可视化界面直接进行调整布局、定位、尺寸、边距等样式效果，让你轻轻松松就搞定 Flex、Grid 布局，整个过程一气呵成，只要你的网速够快，嘿嘿 😁。
02
DOM 工具箱
送你百宝箱，提效100分
- 拖拽调整 DOM 节点
平时在还原复杂设计稿时，层级很多，调整 DOM 结构需要修改不少的代码，修改过程中很容易出现错误，稍不注意就容易出 bug ，影响大家交付项目的速度 😔 。
这版本上新，我们提供了拖拽调整 DOM 节点，大家在使用CODE.FUN，可以直接在 DOM tree 上节点拖拽到合适的层级以形成理想的 DOM 结构，效率想要不提升都很难！
- 空白调整工具
之前有用户反映在 CODE.FUN 上编辑设计稿时，有时会得不到满意的节点编组大小，而且修改起来较为麻烦。
为了提升大家的使用感，新版本支持空白调整工具，大家可以直接在设计稿上调整 DIV 大小，智能计算 margin 和 padding，最终调整到合适的样式效果，听到这里是不是很心动，赶紧上手试一试。
- 为节点设置绝对定位
之前有用户反馈在 CODE.FUN 编辑设计稿时，一些元素容易干扰到其他元素，形成错误的文档流，即使是解组后再编组也会占位，从而影响到整体布局。
为了解决这个问题，我们新版本新增了设置绝对定位的快捷按钮，使用其可以将不合理的节点排除 Flexbox，从而形成更合理的文档流结构，整个操作过程十分流畅，尽享丝滑体验。
- 图片转背景 / 背景转图片
在 CODE.FUN 编辑设计稿新版本支持一键转换 image 、 CSS background-image 节点，快速实现图片与背景的互转，生成最贴合设计稿的文档流结构，更符合大家手写代码的风格。
03
组件化
组件化上线，1小时打卡下班
- 官方 UI 组件库
在之前的场景中，把设计稿上传到 CODE.FUN 之后，只能得到由 View/Text/Image 组成的静态页面，不具备交互能力，而通常前端程序员需要实现页面上收集用户输入、提供反馈、展示动态数据等功能，以此来达到与用户的动态交互，从而实现业务逻辑，这样写页面，不仅耗时长，还容易出错，经常导致项目延期。
本次上新，为大家提供了开箱即用的第三方的 UI 组件库（如 Vant Weapp 、uniapp 等），支持输出对应的组件库代码，你只需通过打标签的方式就可应用组件，轻松实现各种复杂交互逻辑，听到这里，有没有很激动，从此准点下班不是梦 😄。
- 自定义组件库
之前在用户群里，不少人反应：自己团队内部已经有了一批通用的公共组件，能不能把这些组件与 CODE.FUN 打通，在生成代码时自动生成对应的组件代码呢？
为了让能大家无缝衔接使用，本次上新提供的自定义组件的配置功能，可以满足大家的需求，用户可以创建自定义组件库，将常用的组件配置到组件库中，通过标记的方式就可以快速将自定义组件代码应用到设计稿中，满足各种各样的业务场景。这样，只要大家一键操作，就能在 CODE.FUN 里找到自家的组件库，有没有很香～
04
最后
PC 稿社群内测
好啦，说到这里这次更新的相关内容就结束啦，欢迎各位小伙伴快点来体验我们的产品～
🔗 code.fun
哈哈，我们当然知道大家还在关心什么！呼声非常高的「PC 稿」，到底进度如何～这是可以说的，目前我们已经在进行社群内测，如果十分强烈想要体验，大家可以扫码加入我们的「PC 稿社群内测」。
感谢大家对我们的支持，我们一起将 CODE.FUN 功能打造得更加完善，让前端程序员解放生产力，提效 500% ！
**- End -**
复制代码**「CODE.FUN」**产品介绍：\
前端智能化领先者
10000+工程师的提效助手
做前端，不搬砖
电脑浏览器输入网址 code.fun
即可马上登录
关注**「光速软件CodeFun」**公众号
即可免费试用
