A vue-flow-based intelligent process arrangement method, system, device and medium

Abstract

The application provides a vue-flow-based intelligent process arrangement method, system, device and medium, belongs to the technical field of front-end process arrangement, and through formulating a node standardized interface and an attribute panel interface, unifying node data structure and interaction rules, developing a public connection component and providing style customization capability, encapsulating special nodes such as large models based on the standardized interface, constructing node registration class management node uniqueness and connection logic, providing component registration interface and development auxiliary method, adapting the registered node to the vue-flow framework, ensuring normal rendering, and finally realizing the rendering logic and state style unification of the node and the attribute panel. The standardization degree and development efficiency of the process arrangement system are improved, the node compatibility is ensured through the standardized interface, and the framework adaptation difficulty is reduced. The connection logic management and state style unification optimize the user experience; the overall scheme enhances the system stability and maintainability, and provides solid technical support for intelligent process arrangement.

Description

Technical Field

[0001] This invention belongs to the field of front-end process orchestration technology, specifically relating to an intelligent process orchestration method, system, device, and medium based on vue-flow. Background Technology

[0002] As enterprises deepen their digital transformation, business process automation and intelligent orchestration have become key means to improve operational efficiency and decision-making capabilities. In fields such as low-code / no-code development platforms, intelligent workflow engines, and AI application building systems, visual process orchestration technology is widely used to support non-professional developers in quickly building complex business logic by dragging and dropping nodes and configuring connections.

[0003] In related technologies, the styles of connection points and lines are defined individually by each node: some node connection points are square, some are circular, some connection lines are straight lines, and some are curved. The colors range from black to blue without a unified standard, leading to visual clutter on the workflow canvas and making it difficult for users to quickly identify node connection relationships. Furthermore, the connection components lack configured interface information; if developers need to customize the style, they must modify the component's underlying code, failing to balance the requirements of visual consistency and business flexibility.

[0004] In related technologies, large model nodes are integrated into the workflow orchestration, but the large model nodes defined by the developers require manual input of the model ID; the ports layout of some nodes is chaotic, which can easily cause logical conflicts when connecting with other nodes. Nodes are not associated with property panels and cannot be configured with system-prompt, resulting in incomplete functionality of large model nodes, poor compatibility with existing workflows, and a development time of more than one week to develop a usable large model node, which is not reusable.

[0005] In related technologies, when multiple developers work simultaneously, duplicate types are prone to occur, leading to node overwriting and canvas loading anomalies. Furthermore, the lack of connection rule validation logic allows users to connect nodes arbitrarily, resulting in errors such as no output and circular dependencies during process execution, affecting usability. Summary of the Invention

[0006] This invention provides an intelligent process orchestration method based on vue-flow, which is designed for the development of intelligent process orchestration products based on the vue-flow framework. It is applicable to scenarios such as enterprise-level business process management and low-code platform construction, and supports the standardized development and reuse of front-end intelligent nodes such as large model nodes, knowledge base nodes, and intelligent agent nodes.

[0007] The methods include:

[0008] S101: Establish standardized node interfaces and define node metadata and node structure to unify node format;

[0009] S102: Define the property panel interface and standardize the property panel hierarchy and category configuration to unify interaction rules;

[0010] S103: Develop common connection points and connector components, and standardize connection point and connector styles to provide customization capabilities;

[0011] S104: Encapsulate large model nodes or knowledge base nodes based on standardized node interfaces and attribute panel interfaces, and configure exclusive attributes and port layouts.

[0012] S105: Develop a node registration class, providing methods for node registration and connection rule judgment to manage node uniqueness and connection logic;

[0013] S106: Provides a component registration interface and helper methods. The component registration interface supports registration with a custom property editor, and the helper methods are filled with the deleteable and width fields by default.

[0014] S107: Adapt the node registration class to the vue-flow framework to ensure that nodes and ports are displayed correctly;

[0015] S108: Implements the rendering logic for nodes and property panels, and unifies the state style through rendering methods and event binding.

[0016] It should be further explained that S101 specifically includes the following methods:

[0017] Define standardized interfaces for nodes, including NodeMetadata metadata containing unique identifiers (type), display name (label), and connection ports, as well as a complete NodeDefinition structure containing rendering components, initialization function (initialData), and property panel configuration method (getPropertyPanelConfig). Clarify the types and constraints of each field to ensure that the node format is compatible with the vue-flow framework.

[0018] It should be further explained that S102 specifically includes the following methods:

[0019] Define the PropertyPanelConfig interface, which is a TypeScript interface and contains a categories field of an array of PropertyCategory objects to organize the collection of property categories;

[0020] Define the property category interface PropertyCategory, which includes the title field, the properties field, and the setPropertyRelates field;

[0021] Configure a property panel rendering engine based on Vue components. By parsing the PropertyPanelConfig configuration, iterates through categories and properties, uses Vue's v-for directive to generate the DOM structure of category titles and property item controls, and binds the data model.

[0022] Configure a standard property control component library, including an encrypted input box component that integrates an encryption algorithm interface through Vue component encapsulation and a parameter slider component that supports minimum / maximum value configuration through Vue component encapsulation, and register the components to the global Vue instance for the property panel rendering engine to call;

[0023] Based on Vue's reactive system, we use watch to listen for changes in property values, triggering validation and update functions to ensure that property changes are reflected in the visual state of nodes in real time.

[0024] It should be further noted that S103 specifically includes the following methods:

[0025] Define the structure of the common connection point component, and set the connection point's identifier ID, input / output, and size parameters;

[0026] Define the rendering logic of the common connection point component, and configure the visual elements of the connection point at the node position according to the connection direction and size parameters;

[0027] Design the basic style parameters of the connector, such as the start and end point identifiers, line width, and default color.

[0028] Calculate and draw the line connecting the two points based on the position information of the starting and ending connection points;

[0029] In the public connection point component and public connection line component, set up an exposed style attribute interface to allow developers to pass in custom style objects to override the basic style parameters.

[0030] It should be further explained that S104 specifically includes the following methods:

[0031] Based on the standardized node interface, define the NodeMetadata metadata of large model / knowledge base nodes, set the type with business prefix, display name label, and configure ports as left-in target type and right-out source type ports;

[0032] Based on the node definition interface, a rendering component is set for the node. The rendering component includes style logic for states such as hover border color change and selection highlight.

[0033] In the node property configuration, add the property item corresponding to the model-selector and associate it with the editor field of PropertyItem in the property panel;

[0034] In the node property configuration, add a property item corresponding to the system-prompt-editor prompt word editor, and associate the property item with the editor field of PropertyItem in the property panel;

[0035] Define the getPropertyPanelConfig method for the large model, and call the property panel to configure the basic information, input, model, prompts, and output properties.

[0036] It should be further noted that S105 specifically includes the following methods:

[0037] Define a NodeRegistry class, using the private modifier to declare the nodes property as a Map data structure, with the key being the string "node type" and the value being the node definition object, used to store registered nodes;

[0038] It receives a node definition object as a parameter, checks whether the type field already exists using the has method of Map, outputs an exception if it exists, otherwise stores the node definition in nodes using the set method of Map.

[0039] The array of node definitions is received as a parameter. The array is traversed using the forEach method of Array, and the register method is called in each iteration to register a single node.

[0040] It receives sourceNodeType and targetNodeType string parameters and uses a switch statement to determine the connection rules.

[0041] Configure the withRegister component registration interface, which takes a Vue node and a configuration object as parameters and returns a new Vue component. In the created lifecycle hook of the new component, call the register method of the NodeRegistry instance to complete the automatic registration.

[0042] It receives a node definition object as a parameter, uses the Object.assign method to merge default values, and returns it to the node.

[0043] It should be further explained that S106 specifically includes the following methods:

[0044] Get the current vue-flow version number by using the version property exposed by the vue-flow framework or by reading the vue-flow version field in the project's package.json, extract the major version number and store it;

[0045] Iterate through the node definitions stored in the nodes member of NodeRegistry, extract the type as the key for each node type, associate the node's rendering component and port configuration information, and construct an object that conforms to the nodeTypes configuration requirements of the vue-flow framework;

[0046] The public connector component developed in step S103 is used to define the mapping relationship between the connector type identifier and the component according to the configuration format of edgeTypes in the vue-flow framework, and an edgeTypes configuration object is generated.

[0047] If vue-flow version 2.x is detected, explicitly add a position field to each port in the metadata.ports of the node definition, and synchronize the port configuration to the parameters required for vue-flow node rendering;

[0048] Extract the default style fields width and height from the node definition registered in NodeRegistry, and pass the style parameters to the node rendering function through the node rendering context injection method provided by the vue-flow framework;

[0049] For each identified vue-flow version, write test cases to simulate the canvas loading process and verify the size of nodes, icon styles, and the display status of input / output ports.

[0050] This application also provides an intelligent workflow orchestration system based on vue-flow, the system including:

[0051] The node standard definition module is used to define standardized node interfaces, node metadata, and node structure to unify node format.

[0052] The Property Panel Specification module is used to define the property panel interface and standardize the property panel hierarchy and category configuration to unify interaction rules.

[0053] The common module for connection components is used to develop common connection point and connection line components, and to standardize the styles of connection points and connection lines to provide customization functionality.

[0054] The large model node encapsulation module encapsulates large model nodes or knowledge base nodes based on the standardized node interface and attribute panel interface, and configures exclusive attributes and port layout.

[0055] The node registration management module is used to develop node registration classes and provides methods for determining node registration and connection rules to manage node uniqueness and connection logic.

[0056] The component registration helper module provides component registration interfaces and helper methods. The component registration interface supports registration with a custom property editor, and the helper methods are filled with the deleteable and width fields by default.

[0057] The Vue-Flow adaptation module is used to adapt nodes registered by the node registration class to the vue-flow framework, ensuring that nodes and ports are displayed correctly.

[0058] The rendering state unification module is used to implement the rendering logic of nodes and property panels, and to unify the state style by binding rendering methods and events.

[0059] According to another embodiment of this application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the intelligent process orchestration method based on vue-flow.

[0060] According to another embodiment of this application, a storage medium is also provided, on which a computer program is stored, wherein when the computer program is executed by a processor, the steps of an intelligent process orchestration method based on vue-flow are implemented.

[0061] As can be seen from the above technical solutions, the present invention has the following advantages:

[0062] This invention provides an intelligent workflow orchestration method based on vue-flow, which establishes standardized node interfaces, standardizes node fields such as type, label, and ports, and their constraints, ensuring all nodes adhere to a unified format standard. It defines a property panel interface, standardizes the PropertyPanelConfig hierarchy and PropertyCategory configuration, unifies interaction rules such as real-time validation and synchronized node display for attribute changes, and includes built-in standard components. Users operating property panels on different nodes do not need to adapt to differentiated interactions, reducing learning costs; developers do not need to repeatedly develop property panel logic for each node, directly reusing the interface standard, improving development efficiency. It develops common connection points and connection line components and exposes style attributes, ensuring visual consistency of connecting elements in the workflow canvas through basic styles, while also allowing developers to customize colors, sizes, and line types to meet the personalized needs of different business scenarios, balancing uniformity and flexibility. Based on the node interface and property panel interface, it encapsulates exclusive nodes, directly reusing the unified format and interaction rules, eliminating the need to develop basic logic from scratch. Configure exclusive attributes such as model-selector and system-prompt-editor, as well as the left-in-right-out port layout, to ensure that large model / knowledge base nodes not only conform to the overall specifications but also have complete business capabilities, and can be directly reused in different processes.

[0063] The core class NodeRegistry was developed, using `register` and `registerMultiple` to centrally store and verify the uniqueness of nodes. `isConnectionAllowed` is used to determine connection rules, ensuring the logical validity of the process orchestration. A `withRegister` component registration interface is provided, supporting rapid integration with a custom property editor without modifying the underlying framework logic. The `defineNode` helper method is filled with common fields such as `deletable:true` and `width:180px` by default; developers only need to configure business-specific fields, reducing code duplication. Differentiated adaptation logic is implemented for different vue-flow versions, converting nodes registered in NodeRegistry to framework-recognizable `nodeTypes` configurations and common connection line components to `edgeTypes` configurations, ensuring that node size, icons, and ports display correctly in different framework versions such as 2.x and 3.x, improving cross-version compatibility. Attached Figure Description

[0064] To more clearly illustrate the technical solution of the present invention, the accompanying drawings used in the description will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0065] Figure 1 A flowchart for an intelligent workflow orchestration method based on vue-flow;

[0066] Figure 2 This is a schematic diagram of an example of a large model attribute panel;

[0067] Figure 3 This is a schematic diagram of an electronic device. Detailed Implementation

[0068] The intelligent workflow orchestration method based on vue-flow provided by this invention encapsulates the front-end logic into a core front-end file by establishing intelligent node front-end development specifications and attribute panel interaction standards. It shields developers from the underlying adaptation details of vue-flow, allowing them to focus solely on the front-end style design and attribute configuration of intelligent nodes. This solves the problems of incompatibility, chaotic interactions, and low development efficiency of intelligent node front-ends, enabling the reuse of intelligent node front-end components across projects.

[0069] The intelligent workflow orchestration method based on vue-flow involved in this application will be described in detail below. For illustrative purposes and not for limiting purposes, specific details such as particular system structures and technologies are proposed to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application can also be implemented in other embodiments without these specific details.

[0070] It should be understood that, when used in this specification, terms include indicating the presence of a described feature, integral, step, operation, element, and / or component, but do not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components, and / or collections thereof. The terms include, encompass, have, and variations thereof mean including but not limited to, unless otherwise specifically emphasized.

[0071] The statements such as "one embodiment" or "some embodiments" described in this application mean that one or more embodiments of this application include the specific features, structures, or characteristics described in that embodiment. Therefore, the statements such as "in one embodiment," "in some embodiments," "in other embodiments," and "in still other embodiments" in this application do not necessarily refer to the same embodiment, but rather mean one or more, but not all, embodiments, unless otherwise specifically emphasized.

[0072] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0073] Please see Figure 1 The diagram shows a flowchart of an intelligent workflow orchestration method based on vue-flow in a specific embodiment. The method includes:

[0074] S101: Establish standardized node interfaces, define node metadata, and define node structure to unify node format.

[0075] In some embodiments, defining a standardized node interface includes setting NodeMetadata metadata, specifically involving a unique identifier for the type, the display name of the label node in the canvas, the connection ports, and defining the port ID, type, and allowed node types, etc.

[0076] It also defines a NodeDefinition structure, which can contain rendering components, initialData initialization functions, getPropertyPanelConfig panel configuration methods, and specifies the type constraints of all fields, such as type being a string and ports being an array.

[0077] As can be seen, by defining unified metadata and structural specifications, all nodes follow the same format standard. The vue-flow framework can parse the basic information of nodes, call the specified rendering components, and call the panel configuration methods according to the standard, so as to achieve the adaptation of nodes and the framework.

[0078] S102: Define the property panel interface, standardize the property panel hierarchy and category configuration to unify interaction rules.

[0079] In some embodiments, the PropertyPanelConfig interface specification defines a hierarchical structure. The top level contains a collection of categories, with category IDs as keys and PropertyCategories as values. The PropertyCategory category configuration is further refined, including the title (category display name), a collection of properties items, each of which must define its ID, display name, data type, editor type, and the setPropertyRelates property association logic.

[0080] The unified interaction rules include standard components such as real-time input validation, synchronous node display of attribute changes, configuration of encrypted input boxes for sensitive parameter input, and parameter sliders for adjusting numerical parameters, and clearly define the component calling methods.

[0081] This embodiment standardizes the hierarchical structure and category configuration of the attribute panel, enabling the framework to parse the organization of the attribute panel according to a unified logic. Unified interaction rules and built-in components ensure a consistent user experience across attribute panels of different nodes. The framework can automatically match the corresponding editor components and execute the interaction logic based on the attribute item configuration.

[0082] S103: Develop common connection points and connector components, and standardize connection point and connector styles to provide customization capabilities.

[0083] In some embodiments, when developing a common connection point component, basic styles and state styles are defined. The `style` attribute is exposed, allowing developers to pass in custom parameters such as `color`, `size`, and `shape`.

[0084] When developing a public connector component, define basic styles and state styles, expose the `style` attribute, and allow developers to customize line width, color, and line type. Specify the component's calling parameters; for example, connection points require the port type and node ID, while connector lines require the start / end connection point IDs.

[0085] As can be seen, the common connection point component renders visual elements at the specified position of the node based on the input port type and custom style parameters; the common connection line component calculates the connection path and renders the lines based on the coordinates of the start / end connection points and custom style parameters; developers can modify the exposed style attributes to override the component's default style and achieve personalized customization.

[0086] S104: Encapsulates large model nodes or knowledge base nodes based on standardized node interfaces and attribute panel interfaces, and configures exclusive attributes and port layouts.

[0087] In some embodiments, based on the node standardization interface of S101, NodeMetadata and NodeDefinition of large model / knowledge base nodes are defined. Based on the property panel interface of S102, exclusive property items are configured, and the property panel configuration containing basic configuration and business parameter categories is returned by the getPropertyPanelConfig method.

[0088] It should be noted that by utilizing the node format standard of S101, the encapsulated nodes can be recognized by the framework; by utilizing the attribute panel interface of S102, the exclusive attribute items can be rendered and interacted with according to unified interaction rules; by customizing the ports layout and exclusive attributes, the business function requirements of large model / knowledge base nodes are met, the format consistency with other nodes is maintained, it is easier for users to understand the node connection logic, and the user experience is improved.

[0089] S105: Develop a node registration class that provides methods for determining node registration and connection rules to manage node uniqueness and connection logic.

[0090] In some embodiments, a NodeRegistry core class is developed, which internally maintains a Map-type node storage container, where the key is the node type and the value is the NodeDefinition.

[0091] This embodiment provides a `register` method for single-node registration, which receives a `NodeDefinition` parameter. It first checks if the `type` already exists using a container; if so, it outputs a warning and overwrites the existing one. It also provides a `registerMultiple` method for batch registration, which receives an array of `NodeDefinition` parameters and iterates through the array while calling the `register` method. Finally, it provides an `isConnectionAllowed` method for determining connection rules, which receives the source node type, source port ID, and target node type. It queries the source node's `ports` configuration for allowed node types for that port and determines if the target node type is within the allowed range. A singleton instance of the node registration class is defined to ensure uniqueness in global node management.

[0092] As can be seen, the singleton NodeRegistry class centrally manages all node definitions. The register / registerMultiple methods ensure the uniqueness of node types, and the isConnectionAllowed method determines whether the connection between nodes is valid based on the connection rules configured in the node ports. All registered nodes can be retrieved from this class for framework configuration. This provides a unified node resource pool for adapting the S107 to the vue-flow framework, ensuring that the framework can load all registered nodes.

[0093] S106: Provides a component registration interface and helper methods. The component registration interface supports registration using a custom attribute editor, and the helper methods are populated with the deleteable and width fields by default.

[0094] In some embodiments, a `withRegister` component registration interface is provided, which receives a custom property editor component, a configuration object containing the editor name and property resolver functions, and stores the editor component associated with the name. The property resolver functions define the editor's formatting and validation of property values. A `defineNode` helper method is provided, which receives node definition parameters passed by the user, defaulting to the `deletable`, `width`, and `height` fields. If the user passes the same fields, the default values ​​are overridden, and finally, a complete `NodeDefinition` is returned.

[0095] In some specific embodiments, step S106 specifically includes the following:

[0096] S1061: Obtain the currently used vue-flow version number by using the version property exposed by the vue-flow framework or by reading the version field of vue-flow in the project's package.json, extract the major version number and store it.

[0097] In some embodiments, the version string is obtained by import{version}from'vue-flow' or require('vue-flow / package.json').version, and the major version number is extracted using version.split[0] to determine whether it is a 2.x series; if the version cannot be obtained directly, the version is indirectly determined by the existence of the framework API.

[0098] S1062: Traverse the node definitions stored in the nodes member of NodeRegistry, extract the type as the key for each node type, associate the node's rendering component, port configuration and other information, and construct an object that conforms to the nodeTypes configuration requirements of the vue-flow framework.

[0099] In some embodiments, NodeRegistry.instance.nodes is traversed, and for each NodeDefinition, type is extracted as the key of nodeTypes, and the attributes definition.component (rendering component), definition.metadata.ports (port configuration), and definition.initialData (initialization data) are used as values ​​to construct a nodeTypes object in the format {[type]:{component,ports,initialData}}.

[0100] This embodiment conforms to the structural requirements of the vue-flow framework for nodeTypes. When rendering a node, the framework will match the corresponding configuration from nodeTypes based on the node's type field and load the rendering component and initialization parameters.

[0101] S1063: Take the public connector component developed in step S103, define the mapping relationship between the connector type identifier and the component according to the configuration format of edgeTypes in the vue-flow framework, and generate an edgeTypes configuration object.

[0102] In some embodiments, the PublicEdgeComponent public connection line component developed in step S103 is named custom-edge type, and a mapping relationship of {'custom-edge':{component:PublicEdgeComponent,style:PublicEdgeComponent.defaultStyle}} is constructed in the edgeTypes configuration, where defaultStyle is the basic style built into the component.

[0103] S1064: If vue-flow version 2.x is detected, explicitly add a position field to each port in the metadata.ports of the node definition, and synchronize the port configuration to the parameters required for vue-flow node rendering.

[0104] In some embodiments, for vue-flow 2.x, a position field is added to the metadata.ports array in the node definition for each port object, with the input port set to position: 'left' and the output port set to position: 'right'. This ports information is then passed to the framework's port rendering module via vue-flow's nodeProps configuration.

[0105] S1065: Extract default style fields such as width and height from the node definition registered in NodeRegistry, and pass the style parameters to the node rendering function through the node rendering context injection method provided by the vue-flow framework.

[0106] In some embodiments, style fields such as width and height are read from the metadata defined in each node, and these fields are encapsulated into style objects and injected into the component's rendering context through the props passing method of vue-flow node rendering components.

[0107] It should be noted that when rendering a vue-flow node, it reads the style parameter in the component's props, calculates the node's footprint on the canvas based on this parameter, and determines the node's visual boundaries.

[0108] S1066: For the identified vue-flow versions, write test cases to simulate the canvas loading process and verify the size of nodes, icon styles, and display status of input / output ports.

[0109] In some embodiments, a test environment is built using Jest + Vue Test Utils, with vue-flow versions 2.x and 3.x imported respectively, to simulate the NodeRegistry node registration and vue-flow canvas initialization process; the node DOM is obtained through wrapper.find, and its offsetWidth and offsetHeight are asserted to be equal to 180px and 60px respectively; the number and location of ports are checked to see if they match the configuration through wrapper.findAll.

[0110] As can be seen, this embodiment verifies the execution effect of the adaptation logic under different version frameworks by simulating the node registration and canvas loading process in a real development scenario, identifies adaptation vulnerabilities, and ensures that the adaptation solution can run stably under multiple version frameworks, thereby improving the reliability and compatibility of the solution.

[0111] S107: Adapt the node registration class to the vue-flow framework to ensure that nodes and ports are displayed correctly.

[0112] In some embodiments, all registered nodes are retrieved from the NodeRegistry class of S105, the node definitions are traversed, and a node type-node configuration mapping is constructed according to the vue-flow framework's nodeTypes configuration format. The common connector component developed in S103 is used to construct a connector type-component mapping according to the vue-flow framework's edgeTypes configuration format. The vue-flow version is checked; if it is version 2.x, the position field needs to be explicitly added to the node ports configuration; if it is version 3.x, the default ports parsing logic is used. The constructed nodeTypes and edgeTypes configuration objects are then passed to the canvas component props of the vue-flow framework.

[0113] This embodiment integrates registered nodes with the vue-flow framework, ensuring that nodes display correctly in the framework canvas and ports are correctly recognized. Version adaptation resolves compatibility issues between different vue-flow versions. Component and node resources from S103 and S105 are directly reused, avoiding redundant development of the framework adaptation layer.

[0114] S108: Implements the rendering logic for nodes and property panels, and unifies the state style through rendering methods and event binding.

[0115] In some embodiments, the node rendering logic is implemented. When loading the Vue rendering components defined in S101 / S104, the `markRaw` method is used to avoid Vue's reactive processing, and the node DOM structure is constructed using the `renderNode` method. The property panel rendering logic is implemented by calling the `getPropertyPanelConfig` method of the node in S102 to obtain the configuration, rendering property items by category, and matching the corresponding editor. Basic events are bound: click and hover events are bound to nodes, and change events are bound to property items, synchronizing property values ​​to nodes in real time and updating the canvas display. CSS variables are used to uniformly manage state styles; the state styles of all nodes and the property panel reference these variables.

[0116] This embodiment optimizes performance using markRaw and generates the DOM with a unified structure using the renderNode method, ensuring visual consistency across nodes. CSS variables allow for globally consistent modification of state styles, avoiding the need to adjust styles for each individual node.

[0117] In one embodiment of the present invention, based on step S102, the following will provide a possible embodiment and its specific implementation will be described in a non-limiting manner. S102 specifically includes the following methods:

[0118] Step S1021: Define the property panel configuration interface PropertyPanelConfig. The interface is a TypeScript interface and contains a categories field of an array of PropertyCategory objects, which is used to organize the property category collection.

[0119] In some embodiments, the PropertyPanelConfig interface is defined using TypeScript types, configuring the categories field whose array elements follow the PropertyCategory structure to ensure consistent configuration data hierarchy. During Vue application initialization, the PropertyPanelConfig interface is referenced by the property panel component as a configuration object, and type checking ensures correct data structure, preventing runtime errors.

[0120] Step S1022: Define the property category interface PropertyCategory, which includes the title field, properties field, and setPropertyRelates field.

[0121] In some embodiments, the `PropertyCategory` interface has a `title` field for UI display, a `properties` field containing an array of property item objects, and `setPropertyRelates` as an optional function that receives property value parameters and executes logic. During property panel rendering, the `setPropertyRelates` function enables property interaction through event listeners or direct calls, leveraging Vue's reactive dependency tracking.

[0122] Step S1023: Configure the property panel rendering engine based on Vue components. By parsing the PropertyPanelConfig configuration, iterate through categories and properties, use Vue's v-for directive to generate the DOM structure of category titles and property item controls, and bind the data model.

[0123] In some embodiments, the property panel rendering engine is a Vue single-file component. It uses computed properties to parse PropertyPanelConfig, generates a virtual DOM tree, and controls the category layout through SCSS stylesheets. The rendering engine is based on Vue's rendering functions, mapping categories to UI category containers and properties to form items, and utilizes Vue's virtual DOMdiff algorithm for efficient updates.

[0124] Step S1024: Configure the standard property control component library, including an encrypted input box component that integrates the encryption algorithm interface through Vue component encapsulation and a parameter slider component that supports minimum / maximum value configuration through Vue component encapsulation, and register the components to the global Vue instance for the property panel rendering engine to call.

[0125] In some embodiments, the encrypted input box component in the standard control components integrates the AES encryption library interface and triggers the encryption function when input is made; the parameter slider component binds the value property through Vue, supports step, min, and max configurations, and updates the value through the input event. The control components receive configurations through Vue's props and pass value changes through the emit event, integrating into the communication flow between Vue parent and child components.

[0126] Step S1025: Based on Vue's reactive system, watch for changes in property values, trigger validation and update functions, and ensure that property changes are reflected in the node's visual state in real time.

[0127] In some embodiments, Vue's `watch` function is used to deeply monitor changes to property objects. The validation function includes type checking and business rule verification, and the update function calls the `setData` method of the node instance to refresh the display. After the watch is triggered, validation and updates are performed synchronously, leveraging Vue's asynchronous update queue to optimize performance and avoid frequent DOM manipulations.

[0128] In one embodiment of the present invention, based on step S103, the following is a possible embodiment and its specific implementation is described in a non-limiting manner. S103 specifically includes the following methods:

[0129] S1031: Define the structure of the common connection point component and set the connection point's identifier ID, input / output, and size parameters.

[0130] In some embodiments, a unique identifier ID is included in the connection point component to distinguish different connection points, the connection direction can define input / output functions, and the size parameters can control the visual size.

[0131] S1032: Define the rendering logic of the common connection point component, and configure the visual elements of the connection point at the position of the node according to the connection direction and size parameters.

[0132] In some embodiments, the coordinates of the connection points on the canvas are calculated by combining the node position, size, and connection direction, and then the visual elements of the connection points are generated using front-end rendering technology. This ensures that the connection points of different nodes conform to preset rules in terms of visual position and presentation, improving the visual consistency of the workflow canvas.

[0133] S1033: Design basic style parameters such as the start and end connection point identifiers, line width, and default color of the connecting lines.

[0134] In some embodiments, the connecting line component determines the objects to be connected at both ends of the line, the line width, and sets basic visual effects and other attributes. The start and end points of the connecting line are determined by identifiers, and basic style parameters provide default visual configurations for the line.

[0135] S1034: Calculate and draw the line connecting the two points based on the position information of the starting and ending connection points.

[0136] In some embodiments, after obtaining the coordinates of the start / end connection points, a drawing path for the connection line is generated through geometric calculations, and then the line is drawn based on the front-end drawing capabilities. The drawing path is determined based on the geometric relationship between the coordinates of the two points, and the path is visualized using the front-end drawing capabilities.

[0137] S1035: In the common connection point component and common connection line component, set an exposed style attribute interface to allow developers to pass in custom style objects to override the basic style parameters.

[0138] In some embodiments, the properties of connection point and connection line components are configured to receive an interface for external style objects. When a developer passes in a custom style, it overrides the component's internal basic style parameters. By utilizing the property passing mechanism of front-end components, external custom styles are injected into the component, affecting the visual rendering results of connection points and connection lines.

[0139] In one embodiment of the present invention, based on step S104, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S104 specifically includes the following:

[0140] S1041: Based on the standardized node interface, define the NodeMetadata metadata of large model / knowledge base nodes, set the type with business prefix, display name label, and configure ports as left-in target type and right-out source type ports.

[0141] In some embodiments, the node is set to type and display name label as "large model". The ports define an input port with id "input", position "left", and type "target", and an output port with id "output", position "right", and type "source". This embodiment ensures that the metadata of the large model node conforms to a unified standard and is compatible with the vue-flow framework and other nodes in terms of identification and connection logic.

[0142] S1042: Define an interface based on nodes to set rendering components for nodes. The rendering components include style logic for states such as hover border color change and selection highlight.

[0143] In some embodiments, by utilizing the event listening and reactive mechanisms of front-end components, the component style class or properties can be modified to change the visual appearance when events such as hover and click are triggered.

[0144] S1043: In the node attribute configuration, add an attribute item corresponding to the model-selector and associate it with the editor field of PropertyItem in the attribute panel.

[0145] In some embodiments, by configuring the association between attribute items and editor components, the attribute panel can automatically match and render the corresponding interactive components according to the editor type, thereby enabling the configuration of the large model selection function.

[0146] S1044: In the node property configuration, add a property item corresponding to the system-prompt-editor prompt word editor, and associate the property item with the editor field of PropertyItem in the property panel.

[0147] In some embodiments, within the large model node attribute configuration structure, an attribute item for prompt word editing functionality is configured, and the `editor` field of the attribute item is set to `system-prompt-editor`. This causes the built-in prompt word editor component to be invoked when the attribute panel renders the attribute. This customizes the prompt word editing interaction capabilities for large model nodes, meeting their unique business configuration requirements.

[0148] S1045: Defines the getPropertyPanelConfig method for the large model, which calls the property panel to configure the basic information, inputs, model, prompts, and outputs.

[0149] In some embodiments, the logic of the property panel configuration class is invoked to organize the exclusive attribute items of large model nodes according to attribute classification rules, generating configuration objects that conform to the PropertyPanelConfig interface specification for parsing during property panel rendering. This generates clearly structured property panel configurations for large model nodes, facilitating node parameter configuration for developers / users.

[0150] In one embodiment of the present invention, based on step S105, the following is a possible embodiment and its specific implementation will be described in a non-limiting manner. S105 specifically includes the following:

[0151] Step S1051: Define the NodeRegistry class, using the private modifier to declare the nodes property as a Map data structure, with the key being the node type string and the value being the node definition object, used to store registered nodes.

[0152] In some embodiments, the NodeRegistry class is defined using ES6 class syntax, and the nodes property is initialized to newMap() to ensure data privacy and efficient key-value lookup. The class constructor can accept an initial array of nodes as an argument and initialize them in batches using the registerMultiple method.

[0153] Step S1052: Receive the node definition object as a parameter, check whether the type field already exists through the has method of Map, output an exception if it exists, otherwise store the node definition in nodes through the set method of Map.

[0154] In some embodiments, when a developer calls the `register` method, type validation and uniqueness validation are performed simultaneously to ensure the integrity and consistency of node data. Error handling is achieved through try-catch blocks. This prevents node type conflicts and ensures that node identifiers are unique during process orchestration.

[0155] Step S1053: Receive the node definition array as a parameter, use the Array's forEach method to traverse the array, and call the register method to register a single node in each iteration.

[0156] In some embodiments, during batch registration, each node defines a process that sequentially passes through the verification and storage flow of the register method, using an event loop mechanism for asynchronous processing. However, the registration operation itself is synchronous, which improves node initialization efficiency and enhances code scalability.

[0157] Step S1054: Receive the sourceNodeType and targetNodeType string parameters, and determine the connection rules through a switch statement.

[0158] In some embodiments, isConnectionAllowed internally defines a rule mapping object, which checks whether targetNodeType is in the allowedTargets array by looking up the configuration of sourceNodeType in the rule, and returns the result.

[0159] It should be noted that when the vue-flow framework initiates a connection request, it dynamically determines the validity of the connection based on predefined rules, and these rules are configurable.

[0160] Step S1055: Configure the withRegister component registration interface, which receives the node Vue component and configuration object as parameters, returns a new Vue component, and calls the register method of the NodeRegistry instance in the created lifecycle hook of the new component to complete the automatic registration.

[0161] In some embodiments, the `withRegister` component registration interface uses Vue's `extend` method to create a component wrapper. In the `created` hook of the wrapped component, the original component configuration is retrieved via `this.$options`, the node definition is extracted, and the `register` method is called. This injects the node definition into the `NodeRegistry` without requiring manual calls to the registration method.

[0162] Step S1056: Receive the node definition object as a parameter, use the Object.assign method to merge the default values, and return it to the node.

[0163] In some embodiments, the `defineNode` method first validates the input object, then uses `Object.assign` to merge default values. The default value object includes fields such as `deletable` and `width`, and supports deep merging of nested attributes. This results in a standardized node definition being output after receiving a partial definition, which can then be directly used by the `register` method.

[0164] Furthermore, as a refinement of the specific implementation methods described above, such as... Figure 2 A more specific implementation method is provided, which includes:

[0165] Step 1: Define standardized node interfaces, including NodeMetadata metadata with required fields such as type (unique identifier), label (display name), and ports (connection port), as well as NodeDefinition structures (including rendering components, initialData initialization function, and getPropertyPanelConfig panel configuration method). Clarify field types and constraints to ensure that node formats are uniformly adapted to the vue-flow framework.

[0166] Step 2: Define the property panel interface, standardize the hierarchical structure of the top-level PropertyPanelConfig containing the categories attribute collection, refine the PropertyCategory category configuration containing the title category name, properties attribute items, and setPropertyRelates association logic, have unified interaction rules with real-time validation and synchronous node display of attribute changes, and have built-in standard components such as encrypted input boxes and parameter sliders.

[0167] Step 4: Standardize and unify connection points and connection lines, develop common connection point and connection line components, and expose the style attribute for developers to use, so that developers can customize the style.

[0168] Step 5: Encapsulate large model / knowledge base nodes. Configure large model nodes with exclusive properties such as model-selector and system-prompt-editor. Define rendering components that support hover border color change and selected highlight. Clarify the port layout of left-in and right-out ports to ensure that the node's functionality and visual design are consistent.

[0169] Step 6: Develop the NodeRegistry core class, providing single-node registration with type uniqueness verification, batch registration with registerMultiple, and connection rule judgment with isConnectionAllowed; encapsulate the withRegister component registration interface, supporting registration with a custom property editor; and provide the defineNode helper method, which is filled with fields such as deleteable:true and width:180px by default.

[0170] Step 7: Adapt to the vue-flow framework: Connect the registered node to the framework's nodeTypes configuration to adapt to the port rendering logic of different vue-flow versions, ensuring that the size, icon, and port input / output of the canvas-loaded node are displayed correctly.

[0171] Step 8: Load the Vue rendering component with markRaw to avoid responsive redundancy, render the node / property panel with icon, display name and status identifier through the renderNode method, bind basic events, and manage the state style uniformly with CSS variables.

[0172] As can be seen, the front-end development and registration standard for intelligent nodes in the vue-flow framework includes the front-end structure definition and vue-flow framework adaptation protocol for large model nodes, knowledge base nodes, and intelligent agent nodes. Combined with the front-end standard for intelligent node-specific attribute panels, it sets up panel layout templates, front-end interactive component libraries, and interaction logic specifications; a lightweight front-end core file architecture includes node standard modules, registration engine modules, and attribute panel engine modules, supporting rapid front-end development, rendering, and reuse of intelligent nodes.

[0173] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0174] The following are embodiments of the intelligent workflow orchestration system based on vue-flow provided in this disclosure. This system and the intelligent workflow orchestration method based on vue-flow in the above embodiments belong to the same inventive concept. For details not described in detail in the embodiments of the intelligent workflow orchestration system based on vue-flow, please refer to the embodiments of the intelligent workflow orchestration method based on vue-flow described above.

[0175] The system includes:

[0176] The node standard definition module is used to define standardized node interfaces, node metadata, and node structure to unify node format.

[0177] The Property Panel Specification module is used to define the property panel interface and standardize the property panel hierarchy and category configuration to unify interaction rules.

[0178] The common module for connection components is used to develop common connection point and connection line components, and to standardize the styles of connection points and connection lines to provide customization functionality.

[0179] The large model node encapsulation module encapsulates large model nodes or knowledge base nodes based on the standardized node interface and attribute panel interface, and configures exclusive attributes and port layout.

[0180] The node registration management module is used to develop node registration classes and provides methods for determining node registration and connection rules to manage node uniqueness and connection logic.

[0181] The component registration helper module provides component registration interfaces and helper methods. The component registration interface supports registration with a custom property editor, and the helper methods are filled with the deleteable and width fields by default.

[0182] The Vue-Flow adaptation module is used to adapt nodes registered by the node registration class to the vue-flow framework, ensuring that nodes and ports are displayed correctly.

[0183] The rendering state unification module is used to implement the rendering logic of nodes and property panels, and to unify the state style by binding rendering methods and events.

[0184] like Figure 3 As shown, this application also provides an electronic device, including a display module 103, a memory 102, a processor 101, a communication module 104, and a computer program stored in the memory and executable on the processor 101. When the processor 101 executes the program, it implements the steps of an intelligent process orchestration method based on vue-flow.

[0185] In embodiments of the present invention, electronic devices include, but are not limited to, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. Electronic devices may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments described and / or claimed herein.

[0186] In this embodiment, processor 101 may be implemented using at least one of an application-specific integrated circuit, a programmable logic device, a field-programmable gate array, a processor, a controller, a microcontroller, a microprocessor, or an electronic unit designed to perform the functions described herein. In some cases, such an implementation may be implemented within a controller. For software implementation, implementations such as processes or functions may be implemented with separate software modules that allow the performance of at least one function or operation. Software code may be implemented by a software application (or program) written in any suitable programming language, and the software code may be stored in memory and executed by the controller.

[0187] The display module 103 is used to display information input by the user or information provided to the user. The display module 103 may include a display panel, which may be configured in the form of a liquid crystal display, an organic light-emitting diode, or the like.

[0188] The memory 102 can be used to store software programs and various data. The memory 102 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0189] The communication module 104 transmits radio signals to and / or receives radio signals from at least one of a base station, an external terminal, and a server. Such radio signals may include voice call signals, video call signals, or various types of data sent and / or received according to text and / or multimedia messages.

[0190] The present invention also provides a storage medium storing a computer program thereon, wherein the computer program, when executed by a processor, implements the steps of the intelligent process orchestration method based on vue-flow.

[0191] The storage medium may be any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example,, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of readable storage media include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0192] The storage medium stores a program product capable of implementing the methods described above in this specification. In some possible implementations, various aspects of this disclosure can also be implemented as a program product comprising program code that, when run on a terminal device, causes the terminal device to perform the steps described in the exemplary methods section of this specification according to various exemplary embodiments of this disclosure.

[0193] The above description of the disclosed embodiments enables those skilled in the art to make or use the invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the invention. Therefore, the invention is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. An intelligent workflow orchestration method based on vue-flow, characterized in that, The methods include: S101: Establish standardized node interfaces and define node metadata and node structure to unify node format; S102: Define the property panel interface and standardize the property panel hierarchy and category configuration to unify interaction rules; S103: Develop common connection points and connector components, and standardize connection point and connector styles to provide customization capabilities; S104: Encapsulate large model nodes or knowledge base nodes based on standardized node interfaces and attribute panel interfaces, and configure exclusive attributes and port layouts. S105: Develop a node registration class, providing methods for node registration and connection rule judgment to manage node uniqueness and connection logic; S106: Provides a component registration interface and helper methods. The component registration interface supports registration with a custom property editor, and the helper methods are filled with the deleteable and width fields by default. S107: Adapt the node registration class to the vue-flow framework to ensure that nodes and ports are displayed correctly; S108: Implements the rendering logic for nodes and property panels, and unifies the state style through rendering methods and event binding.

2. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S101 specifically includes the following methods: Define standardized interfaces for nodes, including NodeMetadata metadata containing unique identifiers (type), display name (label), and connection ports, as well as a complete NodeDefinition structure containing rendering components, initialization function (initialData), and property panel configuration method (getPropertyPanelConfig). Clarify the types and constraints of each field to ensure that the node format is compatible with the vue-flow framework.

3. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S102 specifically includes the following methods: Define the PropertyPanelConfig interface, which is a TypeScript interface and contains a categories field of an array of PropertyCategory objects to organize the collection of property categories; Define the property category interface PropertyCategory, which includes the title field, the properties field, and the setPropertyRelates field; Configure a property panel rendering engine based on Vue components. By parsing the PropertyPanelConfig configuration, iterates through categories and properties, uses Vue's v-for directive to generate the DOM structure of category titles and property item controls, and binds the data model. Configure a standard property control component library, including an encrypted input box component that integrates an encryption algorithm interface through Vue component encapsulation and a parameter slider component that supports minimum / maximum value configuration through Vue component encapsulation, and register the components to the global Vue instance for the property panel rendering engine to call; Based on Vue's reactive system, we use watch to listen for changes in property values, triggering validation and update functions to ensure that property changes are reflected in the visual state of nodes in real time.

4. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S103 specifically includes the following methods: Define the structure of the common connection point component, and set the connection point's identifier ID, input / output, and size parameters; Define the rendering logic of the common connection point component, and configure the visual elements of the connection point at the position of the node according to the connection direction and size parameters; Design the basic style parameters of the connector, such as the start and end point identifiers, line width, and default color. Calculate and draw the line connecting the two points based on the position information of the starting and ending connection points; In the public connection point component and public connection line component, set up an exposed style attribute interface to allow developers to pass in custom style objects to override the basic style parameters.

5. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S104 specifically includes the following methods: Based on the standardized node interface, define the NodeMetadata metadata of large model / knowledge base nodes, set the type with business prefix, display name label, and configure ports as left-in target type and right-out source type ports; Based on the node definition interface, a rendering component is set for the node. The rendering component includes style logic for states such as hover border color change and selection highlight. In the node property configuration, add the property item corresponding to the model-selector and associate it with the editor field of PropertyItem in the property panel; In the node property configuration, add a property item corresponding to the system-prompt-editor prompt word editor, and associate the property item with the editor field of PropertyItem in the property panel; Define the getPropertyPanelConfig method for the large model, and call the property panel to configure the basic information, input, model, prompts, and output properties.

6. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S105 specifically includes the following methods: Define a NodeRegistry class, using the private modifier to declare the nodes property as a Map data structure, with the key being the string "node type" and the value being the node definition object, used to store registered nodes; It receives a node definition object as a parameter, checks whether the type field already exists using the has method of Map, outputs an exception if it exists, otherwise stores the node definition in nodes using the set method of Map. The array of node definitions is received as a parameter. The array is traversed using the forEach method of Array, and the register method is called in each iteration to register a single node. It receives sourceNodeType and targetNodeType string parameters and uses a switch statement to determine the connection rules. Configure the withRegister component registration interface, which takes a Vue node and a configuration object as parameters and returns a new Vue component. In the created lifecycle hook of the new component, call the register method of the NodeRegistry instance to complete the automatic registration. It receives a node definition object as a parameter, uses the Object.assign method to merge the default values, and returns it to the node.

7. The intelligent process orchestration method based on vue-flow according to claim 1, characterized in that, S106 specifically includes the following methods: Get the current vue-flow version number by using the version property exposed by the vue-flow framework or by reading the vue-flow version field in the project's package.json, extract the major version number and store it; Iterate through the node definitions stored in the nodes member of NodeRegistry, extract the type as the key for each node type, associate the node's rendering component and port configuration information, and construct an object that conforms to the nodeTypes configuration requirements of the vue-flow framework; The public connector component developed in step S103 is used to define the mapping relationship between the connector type identifier and the component according to the configuration format of edgeTypes in the vue-flow framework, and an edgeTypes configuration object is generated. If vue-flow version 2.x is detected, explicitly add a position field to each port in the metadata.ports of the node definition, and synchronize the port configuration to the parameters required for vue-flow node rendering; Extract the default style fields width and height from the node definition registered in NodeRegistry, and pass the style parameters to the node rendering function through the node rendering context injection method provided by the vue-flow framework; For each identified vue-flow version, write test cases to simulate the canvas loading process and verify the size of nodes, icon styles, and the display status of input / output ports.

8. An intelligent workflow orchestration system based on vue-flow, characterized in that, The system is used to implement the intelligent process orchestration method based on vue-flow as described in any one of claims 1 to 7; The system includes: The node standard definition module is used to define standardized node interfaces, node metadata, and node structure to unify node format. The Property Panel Specification module is used to define the property panel interface and standardize the property panel hierarchy and category configuration to unify interaction rules. The common module for connection components is used to develop common connection point and connection line components, and to standardize the styles of connection points and connection lines to provide customization functionality. The large model node encapsulation module encapsulates large model nodes or knowledge base nodes based on the standardized node interface and attribute panel interface, and configures exclusive attributes and port layout. The node registration management module is used to develop node registration classes and provides methods for determining node registration and connection rules to manage node uniqueness and connection logic. The component registration helper module provides component registration interfaces and helper methods. The component registration interface supports registration with a custom property editor, and the helper methods are filled with the deleteable and width fields by default. The Vue-Flow adaptation module is used to adapt nodes registered by the node registration class to the vue-flow framework, ensuring that nodes and ports are displayed correctly. The rendering state unification module is used to implement the rendering logic of nodes and property panels, and to unify the state style by binding rendering methods and events.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the steps of the intelligent process orchestration method based on vue-flow as described in any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the intelligent process orchestration method based on vue-flow as described in any one of claims 1 to 7.

Images