一种页面设计器及其装置、存储介质、计算设备的制作方法

本公开的实施方式涉及页面设计，更具体地，本公开的实施方式涉及一种页面设计器及其装置、存储介质、计算设备。

背景技术：

1、本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

2、页面设计器，是一种用于创建和设计网页、应用程序界面等可视化页面的工具。它通常提供了一组用户界面元素和布局工具，以帮助用户设计和排列网页上的元素，比如文本、图像、表格、按钮等。基于页面设计器，用户可以通过拖拽、放置和设置属性等交互操作来构建页面布局、添加组件和定制样式等，而无需用户深入了解代码编写，降低了页面设计的门槛。

3、然而，目前的页面设计器通用性较低，只能适用于某个前端组件库下，不能兼容其他的组件库。

技术实现思路

1、在本上下文中，本公开的实施方式期望提供一种页面设计器。

2、在本公开实施方式的第一方面中，提供了一种页面设计器，包括：

3、位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层；其中，

4、所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

5、所述iframe内嵌框架层，用于基于dom树进行渲染，以生成目标页面；其中，所述dom树为用于构建目标页面的数据结构；

6、所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述dom树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

7、其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

8、在本公开实施方式的第二方面中，提供了一种页面设计器装置，包括：

9、包含了容器层的容器模块，包含了iframe内嵌框架层的框架模块，以及包含了操作层的操作模块；其中，容器层位于底层，iframe内嵌框架层位于中层，操作层位于顶层；

10、所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

11、所述iframe内嵌框架层，用于基于dom树进行渲染，以生成目标页面；其中，所述dom树为用于构建目标页面的数据结构；

12、所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述dom树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

13、其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

14、在本公开实施方式的第三方面中，提供了一种存储介质，其上存储有计算机指令，该指令被处理器执行时实现任一项所述的页面设计器。

15、在本公开实施方式的第四方面中，提供了一种计算设备，包括：

16、处理器；

17、用于存储处理器可执行指令的存储器；

18、其中，所述处理器通过运行所述可执行指令以实现任一项所述的页面设计器。

19、本公开以上的实施方式，至少具有如下的有益效果：

20、通过以上技术方案，在iframe内嵌框架层之上，设计处于同一内的操作层来隔绝设计者与iframe内嵌框架层的交互，设计者的交互不再直接对iframe内嵌框架层的dom树产生影响，而是改变操作层的组件树，并通过组件树与dom树的映射关系来变更dom树，从而基于dom树实现目标页面的渲染，完成页面设计元素在目标页面中的布局和编排。在上述过程中，通过分层设计，由操作层来隔绝设计者与iframe内嵌框架层的交互，使得设计者的交互对iframe内嵌框架层的dom树不产生直接影响，实现了iframe内嵌框架层中的目标页面和设计器的解耦，提高了可扩展性和通用性，使得设计器可以兼容多种前端组件库。

技术特征：

1.一种页面设计器，包括：

2.根据权利要求1所述的页面设计器，所述容器层，用于基于css的transform属性控制所述操作层的平移和缩放，以及控制所述iframe内嵌框架层的平移和缩放；所述操作层和所述iframe内嵌框架层完全重合。

3.根据权利要求1所述的设计器，所述渲染生成的设计页面，包含了实例化的块对象；所述块对象与所述目标页面的数据结构中的dom节点对应，所述实例化的块对象用于描述所述dom节点包含的dom元素在所述目标页面中所占据的空间。

4.根据权利要求3所述的页面设计器，所述操作层，还用于创建包含有所述映射关系的映射表；其中，所述映射表的创建过程包括：

5.根据权利要求1所述的页面设计器，所述容器层，还用于响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件。

6.根据权利要求5所述的页面设计器，所述拖拽事件包括拖拽开始事件和拖拽结束事件；

7.根据权利要求6所述的页面设计器，所述操作层，还用于根据所述第二坐标确定所述释放位置是否位于任一块对象内部，以及响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

8.一种页面设计器装置，所述装置包括：

9.一种存储介质，其上存储有计算机指令，该指令被处理器执行时实现如权利要求1-7中任一项所述的页面设计器。

10.一种计算设备，包括：

技术总结
本公开的实施方式提供了一种页面设计器，包括：位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层；其中，容器层作为父容器，容纳了操作层和所述iframe内嵌框架层；iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，DOM树为用于构建目标页面的数据结构；操作层，覆盖于iframe内嵌框架层上，用于隔绝设计者与iframe内嵌框架层的交互；以及，确定与DOM树存在映射关系的组件树，并基于组件树进行渲染，以生成设计页面。

技术研发人员：汪韬
受保护的技术使用者：杭州网易数之帆科技有限公司
技术研发日：
技术公布日：2024/3/11