Menu icon management method and system, electronic equipment and storage medium

Abstract

The invention discloses a menu icon management method and system and electronic equipment, and relates to the field of menu icon management. The method comprises the steps that a menu configuration request is responded, icon style information, icon grades and icon types corresponding to menu icons are determined based on the menu icons carried in the menu configuration request, and the menu configuration request further carries label attribute paths and label father and child node information; drawing the to-be-displayed icon according to the icon style information, the icon grade and the icon type by adopting the SVG drawing label; determining an icon attribute file according to the label attribute path, and converting the to-be-displayed icon into a target icon based on icon attribute information corresponding to the to-be-displayed icon in the icon attribute file; according to the label father and child node information, the target icon is displayed at the menu display position corresponding to the label father and child node information, and the problems that maintenance is difficult and adaptability is poor due to the fact that an existing CSS Sprite solution is used for reducing page loading delay are solved.

Description

Menu icon management methods, systems, electronic devices and storage media Technical Field

[0001] This application relates to the field of menu icon management, and more specifically, to a menu icon management method, system, electronic device, and storage medium. Background Technology

[0002] As web applications become increasingly complex, modern management systems typically contain a large number of menu items. Traditionally, menu icons are displayed using local icon resources (such as PNG and JPG formats). According to front-end development practices, each icon requires a separate HTTP request to load, which can lead to significant page load delays when the system contains a large number of menus (usually more than 20).

[0003] While existing technologies include CSS Sprite (also known as CSS sprite or CSS image stitching technology, which is a front-end optimization technology that combines multiple small icons or background images into one large image and uses the CSS background-position property to position and display the required parts), there are still problems such as difficulty in maintenance and poor adaptability. Summary of the Invention

[0004] The main purpose of this application is to provide a menu icon management method, system, and electronic device to solve the problems of maintenance difficulties and poor adaptability caused by using existing CSS Sprite solutions to reduce page load delays.

[0005] To achieve the above objectives, according to one aspect of an embodiment of this application, a menu icon management method is proposed, comprising: responding to a menu configuration request; determining, based on the menu icon carried in the menu configuration request, icon style information, icon level, and icon type corresponding to the menu icon; the menu configuration request also carrying a tag attribute path and tag parent-child node information; drawing an icon to be displayed using SVG drawing tags according to the icon style information, icon level, and icon type; determining an icon attribute file according to the tag attribute path; and converting the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; and displaying the target icon at the menu display position corresponding to the tag parent-child node information according to the tag parent-child node information.

[0006] According to another aspect of the embodiments of this application, a menu icon management system is also provided, comprising: a response unit, configured to respond to a menu configuration request, and determine the icon style information, icon level, and icon type corresponding to the menu icon based on the menu icon carried in the menu configuration request, wherein the menu configuration request also carries a tag attribute path and tag parent-child node information; a drawing unit, configured to draw an icon to be displayed using SVG drawing tags according to the icon style information, icon level, and icon type; a conversion unit, configured to determine an icon attribute file according to the tag attribute path, and convert the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; and a display unit, configured to display the target icon at the menu display position corresponding to the tag parent-child node information according to the tag parent-child node information.

[0007] Optionally, the above drawing unit includes: a configuration request acquisition subunit, used to acquire configuration platform information and menu icon format corresponding to the menu configuration request, wherein the configuration platform information is used to indicate at least one icon level compatible with the configuration platform; an icon level determination subunit, used to determine the target icon level corresponding to the icon to be displayed based on the configuration platform information and image level, and to determine the target icon type corresponding to the icon to be displayed based on the target icon level and icon type; and an icon to be displayed drawing subunit, used to draw the icon to be displayed using SVG drawing tags based on icon style information, icon format, target icon level, and target icon type.

[0008] Optionally, the above-mentioned icon drawing subunit includes: a drawing tag triggering subunit, used to determine the path description information of the menu icon according to the icon format and icon type, and to determine the target SVG drawing tag corresponding to the icon to be displayed included in the triggering SVG drawing tag according to the icon format and icon type; and a style level control subunit, used to map the path description information to the attributes of the target SVG drawing tag, and to control the icon style and icon level in the process of drawing the icon to be displayed by the target SVG drawing tag in combination with the icon style information and the target icon level, so as to draw the icon to be displayed.

[0009] Optionally, the above conversion unit includes an attribute determination subunit for determining the reference icon attributes corresponding to the menu icon in the icon attribute file; a redundancy removal subunit for removing redundant attributes from the reference icon attributes according to the menu configuration request to obtain the target icon attributes; an attribute indication subunit for extracting standard icon attributes from the standard attribute file and determining key icon attributes according to the menu configuration request and the key attribute file, wherein the standard attribute file is used to indicate the attribute information common to multiple icons in the icon library, and the key attribute file is used to indicate the specific attribute information available to multiple icons in the icon library; and an icon conversion subunit for converting the icon to be displayed into the target icon according to the target icon attributes, the standard icon attributes, and the key icon attributes.

[0010] Optionally, the menu icon management system mentioned above also includes: an icon library creation unit, used to create an icon library and a target attribute file, wherein the icon library is used to provide clients with multiple menu icons that can be selected and configured, and the target attribute file includes the icon attributes of each icon in the icon library; and an attribute creation unit, used to create a standard attribute file and a key attribute file corresponding to the icon library.

[0011] Optionally, the menu icon management system further includes: a configuration information sending unit, used to send menu configuration page information in response to an initial menu configuration request, the menu configuration page information including multiple menu configuration items that can be configured by the client; and a configuration request receiving unit, used to receive a menu configuration request sent by the client carrying target configuration information corresponding to multiple menu configuration items, and respond according to the menu configuration request.

[0012] Optionally, the above conversion unit further includes a conversion subunit, which is used to convert the icon to be displayed into the target icon using a dynamic rendering component. The dynamic rendering component includes event tracking, which is used to count and display the usage frequency of each menu icon.

[0013] According to another aspect of the embodiments of this application, an electronic device is provided, characterized in that the electronic device includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, the computer program being executed by the at least one processor to cause the at least one processor to perform the menu icon management method described above.

[0014] According to another aspect of the embodiments of this application, a computer-readable storage medium is also provided, which stores computer instructions for causing a computer to perform the menu icon management method described above.

[0015] The technical solutions provided by the embodiments of this application may include the following beneficial effects: In this application, the above-mentioned menu icon management method, system, electronic device and storage medium solve the problems of maintenance difficulties and poor adaptability caused by using existing CSS Sprite solutions to reduce page loading delay. Attached Figure Description

[0016] The accompanying drawings, which form part of this application, are used to provide a further understanding of the application and to make other features, objects, and advantages of the application more apparent. The illustrative embodiments and descriptions of the accompanying drawings are used to explain the application and do not constitute an undue limitation of the application. In the drawings: Figure 1 is a schematic diagram of the hardware environment of an optional menu icon management method provided by this application; Figure 2 is a flowchart of an optional menu icon management method provided by this application; Figure 3 is a structural schematic diagram of an optional menu icon management system provided by this application; Figure 4 is a structural schematic diagram of an optional electronic device provided by this application. Detailed Implementation

[0017] To enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present application, and not all embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative effort should fall within the scope of protection of the present application.

[0018] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in any order other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus. Without conflict, the embodiments and features in the embodiments of this application can be combined with each other. This application will now be described in detail with reference to the accompanying drawings and embodiments.

[0019] The shortcomings and deficiencies of existing technologies are as follows: 1. Low resource loading efficiency: Each icon requires a separate HTTP request, resulting in too many concurrent requests during page initialization, significantly extending the first screen loading time; 2. Large resource size: When adapting multi-size bitmap resources to different resolutions, the resource package size increases exponentially; 3. High maintenance cost: Adding / modifying icons requires regenerating image resources and deploying them, making hot updates impossible; 4. Lack of dynamic control: It is impossible to dynamically modify icon color, size, and other style attributes through CSS; 5. Difficulty in high-definition adaptation: Jagged edges and blurriness are prone to occur on high-resolution screens.

[0020] To address the maintenance difficulties and poor adaptability issues caused by using existing CSS Sprite solutions to reduce page load latency, as well as the aforementioned problems, this application provides a menu icon management method, system, and electronic device. As an optional embodiment, the menu icon management method described above can be applied, but is not limited to, to a menu icon management system consisting of a terminal device 102 and a server 104, as shown in Figure 1. As shown in Figure 1, the terminal device 102 is connected to the server 104 via a network 110. The network 110 can include, but is not limited to, wired networks and wireless networks. The wired network includes local area networks (LANs), metropolitan area networks (MANs), and wide area networks (WANs). The wireless network includes Bluetooth, Wi-Fi, and other networks that enable wireless communication. The terminal device 102 can include, but is not limited to, at least one of the following: mobile phones (such as Android phones, iOS phones, etc.), laptops, tablets, handheld computers, MIDs (Mobile Internet Devices), PADs, desktop computers, smart TVs, in-vehicle devices, etc.

[0021] The aforementioned terminal device 102 is also equipped with a display 106, a processor 108, and a memory 112. The display 106 can be used to display menu icon management processes, etc., the processor 108 can be used to process the collected data, and the memory 112 can be used to store relevant data. It is understood that when the terminal device 102 receives a user's menu configuration request, the terminal device 102 sends the menu configuration request to the server 104 via the network 110, and the server 104 responds to the menu configuration request to implement the specific menu configuration process.

[0022] The aforementioned server 104 can be a single server, a server cluster consisting of multiple servers, or a cloud server. The aforementioned server 104 includes a database 114 and a processing engine 116. The database 114 can be used to store data, models, etc., and the processing engine 116 is used to process the aforementioned data.

[0023] According to one aspect of the present invention, the menu icon management system described above may further perform the following steps: First, the terminal device 102 executes S102 as shown in FIG1; then, the server 104 executes S104 to S110 as shown in FIG1, thereby realizing the management of menu icons.

[0024] In the above embodiments of the present invention, the above-described menu icon management method solves the problems of maintenance difficulties and poor adaptability caused by using existing CSSSprite solutions to reduce page loading delay.

[0025] As an optional implementation, please refer to Figure 2, which shows a flowchart of a menu icon management method provided in an embodiment of this application. The method includes at least one of the following steps (S202 to S208): S202, responding to a menu configuration request, determining the icon style information, icon level, and icon type corresponding to the menu icon based on the menu icon carried in the menu configuration request, wherein the menu configuration request also carries a tag attribute path and tag parent-child node information; S204, drawing the icon to be displayed using SVG drawing tags according to the icon style information, icon level, and icon type; S206, determining the icon attribute file according to the tag attribute path, and converting the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; S208, displaying the target icon in the menu display position corresponding to the tag parent-child node information according to the tag parent-child node information.

[0026] The menu icons in step S202 above include, but are not limited to, menu configuration icons and / or menu background icons corresponding to menu icons. Menu configuration icons and menu background icons are common visual elements in user interface (UI) design. Menu configuration icons are small graphic symbols attached to menu items (such as buttons, options, or links) to directly convey function or content category. Menu background icons are decorative or functional graphic elements that serve as the background of the menu area, used to enhance visual hierarchy or provide auxiliary information. Menu background icons are not directly associated with specific operations but create or guide user attention through patterns, textures, or dynamic effects. The menu area background can be the background of a single menu configuration icon or the background of all menu configuration icons located in the same area. The icon style information mentioned above includes, but is not limited to, the icon's color, size, shape, etc. Icon levels can be divided into high, medium, and low levels according to the icon's format, importance, or priority. Icon types can be divided into static icons, dynamic icons, etc. The menu configuration icons and menu background icons mentioned above can each correspond to different icon style information, icon levels, and icon types. In other words, assuming that the menu icon includes the menu configuration icon and the menu background icon, the menu icon has corresponding icon style information, icon level and icon type, and the menu background icon also has corresponding icon style information, icon level and icon type.

[0027] In step S204 above, SVG (Scalable Vector Graphics) is a format that uses code to describe images, and SVG drawing tags are tags used to construct the icons to be displayed. It's worth noting that while using SVG drawing tags for drawing, external files (CSS files or style tags) can be used to manage the style information of the specific SVG elements created by the SVG image tags. Unified management of external files (CSS files or style tags) effectively maintains code cleanliness and maintainability. It should also be noted that a very small number of browsers may not support high-level icon formats (such as SVG, APNG, etc.). Therefore, a PNG fallback plan can be set up to first determine whether the browser supports the SVG icon format. If not, an alternative PNG image (or PNG icon) with the same content is displayed, or the high-level dynamic or static icon is converted to a low-level static icon.

[0028] In step S206 above, the icon attribute file (sprite.svg, also known as the unified symbol definition file) refers to the merged file generated using SVG Sprite technology. It's used to integrate multiple SVG icons into a single file, reducing HTTP requests and optimizing page load performance. Tools for building icon attribute files include Webpack. The icon attribute file contains the attributes of all icons (via...) <symbol>(Label definition), the attribute information of the icon includes parameters such as icon ID, length, width, height, color, pixels, etc. (that is, the view effect of the icon is defined); in practical applications, at least one picture library can be constructed to store the pictures corresponding to the icons, and each picture library corresponds to an icon attribute file, which includes the symbol tags corresponding to each picture, and all definable attribute information corresponding to each picture is defined in the symbol tag (including the attribute information of the icons listed or not listed above). The display result of the icon can be determined according to the information defined in the symbol. The conversion process of the above-mentioned icon to be displayed includes the system combining the dynamic loading component to render the icon to be converted according to different requirements. The above-mentioned dynamic loading component includes the SvgIcon component based on Vue.

[0029] The above S206 specifically includes: using a dynamic rendering component to convert the icon to be displayed into a target icon. The dynamic rendering component includes a data point, which is used to count and display the usage frequency of each menu icon. The data point is also used to count and display the usage frequency of the symbol tags corresponding to each menu icon.

[0030] In the above S208 step, the label parent-child node information is used to describe the position and hierarchical relationship of the target icon in the entire menu structure, and can show the menu display position corresponding to the target icon. According to the parent-child node relationship, the specific display position of the menu icon in the entire menu display position can be determined.

[0031] It should be noted that the centralized management of the identifiers of the icons can be achieved through the icon registration module. The icon registration module can centrally manage the class names of each icon. When configuring the icon, it includes configuring the name of the icon. The icon library can be determined through the configuration prefix to define the identifier. Through the icon registration module, the specific use of the icon library and the specific ID or name of the icons in the used icon library can be determined. When the user uses the icon, the user determines the class name of the icon through the icon registration module, and the class name of the icon indicates the icon library where the icon is located (that is, the above picture library). It should be noted that the icon registration module centrally manages all icon identifiers through svg-icons.js. svg-icons.js refers to the JavaScript file used to manage SVG icon components in the Vue project, mainly used for global registration and reference of SVG icons in the project. Its core functions include: global component registration: by defining the global component SvgIcon, all SVG icons in the project directory are uniformly managed; icon reference: the icon is called in the format of <svg-icon icon-class="file name">, and the file name needs to be the same as the SVG file name; configuration dependency: with specific configurations, automatic processing and componentization of SVG files are achieved.

[0032] The above-described implementation method of this application solves the problems of maintenance difficulties and poor adaptability caused by using existing CSS Sprite solutions to reduce page loading delay.

[0033] As an optional implementation, the above-mentioned method of using SVG drawing tags to draw the icon to be displayed based on icon style information, icon level, and icon type includes: S1, obtaining the configuration platform information corresponding to the menu configuration request and the icon format of the menu icon, wherein the configuration platform information is used to indicate at least one icon level compatible with the configuration platform; S2, determining the target icon level corresponding to the icon to be displayed based on the configuration platform information and the image level, and determining the target icon type corresponding to the icon to be displayed based on the target icon level and the icon type; S3, drawing the icon to be displayed using SVG drawing tags based on the icon style information, icon format, target icon level, and target icon type.

[0034] It should be noted that the above configuration platform information includes, but is not limited to, information about different clients and different browsers, etc., used to indicate at least one icon level that the configuration platform is compatible with, thereby achieving differentiated configuration. The target icon level and icon type mentioned above are the final icon levels and icon types that can be displayed on the configuration platform.

[0035] As an optional implementation, the above-mentioned method of drawing an icon to be displayed using SVG drawing tags based on icon style information, icon format, target icon level, and target icon type includes: S3-1, determining the path description information of the menu icon based on the icon format and icon type, and determining the target SVG drawing tag corresponding to the icon to be displayed included in the triggering SVG drawing tag based on the icon format and icon type; S3-2, mapping the path description information to the attributes of the target SVG drawing tag, and controlling the icon style and icon level during the process of drawing the icon to be displayed by the target SVG drawing tag in combination with the icon style information and target icon level, thereby drawing the icon to be displayed.

[0036] It should be noted that the process of determining the path description information of menu icons based on icon format and icon type includes the following: if the user selects a dynamic SVG icon, the system can directly extract the path description information of that menu icon; however, if the user selects an icon in other formats (such as PNG, Canvas-drawn icons, font icons, etc.), the path description information cannot be directly extracted. In this case, software with conversion capabilities (such as Adobe Illustrator or Inkscape) can be used to convert the icon into an SVG file and obtain the SVG path description information. The above process of determining the path description information of menu icons simplifies path data.

[0037] As an optional implementation, the above-described method of converting the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file includes: S1, determining the reference icon attribute corresponding to the menu icon in the icon attribute file; S2, removing redundant attributes from the reference icon attribute according to the menu configuration request to obtain the target icon attribute; S3, extracting standard icon attributes from the standard attribute file and determining key icon attributes according to the menu configuration request and the key attribute file, wherein the standard attribute file is used to indicate attribute information common to multiple icons in the icon library, and the key attribute file is used to indicate specific attribute information available to multiple icons in the icon library; S4, converting the icon to be displayed into a target icon based on the target icon attribute, the standard icon attribute, and the key icon attribute.

[0038] It should be noted that due to differences in systems, themes, and requirements, redundant attributes of the reference icon attributes need to be removed before use. For example, in a request for "Android night mode without animation," the iOS-specific icon attributes in the reference icon attributes are redundant and need to be removed to obtain the target icon attributes corresponding to the request. Specifically, you can follow the official recommendations to remove unnecessary parameters or attributes. The aforementioned common attribute information for multiple icons refers to the attribute information shared by multiple or even all icons in the icon library under common conditions (such as the viewBox attribute: viewBox is used to define the coordinate system, size, and scaling behavior of the graphic, determining how the SVG content is displayed in the viewport and controlling the scaling, translation, and proportional relationship of the graphic), used to ensure icon consistency (such as size specifications, color mode, resolution, etc.). The aforementioned specific attribute information refers to the specific attributes of a single or multiple icons under specific conditions, including platform-specific attributes (such as iOS-specific icon features), business-related attributes (such as member-specific icon styles), etc. The optimization approach to icon management in steps S1-S4 above can be understood as: removing redundant attributes and converting identical attributes between icons into inline attributes through the use of standard icon attributes and key icon attributes.

[0039] As an optional implementation, the above menu icon management method further includes the following steps before responding to the menu configuration request: S112, creating an icon library and a target attribute file. The icon library provides the client with multiple menu icons to choose from and configure. The target attribute file includes the icon attributes of each icon in the icon library; S114, creating a standard attribute file and a key attribute file corresponding to the icon library. It should be noted that the number of icon libraries or target attribute files created can be one or more. The aforementioned icon attributes are used to define the tags of reusable SVG elements. Key attributes include currentColor (the core function of currentColor is to allow the element to inherit the current text color (color attribute value) and apply it to other attributes that require color (such as borders, backgrounds, SVG fills, etc.), thereby achieving style consistency and dynamic responsiveness.

[0040] As an optional implementation, the above menu icon management method further includes, before responding to the menu configuration request: S122, in response to the initial menu configuration request, sending menu configuration page information, the menu configuration page information including multiple menu configuration items that can be configured by the client; S124, receiving a menu configuration request sent by the client carrying target configuration information corresponding to multiple menu configuration items, and responding according to the menu configuration request, wherein the menu configuration request is sent by the client.

[0041] Specifically, the icon library includes pre-designed icons. After downloading these pre-designed icons, users can select an icon. When the user's mouse hovers over an icon, the icon name or logo will be displayed and its color will change. After selecting an icon, clicking "save" or "submit" will generate the corresponding data structure. When using the icon, the user can select the desired icon name / logo to apply it. The icon will be displayed in the sidebar. Selecting the corresponding icon again will configure the content associated with the icon.

[0042] Specifically, through the above-described embodiments of this application, the code for integrating icons and the integration system includes: / / Icon integration part: / / Building an SVG icon library: ```svg <svg xmlns="http: / / www.w3.org / 2000 / svg" （图标属性文件的地址，声明svg命名空间，确保配置平台（如浏览器）正确解析） style="display:none" （样式设置为显示或隐藏，可以理解为默认所有的属性都不展示，在使用的时候再按需展示）> <symbol id="pc-icon-api-management" （图标的类名，后面配置图标的时候拼接真正的图标名，就这样生成一个完整的图标库的路径） viewbox="0 0 24 24" （坐标点，即显示这个图标时，显示框的大小，例如该显示框的逻辑坐标系为从（0，0）到（24,24）），确保图标缩放时比例一致> <path d="M12..." / > (SVG-specific drawing content, such as drawing APIs, SVG built-in tags, paths used to generate actual SVG internal drawing, finding icons from the icon library, determining the icon's specific shape (e.g., straight line, curve), and corresponding attributes (attributes defined in the symbol tag, standardized viewBox attribute, and critical attribute currentColor), and redrawing and displaying them. It can be understood that the standardized viewBox attribute can be understood as, but is not limited to, common attributes shared by all icons except those defined in the symbol tag. The critical attribute currentColor can be understood as, but is not limited to, attribute information defining user-specific display requirements. If the critical attribute currentColor contains relevant definitions, it will be displayed according to the attributes defined in currentColor, ignoring conflicting attributes defined in the symbol tag and those defined in currentColor. For example, if the symbol defines a display color as blue, but the critical attribute currentColor does not define a display color, then it will be displayed as blue. If the critical attribute currentColor defines a gradient green as the display color, then it will be displayed as gradient green.)< / symbol> <!-- Other symbol definitions -->< / svg> / / (1) Centralized registration of icon identifiers (svg-icons.js) (centralized maintenance of all icon identifiers for easy addition, deletion and modification): The JavaScript code is organized as follows: export default ['pc-icon-api-management', first icon name 'pc-icon-application', second icon name / / ...other icon identifiers] / / (2) Dynamic rendering component: <template> <svg :class="svgClass" （即组合默认类svg-icon与外部传入的classname动态绑定类名，可通过父组件传入样式，如尺寸、颜色。如父组件传入：svgclass=""w-24" h-24text-red-500”可控制图标大小和颜色） aria-hidden="true" （将不需要的东西隐藏）> <use :xlink:href="iconName" / > (That is, generating the reference ID of #icon-user. Through...) <use>The `<iconName>` element imports external SVG symbols to enable icon reuse. `iconName` is a dynamically bound variable that points to the ID of a specific icon or an SVG file fragment (i.e., importing predefined SVG symbols to enable icon reuse).< / use> < / svg> < / template> <script>（脚本部分）export default {name: 'SvgIcon',（VUE组件的名称）props: {（以下是传递的属性，如VUE文件的一些生命周期、计算方法等，即每创建一个VUE文件，都带上一个标识提示用户或后来的开发者组件用途，如name组件，名称是'SvgIcon'，作用是生成一个SVG的图标，而props就是另外一个组件引用svg-icons.js的时候传递的class属性）iconClass: { type: String, required: true},className: { type: String, default: ''}},computed: {（即计算，动态计算一些属性的值，即在把这个图标重新绘制出来时返回出来的名称）iconName() { return （返回结果）`#${this.iconClass}（返回图标的名称）`},svgClass() { return this.className ? 'svg-icon ' + this.className : 'svg-icon'}}}< / script> <style scoped>（定义图标的一些样式：长、宽、颜色等等）.svg-icon {width: 1em; （默认尺寸）height: 1em; （默认尺寸）fill: currentColor; / / 继承父元素文字颜色（通过CSS控制图标颜色（如<SvgIcon class="text-red-500" / >））vertical-align: -0.15em; / / 微调垂直对齐}< / style> / / (3) Menu configuration optimization: / / Menu configuration {path: ' / dashboard', name: 'Dashboard', icon: 'pc-icon-api-management' / / Points to the identifier registered in svg-icons.js} The following describes the implementation process of the SVG integration system in conjunction with specific embodiments, including: / / (1) Create the svg-icons.js file and centrally export the array of icon identifiers / / (2) Configure Webpack processing rules: / / The JavaScript code is organized as follows {test: / \.svg$ / , (Webpack will recognize the file extension when packaging and configure the hot reloading attribute according to the extension) loader: 'svg-sprite-loader', options: { symbolId: 'pc-icon-[name]' (matches id)}} / / Implement the SvgIcon.vue component / / Use icon identifiers in the menu configuration: / / The JavaScript code is organized as follows / / router.js {path: ' / approval', component: Layout, children: [{path: 'index', name: 'Approval', meta: {title: 'Approval Management', icon: 'pc-icon-approval' / / Registration icon identifier}}]} The implementation process of using the icon includes: / / (1) Calling in the Vue component: <template> <svg-icon icon-class="pc-icon-user" class="menu-icon" / > / / Custom Vue component < / template> <script>import SvgIcon from '@ / components / SvgIcon' / / 模块导入语句export default {components: { SvgIcon} / / 局部注册组件}< / script> <style>.menu-icon { / / CSS 规则font-size: 18px;color: #409EFF;transition: color 0.3s;}.menu-icon:hover {color: #FF6A00;}< / style> The code for configuring long-term caching of SVG icons through the above implementation method of this application includes: module.exports = { / / Exported object chainWebpack: config =>{ / / Define chainWebpack function config.module.rule('svg') / / Create or modify processing rules for SVG files .test( / \.svg$ / ) / / Specify the file types to which the rules apply .use('svg-sprite-loader').loader('svg-sprite-loader') / / Use the specified loader .options({ / / Pass configuration parameters symbolId: 'pc-icon-[name]', / / Replace filename extract: true, / / Extract file spriteFilename: 'img / icons.[hash:8].svg' / / Filename and storage path with hash})}} The above code can configure long-term caching of SVG icons. By adding a hash value to the filename, long-term caching optimization is achieved by utilizing the browser's caching strategy, thereby improving performance.

[0043] The code for dynamically changing the icon color based on the menu state, as described in the above implementation of this application, includes: `.menu-item.active .svg-icon { / / Select all SVG icons inside the currently active menu item color: #1890ff; / / Set the icon color to a blue animation: pulse 1.5s infinite; / / Add an animation effect named pulse to the icon} .menu-item.disabled .svg-icon { / / Select all SVG icons inside the currently disabled menu item color: #c0c4cc; / / Set the icon color to a light gray opacity: 0.6; / / Set the icon opacity to 60%}` As can be seen from the above CSS code for dynamically changing the icon color based on the menu state, this embodiment can bind icon attributes (color, animation, opacity) with the state (active, disabled) of HTML elements, thereby achieving intuitive state feedback.

[0044] Through the above-described implementation method of this application, the problems of maintenance difficulties and poor adaptability caused by using existing CSS Sprite solutions to reduce page loading delay can be solved. Specifically, it can achieve: (1) Improved loading performance: all icons are integrated into a single SVG file, reducing the number of HTTP requests from N to 1, and increasing page loading speed by 40%+; (2) Optimized resource size: SVG vector resources reduce storage space by 70% compared to bitmaps, eliminating the need for multi-resolution adaptation; (3) Improved maintenance efficiency: adding new icons only requires updating svg-icons.js and the symbol library, without redeploying image resources; (4) Dynamic style control: icon colors and sizes can be modified in real time through CSS, easily achieving theme switching; (5) Optimized display quality: vector graphics remain clear at any resolution, perfectly adapting to high-definition screens; (6) Component-based integration: providing standard Vue component interfaces to achieve declarative use of menu icons.

[0045] This implementation has been verified in a real project. In the first screen loading of a system with 58 menu items, the number of resource requests was reduced from 63 to 11, the first screen loading time was reduced from 2.4s to 1.1s, and memory usage was reduced by 42%.

[0046] It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases the steps shown or described may be executed in a different order than that shown here.

[0047] According to another aspect of the present invention, a menu icon management system for implementing the above-described menu icon management method is also provided. As shown in FIG3, the device includes: a response unit 302, configured to respond to a menu configuration request, and determine the icon style information, icon level, and icon type corresponding to the menu icon based on the menu icon carried in the menu configuration request, wherein the menu configuration request also carries a tag attribute path and tag parent-child node information; a drawing unit 304, configured to draw an icon to be displayed using SVG drawing tags according to the icon style information, icon level, and icon type; a conversion unit 306, configured to determine an icon attribute file according to the tag attribute path, and convert the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; and a display unit 308, configured to display the target icon at the menu display position corresponding to the tag parent-child node information according to the tag parent-child node information.

[0048] The specific execution methods of each unit in the above system embodiments have been described in detail in the embodiments related to the method, and will not be elaborated further here.

[0049] According to another aspect of the present invention, an electronic device for implementing a menu icon management method is also provided. This electronic device may be a terminal device or a server as shown in FIG. 4. This embodiment uses the electronic device as a terminal device as an example. As shown in FIG. 4, the electronic device includes: at least one processor 404; and a memory 402 communicatively connected to the at least one processor 404; wherein the memory 402 stores a computer program executable by the at least one processor 404, the computer program being executed by the at least one processor 404 to cause the at least one processor 404 to perform the steps in any of the above method embodiments. The electronic device may be located in at least one of a plurality of network devices in a computer network. The processor may be configured to execute the menu icon management method via a computer program.

[0050] Optionally, those skilled in the art will understand that the structure shown in Figure 4 is merely illustrative, and the electronic device may also be a smartphone (such as an Android phone, an iOS phone, etc.), a tablet computer, a PDA, a mobile internet device (MID), a PAD, or other terminal device. Figure 4 does not limit the structure of the aforementioned electronic device. For example, the electronic device may also include more or fewer components (such as a network interface) or have a different configuration than shown in Figure 4.

[0051] The memory 402 can be used to store software programs and modules. The processor 404 executes various functional applications and data processing by running the software programs and modules stored in the memory 402. The memory 402 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 402 may further include memory remotely located relative to the processor 404, and these remote memories can be connected to the terminal via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof. As an example, as shown in Figure 4, the memory 402 may include, but is not limited to, the units in the menu icon management system described above. In addition, it may include, but is not limited to, other module units in the menu icon management system described above, which will not be elaborated in this example.

[0052] Optionally, the aforementioned transmission device 406 is used to receive or send data via a network. Specific examples of the network may include wired and wireless networks. In one example, the transmission device 406 includes a Network Interface Controller (NIC), which can be connected to other network devices and a router via a network cable to communicate with the Internet or a local area network. In another example, the transmission device 406 is a radio frequency (RF) module used for wireless communication with the Internet. Furthermore, the aforementioned electronic device also includes a display 408 and a connection bus 410 for connecting the various module components within the electronic device.

[0053] Obviously, those skilled in the art should understand that the various units or steps of this application described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computing device, or fabricating them separately as individual integrated circuit modules, or fabricating multiple modules or steps into a single integrated circuit module. Thus, this application is not limited to any particular combination of hardware and software.

[0054] The above are merely preferred embodiments of this application and are not intended to limit this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.< / symbol>

Claims

1. A method for managing menu icons, characterized in that, include: In response to a menu configuration request, based on the menu icon carried in the menu configuration request, determine the icon style information, icon level, and icon type corresponding to the menu icon. The menu configuration request also carries the tag attribute path and tag parent-child node information. An icon to be displayed is drawn using SVG drawing tags based on the icon style information, the icon level, and the icon type; an icon attribute file is determined based on the tag attribute path, and the icon to be displayed is converted into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; Based on the parent-child node information of the label, the target icon is displayed in the menu display position corresponding to the parent-child node information of the label.

2. The method according to claim 1, characterized in that, Drawing an icon to be displayed using SVG drawing tags based on the icon style information, the icon level, and the icon type includes: obtaining configuration platform information corresponding to the menu configuration request and the icon format of the menu icon, wherein the configuration platform information is used to indicate at least one icon level compatible with the configuration platform; determining the target icon level corresponding to the icon to be displayed based on the configuration platform information and the icon level, and determining the target icon type corresponding to the icon to be displayed based on the target icon level and the icon type; and drawing the icon to be displayed using SVG drawing tags based on the icon style information, the icon format, the target icon level, and the target icon type.

3. The method according to claim 2, characterized in that, Based on the icon style information, the icon format, the target icon level, and the target icon type, the icon to be displayed is drawn using SVG drawing tags, including: determining the path description information of the menu icon based on the icon format and the icon type, and determining the target SVG drawing tag corresponding to the icon to be displayed included in the SVG drawing tag based on the icon format and the icon type; mapping the path description information to the attributes of the target SVG drawing tag, and controlling the icon style and icon level during the process of the target SVG drawing tag drawing the icon to be displayed in combination with the icon style information and the target icon level, thereby drawing the icon to be displayed.

4. The method according to claim 1, characterized in that, Based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file, the icon to be displayed is converted into a target icon, including: determining the reference icon attribute corresponding to the menu icon in the icon attribute file; removing redundant attributes from the reference icon attribute according to the menu configuration request to obtain the target icon attribute; extracting standard icon attributes from the standard attribute file, and determining key icon attributes according to the menu configuration request and the key attribute file, wherein the standard attribute file is used to indicate attribute information common to multiple icons in the icon library, and the key attribute file is used to indicate specific attribute information available to multiple icons in the icon library; and converting the icon to be displayed into the target icon according to the target icon attribute, the standard icon attribute, and the key icon attribute.

5. The method according to claim 4, characterized in that, Before responding to the menu configuration request, the process also includes: creating an icon library and the target attribute file, wherein the icon library is used to provide the client with multiple menu icons to choose from and configure, and the target attribute file includes the icon attributes of each icon in the icon library; and creating a standard attribute file and a key attribute file corresponding to the icon library.

6. The method according to claim 1, characterized in that, Before responding to the menu configuration request, the process further includes: responding to the initial menu configuration request by sending menu configuration page information, the menu configuration page information including multiple menu configuration items that can be configured by the client; receiving a menu configuration request sent by the client carrying target configuration information corresponding to multiple menu configuration items, and responding according to the menu configuration request.

7. The method according to claim 1, characterized in that, A dynamic rendering component is used to convert the icon to be displayed into a target icon. The dynamic rendering component includes tracking points, which are used to count and display the usage frequency of each menu icon.

8. A menu icon management system, characterized in that, include: The response unit is used to respond to the menu configuration request. Based on the menu icon carried in the menu configuration request, it determines the icon style information, icon level and icon type corresponding to the menu icon. The menu configuration request also carries the tag attribute path and tag parent and child node information. A drawing unit is used to draw an icon to be displayed using SVG drawing tags based on the icon style information, the icon level, and the icon type. The conversion unit is used to determine the icon attribute file according to the tag attribute path, and convert the icon to be displayed into a target icon based on the icon attribute information corresponding to the icon to be displayed in the icon attribute file; The display unit is used to display the target icon in the menu display position corresponding to the parent-child node information of the label, based on the parent-child node information of the label.

9. An electronic device, characterized in that, The electronic device includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, the computer program being executed by the at least one processor to cause the at least one processor to perform the menu icon management method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to execute the menu icon management method as described in any one of claims 1 to 7.

Images