A visual low-code platform

Abstract

This invention relates to the field of system development technology, and more particularly to a visual low-code platform. A visual low-code platform includes a menu function area, a display area, a function configuration area, and a global configuration bar at the top, all arranged in columns. The platform has a built-in drag-and-drop library for dragging and dropping projects in the display area. It also includes a built-in code generation module and a prototype generation module. The code generation module has preset code generation rules that convert configured data into Vue component code output. Furthermore, the platform has a built-in html2canvas screenshot component that automatically captures content displayed in the display area, converts it into a canvas image, stores the generated image data in the background, and opens the prototype image in a new window when the user needs to generate a prototype. This solves the problems of existing low-code platforms having chaotic UI designs, limited functionality that makes them unusable for non-professionals due to technical barriers, and low utilization rates for professionals who can only implement basic functions.

Description

Technical Field

[0001] This invention relates to the field of system development technology, and in particular to a visual low-code platform. Background Technology

[0002] Currently, most low-code platforms on the market are primarily used for backend SQL statements and limited frontend functionalities. Developers mainly define data tables, field relationships (backend SQL), and simple CRUD pages through configuration (often in JSON format). They excel at quickly building CRUD applications based on forms and tables, but their capabilities for complex frontend interactions, custom components, and fine-grained state management are weak. Many low-code development platforms are self-contained, and when deep integration with existing enterprise user systems, permission centers, approval workflows, messaging platforms, ERP systems, etc., the standard connectors provided by the platforms are often insufficient.

[0003] Moreover, there is still a high barrier to entry when using the platform, especially when configuring real business logic and data association. The interface is full of technical jargon, making it difficult for non-professionals to independently build valuable applications. Professionals, on the other hand, are slow to design due to the messy interface and UI design on these platforms, and it is difficult to meet their needs. As a result, the platform has a technical barrier that makes it difficult for non-professionals to use, while professionals find the code simple and are unwilling to use it, thus lacking practicality. Summary of the Invention

[0004] In view of this, the present invention provides a visual low-code platform to solve the problems of chaotic UI design and simple functions of existing low-code platforms, which make them unusable for non-professionals due to their technical barriers and have low utilization rates for professionals who can only implement simple functions.

[0005] A visual low-code platform includes a menu function area, a display area, a function configuration area, and a global configuration bar at the top, all divided into columns. The menu function area, function configuration area, and global configuration bar are used to configure parameters and display the configuration results in the display area. The platform has a built-in drag-and-drop library for dragging and dropping items within the display area. The platform also includes a built-in code generation module and a prototype generation module. The code generation module has preset code generation rules that convert the configured data into complete Vue component code that conforms to the Vue framework specification. Furthermore, the platform includes an html2canvas screenshot component that automatically captures the content displayed in the display area, converts it into a canvas image, stores the generated image data in the backend, and opens the prototype image in a new window when the user needs to generate a prototype.

[0006] Furthermore, the platform also includes a pre-defined template export module to serialize the current configuration data into JSON format and generate a downloadable file.

[0007] Furthermore, the platform also includes a pre-installed template import module to receive JSON files imported by users, parse the file content, and populate the platform with the configuration data contained in the JSON file.

[0008] Furthermore, the preset code generation rules include the generateCodeJMS and generateCodeYL functions.

[0009] Furthermore, when generating the prototype, the menu function area and function configuration area on both sides of the display area are automatically hidden.

[0010] Furthermore, the modules share data through a provide / inject mechanism.

[0011] Furthermore, when the prototype is opened in a new window, the image data of the generated prototype is temporarily stored in sessionStorage.

[0012] Furthermore, when a project is dragged and dropped in the display area, the corresponding configuration data in the display panel is updated simultaneously.

[0013] Furthermore, the prototype diagram includes a table displaying items in the display panel, a new pop-up window, and an edit pop-up window.

[0014] The beneficial effects of the visual low-code platform in this invention are as follows: The visual low-code platform facilitates efficient interface organization through a multi-column menu area, display area, function configuration area, and a global configuration bar at the top. Configured parameter data can be directly displayed on the display bar, resulting in high visualization and improving the connection between basic code and output presentation. It is convenient for non-professionals to use. Furthermore, the display area allows for drag-and-drop functionality, simplifying operations. A pre-set code generation module easily converts configured data into Vue component code output. Since Vue code can be directly compiled, professionals can also generate usable code through this platform, reducing repetitive compilation of simple code. Additionally, the platform includes a built-in html2canvas screenshot component, converting the content displayed in the display bar into compilable canvas images for quick confirmation and efficient communication. This addresses the problems of chaotic UI design and limited functionality in existing low-code platforms, which make them unusable for non-professionals due to technical barriers, and result in low utilization rates for professionals who can only implement basic functions.

[0015] Furthermore, the export module makes it easy to export the configured project for subsequent compilations.

[0016] Furthermore, the template import module facilitates the sharing of editing results.

[0017] Furthermore, when generating prototype diagrams, the menu function areas and function configuration areas on both sides are automatically hidden to maximize the display area and make the generated prototype diagrams clearer.

[0018] Furthermore, since multiple modules manage each other, the provide / inject mechanism is used to maintain the correspondence between the multiple modules.

[0019] Furthermore, the generated prototype images are temporarily stored and will be automatically cleared from memory when the window is closed to avoid consuming too much storage and resources.

[0020] Furthermore, the ability to update configuration data by dragging and dropping items in the display panel makes it easier for non-professionals to access information.

[0021] Furthermore, the tables, add pop-ups, and edit pop-ups in the prototype not only display the static interface, but also show the state changes when different buttons are clicked. Detailed Implementation

[0022] To make the objectives, technical solutions, and advantages of this invention clearer, the invention is described below through specific embodiments. However, it should be understood that these descriptions are merely exemplary and not intended to limit the scope of the invention. Furthermore, descriptions of well-known structures and technologies are omitted in the following description to avoid unnecessarily obscuring the concept of the invention.

[0023] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0024] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various information, such information should not be limited to these terms and should not be construed as indicating or implying relative importance. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0025] In the following description, suffixes such as "module," "part," or "unit" used to denote elements are used only for the convenience of the description of the invention and have no specific meaning in themselves. Therefore, "module" and "part" can be used interchangeably.

[0026] To better understand the technical solution of the present invention, the present invention will be described in detail below.

[0027] In an embodiment of the low-code platform visualized in this invention: In this embodiment, the visual low-code platform has a menu area, a display area, a function configuration area, and a global configuration bar at the top. The display area is located on either side of the menu area and the function configuration area, with the menu area to the left of the display area. The display area is used to show the configured status, while the menu area, function configuration area, and global configuration bar are used for configuring projects or data.

[0028] The left-hand menu area comprises three main modules: interface configuration items, button configuration items (search condition button configuration, table operation button configuration), and commonly used components. This module allows users to add search conditions, table list fields, and function buttons to the display area by clicking the "Add" option, ensuring the configured content is displayed. The function configuration area on the right allows modification of each function of the search conditions and fields in the table list, such as query permissions and field navigation. Additionally, there is a global configuration bar at the top, primarily for setting global configuration items for the functional interface, such as menu selection functions, prototype generation, and import / export functions.

[0029] The display area, as the main display area of ​​the code platform, provides real-time display functionality through the configuration of the three modules mentioned above. Within this area, users can drag and drop to manipulate search areas and table column fields, and copy and delete to manipulate display area fields, achieving a WYSIWYG (What You See Is What You Get) experience. Compared to existing technologies, this application functionally implements a unified drag-and-drop framework for multiple scenarios, supporting drag-and-drop operations for search areas, table column fields, dynamic column configurations, and more. The configuration area and display area are synchronized in real-time through a data sharing mechanism, allowing for previewing without saving. Structurally, it adopts a data-driven architecture. Drag-and-drop operations modify the sorting attributes of the data model, and the view is automatically updated through a responsive system. It also achieves multi-component data sharing across the left-side menu area, the right-side configuration area, and the central display area. Furthermore, it selects the optimal drag-and-drop library based on different scenarios and dynamically calculates animation parameters to generate personalized animation trajectories, achieving efficient configuration and real-time preview on the low-code platform.

[0030] In other words, by configuring parameters in the menu function area, function configuration area, and global configuration bar, the final product can be displayed in real time in the showcase area, making it easy to understand the final product presentation. Drag and drop operations are also available directly in the showcase area, making adjustments more convenient and allowing even non-professionals to quickly master the process. After completing the settings, a high-quality product prototype is also provided, improving development efficiency while enhancing user experience and interactivity.

[0031] Specifically, the platform has a built-in code generation module. By configuring the configuration in the menu area, function configuration area, and global configuration bar, this module can convert the configured data into complete Vue component code that conforms to the Vue framework specification. Specifically, the module's preset code generation rules include the `generateCodeJMS` and `generateCodeYL` functions, which achieve real-time conversion of configuration objects to Vue code, supporting complex conditional judgments and logical mappings. It automatically generates corresponding Vue component code and event handling logic based on the configuration information. Complete serialization and deserialization of configuration data are achieved through `stringify` and `parse`. Since the exported Vue file is standard, editable source code, developers can directly perform secondary development and iterations based on the exported code, achieving true "code controllability"; forming a complete development iteration loop, significantly improving development efficiency; the generated code follows enterprise-level coding standards and can be directly used in production environments; it can be used within low-code platforms or exported for independent deployment. The code is indistinguishable from manually written code, achieving rapid development and rapid use. When there are iterative needs later, the functional code can be quickly imported to complete iterative development.

[0032] Furthermore, to facilitate rapid confirmation and improve communication efficiency, a prototype generation component is included. Specifically, the platform incorporates an html2canvas screenshot component that receives user commands to generate prototypes and performs the generation process. During prototype generation, the program automatically triggers the hiding of the functional areas on both sides through state management (Vuex), and automatically restores their display after the prototype is captured. This ensures that the generated prototype only contains the core display area content, unaffected by the editing toolbar. Using html2canvas technology, interface elements such as tables, add pop-ups, and edit pop-ups in the central display area are converted into canvas images, and the generated image data is stored in sessionStorage. These images are then opened and displayed in a new window, providing a visual prototype output of the functional interfaces, supporting cross-page access and subsequent deployment. An asynchronous control flow mechanism ensures the sequential execution and integrity of the screenshot operation; a dynamic height calculation algorithm automatically identifies and adjusts the display height of components such as modals, guaranteeing the integrity and accuracy of the prototype. This setup bridges the communication gap between the IT and product teams, allowing both to address practical issues affecting functionality. Later stages of development can utilize this prototype for deployment, thereby improving work efficiency and enabling the rapid launch and iteration of new ideas.

[0033] The aforementioned modules achieve data sharing through a provide / inject mechanism, ensuring real-time synchronization between the configuration and display areas. Drag-and-drop operations automatically update configuration data, and the code generation module reflects the latest configuration status in real time, thus realizing an integrated workflow for configuration, preview, and export. Compared with existing technologies, this application directly generates runnable code from configuration data using a built-in code generation module, indistinguishable from manually written code, eliminating the need for manual secondary development. The template import / export module enables rapid saving and reuse of configuration data, improving development efficiency. The prototype generation module automatically generates screenshots of the functional interface, eliminating the need for manual screenshot tools and simplifying the implementation process.

[0034] It should be understood that the described embodiments are merely some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without inventive effort are within the scope of protection of the present invention.

Claims

1. A visual low-code platform, characterized in that: The platform includes a menu area, display area, function configuration area, and a global configuration bar at the top, all divided into columns. The menu area, function configuration area, and global configuration bar are used to configure parameters and display the configuration results in the display area. The platform also features a built-in drag-and-drop library for dragging and dropping projects within the display area. Furthermore, it includes a code generation module and a prototype generation module. The code generation module has preset code generation rules that convert the configured data into complete Vue component code that conforms to the Vue framework specification. Finally, the platform includes an html2canvas screenshot component, which automatically captures the content displayed in the display area, converts it into a canvas image, stores the generated image data in the backend, and opens the prototype image in a new window when the user needs to generate a prototype.

2. The visual low-code platform according to claim 1, characterized in that: The platform also includes a template export module to serialize the current configuration data into JSON format and generate a downloadable file.

3. The visual low-code platform according to claim 2, characterized in that: The platform also includes a pre-installed template import module to receive JSON files imported by users, parse the file content, and populate the platform with the configuration data contained in the JSON file.

4. The visual low-code platform according to any one of claims 1-3, characterized in that: The preset code generation rules include the generateCodeJMS and generateCodeYL functions.

5. The visual low-code platform according to any one of claims 1-3, characterized in that: When generating the prototype, the menu and configuration areas on both sides of the display area are automatically hidden.

6. The visual low-code platform according to any one of claims 1-3, characterized in that: Each module achieves data sharing through a provide / inject mechanism.

7. The visual low-code platform according to any one of claims 1-3, characterized in that: When the prototype is opened in a new window, the generated prototype image data is temporarily stored in sessionStorage.

8. The visual low-code platform according to any one of claims 1-3, characterized in that: When a project is dragged and dropped in the display area, the corresponding configuration data in the display panel will be updated simultaneously.

9. The visual low-code platform according to any one of claims 1-3, characterized in that: The prototype diagram includes a table displaying items in the display panel, a new pop-up window, and an edit pop-up window.