Layout block color configuration method and system for zero-code visualization building platform
By dragging and dropping color schemes into layout blocks in a no-code platform and using custom CSS properties, fine-grained color management of layout blocks is achieved, solving the problems of coarse color configuration granularity and inflexible inheritance mechanism in existing technologies, and improving operational efficiency and design consistency.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-24
- Publication Date
- 2026-03-27
AI Technical Summary
In existing zero-code visual building platforms, the color configuration of layout blocks is coarse-grained, the inheritance mechanism is inflexible, and the interaction is not intuitive, resulting in chaotic style logic and low operation efficiency when making complex layouts.
By responding to user actions in the designer interface of the no-code platform, color schemes can be created, dragged to layout blocks and associated with them, the final set of color variables can be calculated, block-level style management can be achieved using custom CSS properties, and hierarchical inheritance and independent configuration can be supported.
It achieves fine-grained color management of layout blocks, improves configuration efficiency, lowers the user threshold, ensures design consistency and maintainability, and solves the problem of chaotic style inheritance.
Smart Images
Figure CN121742840A_ABST
Abstract
Description
Technical Field
[0001] This invention belongs to the field of software management technology, specifically relating to a method and system for configuring layout block colors in a zero-code visual building platform. Background Technology
[0002] In no-code / low-code visual application building platforms, the style configuration of the user interface (UI), especially color configuration, is a crucial factor affecting design efficiency and the final visual effect. Existing solutions typically employ global theme configuration, page-level style settings, or manual color overriding in individual component property panels to achieve color management. These methods primarily operate at the application-page-component hierarchy, ensuring overall consistency or enabling point-to-point modifications. However, their configuration granularity is insufficient to meet the practical needs for fine-grained and differentiated color control over complex layout structures within a page. Specifically: First, the lack of a style scope management mechanism for layout blocks as independent units makes it difficult to conveniently apply and isolate multiple color schemes to different functional areas within a page (such as headers and sidebars). Second, the ability to manage color styles for layout blocks with nested layouts is weak. There is a lack of a clear and visual mechanism to define how child blocks inherit the color scheme of their parent blocks by default, and how to allow child blocks to easily override inherited styles and establish their own independent scopes. This leads to chaotic style logic when building complex layouts. Third, configuration interaction relies on repeatedly switching and searching between the canvas and the properties panel, which is cumbersome and inefficient, increasing the learning and operational burden on users.
[0003] Therefore, a method and system for configuring layout block colors on a zero-code visual platform is needed. Through intuitive drag-and-drop interaction, multiple independent color schemes that support hierarchical inheritance can be quickly configured and managed for different layout blocks within a page, achieving refined and efficient block-level style customization and real-time visual preview. Summary of the Invention
[0004] To address the aforementioned problems in the existing technology, this invention provides a layout block color configuration method and system for a zero-code visualization platform, solving the problems of coarse configuration granularity, inflexible inheritance mechanism, and unintuitive interaction in existing zero-code visualization building platforms.
[0005] The objective of this invention can be achieved through the following technical solution: a method for configuring the layout block colors of a zero-code visual building platform, the method comprising the following steps: S1: Respond to user actions in the color management interface, create and store at least one color scheme; S2: In the designer interface of the no-code platform, the stored color schemes are displayed as a visual list; respond to the user's drag operation on the target color scheme, and release the drag operation onto the target layout block in the canvas; S3: Establish the association between the target color scheme and the target layout block, and calculate the set of color variables that the target layout block will ultimately take effect based on the association and the hierarchical position of the target layout block in the layout structure; S4: Set the calculated final set of color variables as the CSS custom property on the document object model node corresponding to the target layout block, so that the target layout block and its internal sub-components are updated and rendered in real time according to the CSS custom property, thus completing the update of the style scope within the target layout block.
[0006] Preferably, it also includes S5, which includes: when it is detected that any stored color scheme has been modified, searching for all layout blocks that are associated with the modified color scheme, and re-executing S3-S4 for the found layout blocks.
[0007] Preferably, S1 includes the following sub-steps: S11: Define the data structure for the color scheme. The data structure consists of a unique identifier for the color scheme, a scheme name, and a mapping table for storing key-value pairs of color variables. Each key-value pair is used to define a color variable. The key-value pairs of color variables use CSS custom property names as keys and standard color values as values. S12: Receive user operations according to the color scheme management interface, and define color variable key-value pairs based on the user operations, including creating, editing, copying and deleting color schemes; S13: After serializing the color scheme determined by the user operation, a list of color schemes that can be queried is established, and the list of color schemes is persistently saved by calling the storage interface.
[0008] Preferably, S2 includes the following sub-steps: S21: Based on the color scheme list, generate an interactive list view component in the zero-code designer interface, wherein the component has a pre-built drag event listener for the color scheme identifier. S22: When the drag start event is triggered, the drag event listener obtains the color scheme identifier associated with the event target and the preview data, and creates a temporary preview image; S23: During a drag-and-drop event, display a preview ghost image of the target color scheme that follows the cursor movement; S24: When the preview ghost image moves above a layout block in the canvas, the boundary of the layout block is highlighted.
[0009] Preferably, in S3, establishing the association between the target color scheme and the target layout block includes the following process: The drag-and-release event is parsed, the target layout block node is confirmed through the final hit detection, and the color scheme identifier in the current drag-and-drop session is written into the metadata storage area of the target layout block node. The unique identifier of the target layout block is associated with the unique identifier of the target color scheme.
[0010] Preferably, in step S3, based on the association relationship and the hierarchical position of the target layout block in the layout structure, the final set of color variables for the target layout block is calculated, including the following process: Starting from the target layout block, traverse all ancestor layout blocks of the target layout block from bottom to top; Collect all color variables defined in the color scheme of the target layout block and its association with ancestor layout blocks; Following the order from child to parent, color variables with the same name are overwritten to generate the final set of effective color variables.
[0011] Preferably, color variables with the same name are overridden in order from child to parent, including the following process: Each obtained color variable is merged with a preset set of temporary variables, which is initially empty. During the merging process, if the current variable name already exists in the temporary variable set, the original value in the set will be overwritten by the variable value obtained at the current level. The color variables in the temporary variable set are overwritten multiple times in order from the most parent to the most child.
[0012] Preferably, step S4 includes the following steps: Based on the set of color variables, each color variable in the set of color variables is set as a custom CSS property onto the document object model node corresponding to the target layout block through the document object model operation interface. When defining styles, all child components within the target layout block reference CSS custom properties set on the document object model node corresponding to the target layout block; when the value of the CSS custom property is set or updated, the styles of all child components referencing that CSS custom property will be automatically recalculated and updated.
[0013] A layout block color configuration system for a zero-code visual building platform, the system comprising sequentially connected data: The color scheme management module is used to create and persistently store at least one color scheme. The drag-and-drop interaction module visualizes the list of stored color schemes in the set no-code platform designer interface, responds to the user's drag-and-drop operation on the target color scheme in the list, and identifies the target layout block in the canvas corresponding to the drag-and-release operation. The style calculation engine module establishes the association between the target color scheme and the target layout block, and records the association in the metadata of the DMO node of the target layout block. Based on the association and the hierarchical position of the target layout block in the layout structure, it calculates the final set of color variables for the target layout block. The real-time rendering engine module sets each color variable in the color variable set as a custom CSS property on the document object model node corresponding to the target layout block. Based on the updated custom CSS property, it re-renders the visual effects of the target layout block and all its child components that reference the property in real time.
[0014] Preferably, the drag-and-drop interaction processing module further includes a visual feedback unit and a drop determination unit; The visual feedback unit is used to generate and display a preview ghost image of the scheme that follows the cursor movement during the user's dragging of the target color scheme, and to highlight the boundary of any layout block when the ghost image moves above it. The deployment determination unit is used to respond to the user's drag-and-release operation on the target layout block, generate a color scheme application instruction, and send it to the style calculation engine module.
[0015] The beneficial effects of this invention are as follows: This invention applies color schemes directly as draggable visual objects to layout blocks, transforming the traditional abstract property panel configuration into an intuitive WYSIWYG operation, significantly lowering the user threshold and greatly improving configuration efficiency. Simultaneously, by establishing independent CSS variable scopes for each layout block, it enables the parallel application and isolation of multiple color schemes across multiple areas within a page in a zero-code environment, breaking through the coarse-grained limitations of global style management. Furthermore, a style inheritance and overriding mechanism based on a clear algorithm is constructed, which can automatically calculate the final style according to the block hierarchy and the rule of child overriding parent. This makes the color management of nested structures clear, predictable, and highly flexible, solving the pain points of chaotic inheritance and difficult maintenance of complex interface styles in traditional technical solutions, and improving the maintainability and design consistency of the project. Attached Figure Description
[0016] To facilitate understanding by those skilled in the art, the present invention will be further described below with reference to the accompanying drawings.
[0017] Figure 1 This is a flowchart of the method steps of the present invention; Figure 2 This is a schematic diagram of the system structure of the present invention. Detailed Implementation
[0018] To further illustrate the technical means and effects of the present invention in achieving its intended purpose, the following detailed description of the specific implementation methods, structures, features, and effects of the present invention, in conjunction with the accompanying drawings and preferred embodiments, is provided.
[0019] Please see Figure 1 This embodiment provides a method for configuring the layout block colors of a zero-code visual building platform. The method includes the following steps: S1: Responding to user actions on the color management interface, create and store at least one color scheme, specifically including the following sub-steps: S11: Define the data structure for the color scheme. The data structure consists of a unique identifier for the color scheme, the scheme name, and a mapping table for storing key-value pairs of color variables. Each key-value pair is used to define a color variable. The key-value pair of color variables uses the CSS custom property name (such as --primary-color) as the key and the standard color value (such as #1890ff) as the value. S12: Receive user operations according to the color scheme management interface. The user operations include creating, editing, copying and deleting color schemes. The user operations also include configuring color key-value pairs one by one through the graphical color picker, and then defining color variable key-value pairs based on the user operations. S13: After serializing the color scheme determined by the user operation, a list of color schemes that can be queried is established, and the list of color schemes is persistently saved by calling the storage interface, which includes a database, front-end local storage or cloud file storage server. S2: In the designer interface of the no-code platform, the stored color schemes are displayed as a visual list, responding to the user's drag operation on the target color scheme, and releasing the drag operation to the target layout block in the canvas. S2 includes the following sub-steps: S21: Based on the color scheme list, generate an interactive list view component in the zero-code designer interface, wherein the component has a pre-built drag event listener for the color scheme identifier. S22: When the drag start event is triggered, the drag event listener obtains the color scheme identifier associated with the event target and the preview data, and generates a semi-transparent preview ghost image that follows the cursor movement to provide the user with clear visual feedback on dragging. S23: During a drag-and-drop event, display a preview ghost image of the target color scheme that follows the cursor movement; S24: When the user drags the ghost image across the canvas, the system calculates the layout block below the cursor position in real time. When the preview ghost image moves above the layout block in the canvas, the boundary of the layout block is highlighted, indicating that this layout block is a valid target. When a valid layout block is detected, modify the CSS style of the rendering layer element corresponding to the valid layout block, and add visual identifiers (such as badges) to the layout blocks with applied color schemes in the canvas, and highlight them with specific boundary colors so that users can easily identify which blocks have deviated from the parent's default color scheme. When a drag-and-release event occurs within the rendering area of the target layout block node, the process of applying the color scheme identifier carried by the current drag session to the target layout block is triggered. S3: Establish the association between the target color scheme and the target layout block, and calculate the set of color variables that the target layout block will ultimately take effect based on the association and the hierarchical position of the target layout block in the layout structure; The drag-and-release event is parsed, the target layout block node is confirmed through the final hit detection, and the color scheme identifier in the current drag-and-drop session is written into the metadata storage area of the target layout block node. The unique identifier of the target layout block is associated with the unique identifier of the target color scheme. Calculating the set of color variables involves the following process: A: Starting from the target layout block, traverse all ancestor layout blocks of the target layout block from bottom to top; B: Collect all color variables defined in the color scheme of the target layout block and its association with ancestor layout blocks; C: Following the order from child to parent, color variables with the same name are overwritten to generate the final set of effective color variables; In a preferred implementation, in step C of S3, a child-to-parent traversal is adopted, and when a conflict is encountered, the child variable overrides the parent variable. Specifically, an initially empty temporary variable set is created to store the color variables in the current layer calculation process. Starting from the target layout block, traverse all ancestor layout blocks of the target layout block from bottom to top. For each ancestor layout block encountered, perform the following process: Retrieves all color variable key-value pairs defined in the color scheme that are related to the traversed layout blocks; Each obtained color variable key-value pair is merged with the temporary variable set; During the merging process, if the current variable name already exists in the temporary variable set, the variable value obtained at the current level will overwrite the original value in the historical variable set. After the traversal is complete, the color variables in the temporary variable set have undergone multiple overwrite processes in order from the most parent to the most child. The contents of the temporary variable set are used as the final set of color variables to be output; The intuitive way to achieve child-to-parent traversal and allow child variables to override parent variables when conflicts are encountered is to start from the target block (the focus of the problem), apply its own style first, and then query the styles of ancestors level by level. When a conflict is encountered, the current level's style overrides the collected style. The final result naturally conforms to the child priority rule.
[0020] In another preferred implementation, in step C of S3, a list is constructed first, and then traversed from parent to child. However, the later traversed (more child level) overwrites the earlier traversed (more parent level). Specifically, by initializing an ordered list, each layout block and its bound color scheme reference are added to the list in the hierarchical order from the target layout block to the root ancestor block. Starting from the end of the list (most parent level) and traversing backwards (towards the most child level), for each layout block encountered, add the variables of its color scheme to a dictionary, where: Variable names are used as keys in a dictionary; The variable value is used as a value in the dictionary; If a key with the same name is encountered, the new value will overwrite the old value; After completing the entire traversal, the contents stored in the dictionary constitute the final set of color variables that take effect.
[0021] By first constructing an ordered list from child to parent, the two steps of resolving hierarchical relationships and merging variables are separated. The subsequent traversal calculation process (from parent to child or from child to parent) can be optimized more flexibly.
[0022] Both traversal processes described above can better handle nested structures of arbitrary depth, ensuring that the color variables of all ancestor blocks are included in the calculation without omission. This establishes clear style inheritance and overriding; child blocks inherit the color scheme of their parent blocks by default, while also supporting independent configuration of blocks at any level. This solves the problem of chaotic style management in complex nested layouts. Designers and developers can accurately predict the final effect of applying a color scheme at any nesting level. When adjustments are needed, the source of the style can be quickly located based on clear rules, significantly reducing the time required for problem tracing and fixing. S4: Set the calculated final set of effective color variables as custom CSS properties on the Document Object Model (DOM) node corresponding to the target layout block. This allows the target layout block and its internal child components to update and render in real time according to the custom CSS properties, completing the update of the style scope within the target layout block. The DOM is a standard programming interface used to represent and manipulate the structure of HTML or XML documents. The Document Object Model node is the specific component unit in this model. S4 includes the following sub-steps: S41: DOM node variable setting: Based on the calculated final set of color variables, set each color variable in the set as a custom CSS property to the document object model node corresponding to the target layout block through the document object model operation interface; Specifically, the key of each color variable is used as the CSS custom property name, and the corresponding value is used as the CSS custom property value. This is done through the style.setProperty() method of the document object model node or by directly setting the custom property in the style property.
[0023] S42: Sub-component style referencing and updating: When defining styles, all sub-components within the target layout block reference CSS custom properties set on the document object model node of that layout block; when the value of the CSS custom property is set or updated, the styles of all sub-components referencing that CSS custom property will be automatically recalculated and updated; This is achieved through the responsive update mechanism of the CSS engine. When the value of a custom CSS property changes, the browser automatically recalculates all CSS rules that reference that property and updates the styles of the affected elements. S43: Real-time browser rendering: The browser rendering engine immediately re-renders the user interface based on the updated document object model style, allowing users to observe the final visual effect of the color scheme application in real time without manually refreshing.
[0024] By dynamically attaching CSS custom properties (CSS Variables) to the DOM nodes corresponding to specific layout blocks, an independent style scope is created for each block, enabling the parallel coexistence and isolation of multiple color schemes within the page, breaking through the limitation of traditional no-code platforms that can only apply global pages or themes.
[0025] S5: Implement dynamic update response. When any stored color scheme is detected to be modified, find all layout blocks that are related to the modified color scheme, and re-execute S3-S4 for the found layout blocks.
[0026] Please participate Figure 2 This embodiment provides a layout block color configuration system for a zero-code visual building platform. The system is integrated into the zero-code visual building platform and initializes when the user opens the page designer. The system includes a color scheme management module, a drag-and-drop interaction processing module, a style calculation engine module, and a real-time rendering engine module, which are connected in sequence. These modules work together to form a visual environment that supports block-level color configuration. The functions of each module are implemented as follows: The color scheme management module provides a color scheme management interface, allowing users to intuitively define and edit a color scheme using tools such as color pickers and color swatches. Each color scheme corresponds to a data structure, which includes a unique identifier for the color scheme, the scheme name, and a mapping table for storing key-value pairs of color variables. Users can perform operations such as creating, editing, copying, and deleting. All created color schemes are serialized and stored in the database, front-end local storage, or cloud file storage server, generating a list of color schemes that can be called later.
[0027] The drag-and-drop interaction module visually displays a list of stored color schemes in the no-code platform designer interface, responds to user drag-and-drop operations on target color schemes in the list, and identifies the target layout block in the canvas corresponding to the drag-and-release operation. The layout blocks in the canvas have a scope isolation mechanism for setting their block styles. Each layout block is an independent scope, which is achieved by setting custom CSS properties (i.e., CSS Variables) directly on its corresponding document object model node, ensuring that the color schemes corresponding to each layout block do not interfere with each other. The drag-and-drop interaction processing module also includes a visual feedback unit and a drop determination unit; The visual feedback unit is used to generate and display a preview ghost image of the scheme that follows the cursor movement during the user's dragging of the target color scheme, and to highlight the boundary of any layout block when the ghost image moves above it. The application determination unit is used to respond to the user's drag-and-release operation on the target layout block, generate a color scheme application instruction, and send it to the style calculation engine module. The style calculation engine module is used to bind the unique identifier of the DOM node of the layout block with the unique identifier of the color scheme, establish the association between the target color scheme and the target layout block, and record the association in the metadata of the DOM node of the target layout block. The built-in style calculation engine parses the inheritance logic according to the hierarchical relationship. Specifically, it calculates the final set of color variables for the target layout block based on the association and the hierarchical position of the target layout block in the layout structure. The real-time rendering engine module sets each color variable in the color variable set as a custom CSS property to the document object model node corresponding to the target layout block. Based on the updated custom CSS property, it re-renders the visual effects of the target layout block and all its child components that reference the property in real time. The built-in browser rendering engine immediately re-renders the user interface according to the updated document object model, binding the color scheme to specific DOM nodes to create a scope. After the user releases the mouse, they can instantly see the overall visual effect of the color scheme applied on the canvas, achieving seamless and real-time visual feedback and completely eliminating the operational burden of switching back and forth between the property panel and the canvas preview.
[0028] The method and system proposed in this application treat color schemes as draggable visual objects. Users can apply a complete color scheme to target blocks in batches through the intuitive and natural interaction of dragging and releasing. This transforms the abstract configuration that previously required a property panel into an intuitive and direct visual operation, lowering the barrier to entry for non-professional users, improving the efficiency of color matching operations, and embodying the zero-code and WYSIWYG design philosophy of this application. Existing technologies are typically limited by global or page-level themes, making it difficult for a single page to accommodate multiple visual styles. This invention utilizes custom CSS properties to dynamically bind color variables to the corresponding DOM nodes of each layout block, thereby creating an independent style scope for each block; By resolving style hierarchies through defined rules for child elements overriding their parents, the default inheritance and active overriding behavior of nested blocks becomes transparent, predictable, and easily controllable. Users can achieve flexible configuration without understanding complex CSS cascading rules, while ensuring intelligent response of child block styles and stable maintenance of independent block styles when the parent scheme is modified. This solves the problem of difficult maintenance of complex interface styles and reduces the maintenance costs of style adjustments and problem tracing.
[0029] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Although the present invention has been disclosed above with reference to preferred embodiments, it is not intended to limit the present invention. Any person skilled in the art can make some modifications or alterations to the above-disclosed technical content to create equivalent embodiments without departing from the scope of the present invention. Any simple modifications, equivalent changes and alterations made to the above embodiments based on the technical essence of the present invention without departing from the scope of the present invention shall still fall within the scope of the present invention.
Claims
1. A method for configuring layout block colors in a zero-code visual building platform, characterized in that: The method includes the following steps: S1: Respond to user actions in the color management interface, create and store at least one color scheme; S2: In the designer interface of the no-code platform, the stored color schemes are displayed as a visual list; Respond to the user's drag operation on the target color scheme and release the drag operation onto the target layout block in the canvas; S3: Establish the association between the target color scheme and the target layout block, and calculate the set of color variables that the target layout block will ultimately take effect based on the association and the hierarchical position of the target layout block in the layout structure; S4: Set the calculated final set of color variables as the CSS custom property on the document object model node corresponding to the target layout block, so that the target layout block and its internal sub-components are updated and rendered in real time according to the CSS custom property, thus completing the update of the style scope within the target layout block.
2. The layout block color configuration method for a zero-code visual building platform according to claim 1, characterized in that: It also includes S5, which includes: when it is detected that any stored color scheme has been modified, searching for all layout blocks that are associated with the modified color scheme, and re-executing S3-S4 for the found layout blocks.
3. The layout block color configuration method for a zero-code visual building platform according to claim 1, characterized in that: S1 includes the following sub-steps: S11: Define the data structure for the color scheme. The data structure consists of a unique identifier for the color scheme, a scheme name, and a mapping table for storing key-value pairs of color variables. Each key-value pair is used to define a color variable. The key-value pairs of color variables use CSS custom property names as keys and standard color values as values. S12: Receive user operations according to the color scheme management interface, and define color variable key-value pairs based on the user operations, including creating, editing, copying and deleting color schemes; S13: After serializing the color scheme determined by the user operation, a list of color schemes that can be queried is established, and the list of color schemes is persistently saved by calling the storage interface.
4. The layout block color configuration method for a zero-code visual building platform according to claim 1, characterized in that: S2 includes the following sub-steps: S21: Based on the color scheme list, generate an interactive list view component in the zero-code designer interface, wherein the component has a pre-built drag event listener for the color scheme identifier. S22: When the drag start event is triggered, the drag event listener obtains the color scheme identifier associated with the event target and the preview data, and creates a temporary preview image; S23: During a drag-and-drop event, display a preview ghost image of the target color scheme that follows the cursor movement; S24: When the preview ghost image moves above a layout block in the canvas, the boundary of the layout block is highlighted.
5. The layout block color configuration method for a zero-code visual building platform according to claim 1, characterized in that: In S3, the association between the target color scheme and the target layout block is established, including the following process: The drag-and-release event is parsed, the target layout block node is confirmed through the final hit detection, and the color scheme identifier in the current drag-and-drop session is written into the metadata storage area of the target layout block node. The unique identifier of the target layout block is associated with the unique identifier of the target color scheme.
6. The layout block color configuration method for a zero-code visual building platform according to claim 5, characterized in that: In S3, based on the association relationship and the hierarchical position of the target layout block in the layout structure, the final set of color variables for the target layout block is calculated, including the following process: Starting from the target layout block, traverse all ancestor layout blocks of the target layout block from bottom to top; Collect all color variables defined in the color scheme of the target layout block and its association with ancestor layout blocks; Following the order from child to parent, color variables with the same name are overwritten to generate the final set of effective color variables.
7. The layout block color configuration method for a zero-code visual building platform according to claim 6, characterized in that: Color variables with the same name are overwritten in order from child to parent. The process includes the following: Each obtained color variable is merged with a preset set of temporary variables, which is initially empty. During the merging process, if the current variable name already exists in the temporary variable set, the original value in the set will be overwritten by the variable value obtained at the current level. The color variables in the temporary variable set are overwritten multiple times in order from the most parent to the most child.
8. The layout block color configuration method for a zero-code visual building platform according to claim 1, characterized in that: S4 includes the following steps: Based on the set of color variables, each color variable in the set of color variables is set as a custom CSS property onto the document object model node corresponding to the target layout block through the document object model operation interface. When defining styles, all child components within the target layout block reference CSS custom properties set on the document object model node corresponding to the target layout block; when the value of the CSS custom property is set or updated, the styles of all child components referencing that CSS custom property will be automatically recalculated and updated.
9. A layout block color configuration system for a zero-code visual building platform, applicable to the layout block color configuration method for a zero-code visual building platform as described in any one of claims 1-8, characterized in that: The system includes the following data connections in sequence: The color scheme management module is used to create and persistently store at least one color scheme. The drag-and-drop interaction module visualizes the list of stored color schemes in the set no-code platform designer interface, responds to the user's drag-and-drop operation on the target color scheme in the list, and identifies the target layout block in the canvas corresponding to the drag-and-release operation. The style calculation engine module establishes the association between the target color scheme and the target layout block, and records the association in the metadata of the DMO node of the target layout block. Based on the association and the hierarchical position of the target layout block in the layout structure, it calculates the final set of color variables for the target layout block. The real-time rendering engine module sets each color variable in the color variable set as a custom CSS property on the document object model node corresponding to the target layout block. Based on the updated custom CSS property, it re-renders the visual effects of the target layout block and all its child components that reference the property in real time.
10. The layout block color configuration system for a zero-code visual building platform according to claim 9, characterized in that: The drag-and-drop interaction processing module also includes a visual feedback unit and a drop determination unit; The visual feedback unit is used to generate and display a preview ghost image of the scheme that follows the cursor movement during the user's dragging of the target color scheme, and to highlight the boundary of any layout block when the ghost image moves above it. The deployment determination unit is used to respond to the user's drag-and-release operation on the target layout block, generate a color scheme application instruction, and send it to the style calculation engine module.