Custom menu display method and system, electronic equipment and storage medium

Abstract

The invention relates to the technical field of computer programming, in particular to a custom menu display method and system, electronic equipment and a storage medium. The method comprises the steps that when it is detected that a user executes a preset operation on a target element, a custom menu pop-up event is triggered, and an interception method is called to intercept default menu pop-up corresponding to the preset operation; calling a menu display method, detecting whether an old menu instance exists, and if the old menu instance exists, destroying the old menu instance; obtaining menu configuration parameters, creating a target menu instance based on the menu configuration parameters, and mounting the target menu instance to a document object model; calling a menu display method, and displaying a target menu corresponding to the target menu instance based on the menu configuration parameters; acquiring a click operation of a user on the target menu, executing a feedback operation based on an operation position of the click operation, and closing the target menu; and deleting the target menu instance. According to the method, the development efficiency and the maintainability of codes can be improved.

Description

Technical Field

[0001] This invention relates to the field of computer programming technology, and in particular to a custom menu display method and system, electronic device and storage medium. Background Technology

[0002] In traditional web front-end development, implementing a custom context menu (right-click menu) is a common but functionally limited requirement. The core idea of ​​existing technical solutions usually involves listening to the contextmenu event of the target element, preventing the browser's default menu from popping up, and then rendering a custom DOM element at a specified location as the menu content.

[0003] When business requirements exceed basic functionality, developers are forced to deeply modify or rewrite the menu's internal implementation logic. Any customization, whether adding a simple input box or a complex selector, requires developers to directly manipulate the DOM, manually manage its state and style, and painstakingly integrate it with the menu's open / close logic. This process forces developers to focus on both business logic and underlying implementation details, resulting in extremely high code coupling. All the additional work and risks are borne entirely by the developers, leading to significant development and maintenance costs. Summary of the Invention

[0004] This invention provides a custom menu display method and system, electronic device, and storage medium to solve the problems of high development and maintenance costs in the prior art.

[0005] This invention discloses a custom menu display method applied to an application installed in an electronic device, which is communicatively connected to a network attached storage device and accesses the network attached storage device through the application. The custom menu display method includes: When a user performs a preset operation on a target element, a custom menu pop-up event is triggered, and an interception method is called to intercept the pop-up of the default menu corresponding to the preset operation. Call the menu display method to check if an old menu instance exists. If the old menu instance exists, destroy the old menu instance. Obtain menu configuration parameters, create a target menu instance based on the menu configuration parameters, and attach the target menu instance to the document object model; Call the menu display method to display the target menu corresponding to the target menu instance based on the menu configuration parameters; Get the user's click operation on the target menu, perform a feedback operation based on the operation position of the click operation, and close the target menu; Delete the target menu instance.

[0006] Optionally, the step of creating a target menu instance based on the menu configuration parameters includes: Obtain the business object corresponding to the preset operation, and obtain the rendering parameters of each menu item in the menu configuration mapping template based on the status data of the business object. The type of the rendering parameters includes at least one of title, icon, disabled status, separator line, and disabled prompt information. Integrate the rendering parameters of all menu items into the menu item array.

[0007] Optionally, the step of obtaining the menu item array based on the state data of the business object and the menu configuration mapping template includes: When a menu item is disabled, add a disabling prompt message to that menu item. The disabling prompt message includes prompt text and / or a hyperlink.

[0008] Optionally, the step of obtaining the menu item array based on the state data of the business object and the menu configuration mapping template includes: Determine whether the currently processed menu item includes sub-attributes. If so, re-execute the steps of claim 2 to generate a sub-menu item array and attach the sub-menu item data to the currently processed menu item; and Determine whether the currently processed menu item includes a custom attribute. If so, generate a dynamic object, obtain real-time data, and inject the real-time data into the dynamic object.

[0009] Optionally, the step of displaying the target menu corresponding to the target menu instance based on the menu configuration parameters includes: Obtain the position coordinates, current window size, and menu size of the preset operation, and obtain the target display position of the target menu based on the position coordinates, current window size, and menu size.

[0010] Optionally, the step of performing a feedback operation based on the operation location of the click operation includes: Determine whether the operation menu item corresponding to the operation location is disabled; If so, the reason why the operation menu item is disabled will be displayed; If not, obtain the operation identifier corresponding to the operation menu item, call the corresponding business method based on the operation identifier, and close the target menu.

[0011] Optionally, the step of performing a feedback operation based on the operation location of the click operation includes: If the operation location is outside the target menu, close the target menu.

[0012] The present invention also discloses an electronic device, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor performs the steps of the method described above.

[0013] The present invention also discloses a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to perform the steps of the method described above.

[0014] The present invention also discloses a custom menu display system, including a network-attached storage device and an electronic device as described above, wherein the electronic device is equipped with an application capable of performing the steps of the method described above.

[0015] The beneficial effects of the custom menu display method and system, electronic device, and storage medium provided in the embodiments of the present invention are as follows: The system retrieves menu configuration parameters and creates a target menu instance based on these parameters. Developers do not need to manipulate the DOM; they only need to set the corresponding parameter attributes in the menu configuration parameters. The creation and mounting of the instance are fully automated within the method. The menu display method is called to display the target menu based on the menu configuration parameters. Complex display logic is encapsulated within this method. User clicks on the target menu are retrieved, and feedback is executed based on the click location, passing the clicked item's data as a parameter. Business logic is handled externally by listening to this event, separating the menu component from specific business code, clarifying responsibilities, and greatly reducing coupling. After closing the target menu, the target menu instance is deleted, achieving automated lifecycle management. The menu automatically undergoes a destruction process after interaction, reclaiming memory and DOM nodes. Developers are freed from complex implementation details, significantly improving development efficiency and code maintainability. Attached Figure Description

[0016] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. In the accompanying drawings: Figure 1 This is a flowchart illustrating an embodiment of the custom menu display method provided by the present invention; Figure 2 This is a schematic diagram illustrating an application scenario of the custom menu display method provided by the present invention; Figure 3 This is a schematic diagram of a freely renamable second-level menu provided by the present invention; Figure 4 This is a schematic diagram of a page showing an embodiment of the tooltip that displays disabled menu items provided by the present invention; Figure 5 This is a code diagram of the DOM node not being deleted provided by the present invention; Figure 6 This is a schematic diagram of the code after deleting a DOM node, provided by the present invention; Figure 7 This is a schematic diagram of the internal structure of an electronic device in one embodiment of the present invention.

[0017] The labels for the attached figures are as follows: 10. Electronic devices; 20. Network-attached storage devices. Detailed Implementation

[0018] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other. The preferred embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0019] Please refer to the following: Figure 1 , Figure 1 This is a flowchart illustrating an embodiment of the custom menu display method provided by the present invention. Figure 2 This is a schematic diagram illustrating an application scenario of the custom menu display method provided by the present invention. Electronic device 10 establishes a communication connection with network attached storage device 20. An application program is installed on electronic device 10, and accesses network attached storage device 20 through this application program.

[0020] The custom menu display method provided by this invention includes the following steps: S101: When a user performs a preset operation on a target element, the interception method is called to intercept the default menu pop-up corresponding to the preset operation and trigger the custom menu pop-up event.

[0021] In a specific implementation scenario, a user's preset action on a target element is detected. This preset action can be a right-click with the mouse or a long press on a touchscreen, and the specific action can be flexibly set or adjusted according to actual usage needs. When a preset action is detected, a menu pop-up event is automatically triggered for the currently clicked target element and its parent element. This menu pop-up event is specifically used to handle interactions related to the "context menu." After the menu pop-up event is triggered, a default menu will appear based on the target element type. If a custom pop-up menu is needed, the default menu will conflict with the custom menu; therefore, the default menu must be intercepted and prevented from popping up through code.

[0022] The intercept methods `event.preventDefault()` and `event.stopPropagation()` are called to intercept the default menu popup corresponding to the preset action. `event.preventDefault()` directly prevents the "popup default menu" step. However, `preventDefault()` only prevents the default behavior; it doesn't prevent the menu popup event from propagating in the DOM tree. `event.stopPropagation()` prevents event bubbling. It stops the menu popup event from propagating further up the DOM tree, preventing it from being captured and processed again by other event listeners on parent elements or outer elements. This avoids potential unexpected event handling conflicts and ensures the independence and controllability of the custom menu's triggering events.

[0023] When the custom menu pop-up event `handleContextMenu` is triggered, `handleContextMenu` receives two core parameters: the event object (the target element) and the data of the currently clicked target element (e.g., the element ID). Based on the element ID, the target element is added to the `active` class. The `active` class defines a highlight effect, ensuring that the manipulated target element stands out from other elements.

[0024] The target element may support a dropdown menu. If the user performs a preset action while the dropdown menu is already expanded, the target menu that needs to pop up may conflict with the dropdown menu. Therefore, the dropdown state of the dropdown menus should be synchronized to ensure that only one menu is displayed at a time (either the dropdown menu or the target menu). When `handleContextMenu` is triggered, the business interface can be called to obtain relevant data of the target element, including the dropdown state of the dropdown menu. The corresponding operation is executed based on the dropdown state; for example, if the dropdown state is "menu is expanded," then the dropdown menu is closed. In other implementation scenarios, all dropdown menus of the target element can also be forcibly closed to avoid overlap with the target menu.

[0025] S102: Call the menu display method to check if an old menu instance exists. If an old menu instance exists, destroy the old menu instance.

[0026] In a specific implementation scenario, the `customContextMenu.show` method of `index.ts` is called. This method checks if an already opened menu instance exists; if so, it destroys it immediately to ensure page uniqueness. In situations where users might perform multiple operations in a short period, such as repeatedly right-clicking different target elements, failing to handle existing menu instances would result in multiple overlapping menus on the screen, obscuring content, causing visual clutter, and potentially leading to interaction conflicts.

[0027] In the file src / views / container / components / contextMenu / index.ts, customContextMenu is typically designed as a singleton class (or a module containing singleton logic), internally maintaining a reference to only one current menu instance. After destroying the old menu instance, a new menu instance (the target menu instance) is created, ensuring that the reference always points to the "currently unique and valid instance".

[0028] Each preset operation may involve a different scenario (different elements, different menu items, different mouse positions), and the target menu needs to be rendered based on the latest options parameters (such as the current element ID and dynamically generated menu items). Destroying the old instance and recreating the new instance ensures that the parameters of the new instance are completely based on the current options parameters, avoiding state pollution.

[0029] By defining the `CustomContextMenu` class, the custom menu business entity is directly mapped to a class in the code. The class's properties correspond to the menu's data state, and its methods correspond to the menu's behavioral capabilities, forming a clear entity-code mapping relationship. This mapping ensures a high degree of consistency between the code structure and the business entity, allowing developers to directly control the menu's lifecycle by manipulating instances of the class. The class encapsulates core data through "private properties," allowing access or modification only through methods within the class, fundamentally preventing external code from arbitrarily tampering with the data and ensuring data consistency.

[0030] S103: Obtain menu configuration parameters, create a target menu instance based on the menu configuration parameters, and mount the target menu instance to the document object model.

[0031] In a specific implementation scenario, `index.ts` uses `newVue()` to create a new Vue instance, specifying `index.vue` as the root component and passing `options` as initial data. Specifically, the new menu generation method `newVue(ContextMenu, {data:this.options})` deeply merges the two parameters (ContextMenu component options and `{data:this.options}` configuration) into a complete "instance options object," ensuring the combination of the component's fixed logic and dynamic configuration. Specifically, `ContextMenu` (component options) provides the fixed template structure and styles of the target menu instance. `{data:this.options}` (dynamic configuration) provides the variable part of the target menu instance, injecting the menu configuration parameters (such as menu items, position coordinates, etc.) from `this.options` into the target menu instance through the `data` option.

[0032] In `index.ts`, `ContextMenu` is an imported component object, essentially a Vue component options object (containing properties such as `template`, `data`, and `methods`), which serves as the template basis for instantiation. `this.options` is an instance property of the `customContextMenu` class (defined in `index.ts`), storing the dynamic configuration information of the target menu. This dynamic configuration information comes from the business logic layer. This dynamic configuration information is passed as data input to the newly created Vue instance (the target menu instance), determining the content, position, and state of the target menu (such as which menu items are displayed, where they are displayed, and which options are disabled).

[0033] Specifically, menu configuration parameters include mouse events, menu items, the container ID corresponding to the target element, and the parent component. The collected menu configuration parameters are stored as dynamic configuration information for the target menu in the `this.options` object. The `newVue(ContextMenu,{data:this.options})` method injects the menu configuration parameters from `this.options` into the newly created target menu instance. `ContextMenu` can directly access the menu configuration parameters, thereby creating the target menu instance.

[0034] When a user performs a centroid preset operation on the target element, the `handleContextMenu` event is automatically triggered. This event is encapsulated into an `event` object. The `event` object contains information such as the position coordinates of the preset operation (clientX / clientY). By declaring parameters in `handleContextMenu`, the `event` object can be directly accessed. The target menu instance itself is a DOM element created out of thin air; it has no idea where the user performed the preset operation on the screen. The origin of the target menu's display coordinates can be obtained based on the `event` object.

[0035] The container ID (containerId) is a unique identifier for the target element. This parameter is not used directly in rendering but is stored. When a user needs to perform an action on a menu item, index.vue will send it back to the business component along with the command (indicating what action was performed) and the containerId (indicating which element was operated on).

[0036] The parent component reference points to the business component that calls the target menu, so that the user's operation result can be returned to the corresponding business component based on the parent component reference.

[0037] The menu item array `menuItems` contains an array of all menu item configurations, states, and tooltips. `index.vue` is a standard Vue single-file component that defines the structure, style, and basic interaction logic of the target menu. It is only responsible for rendering the corresponding UI based on the `menuItems` array, such as buttons, dividers, icons, and disabled states.

[0038] contextMenuMap.contextMenuList is a predefined, globally configured menu configuration mapping module, which is a static menu template. It defines the business logic corresponding to the target element, the operations corresponding to each business logic, and the default attributes of these operations. It includes all possible menu items (such as "Start", "Restart", "Delete", etc.) and presets basic rendering parameters for each menu item (such as default title, icon, applicable type, etc.).

[0039] Retrieve the business object item corresponding to the preset operation from the server interface. The business object item includes status data. The status data can report the container status (e.g., running, stopped, exception) and container type (e.g., application container, database container, cache container). Determine whether each menu item in contextMenuMap.contextMenuList matches the current container to filter out valid menu items. Each menu item in contextMenuMap.contextMenuList usually has a preset applicable type. If the container type and the applicable type of the menu item match, the menu item is retained; otherwise, the menu item is canceled. For example, if the container is an application container, applicable items such as start and stop are retained, while inapplicable items such as clear cache are removed.

[0040] For the filtered menu items, adjust the rendering parameters based on the status data. You can reuse the default titles from the menu configuration mapping template (e.g., Start, Delete) or modify them dynamically (e.g., change Start to Force Start when the container status is abnormal). You can reuse the default icons from the menu configuration mapping template (e.g., the play icon for Start), but if the container has a special status (e.g., Abnormal), you can replace them with special icons (e.g., a warning icon). Items marked "Divider" in the menu configuration mapping template will retain their divider identifiers.

[0041] For each menu item in the menu configuration mapping template, it is input along with the status data of the business object into a preset set of business rules for matching and calculation. The business rules explicitly specify which menu item is allowed to execute and which is prohibited under which business object status. For example, a rule might stipulate that command:'delete' is only allowed when item.status:'stopped' (disabled:false), and prohibited under any other status (such as 'running', 'starting') (disabled:true). In other implementation scenarios, users can also set their own business rules to customize the disabling of menu items.

[0042] When an operation is determined to be disabled (disabled:true), an explanatory text is generated based on the disabled menu item and the specific state data that caused it to be disabled. This text not only states that the operation is unavailable, but more importantly, it explains why (e.g., "Cannot be deleted because the container is running"). Furthermore, this message supports embedded hyperlinks, guiding users to perform subsequent actions (such as navigating to a help page), transforming a simple disabled status into a proactive onboarding process.

[0043] In one implementation scenario, a tooltip field is added to the disabled menu items in the menuItems array. The tooltip content can be described in plain text, or it can be defined using structured configuration (such as an object containing multiple fields), defining both the plain tooltip text and hyperlink details. This establishes a connection between the tooltip's text description and the hyperlink entry, providing complete data for subsequent rendering. Rendering can be achieved using a custom Tooltip component. The Tooltip component includes a trigger area and a floating area. The trigger area is the disabled menu item itself, and the floating area is displayed when the mouse hovers over it. The floating area parses the structured configuration, rendering the plain text and hyperlink text separately. Hyperlinks are presented using clickable labels (such as link style elements) and distinguished from plain text by colors, underlines, and other styles, clearly indicating clickability.

[0044] After the above processing, the final result is not a copy of a static list, but a completely new, dynamic array of menu items full of contextual information. Each menu item carries explicit `disabled` and `tooltip` attributes, which are not pre-set but calculated in real-time based on the current state data. Because it relies on the latest state data returned by the server interface, this array of menu items accurately reflects the real-time status of the system. For example, if the status of a container changes from "running" to "stopped," the corresponding menu item will immediately change from "disable deletion" to "allow deletion," without requiring a page refresh.

[0045] Arrange all processed menu items (including complete rendering parameters) in the original order of the menu configuration mapping template to form the final menu item array. Each menu item in the array includes a title, icon, disabled status (yes / no), a separator (only for separator items), and a disabled message (only for disabled items). Pass the menu item array to the menu display method to determine the final display effect of the target menu (which menu items are displayed, whether they are disabled, what message is displayed, etc.).

[0046] In other implementation scenarios, when processing a menu item, it is checked whether it contains a `children` attribute. This attribute is an array used to define its child menu items. If the `children` array is detected, the system does not simply copy it as a regular attribute; instead, it initiates a recursive process. For each child item in the `children` array, the complete "dynamic menu item generation" process (including the aforementioned disablement determination, prompt message generation, and this step) is re-executed from the beginning. After the recursive processing is complete, a completely new array of child menu items with fully stateful processing is generated. This new array is then attached to the `children` attribute of the current parent menu item. This mechanism enables menu nesting at any depth, and each level can independently adapt to the business state.

[0047] In other implementation scenarios, when processing a menu item, it's checked whether it contains the `component` property. This property specifies an identifier for a Vue component. If the `component` property is detected, the system recognizes that the item is not a traditional menu button, but a container that needs to render a custom component. Custom dynamic props are generated, which can dynamically inject the current business object in real-time. For example, a component used for renaming (`RenameForm`) can receive `currentName: item.name` through the dynamic object's props. This means that as soon as the target menu is opened, the input box is automatically filled with the current name, which the user can directly modify, achieving true "on-the-spot editing." Please combine this with participation... Figure 3 , Figure 3 This is a schematic diagram of a freely renamable second-level menu provided by the present invention.

[0048] After the target menu instance is created, Vue automatically executes the compilation and rendering process to generate the menu DOM element. To display the target menu on the page, the menu DOM element in memory needs to be inserted into the document object model `document.body` through the `mount` operation, thus mounting the target menu instance under `document.body`. `document.body` is the top-level container in the page's DOM structure; all content on the entire page (such as lists, cards, navigation bars, etc.) is ultimately nested within `document.body`. By mounting the target menu instance under `document.body`, the target menu instance becomes a direct child element of `document.body`, completely freeing it from all constraints of its original parent elements (such as list items, cards, etc.). Its z-index only needs to be compared with other elements under the `body`. By setting a sufficiently high z-index for the menu (such as 9999), it can easily cover all elements on the page, such as the navigation bar, lists, and cards, ensuring that the target menu is displayed at the top level.

[0049] S104: Call the menu display method to display the target menu corresponding to the target menu instance based on the menu configuration parameters.

[0050] In a specific implementation scenario, the menu item array is iterated through, and each menu item is rendered one by one based on its rendering parameters, displaying the corresponding content according to those parameters. For example, titles and icons are displayed, and disabled styles (such as gray text and mouse pointer restriction) are applied to menu items marked "disabled:true". Tooltips are displayed when the mouse hovers over a disabled item. Display effects such as separators and custom styles are supported to ensure each option matches the business scenario. For instance, the appearance of specific options can be adjusted using custom style identifiers for each menu item in `menuItems`. For example, red text can be set for the "Delete" menu item, and bold text can be used for the "Start" menu item to meet the visual differentiation needs of different business scenarios.

[0051] Each menu item is a configuration object. You can set `isDivider` to render the divider, use `disabled` to control the disabled state of each menu item, and use `class` or `style` fields to customize the menu item's font style and other CSS properties. The rendering engine (index.vue) parses these configuration items and applies them to the corresponding HTML elements in the template. Developers can drive UI changes by modifying the configuration data, achieving declarative style control.

[0052] The `show()` method of `index.vue` is called to retrieve mouse events from the menu configuration parameters. Based on the mouse events, the position coordinates (clientX / clientY) of the preset operation are obtained. The position coordinates are combined with the menu size (which can be predefined or dynamically calculated) and the current window size (window.innerWidth / window.innerHeight) for boundary checks. If the menu would extend beyond the right side of the screen when displayed at its original coordinates, the X coordinate is adjusted to the left; if it extends beyond the bottom of the screen, the Y coordinate is adjusted upwards. Finally, the left (left offset) and top (top offset) of the target menu are determined. Based on the left and top offsets, the final target display position is obtained, ensuring that the target menu is completely within the visible range of the screen.

[0053] S105: Obtain the user's click operation on the target menu, perform a feedback operation based on the operation position of the click operation, and close the target menu.

[0054] In a specific implementation scenario, click listeners are bound to all menu items in the target menu. When a user clicks, the system first checks if the clicked menu item is a valid item (i.e., disabled: false). If it is a disabled item, the click is ignored without any response, preventing functional abnormalities caused by accidental clicks. If it is a valid item, the didSelectItem event is triggered, carrying key information such as command (the operation identifier of the menu item, such as start or delete, indicating the specific operation the user wants to perform) and containerId (the container ID corresponding to the target element of the current operation, ensuring that the business logic can locate the correct element). After the didSelectItem event is triggered, the closing logic of the target menu is executed immediately, without waiting for the business logic to complete, avoiding the menu remaining on the screen for a long time and affecting subsequent operations. Bind a click event listener globally on the page (document or body) to detect whether the click occurs outside the target menu. When the user clicks anywhere on the page except the target menu, the event's target property (the clicked DOM element) determines whether the clicked element belongs to the target menu's DOM hierarchy (i.e., the click location is outside the menu), and if the target menu is currently displayed, the close process is triggered immediately.

[0055] In other implementation scenarios, the value of `command` determines whether the operation is high-risk. If it's a normal operation with no risk, the corresponding backend API is called directly, carrying `containerId` as a parameter. If it's a high-risk operation, which could lead to data loss or business interruption, a secondary confirmation pop-up will appear. The pop-up clearly indicates the operation risk; the corresponding API is only called to execute the operation after the user clicks "confirm"; clicking "cancel" directly terminates the process without executing any business logic.

[0056] The disabled menu item (disabled:true) is explicitly marked with styles during rendering (e.g., gray text, mouse pointer changes to a disabled style). When the mouse hovers over the disabled menu item, a tooltip will appear (e.g., "The container is already running and cannot be restarted"), informing the user that "this option is not clickable" and the reason. See also Figure 4 , Figure 4 This is a schematic diagram of a page illustrating an embodiment of the tooltip that displays disabled menu items provided by the present invention.

[0057] S106: Delete the target menu instance.

[0058] In a specific implementation scenario, regardless of the method used (clicking a valid item or clicking an external item), the resource destruction logic in index.ts will ultimately be triggered to ensure that the memory and DOM resources related to the target menu are completely released, avoiding memory leaks. After the instance is destroyed, the instance is assigned null, severing the association between the class and the old instance, ensuring that when creating a new menu later, the invalidated old instance will not be referenced. After destruction, the menu is completely invisible on the page, and the related resources no longer occupy memory.

[0059] Unlike conventional dropdown components (which create a new set of DOM nodes every time they are opened), this approach uses a singleton pattern. Regardless of how many times the user right-clicks, the manager in `index.ts` always maintains only one active Vue instance and its corresponding DOM nodes. Each time `show()` is called, it either destroys the old instance and creates a new one, or reuses an existing instance and only updates its data. This means that at any given time, only one DOM node for the right-click menu exists on the page. This design significantly reduces the number of DOM operations and memory usage, avoids frequent node creation and garbage collection, and thus significantly improves performance, especially in scenarios with frequent operations.

[0060] Please refer to the following: Figure 5 and Figure 6 , Figure 5 This is a code diagram of the DOM node not being deleted, provided by the present invention. Figure 6 This is a schematic diagram of the code after deleting a DOM node, as provided by the present invention.

[0061] In this embodiment, `index.ts` is the manager. It is responsible for instance lifecycle (creation, mounting, destruction), singleton control, and interface integration with external businesses. It focuses on "when to create," "when to destroy," and "how to integrate." `index.vue` is the renderer. It is responsible for all presentation layer logic after receiving data: intelligent positioning, recursive rendering, and interactive feedback. It focuses on "how to display" and "how to interact." The two communicate through clear interfaces (`show` method calls and `options` parameter passing) and an event mechanism, together forming a highly cohesive and loosely coupled menu system.

[0062] This approach follows Vue's recommended best practices for component-based development. The logic is clearly separated into `index.ts` (lifecycle and instance management) and `index.vue` (rendering and user interaction). The data flow is clear: business data flows into components via props, and user interactions flow out of components via events. Furthermore, its design is data-driven: the final presentation of the menu depends entirely on the passed-in `menuItems` array. Whenever the content of this array changes (whether from an asynchronous API request or a local state change), the menu will automatically re-render and display the latest content and state, thus naturally supporting dynamic data and behavior.

[0063] This method employs an object-oriented programming paradigm. It abstracts the target menu as an independent object with a complete lifecycle. This object is represented by a Class or a manager object containing state and methods. Its internal state (such as the currently active menu instance) is encapsulated internally, inaccessible and unmodifiable externally. Business code can only interact with it through exposed public methods (such as show()). This design binds the complex logic of instance creation, mounting, locating, and destruction together into a reusable, independent entity, achieving high cohesion and low coupling. Data is protected within closures or instances and can only be modified through well-defined interfaces, greatly improving code security and maintainability. All browser compatibility issues (such as differences in event objects, CSS prefixes, and quirks in location calculations) are confined to the index.ts and index.vue files. As a plugin user, the developer calls the unified showAPI, passing in a standard JS object, completely unaware of the underlying compatibility handling.

[0064] The plugin of this invention has implemented complete lifecycle management, from event interception and location calculation to display / hide and final destruction. For most scenarios, developers only need to focus on configuration (generating menuItems) and callback handling (listening for selection events), without needing to worry about the internal operating mechanisms. At the same time, the plugin exposes key capabilities (such as display, hide, and destruction methods) as APIs, allowing developers with specific needs to precisely control them externally. This design principle of being user-friendly by default and extensible on demand allows developers to focus on business logic without being distracted by the underlying implementation details.

[0065] This invention is built on the Vue framework, whose core is a virtual DOM system. The right-click menu, as a Vue component, has its template compiled into a virtual DOM tree. When the menu's reactive data (such as menuItems or location information) changes, Vue efficiently compares the old and new virtual DOM trees, calculates the minimum difference in modification, and then updates the real DOM in batches and asynchronously. This process is automatically completed internally by Vue, enabling the plugin to achieve excellent rendering performance without manual DOM manipulation and possessing cross-platform potential (browsers, SSR, mini-programs, etc.) because the virtual DOM itself is a platform-independent JavaScript object abstraction. As described above, this embodiment obtains menu configuration parameters and creates a target menu instance based on these parameters. Developers do not need to manipulate the DOM; they only need to set the corresponding parameter attributes in the menu configuration parameters. The process of creating and mounting the instance is completely automated within the method. The menu display method is called to display the target menu based on the menu configuration parameters. Complex display logic is encapsulated within the menu display method. The user's click operation on the target menu is obtained, and a feedback operation is performed based on the operation position of the click operation, passing the data of the clicked item as a parameter. The business processing logic is implemented by externally listening to this event, which separates the menu component from the specific business code, making responsibilities clear and greatly reducing coupling. After the target menu is closed, the target menu instance is deleted, realizing automated lifecycle management. The menu automatically executes the destruction process after the interaction is completed, reclaiming memory and DOM nodes. Developers are freed from complex implementation details, greatly improving development efficiency and code maintainability.

[0066] Please see Figure 7 , Figure 7 A schematic diagram of the internal structure of an electronic device in one embodiment is shown. This electronic device can specifically be a terminal or a server. Figure 7 As shown, the electronic device includes a processor, a memory, and a network interface connected via a system bus. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and may also store a computer program. When executed by the processor, this computer program enables the processor to implement a custom menu display method. The internal memory may also store a computer program, which, when executed by the processor, enables the processor to implement the custom menu display method. Those skilled in the art will understand that… Figure 7 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the electronic device to which the present application is applied. The specific electronic device may include more or fewer components than shown in the figure, or combine certain components, or have different component arrangements.

[0067] In one embodiment, an electronic device is provided, including a memory and a processor, the memory storing a computer program that, when executed by the processor, causes the processor to perform the steps described above.

[0068] In one embodiment, a computer-readable storage medium is provided storing a computer program that, when executed by a processor, causes the processor to perform the steps described above.

[0069] The present invention also provides a custom menu display system and a redundant file deletion system, which include the electronic device and network-attached storage device described above. The electronic device has an application installed that can perform the steps of the methods described above.

[0070] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0071] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0072] It should be understood that the above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit them. Those skilled in the art can modify the technical solutions described in the above embodiments, or make equivalent substitutions for some of the technical features; and all such modifications and substitutions should fall within the protection scope of the appended claims of the present invention.

Claims

1. A method of displaying a custom menu, characterized by, The application is applied to an application installed in an electronic device connected with a network-attached storage device, and the network-attached storage device is accessed through the application; The custom menu display method comprises: When it is detected that a user performs a preset operation on a target element, triggering a custom menu pop-up event, calling an interception method to intercept a default menu pop-up corresponding to the preset operation; Calling a menu display method, detecting whether there is an old menu instance, if there is the old menu instance, destroying the old menu instance; Obtaining menu configuration parameters, creating a target menu instance based on the menu configuration parameters, and mounting the target menu instance to a document object model; Calling a menu display method, displaying a target menu corresponding to the target menu instance based on the menu configuration parameters; Obtaining a click operation of a user on the target menu, performing a feedback operation based on the operation position of the click operation, and closing the target menu; Deleting the target menu instance.

2. The self-defining menu display method of claim 1, wherein, The step of creating a target menu instance based on the menu configuration parameters comprises: Obtaining a business object corresponding to the preset operation, obtaining rendering parameters of each menu item in the menu configuration mapping template based on state data of the business object, the types of the rendering parameters including at least one of a title, an icon, a disabled state, a split line, and disabled prompt information, and integrating the rendering parameters of all menu items into the menu item array.

3. The self-defining menu display method of claim 2, wherein, The step of obtaining a menu item array based on the state data of the business object and the menu configuration mapping template comprises: When the disabled state of a menu item is disabled, adding a disabled prompt information to the menu item, the disabled prompt information including prompt text and / or a hyperlink.

4. The self-defining menu display method of claim 2, wherein, The step of obtaining a menu item array based on the state data of the business object and the menu configuration mapping template comprises: If the current processing menu item includes a sub-attribute, re-executing the step of claim 2 to generate a sub-menu item array, and mounting the sub-menu item data to the current processing menu item; and If the current processing menu item includes a custom attribute, generating a dynamic object, obtaining real-time data, and injecting the real-time data into the dynamic object.

5. The method of claim 1, wherein, The step of displaying a target menu corresponding to the target menu instance based on the menu configuration parameters comprises: Obtaining a position coordinate of the preset operation, a current window size, and a menu size, obtaining a target display position of the target menu based on the position coordinate, the current window size, and the menu size.

6. The method of claim 1, wherein, The step of performing a feedback operation based on the operation position of the click operation comprises: Judging whether an operation menu item corresponding to the operation position is disabled; If yes, displaying the reason why the operation menu item is disabled; If no, obtaining an operation identifier corresponding to the operation menu item, calling a corresponding business method based on the operation identifier, and closing the target menu.

7. The self-defining menu display method of claim 6, wherein, The step of performing a feedback operation based on the operation position of the click operation comprises closing the target menu if the operation position is outside the target menu.

8. An electronic device, comprising: An electronic device comprising a memory and a processor, the memory storing a computer program, the computer program being executed by the processor to cause the processor to perform the steps of the method of any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, A computer program stored on a computer readable medium, the computer program being executed by a processor to cause the processor to perform the steps of the method of any one of claims 1 to 7.

10. A custom menu display system, characterized by, An electronic device comprising a network attached storage device and the electronic device of claim 8, the electronic device having an application program installed therein capable of performing the steps of the method of any one of claims 1 to 7.

Images