(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211053047.5 (22)申请日 2022.08.31 (71)申请人 浪潮通用软件 有限公司 地址 250101 山东省济南市高新区浪潮路 1036号浪潮科技园 (72)发明人 李颖　 (74)专利代理 机构 北京君慧知识产权代理事务 所(普通合伙) 11716 专利代理师 肖鹏 (51)Int.Cl. G06F 8/38(2018.01) G06F 9/451(2018.01) G06F 9/445(2018.01) G06F 16/958(2019.01) G06F 8/65(2018.01)G06F 8/71(2018.01) G06T 1/20(2006.01) (54)发明名称 一种响应式界面实现方法及设备 (57)摘要 本申请公开了一种响应式界面实现方法及 设备， 方法包括： 确定响应式界面的界面描述； 界 面描述包括响应式界面的自定义模式判定规则 与标准模式判定规则、 标准模式对应的响应式界 面实现规则； 确定响应式界面的组件描述； 组件 描述包括组件归属分组转换规则、 组件所占栅格 数转换规则以及组件在二维排布下的行转换规 则； 通过转换接口， 根据界面描 述与组件描述， 对 容器内的组件参数进行处理， 得到可执行代码； 根据可执行代码， 生成响应式界面的可视化操作 界面； 接收用户的配置请求， 对可视化操作界面 进行界面分辨率配置与布局配置， 得到更新的可 执行代码； 根据更新的可执行代码， 生成html   dom结构； 将html  dom结构渲染至表单组件区域。 满足用户个性 化需求。 权利要求书3页 说明书11页 附图4页 CN 115454427 A 2022.12.09 CN 115454427 A 1.一种响应式界面实现方法， 其特 征在于， 所述方法包括： 确定响应式界面的界面描述； 所述界面描述包括所述响应式界面的自定义模式判定规 则与标准模式判定规则、 所述标准模式对应的响应式界面实现规则； 确定所述响应式界面的组件描述； 所述组件描述包括组件归属分组转换规则、 组件所 占栅格数转换规则以及组件在二维排布下的行转换规则； 通过预先设置的转换接口， 根据所述界面描述与所述组件描述， 对容器内的组件参数 进行处理， 以将所述组件参数转换为可 执行代码； 根据所述可 执行代码， 生成所述响应式界面的可视化操作界面； 接收用户的配置请求， 对所述可视化操作界面进行界面分辨率配置与界面布局配置， 得到更新的可 执行代码； 根据所述更新的可 执行代码， 生成html  dom结构； 将所述html  dom结构渲染至表单组件区域， 以生成所述响应式界面。 2.根据权利要求1所述的方法， 其特征在于， 所述确定响应式界面的界面描述， 具体包 括： 根据预设栅格系统， 将所述响应式界面按照分辨率宽度划分为十二等份， 在预设断点 规则表中， 确定所述响应式界面的分辨率宽度对应的断点， 并将所述响应式界面的显示列 数确定为所述断点对应的指定显示列数， 以确定所述标准模式对应的响应式界面实现规 则； 以及 确定表单设计 器内容器的多个组件分别对应的组件所占栅格数； 判断所述组件所占栅格数 是否均满足预设断点 规则； 若是， 则确定所述响应式界面 为标准模式； 若否， 则确定所述响应 式界面为自定义模式； 在所述自定义模式下， 所述多个组件在不 同界面分辨下的显示列数由用户控制。 3.根据权利要求1所述的方法， 其特征在于， 所述确定所述响应式界面的组件描述， 具 体包括： 对所述表单设计器内容器的组件进行ID标记， 确定分组节点与未分组节点； 确定所述 分组节点内的组件， 在所述分组节点内部设置组件宽度以及组件位置， 以确定所述响应式 界面的组件 归属分组转换规则； 以及 根据标准模式的组件cl ass样式与自定义模式的组件class样式， 以确定所述响应式界 面的组件所占栅格数转换规则； 以及 根据所述表单设计器 内容器的多个组件分别对应的所占栅格数， 将一维数据转换为二 维数据， 通过对剩余栅格数与组件所占栅格数进 行相减， 确定行分配算法， 根据所述行分配 算法确定多个组件分别所处于的行位置， 以确定所述组件在二维排布下的行转换规则。 4.根据权利要求1所述的方法， 其特 征在于， 确定预 先设置的转换接口， 具体包括： 确定所述容器内的接口标识； 所述接口标识包括当前断点、 当前分组、 当前组件名、 断 点设置、 组件值存储； 所述组件值存储记录了 当前组件在不同界面分辨率下的配置值， 所述 组件值存储包括超大屏幕所占栅格数、 极大屏幕所占栅格数、 中等屏幕所占栅格数、 小屏幕 所占栅格数、 极小屏幕所占栅格数、 超大屏幕上组件所占列数、 极大屏幕上组件所占列数、 中等屏幕上组件所占列数、 小屏幕上组件所占列数、 极小屏幕上组件所占列数；权　利　要　求　书 1/3 页 2 CN 115454427 A 2通过所述接口标识， 确定所述 转换接口。 5.根据权利要求1所述的方法， 其特征在于， 所述根据所述可执行代码， 生成所述响应 式界面的可视化操作界面， 具体包括： 根据所述可 执行代码， 将所述可视化操作界面划分为控制区、 操作区以及视图区； 其中， 所述控制区用于配置所述响应式界面的组件； 所述操作区用于确定所述响应式 界面的组件布局方式及调整所述响应式界面的组件宽度； 所述视图区用于响应所述操作区 的拖拽变更与数据变更， 以渲染预览界面。 6.根据权利要求5所述的方法， 其特 征在于， 所述方法还 包括： 确定所述控制区包 含界面分辨 率切换区、 显示模式切换区、 分组切换区； 在所述界面分辩率切换区中， 从所述转换接口中提取并渲染当前界面支持显示的所有 分辨率； 在所述显示模式切换区中， 判断所述响应式界面是否为标准模式； 若是， 则在接收第一界面切换请求时， 将所述响应式界面的标准模式切换至所述自定 义模式； 若否， 则在接收第二界面切换请求时， 判断所述响应式界面的自定义模式是否与所述 响应式界面实现规则匹配； 若匹配， 则将所述响应式界面的自定义模式切换至所述标准模 式。 7.根据权利要求5所述的方法， 其特 征在于， 所述方法还 包括： 确定所述操作区包括组件显示区、 组件操作区； 根据所述控制区发送的界面分辨率切换区、 显示模式切换区、 分组切换区对应的数据， 确定所述响应式界面的配置信息， 并在组件数据中提取 出组件标签， 以确定组件显示区； 提取出组件所占栅格数的所有可选项， 并为每个组件增加可拖拽按钮， 以确定组件操 作区。 8.根据权利要求5所述的方法， 其特 征在于， 所述方法还 包括： 在所述视图区中， 根据 所述控制区发送的界面分辨率切换区、 显示模式切换区、 分组切 换区对应的数据， 确定所述响应式界面的配置信息； 根据所述响应 式界面的配置信 息与所述操作区发送的变更数据， 通过二维排布下的行 转换规则， 渲染出 所述响应式界面的显示界面。 9.根据权利要求1所述的方法， 其特征在于， 接收用户的配置请求， 对所述可视化操作 界面进行界面分辨 率配置与界面布局配置， 得到更新的可 执行代码， 具体包括： 接收用户的配置请求， 若配置请求为切换所述界面分辨率， 则将所述转换接口中的界 面分辨率切换为对应断点的缩写值； 若配置请求为切换所述响应式界面的模式， 则将所述转换接口中的响应式界面模式进 行切换； 若配置请求 为切换组件分组， 则获取对应的分组值。 10.一种响应式界面实现设备， 其特 征在于， 包括： 至少一个处 理器； 以及， 与所述至少一个处 理器通信连接的存 储器； 其中， 所述存储器存储有可被所述至少一个处理器执行的指令， 所述指令被所述至少一个处权　利　要　求　书 2/3 页 3 CN 115454427 A 3