CN114527970A - 所见即所得的低代码软件界面设计开发系统 - Google Patents

Abstract

本发明提供一种所见即所得的低代码软件界面设计开发系统，包括：项目管理子系统、项目协同权限管控子系统、界面编排子系统、导出项目源代码子系统和版本管控子系统，其中，所述项目管理子系统，用于产品的项目、领域和应用的创建、编辑和删除；所述项目协同权限管控子系统，用于分配所述项目的协同人员以及对所述项目、领域和应用的权限进行管控；所述界面编排子系统，用于编排生成产品界面并提供产品界面编排效果的预览；所述导出项目源代码子系统，用于根据所述编排生成的产品界面生成对应的代码，并将所述代码和所述项目包含的图片依据项目工程类型导出到源码压缩包；所述版本管控子系统，用于管控所述产品的版本发布。

Description

所见即所得的低代码软件界面设计开发系统

技术领域

本发明涉及软件设计开发领域，尤其涉及一种所见即所得的低代码软件界面设计开发系统。

背景技术

传统软件开发模式中，将软件开发流程分为：需求设计、业务原型设计、UI设计、前端开发、后端开发、联调测试、发布上线等环节，前一个环节的输出(成果物、说明文档、规范)是后一个环节的输入，面对快速迭代的业务需求，流程长、环节多、文档多、规范多，容易造成沟通成本高、效率低、来回反复、界面复原度低、体验差等问题，过于频繁的业务变更导致需求传递存在偏差和遗漏是各业务发展中名列前茅的痛点之一。

传统软件开发模式中，由不同的人员来承担不同阶段的工作，各个阶段的成果主要靠人工通过文档的形式进行成果的转交，而面对大型项目，人员多且业务为变更较为频繁，不可避免的会导致需求在各环节传递的过程中出现偏差或遗漏，大大增加了项目的开发效率和成本。此外，在前端开发阶段由于开发水平的差异，不同的开发人员对UI效果图的还原程度、UI规范执行、代码规范执行上会存在不同程度的缺陷，造成界面不符合规范、代码混乱难维护等质量问题。

综上可以看出，在传统开发模式下，整体研发环节多、流程长、来回反复，导致多人协作管控困难、整体研发效率低下；同时存在着需求、设计成果走样，开发成果失真，研发成果用户体验较差等问题。由此可见，如何减少开发环节、需求传递不失真、提升界面开发质量、提升代码规范是急需解决的主要问题。

发明内容

本发明提供一种所见即所得的低代码软件界面设计开发系统，用以解决现有技术中在传统开发模式下，整体研发环节多、流程长、来回反复，导致多人协作管控困难、整体研发效率低下；同时存在着需求、设计成果走样，开发成果失真，研发成果用户体验较差的缺陷，实现在一定程度上减少前端开发的人力成本，同时提升工作效率，保证前端输出成果的代码质量和用户体验。

本发明提供一种所见即所得的低代码软件界面设计开发系统，包括：项目管理子系统、项目协同权限管控子系统、界面编排子系统、导出项目源代码子系统和版本管控子系统，其中，

所述项目管理子系统，用于产品的项目、领域和应用的创建、编辑和删除；

所述项目协同权限管控子系统，用于分配所述项目的协同人员以及对所述项目、领域和应用的权限进行管控；

所述界面编排子系统，用于编排生成产品界面并提供产品界面编排效果的预览；

所述导出项目源代码子系统，用于根据所述编排生成的产品界面生成对应的代码，并将所述代码和所述项目包含的图片依据项目工程类型导出到源码压缩包；

所述版本管控子系统，用于管控所述产品的版本发布。

进一步地，所述项目下包括多个领域，所述领域下包括多个应用，所述应用下包括多个页面。

进一步地，所述项目管理子系统包括：项目管理模块、领域管理模块和应用管理模块，其中，

所述项目管理模块，用于项目的创建、编辑、复制和删除，项目的分类管理和项目下所属应用及项目协同人员清单的导出；

所述领域管理模块，用于对项目下所属领域进行增删改查；

所述应用管理模块，用于应用的创建、复制、编辑和删除，应用转移、应用操作日志查询、应用分享以及前端工程的导出。

进一步地，所述项目协同权限管控子系统包括：人员协同模块和权限管控模块，其中，

所述人员协同模块，用于管理并分配项目、领域和应用的协同人员，以及编排锁定所述应用的页面及公共组件；

所述权限管控模块，用于管控所述协同人员的级别权限。

进一步地，所述级别权限包括以下至少一项：项目级别权限、领域级别权限和应用级别权限。

进一步地，所述界面编排子系统包括：页面管理模块、界面编排模块、公共组件模块、数据源管理模块、事件模块、预览模块和分享模块，其中，

所述页面管理模块，用于管理应用下的分组及页面，在项目预览或导出的情况下，根据用户配置生成对应的菜单结构；

所述界面编排模块，用于提供拖拽式可视化界面编排工具，所述编排工具集成了软件开发所需的组件和模板；

所述公共组件模块，用于管理项目下的公共组件和公共弹窗；

所述数据源管理模块，用于管理页面静态数据和数据库关联；

所述事件模块，用于对组件进行事件关联；

所述预览模块，用于预览应用的编排效果和公共组件的效果；

所述分享模块，用于展示以应用为单位的产品界面编排效果。

进一步地，所述界面编排模块包括：搭建基础设施层面、编排子模块和渲染子模块，其中，

所述搭建基础设施层面包括搭建协议、视觉规范、应用框架、组件中心和模板中心；

所述编排子模块包括拖拽编排区域和可视化属性面板，拖拽编排区域用于所述产品界面的拼装，可视化属性面板用于配置拼装所述产品界面的各组件的属性、样式、动作和交互备注；

所述渲染子模块，用于提供渲染引擎，将拼装完成的所述产品界面和对应的主题及框架相结合，并呈现结合后的产品界面效果。

进一步地，所述数据源管理模块包括：页面静态数据管理子模块和数据库关联子模块，其中，

所述页面静态数据管理子模块，用于管理页面级别公共数据，所述页面级别公共数据为静态模拟数据；

所述数据库关联子模块，用于管理项目级别数据，所述项目级别数据为所述项目对应数据库的真实字段。

进一步地，所述导出项目源代码子系统包括：前端基础工程类型模块、菜单及文件结构生成模块、组件页面源码生成模块和图片导出模块，其中，

所述前端基础工程类型模块，用于根据用户所选工程类型生成对应的前端基础框架源码；

所述菜单及文件结构生成模块，用于生成页面文件和公共组件文件；

所述组件页面源码生成模块，用于根据产品编排成果生成符合规范的前端代码；

所述图片导出模块，用于遍历所述应用下的页面和组件，将所述应用引用的图片导出至产品图片目录。

进一步地，所述版本管控子系统包括：设计管控模块、受控管理模块和产品管控模块，其中，

所述设计管控模块，用于管控产品设计区，将所述产品设计区的成果以应用为单位发送到产品受控区；

所述受控管理模块，用于管控产品受控区，保存阶段性产品设计成果；

所述产品管控模块，用于发布阶段性产品设计成果。

本发明提供的所见即所得的低代码软件界面设计开发系统，通过建立一个集协同管理、界面设计、界面开发为一体的所见即所得的低代码软件界面设计开发系统，把传统软件开发过程中业务原型设计、UI设计、前端开发三个环节合并成一个界面编排环节，让需求成果传递自动化、界面拖拽式可视化编排，提升开发效率和项目用户体验。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是现有技术中软件开发流程示意图；

图2是本发明提供的所见即所得的低代码软件界面设计开发系统的软件开发流程示意图；

图3是本发明提供的所见即所得的低代码软件界面设计开发系统的结构示意图；

图4是本发明提供的项目管理子系统的结构示意图；

图5是本发明提供的项目协同权限管控子系统的结构示意图；

图6是本发明提供的界面编排子系统的结构示意图；

图7是本发明提供的导出项目源代码子系统的结构示意图；

图8是本发明提供的版本管控子系统的结构示意图；

图9是本发明提供的编排工具操作流程示意图；

图10是本发明提供的动态表单配置对应的订单管理流程示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

在传统的软件开发模式中，将软件开发流程分为：需求设计、业务原型设计、UI设计、前端开发、后端开发、联调测试、发布上线等环节，前一个环节的输出(成果物、说明文档、规范)是后一个环节的输入，环环相扣。

图1为现有技术中软件开发流程示意图，如图1所示，传统软件开发流程包括：

S1-1：需求设计输出需求说明书；

S1-2：业务原型设计根据需求设计输出成果开展业务原型设计输出产品说明书、产品界面原型、业务模型说明书等；

S1-3：UI设计根据业务原型设计成果开展UI设计输出UI效果图、UI规范、UI切图等；

S1-4：前端开发根据业务原型设计成果、UI设计成果、后端开发成果开展前端开发输出产品前端程序；

S1-5：后端开发根据业务原型设计成果、UI设计成果、前端开发成果开展后端开发输出后端程序、接口、接口说明书、数模、数模说明书等；

S1-6：测试根据上述所有输出成果开展测试输出测试报告；

S1-7：经过以上环节多次迭代测试无误后发布上线。

在传统的软件开发模式下，整体的研发环节多、流程长、来回反复，导致多人协作管控困难、整体研发效率低下；同时存在着需求、设计成果走样，开发成果失真，研发成果用户体验较差等问题。

为了解决上述问题，本发明提供一种所见即所得的低代码软件界面设计开发系统，如图2所示，本发明把传统软件开发过程中业务原型设计、UI设计、前端开发三个环节合并成一个界面编排环节，并设计出一种所见即所得的低代码软件界面设计开发系统。

如图3所示，所见即所得的低代码软件界面设计开发系统包括：项目管理子系统100、项目协同权限管控子系统200、界面编排子系统300、导出项目源代码子系统400和版本管控子系统500，其中，

所述项目管理子系统100，用于产品的项目、领域和应用的创建、编辑和删除；

所述项目协同权限管控子系统200，用于分配所述项目的协同人员以及对所述项目、领域和应用的权限进行管控；

所述界面编排子系统300，用于编排生成产品界面并提供产品界面编排效果的预览；

所述导出项目源代码子系统400，用于根据所述编排生成的产品界面生成对应的代码，并将所述代码和所述项目包含的图片依据项目工程类型导出到源码压缩包；

所述版本管控子系统500，用于管控所述产品的版本发布。

本发明实施例，项目协同权限管控子系统200将项目的协同人员分为四类，分别为超级管理员、管理员、编辑者以及查看者。超级管理员拥有项目的最高权限；管理员拥有项目的编辑权限和成员管理权限；编辑者只拥有项目编辑权限，一般分配给设计和开发人员；查看者为只读权限，拥有项目所属领域及应用的预览权限。

界面编排子系统300提供一套拖拽式可视化界面编排工具，工具集成了软件开发所需的组件，包含布局类、表单类、图表类、地图类、卡片类等多种组件。用户通过拖拽组件拼装出产品界面，并且可针对各个组件进行属性配置、样式配置和动作配置，动作配置即打开关闭弹窗、打开页面、执行事件等。

需要说明的是，可视化界面编排工具提供软件开发所需各种组件的上传和管理功能。

需要说明的是，可视化界面编排工具提供各业务类型常用模板作为官方模板，用户也可以在使用可视化界面编排工具进行界面编排的过程中，将用户创建的界面保存为自定义模板。

导出项目源代码子系统400根据编排生成的产品界面生成对应的代码，并将代码和项目包含的图片一键导出VUE源码项目工程包，工程包支持后续个性化开发，项目源码符合前端开发规范。

版本管控子系统500用于管控产品的版本发布，解决多版本迭代开发问题，使需求成果得以自动传递，减少前端开发的人力成本。

本发明提供的所见即所得的低代码软件界面设计开发系统，通过建立一个集协同管理、界面设计、界面开发为一体的所见即所得的低代码软件界面设计开发系统，把传统软件开发过程中业务原型设计、UI设计、前端开发三个环节合并成一个界面编排环节，让需求成果传递自动化、界面拖拽式可视化编排，提升开发效率和项目用户体验。

进一步地，所述项目下包括多个领域，所述领域下包括多个应用，所述应用下包括多个页面。

本发明实施例，在获取到需求说明书后，由项目负责人创建项目，并将项目级别权限分配给各小组负责人，小组负责人在项目根节点下创建领域及子领域，并将领域级别权限分配给各小组成员，小组成员在所属领域下创建应用，小组成员在应用下创建需要的页面。

进一步地，如图4所示，所述项目管理子系统包括：项目管理模块101、领域管理模块102和应用管理模块103，其中，

所述项目管理模块101，用于项目的创建、编辑、复制和删除，项目的分类管理和项目下所属应用及项目协同人员清单的导出；

所述领域管理模块102，用于对项目下所属领域进行增删改查；

所述应用管理模块103，用于应用的创建、复制、编辑和删除，应用转移、应用操作日志查询、应用分享以及前端工程的导出。

本发明实施例，项目管理模块101中项目的复制功能，支持用户选择是否要复制项目的协同人员权限，用户选择否，则复制生成的新项目只有当前操作人这一个超级管理员。

项目管理模块101中项目分类管理支持用户新建项目分组，用户可以将项目批量添加至对应分组，便于管理和查看。

需要说明的是，在领域管理模块102中，当一个项目创建完成时，可视化界面编排工具会自动创建一个与项目同名的根领域节点，根领域节点不支持编辑和删除，除根领域节点外，其他子领域是非必须的，若项目体量较小，可不创建领域子节点，直接在根领域节点下创建应用。

进一步地，如图5所示，所述项目协同权限管控子系统包括：人员协同模块201和权限管控模块202，其中，

所述人员协同模块201，用于管理并分配项目、领域和应用的协同人员，以及编排锁定所述应用的页面及公共组件；

所述权限管控模块202，用于管控所述协同人员的级别权限。

本发明实施例，人员协同模块管理201并分配协同人员是在新建项目、领域或应用完成后，点击界面上“协同”按钮，即可为当前项分配协同成员。分配成员时支持按照当前用户所属组织架构进行批量管理，也可根据用户ID进行查询，添加协作权限。

人员协同模块201的编排锁定功能，是为了解决多人同时编排同一个页面或组件，产生的编排成果相互覆盖的问题，因此本发明设定了一个页面在同一时间只能由一个成员进行拖拽编排，当其中一个项目成员进入某页面进行编排时，会将当前页面的编排权限锁定，其他项目成员在访问时编排入口置灰，并提示锁定成员名称，当该成员退出页面编排时，重置锁定状态。

权限管控模块202对协同人员的级别权限进行管控，权限管理模块从用户身份的维度来进行权限的设置，用户身份分为四类：超级管理员、管理员、编辑者、查看者，不同的用户身份分配不同的级别权限。

需要说明的是，权限管理模块202也可以从项目、领域、应用权限身份继承的维度来进行权限的设置，子级会继承来自父级的权限，如果对于不同级别都进行了赋权，取当前级别下的最大权限。例如用户A同时拥有项目的编辑者权限，和所属领域的查看者权限，那么该用户在领域级别的最终权限计算结果为编辑者权限。

需要说明的是，权限管理模块202可以根据不同的需求对协同人员的级别权限进行设置，本发明在此不作具体限定。

进一步地，所述级别权限包括以下至少一项：项目级别权限、领域级别权限和应用级别权限。

本发明实施例，将协同人员的级别权限分为项目级别权限、领域级别权限和应用级别权限，协同人员分为超级管理员、管理员、编辑者和查看者。

超级管理员拥有项目级别权限、领域级别权限和应用级别权限中项目、领域和应用的创建和管理权限。

管理员拥有项目级别权限、领域级别权限和应用级别权限中项目、领域和应用的编辑权限和成员管理权限。

编辑者对于项目级别权限，拥有编辑项目基本信息的权限，对于领域级别权限，拥有创建并编辑领域信息、创建并管理子领域和创建应用的权限，对于应用级别权限，拥有修改应用基本信息、应用导出和分享、创建应用分组、创建应用的页面，创建应用的公共组件和产品界面搭建的权限；

查看者只拥有应用级别权限中预览产品界面成果及备注信息的权限。

进一步地，如图6所示，所述界面编排子系统包括：页面管理模块301、界面编排模块302、公共组件模块303、数据源管理模块304、事件模块305、预览模块306和分享模块307，其中，

所述页面管理模块301，用于管理应用下的分组及页面，在项目预览或导出的情况下，根据用户配置生成对应的菜单结构；

所述界面编排模块302，用于提供拖拽式可视化界面编排工具，所述编排工具集成了软件开发所需的组件和模板；

所述公共组件模块303，用于管理项目下的公共组件和公共弹窗；

所述数据源管理模块304，用于管理页面静态数据和数据库关联；

所述事件模块305，用于对组件进行事件关联；

所述预览模块306，用于预览应用的编排效果和公共组件的效果；

所述分享模块307，用于展示以应用为单位的产品界面编排效果。

本发明实施例，页面管理模块301支持配置页面的中英文名称、图标等，支持自由拖拽排序功能。

界面编排模块302提供拖拽式可视化界面编排工具，编排工具集成了软件开发所需的组件和模板，组件包含布局类、表格类、表单类、图表类、地图类、卡片类、标签类等多种组件，用户通过拖拽组件和模板拼装出产品界面，并且可针对各个组件进行属性、样式、动作配置。

公共组件模块303用于管理项目下的公共组件和公共弹窗，公共组件在项目下唯一，可以被项目下所有应用中的页面及组件调用，一旦修改了公共组件，所有引用该组件的位置均会同步当前修改，同时为了便于管控，本系统提供了公共组件被引用位置查询功能，用户可通过该功能查询所要编辑的公共组件被用于哪些页面，以免对其他页面的展示效果带来可能的影响。

事件模块305用于对组件进行事件关联，目前支持事件关联的组件有按钮、字体图标、树形组件、标签、下拉菜单按钮、表格、链接本、表单输入框等，支持打开关闭弹窗、打开页面、执行事件等操作。

预览模块306用于产品界面编排效果的预览，分为应用的预览和公共组件的预览两种情况，应用预览为预览完整应用，包含用户所选择的框架及主题等，在预览界面用户可以进行切换主题、切换备注显示隐藏效果等操作，而公共组件的预览为单一组件效果的查看。

分享模块307用于展示以应用为单位的产品界面编排效果，打开分享功能后，会生成对应的一串访问链接和密码，将它发送给对应用户，该用户即可在非登录状态下进行查看应用的界面编排效果。

进一步地，所述界面编排模块302包括：搭建基础设施层面、编排子模块和渲染子模块，其中，

所述搭建基础设施层面包括搭建协议、视觉规范、组件中心和模板中心；

所述编排子模块包括拖拽编排区域和可视化属性面板，拖拽编排区域用于所述产品界面的拼装，可视化属性面板用于配置拼装所述产品界面的各组件的属性、样式、动作和交互备注；

所述渲染子模块，用于提供渲染引擎，将拼装完成的所述产品界面和对应的主题及框架相结合，并呈现结合后的产品界面效果。

本发明实施例，搭建基础设施层面是实现可视化界面编排的基础子模块，包括搭建协议、视觉规范、组件中心和模板中心等基础能力，通过搭建协议，将组件和模板转化为一个个标准化的JSON Schema数据，以备后续拖拽使用。

编排子模块和渲染子模块是界面编排的核心子模块，用户可通过可视化属性面板控件来配置用于拼装界面的各组件的属性、样式，配置完成后，由界面渲染引擎将用户拼装的产品界面和对应的主题及框架相结合，最终完成界面效果的呈现。

进一步地，所述数据源管理模块包括：页面静态数据管理子模块和数据库关联子模块，其中，

所述页面静态数据管理子模块，用于管理页面级别公共数据，所述页面级别公共数据为静态模拟数据；

所述数据库关联子模块，用于管理项目级别数据，所述项目级别数据为所述项目对应数据库的真实字段。

本发明实施例，数据源管理模块分为页面静态数据管理及数据库关联两个子模块，页面静态数据管理子模块用于管理页面级别的公共数据，可被页面及页面弹窗中的任一组件关联。

数据库关联子模块用于管理项目级别的数据，支持MySQL和Oracle两种数据库类型。关联入口位于项目列表，用于填写数据库IP、端口、表空间、对应用户信息以及进行数据库连接，连接成功后可在页面编排阶段关联表格表单对应的表字段。

进一步地，如图8所示，所述导出项目源代码子系统包括：前端基础工程类型模块401、菜单及文件结构生成模块402、组件页面源码生成模块403和图片导出模块404，其中，

所述前端基础工程类型模块401，用于根据用户所选工程类型生成对应的前端基础框架源码；

所述菜单及文件结构生成模块402，用于生成页面文件和公共组件文件；

所述组件页面源码生成模块403，用于根据产品编排成果生成符合规范的前端代码；

所述图片导出模块404，用于遍历所述应用下的页面和组件，将所述应用引用的图片导出至产品图片目录。

本发明实施例，前端基础工程类型模块401支持AMD类型工程导出和脚手架类型工程导出，二者均基于Vue框架。

菜单及文件结构生成模块402包括页面文件生成子模块和公共组件文件生成子模块，页面文件生成子模块根据用户所建分组及页面结构，生成应用对应的菜单JSON数据以及文件目录结构，公共组件文件生成子模块查询当前应用下所属的公共组件，以及该应用中引用的其他应用下的公共组件，按需导出至公共组件统一目录。

进一步地，如图8所示，所述版本管控子系统包括：设计管控模块501、受控管理模块502和产品管控模块503，其中，

所述设计管控模块501，用于管控产品设计区，将所述产品设计区的成果以应用为单位发送到产品受控区；

所述受控管理模块502，用于管控产品受控区，保存阶段性产品设计成果；

所述产品管控模块503，用于发布阶段性产品设计成果。

本发明实施例，设计管控模块501支持用户以领域为单位进行应用的批量版本管控，产品设计区为主要编排区域，产品设计人员在此区域进行最新版本需求的可视化编排工作。

受控管理模块502支持将当前受控区成果以应用为单位发送到产品区变成待发布版本，受控区版本为阶段性设计成果的存档，不受设计区迭代影响，因此在版本迭代过程中，设计人员进行下一阶段的产品界面编排时，开发和测试人员可通过对应受控版本查看界面编排成果。主受控版本不支持修改，若当前受控版本需要进行需求调整，可以从当前受控版本新建子受控进行界面编排调整。

产品管控模块503记录项目各个里程碑阶段的项目发布成果，在微应用开发模式下，一个项目会包含多个子应用，由于不同子应用迭代周期存在差异，因此需要进行项目版本的统一管控，即产品管控模块，发布项目版本时，会将项目下所有应用受控区的待发布版本作为当前项目对应版本进行发布，若应用不存在待发布版本，则发布该应用最新受控区版本。

本发明实施例，新建应用时可以选择对应主题，适配符合UI设计规范的通用组件样式，编排完成的界面效果及为实际开发效果，所见即所得，确保界面高保真还原。通过降低前端界面开发门槛，由设计人员直接在编排工具中进行界面编排，将传统开发过程中的“原型-UI-开发”这一流程精简为一个编排环节，因此，交付需求方确认界面成果时，即为最终的界面成果，无需进行原型、UI图、实际效果的各环节反复确认，减少工作环节，提升开发效率。

本发明另一实施例，如图9所示，包括：

S4-1、项目管理：需求设计输出需求说明书后，进入可视化界面编排环节。由项目负责人创建项目，配置项目基本信息及数据库关联，并将项目级协同权限分配给各小组负责人。

S4-2、领域管理：由各小组负责人在项目根节点下创建各自负责的领域及子领域，分配领域协同成员权限。

S4-3、应用管理：由小组成员在所属领域下新建应用，配置当前应用的名称、框架、主题以及适配的最小分辨率等，创建完成后，点击应用列表中协同按钮为该应用配置所属成员权限，进行多人协同开发，点击编排按钮进入应用编排环节。

S4-4、页面管理：应用的菜单结构通过页面管理模块进行配置。菜单结构主要分为两种类型：普通页面和分组，分组相当于页面的父级菜单。列表中的页面和分组支持按照所需目录结构进行排序。

S4-5、公共组件管理：通过公共组件模块，用户可以新建公共组件，公共组件分为公共组件和公共弹窗两种类型。公共组件即为应用开发过程中所存在的公有组件，这些组件可以被多个页面或其他组件所引用。例如在账务管理的多个页面中存在通用的审批模块，则可将当前审批模块定义为一个公共组件，以便于需求迭代过程中审批模块的统一修改。

S4-6、界面编排模块：界面编排模块是界面编排工具的核心模块之一，用户通过拖拽组件拼装出产品界面，并且可针对各个组件进行属性、样式配置、动作配置。界面编排模块包括顶部工具栏、左侧组件栏、内容编排区和组件配置区。

顶部工具栏提供了编排所需的前进后退、清空、操作文档、页面保存、页面版本管理和预览等功能。其中页面版本功能支持记录当前页面的历史版本，进行页面历史版本的回退和查看等操作。

左侧组件栏提供了软件开发所需的组件和模板，用户通过拖拽组件和模板拼装出所需产品界面。除组件和模板外，左侧栏还提供了页面全局数据源的配置。

内容编排区为界面编排成果拖拽拼装及展示区域，用于实时展示界面效果，用户可在编排区域选中某一特定组件进行具体的属性及样式配置。编排区顶部展示了当前选中组件在页面中的层级，支持通过层级便捷选中任意一级父组件。

右侧组件配置区主要提供四个功能：属性配置、样式配置、动作配置和组件备注管理。属性配置指配置组件prop属性，控制组件内容展示。样式配置支持常见的css样式设置，包括但不限于元素布局方式、内外边距、元素定位、边框、圆角、背景及字体样式等。如果提供的可视化配置无法满足样式需求，也支持通过样式代码进行自定义样式配置。动作配置支持配置动态表单和元素的交互事件，内置的交互事件有打开关闭弹窗、跳转页面、执行事件等操作。

动态表单指的是表单在不同状态下展示不同的界面效果。例如，如图10所示，在一个订单管理流程中，若订单状态为进行中，表单仅显示订单开始时间；若订单状态为已完成，则表单同时显示订单的开始时间及结束时间根据编排工具提供的动态表单功能，首先需要选中订单状态组件设定为动态表单条件，而后找到目标组件“结束时间”控件，为当前组件设置动态显示条件，当状态为已完成时展示，其他情况隐藏，预览即可看到实际动态表单效果。组件备注管理支持添加组件对应的产品备注，包括业务备注、交互备注及数模备注。预览时带有备注的组件会在组件左上方显示一个数字角标，鼠标移动至角标位置显示备注详情。

S4-7、编排效果预览：界面效果预览分为公共组件预览和应用的预览。产品界面编排完成后，可直接点击右上方预览按钮查看当前页面，预览效果集成了用户所选主题和框架，可在菜单中切换查看其他页面。公共组件预览仅预览当前公共组件内容，不包含应用框架。除预览功能之外，本发明实施例还提供分享功能，分享功能支持未登录用户通过链接地址和访问密码查看开放分享的应用内容，分享多用于界面成果确认环节。

S4-8、源码导出：点击应用列表中导出按钮可以导出当前应用的前端源码，支持AMD类型工程导出和脚手架类型工程导出，二者均基于Vue框架，导出源码压缩包内包含了用户所建的页面、公共组件、图片、主题和所选框架，其中页面按照菜单目录导出至views文件夹中，公共组件导出至library文件夹中，图片和主题等文件导出至assets文件夹。

S4-9、版本管控：项目开发过程中每个时间节点会有对应的迭代版本，需要保存每个时间节点的设计成果，以便后期核查或者在必要情况下进行版本回退，在本发明实施例中，版本管控涉及了项目、领域、子领域以及应用，用户在完成应用的某一阶段设计之后，点击应用列表中“发到受控区”按钮，可将该应用发布到受控区变成受控版本，为方便操作，也可以对于整个领域/子领域进行统一版本管理。进行某一里程碑项目成果发布时，可选择所需受控版本点击“发布标记”将当前版本标记为待发布状态。在新增项目版本即进行产品管控时，会自动将待发布状态应用作为当前项目版本进行发布，若没有待发布标记，则会发布应用的最新版本。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种所见即所得的低代码软件界面设计开发系统，其特征在于，包括：项目管理子系统、项目协同权限管控子系统、界面编排子系统、导出项目源代码子系统和版本管控子系统，其中，

所述项目管理子系统，用于产品的项目、领域和应用的创建、编辑和删除；

所述项目协同权限管控子系统，用于分配所述项目的协同人员以及对所述项目、领域和应用的权限进行管控；

所述界面编排子系统，用于编排生成产品界面并提供产品界面编排效果的预览；

所述导出项目源代码子系统，用于根据所述编排生成的产品界面生成对应的代码，并将所述代码和所述项目包含的图片依据项目工程类型导出到源码压缩包；

所述版本管控子系统，用于管控所述产品的版本发布。

2.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述项目下包括多个领域，所述领域下包括多个应用，所述应用下包括多个页面。

3.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述项目管理子系统包括：项目管理模块、领域管理模块和应用管理模块，其中，

所述项目管理模块，用于项目的创建、编辑、复制和删除，项目的分类管理和项目下所属应用及项目协同人员清单的导出；

所述领域管理模块，用于对项目下所属领域进行增删改查；

所述应用管理模块，用于应用的创建、复制、编辑和删除，应用转移、应用操作日志查询、应用分享以及前端工程的导出。

4.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述项目协同权限管控子系统包括：人员协同模块和权限管控模块，其中，

所述人员协同模块，用于管理并分配项目、领域和应用的协同人员，以及编排锁定所述应用的页面及公共组件；

所述权限管控模块，用于管控所述协同人员的级别权限。

5.根据权利要求4所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述级别权限包括以下至少一项：项目级别权限、领域级别权限和应用级别权限。

6.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述界面编排子系统包括：页面管理模块、界面编排模块、公共组件模块、数据源管理模块、事件模块、预览模块和分享模块，其中，

所述页面管理模块，用于管理应用下的分组及页面，在项目预览或导出的情况下，根据用户配置生成对应的菜单结构；

所述界面编排模块，用于提供拖拽式可视化界面编排工具，所述编排工具集成了软件开发所需的组件和模板；

所述公共组件模块，用于管理项目下的公共组件和公共弹窗；

所述数据源管理模块，用于管理页面静态数据和数据库关联；

所述事件模块，用于对组件进行事件关联；

所述预览模块，用于预览应用的编排效果和公共组件的效果；

所述分享模块，用于展示以应用为单位的产品界面编排效果。

7.根据权利要求6所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述界面编排模块包括：搭建基础设施层面、编排子模块和渲染子模块，其中，

所述搭建基础设施层面包括搭建协议、视觉规范、应用框架、组件中心和模板中心；

所述编排子模块包括拖拽编排区域和可视化属性面板，拖拽编排区域用于所述产品界面的拼装，可视化属性面板用于配置拼装所述产品界面的各组件的属性、样式、动作和交互备注；

所述渲染子模块，用于提供渲染引擎，将拼装完成的所述产品界面和对应的主题及框架相结合，并呈现结合后的产品界面效果。

8.根据权利要求6所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述数据源管理模块包括：页面静态数据管理子模块和数据库关联子模块，其中，

所述页面静态数据管理子模块，用于管理页面级别公共数据，所述页面级别公共数据为静态模拟数据；

所述数据库关联子模块，用于管理项目级别数据，所述项目级别数据为所述项目对应数据库的真实字段。

9.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述导出项目源代码子系统包括：前端基础工程类型模块、菜单及文件结构生成模块、组件页面源码生成模块和图片导出模块，其中，

所述前端基础工程类型模块，用于根据用户所选工程类型生成对应的前端基础框架源码；

所述菜单及文件结构生成模块，用于生成页面文件和公共组件文件；

所述组件页面源码生成模块，用于根据产品编排成果生成符合规范的前端代码；

所述图片导出模块，用于遍历所述应用下的页面和组件，将所述应用引用的图片导出至产品图片目录。

10.根据权利要求1所述的所见即所得的低代码软件界面设计开发系统，其特征在于，所述版本管控子系统包括：设计管控模块、受控管理模块和产品管控模块，其中，

所述设计管控模块，用于管控产品设计区，将所述产品设计区的成果以应用为单位发送到产品受控区；

所述受控管理模块，用于管控产品受控区，保存阶段性产品设计成果；

所述产品管控模块，用于发布阶段性产品设计成果。

Images