页面生成方法、系统、设备及介质与流程

本申请涉及前端开发，可应用于金融和医疗场景，具体涉及一种页面生成方法、系统、设备及介质。

背景技术：

1、随着互联网技术的快速发展，前端页面开发已成为软件产品研发流程中的核心环节。在产品开发过程中，设计师通过设计工具完成设计稿的输出，前端工程师基于设计稿进行代码还原，最终实现可运行、可交互的前端页面。然而，在从设计稿到代码的转化过程中，长期存在严重的断层，导致开发效率低下、质量不稳定。具体表现在以下几个方面：

2、第一、接入源局限：现有设计转代码工具高度依赖设计软件提供的开放接口，仅能处理在线可访问、权限开放的设计稿。在处理离线设计文件或交互源码时，现有工具不具备解析能力。

3、第二、布局逻辑缺失：设计稿普遍采用绝对定位描述位置，而工业级前端页面需要适应不同屏幕尺寸的响应式布局。现有工具缺乏对布局意图的理解，无法自动推断嵌套结构、对齐方式、间距规则等。人工转换不仅效率极低，还易出现布局错乱、多端适配失效、兼容性差等问题。

4、第三、交互逻辑断层：设计稿中的原型连线、状态切换、页面跳转等交互设计仅停留在视觉演示层面，不具备可执行的逻辑语义。现有工具无法将这些交互设计自动解析为代码逻辑，交互设计必须由前端工程师手动实现。

5、第四、维护成本高：现有工具生成的代码仅为一次性输出，不支持设计与代码之间的增量同步。当设计师修改设计稿颜色、尺寸、布局、文案时，开发人员必须手动在代码中逐一查找并修改，极易出现遗漏、不一致、冲突等问题。

6、因此，亟需一种能够突破单一数据源限制、深度理解布局语义、自动化注入交互逻辑的前端页面自动生成技术。

技术实现思路

1、为解决上述问题，本申请提供了一种页面生成方法、系统、设备及介质，通过多模式解析设计元数据并构建统一中间表示层，利用递归聚类算法实现绝对位置到弹性布局的自动转换，结合多模态语义分析完成标准组件映射，并基于唯一指纹实现设计与代码的同步，从而达到全场景适配、高效生成、长期可维护的技术效果。

2、本申请采用下述技术方案：

3、第一方面，本申请提供了一种页面生成方法，包括：

4、获取设计元数据，根据设计元数据的输入源类型将设计元数据转换为中间表示层；其中，中间表示层包括各视觉单元的标识信息、绝对位置信息、视觉属性和交互逻辑信息；

5、基于绝对位置信息，通过递归聚类算法确定各视觉单元之间的排列关系，根据排列关系构建布局容器树以将绝对位置信息转换为弹性布局参数；

6、根据标识信息、视觉属性和布局容器树中的结构关系，对各视觉单元进行语义匹配以将各视觉单元映射为对应的标准前端组件；

7、根据弹性布局参数、视觉属性和交互逻辑信息，生成对应于标准前端组件的组件代码；

8、为各视觉单元生成唯一指纹标识，将唯一指纹标识绑定至组件代码中对应的页面元素上，并根据目标前端框架的工程化规范，将携带有唯一指纹标识的组件代码整合为前端页面文件。

9、第二方面，本申请还提供了一种页面生成系统，包括：

10、数据解析单元，用于获取设计元数据，根据设计元数据的输入源类型将设计元数据转换为中间表示层；其中，中间表示层包括各视觉单元的标识信息、绝对位置信息、视觉属性和交互逻辑信息；

11、布局推断单元，用于基于绝对位置信息，通过递归聚类算法确定各视觉单元之间的排列关系，根据排列关系构建布局容器树以将绝对位置信息转换为弹性布局参数；

12、语义匹配单元，用于根据标识信息、视觉属性和布局容器树中的结构关系，对各视觉单元进行语义匹配以将各视觉单元映射为对应的标准前端组件；

13、代码生成单元，用于根据弹性布局参数、视觉属性和交互逻辑信息，生成对应于标准前端组件的组件代码；

14、指纹绑定单元，用于为各视觉单元生成唯一指纹标识，将唯一指纹标识绑定至组件代码中对应的页面元素上，并根据目标前端框架的工程化规范，将携带有唯一指纹标识的组件代码整合为前端页面文件。

15、第三方面，本申请还提供了一种电子设备，包括存储器、处理器以及存储在存储器中并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述页面生成方法的步骤。

16、第四方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，计算机程序被处理器执行时实现上述页面生成方法的步骤。

17、本申请采用的上述至少一个技术方案能够达到以下有益效果：

18、上述页面生成方法、系统、设备及介质，通过多类型数据源统一解析构建中间表示层，突破现有技术仅能适配单一设计源的局限，实现多种数据兼容接入；依托递归投影聚类自动解析绝对位置信息并转化为弹性布局参数，无需人工梳理嵌套层级与排布规则，精准还原布局意图，从根源解决绝对定位无法自适应多终端屏幕的缺陷；结合文本语义、视觉特征、容器结构的多模态综合判定方式完成组件智能映射，大幅降低单一维度识别造成的组件匹配错误；依托设计元素专属指纹标识建立设计与代码的一一绑定关系，实现二者双向增量差异化更新。不仅缩短设计转前端的开发周期，减少人工纠错与后期维护成本，更提升前端页面落地效率与代码规范性。

1.一种页面生成方法，其特征在于，包括：

2.根据权利要求1所述的页面生成方法，其特征在于，所述获取设计元数据，根据设计元数据的输入源类型将设计元数据转换为中间表示层，包括：

3.根据权利要求1所述的页面生成方法，其特征在于，所述基于绝对位置信息，通过递归聚类算法确定各视觉单元之间的排列关系，根据排列关系构建布局容器树以将绝对位置信息转换为弹性布局参数，包括：

4.根据权利要求1所述的页面生成方法，其特征在于，所述根据标识信息、视觉属性和布局容器树中的结构关系，对各视觉单元进行语义匹配以将各视觉单元映射为对应的标准前端组件，包括：

5.根据权利要求1所述的页面生成方法，其特征在于，所述根据弹性布局参数、视觉属性和交互逻辑信息，生成对应于标准前端组件的组件代码，包括：

6.根据权利要求1所述的页面生成方法，其特征在于，所述为各视觉单元生成唯一指纹标识，将唯一指纹标识绑定至组件代码中对应的页面元素上，并根据目标前端框架的工程化规范，将携带有唯一指纹标识的组件代码整合为前端页面文件，包括：

7.根据权利要求1所述的页面生成方法，其特征在于，所述方法还包括：

8.一种页面生成系统，其特征在于，包括：

9.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的页面生成方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述的页面生成方法的步骤。