CN116909674A

CN116909674A - User interface configuration method, device and storage medium

Info

Publication number: CN116909674A
Application number: CN202310993451.9A
Authority: CN
Inventors: 王晓虎; 陈俊霖
Original assignee: Zhejiang Geely Holding Group Co Ltd; Guangyu Mingdao Digital Technology Co Ltd
Current assignee: Zhejiang Geely Holding Group Co Ltd; Guangyu Mingdao Digital Technology Co Ltd
Priority date: 2023-08-08
Filing date: 2023-08-08
Publication date: 2023-10-20

Abstract

The invention relates to the field of user interface development and discloses a user interface configuration method, a device and a storage medium, wherein the method comprises the steps of creating a user interface theme and storing corresponding theme information in a database; matching the npm private library installation packages according to the theme names and the theme descriptions to obtain corresponding historical installation packages; analyzing the history installation package, extracting a first character string, rendering a user interface theme according to the first character string, and generating a current theme interface, wherein the character string is a json character string; configuring a current topic interface based on a preset topic specification to obtain a current topic version, and storing the current topic version and a current version number in version information of a database; and extracting a second character string of the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library. The user directly completes the configuration of the current theme on the website and issues the version of the current theme in the npm private library, so that the redundant work of the user interface configuration is reduced.

Description

User interface configuration method, device and storage medium

Technical Field

The present invention relates to the field of user interface development, and in particular, to a user interface configuration method, apparatus, and storage medium.

Background

With the enhancement of unified management awareness of enterprises, unified UI (User Interface) theme specifications are also provided for UI theme of enterprises, and in order to adapt to the development requirements of enterprises, the UI theme specifications are continuously updated in an iterative manner. After the UI theme specifications are iteratively updated, each project UI theme also needs to adapt to the latest UI theme specifications of the enterprise when each project group of the enterprise is developed.

In the related art, the UI theme of each project group is maintained by a programmer of a single project group, that is, codes of the latest UI theme specification are manually written and released to a npm (node package manager ) private library for the project group to use, in this process, when each project group is developed, codes of the latest UI theme specification need to be continuously written for each project, so that UI theme maintenance is completed to adapt to the latest UI theme specification of an enterprise, and a great deal of redundancy work is caused for developing each project.

Disclosure of Invention

The following presents a simplified summary in order to provide a basic understanding of some aspects of the disclosed embodiments. This summary is not an extensive overview, and is intended to neither identify key/critical elements nor delineate the scope of such embodiments, but is intended as a prelude to the more detailed description that follows.

In view of the above-mentioned shortcomings of the prior art, the present invention discloses a user interface configuration method, apparatus and storage medium, so as to reduce redundant work of configuring item UI topics by each item group of an enterprise when the UI topic specification of the enterprise is updated iteratively.

The invention provides a user interface configuration method, which comprises the following steps: creating a user interface theme, and storing theme information corresponding to the user interface theme in a database, wherein the theme information comprises a theme name, a theme description, an installation package name and version information, and the installation package is a npm package; matching the installation packages in the npm private library according to the theme names and the theme descriptions to obtain corresponding historical installation packages, wherein the npm private library stores a plurality of historical installation packages; analyzing the history installation package, extracting a first character string, and rendering the user interface theme according to the first character string to generate a current theme interface, wherein the character string is a json character string; configuring the current theme interface based on a preset theme specification to obtain a current theme version, and storing the current theme version and a corresponding current version number in version information of the database; and extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library.

Optionally, matching the installation package in the npm private library according to the theme name and the theme description to obtain a corresponding historical installation package, including: connecting the npm private library with the database so as to communicate data; determining historical topic versions from the database according to the topic names and the topic descriptions, wherein each topic version has a version number corresponding to one; inquiring and obtaining corresponding historical version numbers from the database based on the historical topic version, wherein each version number corresponds to one installation package; and matching the npm private library based on the history version number to obtain the history installation package corresponding to the history version number.

Optionally, configuring the current theme interface based on a preset theme specification includes: acquiring a first theme configuration parameter in the preset theme specification, configuring the current theme interface in a theme configuration interface according to the first theme configuration parameter, generating a new theme configuration interface and previewing, wherein the first theme configuration parameter comprises at least one of a first color parameter, a first size parameter and a first style parameter; or accessing an external user interface library into the theme configuration interface, and selecting an external theme in the external user interface library based on the preset theme specification; writing the topic content codes corresponding to the external topic into the coding region of the topic configuration interface, loading the topic content codes to obtain second topic configuration parameters to configure the current topic interface, generating a new topic configuration interface and previewing, wherein the second topic configuration parameters comprise at least one of second color parameters, second size parameters and second style parameters.

Optionally, configuring the current theme interface based on a preset theme specification further includes: evaluating the colors, the sizes and the styles presented by the new theme configuration interface to respectively obtain color evaluation scores, size evaluation scores and style evaluation scores; respectively comparing the color evaluation score, the size evaluation score and the style evaluation score with the corresponding first pre-evaluation score threshold value for one time, and adjusting at least one configuration parameter of the color parameter, the size parameter and the style parameter according to a first comparison result to obtain a third theme configuration parameter; performing primary optimization configuration on the current theme interface according to the third theme configuration parameters, and evaluating the overall effect presented by the theme configuration interface corresponding to the primary optimization configuration to obtain an overall effect evaluation score; performing secondary comparison on the overall effect evaluation score and a second evaluation score threshold, and adjusting at least one configuration parameter of the color parameter, the size parameter and the style parameter according to a secondary comparison result to obtain a fourth theme configuration parameter; and performing secondary optimal configuration on the current theme interface according to the fourth theme configuration parameters until the overall effect evaluation score reaches the second evaluation score threshold value, and completing configuration of the current theme interface.

Optionally, extracting a second string corresponding to the current theme version, compiling and packaging the second string into a new installation package, and publishing the new installation package to the npm private library, including: after receiving a release request of a target user, acquiring the current theme version from the database based on the current version number carried in the release request; reading the current theme version to obtain the second character string, compiling and packaging the second character string into Cheng Xinan packages, and storing the Cheng Xinan packages in the npm private library; and responding to the release request, writing the theme name, and packaging the new installation in the npm private library for release.

Optionally, before creating the user interface theme, the method further comprises: after receiving a login request of the target user, acquiring first user information carried in the login request; checking the first user information based on a target user information base, and determining whether the target user has authority or not, wherein the user information of each target user is stored in the target user information base; if the target user is determined to have no authority, displaying that logging in npm the private library fails; and if the target user has the authority, displaying that the login npm private library is successful, and entering a theme creation interface.

Optionally, after compiling and packaging the second string into a new installation package to be released to the npm private library, the method further includes: acquiring second user information of the target user, and auditing the second user information based on the target personnel information base; when the auditing result is that the auditing result is passed, the calling request input by the target user is obtained, wherein the calling request carries the installation package name; and searching and obtaining the new installation package in the npm private library based on the installation package name, and calling the current installation package in response to the calling request.

Optionally, in the database, a primary version and a secondary version are corresponding to the same topic name, wherein the version which is not subjected to modification editing is the primary version, the version after modification editing is the secondary version, and each historical topic version in the secondary version is ordered according to the update time, and the method further comprises: when rendering abnormality occurs in the current theme interface rendering, matching a latest history installation package corresponding to a latest version number in the npm library; and analyzing the latest history installation package to extract a third character string, and performing rendering anomaly investigation according to the third character string.

The invention provides a user interface configuration device, comprising: the system comprises a creation module, a storage module and a storage module, wherein the creation module is used for creating a user interface theme, and storing theme information corresponding to the user interface theme in a database, wherein the theme information comprises a theme name, a theme description, an installation package name and version information, and the installation package is a npm package; the acquiring module is used for matching the installation package in the npm private library according to the theme name and the theme description to acquire a corresponding historical installation package, and the npm private library stores a plurality of historical installation packages; the generation module is used for analyzing the history installation package, extracting a first character string, and rendering the user interface theme according to the first character string to generate a current theme interface, wherein the character string is a json character string; the configuration module is used for configuring the current theme interface based on a preset theme specification to obtain a current theme version, and storing the current theme version and a corresponding current version number in version information of the database; and the publishing module is used for extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library.

The present invention provides a computer-readable medium having stored thereon a computer program for causing a computer to perform the above-described method.

The invention has the beneficial effects that:

firstly, creating a user interface theme, storing a theme name, a theme description, an installation package name and version information corresponding to the user interface theme in a database, then matching an installation package in a npm private library according to the theme name and the theme description, acquiring a corresponding historical installation package, analyzing and extracting a first character string, rendering the user interface theme according to the first character string to generate a current theme interface, configuring the current theme interface based on a preset theme specification to obtain a current theme version, storing the current theme version and a corresponding current version number in version information of the database, finally extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, publishing the new installation package to a npm private library, manually compiling a code of a latest UI theme specification by a programmer, publishing the code of the latest UI theme specification to the npm private library, carrying on line, executing related command configuration theme content in a program by the user operation, publishing the code to the npm private library, fully exchanging the work of the UI theme in accordance with the UI theme specification by the programmer, calling the latest UI version npm when the latest theme version is needed, and directly maintaining the UI in order of the latest UI, and maintaining the redundancy of the UI.

Drawings

FIG. 1 is a flow chart of a user interface configuration method according to an embodiment of the present invention;

FIG. 2 is a schematic diagram of a theme creation interface in an embodiment of the present invention;

FIG. 3 is a schematic diagram of a theme configuration interface in accordance with embodiments of the present invention;

FIG. 4 is a flow chart of a method for obtaining a history installation package according to an embodiment of the present invention;

FIG. 5 is a schematic diagram of a configuration of a current theme interface in an embodiment of the present invention;

FIG. 6 is a schematic diagram of another configuration of the current theme interface in an embodiment of the present invention;

FIG. 7 is a flow chart of a configuration of a current theme interface according to an embodiment of the present invention;

FIG. 8 is a flow chart of a method for publishing a current topic version in accordance with an embodiment of the invention;

FIG. 9 is a schematic diagram of a current topic version publishing interface in accordance with an embodiment of the present invention;

FIG. 10 is a schematic diagram of a user interface configuration device according to an embodiment of the present invention;

fig. 11 is a schematic diagram of an electronic device in an embodiment of the invention.

Detailed Description

Other advantages and effects of the present invention will become apparent to those skilled in the art from the following disclosure, which describes the embodiments of the present invention with reference to specific examples. The invention may be practiced or carried out in other embodiments that depart from the specific details, and the details of the present description may be modified or varied from the spirit and scope of the present invention. It should be noted that, without conflict, the following embodiments and sub-samples in the embodiments may be combined with each other.

It should be noted that the illustrations provided in the following embodiments merely illustrate the basic concept of the present invention by way of illustration, and only the components related to the present invention are shown in the drawings and are not drawn according to the number, shape and size of the components in actual implementation, and the form, number and proportion of the components in actual implementation may be arbitrarily changed, and the layout of the components may be more complicated.

In the following description, numerous details are set forth in order to provide a more thorough explanation of embodiments of the present invention, it will be apparent, however, to one skilled in the art that embodiments of the present invention may be practiced without these specific details, in other embodiments, well-known structures and devices are shown in block diagram form, rather than in detail, in order to avoid obscuring the embodiments of the present invention.

The terms first, second and the like in the description and in the claims of the embodiments of the disclosure and in the above-described figures are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate in order to describe embodiments of the present disclosure. Furthermore, the terms "comprise" and "have," as well as any variations thereof, are intended to cover a non-exclusive inclusion.

The term "plurality" means two or more, unless otherwise indicated.

In the embodiment of the present disclosure, the character "/" indicates that the front and rear objects are an or relationship. For example, A/B represents: a or B.

The term "and/or" is an associative relationship that describes an object, meaning that there may be three relationships. For example, a and/or B, represent: a or B, or, A and B.

With the enhancement of unified management awareness of enterprises, unified UI theme specifications are also provided for UI themes of the enterprises, and the UI theme specifications are continuously updated iteratively in order to adapt to the development requirements of the enterprises. After the UI theme specifications are iteratively updated, each project UI theme also needs to adapt to the latest UI theme specifications of the enterprise when each project group of the enterprise is developed. The UI theme of each project group is maintained by a programmer of a single project group, that is, codes of the latest UI theme specification are manually written and released to a npm private library for the project group to use, when each project group is developed, codes of the latest UI theme specification are required to be continuously written for each project, and the UI theme maintenance is completed to adapt to the latest UI theme specification of an enterprise, so that a great deal of redundant work is undoubtedly caused for each project development.

Note that npm is a management tool, and operations of installing, sharing, distributing codes and managing dependencies of the npm package can be completed through npm, and each process is fully automatically processed, so npm brings a certain convenience to a developer.

As shown in connection with fig. 1, an embodiment of the present disclosure provides a user interface configuration method, including:

step S101, creating a user interface theme and storing theme information corresponding to the user interface theme in a database.

The theme information is basic information edited by creating a user interface theme and comprises a theme name, a theme description, an installation package name and version information, wherein the installation package is a npm package, please refer to fig. 2, fig. 2 is a schematic diagram of a theme creation interface in an embodiment of the present invention, as shown in fig. 2, the theme information comprises the theme name, the description, the installation package name and the version information, the version information is each theme version corresponding to the theme name and a corresponding version number, called draft version, and a new theme can be edited based on the version. It should be noted that, the topic information further includes an update time, which refers to a time when the topic version is configured and stored in the database, and each draft version is stored in order according to the update time, so as to obtain version numbers in order. In addition, an edit theme button and a release button are arranged in the theme creation interface, and when a user clicks, theme editing or theme release can be performed.

Step S102, matching the installation package in the npm private library according to the theme name and the theme description, and obtaining a corresponding historical installation package.

The npm private library stores a plurality of history installation packages, namely installation packages corresponding to each modified and edited version, and the same theme name and theme description correspond to a plurality of history theme versions, namely corresponding to each history installation package, and the history installation package acquired in the embodiment is the latest history installation package.

Step S103, the analysis history installation package extracts a first character string, and renders the user interface theme according to the first character string to generate a current theme interface.

The character string is a json character string, a simple and clear hierarchical structure is easy to read and write, machine analysis and generation are easy, and data transmission efficiency can be effectively improved. Referring to fig. 3, fig. 3 is a schematic diagram of a theme configuration interface in an embodiment of the present invention, and as shown in fig. 3, the right side is a preview effect of a current theme interface.

Step S104, configuring a current theme interface based on a preset theme specification to obtain a current theme version, and storing the current theme version and a corresponding current version number in version information of a database.

With continued reference to fig. 3, as shown on the left side of fig. 3, the current theme interface may be configured with color, size, style, etc. according to a preset theme specification.

Step S105, extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library.

By adopting the user interface configuration method provided by the embodiment of the disclosure, firstly, a user interface theme is created, a theme name, a theme description, an installation package name and version information corresponding to the user interface theme are stored in a database, then an installation package in a npm private library is matched according to the theme name and the theme description, a corresponding historical installation package is obtained, a first character string is analyzed and extracted, the user interface theme is rendered according to the first character string, so as to generate a current theme interface, the current theme interface is configured based on a preset theme specification, so as to obtain a current theme version, the current theme version and a corresponding current version number are stored in version information of the database, finally, a second character string corresponding to the current theme version is extracted, the second character string is compiled and packaged into a new installation package and released to a npm private library, the UI theme configuration is manually written by a programmer and released to a npm private library, related command configuration content can be executed in the program through user operation and released to the npm private library, the program can be processed according to the UI theme version, the current theme version and the current version is required to be directly used in the UI version of the UI, and the redundancy version is convenient to develop and maintain the latest theme in the UI.

Optionally, referring to fig. 4, fig. 4 is a flowchart of a method for obtaining a history installation package according to an embodiment of the present invention. As shown in fig. 4, matching the installation package in the npm private library according to the theme name and the theme description, and obtaining the corresponding historical installation package at least includes steps S401 to S404, as follows: step S401, connecting a npm private library with a database to enable data to be communicated; step S402, determining historical topic versions from a database according to topic names and topic descriptions, wherein each topic version has a version number corresponding to one; step S403, inquiring and obtaining corresponding historical version numbers from a database based on the historical subject version, wherein each version number corresponds to one installation package; and step S404, matching the npm private library based on the history version number to obtain a history installation package corresponding to the history version number.

Optionally, configuring the current theme interface based on the preset theme specification includes: acquiring a first theme configuration parameter in a preset theme specification, configuring a current theme interface in the theme configuration interface according to the first theme configuration parameter, generating a new theme configuration interface and previewing, wherein the first theme configuration parameter comprises at least one of a first color parameter, a first size parameter and a first style parameter; or accessing the external user interface library into a theme configuration interface, and selecting an external theme in the external user interface library based on a preset theme specification; writing the theme content codes corresponding to the external theme into the coding area of the theme configuration interface, loading the theme content codes to obtain second theme configuration parameters to configure the current theme interface, generating a new theme configuration interface and previewing, wherein the second theme configuration parameters comprise at least one of second color parameters, second size parameters and second style parameters.

In this embodiment, the configuration of the current theme interface includes configuring the theme configuration interface according to a preset theme specification and selecting an external theme to configure the theme configuration interface according to the preset theme specification, and configuring the current theme interface according to any one of two modes is only needed when configuring the current theme interface. Referring to fig. 5, fig. 5 is a schematic diagram illustrating a configuration of a current theme interface in an embodiment of the present invention, where the configuration of the current theme interface includes, but is not limited to, configuration of colors, sizes, and styles, and the configuration of the current theme interface is performed by obtaining a first theme configuration parameter in a preset theme specification, that is, at least one of the first color parameter, the first size parameter, and the first style parameter, and configuring the current theme interface in the theme configuration interface according to the first theme configuration parameter, so as to generate a new theme configuration interface and preview the current theme interface in a right area as shown in fig. 5.

It should be noted that, please continue to refer to fig. 5, a JSON button and a save button are provided at the lower right corner of the theme configuration interface, and if the configuration of the current theme interface is completed, the save button may be clicked to save the current theme version. If an external theme is selected to be configured on a theme configuration interface according to a preset theme specification, that is, a JSON button is clicked to select the external theme, fig. 6 is a schematic configuration diagram of another current theme interface in an embodiment of the present invention, as shown in fig. 6, after the JSON button is clicked, the theme configuration interface pops up a popup window of a theme content code, copies the content code of the external theme into a text region of text, and then uses the external theme, where the use-dependent operation logic is a method provided according to an external user interface library, and takes an anti (UI library in an ali) theme injection mode as an example, and uses the method in a file: < ConfigProvider theme = { the theme config }, loading the theme content code to obtain a second theme configuration parameter, that is, at least one of a second color parameter, a second size parameter, and a second style parameter, to configure the current theme interface, generate a new theme configuration interface, and preview the new theme configuration interface.

Optionally, referring to fig. 7, fig. 7 is a schematic flow chart of configuring a current theme interface according to an embodiment of the present invention. As shown in fig. 7, configuring the current theme interface based on the preset theme specification includes at least steps S701 to S705, as follows: step S701, evaluating the colors, the sizes and the styles presented by the new theme configuration interface to respectively obtain color evaluation scores, size evaluation scores and style evaluation scores; step S702, respectively comparing the color evaluation score, the size evaluation score and the style evaluation score with the corresponding first pre-evaluation score threshold value once, and adjusting at least one configuration parameter of the color parameter, the size parameter and the style parameter according to the first comparison result to obtain a third theme configuration parameter; step S703, performing primary optimization configuration on the current theme interface according to the third theme configuration parameters, and evaluating the overall effect presented by the theme configuration interface corresponding to the primary optimization configuration to obtain an overall effect evaluation score; step S704, the overall effect evaluation score is secondarily compared with a second evaluation score threshold, and at least one configuration parameter of the color parameter, the size parameter and the style parameter is adjusted according to the secondary comparison result to obtain a fourth theme configuration parameter; and step S705, performing secondary optimization configuration on the current theme interface according to the fourth theme configuration parameters until the overall effect evaluation score reaches a second evaluation score threshold value, and completing the configuration of the current theme interface.

In the embodiment, the current theme interface is optimized twice, the colors, the sizes, the styles and the like of the current theme are optimized respectively once, and the colors, the sizes, the styles and the like are optimized integrally once, so that the current theme interface is ensured to obtain a better visual effect.

For example, referring to fig. 5, in the left side of fig. 5, the colors of the current theme interface are configured, including the main color of the brand, the light background color of the main color, the color of the main color drawing border, etc., the color block of the left menu may be clicked, and the pop-up window may have a color-taking frame for modifying the colors, and the component set rendered on the right side may change accordingly. The main colors of the brands can influence the colors of most patterns, and the main colors such as successful colors, warning colors, error colors, information colors, neutral colors and the like can be configured according to the needs, and the unconfigured content is automatically configured as default colors. It should be noted that, the color parameters include, but are not limited to, a background color for generating the current theme interface and a font color, a button color, and an icon color for configuring the current theme interface, and adjusting the color parameters includes adjusting at least one of hue, brightness, and saturation parameters of different colors in the color parameters in combination with color matching effects of the background color, the theme color, the button color, the icon color, and the like. And the size and style configuration of the interface is also configured according to specific requirements.

Optionally, referring to fig. 8, fig. 8 is a flowchart of publishing a current theme version in an embodiment of the present invention, and as shown in fig. 8, extracting a second string corresponding to the current theme version, compiling and packaging the second string into a new installation package, and publishing the new installation package to a npm private library at least includes steps S801 to S803, where the steps are as follows: step S801, after receiving a release request of a target user, acquiring a current theme version from a database based on a current version number carried in the release request; step S802, reading the current theme version to obtain a second character string, compiling and packaging the second character string into Cheng Xinan packages and storing the 8625 packages in a npm private library; in step S803, the writing of the installation package name is performed in response to the release request, and the new installation package is released in the npm private library.

In this embodiment, please continue with fig. 5, after completing the configuration of the current theme interface, the target user clicks the save button in the lower right corner, i.e. jumps to the theme creation page, then clicks the publish button in the theme creation page, and publishes the current theme version to the npm private library. Referring to fig. 9, fig. 9 is a schematic diagram of a current topic version release interface in an embodiment of the present invention, as shown in fig. 9, after a target user clicks a release button, a release request of the target user is received, where the release request carries a current version number, the current topic version is obtained from a database according to the current version number, a second string is obtained by reading the current topic version, then the second string is compiled and packaged into a new installation package and stored in a npm private library, and the release interface has a version number description of the latest version in the npm private library before release of the current topic version and a version number description after release of the current topic version, finally, writing a topic name in response to the release request, clicking a determination button, and releasing the new installation package in the npm private library. It should be appreciated that the new installation package does not overwrite the historical installation package, but is stored in order of version number.

Optionally, before creating the user interface theme, the method further comprises: after receiving a login request of a target user, acquiring first user information carried in the login request; checking the first user information based on a target user information base, and determining whether the target user has authority, wherein the target user information base stores the user information of each target user; if the target user is determined to have no authority, displaying that the login npm private library fails; if the target user is determined to have authority, the user displays that the login npm private library is successful and enters the theme creation interface.

It should be noted that, the configuration of the UI theme interface of the enterprise needs to perform identity verification on the target user, the target user logs in by an account manner and sends out a login request, the embodiment does not limit the login manner of the target user, after receiving the login request of the target user, first user information carried in the login request is obtained, the first user information is audited based on user information stored in the target user information base, after determining that the target user has login permission, the user information displays that the login npm private base is successful, and then the user enters the theme creation interface, and the target user in the enterprise has permission to prevent external personnel from logging in and ensure the normative management of the UI theme of the enterprise.

Optionally, after compiling and packaging the second string into a new installation package and publishing the new installation package to the npm private library, the method further comprises: acquiring second user information of a target user, and auditing the second user information based on a target personnel information base; when the auditing result is passed, acquiring a calling request input by a target user, wherein the calling request carries an installation package name; and searching and obtaining a new installation package in a npm private library based on the installation package name, and calling the current installation package in response to the calling request.

It should be noted that, the new installation package in the npm private library can be called by the target user in the enterprise, but identity verification is also required during the calling, and only when the identity verification is successful, the target personnel can call the new installation package. Avoiding the random call of an external person, the call of the new installation package comprises, but is not limited to, downloading, introducing and the like, wherein the operation logic of downloading the new installation package is input npminstall '@ gplus-packages/the me-geega', and the operation logic of introducing the installation package is input import themeConfig from '@ gplus-packages/the me-geega'.

Optionally, in the database, a primary version and a secondary version are corresponding to the same topic name, wherein the version which is not subjected to modification editing is the primary version, the version which is subjected to modification editing is the secondary version, and each historical topic version in the secondary version is ordered according to the update time, and the method further comprises: when rendering abnormality occurs in the current theme interface rendering, matching a latest history installation package corresponding to a latest version number in a npm library; and analyzing the latest history installation package to extract a third character string, and performing rendering anomaly investigation according to the third character string.

It should be noted that, when an incompatible API is changed, the major version number (x) needs to be increased, the minor version number (y) needs to be increased, and when a backward compatible function is added, the minor version number (y) needs to be increased, and when a backward compatible error is repaired, the revision number (z) needs to be increased, and the version number of the current theme version is x.y.z.

In this embodiment, with continued reference to fig. 2, each of the historical subject versions in the secondary version, i.e., the draft version, is ordered by version number at the update time, as indicated by the version number in fig. 2. When the rendering abnormality occurs in the rendering of the current theme interface, a latest history installation package corresponding to the latest version number is matched in a npm library, the latest history installation package is analyzed to extract a third character string, the rendering abnormality is checked according to the third character string, and the rendering abnormality is repaired so as to continuously complete the configuration of the current theme version.

By adopting the user interface configuration method provided by the embodiment of the disclosure, firstly, a user interface theme is created, a theme name, a theme description, an installation package name and version information corresponding to the user interface theme are stored in a database, then an installation package in a npm private library is matched according to the theme name and the theme description, a corresponding historical installation package is obtained, a first character string is analyzed and extracted, the user interface theme is rendered according to the first character string, so as to generate a current theme interface, the current theme interface is configured based on a preset theme specification, so as to obtain a current theme version, the current theme version and a corresponding current version number are stored in version information of the database, finally a second character string corresponding to the current theme version is extracted, and the second character string is compiled and packaged into a new installation package which is issued to the npm private library, so that the method has the following advantages:

Firstly, manually writing a code of the latest UI theme specification by a programmer and publishing the code to a npm private library, wherein related command configuration theme contents can be executed in the program and published to the npm private library through user operation, and target personnel of enterprises can complete configuration of a user interface and publish the configuration in the npm private library;

secondly, the programmer is fully handed over to the UI for modifying the project UI topic according to the UI topic specification, when the latest topic version needs to be used, the target user can directly call in the npm private library, so that the UI topic maintenance of each project group is facilitated to adapt to the latest UI topic specification of an enterprise, and redundant work of each project development is reduced.

As shown in conjunction with fig. 10, an embodiment of the present disclosure provides a user interface configuration apparatus, which at least includes a creation module 1001, an acquisition module 1002, a generation module 1003, a configuration module 1004, and a publishing module 1005. The creating module 1001 is configured to create a user interface theme, and store theme information corresponding to the user interface theme in a database, where the theme information includes a theme name, a theme description, an installation package name, and version information, and the installation package is a npm package; the obtaining module 1002 is configured to match the installation package in the npm private library according to the theme name and the theme description, obtain a corresponding historical installation package, and store a plurality of historical installation packages in the npm private library; the generating module 1003 is configured to parse the history installation package, extract a first character string, and render a user interface theme according to the first character string, so as to generate a current theme interface, where the character string is a json character string; the configuration module 1004 is configured to configure a current topic interface based on a preset topic specification, obtain a current topic version, and store the current topic version and a corresponding current version number in version information of a database; the publishing module 1005 is configured to extract a second string corresponding to the current theme version, compile and encapsulate the second string into a new installation package, and publish the new installation package to the npm private library.

By adopting the user interface configuration device provided by the embodiment of the disclosure, firstly, a user interface theme is created, a theme name, a theme description, an installation package name and version information corresponding to the user interface theme are stored in a database, then an installation package in a npm private library is matched according to the theme name and the theme description, a corresponding historical installation package is obtained, a first character string is analyzed and extracted, the user interface theme is rendered according to the first character string, so as to generate a current theme interface, the current theme interface is configured based on a preset theme specification, so as to obtain a current theme version, the current theme version and a corresponding current version number are stored in version information of the database, finally, a second character string corresponding to the current theme version is extracted, the second character string is compiled and packaged into a new installation package and released to a npm private library, the UI theme configuration is manually written by a programmer and released to a npm private library, related command configuration content can be executed in the program through user operation and released to the npm private library, the program can be processed according to the UI theme version, the current theme version and the current version is required to be directly used in the UI version of the UI, and the redundancy version is convenient to develop and maintain the UI in the most appropriate mode.

Fig. 11 shows a schematic diagram of a computer system suitable for use in implementing an embodiment of the application. It should be noted that, the computer system 1100 of the electronic device shown in fig. 11 is only an example, and should not impose any limitation on the functions and the application scope of the embodiments of the present application.

As shown in fig. 11, the computer system 1100 includes a central processing unit (Central Processing Unit, CPU) 1101 that can perform various appropriate actions and processes, such as performing the method in the above-described embodiment, according to a program stored in a Read-Only Memory (ROM) 1102 or a program loaded from a storage portion 11011 into a random access Memory (Random Access Memory, RAM) 1103. In the RAM 1103, various programs and data required for system operation are also stored. The CPU 1101, ROM 1102, and RAM 1103 are connected to each other by a bus 1104. An Input/Output (I/O) interface 1105 is also connected to bus 1104.

The following components are connected to the I/O interface 1105: an input section 1106 including a keyboard, a mouse, and the like; an output portion 1107 including a Cathode Ray Tube (CRT), a liquid crystal display (Liquid Crystal Display, LCD), and a speaker; a storage section 1108 including a hard disk or the like; and a communication section 1109 including a network interface card such as a LAN (Local Area Network ) card, a modem, or the like. The communication section 1109 performs communication processing via a network such as the internet. The drive 1110 is also connected to the I/O interface 1105 as needed. Removable media 1111, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like, is installed as needed on drive 1110, so that a computer program read therefrom is installed as needed into storage section 1108.

In particular, according to embodiments of the present application, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising a computer program for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication portion 1109, and/or installed from the removable media 1111. When executed by a Central Processing Unit (CPU) 1101, performs the various functions defined in the system of the present application.

It should be noted that, the computer readable medium shown in the embodiments of the present application may be a computer readable signal medium or a computer readable storage medium, or any combination of the two. The computer readable storage medium may be, for example, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of the computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-Only Memory (ROM), an erasable programmable read-Only Memory (Erasable Programmable Read Only Memory, EPROM), flash Memory, an optical fiber, a portable compact disc read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer-readable signal medium may comprise a data signal propagated in baseband or as part of a carrier wave, with a computer-readable computer program embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. A computer program embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

The disclosed embodiments also provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements any of the methods of the present embodiments.

The computer readable storage medium in the embodiments of the present disclosure may be understood by those of ordinary skill in the art: all or part of the steps for implementing the method embodiments described above may be performed by computer program related hardware. The aforementioned computer program may be stored in a computer readable storage medium. The program, when executed, performs steps including the method embodiments described above; and the aforementioned storage medium includes: various media that can store program code, such as ROM, RAM, magnetic or optical disks.

The electronic device disclosed in this embodiment includes a processor, a memory, a transceiver, and a communication interface, where the memory and the communication interface are connected to the processor and the transceiver and perform communication therebetween, the memory is used to store a computer program, the communication interface is used to perform communication, and the processor and the transceiver are used to run the computer program, so that the electronic device performs each step of the above method.

In this embodiment, the memory may include a random access memory (Random Access Memory, abbreviated as RAM), and may further include a non-volatile memory (non-volatile memory), such as at least one magnetic disk memory.

The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU for short), a graphics processor (Graphics Processing Unit, GPU for short), a network processor (Network Processor, NP for short), etc.; but also digital signal processors (Digital Signal Processing, DSP for short), application specific integrated circuits (Application Specific Integrated Circuit, ASIC for short), field-programmable gate arrays (Field-Programmable Gate Array, FPGA for short) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

The above description and the drawings illustrate embodiments of the disclosure sufficiently to enable those skilled in the art to practice them. Other embodiments may involve structural, logical, electrical, process, and other changes. The embodiments represent only possible variations. Individual components and functions are optional unless explicitly required, and the sequence of operations may vary. Portions and sub-samples of some embodiments may be included in or substituted for portions and sub-samples of other embodiments. Moreover, the terminology used in the present application is for the purpose of describing embodiments only and is not intended to limit the claims. As used in the description of the embodiments and the claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. Similarly, the term "and/or" as used in this disclosure is meant to encompass any and all possible combinations of one or more of the associated listed. In addition, when used in this disclosure, the terms "comprises," "comprising," and/or variations thereof mean the presence of the stated sub-sample, integer, step, operation, element, and/or component, but do not exclude the presence or addition of one or more other sub-samples, integers, steps, operations, elements, components, and/or groups of these. Without further limitation, an element defined by the phrase "comprising one …" does not exclude the presence of other like elements in a process, method or apparatus comprising such elements. In this context, each embodiment may be described with emphasis on the differences from the other embodiments, and the same similar parts between the various embodiments may be referred to each other. For the methods, products, etc. disclosed in the embodiments, if they correspond to the method sections disclosed in the embodiments, the description of the method sections may be referred to for relevance.

Those of skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. The skilled person may use different methods for each particular application to achieve the described functionality, but such implementation should not be considered to be beyond the scope of the embodiments of the present disclosure. It will be clearly understood by those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described systems, apparatuses and units may refer to corresponding procedures in the foregoing method embodiments, which are not described herein again.

In the embodiments disclosed herein, the disclosed methods, articles of manufacture (including but not limited to devices, apparatuses, etc.) may be practiced in other ways. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of elements may be merely a logical functional division, and there may be additional divisions in actual implementation, e.g., multiple elements or components may be combined or integrated into another system, or some sub-samples may be omitted, or not performed. In addition, the coupling or direct coupling or communication connection shown or discussed with each other may be through some interface, device or unit indirect coupling or communication connection, which may be in electrical, mechanical or other form. The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed over a plurality of network units. Some or all of the units may be selected according to actual needs to implement the present embodiment. In addition, each functional unit in the embodiments of the present disclosure may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit.

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). In some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. In the description corresponding to the flowcharts and block diagrams in the figures, operations or steps corresponding to different blocks may also occur in different orders than that disclosed in the description, and sometimes no specific order exists between different operations or steps. For example, two consecutive operations or steps may actually be performed substantially in parallel, they may sometimes be performed in reverse order, which may be dependent on the functions involved. Each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

Claims

1. A method of configuring a user interface theme, the method comprising:

creating a user interface theme, and storing theme information corresponding to the user interface theme in a database, wherein the theme information comprises a theme name, a theme description, an installation package name and version information, and the installation package is a npm package;

matching the installation packages in the npm private library according to the theme names and the theme descriptions to obtain corresponding historical installation packages, wherein the npm private library stores a plurality of historical installation packages;

analyzing the history installation package, extracting a first character string, and rendering the user interface theme according to the first character string to generate a current theme interface, wherein the character string is a json character string;

configuring the current theme interface based on a preset theme specification to obtain a current theme version, and storing the current theme version and a corresponding current version number in version information of the database;

and extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library.

2. The method of claim 1, wherein matching npm private in-store installation packages according to the topic name and the topic description to obtain corresponding historical installation packages comprises:

Connecting the npm private library with the database so as to communicate data;

determining historical topic versions from the database according to the topic names and the topic descriptions, wherein each topic version has a version number corresponding to one;

inquiring and obtaining corresponding historical version numbers from the database based on the historical topic version, wherein each version number corresponds to one installation package;

and matching the npm private library based on the history version number to obtain the history installation package corresponding to the history version number.

3. The method of claim 2, wherein configuring the current theme interface based on a preset theme specification comprises:

acquiring a first theme configuration parameter in the preset theme specification, configuring the current theme interface in a theme configuration interface according to the first theme configuration parameter, generating a new theme configuration interface and previewing, wherein the first theme configuration parameter comprises at least one of a first color parameter, a first size parameter and a first style parameter; or (b)

Accessing an external user interface library into the theme configuration interface, and selecting an external theme in the external user interface library based on the preset theme specification;

Writing the topic content codes corresponding to the external topic into the coding region of the topic configuration interface, loading the topic content codes to obtain second topic configuration parameters to configure the current topic interface, generating a new topic configuration interface and previewing, wherein the second topic configuration parameters comprise at least one of second color parameters, second size parameters and second style parameters.

4. The method of claim 3, wherein configuring the current theme interface based on a preset theme specification further comprises:

evaluating the colors, the sizes and the styles presented by the new theme configuration interface to respectively obtain color evaluation scores, size evaluation scores and style evaluation scores;

respectively comparing the color evaluation score, the size evaluation score and the style evaluation score with the corresponding first pre-evaluation score threshold value for one time, and adjusting at least one configuration parameter of the color parameter, the size parameter and the style parameter according to a first comparison result to obtain a third theme configuration parameter;

performing primary optimization configuration on the current theme interface according to the third theme configuration parameters, and evaluating the overall effect presented by the theme configuration interface corresponding to the primary optimization configuration to obtain an overall effect evaluation score;

Performing secondary comparison on the overall effect evaluation score and a second evaluation score threshold, and adjusting at least one configuration parameter of the color parameter, the size parameter and the style parameter according to a secondary comparison result to obtain a fourth theme configuration parameter;

and performing secondary optimal configuration on the current theme interface according to the fourth theme configuration parameters until the overall effect evaluation score reaches the second evaluation score threshold value, and completing configuration of the current theme interface.

5. The method of claim 1, wherein extracting a second string corresponding to the current theme version, compiling and packaging the second string into a new installation package, and publishing the new installation package to the npm private library, comprises:

after receiving a release request of a target user, acquiring the current theme version from the database based on the current version number carried in the release request;

reading the current theme version to obtain the second character string, compiling and packaging the second character string into Cheng Xinan packages, and storing the Cheng Xinan packages in the npm private library;

and responding to the release request, writing the theme name, and packaging the new installation in the npm private library for release.

6. The method of claim 5, further comprising, prior to creating the user interface theme:

after receiving a login request of the target user, acquiring first user information carried in the login request;

checking the first user information based on a target user information base, and determining whether the target user has authority or not, wherein the user information of each target user is stored in the target user information base;

if the target user is determined to have no authority, displaying that logging in npm the private library fails;

and if the target user has the authority, displaying that the login npm private library is successful, and entering a theme creation interface.

7. The method of claim 6, wherein after compiling and packaging the second string into a new installation package for release to the npm private store, further comprising:

acquiring second user information of the target user, and auditing the second user information based on the target personnel information base;

when the auditing result is that the auditing result is passed, the calling request input by the target user is obtained, wherein the calling request carries the installation package name;

and searching and obtaining the new installation package in the npm private library based on the installation package name, and calling the current installation package in response to the calling request.

8. The method according to any one of claims 1 to 7, wherein in the database, a primary version and a secondary version are corresponding to the same topic name, wherein a version which is not subjected to modification editing is the primary version, a version which is subjected to modification editing is the secondary version, and each historical topic version in the secondary version is ordered by a version number according to an update time, the method further comprising:

when rendering abnormality occurs in the current theme interface rendering, matching a latest history installation package corresponding to a latest version number in the npm library;

and analyzing the latest history installation package to extract a third character string, and performing rendering anomaly investigation according to the third character string.

9. A user interface configuration apparatus, the apparatus comprising:

the system comprises a creation module, a storage module and a storage module, wherein the creation module is used for creating a user interface theme, and storing theme information corresponding to the user interface theme in a database, wherein the theme information comprises a theme name, a theme description, an installation package name and version information, and the installation package is a npm package;

the acquiring module is used for matching the installation package in the npm private library according to the theme name and the theme description to acquire a corresponding historical installation package, and the npm private library stores a plurality of historical installation packages;

The generation module is used for analyzing the history installation package, extracting a first character string, and rendering the user interface theme according to the first character string to generate a current theme interface, wherein the character string is a json character string;

the configuration module is used for configuring the current theme interface based on a preset theme specification to obtain a current theme version, and storing the current theme version and a corresponding current version number in version information of the database;

and the publishing module is used for extracting a second character string corresponding to the current theme version, compiling and packaging the second character string into a new installation package, and publishing the new installation package to the npm private library.

10. A computer-readable medium, characterized in that it has stored thereon a computer program for causing a computer to perform the method according to any one of claims 1 to 8.