Code mapping conversion method and device and electronic equipment

Abstract

The invention provides a code mapping conversion method and device and electronic equipment, a design plug-in responds to a code conversion request for a target design draft, and a design component contained in the target design draft is obtained; searching a mapping function corresponding to the design component, and converting the design component into a target code based on the mapping function; wherein the mapping function is a function which is debugged in advance and is used for defining conversion logic from the design component to the code component; and generating a design code corresponding to the target design draft based on the target code corresponding to the design component. In the mode, the design plug-in not only can accurately position the mapping function corresponding to the design component, but also integrates mapping function analysis and execution logic, real-time conversion from the design component to the code component can be realized based on the mapping function, and the code conversion efficiency and accuracy are improved.

Description

Technical Field

[0001] This disclosure relates to the field of design-to-code conversion, and in particular to a code mapping conversion method, apparatus, and electronic device. Background Technology

[0002] In related technologies, machine learning models can be used to identify UI components in a design draft and automatically generate code in order to convert the design draft into executable code. However, the accuracy of this method is unstable and it cannot handle complex custom components. Summary of the Invention

[0003] In view of this, the purpose of this disclosure is to provide a code mapping conversion method, apparatus and electronic device for accurately and quickly converting design drafts into code.

[0004] In a first aspect, embodiments of this disclosure provide a code mapping conversion method, which is applied to a design plugin installed in an electronic device. The method includes: in response to a code conversion request for a target design draft, obtaining design components contained in the target design draft; finding a mapping function corresponding to the design component, and converting the design component into target code based on the mapping function; wherein the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; and generating design code corresponding to the target design draft based on the target code corresponding to the design component.

[0005] Secondly, embodiments of this disclosure also provide a code mapping conversion device, which is installed in a design plug-in in an electronic device. The device includes: a component acquisition module, used to acquire design components contained in the target design draft in response to a code conversion request for the target design draft; a code conversion module, used to find the mapping function corresponding to the design component and convert the design component into target code based on the mapping function; wherein the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; and a code sending module, used to generate design code corresponding to the target design draft based on the target code corresponding to the design component.

[0006] Thirdly, this disclosure provides an electronic device including a processor and a memory, the memory storing machine-executable instructions that can be executed by the processor, the processor executing the machine-executable instructions to implement the above-described code mapping conversion method.

[0007] Fourthly, this disclosure provides a computer-readable storage medium storing computer-executable instructions that, when invoked and executed by a processor, cause the processor to implement the aforementioned code mapping and conversion method.

[0008] The embodiments disclosed herein bring the following beneficial effects: This disclosure provides a code mapping conversion method, apparatus, and electronic device. First, a design plugin, responding to a code conversion request from a target design draft, obtains the design components contained in the target design draft. Then, it locates the mapping function corresponding to each design component and converts the design component into target code based on the mapping function. The mapping function is a pre-debugged function used to define the conversion logic from design components to code components. Finally, based on the target code corresponding to the design components, the design code corresponding to the target design draft is generated. In this approach, the design plugin not only accurately locates the mapping function corresponding to the design component but also integrates the mapping function parsing and execution logic, enabling real-time conversion from design components to code components based on the mapping function, thus improving the efficiency and accuracy of code conversion.

[0009] Other features and advantages of this disclosure will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the disclosure. The objects and other advantages of this disclosure are realized and obtained through the structures particularly pointed out in the description, claims and drawings.

[0010] To make the above-mentioned objects, features and advantages of this disclosure more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0012] Figure 1 A flowchart of a code mapping conversion method provided in this embodiment of the disclosure; Figure 2 A structural diagram of a scaffolding tool provided in an embodiment of this disclosure; Figure 3 A function debugging flowchart provided in this disclosure embodiment; Figure 4 A complete flowchart of multi-role collaboration is provided for embodiments of this disclosure; Figure 5 This is a schematic diagram of the structure of a code mapping conversion device provided in an embodiment of the present disclosure; Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. The components of the embodiments of this disclosure described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0014] Therefore, the following detailed description of the embodiments of this disclosure provided in the accompanying drawings is not intended to limit the scope of the claimed disclosure, but merely to illustrate selected embodiments of the disclosure. All other embodiments obtained by those skilled in the art based on the embodiments of this disclosure without inventive effort are within the scope of protection of this disclosure.

[0015] In the field of design draft to code conversion, the following solutions mainly exist: Option 1 is an AI (Artificial Intelligence) based image recognition method. This method uses a machine learning model to identify UI components in the design draft and automatically generate code. However, this method has unstable recognition accuracy, is prone to misidentification, cannot handle complex custom components, and the quality of the generated code is uncontrollable. At the same time, the machine learning model requires a large amount of training data, increasing the model training cost.

[0016] Option two is based on layout analysis. This method analyzes the layout structure of the design draft to generate corresponding HTML (Hypertext Markup Language) or CSS (Code ComposerStudio) code. However, this method can only generate basic HTML structure and cannot map to specific component libraries, nor does it provide semantic component information.

[0017] Option 3 is a rule-based matching method that predefines component identification rules and generates code by matching these rules. However, this method suffers from high rule maintenance costs, poor scalability, difficulty in using new components, and inability to handle component variations. Furthermore, rule conflicts between different components are difficult to resolve.

[0018] Option 4, manual coding method. This method requires designers to manually convert the design drafts into code. This method has a high accuracy rate in code conversion, but it is inefficient, has high labor costs, is prone to errors, has poor consistency, cannot be processed in batches, and is prone to the phenomenon of design and development being disconnected.

[0019] To address the aforementioned issues, this disclosure provides a code mapping conversion method, apparatus, and electronic device, which can be applied to any scenario where a design draft is converted into code.

[0020] In one possible implementation, embodiments of this disclosure provide a code mapping conversion method applied to an electronic device that has a design plugin installed. For example... Figure 1 As shown, the method includes the following specific steps: Step S102: In response to the code conversion request for the target design draft, obtain the design components contained in the target design draft.

[0021] The aforementioned design plugins are extensions that run within the design tool, integrating functions such as mapping function management, component identification, and code generation. The target design draft is a design document created by the designer using design components; the target design draft may include one or more design components.

[0022] When the design plugin responds to a code conversion request for a target design draft, it iterates through all component instances in the target design draft and retrieves the design components contained within each instance. A component instance is an instance node used in the design draft, and its type is specified. A component instance can include one or more design components, which can be a single component or a set of components, where a set includes multiple variations of components. Different design components have different component attributes, including but not limited to component size, component type, and component state.

[0023] In practical applications, the code conversion request for the target design draft can be triggered by the user on an electronic device with the design plugin installed, or it can be sent by the user to the electronic device through a terminal device connected to that electronic device, such as a mobile phone, computer, or tablet. The user can be a front-end engineer, designer, or anyone who needs to use the design draft to code conversion function.

[0024] Step S104: Locate the mapping function corresponding to the design component, and convert the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component.

[0025] In practical implementation, the mapping function corresponding to a design component can be determined through a pre-defined correspondence between design components and mapping functions. Typically, different design components have different mapping functions, although it's possible for some design components to have the same mapping function. These mapping functions are maintained and written by the function developers during the mapping function development phase. The function developers will debug the written mapping functions during this phase, and only release the debugged mapping function after they are satisfactory. These function developers can be members of the official team, open-source community contributors, or front-end engineers from user teams, etc.

[0026] After locating the mapping function corresponding to a design component, the design plugin automatically executes the mapping function to convert the design component into target code. Based on this method, the target code corresponding to each design component in the target design draft can be obtained; different design components correspond to different target codes.

[0027] Step S106: Based on the target code corresponding to the design component, generate the design code corresponding to the target design draft.

[0028] Combine the target code corresponding to each design component in the target design draft to obtain the design code corresponding to the target design draft.

[0029] In an optional embodiment, if the code conversion request for the target design draft is triggered by a user on an electronic device with the design plugin installed, the design code corresponding to the target design draft will be displayed on the electronic device after it is generated. If the code conversion request for the target design draft is sent by a user to the electronic device through a terminal device, the design code corresponding to the target design draft will be sent to the terminal device after it is generated, for use by the user operating the terminal device.

[0030] The code mapping conversion method provided in this disclosure not only allows the design plugin to accurately locate the mapping function corresponding to the design component, but also integrates the mapping function parsing and execution logic. It can realize real-time conversion from design component to code component based on the mapping function, thereby improving the efficiency and accuracy of code conversion.

[0031] The following examples describe how design plugins look up mapping functions.

[0032] Specifically, the design components in the aforementioned target design draft are labeled with function identifiers, which indicate the corresponding mapping functions for the design components. Specifically, during the mapping function labeling stage, it is necessary to label the design components with the corresponding mapping function's function identifier. These function identifiers are unique; that is, different mapping functions correspond to different function identifiers. The function identifier can be a string, a code symbol, etc.

[0033] Designers use design components with labeled function identifiers to create target design drafts. For example, the design components are located within the design system, and designers create target design drafts within the design system by dragging and dropping component instances. The component instances include one or more design components with labeled function identifiers.

[0034] Based on this, the specific process of finding the mapping function corresponding to the design component can include: obtaining the mapping function corresponding to the design component based on the function identifier marked on the design component. Since the function identifier is unique, the design plugin can determine the mapping function corresponding to the design component from the design system based on the function identifier marked on the design component.

[0035] Furthermore, in the mapping function annotation stage, the function identifier of the design component annotation is determined in the following way: the function identifier of the debugged mapping function is persistently stored in the configuration data of the corresponding annotated design component to annotate the function identifier of the design component; a component mapping configuration table is generated according to the mapping function corresponding to the function identifier of the design component; wherein, the component mapping configuration table includes: multiple design components, and multiple mapping functions corresponding to each design component.

[0036] In practical implementation, the design plugin communicates with the design system, which includes multiple design components for generating different design drafts. The design system is a complete system encompassing design components, specifications, and guiding principles. After debugging the mapped function, the function developer annotates the debugged design function onto the design component of the design system through the design plugin. This means that the function identifier of the adjusted mapped function is persistently bound to the configuration data of the corresponding annotated design component. This configuration data is persistently stored in the `pluginData` of the design component, which is a component-private data storage mechanism used to store the function identifier of the mapped function corresponding to the design component. This method achieves the binding between the mapped function and the design component, and allows it to be synchronized and distributed with the design system.

[0037] After the debugged design function is labeled onto the design component of the design system through the design plugin, a mapping relationship between the component name and the mapping function is established, and this mapping relationship is stored in the component mapping configuration table.

[0038] Furthermore, the batch annotation function of the design plugin can be used to batch annotate design components in the design system, enabling rapid annotation of all design components within the system. Specifically, the component mapping configuration table is obtained; each design component in the design system is traversed, and based on the component mapping configuration table, the mapping function corresponding to each design component is determined, and the function identifier of the mapping function corresponding to the design component is annotated; different mapping functions correspond to different function identifiers.

[0039] During batch annotation, it is necessary to recursively traverse all design components in the design system, then match the corresponding mapping function for each design component according to the component mapping configuration table, and finally set the mapping function annotation for each matched design component. In other words, the function identifier of the corresponding mapping function is stored in the configuration data of the design component. Here, recursive traversal refers to a deep optimization algorithm that searches all design components in the design system.

[0040] The following examples describe how to obtain design components and transform code based on mapping functions.

[0041] Specifically, the process of obtaining the design components contained in the target design draft may include: traversing all component instances in the target design draft and obtaining target component instances of type target; obtaining the design components contained in the target component instances and determining the obtained design components as the design components contained in the target design draft.

[0042] When a user triggers a code conversion request for the target design draft, the design plugin automatically iterates through all component instances in the target design draft, filters the component instances of the target type, and determines the design components corresponding to the component instances of the target type as the design components included in the target design draft.

[0043] In one specific embodiment, during the traversal of component instances, it is necessary to determine whether the type of the component instance is the target type. If not, the component instance is skipped, and the process continues to determine whether the type of the next component instance is the target type. If the component instance is the target type, the design component corresponding to the component instance is obtained through the mainComponent property of the component instance. Specifically, the component instance may contain a main component, and the aforementioned mainComponent property refers to the main component property. The main component is the definition source of the design component and is referenced through the mainComponent property.

[0044] Therefore, when the component instance is of the target type, it is also necessary to determine whether the main component exists in the component instance. If it does, the design component corresponding to the component instance is obtained based on the main component.

[0045] After obtaining the design components contained in the target design draft, the design plugin automatically finds the mapping function corresponding to each design component in the target design draft, and converts the design components into target code based on the mapping function.

[0046] Specifically, the process of converting design components into target code based on mapping functions can include: dynamically parsing the mapping function corresponding to the design component to construct a target function object; executing the mapping function according to the target function object and preset function parameters to obtain the code structure corresponding to the design component; wherein the code structure includes code strings and slot information; and obtaining the target code corresponding to the design component based on the code structure and component properties.

[0047] In practical implementation, the aforementioned dynamic parsing refers to the technique of parsing and executing mapping function strings at runtime. The preset function parameters can be standardized node objects and core toolsets; these core toolsets are a collection of utility functions that provide component lookup, attribute conversion, and other functionalities. The slot information is used to define the data structure for template references and the list of component child node IDs. This slot information is also used to handle template references and child node mappings through the slot system, which includes a mechanism for handling dynamic mapping of component content areas. Furthermore, the slot system also supports complex nested component structures.

[0048] The following examples illustrate the methods for writing and debugging mapping functions.

[0049] Specifically, the above-mentioned mapping function is debugged in the following way: a function template is generated using a scaffolding tool, and a standard function structure corresponding to the function template is generated; the standard function structure supports multiple front-end frameworks; through a standardized interface, logical writing instructions applied to the function template are received, and a mapping function is generated based on the conversion logic from design components to code components defined by the logical writing instructions and the standard function structure; the mapping function is debugged to obtain the debugging result; if the debugging result indicates that the debugging is successful, the debugged mapping function is obtained.

[0050] In practice, the aforementioned scaffolding tool is a CLI (Command-Line Interface) toolchain used to automatically generate function templates. Function developers use this tool to generate function templates and standard function structures. They then write specific mapping logic based on these templates; this mapping logic is essentially the conversion logic from design components to code components. This mapping logic is then applied to the standard function structure to generate mapped functions. Built-in testing tools are used to verify the correctness of the mapped functions, i.e., to test their effectiveness, obtaining debugging results. Based on these results, the mapped functions are continuously optimized until their performance meets the needs of the function developers.

[0051] The aforementioned front-end frameworks include, but are not limited to, React, Vue, and Angular. React is an open-source JavaScript library primarily used for building user interfaces; it is suitable for web applications requiring high performance, responsiveness, and data-driven architecture. Vue is a lightweight and easy-to-learn front-end framework, suitable for small to medium-sized projects, especially those requiring rapid iteration and flexibility. Angular is a TypeScript-based front-end web application framework, suitable for building large, complex single-page applications, particularly enterprise-level applications requiring strict structure and scalability.

[0052] The standardized interface specifications mentioned above include: a unified function signature definition that accepts design component and toolset parameters (equivalent to function parameters); a standardized return value structure that includes code structure and optional slot information; support for component search, attribute conversion, and type judgment functions provided by the core toolset; and a unified component mapping configuration table format that supports component name matching using strings and regular expressions. Specifically, the corresponding design component can be located by its component name.

[0053] In practical applications, the mapping functions written by function developers adopt a standardized interface design, including standard data structures and a rich core toolset. The core toolset includes an attribute conversion module, a slot processing module, and a code generation module. The attribute conversion module is used to handle the mapping from design component attributes to code component attributes; the slot processing module is used to handle the dynamic mapping of component content areas; and the code generation module is used to generate code structures that conform to the target framework specifications.

[0054] Based on the above description, when converting design components into code based on mapping functions, the function parameters corresponding to the component instance and the core toolset are received as input parameters. The component attributes of the design components are extracted and converted, the content of child node slots is found and processed, and then the target code structure corresponding to the design components is constructed and the result is returned.

[0055] For example, when converting the code for the Rate component, it first receives a Rate component instance, determines whether the component instance needs component attribute processing, and if so, performs component attribute conversion; otherwise, it directly generates fixed code. When converting the code for the Button component, it receives a Button component instance and obtains its attributes, performs mapping conversion on the attributes, then checks if an icon sub-component exists in the Button component instance. If found, the icon name is extracted; if not found, icon processing is skipped. Then, it constructs the attribute string and generates the target code corresponding to the Button component. When converting the code for the Card component, it receives a Card component instance and obtains reference nodes based on the Card component instance, searching for header, content, and footer references. Based on these references, it creates slot configurations, generates a multi-slot code structure, and returns the code and slot information.

[0056] For converting the code of tab page components in complex components, the process first obtains the tab page component instance, maps and configures the component attributes, and converts the tab position attributes. Then, it searches for all tab item child components. If not found, it returns an error message; if found, it determines the tab type, collects the child nodes of each tab component, generates slot configurations, constructs the complete tab code, and returns the code and slot information. For converting the code of table components in complex components, the process first receives the table component instance and determines whether it is a nested table. If so, it returns an error message to avoid duplicate processing; otherwise, it maps and converts the component attributes, searches for the Pagination component and all Tableitem column components, iterates through each column component, and searches for Header and Cell child components. It detects the selected column type, extracts the header background, generates slot configurations, constructs the complete list code, and returns the code and slot information.

[0057] In practical applications, a complete CLI toolchain is provided to function developers, offering scaffolding support. This toolchain enables the rapid generation of mapped function projects and automated testing and verification. For example... Figure 2 The diagram shown is an architecture diagram of a scaffolding tool provided in an embodiment of the present invention. After the function developer executes the CLI command, the template manager in the scaffolding tool generates a function template, the project creator automatically generates a standard function structure, and then the function developer executes the CLI command to write specific mapping logic on the function template to generate a mapping function. Then, the test script template is used to verify the correctness of the mapping function.

[0058] The scaffolding tool features intelligent build configuration. Firstly, it includes a dual-mode build system: in development mode, debug code is retained for function debugging; in production mode, debug code is removed for component annotation. The tool also features automated template generation, supporting dynamic version number replacement and sample code generation. Specifically, the version controller in the tool automatically reads the core package version number of mapped functions, and the version number can be dynamically replaced in the function template to ensure version compatibility.

[0059] The scaffolding tool also features an automated testing system that performs syntax verification and execution tests on mapped functions, effectively debugging them. Specifically, this automated testing system executes the following test process: After test initiation, it dynamically imports the core toolset, loads build artifacts, extracts the set of mapped functions, and creates test node objects. Each mapped function in the set is then tested individually. During testing, it checks if the current mapped function can be executed successfully. If so, it records the number of successful executions; otherwise, it records the error message. Then, it checks if the next mapped function can be executed successfully. After all mapped functions are tested, a test report is generated, and it checks for errors. If errors are found, the test exits and reports the errors; otherwise, the test passes. This method accurately identifies failed mapped functions and the causes of errors, and also records test execution time and success rate.

[0060] When determining whether a mapping function has been executed successfully, it is necessary to check whether the syntax of the mapping function is correct and to test the execution of the mapping function using simulated node data.

[0061] Furthermore, this invention also provides function developers with real-time debugging capabilities, such as... Figure 3 The diagram shown is a function debugging flowchart provided by an embodiment of the present invention. Figure 3 The transformation engine is a core module built into the design plugin, responsible for dynamically parsing and executing mapping functions. First, the mapping function developer triggers the debug export function, allowing the design plugin to obtain and parse the mapping function in real time. Based on the mapping function, it performs transformation tests on the selected design components, generating preview code for the function developer to verify the effect. The mapping function is then optimized based on the verification results. The verification results indicate the syntactic correctness and structural completeness of the mapping function, and can accurately pinpoint the location of syntax and transformation errors.

[0062] The aforementioned scaffolding tool integrates a complete toolchain for function template generation, dependency management, dual-mode construction, and automated testing, supporting standardized development of mapping functions. Furthermore, this invention supports any component library and framework; mapping functions are customizable and extensible; and centralized management of mapping functions facilitates version control and team collaboration. It provides function developers with real-time debugging capabilities, enabling rapid verification and optimization of mapping effects, while establishing a unified standard for mapping functions to ensure code quality and consistency.

[0063] This invention clarifies the division of responsibilities among function developers, designers, and users, improving collaboration efficiency, such as... Figure 4 The diagram shows a complete flowchart of a multi-role collaboration method provided by an embodiment of the present invention. Mapping function developers use scaffolding tools to map function templates and write component mapping functions, defining the conversion logic from design components to code components. Mapping function developers test and optimize mapping functions through the debugging and verification functions of the design plugin. Then, mapping function developers use the design plugin to annotate the verified mapping functions onto design components in the design system. Designers use the annotated design components to create design drafts. When a user triggers a design draft to code conversion request, the conversion engine built into the design plugin automatically performs component identification, mapping function lookup, and code generation, and returns the generated code corresponding to the design draft to the user. The conversion engine is a core module built into the design plugin, responsible for dynamically parsing and executing mapping functions.

[0064] The above approach, through predefined mapping functions, ensures accurate conversion from design components to code components. Furthermore, by inheriting the code conversion logic within the design plugin, it simplifies system architecture and reduces maintenance costs. Additionally, this approach establishes a multi-role collaborative mapping function ecosystem. Through role separation, it achieves specialized division of labor, enabling a collaborative skill ecosystem involving function developers, designers, and users.

[0065] Corresponding to the above method embodiments, this disclosure also provides a code mapping conversion device, which is disposed within a design plug-in installed in an electronic device, such as... Figure 5 As shown, the device includes: The component acquisition module 50 is used to acquire the design components contained in the target design draft in response to a code conversion request for the target design draft.

[0066] The code conversion module 51 is used to find the mapping function corresponding to the design component and convert the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component.

[0067] The code sending module 52 is used to generate design code corresponding to the target design draft based on the target code corresponding to the design component.

[0068] In the aforementioned code mapping conversion device, the design plugin can not only accurately locate the mapping function corresponding to the design component, but also integrate the mapping function parsing and execution logic. It can realize real-time conversion from design component to code component based on the mapping function, thereby improving the efficiency and accuracy of code conversion.

[0069] Furthermore, the design components in the target design draft are marked with function identifiers, which are used to indicate the mapping functions corresponding to the design components; based on this, the code conversion module 51 is used to: obtain the mapping functions corresponding to the design components according to the function identifiers marked on the design components.

[0070] Furthermore, the above-mentioned device also includes a function annotation module, used for: persistently storing the function identifier of the debugged mapping function in the configuration data of the corresponding annotated design component, so as to annotate the function identifier of the design component; generating a component mapping configuration table according to the mapping function corresponding to the function identifier of the design component; wherein, the component mapping configuration table includes: multiple design components, and multiple mapping functions corresponding to the design components respectively.

[0071] Furthermore, the aforementioned design plugin is connected to the design system, which includes multiple design components for generating different design drafts. Based on this, the aforementioned function annotation module is also used to: obtain a component mapping configuration table; traverse each design component in the design system, determine the mapping function corresponding to each design component according to the component mapping configuration table, and annotate the design component with the function identifier of the mapping function corresponding to the design component; wherein, different mapping functions correspond to different function identifiers.

[0072] Furthermore, the code conversion module 51 described above is also used to: dynamically parse the mapping function corresponding to the design component to construct a target function object; execute the mapping function according to the target function object and preset function parameters to obtain the code structure corresponding to the design component; wherein, the code structure includes code strings and slot information; and obtain the target code corresponding to the design component based on the code structure and component attributes corresponding to the design component.

[0073] Furthermore, the component acquisition module 50 is used to: traverse all component instances in the target design draft and acquire target component instances of type target; acquire the design components contained in the target component instances and determine the acquired design components as the design components contained in the target design draft.

[0074] Furthermore, the aforementioned device also includes a function debugging module, used for: generating function templates through scaffolding tools, and generating standard function structures corresponding to the function templates; wherein, the standard function structures support multiple front-end frameworks; receiving logic writing instructions applied to the function templates through a standardized interface, generating mapping functions based on the conversion logic from design components to code components defined by the logic writing instructions and the standard function structures; performing debugging processing on the mapping functions to obtain debugging results; and obtaining the debugged mapping functions if the debugging results indicate that debugging has passed.

[0075] The code mapping conversion device provided in this disclosure has the same implementation principle and technical effect as the aforementioned method embodiment. For the sake of brevity, any parts not mentioned in the device embodiment can be referred to the corresponding content in the aforementioned method embodiment.

[0076] This embodiment also provides an electronic device, such as... Figure 6 As shown, the electronic device includes a processor and a memory. The memory stores computer-executable instructions that can be executed by the processor. The processor executes the computer-executable instructions to implement the code mapping and conversion method described above. This electronic device can be a server or a terminal device.

[0077] Specifically, the above code mapping conversion method is applied to design plugins installed in electronic devices. The method includes: in response to a code conversion request for a target design draft, obtaining the design components contained in the target design draft; finding the mapping function corresponding to the design component, and converting the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; and generating the design code corresponding to the target design draft based on the target code corresponding to the design component.

[0078] In the above code mapping conversion method, the design plugin can not only accurately locate the mapping function corresponding to the design component, but also integrate the mapping function parsing and execution logic. It can realize the real-time conversion from design component to code component based on the mapping function, which improves the efficiency and accuracy of code conversion.

[0079] In an optional embodiment, the design components in the target design draft are marked with function identifiers, which are used to indicate the mapping functions corresponding to the design components; based on this, the step of finding the mapping functions corresponding to the design components includes: obtaining the mapping functions corresponding to the design components according to the function identifiers marked on the design components.

[0080] In an optional embodiment, the function identifier of the design component is determined in the following way: the function identifier of the debugged mapping function is persistently stored in the configuration data of the corresponding labeled design component to mark the function identifier of the design component; a component mapping configuration table is generated according to the mapping function corresponding to the function identifier of the design component; wherein, the component mapping configuration table includes: multiple design components, and multiple mapping functions corresponding to each design component.

[0081] In an optional embodiment, the design plugin is communicatively connected to a design system, which includes multiple design components for generating different design drafts. The method further includes: obtaining a component mapping configuration table; traversing each design component in the design system, determining the mapping function corresponding to each design component according to the component mapping configuration table, and marking the design component with the function identifier of the mapping function corresponding to the design component; wherein, different mapping functions correspond to different function identifiers.

[0082] In an optional embodiment, the step of converting the design component into target code based on the mapping function includes: dynamically parsing the mapping function corresponding to the design component to construct a target function object; executing the mapping function according to the target function object and preset function parameters to obtain the code structure corresponding to the design component; wherein, the code structure includes code strings and slot information; and obtaining the target code corresponding to the design component based on the code structure and component attributes.

[0083] In an optional embodiment, the step of obtaining the design components contained in the target design draft includes: traversing all component instances in the target design draft and obtaining a target component instance of type target; obtaining the design components contained in the target component instance and determining the obtained design components as the design components contained in the target design draft.

[0084] In an optional embodiment, the above-mentioned mapping function is debugged in the following way: a function template is generated using a scaffolding tool, and a standard function structure corresponding to the function template is generated; wherein, the standard function structure supports multiple front-end frameworks; through a standardized interface, logical writing instructions applied to the function template are received, and a mapping function is generated based on the conversion logic from design components to code components defined by the logical writing instructions and the standard function structure; the mapping function is debugged to obtain the debugging result; if the debugging result indicates that the debugging is successful, the debugged mapping function is obtained.

[0085] Furthermore, Figure 6 The electronic device shown also includes a bus 102 and a communication interface 103, with the processor 101, the communication interface 103 and the memory 100 connected via the bus 102.

[0086] The memory 100 may include high-speed random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, metropolitan area network, etc. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 6 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0087] Processor 101 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 101 or by instructions in software form. The processor 101 can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this disclosure. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this disclosure can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a readily available storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 100, and processor 101 reads information from memory 100 and, in conjunction with its hardware, completes the steps of the method described in the foregoing embodiments.

[0088] This disclosure also provides a computer-readable storage medium storing computer-executable instructions. When these computer-executable instructions are called and executed by a processor, they cause the processor to implement the above-described code mapping and conversion method. For specific implementation details, please refer to the method embodiments, which will not be repeated here.

[0089] Specifically, the above code mapping conversion method is applied to design plugins installed in electronic devices. The method includes: in response to a code conversion request for a target design draft, obtaining the design components contained in the target design draft; finding the mapping function corresponding to the design component, and converting the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; and generating the design code corresponding to the target design draft based on the target code corresponding to the design component.

[0090] In the above code mapping conversion method, the design plugin can not only accurately locate the mapping function corresponding to the design component, but also integrate the mapping function parsing and execution logic. It can realize the real-time conversion from design component to code component based on the mapping function, which improves the efficiency and accuracy of code conversion.

[0091] In an optional embodiment, the design components in the target design draft are marked with function identifiers, which are used to indicate the mapping functions corresponding to the design components; based on this, the step of finding the mapping functions corresponding to the design components includes: obtaining the mapping functions corresponding to the design components according to the function identifiers marked on the design components.

[0092] In an optional embodiment, the function identifier of the design component is determined in the following way: the function identifier of the debugged mapping function is persistently stored in the configuration data of the corresponding labeled design component to mark the function identifier of the design component; a component mapping configuration table is generated according to the mapping function corresponding to the function identifier of the design component; wherein, the component mapping configuration table includes: multiple design components, and multiple mapping functions corresponding to each design component.

[0093] In an optional embodiment, the design plugin is communicatively connected to a design system, which includes multiple design components for generating different design drafts. The method further includes: obtaining a component mapping configuration table; traversing each design component in the design system, determining the mapping function corresponding to each design component according to the component mapping configuration table, and marking the design component with the function identifier of the mapping function corresponding to the design component; wherein, different mapping functions correspond to different function identifiers.

[0094] In an optional embodiment, the step of converting the design component into target code based on the mapping function includes: dynamically parsing the mapping function corresponding to the design component to construct a target function object; executing the mapping function according to the target function object and preset function parameters to obtain the code structure corresponding to the design component; wherein, the code structure includes code strings and slot information; and obtaining the target code corresponding to the design component based on the code structure and component attributes.

[0095] In an optional embodiment, the step of obtaining the design components contained in the target design draft includes: traversing all component instances in the target design draft and obtaining a target component instance of type target; obtaining the design components contained in the target component instance and determining the obtained design components as the design components contained in the target design draft.

[0096] In an optional embodiment, the above-mentioned mapping function is debugged in the following way: a function template is generated using a scaffolding tool, and a standard function structure corresponding to the function template is generated; wherein, the standard function structure supports multiple front-end frameworks; through a standardized interface, logical writing instructions applied to the function template are received, and a mapping function is generated based on the conversion logic from design components to code components defined by the logical writing instructions and the standard function structure; the mapping function is debugged to obtain the debugging result; if the debugging result indicates that the debugging is successful, the debugged mapping function is obtained.

[0097] The aforementioned function, when implemented as a software functional unit and sold or used as an independent product, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this disclosure, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, a terminal device, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this disclosure. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0098] In the description of this disclosure, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings, and are only for the convenience of describing this disclosure and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this disclosure. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0099] Finally, it should be noted that the above-described embodiments are merely specific implementations of this disclosure, used to illustrate the technical solutions of this disclosure, and not to limit it. The protection scope of this disclosure is not limited thereto. Although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this disclosure. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure, and should all be covered within the protection scope of this disclosure. Therefore, the protection scope of this disclosure should be determined by the protection scope of the claims.

Claims

1. A code mapping conversion method, characterized in that, The method is applied to a design plugin installed in an electronic device, and the method includes: In response to a code conversion request for a target design draft, obtain the design components contained in the target design draft; Locate the mapping function corresponding to the design component, and convert the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; Based on the target code corresponding to the design component, the design code corresponding to the target design draft is generated.

2. The method according to claim 1, characterized in that, The design components in the target design draft are marked with function identifiers, which are used to indicate the mapping functions corresponding to the design components. The step of finding the mapping function corresponding to the design component includes: Based on the function identifier marked by the design component, obtain the mapping function corresponding to the design component.

3. The method according to claim 2, characterized in that, The function identifiers of the design components are determined in the following way: The function identifiers of the mapped functions that have been debugged are persistently stored in the configuration data of the corresponding labeled design components, so as to label the function identifiers of the design components; A component mapping configuration table is generated based on the mapping function corresponding to the function identifier marked by the design component; wherein, the component mapping configuration table includes: multiple design components, and mapping functions corresponding to the multiple design components respectively.

4. The method according to claim 3, characterized in that, The design plugin is communicatively connected to the design system, which includes multiple design components for generating different design drafts. The method further includes: Obtain the component mapping configuration table; Traverse each design component in the design system, determine the mapping function corresponding to each design component according to the component mapping configuration table, and mark the function identifier of the mapping function corresponding to the design component; wherein, different mapping functions correspond to different function identifiers.

5. The method according to claim 1, characterized in that, The step of converting the design component into target code based on the mapping function includes: The mapping functions corresponding to the design components are dynamically parsed to construct the target function object; Based on the target function object and preset function parameters, the mapping function is executed to obtain the code structure corresponding to the design component; wherein, the code structure includes code strings and slot information; Based on the code structure and component attributes corresponding to the design component, the target code corresponding to the design component is obtained.

6. The method according to claim 1, characterized in that, The step of obtaining the design components contained in the target design draft includes: Iterate through all component instances in the target design draft and obtain the target component instance of type target. Obtain the design components contained in the target component instance, and determine the obtained design components as the design components contained in the target design draft.

7. The method according to claim 1, characterized in that, The mapping function is debugged in the following way: The scaffolding tool generates function templates and corresponding standard function structures; wherein, the standard function structures support multiple front-end frameworks. Through a standardized interface, the system receives logical writing instructions applied to the function template, and generates a mapping function based on the conversion logic from design components to code components defined by the logical writing instructions and the standard function structure. The mapping function is debugged to obtain the debugging results; If the debugging result indicates that the debugging is successful, the mapped function that has been successfully debugged is obtained.

8. A code mapping and conversion device, characterized in that, The device is a design plug-in installed in an electronic device, and the device includes: The component acquisition module is used to acquire the design components contained in the target design draft in response to a code conversion request for the target design draft; The code conversion module is used to find the mapping function corresponding to the design component and convert the design component into target code based on the mapping function; wherein, the mapping function is a pre-debugged function used to define the conversion logic from design component to code component; The code sending module is used to generate design code corresponding to the target design draft based on the target code corresponding to the design component.

9. An electronic device, characterized in that, It includes a processor and a memory, the memory storing computer-executable instructions that can be executed by the processor, the processor executing the computer-executable instructions to implement the code mapping conversion method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when invoked and executed by a processor, cause the processor to implement the code mapping and conversion method according to any one of claims 1-7.

Images