User interface generation method and system, electronic equipment and storage medium

Abstract

The invention discloses a user interface generation method and system, electronic equipment and a storage medium, and belongs to the technical field of computers. The user interface generation method comprises the steps that if an interface generation request of a target user is received, a user-defined panel configuration page corresponding to the target user is determined; wherein the user-defined panel configuration page comprises a component selection area and a panel configuration area, the component selection area comprises visual components of a plurality of functional modules, and the panel configuration area is used for placing and adjusting the visual components; executing a corresponding configuration operation on the custom panel configuration page according to an instruction input by the target user; wherein the configuration operation comprises any one or a combination of any more of a component adding operation, a component deleting operation and a component adjusting operation; and after the configuration of the custom panel configuration page is completed, generating a corresponding user interface according to the component layout in the panel configuration area. The efficiency and the flexibility of generating the user interface can be improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a user interface generation method, system, electronic device and storage medium. Background Art

[0002] User Interface (UI) is the medium for interaction and information exchange between machines and users. When customizing and displaying different page contents for different business scenarios of each user, developers need to implement and configure multiple user interfaces, which is a tedious and complicated task. Different business scenarios in a project may contain similar page modules, but different operators have different requirements for the display emphasis or aesthetics of page content. For the development of these scenarios, developers need to spend a lot of energy and time on data processing.

[0003] Therefore, how to improve the efficiency and flexibility of generating a user interface is a technical problem that those skilled in the art currently need to solve. Summary of the invention

[0004] The purpose of the present application is to provide a user interface generation method, system, electronic device and storage medium, which can improve the efficiency and flexibility of generating a user interface.

[0005] In order to solve the above technical problems, the present application provides a method for generating a user interface, comprising:

[0006] If an interface generation request of a target user is received, a custom panel configuration page corresponding to the target user is determined; wherein the custom panel configuration page includes a component selection area and a panel configuration area, the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components;

[0007] Performing corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user; wherein the configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several operations, wherein the component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area;

[0008] After the custom panel configuration page is configured, a corresponding user interface is generated according to the component layout in the panel configuration area.

[0009] Optionally, determining a custom panel configuration page corresponding to the target user includes:

[0010] Determine the current business scenario according to the interface generation request;

[0011] Determine a corresponding visualization component list according to the permission information of the target user and the current business scenario, and generate the component selection area according to the visualization component list;

[0012] Generate a panel configuration area according to the historical configuration record of the target user;

[0013] A custom panel configuration page is generated, which includes the component selection area and the panel configuration area.

[0014] Optionally, generating a panel configuration area according to the historical configuration record of the target user includes:

[0015] Determine whether the historical configuration record of the target user is empty; wherein the historical configuration record is used to store information of the custom panel configuration page configured by the target user;

[0016] If the historical configuration record is not empty, generating the panel configuration area according to the historical configuration record;

[0017] If the historical configuration record is empty, determine whether there is a default panel configuration page for the role to which the target user belongs; if there is a default panel configuration page for the role to which the target user belongs, generate the panel configuration area according to the configuration information of the default panel configuration page; if there is no default panel configuration page for the role to which the target user belongs, generate a blank panel configuration area.

[0018] Optionally, determining a corresponding visualization component list according to the permission information of the target user and the current business scenario includes:

[0019] Obtaining a code value corresponding to the current business scenario from a parameter dictionary;

[0020] Setting the visualization component corresponding to the code value in the component library as an alternative visualization component;

[0021] If the candidate visualization component matches the permission information of the target user, the candidate visualization component is added to the visualization component list.

[0022] Optionally, performing a corresponding configuration operation on the custom panel configuration page according to the instruction input by the target user includes:

[0023] If a component adding instruction input by the target user is received, placing the visual component corresponding to the component adding instruction in the component selection area to the panel configuration area;

[0024] If a component deletion instruction input by the target user is received, deleting the visual component that has been placed in the panel configuration area and corresponds to the component deletion instruction;

[0025] If a component adjustment instruction input by the target user is received, the size and / or position of the visual component placed in the panel configuration area and corresponding to the component adjustment instruction is adjusted.

[0026] Optionally, also include:

[0027] After the custom panel configuration page is configured, the component layout information of the panel configuration area, the current business scenario and the permission information of the target user are stored as a historical configuration record.

[0028] Optionally, before determining the custom panel configuration page corresponding to the target user, the method further includes:

[0029] Generate the functional modules through the front-end technology stack;

[0030] Encapsulating the functional module into the visual component, and configuring routing information for the visual component;

[0031] The resource permission information corresponding to the visualization component is set using the routing information; wherein the resource permission information is information used to determine whether the visualization component is allowed to be used, and the resource permission information includes permission information and / or business scenarios.

[0032] The present application also provides a user interface generation system, the system comprising:

[0033] A configuration page determination module, for determining a custom panel configuration page corresponding to the target user if an interface generation request from the target user is received; wherein the custom panel configuration page includes a component selection area and a panel configuration area, the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components;

[0034] A page configuration module, used to perform corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user; wherein the configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several operations, wherein the component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area;

[0035] The user interface generation module is used to generate a corresponding user interface according to the component layout in the panel configuration area after the configuration of the custom panel configuration page is completed.

[0036] The present application also provides a storage medium on which a computer program is stored, and when the computer program is executed, the steps of the above-mentioned user interface generation method are implemented.

[0037] The present application also provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the above-mentioned user interface generation method when calling the computer program in the memory.

[0038] The present application provides a user interface generation method. After receiving the interface generation request of the target user, the method determines the custom panel configuration page corresponding to the target user, and then performs the corresponding configuration operation on the custom panel configuration page according to the instruction input by the target user. The custom panel configuration page includes a component selection area and a panel configuration area. By performing the configuration operation on the custom panel configuration page, the visual component in the component selection area can be placed in the panel configuration area, the visual component placed in the panel configuration area can be deleted, and the size and / or position of the visual component placed in the panel configuration area can be adjusted. After the configuration of the custom panel configuration page is completed, the present application generates the corresponding user interface according to the component layout in the panel configuration area. In the present application, the user can directly select the required visual component from the component selection area, avoiding the process of manually writing or configuring the component, and greatly improving the speed of generating the user interface. The user can also add, delete and adjust the visual component according to his own needs, realizing the personalized configuration of the user interface. Therefore, the present application can improve the efficiency and flexibility of generating the user interface. The present application also provides a user interface generation system, a storage medium and an electronic device, which have the above-mentioned beneficial effects and are not repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0040] Figure 1 A flowchart of a method for generating a user interface provided in an embodiment of the present application;

[0041] Figure 2 A schematic diagram of a display page of a workbench with thousands of faces for thousands of people provided in an embodiment of the present application;

[0042] Figure 3 A schematic diagram of a configuration page for a workbench with thousands of faces for thousands of people provided in an embodiment of the present application;

[0043] Figure 4 A schematic diagram of a license management page in which a vue component is published as a card provided in an embodiment of the present application;

[0044] Figure 5 A schematic diagram of a role information maintenance page provided in an embodiment of the present application. DETAILED DESCRIPTION

[0045] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0046] See below Figure 1 , Figure 1 A flowchart of a method for generating a user interface provided in an embodiment of the present application.

[0047] Specific steps may include:

[0048] S101: if an interface generation request of a target user is received, determining a custom panel configuration page corresponding to the target user;

[0049] Among them, this embodiment can be applied to an electronic device with a user interface design function, which implements the user interface design function through an application program, and the application program includes a background service and a front-end framework. After the application program receives an interface generation request from a target user, the background service can determine the corresponding custom panel configuration page, and the front-end framework displays the custom panel configuration page and performs configuration operations such as adding, deleting and adjusting components according to the user's input instructions. The background service generates the final user interface based on the results of the configuration operation and stores the user's configuration information.

[0050] The target user may trigger an interface generation request in some way (such as clicking a button or visiting a certain page), and the interface generation request may include identification information of the target user (such as a user name or user identity identifier) ​​so as to determine the custom panel configuration page corresponding to the target user based on the above identification information.

[0051] The custom panel configuration page includes a component selection area and a panel configuration area, wherein the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components. The panel configuration area in the custom panel configuration page corresponding to the target user can be a configured panel configuration area, and the panel configuration area in the custom panel configuration page corresponding to the target user can be a blank panel configuration area.

[0052] S102: performing corresponding configuration operations on the custom panel configuration page according to the instruction input by the target user;

[0053] Among them, the target user can input interactive instructions through the interactive means provided by the interface (such as mouse clicking, dragging, keyboard input, etc.), and this embodiment can call the corresponding event processing function according to the above interactive instructions to perform corresponding configuration operations on the custom panel configuration page.

[0054] The above configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several of the operations. The component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area.

[0055] S103: After the custom panel configuration page is configured, a corresponding user interface is generated according to the component layout in the panel configuration area.

[0056] After the user completes the configuration of the custom panel configuration page, the component layout of the panel configuration area can generate a corresponding configuration record, and the above configuration record includes the identification, coordinates and size of the visual component.

[0057] This embodiment can load the configuration record, create a corresponding component instance according to the identifier in the configuration record, apply the position, size and other attributes in the configuration record to the component instance, render the component instance, and obtain a user interface corresponding to the component layout of the panel configuration area.

[0058] After receiving the interface generation request of the target user, the embodiment determines the custom panel configuration page corresponding to the target user, and then performs corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user. The custom panel configuration page includes a component selection area and a panel configuration area. By performing configuration operations on the custom panel configuration page, the visual components in the component selection area can be placed in the panel configuration area, the visual components placed in the panel configuration area can be deleted, and the size and / or position of the visual components placed in the panel configuration area can be adjusted. After the configuration of the custom panel configuration page is completed, the embodiment generates the corresponding user interface according to the component layout in the panel configuration area. In the embodiment, the user can directly select the desired visual components from the component selection area, avoiding the process of manually writing or configuring components, and greatly improving the speed of generating the user interface. The user can also add, delete and adjust the visual components according to their own needs, realizing the personalized configuration of the user interface. Therefore, the embodiment can improve the efficiency and flexibility of generating the user interface.

[0059] As for Figure 1 Further introduction to the corresponding embodiment, after the custom panel configuration page is configured, the component layout information of the panel configuration area, the current business scenario and the permission information of the target user can also be stored as a historical configuration record, so that after the target user initiates an interface generation request again, the corresponding custom panel configuration page can be determined according to the component layout information, the current business scenario and the permission information of the target user stored in the historical configuration record.

[0060] As for Figure 1 For further description of the corresponding embodiment, S101 may specifically determine the custom panel configuration page in the following manner:

[0061] Step A1: determining the current business scenario according to the interface generation request;

[0062] Among them, this step can parse the interface generation request to obtain the code value of the business scenario, and use the business scenario corresponding to the code value as the current business scenario.

[0063] Step A2: determining a corresponding visualization component list according to the target user's permission information and the current business scenario, and generating the component selection area according to the visualization component list;

[0064] Among them, this step can parse the interface generation request to obtain the identification information of the target user, and query the target user's permission information based on the identification information. The target user's permission information and the current business scenario both have corresponding visualization components. This step can construct a visualization component list based on the visualization components corresponding to the target user's permission information and the current business scenario.

[0065] The visual component list includes multiple visual components that can be placed in the panel configuration area, so the component selection area can be generated according to the visual component list, and the component selection area includes all the visual components in the visual component list.

[0066] Specifically, this embodiment can obtain the code value corresponding to the current business scenario from the parameter dictionary, set the visualization component corresponding to the code value in the component library as the alternative visualization component, determine whether the alternative visualization component matches the permission information of the target user; if the alternative visualization component matches the permission information of the target user, add the alternative visualization component to the visualization component list.

[0067] Step A3: generating a panel configuration area according to the historical configuration record of the target user;

[0068] Among them, if the historical configuration record of the target user is not empty, it means that the historical configuration record stores the information of the custom panel configuration page configured by the user, and the historical configuration record can be directly used to generate the panel configuration area. If the historical configuration record of the target user is empty, it means that the historical configuration record does not store the information of the custom panel configuration page configured by the user, and the default panel configuration page of the role to which the target user belongs can be set as the panel configuration area. If the historical configuration record of the target user is empty, and the role to which the target user belongs does not have a default panel configuration page, a blank panel configuration area is generated.

[0069] Step A4: Generate a custom panel configuration page including the component selection area and the panel configuration area.

[0070] As a further introduction to the above embodiment, generating a panel configuration area according to the historical configuration record of the target user may include the following steps:

[0071] Step B1: Determine whether the historical configuration record of the target user is empty; if the historical configuration record is not empty, proceed to step B2; if the historical configuration record is empty, proceed to step B3.

[0072] The historical configuration record is used to store information about the custom panel configuration page that the target user has configured.

[0073] Step B2: Generate the panel configuration area according to the historical configuration record.

[0074] Step B3: Determine whether there is a default panel configuration page for the role to which the target user belongs; if there is a default panel configuration page for the role to which the target user belongs, proceed to step B4; if there is no default panel configuration page for the role to which the target user belongs, proceed to step B5.

[0075] Step B4: Generate the panel configuration area according to the configuration information of the default panel configuration page.

[0076] Step B5: Generate a blank panel configuration area.

[0077] This embodiment automatically generates a panel configuration area by judging the user's historical configuration record and the role default configuration. If the user has a historical configuration, it is directly applied. If there is no historical configuration, the role default configuration is used or a blank panel is generated, thereby improving the personalization and initialization efficiency of the user interface and enhancing the user experience.

[0078] As for Figure 1 The corresponding embodiment further introduces that the specific manner of performing configuration operations for various instructions input by the target user is as follows:

[0079] If a component adding instruction input by the target user is received, placing the visual component corresponding to the component adding instruction in the component selection area to the panel configuration area;

[0080] If a component deletion instruction input by the target user is received, deleting the visual component that has been placed in the panel configuration area and corresponds to the component deletion instruction;

[0081] If a component adjustment instruction input by the target user is received, the size and / or position of the visual component placed in the panel configuration area and corresponding to the component adjustment instruction is adjusted.

[0082] This embodiment realizes dynamic configuration of the user interface by responding to the user's instructions to add, delete and adjust components. The user can intuitively select, remove and adjust components, which improves the flexibility and efficiency of interface customization and enhances user experience and satisfaction.

[0083] As for Figure 1The corresponding embodiment further introduces that before determining the custom panel configuration page corresponding to the target user, the visualization component can be generated in the following manner: generating the functional module through the front-end technology stack; encapsulating the functional module into the visualization component, and configuring routing information for the visualization component; using the routing information to set the resource permission information corresponding to the visualization component; wherein the resource permission information is information used to determine whether the visualization component is allowed to be used, and the resource permission information includes permission information and / or business scenarios. The permission information in the resource permission information is the user permission allowed to use the visualization component, and the business scenario in the resource permission information is the business scenario allowed to use the visualization component.

[0084] This embodiment generates functional modules through the front-end technology stack and encapsulates them into visual components, configures routing information and resource permission information, and ensures that only users with corresponding permissions and business scenarios can access the components, thereby improving the security, flexibility and user experience of the system.

[0085] The above embodiment can be implemented through the Thousand-faced Workbench Designer for Thousands of People. The process described in the above embodiment is explained below through the Thousand-faced Workbench Designer for Thousands of People in actual application.

[0086] This embodiment provides a designer for developing a thousand-faced workbench for thousands of people, summarizes each function in the system, and summarizes the data scenarios into various small functional modules. In the development stage, only different small functional modules need to be quickly developed. The development of functional modules is completely open and customized, which can support the content display and functional interaction of ordinary page development, and can support more advanced functional development such as various charts and interactions. Each module is configured with adapted business scenarios and user role permissions, and published to the card library. If the user has a thousand-faced demand for thousands of people, the maintenance function of the thousand-faced workbench is opened to the user. If not, the developer can also quickly configure the default display panel for all roles or a certain type of role, replacing the traditional page development. This flexibility allows the page to be quickly iterated and expanded, adapting to more business scenarios and needs, improving development efficiency, and enhancing the usability of the designer. This embodiment can display the thousand-faced workbench for thousands of people in the corresponding business scenario through the panel.

[0087] The Qianren Qianmian Workbench Designer is the core part of the Qianren Qianmian Workbench. When the Qianren Qianmian Workbench is in maintenance mode, by selecting the card in the card library corresponding to the current business scenario, the default width and height are displayed in the panel configuration area. By dragging and dropping the card in the panel configuration area, the size and position of the card can be adjusted. The Qianren Qianmian Workbench Designer consists of two parts: the card library (i.e., the component selection area) and the panel configuration area. The card library is a Vue page that has been released to the outside in the system. It can be registered in the card library as a panel component. When registering, it can control the business scenario corresponding to the card and the card display permissions of certain role users of the card. Users can select the desired card to be displayed in the card library through a certain query rule on the Qianren Qianmian Workbench configuration page, so as to render it in the Qianren Qianmian Workbench. The card selected in the card library will load the corresponding card with the default width and height into the panel configuration area. Users can customize the position and size of the card, as well as remove the card and save the Qianren Qianmian Workbench.

[0088] The front-end of the Qianren Qianmian Workbench Designer uses vue.js as the core framework, vue Router manages the front-end routing, uses the UI library to provide basic components and styles to accelerate development and maintain the consistency of the interface style, uses Webpack (a code compilation tool) as a construction tool, supports ES6+ (ecmascript 6+, a standard of JavaScript language), CSS (Cascading Style Sheets) preprocessors, image and other resource management and optimization; the back-end uses Java as the main development language, Spring Boot (an open source application framework) as the core framework, uses MyBatis (a Java-based persistence layer framework) as the data persistence layer framework, and maps SQL (Structured Query Language) statements through XML (Extensible Markup Language) or annotations to achieve database addition, query, modification, and deletion operations. The Qianren Qianmian Workbench Designer supports multiple databases such as MySQL, Oracle, and DAMO. The above-mentioned vue.js is a progressive JavaScript framework for building user interfaces.

[0089] This embodiment realizes that developers use Vue to develop reusable components (i.e., visual components) according to the needs of various business scenarios as cards and registers them in the corresponding card library of different business scenarios. The card library loads the corresponding card content according to user permissions. After the user logs in, he can view the panel content corresponding to different business scenarios, and can select cards in the workbench of each business scenario and personalize his page layout through intuitive operations such as dragging and dropping.

[0090] The description of permission control in this embodiment is as follows:

[0091] Card permission control is reflected in that, since the resource permission of each card is set to password verification, the card loading can only be queried in the login account of the role or user with the corresponding resource permission configured. Therefore, when the user-defined panel is in the loading component library, only the card with the resource permission of the current user or the role to which it belongs will be loaded, thereby realizing the function of dynamically combining the card library and resource permissions. The administrator account can configure user information, role information and resource permission information. The business components developed by the developer must first configure the corresponding vue routing information on the resource permission page, and select the publishing method as the custom panel. Only then can the component be registered as a business card and stored in the card library. There are multiple roles and different users in the system. Each user may have multiple role identities, and supports configuring different resource permissions for roles or users. In this design, the panel is divided into default panel rendering and card permission control. The default panel supports system administrators to configure certain roles, and allows certain roles to configure the default panel for the current role and all subordinate roles. The default panel rendering rules are as follows: first check whether the current user has a configuration record. If there is a configuration record, the user-configured custom panel will be displayed first; if there is no configuration record, check whether the role to which the current user belongs has a configured default panel. If there is a configuration, the first panel data will be loaded first and rendered to the page; if not, a blank custom panel page will be displayed. This embodiment sets the resource permission information when each card is registered. When the resource permission is set to password verification, the card can only be queried in the login account of the role or user that has the corresponding resource permission configured. Therefore, when the user customizes the panel to load the component library, only the cards for which the current user or the role has the resource permission will be loaded, thereby realizing the dynamic combination of the card library and resource permissions.

[0092] Users with administrator accounts can flexibly configure the corresponding parameter information of the custom panel in the parameter dictionary. In the parameter information, they can independently configure the code values ​​of various business scenarios. When registering a card, the code value can be reflected in the drop-down box option of the business scenario. Users can select different business scenarios as the registration scope of the current card in the card library. When the user card library is loaded, the corresponding card data will be queried according to the permission control and business scenario at the same time. At the same time, developers only need to pass in the code value configured for the corresponding business scenario at the location of calling this product to realize that multiple scenarios of the same user have corresponding custom panel functions.

[0093] When a user enters a page for configuring a business scenario code value, the custom panel of the current user corresponding to the business scenario will be displayed. The rendering rule of the initialization panel is to display the panel configured by the user first. If the user has not configured, the panel of the role to which the user belongs will be rendered. If there is no role, an empty panel will be displayed. There is a configuration button in the upper right corner of the custom panel. Clicking this button will enter the configuration mode of the custom panel. In configuration mode, the card library is displayed on the left, and the editable and draggable card layout area is displayed in the middle area.

[0094] The card library supports the development of various basic or advanced cards and registering them in the card library. Users can select the cards they want to display in the card library according to certain query rules on the custom panel configuration page, and then render them into the custom panel. The card library mainly includes four areas, namely the component search area, the card adjustment area, the classification area and the card selection area.

[0095] Component search area: Enter the name of the component in the input box. Fuzzy search is supported. All components that meet the conditions are matched according to the search results and displayed in the card selection area.

[0096] Card adjustment area: To adapt to the user's screen size or user needs, there are three card display effects, namely "small", "medium" and "large". The default card size is "medium". When the user selects the corresponding button, the card display image size in the card display area will change accordingly.

[0097] Classification area: When developers publish vue components, they can configure certain attributes of the card, including the card type attribute. When each component is published as a card, the custom input type field can be located according to demand or card type. In this way, the cards registered in the card library can be quickly classified by rendering all card types. Cards without a configured type are displayed under all types by default.

[0098] Card selection area: Cards registered to the card library will be displayed in the card selection area. The rendering of each card shows the card thumbnail content configured when the component is published. If no thumbnail is configured, the default image will be displayed. There are two icon buttons in the upper right corner of each card, which are the large image preview button and the selection button of the card. The selection button of the card not rendered in the panel configuration area is gray. Click it to load this card into the panel configuration area, and the button will turn blue. The selected card cannot be selected again.

[0099] The panel configuration area is used to lay out, save and delete the selected cards. For the components that have been selected in the card library, the default width and height can be displayed in the panel configuration area. When the cursor is in the middle area of ​​the card, it is displayed as a moving cursor. At this time, the position of the card can be adjusted by dragging the card; the mouse is displayed as an object resize cursor in the edge area at the lower right corner of the card. At this time, the width and height of the card can be adjusted by dragging the card. The edges of the cards that have been loaded into the panel configuration area will be displayed with blue highlights to facilitate users to confirm the position and spacing of the cards. There will be a block at the top of each card (the card is displayed normally in the panel page) to display the configuration of the card, including the name of the card and the delete mark. Click the delete button to remove the current card from the panel configuration area. There is a save button in the upper right corner of the entire panel configuration area. Click Save to save the Thousand People Thousand Faces Workbench configured by the current user to the database. Visiting the custom page will display the latest configuration of the current user.

[0100] The registration process of the card component is as follows: the vue component written by the developer needs the system administrator to enter the resource permission configuration page and generate a permission for the component in the system through the corresponding route of the vue component. When registering, in order to distinguish whether it is a normal page release or a custom panel release, it is necessary to set "Can be used as a panel" to "Yes". When a custom panel is selected, the custom panel details configuration card will be displayed. At this time, you can configure the component's title visibility, thumbnail, menu type, default card width and height, and card applicable scenarios. The drop-down box content of the card usage scenario is the Chinese name corresponding to the panel business scenario code value configured in the parameter dictionary. At this time, the card will only be loaded in the card library of the corresponding business scenario. After the permission is successfully configured, if the permission is not set to "password verification", the card library of all users' corresponding business scenarios will register the current card. If it is set to "password verification", the current permission needs to be configured for the expected role or user, and the card library of the Thousand People Thousand Faces Workbench corresponding to the business scenario of the user who configured the permission will load the card.

[0101] The value of this solution is that it provides a highly interactive workbench designer that can quickly configure workbench pages for various business scenarios based on the existing designer. By registering and publishing vue page components to the card library, it supports the loading of different product library components for different scenarios. Combined with permission control, the cards in the card library can be loaded according to user role permissions, and the default workbench can be configured.

[0102] The card library of the Qianren Qianmian Workbench Designer can load corresponding cards according to different business scenarios and permission control; Qianren Qianmian Workbench Designer supports configuring the default panel under the role. All users under the role can load the corresponding panel when initializing the panel, and each user can customize their own Qianren Qianmian Workbench, which is very flexible and convenient. Qianren Qianmian Workbench Designer has a complete operation page, and the functions of each module in the page are clear and intuitive, which is easy for users to understand and use. The process of configuring the page is dynamically displayed, the elements interact smoothly and straightforwardly, and the operation is simple and convenient. There are many functional similarities in different business scenarios. Qianren Qianmian Workbench Designer can integrate the similarities into a functional module card, publish the card to the card library in the corresponding business scenario, and realize the rapid construction of the page through configuration. Qianren Qianmian Workbench Designer supports the functional adjustment of existing components, and supports the release and registration of newly developed functional modules in the card library, which can continuously improve the rapid iteration of existing cards in the system and the needs of various business scenarios for new functional cards. For various business scenarios, multiple workbenches for different people may be required. In this case, the workbench designer only needs to add the configuration of the parameter dictionary value and pass in the corresponding parameters when calling the location of the custom component in the new page to switch the workbenches for different business scenarios. When registering a card, adjusting the applicable scenario of the card can support the card library of each business scenario to display different cards. In response to the need for more role panels in the system, the workbench designer supports the configuration of default panels for different roles. Users' functional requirements for different business scenarios can be developed and registered in the component library in the form of component cards, reducing the development cost of developing different pages for different demand pages, and all developed components can be published to the product library with a high reuse rate to meet the needs of agile business development.

[0103] See also Figure 2 , Figure 2 A schematic diagram of a workbench display page for a thousand people with a thousand faces provided in an embodiment of the present application, showing a custom panel display page and function keys for entering a custom panel configuration page.

[0104] See also Figure 3 , Figure 3 This is a schematic diagram of a configuration page of a workbench with thousands of faces provided in an embodiment of the present application, showing a card library (i.e., component selection area) and a panel configuration area. The card library can display all cards (such as cards 1 to 7) in three sizes: small, medium, and large. Cards can be classified according to all, menus, charts, and statistics. Cards 1 to 4 have been placed in the panel configuration area, and there is a "Finish Editing" button in the panel configuration area.

[0105] See also Figure 4 , Figure 4A schematic diagram of a license management page for a vue component published as a card provided in an embodiment of the present application. The license management page can be under the resource management path of the homepage. Other attribute information of the license management page includes can be used as a panel (default value: no), maximized state access address, panel height (1 height unit is about 15px), panel width (total width 48px), display title bar (default value: display), panel type, panel image path, and panel applicable scenarios (such as cockpit). If you select "Can be used as a panel" as "yes", the vue component will be registered as a card. This embodiment can determine the default width and height title of the card when it is loaded from the card library to the configuration panel in the above page. The panel image path can be configured according to the card thumbnail, and the panel applicable scenario is selected according to the business scenario to which the current card belongs. The above px identifies pixels.

[0106] The above-mentioned permission management page may also include: permission URI (Uniform Resource Identifier), supported mobile applications, mobile entry URI, user permission control object, control object type, business object type parameter, business object parameter, whether to audit switch, and verification mode. The permission URI is bound to the route corresponding to the vue component. The verification modes include anonymous access, password verification, and certificate verification. If anonymous access is selected, all users have the permission; if password verification is selected, only the user or role assigned the permission can load the current permission.

[0107] See also Figure 5 , Figure 5 A schematic diagram of a role information maintenance page provided in an embodiment of the present application, the role information maintenance page. The role information maintenance page can be under the path of Homepage-User Management-Role Management. The role information maintenance page includes basic information, role inheritance, role permission list, role permission tree, users under the role, mutually exclusive role maintenance and other display interfaces. In the role permission list, the user's group is xx Bank, and the created role is a member role. The page can also display unassigned permissions and assigned permissions, and users can authorize and revoke authorization through the improvement interface and submit. Figure 5 Figure 5 The permissions involved include permissions 1 to 5. The assigned permissions are bound to the logo of the custom panel.

[0108] This embodiment can also assign licenses to users through the user management details page. The user management details page includes interfaces such as basic information, user role authorization, viewing user permissions, user authorized roles, user newly added permissions, user full-time / part-time organization, and user permission copying. In the user newly added permissions interface, you can add user permission serial number, license name, license type, license scope, validity, and other information.

[0109] In the dictionary category maintenance page, parameter information can be presented in a table format to facilitate configuration of the corresponding code values ​​of the parameter dictionary for the panel business scenario.

[0110] The workbench for thousands of people is flexibly defined. Different role templates are built in the workbench for thousands of people. Users can flexibly define as needed. Users can manage the permissions of cards, and cards support expansion. The workbench for thousands of people has the function of collecting commonly used functions, which can be quickly accessed. The workbench for thousands of people has toolbars such as To-Do, Done, and Completed, as well as various key statistical charts for warnings, notifications, reminders, and other messages.

[0111] This embodiment provides a designer that combines a vue development page for users to visually configure custom pages. The Thousand People Thousand Faces Workbench designer directly faces the developed page to the user, and loads it into the card library through a simple system configuration, so that the user can select the desired card to process the custom page, thereby solving the user's demand for thousands of faces. The present invention is combined with a permission control product, which can control the user to only load the cards under the user's authority when configuring the Thousand People Thousand Faces Workbench when facing the user, and can also support the user under the authority of a certain role to configure the default panel, providing a flexible, scalable and easy-to-manage panel control solution; this embodiment loads the published vue page into the panel in a visual way, and modifies the size and position of the card in the panel by dragging and dropping, ultimately enabling users to flexibly and quickly configure custom pages, better meet the personalized needs of users, and can quickly iterate and update the components in the card library according to new needs, making the selection of personalized cards clearer and more intuitive, and improving the maintainability of business functions.

[0112] A user interface generation system provided in an embodiment of the present application may include:

[0113] A configuration page determination module, for determining a custom panel configuration page corresponding to the target user if an interface generation request from the target user is received; wherein the custom panel configuration page includes a component selection area and a panel configuration area, the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components;

[0114] A page configuration module, used to perform corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user; wherein the configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several operations, wherein the component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area;

[0115] The user interface generation module is used to generate a corresponding user interface according to the component layout in the panel configuration area after the configuration of the custom panel configuration page is completed.

[0116] After receiving the interface generation request of the target user, the embodiment determines the custom panel configuration page corresponding to the target user, and then performs corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user. The custom panel configuration page includes a component selection area and a panel configuration area. By performing configuration operations on the custom panel configuration page, the visual components in the component selection area can be placed in the panel configuration area, the visual components placed in the panel configuration area can be deleted, and the size and / or position of the visual components placed in the panel configuration area can be adjusted. After the configuration of the custom panel configuration page is completed, the embodiment generates the corresponding user interface according to the component layout in the panel configuration area. In the embodiment, the user can directly select the desired visual components from the component selection area, avoiding the process of manually writing or configuring components, and greatly improving the speed of generating the user interface. The user can also add, delete and adjust the visual components according to their own needs, realizing the personalized configuration of the user interface. Therefore, the embodiment can improve the efficiency and flexibility of generating the user interface.

[0117] Furthermore, the process of the configuration page determination module determining the custom panel configuration page corresponding to the target user includes: determining the current business scenario based on the interface generation request; determining the corresponding visual component list based on the target user's permission information and the current business scenario, and generating the component selection area based on the visual component list; generating the panel configuration area based on the target user's historical configuration record; and generating a custom panel configuration page including the component selection area and the panel configuration area.

[0118] Furthermore, the process of the configuration page determination module generating a panel configuration area according to the historical configuration record of the target user includes: determining whether the historical configuration record of the target user is empty; wherein the historical configuration record is used to store information of the custom panel configuration page configured by the target user; if the historical configuration record is not empty, generating the panel configuration area according to the historical configuration record; if the historical configuration record is empty, determining whether there is a default panel configuration page for the role to which the target user belongs; if there is a default panel configuration page for the role to which the target user belongs, generating the panel configuration area according to the configuration information of the default panel configuration page; if there is no default panel configuration page for the role to which the target user belongs, generating a blank panel configuration area.

[0119] Furthermore, the process of the configuration page determination module determining the corresponding visualization component list based on the permission information of the target user and the current business scenario includes: obtaining the code value corresponding to the current business scenario from the parameter dictionary; setting the visualization component corresponding to the code value in the component library as an alternative visualization component; if the alternative visualization component matches the permission information of the target user, adding the alternative visualization component to the visualization component list.

[0120] Furthermore, the process in which the page configuration module performs corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user includes: if a component adding instruction input by the target user is received, the visual component corresponding to the component adding instruction in the component selection area is placed in the panel configuration area; if a component deleting instruction input by the target user is received, the visual component that has been placed in the panel configuration area and corresponds to the component deleting instruction is deleted; if a component adjusting instruction input by the target user is received, the size and / or position of the visual component that has been placed in the panel configuration area and corresponds to the component adjusting instruction is adjusted.

[0121] Furthermore, it also includes:

[0122] The data storage module is used to store the component layout information of the panel configuration area, the current business scenario and the permission information of the target user as a historical configuration record after the configuration of the custom panel configuration page is completed.

[0123] Furthermore, it also includes:

[0124] A component registration module is used to generate the functional module through the front-end technology stack before determining the custom panel configuration page corresponding to the target user; it is also used to encapsulate the functional module into the visual component and configure routing information for the visual component; it is also used to use the routing information to set the resource permission information corresponding to the visual component; wherein the resource permission information is information used to determine whether the use of the visual component is allowed, and the resource permission information includes permission information and / or business scenarios.

[0125] Since the embodiments of the system part correspond to the embodiments of the method part, please refer to the description of the embodiments of the method part for the embodiments of the system part, which will not be repeated here.

[0126] The present application also provides a storage medium on which a computer program is stored, and when the computer program is executed, the steps provided in the above embodiment can be implemented. The storage medium may include: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0127] The present application also provides an electronic device, which may include a memory and a processor, wherein a computer program is stored in the memory, and when the processor calls the computer program in the memory, the steps provided in the above embodiment may be implemented. Of course, the electronic device may also include various network interfaces, power supplies and other components.

[0128] The various embodiments in the specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same and similar parts between the various embodiments can be referred to each other. For the system disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part description. It should be pointed out that for ordinary technicians in this technical field, without departing from the principles of this application, several improvements and modifications can be made to the present application, and these improvements and modifications also fall within the scope of protection of this application.

[0129] It should also be noted that, in this specification, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "comprises", "comprising" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the statement "comprising a ..." does not exclude the presence of other identical elements in the process, method, article or device including the element.

Claims

1. A method for generating a user interface, characterized in that: include: If an interface generation request of a target user is received, a custom panel configuration page corresponding to the target user is determined; wherein the custom panel configuration page includes a component selection area and a panel configuration area, the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components; Performing corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user; wherein the configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several operations, wherein the component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area; After the custom panel configuration page is configured, a corresponding user interface is generated according to the component layout in the panel configuration area.

2. The user interface generation method according to claim 1, characterized in that: Determine the custom panel configuration page corresponding to the target user, including: Determine the current business scenario according to the interface generation request; Determine a corresponding visualization component list according to the permission information of the target user and the current business scenario, and generate the component selection area according to the visualization component list; Generate a panel configuration area according to the historical configuration record of the target user; A custom panel configuration page is generated, which includes the component selection area and the panel configuration area.

3. The user interface generation method according to claim 2, characterized in that: Generating a panel configuration area according to the historical configuration record of the target user includes: Determine whether the historical configuration record of the target user is empty; wherein the historical configuration record is used to store information of the custom panel configuration page configured by the target user; If the historical configuration record is not empty, generating the panel configuration area according to the historical configuration record; If the historical configuration record is empty, determine whether there is a default panel configuration page for the role to which the target user belongs; if there is a default panel configuration page for the role to which the target user belongs, generate the panel configuration area according to the configuration information of the default panel configuration page; if there is no default panel configuration page for the role to which the target user belongs, generate a blank panel configuration area.

4. The user interface generation method according to claim 2, characterized in that: Determining a corresponding visualization component list according to the target user's permission information and the current business scenario includes: Obtaining a code value corresponding to the current business scenario from a parameter dictionary; Setting the visualization component corresponding to the code value in the component library as an alternative visualization component; If the candidate visualization component matches the permission information of the target user, the candidate visualization component is added to the visualization component list.

5. The user interface generation method according to claim 1, characterized in that: Performing corresponding configuration operations on the custom panel configuration page according to the instruction input by the target user includes: If a component adding instruction input by the target user is received, placing the visual component corresponding to the component adding instruction in the component selection area to the panel configuration area; If a component deletion instruction input by the target user is received, deleting the visual component that has been placed in the panel configuration area and corresponds to the component deletion instruction; If a component adjustment instruction input by the target user is received, the size and / or position of the visual component placed in the panel configuration area and corresponding to the component adjustment instruction is adjusted.

6. The user interface generation method according to claim 1, characterized in that: Also includes: After the custom panel configuration page is configured, the component layout information of the panel configuration area, the current business scenario and the permission information of the target user are stored as a historical configuration record.

7. The user interface generation method according to any one of claims 1 to 6, characterized in that: Before determining the custom panel configuration page corresponding to the target user, the method further includes: Generate the functional modules through the front-end technology stack; Encapsulating the functional module into the visual component, and configuring routing information for the visual component; The resource permission information corresponding to the visualization component is set using the routing information; wherein the resource permission information is information used to determine whether the visualization component is allowed to be used, and the resource permission information includes permission information and / or business scenarios.

8. A user interface generation system, characterized in that: include: A configuration page determination module, for determining a custom panel configuration page corresponding to the target user if an interface generation request from the target user is received; wherein the custom panel configuration page includes a component selection area and a panel configuration area, the component selection area includes visual components of multiple functional modules, and the panel configuration area is used to place and adjust the visual components; A page configuration module, used to perform corresponding configuration operations on the custom panel configuration page according to the instructions input by the target user; wherein the configuration operation includes any one of a component adding operation, a component deleting operation and a component adjusting operation or a combination of any several operations, wherein the component adding operation is an operation for placing a visual component in the component selection area to the panel configuration area, the component deleting operation is an operation for deleting a visual component already placed in the panel configuration area, and the component adjusting operation is an operation for adjusting the size and / or position of a visual component already placed in the panel configuration area; The user interface generation module is used to generate a corresponding user interface according to the component layout in the panel configuration area after the configuration of the custom panel configuration page is completed.

9. An electronic device, characterized in that: The method comprises a memory and a processor, wherein a computer program is stored in the memory, and when the processor calls the computer program in the memory, the steps of the user interface generation method according to any one of claims 1 to 7 are implemented.

10. A storage medium, characterized in that: The storage medium stores computer executable instructions, and when the computer executable instructions are loaded and executed by the processor, the steps of the user interface generating method according to any one of claims 1 to 7 are implemented.

Images