Page editing method, device and equipment and readable storage medium

Abstract

The invention discloses a page editing method, device and equipment and a readable storage medium, and the method comprises the steps: determining a component structure body composed of at least one component object on an editing interface, and obtaining first description information of the component object, the first description information comprising type information of the component object and configuration parameters associated with the type information; the component structure body is analyzed based on the first description information, compilable information corresponding to the component structure body is generated, and the compilable information comprises unique identification information generated for the component structure body; and executing the compilable information in the target virtual operation environment, so that nodes used for describing the component structure body in the generated structured document of the target page carry unique identification information. According to the method and the device, the component is analyzed into the universal compilable object based on the description information of the component, so that the component is compatible with the front end, and meanwhile, the unique identification information of the component is added to indicate subsequent interaction behaviors on the page.

Description

Technical Field

[0001] This application relates to the field of page design technology, specifically to a page editing method, apparatus, device, and readable storage medium. Background Technology

[0002] In low-code scenarios, users can build pages by dragging and dropping front-end components using a page designer.

[0003] However, most current web front-ends are developed based on component libraries on different frameworks. Different business units have their own component libraries, and these component libraries are also implemented based on different front-end frameworks. As a result, when the front-end integrates incompatible components, it often cannot be recognized. Developing different designers for different component libraries leads to high maintenance and integration costs. Summary of the Invention

[0004] This application provides a page editing method, apparatus, device, and readable storage medium that enables compatibility between component libraries and front-ends, thereby at least partially solving the aforementioned technical problems.

[0005] Firstly, a page editing method is provided, including: A component structure consisting of at least one component object is determined on the editing interface, and first description information of each component object is obtained, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; Based on the first description information, the component structure is parsed to generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The compilable information is executed in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0006] In one embodiment of this application, parsing the component structure based on the first description information to generate compilable information corresponding to the component structure includes: The second description information of the component structure is determined, and the tree structure data of the component structure is generated according to the first description information and the second description information, wherein the second description information includes attribute information for indicating the display style of the component object on the page; Based on the parsing rules corresponding to the first description information, the tree structure data is parsed to obtain the general description information corresponding to the component structure, and a unique identifier information is generated for the component structure. The general description information is transformed into compilable information under the target framework, so that the compilable information contains the unique identification information of the component structure.

[0007] In one embodiment of this application, when the component structure includes multiple component objects, the second description information further includes nesting information for indicating the nesting relationship between component objects in the component structure; The compileable information includes nesting identifier information used to indicate the nesting relationship.

[0008] In one embodiment of this application, the method further includes: In response to the detection of a touch operation on the target page, the target component structure picked up by the touch operation is determined based on the unique identification information, so as to generate a corresponding trigger event.

[0009] In one embodiment of this application, in response to detecting a touch operation applied to the target page, determining the target component structure picked up by the touch operation based on the unique identifier information includes: In response to detecting a touch operation applied to the target page, the target location indicated by the touch operation is determined, and a set of elements covering the target location is obtained; Based on the relationship between the nodes of each element in the element set and the viewport, the nodes of each element in the element set are traversed sequentially from the top to the bottom until a first target element containing unique identification information is obtained, and the first target element is used as the target component structure picked up by the touch operation.

[0010] In one embodiment of this application, the step of traversing the nodes of each element in the element set sequentially from top to bottom until the first target element containing unique identifier information is obtained includes: Iterate through the nodes of each element in the set of elements from top to bottom, and determine whether the target node being iterated over contains the node from the previous iteration. If the target node does not contain the nodes from the previous iteration, it is determined that the touch operation does not have a target component structure to be picked up. If the target node contains nodes from the previous traversal, continue traversing the nodes of the remaining elements in the element set until the first target element containing unique identifier information is obtained.

[0011] In one embodiment of this application, the method further includes: Traverse the nodes of each element in the element set sequentially from top to bottom until a second target element containing nested identifier information is obtained; and Within the parent element set of the second target element, a third target element containing unique identification information is determined, and the third target element is used as the target component structure picked up by the touch operation.

[0012] In one embodiment of this application, the method further includes: Based on the triggering event, the target component structure on the editing interface is modified to regenerate compileable information corresponding to the modified target component structure.

[0013] Secondly, this application also provides a page editing device, comprising: The acquisition module is used to determine a component structure consisting of at least one component object on the editing interface, and to acquire first description information of each component object, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; The parsing module is used to parse the component structure based on the first description information and generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The generation module is used to execute the compilable information in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0014] Thirdly, this application also provides a computer device, the computer device comprising: One or more processors; Memory; and One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the processor to implement the page editing method described in any one of the above.

[0015] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, the computer program being loaded by a processor to execute the page editing method described in any of the preceding claims.

[0016] The page editing method provided in this application determines a component structure composed of at least one component object on the editing interface, obtains the description information of each component object, and then parses the component structure based on the description information of the component objects, translating the component structure into general compilable information. A unique identifier is generated for the component structure within the compilable information. Therefore, when the compilable information is run in the target virtual runtime environment, the nodes in the structured document of the generated target page that describe the component structure carry unique identifier information, facilitating subsequent interaction determination of the component objects. This method eliminates the need to develop different designers for different component libraries. By parsing components into general compilable objects based on component description information and corresponding parsing rules, compatibility between components and the front end is achieved. Furthermore, by adding the unique identifier information of the component, the nodes describing the component structure in the structured document of the generated target page carry unique identifier information during virtual environment runtime, thereby indicating subsequent interactive behaviors on the page. Attached Figure Description

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

[0018] Figure 1 This application provides a schematic flowchart illustrating the steps of a page editing method according to an embodiment of the present application. Figure 2 This application provides a schematic flowchart illustrating the steps for parsing a data structure. Figure 3 A flowchart illustrating the steps for determining an interactive component structure, provided in an embodiment of this application; Figure 4 A schematic diagram of a layered design structure for a designer provided in an embodiment of this application; Figure 5 A schematic diagram of the system structure of a designer provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of a page editing device provided in an embodiment of this application; Figure 7 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

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

[0020] In this application, the term "exemplary" is used to mean "used as an example, illustration, or description." Any embodiment described as "exemplary" in this application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is provided to enable any person skilled in the art to make and use this application. Details are set forth in the following description for purposes of explanation. It should be understood that those skilled in the art will recognize that this application can be made without using these specific details. In other instances, well-known structures and processes are not described in detail to avoid obscuring the description of this application with unnecessary detail. Therefore, this application is not intended to be limited to the embodiments shown, but is consistent with the broadest scope of the principles and features disclosed in this application.

[0021] To clearly understand the technical solutions of the page editing method, apparatus, device, and readable storage medium provided in the embodiments of this application, the relevant application background of the page editing method provided in this application is first explained below. Specifically, the page editing method provided in this application is mainly used to enable users to build pages by dragging and dropping front-end components using a page designer in a low-code scenario, especially providing a page editing method applied in a browser online development environment. Among them, the page designers in related technologies are often based on proprietary building protocols, such as lowcode-engine, OpenTiny, amis, etc. These designers render components onto the page at runtime, and their upper limit often depends on the supported components and frameworks. However, current front-ends are mostly developed based on component libraries on different frameworks. Different business units often have their own different component libraries, and the component libraries are also implemented based on different front-end frameworks, which often leads to incompatibility issues between the front-end and components. For example, the front-end cannot recognize cross-framework components. If a designer corresponding to each component library is developed to access different front-end frameworks, it will result in high maintenance costs and high access costs.

[0022] To address the aforementioned technical problems, this application provides another page editing method. This method aims to interpret different component libraries into universal compileable information through a specific set of access rules, thereby allowing them to adapt to different front-end frameworks and at least partially resolving the compatibility issues between components and frameworks. Specifically, for ease of understanding, the page editing method provided by this application will be described below with reference to specific embodiments.

[0023] For details, please refer to Figure 1 , Figure 1 This application provides a flowchart illustrating the steps of a page editing method, specifically including steps S110-S130: S110, determine the component structure on the editing interface that consists of at least one component object, and obtain the first description information of each component object.

[0024] In this embodiment, the editing interface can be a visual editing page of a page designer that supports a low-code development environment. Specifically, users can drag and drop components to edit the desired page effect on the editing page, which is then executed by the designer's translator and runner. Specifically, the component structure provided in this application can be a structure formed by combining at least one component object. In particular, when the component structure consists of multiple component objects, it usually involves splicing or nesting relationships between multiple component objects. For example, dragging a first component object into the second component object can be considered as obtaining a component structure where the first and second component objects have a nested relationship. It should be noted that the component structure generated on the editing interface often uses a specific descriptive language to represent the relationships between the component objects in the component structure, as well as attribute information used to indicate the display effect of the rendered components on the page. Specific implementation schemes will be described later in conjunction with specific embodiments.

[0025] Furthermore, in the embodiments of this application, the component objects on the editing interface can be not only components from a component library under a specific framework, but also components from a cross-platform component library, as well as special components defined by the user. In order for the above-mentioned components to be successfully recognized by the designer, some embodiments of this application also configure first description information in a specific language for these components. In particular, this first description information is usually used to indicate the type information of the component object, and configuration parameters associated with its type information are configured for the component object.

[0026] In one embodiment of this application, the first description information of the component object can typically exist in a specific data format, such as a JSON data format used to describe the component object. Specifically, for ease of understanding, in this embodiment, the type information of a component object can be defined by the following parameter "idetype" in the first description information. For example, in one embodiment of this application, the type information of the component object may include: atomic components that cannot insert child nodes (defined as parameter "idetype" = element), container components that can insert child nodes (defined as parameter "idetype" = container), pop-up components (defined as parameter "idetype" = modal), drawer components (defined as parameter "idetype" = drawer), message pop-up components (defined as parameter "idetype" = messenger), as well as pop-up box components, routing components, and other free layout components, etc.

[0027] Building upon this, for each component object, the first description information further includes configuration parameters associated with its type information. Specifically, these configuration parameters typically include some general configuration parameters and type-specific configuration parameters. For example, general configuration parameters may include the "forceRefresh" parameter, which indicates whether to force refresh itself or its parent component after the component's position changes; the "forceUpdateWhenAttributeChange" parameter, which indicates whether to force refresh itself after the component's property changes; and the "ignoreProperty" parameter, which indicates which property names do not need to be translated. For instance, in the first description information, "forceRefresh: self" means that this component object forces a refresh of itself after its position changes (refreshing refers to the process of recompiling and running, which will be explained in detail in the following description with reference to examples).

[0028] Specific configuration parameters are typically related to type information. For example, in one possible implementation of this application, for the atomic component type, it typically includes the following configuration parameters: "editable" indicating whether the property name can be edited; "textholder" indicating whether the property name of the text is displayed; "translateBindingProperty" indicating whether the property name of the bound variable can be displayed; "iconEditor" indicating whether double-clicking to open the icon panel and set the icon is supported; "parentAccept" indicating the parent component's conditional expression selector that can be placed; and the specific type of the parent component's conditional expression selector, such as selector: { slot: string, cssSelector: string}. Of course, depending on the needs, the atomic component can also include the following configuration parameters: events: Used to indicate events supported within the designer, typically in the form of key-value pairs { key: value}; key: The event name used to indicate the supported events, such as click (an event triggered when the mouse is pressed and released, i.e., a single click) or mousedown (an event triggered when a mouse button is pressed, without involving the release of the mouse). value: Used to indicate the conditions under which the supported events are valid, and can be defined by true, false or an expression; additionalAttribute: Used to indicate additional attributes passed to the component object during display, usually in the form of key-value pairs { key: value}; `useFxOrEg: { property: string, displayAsAttr?: boolean}` indicates whether the component object supports expression and instance toggling. Here, `property` indicates the supported property name, while `displayAsAttr` indicates whether the component supports inserting specific child elements inside.

[0029] It's important to note that the configuration parameters mentioned above can be understood as optional configuration parameters for atomic components. That is, if the corresponding parameter is not present in the component's first description file, the atomic component is configured with default parameters. For example, if the configuration parameter "editable" is absent from the first description of an atomic component, it indicates that it is an atomic component with an uneditable property name. Specifically, users can define and edit a component object through specific interfaces in the designer, such as the component configuration page in the component library. The designer can then automatically generate the component's first description information based on the configuration results on the component configuration page.

[0030] Of course, the above explanation only uses atomic components as an example. In fact, other component types usually also include corresponding configuration parameters in their description files. For example, container components typically include the following configuration parameters: containerDirection: An expression used to indicate the orientation of the container's internal components; translateBindingProperty: The name of the property that indicates which dynamic text should be displayed; `parentAccept`: An expression used to indicate the parent component that can be included. childAccept: Used to indicate the conditional expression for which a child component can be placed; `selector`: Indicates a workaround when `data-nodepath` cannot be passed to the top-level DOM node. Specifically, this is done by placing a specific component `X` inside the component that can search upwards to the DOM node based on the CSS selector. expression: used to indicate the location information for finding a specific component X from the current node; cssSelector: Used to specify the CSS selector used for a particular component X; structured: true / false |{ slot: string, empty?: boolean}: This indicates how the child components of the current component are inserted. True means inserting via the "+" button in the designer menu, false means inserting via drag and drop, and empty indicates whether to insert a slot for this node. Events: Events supported within the designer, also existing in the form of key-value pairs {key: value}. Similar to atomic components; additionalAttribute: An additional attribute passed in when the component is displayed in the designer. It also exists in the form of key-value pairs {key: value}, just like atomic components. `displaySlotConditions`: Indicates whether to conditionally display slot nodes in the left-hand tree structure. It is in the form of `{ key: value}`. `key` indicates the slot name, and `value` is the slot display condition, supporting `true`, `false`, and expressions. Slots not configured default to `true`, meaning they are displayed. expandWhenHesitate: This is a boolean value indicating whether hover expansion is supported. iconEditor: Indicates whether double-clicking to open the icon panel and set the icon is supported; it is a boolean value. operator: { copy?:expression, cut?: expression, duplicate?:expression, d2c?: expression}: This indicates the configuration of supported operations for this component object (such as copy, cut, etc.). If not configured, all operations are supported by default. If configured, expression indicates the conditions under which it takes effect. useFxOrEg: { property: string, displayAsAttr?: boolean} : Same as atomic components, used to indicate whether the component object supports expression and instance switching.

[0031] For modal (pop-up component), drawer (drawer component), and messager (message pop-up component), the configuration parameters typically include parentAccept, childAccept, selector, expression, cssSelector, and additionalAttribute. For specific parameter definitions, please refer to the aforementioned related instructions. In addition, the above component types usually also include the configuration parameter cacheOpenKey for controlling the display and hiding of fields in the pop-up.

[0032] For popover components, their configuration parameters typically include parentAccept, childAccept, selector, expression, cssSelector, and additionalAttribute. Additionally, they may include: Placement: A parameter used to indicate the position where component X is inserted. For example, placement: 'head' indicates that component X is inserted at the beginning, and placement: 'tail' indicates that component X is inserted at the end. The default is to insert it at the beginning. `structured: true / false`: This indicates how child components of the current component are inserted. When `true`, child elements can only be added via the set snippet; when `false`, child elements can be inserted via drag and drop.

[0033] It is understandable that the aforementioned first descriptive information can be interpreted as a series of parameters used to define the behavior of a component object within the designer. Based on these selected parameters, users can create a descriptive information to define a specific component object. For example, to facilitate understanding of the above, the following is a descriptive information for a component object: { "name": "Flex", "ideusage": { "idetype": "container", "containerDirection": "this.getAttribute('direction')?.value === 'true' ? 'column' : 'row' " } } The above content defines a component object "Flex", which is a container component. The containerDirection is determined by the direction property value set in the current designer and is used to indicate the arrangement direction of the components inside the container. It is used to control the direction of the indicator line when placing the component. For example, in one embodiment, row indicates that the indicator line is vertical when placing the component, and column indicates that the indicator line is horizontal when placing the component. Other information can usually be the same as the default container component.

[0034] Alternatively, the following is the first description of another component object, "Modal". { "name": "Modal", "ideusage": { "idetype": "modal", "selector": { "expression": "this", "cssSelector": "div[class='ant-modal-content']" }, "additionalAttribute": { "transitionName": "''", "maskStyle": "{{opacity: 1,animationDuration: '0s'}}" } } } The content defines a component object "Modal" (here, "Modal" is the name of a specific component object, not referring to a "popup"), which is a type of "modal" component, i.e., a popup component. Due to component implementation limitations, it can only be achieved by placing a component inside that can search upwards for DOM nodes based on the CSS selector: "div[class='ant-modal-content']". To eliminate the flickering during popup editing, an additional configuration of the additionalAttribute in the designer is required.

[0035] By defining configuration parameters for the execution behavior of each component connected to the designer, compatibility with different frameworks and component libraries can be achieved. By utilizing the first description information, any defined component can be interpreted as a general compilable object that can be processed by a specific framework for subsequent processing.

[0036] S120, based on the first description information, the component structure is parsed to generate compilable information corresponding to the component structure.

[0037] In one embodiment of this application, as can be seen from the foregoing solutions, since the first description information defines the execution behavior of a component object within the designer using a specific data structure, parsing the component structure based on this first description information can translate it into corresponding compilable information. Specifically, the compilable information here should be understood as a general, i.e., device platform-independent data structure, thereby allowing it to adapt to different front-end frameworks. Specifically, parsing the component structure based on the first description information typically requires utilizing parsing rules for the data structure describing the first description information. For example, if the first description information is in JSON data format, its corresponding parsing rules can be represented using a JSON schema, that is, interpreting the meaning of each field in the first description information using a JSON schema.

[0038] Of course, it should be noted that in order for the generated generic compilable information to render a target page that matches the editing interface in the final runtime environment, some embodiments of this application, in addition to utilizing the first descriptive information, also require utilizing the descriptive information of the component structure displayed in the editing interface, thereby indicating the rendering behavior of a certain component object within the designer. For details, please refer to... Figure 2 , Figure 2 This application provides a flowchart illustrating the steps for parsing a data structure, specifically including steps S210-S230: S210, determine the second description information of the component structure, and generate tree structure data of the component structure based on the first description information and the second description information.

[0039] In one embodiment of this application, as described above, since the component structure is edited on a visual editing page of a page designer that supports a low-code development environment, the component structure on the editing interface is processed by the page designer into a second descriptive information that indicates the display style of the component object on the page. For example, as a possible implementation, the second descriptive information typically includes the size information or color information of each component element in the component structure. That is, in this embodiment, the first descriptive information is used to indicate the execution behavior of a component object in the designer, which is the same for the same type of component object (such as the aforementioned "Flex" or "Modal"), while the second descriptive information is mainly used to indicate the specific display style of a component object, which may differ based on actual business scenario requirements. For example, for the same component object, it may be configured to exist in different sizes in different business scenarios. Of course, it should be noted that in order to determine the first descriptive information of each component object in the component structure, the second descriptive information may also include the name of the component object, i.e., the aforementioned "name", such as "Flex" or "Modal", thereby associating the first descriptive information and the second descriptive information of the component object.

[0040] Furthermore, it's important to note that when the component structure includes multiple component objects, the second description information also includes nesting information indicating the nesting relationships between component objects within the component structure. Specifically, in a low-code development environment's page designer, this will be displayed as "slots." For example, you can drag and drop component A into another component B (usually a container component that can insert other child nodes) that displays a "slot." In this case, the second description information will include the nesting relationship between component A and component B, specifically, component A is a child node of component B. Additionally, when a slot has no child nodes, it will be displayed as an empty placeholder. When there are child components, these child components can be displayed, and other child components can be inserted by placing guide lines before and after them.

[0041] Building upon the aforementioned foundation, after obtaining the second descriptive information describing the names, attributes, and nesting relationships of each component element within the component structure, and acquiring the first descriptive information instructing the behavior of each component element within the designer based on its name, this information can be processed into a generic tree structure data in the IDE Model. Specifically, this tree structure data can be used to indicate the structural relationships (nesting relationships) and size information between component elements within the component structure, while also containing the first descriptive information for each component element. For example, a container node named "TableColumn" contains a container node named "Table". Combining the first descriptive file of the "Table" container node, it can be determined that only TableColumns are allowed inside, and child nodes can only be added via snippets. It possesses data source characteristics, displays three dummy records by default, and disables dummy data other than the first record based on the selector 'table>tbody>tr'. When the dataSource property is not currently set or the current number of child nodes is 0, a placeholder is displayed.

[0042] S220, based on the parsing rules corresponding to the first description information, the tree structure data is parsed to obtain the general description information corresponding to the component structure, and a unique identifier information is generated for the component structure.

[0043] In one embodiment of this application, after the first description information of each component object within the component structure and the second description information of the component structure are transformed into general tree structure data through the aforementioned IDE Model, they can be further processed into general compilable information by the translator built into the designer. Specifically, to better understand the structure of the translator provided in this embodiment, the translator consists of a two-layer structure. Translator 1 is used to parse the tree structure data based on the parsing rules corresponding to the first description information to obtain the general description information corresponding to the component structure and generate unique identification information for the component structure.

[0044] Specifically, the parsing rules corresponding to the first description information can be found in the foregoing description. These rules can exist in the form of a JSON schema, used to describe the meaning of each field in the JSON data format of the first description information. Since these parsing rules specifically describe the type of each component and its configuration parameters, combined with the attribute information of each component element, such as size or element type, a device platform-independent, i.e., general description information, can be obtained. This general description information explains in detail the tags, attributes, nesting relationships, and styles of the component structure. Furthermore, to facilitate subsequent identification of the target picked up by user interaction behavior, in the embodiments of this application, unique identifier information is also generated for the component structure. It should be noted that this unique identifier information is not the same as the identifier information of the component object in the component structure, i.e., the name "Name". It can usually exist in the form of an ID string.

[0045] S230, the general description information is converted into compilable information under the target framework, so that the compilable information contains the unique identification information of the component structure.

[0046] Building upon the aforementioned foundation, after obtaining the general description information corresponding to the component structure and generating unique identifier information for the component structure, the translation layer 2 can further transform the general description information into compilable information under the target framework. Specifically, the translation layer 2 may include a general framework translator (such as Vue, React, etc.) to transform it into compilable information under the corresponding target framework. For example, in one embodiment, the general framework translator Vue can transform the general description information into a single-page template (Vue Template), while the general framework translator React can transform the general description information into JSX, thus enabling the corresponding target page to be rendered when running this information in the corresponding front-end environment. Furthermore, the editable information also includes the unique identifier information of the component structure.

[0047] Furthermore, it should be noted that, unlike translators of artifacts in related technologies, i.e., translators that create pages through designers, in the embodiments of this application, the translator translates certain attributes by binding attribute paths (data-nodepath). That is, the translator needs to allow component objects to pass in the data-nodepath attribute and configure it on the node attribute of the component object (usually the top-level node), or place the data-nodepath attribute on a specific node using the aforementioned selector rules. For example, in the embodiments of this application, the unique identification information of the component structure is obtained through binding attribute paths (data-nodepath); that is, the node's bound attribute path (data-nodepath) carries the unique identification information ID of the component structure.

[0048] S130, the compilable information is executed in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0049] In the embodiments of this application, after obtaining a general translation object containing unique identifier information of the component structure through the aforementioned scheme, that is, the compilation information, the object is compiled and run in a specific target virtual runtime environment to render and generate the final page. In the final generated target page, the unique identifier information will be carried in the node used to describe the component structure in its structured document.

[0050] The target virtual runtime environment can be various runtime environments. For example, as a possible implementation, the target virtual runtime environment can be a browser online development environment, i.e., a sandbox. After receiving the compilable information (i.e., the single-page template) under the target framework, the sandbox, combined with a specific front-end sandbox project template (Vue, React, etc.), can render the single page into the sandbox environment. At this time, the nodes in the target page's structured document used to describe the component structure are DOM (Document Object Model) nodes. Of course, based on actual needs, the target virtual runtime environment can also be other runtime environments, and this application embodiment does not limit this. For ease of description, the following explanation will use a browser online development environment, i.e., a sandbox, as an example, where the nodes in the target page's structured document used to describe the component structure are DOM nodes.

[0051] In one embodiment of this application, the sandbox typically includes a control module (proxy) for communicating with the designer runtime outside the sandbox. This control module (proxy) intercepts page events within the sandbox to determine the picked target component structure based on unique identifier information, which is crucial for implementing component selection and drag-and-drop operations. Therefore, in one embodiment of this application, the method further includes: In response to the detection of a touch operation on the target page, the target component structure picked up by the touch operation is determined based on the unique identification information, so as to generate a corresponding trigger event.

[0052] In one embodiment of this application, when a touch operation is detected on the target page, the unique identification information of the target node of the touch operation can be identified based on the touch operation, thereby identifying the target component structure picked up by the touch operation through the unique identification information, and thus generating a corresponding trigger event.

[0053] Of course, it should be noted that the unique identifier of a component structure is usually configured to be bound to a node in the component structure using the data-nodepath method, for example, it can usually be the top-level node of the component structure. Since the relationship between component objects and DOM nodes is often one-to-many, sometimes touch events are not triggered from DOM nodes with the data-nodepath attribute. Therefore, in one embodiment of this application, please refer to... Figure 3 , Figure 3 This application provides a flowchart illustrating the steps for determining an interactive component structure, specifically including steps S310-S320: S310, in response to detecting a touch operation applied to the target page, determine the target location indicated by the touch operation, and obtain a set of elements covering the target location.

[0054] In one embodiment of this application, a touch operation on the target page, i.e. a touch event, can be captured by the control module proxy, and then the target position indicated by the touch operation can be determined. Then, the set of elements covering the target position can be obtained through the browser's document.elementsFromPoint, i.e. the aforementioned set of atomic components (elements) used to indicate that no more child nodes can be placed.

[0055] S320, based on the relationship information between the nodes of each element in the element set and the viewport, traverse the nodes of each element in the element set from top to bottom until a first target element containing unique identification information is obtained, and use the first target element as the target component structure picked up by the touch operation.

[0056] In the embodiments of this application, after obtaining the set of elements covering the target position, the elements are arranged in order from the top layer to the bottom layer of the viewport. Specifically, the set of elements arranged in order from the top layer to the bottom layer of the viewport can be obtained directly by calling document.elementsFromPoint. Of course, it is also feasible to obtain the set of elements covering the target position through other methods and arrange them in order from the top layer to the bottom layer of the viewport, and this application does not limit this.

[0057] Then, based on the above, each node is traversed sequentially from top to bottom until the first target element containing unique identification information is obtained. At this point, the traversal will stop and the first target element will be used as the target component structure picked up by the touch operation.

[0058] Of course, it should be noted that in some possible implementations, the target page may also cause accidental touches by the target picking object due to the presence of a mask. Therefore, in some embodiments of this application, when traversing the nodes of each element in the element set from top to bottom, it is necessary to determine whether the currently traversed target node contains the previously traversed node, thereby determining whether there is a mask between elements. That is, in one embodiment of this application, the step of traversing the nodes of each element in the element set from top to bottom until the first target element containing unique identification information is obtained includes: Iterate through the nodes of each element in the set of elements from top to bottom, and determine whether the target node being iterated over contains the node from the previous iteration. If the target node does not contain the nodes from the previous iteration, it is determined that the touch operation does not have a target component structure to be picked up. If the target node contains nodes from the previous traversal, continue traversing the nodes of the remaining elements in the element set until the first target element containing unique identifier information is obtained.

[0059] Specifically, if the current target node does not contain a previously visited node (meaning there is no parent-child relationship between them, indicating a masking relationship), the loop terminates and returns null, signifying that no element can be located during the touch operation, meaning no target component structure exists. The loop continues traversing the remaining nodes only if the current target node contains a previously visited node, until the first target element containing unique identifier information is found.

[0060] Furthermore, in some embodiments of this application, considering that some component structures may be nested, such as the aforementioned "slot" where one component is embedded in another, the component structure will also contain nesting identification information to indicate the nesting relationship, i.e., a "slot" identifier. Similar to the aforementioned unique identification information, the "slot" identifier can also be used to assist in determining the target component structure picked up by the touch operation. That is, in one embodiment of this application, the method further includes: Traverse the nodes of each element in the element set sequentially from top to bottom until a second target element containing nested identifier information is obtained; and Within the parent element set of the second target element, a third target element containing unique identification information is determined, and the third target element is used as the target component structure picked up by the touch operation.

[0061] In this embodiment of the application, when traversing the nodes of each element in the element set from top to bottom, in addition to determining whether the node (data-nodepath attribute) has unique identification information, it also detects whether the node contains nested identification information, until a second target element containing nested identification information is obtained.

[0062] After determining that the second target element contains nested identification information, the system will search for elements with the data-nodepath attribute in the direction of its parent element. That is, it will determine the third target element containing unique identification information within the set of parent elements of the second target element, and use the third target element as the target component structure picked up by the touch operation.

[0063] Based on the final determination of the target component structure picked up by the touch operation, the outline of the target component structure will be further calculated, and combined with the triggered event, an object will be constructed and transmitted to the outer designer through the proxy control module to trigger subsequent logic.

[0064] Specifically, to facilitate understanding of the above content, the detailed implementation process of determining the target component structure picked up by the touch operation based on the unique identifier information to generate the corresponding trigger event is as follows: 1. Use the browser's document.elementsFromPoint to get the collection of elements corresponding to the mouse position. The elements in this collection are arranged from top to bottom according to the viewport.

[0065] 2. Iterate through the collection of elements: (1) If the current loop element does not contain the previous loop element, it proves that the two elements have no parent-child relationship, and it is determined that there is a mask, so the loop is terminated and there is no element to be located. (2) If the current DOM node has a data-nodepath attribute, terminate the loop and locate the current element; (3) If the current DOM node has a slot identifier, terminate the loop and locate the current element; 3. Construct a transmission object based on the located element. (1) If a mask exists, return null. (2) If an element exists ① If a slot identifier exists, continue searching for elements with the data-nodepath property towards the parent element, calculate the outline of the element, and the outline of the slot element, and mark it as a slot. ② If the element has a data-nodepath attribute, calculate the element's outline; (3) Combine the calculation results with the triggered events to construct an object and transmit it to the outer designer.

[0066] Furthermore, to achieve the effect of free translation and scaling within the designer, in one embodiment of this application, the designer is specifically implemented through a layered design. For a clearer understanding of the above, please refer to [link to relevant documentation]. Figure 4 , Figure 4 This is a schematic diagram of a layered design structure of a designer provided in an embodiment of this application.

[0067] Specifically, the first layer of the designer is a target layer anchored at the top left corner of the sandbox, used to place components such as pop-ups and selector highlights. The middle layer is a simulated window with a designer proxy, running within the sandbox to intercept events, such as touch or click events, through the proxy control module. The bottom layer has a simple coordinate system used to calculate the mapping between browser coordinates and sandbox coordinates. Specifically, the canvas can be translated and scaled by determining the position (x, y) of the top left corner and the current scale value, allowing these operable components to remain the same size regardless of coordinate system scaling; for example, text on labels will not increase or decrease in size with scaling. This rendering effect can be achieved by applying these transformation parameters using the CSS transform property.

[0068] Building upon the foregoing, in one embodiment of this application, after determining the target component structure picked up by the touch operation based on unique identifier information to generate a corresponding trigger event, the trigger event will be transmitted to the outer layer of the designer to further determine whether the operation is legal, thereby implementing specific operations on the IDE model. For example, in one embodiment of this application, the method further includes: Based on the triggering event, the target component structure on the editing interface is modified to regenerate compileable information corresponding to the modified target component structure.

[0069] Specifically, in this embodiment, the designer communicates with the proxy module within the sandbox during runtime. The proxy transmits user actions (clicking, dragging) to the designer. Upon receiving the information from the proxy, the designer locates the component involved in the operation in the IDE model and determines the validity of the operation based on the description in the IDE model, thereby implementing the specific operation on the IDE model. The operation on the IDE model ultimately translates into changes to the component structure on the original editing interface. After the component structure on the editing interface is changed, a new second description file is generated, which is then processed into tree-structured data by the IDE model and passed again to the translator and sandbox for execution, thereby rendering a new page structure. This process is also the component object refresh process described above.

[0070] Specifically, to clearly understand the system architecture diagram of the designer used to execute the page editing method provided in the embodiments of this application, please refer to... Figure 5 , Figure 5 A schematic diagram of the system structure of a designer provided in an embodiment of this application is described in detail below.

[0071] Among them, NASL (NetEase Application Specific Language) contains a JSON schema describing a component template, which provides the second descriptive information of this application, namely, describing the attributes and nesting relationships of the component structure provided on the editing interface, and describing how the designer should display these components.

[0072] The input to the component library includes component objects, as well as a description file configured for each component object to indicate the access rules for the designer, i.e., the first description information.

[0073] The above content will serve as input information for the designer of this application, generating a set of general tree structure data through the IDE model within the designer, and then handing it over to the translator.

[0074] The first layer of the translator will process the tree-structured data by combining the component description, i.e., the JSON scheme parsing rules of the first description information, and interpret it into a general translation object, i.e., general description information. The designer access rules specifically describe the component type, the component's scope, default parameters, and styles, etc. Combined with the information provided by NASL, this yields general description information including tags, attributes, nesting relationships, and styles. Furthermore, a unique identifier ID will be generated for each component structure.

[0075] The second layer of the translator will use specific general framework translators (Vue, React, etc.) to convert general translation objects into single-page templates (Vue template, JSX, etc.) and pass them to the sandbox runtime environment.

[0076] After receiving a single-page template, the sandbox renders the single page into the sandbox environment, combining it with a specific front-end sandbox project template (Vue, React, etc.). The sandbox uses a proxy control module to communicate with the designer runtime outside the sandbox and intercept page events within the sandbox to pick up components, enabling component selection and drag-and-drop operations.

[0077] Furthermore, the proxy transmits user actions (clicks, drags) to the designer. The designer receives this information from the proxy, locates the corresponding component in the IDE model, determines the validity of the action based on the IDE model's description, and then performs the appropriate action on the IDE model. These actions on the IDE model ultimately translate into changes to the original NASL. After the NASL is modified, a new IDE Model tree structure is generated, which is then passed to the translator and sandbox for execution, resulting in a new page structure.

[0078] The page editing method provided in this application determines a component structure composed of at least one component object on the editing interface, obtains the description information of each component object, and then parses the component structure based on the description information of the component objects, translating the component structure into general compilable information. A unique identifier is generated for the component structure within the compilable information. Therefore, when the compilable information is run in the target virtual runtime environment, the nodes in the structured document of the generated target page that describe the component structure carry unique identifier information, facilitating subsequent interaction determination of the component objects. This method eliminates the need to develop different designers for different component libraries. By parsing components into general compilable objects based on component description information and corresponding parsing rules, compatibility between components and the front end is achieved. Furthermore, by adding the unique identifier information of the component, the nodes describing the component structure in the structured document of the generated target page carry unique identifier information during virtual environment runtime, thereby indicating subsequent interactive behaviors on the page.

[0079] To better implement the page editing method provided in the embodiments of this application, based on the page editing method provided in the embodiments of this application, this application also provides a page editing device, such as... Figure 6 As shown, the page editing device includes: The acquisition module 610 is used to determine a component structure composed of at least one component object on the editing interface, and to acquire first description information of each component object, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; The parsing module 620 is used to parse the component structure based on the first description information and generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The generation module 630 is used to execute the compilable information in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0080] In some embodiments of this application, the parsing module 620 is further configured to determine the second description information of the component structure, and generate tree structure data of the component structure based on the first description information and the second description information, wherein the second description information includes attribute information for indicating the display style of the component object on the page; Based on the parsing rules corresponding to the first description information, the tree structure data is parsed to obtain the general description information corresponding to the component structure, and a unique identifier information is generated for the component structure. The general description information is transformed into compilable information under the target framework, so that the compilable information contains the unique identification information of the component structure.

[0081] In some embodiments of this application, the page editing device is further configured to, in response to detecting a touch operation applied to the target page, determine the target component structure picked up by the touch operation based on the unique identification information, so as to generate a corresponding trigger event.

[0082] In some embodiments of this application, the page editing device is further configured to, in response to detecting a touch operation applied to the target page, determine the target location indicated by the touch operation, and obtain a set of elements covering the target location; Based on the relationship between the nodes of each element in the element set and the viewport, the nodes of each element in the element set are traversed sequentially from the top to the bottom until a first target element containing unique identification information is obtained, and the first target element is used as the target component structure picked up by the touch operation.

[0083] In some embodiments of this application, the page editing device is further configured to traverse the nodes of each element in the element set sequentially from the top to the bottom, and determine whether the target node being traversed currently contains the node being traversed in the previous traversal. If the target node does not contain the nodes from the previous iteration, it is determined that the touch operation does not have a target component structure to be picked up. If the target node contains nodes from the previous traversal, continue traversing the nodes of the remaining elements in the element set until the first target element containing unique identifier information is obtained.

[0084] In some embodiments of this application, the page editing device is further configured to traverse the nodes of each element in the element set sequentially from top to bottom until a second target element containing nested identifier information is obtained; and Within the parent element set of the second target element, a third target element containing unique identification information is determined, and the third target element is used as the target component structure picked up by the touch operation.

[0085] In some embodiments of this application, the page editing device is further configured to determine a first position of the touch operation in the event interception layer in response to detecting the touch operation in the event interception layer; The first position is transformed based on the scaling factor and / or offset factor of the target page relative to the event interception layer to obtain the target position indicated by the touch operation on the target page.

[0086] In some embodiments of this application, the page editing device is further configured to modify the target component structure on the editing interface based on the triggering event, so as to regenerate compilable information corresponding to the modified target component structure.

[0087] For specific limitations regarding the page editing device, please refer to the limitations regarding the page editing method above, which will not be repeated here. Each module in the aforementioned page editing device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module. In this embodiment, a component structure composed of at least one component object is determined on the editing interface, and description information of each component object is obtained. Then, based on the description information, the component structure is parsed and translated into generic compilable information. A unique identifier is generated for the component structure within the compilable information. Thus, when the compilable information is run in the target virtual runtime environment, the nodes describing the component structure in the generated target page's structured document carry unique identifier information, facilitating subsequent interaction determination of the component object. The method provided in this application eliminates the need to develop different designers for different component libraries. By parsing components into generic compilable objects based on component description information and corresponding parsing rules, compatibility between components and the front-end is achieved. Furthermore, by adding unique identifier information to the component, the nodes describing the component structure in the generated target page's structured document carry unique identifier information during virtual environment runtime, thereby indicating subsequent interactive behaviors on the page.

[0088] In some embodiments of this application, the page editing device can be implemented as a computer program, and the computer program can be implemented as follows: Figure 7 It runs on the computer device shown. The computer device's memory can store the various program modules that make up the page editing device, for example, Figure 6 The acquisition module 610, parsing module 620, and generation module 630 are shown. The computer program comprised of these modules causes the processor to execute the steps of the page editing methods in the various embodiments of this application described in this specification.

[0089] For example, Figure 7 The computer equipment shown can be used as follows Figure 6The acquisition module 610 in the page editing device shown executes step S110. The computer device can execute step S120 through the parsing module 620. The computer device can execute step S130 through the generation module 630. The computer device includes a processor, memory, and network interface connected via a system bus. The processor of the computer device provides computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used to communicate with external computer devices via a network connection. When the computer program is executed by the processor, it implements a page editing method.

[0090] 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 computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0091] In some embodiments of this application, a computer device is provided, including one or more processors; memory; and one or more application programs, wherein the one or more application programs are stored in the memory and configured to be executed by the processor to perform the following steps: A component structure consisting of at least one component object is determined on the editing interface, and first description information of each component object is obtained, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; Based on the first description information, the component structure is parsed to generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The compilable information is executed in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0092] In some embodiments of this application, a computer-readable storage medium is provided, storing a computer program that is loaded by a processor, causing the processor to perform the following steps: A component structure consisting of at least one component object is determined on the editing interface, and first description information of each component object is obtained, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; Based on the first description information, the component structure is parsed to generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The compilable information is executed in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

[0093] 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 computer 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 methods described above. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, or optical storage, etc. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc.

[0094] 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.

[0095] The foregoing has provided a detailed description of a page editing method, apparatus, device, and storage medium provided in the embodiments of this application. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A page editing method, characterized in that, include: A component structure consisting of at least one component object is determined on the editing interface, and first description information of each component object is obtained, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; Based on the first description information, the component structure is parsed to generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The compilable information is executed in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

2. The method according to claim 1, characterized in that, The step of parsing the component structure based on the first description information to generate compilable information corresponding to the component structure includes: The second description information of the component structure is determined, and the tree structure data of the component structure is generated according to the first description information and the second description information, wherein the second description information includes attribute information for indicating the display style of the component object on the page; Based on the parsing rules corresponding to the first description information, the tree structure data is parsed to obtain the general description information corresponding to the component structure, and a unique identifier information is generated for the component structure. The general description information is transformed into compilable information under the target framework, so that the compilable information contains the unique identification information of the component structure.

3. The method according to claim 2, characterized in that, When the component structure includes multiple component objects, the second description information also includes nesting information for indicating the nesting relationship between component objects in the component structure; The compileable information includes nesting identifier information used to indicate the nesting relationship.

4. The method according to any one of claims 1 to 3, characterized in that, The method further includes: In response to the detection of a touch operation on the target page, the target component structure picked up by the touch operation is determined based on the unique identification information, so as to generate a corresponding trigger event.

5. The method according to claim 4, characterized in that, The step of responding to the detection of a touch operation on the target page and determining the target component structure picked up by the touch operation based on the unique identifier information includes: In response to detecting a touch operation applied to the target page, the target location indicated by the touch operation is determined, and a set of elements covering the target location is obtained; Based on the relationship between the nodes of each element in the element set and the viewport, the nodes of each element in the element set are traversed sequentially from the top to the bottom until a first target element containing unique identification information is obtained, and the first target element is used as the target component structure picked up by the touch operation.

6. The method according to claim 5, characterized in that, The step of traversing the nodes of each element in the element set sequentially from top to bottom until the first target element containing unique identifier information is obtained includes: Iterate through the nodes of each element in the set of elements from top to bottom, and determine whether the target node being iterated over contains the node from the previous iteration. If the target node does not contain the nodes from the previous iteration, it is determined that the touch operation does not have a target component structure to be picked up. If the target node contains nodes from the previous traversal, continue traversing the nodes of the remaining elements in the element set until the first target element containing unique identifier information is obtained.

7. The method according to claim 5, characterized in that, The method further includes: Traverse the nodes of each element in the element set sequentially from top to bottom until a second target element containing nested identifier information is obtained; and Within the parent element set of the second target element, a third target element containing unique identification information is determined, and the third target element is used as the target component structure picked up by the touch operation.

8. A page editing device, characterized in that, include: The acquisition module is used to determine a component structure consisting of at least one component object on the editing interface, and to acquire first description information of each component object, wherein the first description information includes type information of the component object and configuration parameters associated with the type information; The parsing module is used to parse the component structure based on the first description information and generate compilable information corresponding to the component structure. The compilable information includes unique identifier information generated for the component structure. The generation module is used to execute the compilable information in the target virtual runtime environment, so that the nodes in the structured document of the generated target page that describe the component structure carry the unique identification information.

9. A computer device, characterized in that, The computer device includes: One or more processors; Memory; and One or more applications, wherein the one or more applications are stored in the memory and configured to be executed by the processor to implement the page editing method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, It stores a computer program, which is loaded by a processor to execute the page editing method according to any one of claims 1 to 7.

Images