Method and system for constructing business UI component library based on Vue3 core system

Abstract

The invention discloses a method and a system for constructing a business UI (User Interface) component library based on a Vue3 core system. The method comprises the steps that an implementation layer calls an original Element Plus library contained in a dependency layer, and / or a first custom component secondarily developed by a user in a configuration layer and a second custom component built in the implementation layer to construct a component library core package; the implementation layer performs global default attribute configuration on each service component in the component library core package by using the global configuration file to obtain a corresponding new service component with a specific global default attribute; the implementation layer uses the UI service theme template to perform UI theme configuration on the new service components and uses the new service components subjected to UI theme configuration as target service components to be used in the application layer; according to the technical scheme, a set of service component libraries which can be used after being opened can be achieved, the purpose of efficiently developing service pages is achieved, the development efficiency of a service system is greatly improved, meanwhile, development standardization is achieved, and the user experience of system interaction is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of UI business component development, and in particular to a method and system for constructing a business UI component library based on a Vue3 core system. Background Art

[0002] In the prior art, for the business UI interface, developers of different business systems need to independently develop corresponding UI pages, resulting in repeated development of UI pages with similar functions. This method of copying pages with similar functions will result in a lot of redundant code. During later maintenance, the same problem needs to be modified for all similar pages, and all pages need to be optimized during UI optimization iterations, resulting in low development efficiency. Summary of the invention

[0003] In view of this, the present invention provides a method and system for constructing a business UI component library based on the Vue3 core system, realizing a set of out-of-the-box business component library, achieving the purpose of efficiently developing business pages, greatly improving the development efficiency of the business system, and realizing development standardization at the same time, improving the user experience of system interaction.

[0004] According to one aspect of the present invention, an embodiment of the present invention provides a method for constructing a business UI component library based on a Vue3 core system, which is applied to a construction system for a business UI component library based on a Vue3 core system, wherein the construction system comprises: a dependency layer, an implementation layer, a configuration layer, and an application layer; the construction method comprises:

[0005] The implementation layer calls the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built into the implementation layer, to build a component library core package containing at least two business components; wherein the business components at least include a form component, a table component, a table component with search and paging, and a form pop-up window component; the original Element Plus library includes: the original Element Plus component;

[0006] The implementation layer obtains a global configuration file from the configuration layer, and uses the global configuration file to perform global default attribute configuration on each business component in the core package of the component library to obtain a corresponding new business component with specific global default attributes;

[0007] The implementation layer obtains the UI business theme from the configuration layer, and uses the UI business theme to perform UI theme configuration on the new business components, and uses each new business component after the UI theme configuration as a target business component to be used in the application layer.

[0008] According to another aspect of the present invention, an embodiment of the present invention further provides a construction system for a business UI component library based on a Vue3 core system, the construction system comprising: a dependency layer, an implementation layer, a configuration layer and an application layer;

[0009] The dependency layer is used to provide the original Element Plus components for the implementation layer to call;

[0010] The configuration layer is used to configure the global configuration file, the first custom component secondary developed by the user, and the UI theme for use by the implementation layer;

[0011] The implementation layer is used for the implementation layer to call the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built into the implementation layer, so as to build a component library core package containing at least two business components; wherein the business components at least include a form component, a table component, a table component with search and paging, and a form pop-up window component; the original Element Plus library includes: the original Element Plus component;

[0012] The implementation layer is used to obtain a global configuration file from the configuration layer, and use the global configuration file to perform global default attribute configuration on each business component in the core package of the component library to obtain a corresponding new business component with specific global default attributes;

[0013] The implementation layer is used to obtain the UI business theme from the configuration layer, and use the UI business theme to perform UI theme configuration on the new business component, and use each new business component after the UI theme configuration as a target business component for use in the application layer.

[0014] The technical effect of the present invention is that the implementation layer calls the original Element Plus library contained in the dependency layer, and / or the first custom component secondarily developed by the user in the configuration layer and the second custom component built into the implementation layer to build a component library core package containing at least two business components. Then, the global configuration file is obtained from the configuration layer, and the global configuration file is used to perform global default property configuration on each business component in the component library core package. Based on this, the UI business theme is obtained from the configuration layer, and the UI business theme is used to perform UI theme configuration on the new business component. Each new business component after the UI theme configuration is used as the target business component for use in the application layer. This can realize a set of out-of-the-box business component library, achieve the purpose of optimizing the business UI and efficiently developing business pages, greatly improve the development efficiency of the business system, and at the same time realize development standardization and improve the user experience of system interaction.

[0015] It should be understood that the contents described in this section are not intended to identify the key or important features of the embodiments of the present invention, nor are they intended to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0017] Figure 1 A flowchart of a method for constructing a business UI component library based on a Vue3 core system provided by an embodiment of the present invention;

[0018] Figure 2 A flowchart of another method for constructing a business UI component library based on the Vue3 core system provided by an embodiment of the present invention;

[0019] Figure 3 A schematic diagram of the configuration effect of a form component provided by an embodiment of the present invention;

[0020] Figure 4 A schematic diagram of an effect with a search table provided by an embodiment of the present invention;

[0021] Figure 5 A schematic diagram of a custom theme effect provided by an embodiment of the present invention;

[0022] Figure 6 A structural block diagram of a system for building a business UI component library based on a Vue3 core system provided by an embodiment of the present invention;

[0023] Figure 7 A structural block diagram of another system for building a business UI component library based on the Vue3 core system provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] In one embodiment, Figure 1 A flowchart of a method for constructing a business UI component library based on the Vue3 core system is provided for one embodiment of the present invention. This embodiment is applicable to the situation when an efficient business UI component library based on the Vue3 ecosystem is constructed. The method can be executed by a construction system of a business UI component library based on the Vue3 core system.

[0027] like Figure 1 As shown, the method for constructing a business UI component library based on the Vue3 core system in this embodiment is applied to a construction system for a business UI component library based on the Vue3 core system, and the construction system includes: a dependency layer, an implementation layer, a configuration layer and an application layer.

[0028] In this embodiment, the method for constructing a business UI component library based on the Vue3 core system specifically includes the following steps:

[0029] S110, the implementation layer calls the original Element Plus library included in the dependency layer, and / or the first custom component secondarily developed by the user in the configuration layer and the second custom component built into the implementation layer, to build a component library core package including at least two business components.

[0030] Among them, the business component can also be called a composite component, which at least includes a form component, a table component, a table component with search and paging, and a form pop-up component; the original Element Plus library includes: the original Element Plus component.

[0031] In this embodiment, the original Element Plus library is a UI component library based on Vue3, which has rich and high-quality components. The original Element Plus component is an original component directly inherited from the original Element Plus, wherein the original component of the original Element Plus may include but is not limited to input components, textarea components, data components, datetime components, switch components, radiogroup unit boxes, and other original subcomponents; in addition, secondary development can be performed again in the configuration layer based on the existing components developed to obtain the user's secondary developed custom components, and the secondary developed custom components can be customized according to user needs and business needs, which is not limited in this embodiment.

[0032] In this embodiment, the second custom component built into the implementation layer is a custom component with optimized functions. The functions of the optimized custom component include at least: preview mode, enumerated data query and data conversion of selection-type components; it can be understood as a second custom component obtained by the developer through functional optimization of the original component. The second custom component may include but is not limited to text components, select components, checkbox components, treeselect tree selectors, etc.

[0033] In this embodiment, the implementation layer can call the original Element Plus component in the dependent layer, and / or the first custom component secondarily developed by the user in the configuration layer, and the second custom component built into the implementation layer, to build a component library core package consisting of form components, table components, table components with search and paging, form pop-up components, etc., thereby realizing the combined use of the original components based on the dependent layer Element Plus, the first custom component secondarily developed by the user in the configuration layer, and the second custom component built into the implementation layer, and the optimized, assembled, and rewritten components with higher frequency of use. It can be understood that the original Element Plus library in the dependency layer stores multiple original sub-components, and the custom component library developed by the user in the configuration layer may also contain multiple original components developed for secondary development. In addition, the second custom component built into the implementation layer also includes multiple optimized custom components. The original Element Plus library stores multiple original sub-components, and the configuration layer may contain multiple original components developed for secondary development. As well as multiple optimized custom components, they are configured to form a combined component such as a table or a form, which is then applied to the application layer. In addition, before the composed components are applied to the application layer, it is necessary to perform global attribute default configuration and UI theme configuration on the composed components through the global configuration file and UI theme configuration in the configuration layer, and this embodiment does not limit this.

[0034] S120: The implementation layer obtains the global configuration file from the configuration layer, and uses the global configuration file to configure the global default attributes of each business component in the component library core package to obtain a corresponding new business component with specific global default attributes.

[0035] The new business component is a new component with specific global default attributes obtained after global default configuration of the business component. The new business component has all the functions of the original business component and has the final default attributes after the original default attributes and the global default attributes are combined.

[0036] In this embodiment, the global configuration file includes at least: an interceptor before a global interface request; an interceptor after a global interface response; a global dictionary acquisition method; the inline form mode in the form component, whether it is a preview mode, the minimum width of each item in the form, the spacing between each row, and the spacing between each column; the display style of the table component when there is no data, and whether it is displayed in the center; the key corresponding to the current page of the table component with search and paging when requesting the interface, the key corresponding to the total number of pages when requesting the interface, the default number of rows displayed for the number of search items, responseAfter (interceptor after the interface response [convert response result]), requesBefore (interceptor before the interface request [convert request parameters]), and obtaining the dictionary code code.

[0037] In one embodiment, each business component in the component core package corresponds to a corresponding component attribute and a global default attribute; the component attribute and the global default attribute corresponding to each business component have an attribute priority; the attribute priority includes: the priority of the component attribute is greater than the global default attribute. It can be understood that if the business component is configured with the global default attribute, and the attribute configuration of the component is not performed in the business component, the configured global default attribute shall prevail and the attribute corresponding to the business component shall be set; if the business component is configured with the global default attribute, but due to user or business needs, the component attribute needs to be set for the global default configuration attribute, the attribute corresponding to the business component shall be set based on the component attribute. For example, the minimum width of each item in the form in the global default configuration properties configured in the form component is 200; but the minimum width of each item in the component properties corresponding to the form component is 300, then the minimum width of the form is configured based on the minimum width of each item in the form being 300; for another example, the properties in the search table, responseAfter (interceptor after interface response [convert response result]) and requestBefore (interceptor before interface request [convert request parameter]), if not processed, the default global configuration will be used. If special processing and customization are required, the customized property values ​​will be used.

[0038] In this embodiment, the configuration layer stores the UI themes configured by the developer, as well as the global configuration file. Before applying the components that form a whole such as a table or form to the application layer, the implementation layer needs to obtain the global configuration file from the configuration layer, and use the global configuration file to configure the global default properties of each business component in the core package of the component library, and obtain the corresponding new business component with specific global default properties. In some embodiments, for each business component in the core package of the component library, the corresponding original default properties are obtained respectively, and the pre-configured global default configuration properties are obtained from the global configuration file, the original default properties corresponding to the business component are merged with the global default configuration properties, and the merged properties are used as the final default properties of the business component; it can be understood that, by combining the default property information of the original components in the component library and each component in the global configuration file, a business component with the specified default properties is obtained, thereby achieving the purpose of modifying the default properties of the component. In the example row, for the form component, the minimum width of each item in the original default properties is 220; the minimum width of each item in the pre-configured global default configuration properties is 300. Through the above operation, all the original default properties of the form component are obtained, and then the minimum width of each item in the pre-configured global default configuration properties is obtained, and the two are merged to obtain a new business component. The default minimum width attribute of each item of this new business component is 300.

[0039] S130: The implementation layer obtains the UI business theme from the configuration layer, and uses the UI business theme to perform UI theme configuration on the new business component, and uses each new business component after the UI theme configuration as a target business component to be used in the application layer.

[0040] In one embodiment, the UI business theme is constructed based on a pre-configured business theme template; the business theme template includes at least: global primary color, status color, global font color and background color; wherein, the global primary color includes: theme color and theme color; status color includes: warning item color, error item color, success item color, failure item color and danger item color; in addition, it may also include global wireframe, style and fill background color, etc., which are not limited in this embodiment. Exemplarily, global primary color: primary color + corresponding color (secondary color, disabled color, etc.); global font color: same as primary color, different levels of color will be used according to different scenarios.

[0041] It can be understood that the UI business theme template includes templates for defining colors and styles in the UI business interface, which may include but are not limited to the color of the defined theme, the color definition of the global primary color, the definition of other success colors, the definition of warning colors, the definition of error colors, in addition, the color of the border font, the color of the border, etc., can all be reflected in the UI theme template; the style template may include but is not limited to the font of the table header, whether to cancel the border and shadow effect of the card, etc.

[0042] In this embodiment, the configuration layer contains UI themes pre-configured by developers, so that UI themes are configured for each business component in the component library core package based on the UI business theme. It should be noted that the UI theme in the configuration layer is decoupled from each business component in the component library core package. Different business systems may need to use different UI themes, so each business component in the component library core package can reference the UI theme in the configuration layer as needed to adapt to different business systems. In this embodiment, different theme color effects can be achieved in the application layer through the UI theme in the configuration layer, achieving separation of UI and logic. Since the UI theme and business components are decoupled, different themes can be referenced in the business components to quickly switch theme effects.

[0043] In this embodiment, after performing the global default configuration and UI theme configuration of the business components, each business component after the UI theme configuration can be used as a target component to form an efficient business UI component library for use in the application layer. Of course, each business component in the component core package corresponds to a corresponding component document, which provides instructions and examples for using the component. In addition, each business component also includes a component test project, which can be used to test the specific functions of the component during the component library development process.

[0044] According to the technical solution of the embodiment of the present invention, the implementation layer builds a component library core package containing at least two business components by calling the original Element Plus library contained in the dependency layer, and / or the first custom component secondarily developed by the user in the configuration layer and the second custom component built into the implementation layer. Then, the global configuration file is obtained from the configuration layer, and the global configuration file is used to perform global default property configuration on each business component in the component library core package. Based on this, the UI business theme is obtained from the configuration layer, and the UI business theme is used to perform UI theme configuration on the new business component. Each new business component after the UI theme configuration is used as the target business component for use in the application layer. This can realize a set of out-of-the-box business component library, achieve the purpose of optimizing the business UI and efficiently developing business pages, greatly improve the development efficiency of the business system, and at the same time realize development standardization and improve the user experience of system interaction.

[0045] In one embodiment, the method further includes:

[0046] In the subcomponent with enumerated data selection corresponding to each business component in the core package of the component library, a logic program for querying enumerated data and automatically converting the code to Chinese description is configured, so that when a user's enumerated data request for a subcomponent is received, the request code sent by the corresponding subcomponent is used to find the Chinese version of the corresponding enumerated data and return it for Chinese display.

[0047] In this embodiment, the business component may include some subcomponents with enumerated data selection, and the subcomponent may be a select selection component.

[0048] In this embodiment, there are often enumerated data such as status codes or types in the project, and only codes are saved in the database. The front end needs to display Chinese according to the enumerated data. This logic is almost the same, but it occurs more frequently and needs to be repeatedly developed. At this time, the logic of "querying enumerated data" and "automatically converting codes to Chinese descriptions" can be built into the subcomponent with enumerated data selection corresponding to each business component in the core package of the component library. First, globally configure the "system-wide enumerated data query method", and specify the enumerated code in the subcomponent with drop-down selection corresponding to each business component in the core package of the component library. The front end can automatically display the corresponding Chinese description.

[0049] In this embodiment, there are multiple types of enumerated data, and different types of enumerated data correspond to corresponding ID identification, name description, dictionary type code, whether to enable status setting, etc. For example, under the dictionary type whose name description is the industry to which the business belongs, there are corresponding industries A, B and C, and different industries correspond to serial numbers and type codes respectively. For example, when the type code is SHOP_INDUSTRY, the corresponding name description is the industry to which the merchant belongs. At this time, the dictionary data type code corresponding to merchant A in the industry to which the merchant belongs is expressed as SHOP_INDUSTRY_A merchant; the dictionary data type code corresponding to merchant B is expressed as SHOP_INDUSTRY_B merchant; and the dictionary data type code corresponding to merchant C is expressed as SHOP_INDUSTRY_C merchant. When displaying on the front end, the dictionary data type code needs to be displayed in Chinese. At this time, the corresponding enumerated data can be found in Chinese by obtaining the dictionary code for display.

[0050] In one embodiment, the method further includes: using typescript technology to prompt subcomponents included in the business component, and attribute information supported by each of the business components and each of the subcomponents.

[0051] In this embodiment, when the component library package is packaged and constructed on the front end, the typescript technology provides corresponding code specifications, which may include typescript type definition, code detection, code format, etc., and can prompt the subcomponents included in the target component, as well as the attribute information supported by each business component and each subcomponent, so as to reduce the difficulty of entry for users.

[0052] In one embodiment, Figure 2 A flowchart of another method for constructing a business UI component library based on the Vue3 core system provided for an embodiment of the present invention. Based on the above embodiments, this embodiment calls the original Element Plus library contained in the dependency layer, and / or the first custom component secondarily developed by the user in the configuration layer and the second custom component built into the implementation layer to construct a component library core package containing at least two business components. The implementation layer obtains the global configuration file from the configuration layer, and uses the global configuration file to perform global default property configuration on each business component in the component library core package to obtain the corresponding new business component with specific global default properties. The implementation layer obtains the UI business theme from the configuration layer, and uses the UI business theme to perform UI theme configuration on the new business component, which is further refined.

[0053] like Figure 2 As shown, the method for constructing a business UI component library based on the Vue3 core system in this embodiment may specifically include the following steps:

[0054] S210, obtaining the original Element Plus component in the original Element Plus library, and / or the first custom component secondarily developed by the user in the configuration layer, and the second custom component built into the implementation layer, and using the original Element Plus component, the second custom component and / or the first custom component as subcomponents respectively.

[0055] In this embodiment, the original Element Plus component in the original Element Plus library, and / or the first custom component secondarily developed by the user in the configuration layer, and the second custom component built into the implementation layer are obtained from the dependency layer, and the original Element Plus component, the second custom component and / or the first custom component are respectively used as sub-components to subsequently construct business components such as form components, table components, table components with search and paging, and pop-up components.

[0056] S220, construct a component built-in user input component set based on the subcomponents.

[0057] In this embodiment, a component built-in user input component set is constructed based on subcomponents, wherein the component built-in user input component set includes user input type components, and the number of the user input type components is at least 14; each user input type component is a subcomponent constituting a form; each subcomponent corresponds to a corresponding component instance, component attribute, component value, preview mode, and formatted text. Among them, the user input type component may include an input component, a Select component, and the like.

[0058] In this embodiment, a user input component can be a strategy developed using the strategy pattern. The main purpose of this strategy pattern is to avoid using multiple conditional statements. In this embodiment, a strategy pattern is an independent tag. Deleting one strategy (component) does not affect other components, thereby ensuring the stability of the code. In this embodiment, in order to better understand that a user input component is a strategy pattern that constitutes a form, an example is given below for illustration. The input box Input is a strategy; the selector Select is also a strategy.

[0059] S230: Construct a form component and / or table component based on the built-in user input component set of the component.

[0060] In this embodiment, each subcomponent is concentrated through the built-in user input component to construct a form component and / or a table component. Specifically, the subcomponents can be used as a strategy to construct the form component and the table component. More specifically, at least two subcomponents, as well as the corresponding components, labels and props under the subcomponents, are configured to form a form component; wherein the width corresponding to each user input type component in the form component is set by the attribute itemMinWidth, and the width can be adaptively adjusted according to the size of the user's browser window; the spacing between the rows and columns corresponding to each user input type component is adjusted by the attributes rowGap and columnGap.

[0061] In this embodiment, in order to better understand the configuration formation process of the form component and the schematic diagram of the configuration effect of the form component, Figure 3 A schematic diagram of the configuration effect of a form component provided by an embodiment of the present invention, such as Figure 3 As shown, the configuration of the form component may include: Input component, switch type, label, prop, and compent field functions of each component.

[0062] In this embodiment, the strategy pattern is used, and each user input component (such as: Input, Select) is a strategy. For example, the input box in the form is the Input component, and the selection box is the Select component. When configuring the form, select the component to be referenced and configure it into a corresponding display list, including: component type, corresponding component attributes under the component type, component value, corresponding preview mode of the component, and formatted text. When forming a form, each subcomponent is a separate strategy. Deleting one of the strategies (components) does not affect other components, thereby ensuring the stability of the code.

[0063] In this embodiment, the functional points of the form may include but are not limited to supporting preview mode, being able to adapt to screens of different widths according to the "minimum width of each item" (the minimum width of each item can be set), being able to customize the width ratio of each item to achieve flexible layout, and being able to customize the commonly used prompt text for each item; and providing prompt descriptions for certain fields.

[0064] In this embodiment, all group components in the form component can inherit the size attribute of the form. In addition, the form component includes layout mode and preview mode, wherein the layout mode includes inline mode, vertical mode, and edit mode; wherein the preview mode is the text content to be displayed. Exemplarily, the Input component is placed normally, and input can be made. In preview mode, a preview mode attribute is added to the form component, which can define the width and spacing of each item in the form component. The grid layout is used, and the adaptive width is achieved through the attribute itemMinWidth to achieve the best layout effect. The spacing between rows and columns is adjusted through the attributes rowGap and columnGap respectively.

[0065] S240, obtain a paging component, and construct a table component with search and paging based on the form component, table component and paging component.

[0066] In this embodiment, a table component with search and paging can be obtained by integrating three components: a form component, a table component and a paging component. Specifically, a table component with search and paging is constructed based on the form component, the table component and the paging component, including: configuring query condition fields and query interface fields in the form component, configuring table display fields in the table component, and configuring paging fields in the paging component; the configured form component, table component and paging component are integrated to obtain a table component with search and paging.

[0067] In this embodiment, in order to better understand the configuration formation process of the table component with search and paging, the three components of form, table, and paging are integrated, and the functions such as query conditions, data display, and data paging are built into the components, and common tools are added. It can be understood that only the query condition field, table display field, and query interface need to be configured to realize the conventional list query display function. In this embodiment, the fields of search conditions are configured, which may include but are not limited to name, gender, etc.; the table display fields are the columns and rows that need to be displayed, and the field names involved in each column and row; the query interface is which interface is used to query data.

[0068] In this embodiment, the functional points of the table component with search and paging may include but are not limited to custom search condition forms and data table attributes, custom processing methods of "request parameters" and "response data" (which can be customized or default to previously globally configured), default query conditions and asynchronous setting of default query conditions, support for custom slots, custom toolbars, and custom search area UI.

[0069] Exemplary, to facilitate understanding of the configuration formation process with search and paging table components, Figure 4 A schematic diagram of an effect with a search table provided by an embodiment of the present invention.

[0070] S250, obtaining an enhanced pop-up window component with an added optimization function, and embedding a form component in the enhanced pop-up window component to obtain a form pop-up window component.

[0071] In this embodiment, the original pop-up window component in the original Element Plus component is obtained, the corresponding optimization function is added to the original pop-up window component, the pop-up window component after function optimization is used as the enhanced pop-up window component, and the form component is embedded in the enhanced pop-up window component to obtain the form pop-up window component. Among them, the optimization functions corresponding to the enhanced pop-up window component at least include: data submission, data update, primary key field name, whether to close the pop-up window after the interface request is completed, prompt text after the interface request is successful, callback function, conversion request parameters (interceptor before interface request) and response result data (interceptor after interface response); the attributes corresponding to its optimization functions are respectively represented as savePromise, updatePromise, primaryKey, completeClose, successText, dataCallBack, requestBefore, responseAfter, confirmText, cancelText.

[0072] S260. The form component, the table component, the table component with search and paging, and the form pop-up window component are respectively used as business components to form a component core library package.

[0073] In this embodiment, the form component, table component, table component with search and paging, and form pop-up window component are respectively used as business components to form a component core library package. In addition, a file upload component, a file preview component, and other components required by other business needs may also be included.

[0074] S270: traverse each business component in the component library core package, obtain the corresponding original default attributes for each business component, and obtain the pre-configured global default configuration attributes from the global configuration file.

[0075] The pre-configured global default configuration attributes may be understood as global default attributes pre-defined by developers according to business requirements.

[0076] In this embodiment, each business component in the component library core package is traversed, and for each business component, the corresponding original default attributes are obtained respectively, and the pre-configured global default configuration attributes are obtained from the global configuration file.

[0077] S280: Merge the original default attributes corresponding to the business component with the global default configuration attributes, use the merged attributes as the target default attributes of the business component, and use the business component with the target default attributes as a new business component with specific global default attributes.

[0078] Among them, the target default attribute can be understood as the final global default attribute after merging.

[0079] In this embodiment, the original default properties corresponding to the business component are merged with the global default configuration properties, and the merged properties are used as the target default properties of the business component, and the business component with the target default properties is used as a new business component with specific global default properties. Specifically, a new business component is created, a ref is created in the new business component to store the original component instance, the new business component is named, the component default properties are passed to the new business component, the props of the original component are passed to the new business component, and the ref is set for subsequent access to the original component instance, and the original default properties are replaced by the pre-configured global default configuration properties in the new business component and other default properties of the original component.

[0080] In this embodiment, due to the existing technology, element only supports two default attributes, size and zIndex, and cannot support each component to define default attributes separately. According to the default attributes configured by the component, it is combined with the original component to form a new component. The attributes of this new component are the original attributes plus the pre-configured default attributes, as a new component. For example, the form component has a default width of 220; the configured global default width is 300. All the attributes of this component are obtained, and then the global default width of 300 is merged with the original attributes to obtain a new component and the corresponding default attributes.

[0081] It can be understood that in addition to the two global properties of size and zIndex that can be set by default, a new mthGlobalConfig property is added. The mthGlobalConfig property is an object that can define global properties and global properties of components.

[0082] For example, to better understand the default properties of the global configuration component, if all table items need to be displayed in the center by default, then the align property value of the table component can be set to center globally to take effect globally. If the minimum width of each form item needs to be set to 240, then the item Min Width property value of the form component can be set to 240 globally to take effect globally.

[0083] S290. Based on the requirements of different business systems, a business UI theme that meets the requirements of the business system is customized according to the UI theme template to perform global theme configuration.

[0084] In this embodiment, the color and style of the UI interface corresponding to the new business component can be selected from the UI business theme according to the needs of different business systems to perform global theme configuration. It can be understood that the introduction of a component is a code, and the introduction of a theme is a code, and the two are decoupled; the theme is mainly a change in the color of the UI interface. For example, the color corresponding to the original theme in the default component library is light blue, and now the color of the custom theme introduced is dark blue. The theme can be configured through the configuration template; after the theme is configured, the theme can be referenced.

[0085] For example, to better understand the effect of custom theme effects, Figure 5 A schematic diagram of a custom theme effect provided by an embodiment of the present invention is shown in FIG. Figure 5 As shown, you can quickly switch theme effects by referencing different themes.

[0086] The technical solution of the embodiment of the present invention is to construct a component built-in user input component set through subcomponents, construct a form component and / or a table component based on the component built-in user input component set, construct a table component with search and paging based on the form component, the table component and the paging component, and obtain a form pop-up window component by embedding the form component. The form component, the table component, the table component with search and paging, and the form pop-up window component are respectively used as business components, thereby forming a component core library package. On this basis, each business component in the component library core package is traversed, and for each business component, the corresponding original default attributes are respectively obtained, and the pre-configured global default configuration attributes are obtained from the global configuration file, and the original default attributes corresponding to the business component are merged with the global default configuration attributes, and the merged attributes are used as the target default attributes of the business component, and the business component with the target default attributes is used as a new business component with specific global default attributes. Then, according to the needs of different business systems, the color and style of the UI interface corresponding to the new business component are selected from the UI business theme to perform global theme configuration, thereby further realizing a set of business component libraries that can be used out of the box. It can be directly installed and configured for fast access, and business pages can be developed efficiently, greatly improving the development efficiency of the business system. At the same time, development standardization is achieved and the user experience of system interaction is improved.

[0087] In one embodiment, Figure 6 A structural block diagram of a system for building a business UI component library based on the Vue3 core system provided by one embodiment of the present invention.

[0088] like Figure 6 As shown, the construction system includes: a dependency layer 610, an implementation layer 620, a configuration layer 630 and an application layer 640;

[0089] The dependency layer 610 is used to provide the original Element Plus component for the implementation layer 620 to call;

[0090] The configuration layer 630 is used to configure a global configuration file, a first custom component secondary developed by a user, and a UI theme for use by the implementation layer 620;

[0091] The implementation layer 620 is used to call the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built in the implementation layer, so as to build a component library core package containing at least two business components; wherein the business components at least include a form component, a table component, a table component with search and paging, and a form pop-up window component; the original Element Plus library includes: the original Element Plus component;

[0092] The implementation layer 620 is used to obtain a global configuration file from the configuration layer 630, and use the global configuration file to perform global default attribute configuration on each business component in the component library core package to obtain a corresponding new business component with specific global default attributes;

[0093] The implementation layer 620 is used to obtain the UI business theme from the configuration layer 630, and use the UI business theme to configure the UI theme of the new business component, and use each new business component after the UI theme configuration as a target business component for use in the application layer.

[0094] The construction system of the business UI component library based on the Vue3 core system provided in the embodiment of the present invention can execute the construction method of the business UI component library based on the Vue3 core system provided in any embodiment of the present invention, and has functional modules and beneficial effects corresponding to the execution method.

[0095] In one embodiment, Figure 7 A structural block diagram of another construction system of a business UI component library based on the Vue3 core system provided by an embodiment of the present invention. The architecture diagram includes an application layer, a configuration layer, an implementation layer and a dependency layer, wherein the original component library in the dependency layer includes the original Element Plus library and the original vue3 library; the implementation layer is a component library project built using a monorepo solution, including three modules: a component library core package, a component library document, and a component test project. The component library core package mainly implements the specific functions of each component, and the component library core package includes components, common tools and UI themes; wherein the components may include: components inherited from Element Plus, built-in custom components and user-defined components; wherein the components inherited from Element Plus may include but are not limited to input, textarea, number, date, datetime, daterange, switch, etc.; built-in custom components may include but are not limited to text, select, radio, checkbox, area, cascade, treeselect, etc.; custom components are components customized by users in the configuration layer for secondary development, such as custom form built-in user input components. The configuration layer configures global configuration files, configures custom components and UI themes developed by users for secondary development, for use by the implementation layer. The application layer includes constructed form components, table components, table components with search and paging, form pop-up components, etc. You can directly use these components composed of multiple sub-components.

[0096] The above scheme of this embodiment realizes a set of UI component libraries that can quickly develop business functions. Based on the existing conventional UI component library (Element Plus) on the market, unified layout, interaction and conventional business logic are added to reduce the repetitive work of developers and support personalized configuration. At the same time, it supports setting global default properties for components, so that the global setting takes effect in one place, greatly improving development efficiency and unifying development and UI specifications. At the same time, it supports custom UI themes to achieve rapid upgrades and iterations of UI styles or differentiated customization of UIs for different systems. On the basis of global configuration and unified specifications, it also supports special development scenarios such as customized development and secondary development. Based on this, the development efficiency of the background management system is improved, the development and maintenance costs are reduced, and the development and UI specifications are unified. Developers do not need to worry about routine development details and focus on business needs.

[0097] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps described in the present invention can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solution of the present invention can be achieved, and this document does not limit this.

[0098] The above specific implementations do not constitute a limitation on the protection scope of the present invention. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for constructing a business UI component library based on the Vue3 core system, characterized in that: A construction system for a business UI component library based on the Vue3 core system, the construction system includes: a dependency layer, an implementation layer, a configuration layer and an application layer; the construction method includes: The implementation layer calls the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built into the implementation layer, to build a component library core package containing at least two business components; wherein the business components at least include a form component, a table component, a table component with search and paging, and a form pop-up window component; the original Element Plus library includes: the original Element Plus component; The implementation layer obtains a global configuration file from the configuration layer, and uses the global configuration file to perform global default attribute configuration on each business component in the core package of the component library to obtain a corresponding new business component with specific global default attributes; The implementation layer obtains the UI business theme from the configuration layer, and uses the UI business theme to perform UI theme configuration on the new business components, and uses each new business component after the UI theme configuration as a target business component to be used in the application layer.

2. The method according to claim 1, characterized in that The second custom component is a custom component after function optimization, and the functions of the optimized custom component include at least: preview mode, enumeration data query and data conversion of the selection class component; Accordingly, the implementation layer calls the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built into the implementation layer to build a component library core package containing at least two business components, including: Obtaining the original Element Plus component in the original Element Plus library, and / or the first custom component secondarily developed by the user in the configuration layer, and the second custom component built into the implementation layer, and using the original Element Plus component, the second custom component and / or the first custom component as subcomponents respectively; Constructing a component built-in user input component set based on the subcomponents; Constructing a form component and / or a table component based on the built-in user input component set of the component; Obtain a paging component, and construct a table component with search and paging based on the form component, the table component and the paging component; Obtain an enhanced pop-up window component with an added optimization function, and embed the form component in the enhanced pop-up window component to obtain a form pop-up window component; wherein the optimization function attributes corresponding to the enhanced pop-up window component at least include: a data submission interface, a data update interface, a primary key field name, whether to close the pop-up window after the interface request is completed, a prompt text after the interface request is successful, a callback function, an interceptor before the interface request, and an interceptor after the interface response; The form component, the table component, the table component with search and paging, and the form pop-up window component are respectively used as business components to form a component core library package.

3. The method according to claim 2, characterized in that The component built-in user input component set includes user input type components, each of which is a subcomponent constituting the form; each of the subcomponents corresponds to a corresponding component instance, component attribute, component value, preview mode, and formatted text; Accordingly, the step of constructing a form component based on the component built-in user input component set includes: A form component is configured by at least two subcomponents, and the corresponding components, labels and props under the subcomponents; wherein the width corresponding to each user input type component in the form component is set by the attribute itemMinWidth; the width is adaptively adjusted according to the size of the user's browser window; and the spacing between the rows and columns corresponding to each user input type component is respectively adjusted by the attributes rowGap and columnGap.

4. The method according to claim 2, characterized in that: The method of constructing a table component with search and paging based on the form component, the table component and the paging component includes: Configure the query condition field in the form component, configure the table display field in the table component, and configure the paging field in the paging component; Integrate the configured form component, table component and paging component to obtain a table component with search and paging.

5. The method according to claim 1, characterized in that The global configuration file at least includes: an interceptor before a global interface request; an interceptor after a global interface response; a global dictionary acquisition method; the inline form mode in the form component, whether it is a preview mode, the minimum width of each item in the form, the spacing between each row, and the spacing between each column; the display style of the table component when there is no data, whether it is displayed in the center; the key corresponding to the current page of the table component with search and paging when requesting the interface, the key corresponding to the total number of pages when requesting the interface, the default number of rows displayed for the number of search items, responseAfter, requestsBefore, and dictionary acquisition code; Accordingly, the implementation layer obtains the global configuration file from the configuration layer, and uses the global configuration file to configure the global default attributes of each business component in the component library core package, and obtains the corresponding new business component with specific global default attributes, including: Traversing each business component in the core package of the component library, respectively obtaining the corresponding original default attributes for each business component, and obtaining the pre-configured global default configuration attributes from the global configuration file; The original default attribute corresponding to the business component is merged with the global default configuration attribute, the merged attribute is used as the target default attribute of the business component, and the business component with the target default attribute is used as the new business component with the specific global default attribute.

6. The method according to claim 1, characterized in that Each business component in the component core package corresponds to a corresponding component attribute and a global default attribute; the component attribute and the global default attribute corresponding to each business component have an attribute priority; the attribute priority includes: the priority of the component attribute is greater than the global default attribute.

7. The method according to claim 1, characterized in that The UI business theme is constructed based on a pre-configured business theme template; the business theme template includes at least: a global primary color, a status color, a global font color, and a background color; wherein the global primary color includes: a theme color and a theme color; the status color includes: a warning item color, an error item color, a success item color, a failure item color, and a danger item color; Correspondingly, the implementation layer obtains the UI service theme from the configuration layer, and uses the UI service theme to perform UI theme configuration on the new service component, including: According to the requirements of different business systems, business UI themes that meet the requirements of the business systems are customized according to the UI theme templates to perform global theme configuration.

8. The method according to claim 1, characterized in that The method further comprises: A logic program for querying enumerated data and automatically converting the encoding to Chinese description is configured in the subcomponent with enumerated data selection corresponding to each business component in the core package of the component library, so that when a user's enumerated data request for the subcomponent is received, the request code sent by the corresponding subcomponent is used to find the Chinese version of the corresponding enumerated data and return it for Chinese display.

9. The method according to claim 1, characterized in that: The method further includes: using typescript technology to prompt subcomponents included in the business component, and attribute information supported by each of the business components and each of the subcomponents.

10. A construction system for a business UI component library based on the Vue3 core system, characterized in that: The construction system includes: a dependency layer, an implementation layer, a configuration layer and an application layer; The dependency layer is used to provide the original Element Plus components for the implementation layer to call; The configuration layer is used to configure the global configuration file, the first custom component secondary developed by the user, and the UI theme for use by the implementation layer; The implementation layer is used for the implementation layer to call the original Element Plus library contained in the dependency layer, and / or the first custom component secondary developed by the user in the configuration layer and the second custom component built into the implementation layer, so as to build a component library core package containing at least two business components; wherein the business components at least include a form component, a table component, a table component with search and paging, and a form pop-up window component; the original Element Plus library includes: the original Element Plus component; The implementation layer is used to obtain a global configuration file from the configuration layer, and use the global configuration file to perform global default attribute configuration on each business component in the core package of the component library to obtain a corresponding new business component with specific global default attributes; The implementation layer is used to obtain the UI business theme from the configuration layer, and use the UI business theme to perform UI theme configuration on the new business component, and use each new business component after the UI theme configuration as a target business component for use in the application layer.

Images