A style conflict detection and isolation method and system for a low-code platform

Abstract

The application relates to the technical field of Web front-end engineering, and discloses a style conflict detection and isolation method and system for a low-code platform, which comprises the following steps: collecting style resources and analyzing style rules for a visual component, marking the source component identifier for each rule to build a global style analysis structure; continuously monitoring the components in a canvas, positioning the affected element set according to changes, determining the final effective style rule for the elements and target style attributes thereof; determining whether a style conflict exists by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; automatically selecting a final execution strategy from a plurality of preset style isolation strategies according to the current running environment and the component characteristics; updating rendering by applying the isolation result, and visually presenting the conflict position, details and repair operation entrance in the platform interface; and the above method is used for solving the style conflict of a low-code component and automatically guarding the interface consistency.

Description

Technical Field

[0001] This invention relates to the field of Web front-end engineering technology, and in particular to a method and system for style conflict detection and isolation for low-code platforms. Background Technology

[0002] With the rapid popularization of low-code / no-code development models, quickly assembling application interfaces through graphical drag-and-drop and configuring pre-built visual components has become a mainstream paradigm for improving front-end development efficiency. The core advantage of such platforms lies in their high reusability and agility, allowing developers or business personnel to dynamically combine components with independent functions and visual presentations developed from different teams and at different times into the same page or application at runtime.

[0003] However, this flexible, component-based dynamic composition pattern also introduces complex style cascading conflicts. Each visual component typically carries its own style definition (such as CSS). When multiple components are integrated into the same document environment, their style rules will act together on the DOM tree in the browser according to cascading rules. Common conflicts in this process include: 1) Selector weight override: A highly specific selector rule within a component may unintentionally override style declarations for the same element in other components; 2) Global style pollution: Unrestricted global selectors in a component (such as wildcards * or tag selectors) may leak and affect other areas of the page; 3) Inheritance chain interference: Inherited style properties (such as color, font-family) may propagate down the DOM tree, leading to unintended visual effects across components; 4) Conditional conflicts: Style rules that rely on media queries (@media), container queries, or feature support queries (@supports) may trigger under different layout conditions or environments, causing uncertain override behavior. These problems can range from minor UI misalignment and visual inconsistencies to serious impacts on interactive functionality, severely reducing the quality and reliability of applications generated by low-code platforms.

[0004] Existing technical solutions have significant shortcomings in addressing the aforementioned issues. First, manual review and debugging are inefficient and virtually impractical in scenarios involving massive dynamic combinations. Second, relying on naming conventions makes it difficult to guarantee consistency when introducing third-party components or performing dynamic ad-hoc composition. Third, static analysis tools during the build phase cannot capture and resolve real-time conflicts caused by drag-and-drop and configuration behaviors at runtime. Furthermore, while mandatory Shadow DOM encapsulation can achieve strong isolation, it often abruptly severs the connection between components and the global design system and theme variables, sacrificing customization flexibility and some browser compatibility. While a single CSS-in-JS runtime solution can provide local scope, it typically lacks the ability to trace the original source of rules, fails to provide a clear chain of conflict evidence, and struggles to support precise, minimal-repair governance strategies.

[0005] Therefore, there is a lack of an integrated solution capable of real-time, accurate detection of component-level style conflicts in a low-code platform runtime environment, intelligent and adaptive isolation based on conflict context and platform constraints, and providing visual and interpretable feedback. This has become a key technical bottleneck restricting further improvements in the reliability and maintainability of low-code platforms in large and complex projects. Summary of the Invention

[0006] The purpose of this invention is to address the shortcomings of the existing technology by providing a visual component-level style conflict detection and isolation method and system for low-code platforms. By constructing a rule source mapping, real-time conflict determination, and multi-strategy adaptive isolation, this invention aims to solve the style pollution problem and improve development efficiency and interface reliability.

[0007] On the one hand, this invention provides a style conflict detection and isolation method for low-code platforms, comprising the following steps: S1: Collect style resources for the visual components loaded onto the canvas and parse them into structured style rules. Mark the source component identifier for each rule to build a global style analysis structure that reflects the mapping relationship between rules and component sources. S2: Continuously monitor changes in the structure, properties, or styles of components in the canvas, locate the affected set of elements based on the changes, and determine the final effective style rules for the elements in the affected set and their target style properties. S3: Determine whether there is a style conflict by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; S4: Based on the current operating environment and component characteristics, automatically select the final execution strategy from multiple preset style isolation strategies to resolve conflicts; S5: Apply the isolation results to update the rendering and visually present the conflict location, details, and repair operation entry in the platform interface.

[0008] Furthermore, in step S1, the construction of the global style analysis structure specifically includes: Parse the style definition resources associated with the component, and for each style rule obtained from the parsing, calculate its selector weight, determine whether it contains an importance boosting flag, determine its style cascade level, and record its source category and definition order. The calculated information is associated with the rule content and the source component identifier of the rule, and stored together in the global style analysis structure; Create an inverted index from style attributes to the rules that contain those attributes.

[0009] Furthermore, in step S2, determining the final effective style rule specifically includes: Construct a comprehensive priority vector for each candidate rule. ,in, This is the hierarchy priority value determined according to the style cascading mechanism. A Boolean value or priority number indicating whether an importance enhancement flag is included. The calculated selector weight values, The weight value assigned based on the style source category. Numerical values ​​reflecting the order in which the rules were defined; According to the priority vector The rules are compared lexicographically based on the preset priority order of each dimension, and the rule with the highest ranking is determined as the final effective rule.

[0010] Furthermore, in step S4, the various preset style isolation strategies include at least: When the component supports it and the environment allows it, the component is encapsulated in an independent style encapsulation container to achieve style isolation; The style cascading mechanism is used to create independent style hierarchies for components, and rule overriding relationships are managed by adjusting the hierarchical order. Abstract syntax based on style definition represents the scope overriding of component styles, limiting their scope of influence by adding scope qualifiers; For scenarios with extreme compatibility or security restrictions, only the conflicting attributes are bounded overridden.

[0011] Preferably, the scope rewriting of component styles based on the abstract syntax representation of style definitions includes: Parse the component's original style definition text into an abstract syntax tree; Traverse the syntax tree and add a scope wrapper prefix to all rule selectors. This prefix is ​​designed to add little or no selector weight. Rename the global naming rules in the style definition and update all references synchronously; The processed syntax tree is reserialized into style text and injected into the document, while the corresponding scope flag is activated on the component root element.

[0012] Further, in step S4, the implementation of automatically selecting the final execution strategy employs a strategy decision algorithm, including: Calculate an evaluation vector for each candidate isolation strategy ,in, Given the current level of technical support for this strategy, The style isolation strength of this strategy, To preserve the ability of this strategy to link the global theme and external styles, Consider the performance overhead and implementation complexity of this strategy; Based on the preset weight configuration, the evaluation vector is weighted and summed in each dimension to obtain the comprehensive score of each strategy; Choose the strategy with the highest overall score as the current execution strategy.

[0013] Preferably, when the style definition resource originates from a preprocessor, the construction step further includes: During the build or loading phase, obtain and associate the processed style code with the corresponding source code mapping information; When parsing style rules, the source code mapping information is used to map the rule location back to the original source code location and context of the preprocessor; The original source code information is stored as part of the rule source metadata.

[0014] Furthermore, in step S2, the monitoring employs an incremental detection mechanism, specifically including: By listening for document structure changes through the DOM change listening interface, the changed nodes and their affected subtrees are marked as the set to be detected; The determination step only applies to elements in this set, and uses the inverted index to perform local style recalculation and conflict determination.

[0015] On the other hand, the present invention provides a style conflict detection and isolation system for low-code platforms, comprising: The style analysis building module is used to collect style resources for the visual components loaded onto the canvas and parse them into structured style rules. It marks the source component identifier for each rule to build a global style analysis structure that reflects the mapping relationship between rules and component sources. The change monitoring and location module is used to continuously monitor changes in the structure, attributes, or styles of components in the canvas, locate the set of elements affected by the change, and determine the final effective style rules for the elements in the affected set and their target style attributes. The conflict determination module is used to determine whether there is a style conflict by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; The isolation strategy decision and execution module is used to automatically select the final execution strategy from a variety of preset style isolation strategies based on the current operating environment and component characteristics in order to resolve conflicts; The visualization feedback and rendering update module is used to update the rendering of the application isolation results and visually present the conflict location, details, and repair operation entry in the platform interface.

[0016] In addition, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the style conflict detection and isolation method for low-code platforms described above.

[0017] Meanwhile, an electronic device is provided, comprising: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the style conflict detection and isolation method for low-code platforms as described above.

[0018] Compared with the prior art, the beneficial effects of the present invention are: (1) By constructing a global style analysis structure that includes rule source mapping and continuously monitoring canvas changes to locate affected elements, this invention can instantly discover potential style conflicts during the real-time operation of users dragging and configuring components, changing the traditional passive mode that relies on manual investigation after the fact. (2) The core of the conflict determination of the present invention lies in comparing the source component identifier of the effective rule with the main component identifier of the element, so that each style overlay can be accurately traced back to the source component, clarifying the relationship of rights and responsibilities, and providing a reliable chain of evidence for the accurate location and repair of the problem; (3) In response to the detected conflict, the present invention automatically selects the optimal solution from a variety of preset strategies based on the current operating environment and component characteristics. This context-aware adaptive capability ensures that while achieving effective isolation, it can take into account browser compatibility, linkage with the global theme and performance overhead to the greatest extent. (4) This invention presents the detection results and application feedback in a visual way on the platform interface, including highlighting the conflict location, displaying the conflict details and providing a one-click repair entry, transforming the complex style overlay problem into a visual interactive operation; Attached Figure Description

[0019] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings: Figure 1 This is a flowchart of a style conflict detection and isolation method for low-code platforms according to the present invention. Figure 2 This is a schematic diagram of a CSS analysis tree and conflict determination method according to the present invention; Figure 3 This is a flowchart of a selector scope rewriting method based on AST according to the present invention; Figure 4 This invention provides a visual flowchart for conflict reporting and remediation. Detailed Implementation

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

[0021] The specific embodiments of the present invention will be described below with reference to the accompanying drawings and examples. Example 1

[0022] This embodiment selects a runtime scenario where users drag and drop and configure components to construct a global CSS analysis tree that records the source of rules and overlay information; performs real-time conflict detection on the affected element set; adaptively selects from multiple isolation strategies based on component capabilities and platform environment (Shadow DOM, @layer layering, AST-based selector scope rewriting, and minimized inline repair); and provides one-click repair and evidence display through a visual report.

[0023] The core components of this embodiment include: a CSS analyzer, a real-time conflict detection engine, an intelligent isolation strategy executor, a visualization reporting module, and a performance and security adaptation layer (MutationObserver incremental detection, CSP / cross-domain fallback, and Constructable StyleSheet channel).

[0024] Specific implementation methods are as follows: Figure 1 The technical solution for style conflict detection and isolation methods for low-code platforms provided in this embodiment includes the following steps: S1: Collect style resources for the visual components loaded onto the canvas and parse them into structured style rules. Mark the source component identifier for each rule to build a global style analysis structure that reflects the mapping relationship between rules and component sources. S2: Continuously monitor changes in the structure, properties, or styles of components in the canvas, locate the affected set of elements based on the changes, and determine the final effective style rules for the elements in the affected set and their target style properties. S3: Determine whether there is a style conflict by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; S4: Based on the current operating environment and component characteristics, automatically select the final execution strategy from multiple preset style isolation strategies to resolve conflicts; S5: Apply the isolation results to update the rendering and visually present the conflict location, details, and repair operation entry in the platform interface.

[0025] Before performing component loading and resource collection in step S1, system initialization is performed, including: The platform constructs a CSS analyzer, a real-time conflict detection engine, an isolation strategy executor, a reporting module, and an adaptation layer. Each component is assigned a component identifier (componentId) by the platform, and the platform maintains a master-owner mapping from elements to components, with at least one implementation of: (a) the component root element's data-component-id tag; (b) the platform's render tree / virtual DOM mapping; or (c) the Shadow DOM / iframe boundary.

[0026] Next, in step S1, the construction of the global style analysis structure specifically includes: S11: Parse the style definition resources associated with the component. For each style rule obtained from the parsing, calculate its selector weight, determine whether it contains an importance boosting flag, determine its style cascade level, and record its source category and definition order. S12: Associate the calculated information with the rule content and the source component identifier of the rule, and store them together in the global style analysis structure; S13: Create an inverted index from style attributes to the rules that contain those attributes.

[0027] In this embodiment, we parse the unique component identifier `componentId`, collect all style resources, including HTML inline styles, external CSS files, and stereotyped style sheets, and then construct the mapping relationship between components and styles. We parse the CSS to obtain the rule entries: selector, declaration set, specificity, whether it is !important, cascading layer (@layer), source category (UA / user / author), condition (@media / @supports / container query), definition order, and originComponentId.

[0028] This forms a global CSS analysis tree (or rule index) with a "rule-source mapping", and an inverted index of "property → rule" is created.

[0029] When the style definition resource originates from a preprocessor, the construction step further includes: During the build or loading phase, obtain and associate the processed style code with the corresponding source code mapping information; When parsing style rules, the source code mapping information is used to map the rule location back to the original source code location and context of the preprocessor; The original source code information is stored as part of the rule source metadata.

[0030] In this embodiment, if a preprocessor such as Sass / Less exists, the platform generates a Source Map for each component style during the build phase and loads the compiled CSS and corresponding mapping at runtime. When constructing rule entries, the CSS analyzer uses the Source Map to look up the original Sass / Less file path, line number, and mixin / placeholder selector information of the rule in the compiled CSS, and uses this to fill in the source metadata containing fields such as sourceFile and sourceLine, so that conflict reports can directly locate the original preprocessor source code so that developers can modify it.

[0031] Before determining the set of affected elements in step S2, we perform cyclic monitoring and maintenance of the system. This monitoring employs an incremental detection mechanism, specifically including: By listening for document structure changes through the DOM change listening interface, the changed nodes and their affected subtrees are marked as the set to be detected; The determination step only applies to elements in this set, and uses the inverted index to perform local style recalculation and conflict determination.

[0032] Based on the monitoring results, including changes in the structure, properties, or styles of components in the canvas, the set of affected elements in step S2 is determined. A "dirty set" is maintained using MutationObserver and platform event subscriptions (addition / movement / hierarchy / property changes) to identify the affected element subtrees and their ancestors / descendants. Under CSP / cross-domain restrictions, CSS text is preferentially obtained through platform proxies; restricted stylesheets employ conservative judgment and hints. In step S2, the specific style rules that ultimately take effect include: Construct a comprehensive priority vector for each candidate rule. ,in, This is the hierarchy priority value determined according to the style cascading mechanism. A Boolean value or priority number indicating whether an importance enhancement flag is included. The calculated selector weight values, The weight value assigned based on the style source category. Numerical values ​​reflecting the order in which the rules were defined; According to the priority vector The rules are compared lexicographically based on the preset priority order of each dimension, and the rule with the highest ranking is determined as the final effective rule.

[0033] In this embodiment, the CSS analysis tree and conflict determination are as follows: Figure 2 As shown.

[0034] First, a rule scoring vector is constructed, calculating a comprehensive score for each CSS rule. Considering the five key factors mentioned above, for each target attribute of the affected element, the cascading rules are comprehensively considered: @layer order, !important, specificity, source category, and definition order, resulting in the final effective rule and all candidate rules. Each component corresponds to the cascading hierarchy, whether it contains !important, selector specificity, source category, and definition order, respectively. In the subsequent cascading sorting stage, a lexicographical comparison is performed according to R to determine the winning rule. Here, the layer priority represents the hierarchical relationship defined by @layer, the importance indicator indicates whether it contains !important, the selector weight represents the selector's specificity score, the source category includes user agent / user / author stylesheets, and the definition order indicates its position in the stylesheet.

[0035] Secondly, there is condition filtering, which filters out the rules that are actually effective in the current environment, including: checking whether the media query conditions match, verifying that the features support the query results, confirming that the pseudo-class and pseudo-element states match, and removing rules that do not meet the conditions.

[0036] Next, the cascading sort and winner determination are performed, sorted according to CSS cascading rules, including: comparing the lexicographical order of the score vector, determining the highest priority rule that will take effect, and the rule that will control the display effect of the target property.

[0037] Finally, step S3 is the conflict determination. The core checking logic is as follows: (1) Compare the source component of the effective rule with the main component of the element; (2) If the source is inconsistent, it is determined to be a style conflict; (3) Record the conflicting attributes, overriding rules, overridden rules and conflict type. When the originComponentId of the final effective rule is inconsistent with the ID of the main component of the element, it is recorded as a conflict; the conflict types include: weight overriding, global pollution, inheritance chain interference, and conditional conflict (overriding caused by difference in condition hit).

[0038] The output includes conflict-free and conflict-prone results. If there are no conflicts, the normal rendering process continues; if there are conflicts, a detailed conflict report is generated to provide a basis for automatic repair. For CSS variable (custom properties) conflicts, the inheritance path is identified and breakpoint locations are recorded; for keyframe / animation names and global namespaces such as @font-face, name conflicts are detected.

[0039] Based on the obtained conflict determination results, step S4 involves making and executing an intelligent isolation strategy. The various preset isolation strategies include at least: Strategy A: When the component supports it and the environment allows it, encapsulate the component into an independent style encapsulation container to achieve style isolation; Strategy B: Utilize the style cascading mechanism to create an independent style hierarchy for components, and manage rule overriding relationships by adjusting the hierarchy order; Strategy C: Based on the abstract syntax representation of style definitions, the scope of component styles is overridden, and the scope of influence is limited by adding scope qualifiers; Strategy D: For scenarios with extreme compatibility or security restrictions, only bounded coverage is applied to conflicting attributes.

[0040] In this embodiment, the strategy determination order (configurable) is as follows: A. Shadow DOM encapsulation (prioritized when available): attachShadow and migrate DOM and styles; detect and report external impacts through ::part / ::slotted; B. @layer layering: allocate independent layers for components and adjust the layer order to resolve overlap when necessary, while preserving theme coverage channels; C. AST-based scope rewriting: generate a unique scope class (e.g., ._scope_x) for components, rewrite selectors with :where(._scope_x) as a prefix to achieve zero specificity constraint, support @keyframes renaming and reference synchronization, vendor prefix auto-completion and feature degradation; inject the scope class into the root element; D. Minimize inline repair: only perform bounded coverage on conflicting attributes (for extreme compatibility or security restriction scenarios).

[0041] When selecting a strategy, priority is given to (1) whether the component is a custom element or independent module area that can be encapsulated, (2) the number and importance of the theme variables / design tokens exposed by the component, (3) the support of the runtime environment for Shadow DOM, Constructable StyleSheet and @layer, and (4) the platform CSP and cross-domain constraints. A decision table is constructed based on these dimensions: when the component is completely independent and the runtime environment natively supports Shadow DOM and there is no CSP blocking, strategy A is preferred; when the component needs to be linked with the global theme and the browser supports @layer, strategy B is preferred; when there are old browsers or it needs to be deeply bound to preprocessor products, strategy C is preferred; only when the aforementioned capabilities are limited or the scope of conflict is extremely localized, does it degenerate into strategy D, thereby achieving adaptive strategy switching at runtime.

[0042] Specifically, the abstract syntax representation based on style definition for scope rewriting of component styles includes: Parse the component's original style definition text into an abstract syntax tree; Traverse the syntax tree and add a scope wrapper prefix to all rule selectors. This prefix is ​​designed to add little or no selector weight. Rename the global naming rules in the style definition and update all references synchronously; The processed syntax tree is reserialized into style text and injected into the document, while the corresponding scope flag is activated on the component root element.

[0043] This embodiment employs an AST-based selector scope rewriting process, such as... Figure 3As shown. First, input the component's original CSS text + scope class name `._scope_x`. The CSS parser converts the CSS text into an abstract syntax tree (AST), parsing various CSS structures based on: ordinary rules (selectors + declaration blocks), media query `@media` rules, feature query `@supports` rules, keyframe animations `@keyframes`, and selector and declaration lists, resulting in a structured CSS AST object. Then, AST transformation is performed, including: Selector prefix processing uses `:where(._scope_x)` to wrap the original selector, preserving the low-specificity characteristics of `:is` / `:where` (example: `.button` → `:where(._scope_x) .button`). Rename the animation, add a scope prefix to the `@keyframes` animation name, and update all animation references synchronously (example: `slide-in` → `_scope_x-slide-in`). Compatibility handling includes automatically adding vendor prefixes (-webkit-, -moz-, -ms-) and providing fallback options for browsers that do not support the new features.

[0044] Then the processed AST is converted back into executable code, including: (1) CSS text generation, serializing the transformed AST into a CSS string to maintain format readability for easy debugging; (2) style injection, including three injection methods: creating ` <style>` 标签插入文档头部、使用 `adoptedStyleSheets`（现代浏览器）、以及动态加载外部样式表；（3）作用域激活，在组件根元素添加类名 `_scope_x`，建立样式与组件的绑定关系。

[0045] 最后进行校验和回滚，具体通过可视化确认、一键撤销机制和运行日志，确保作用域化过程安全可靠。所述可视化确认通过在低代码平台中预览作用域化效果以及高亮显示样式变化区域实现。所述一键撤销机制在保留原始样式备份的基础上，提供快速回退到原始状态的功能，同时也支持部分回滚（仅撤销问题样式）。所述运行日志用于记录每次作用域化操作，使用哈希去重避免重复处理，同时也提供性能指标监控和异常追踪。

[0046] 此外，步骤S3中所述自动选择最终执行策略执行的实现采用策略决策算法，包括：为每个候选隔离策略计算一个评估向量，其中，为当前环境对该策略的技术支持度，为该策略的样式隔离强度，为该策略对全局主题和外部样式联动的保留能力，为该策略的执行性能开销与实现复杂度；根据预设的权重配置，对评估向量各维度进行加权求和，得到每个策略的综合评分；选择综合评分最高的策略作为当前执行策略。

[0047] 在本实施例中，按得分从高到低选择具体隔离策略，结合运行期监控数据动态调整权重，实现对不同项目规模与运行环境的自适应策略切换。

[0048] 在安全与兼容方面，我们选择在CSP下使用带nonce的<style>或ConstructableStyleSheet；跨域受限采用平台代理或预缓存。

[0049] 最后是步骤S5中提到的渲染更新与可视化报告，应用隔离结果，局部刷新渲染。在画布高亮冲突组件，在侧栏输出"覆盖依据矩阵”（选择器、层、!important、特异性、来源、定义顺序、条件），提供一键修复、撤销、批量修复与最小复现场景复制链接。记录操作日志便于审计与回滚。

[0050] 具体的可视化冲突报告与修复交互流程如图4所示，首先是画布高亮冲突：在可视化编辑器中用红框 / 角标标记存在CSS冲突的组件，直观定位问题位置；接着是样式冲突面板：显示冲突详情和分析矩阵，包括：冲突组件、属性、规则代码，覆盖依据为选择器特异性 / !important / 来源等维度对比；最后是操作区：提供修复工具：一键自动修复（基于决策表）、批量 / 选择性修复选项、复制最小复现场景链接。还包括反馈修复结果，包括：需要说明的是，高亮消失，状态更新；显示修复日志和性能指标。

[0051] 此外，在性能优化上，本发明将倒排索引与按属性粒度的局部重算，典型复杂度近似O(k log R)（k为受影响属性项，R为候选规则量级）。其次，变更合并与节流（requestIdleCallback / 微任务批处理），超大画布阈值下降级为延迟扫描。

[0052] 例如，在包含约300个可视化组件、约4500条CSS 规则的页面上，首次全量构建CSS分析树及倒排索引的耗时约为120ms（桌面级浏览器、4 核CPU 环境），后续基于MutationObserver 的增量检测中，单次拖拽或属性变更操作触发的平均检测耗时约为6ms、95 百分位不超过12ms，显著低于典型人机交互100ms 感知阈值，从而保证编辑体验的流畅性。

[0053] 综上方法，相比于仅支持可视化样式配置而缺乏运行时冲突检测能力的低代码平台方案，以及通过沙箱环境将样式调试过程整体隔离、但难以与生产环境主题联动且缺少精细化检测证据的方案，本发明通过"规则来源追踪 + 层叠证据矩阵 + 多策略自适应隔离 + 预处理器源码映射 + 增量性能优化”的组合，实现了在生产环境下对组件级样式冲突的实时、可解释和低侵入修复，显著提升了低代码平台在大规模组件复用场景下的可靠性与可维护性。

[0054] 基于上述方法，本发明提供了一种面向低代码平台的样式冲突检测与隔离系统，包括：样式分析构建模块，用于为加载至画布的可视化组件收集样式资源并解析为结构化的样式规则，为每条规则标记来源组件标识，以构建反映规则与组件来源映射关系的全局样式分析结构；变更监测与定位模块，用于持续监测画布中组件的结构、属性或样式变更，根据变更定位受影响的元素集合，针对该受影响的元素集合中的元素及其目标样式属性确定最终生效的样式规则；冲突判定模块，用于通过识别所述最终生效规则的来源组件标识与当前元素所归属的主组件标识是否一致，判定是否存在样式冲突；隔离策略决策与执行模块，用于根据当前运行环境与组件特性，从多种预置的样式隔离策略中自动选择最终执行策略执行，以解决冲突；可视化反馈与渲染更新模块，用于应用隔离结果更新渲染，并在平台界面中可视化地呈现冲突位置、详情及修复操作入口。

[0055] 本实施例提供的面向低代码平台的样式冲突检测与隔离方法中的步骤，可以基于面向低代码平台的样式冲突检测与隔离系统中对应的模块等予以实现，本领域技术人员可以参照所述系统的技术方案实现所述方法的步骤流程，即，所述系统中的实施例可理解为实现所述方法的优选例，在此不予赘述。

[0056] 除了以纯计算机可读程序代码方式实现本发明提供的系统及其各个装置以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统及其各个装置以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同功能。所以，本发明提供的系统及其各项装置可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构；也可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

[0057] 最后应说明的是：以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

[0058] 以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。< / style>

Claims

1. A method for style conflict detection and isolation for low-code platforms, characterized in that, Includes the following steps: S1: Collect style resources for the visual components loaded onto the canvas and parse them into structured style rules. Mark the source component identifier for each rule to build a global style analysis structure that reflects the mapping relationship between rules and component sources. S2: Continuously monitor changes in the structure, properties, or styles of components in the canvas, locate the affected set of elements based on the changes, and determine the final effective style rules for the elements in the affected set and their target style properties. S3: Determine whether there is a style conflict by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; S4: Based on the current operating environment and component characteristics, automatically select the final execution strategy from multiple preset style isolation strategies to resolve conflicts; S5: Apply the isolation results to update the rendering and visually present the conflict location, details, and repair operation entry in the platform interface.

2. The style conflict detection and isolation method for low-code platforms according to claim 1, characterized in that, In step S1, the construction of the global style analysis structure specifically includes: Parse the style definition resources associated with the component, and for each style rule obtained from the parsing, calculate its selector weight, determine whether it contains an importance boosting flag, determine its style cascade level, and record its source category and definition order. The calculated information is associated with the rule content and the source component identifier of the rule, and stored together in the global style analysis structure; Create an inverted index from style attributes to the rules that contain those attributes.

3. The style conflict detection and isolation method for low-code platforms according to claim 1, characterized in that, In step S2, determining the final effective style rule specifically includes: Construct a comprehensive priority vector for each candidate rule. ,in, This is the hierarchy priority value determined according to the style cascading mechanism. A Boolean value or priority number indicating whether an importance enhancement flag is included. The calculated selector weight values, The weight value assigned based on the style source category. Numerical values ​​reflecting the order in which the rules were defined; According to the priority vector The rules are compared lexicographically based on the preset priority order of each dimension, and the rule with the highest ranking is determined as the final effective rule.

4. The style conflict detection and isolation method for low-code platforms according to claim 1, characterized in that, In step S4, the various preset style isolation strategies include at least: When the component supports it and the environment allows it, the component is encapsulated in an independent style encapsulation container to achieve style isolation; The style cascading mechanism is used to create independent style hierarchies for components, and rule overriding relationships are managed by adjusting the hierarchical order. Abstract syntax based on style definition represents the scope overriding of component styles, limiting their scope of influence by adding scope qualifiers; For scenarios with extreme compatibility or security restrictions, only the conflicting attributes are bounded overridden.

5. The style conflict detection and isolation method for low-code platforms according to claim 4, characterized in that, The abstract syntax representation based on style definition for scope rewriting of component styles includes: Parse the component's original style definition text into an abstract syntax tree; Traverse the syntax tree and add a scope wrapper prefix to all rule selectors. This prefix is ​​designed to add little or no selector weight. Rename the global naming rules in the style definition and update all references synchronously; The processed syntax tree is reserialized into style text and injected into the document, while the corresponding scope flag is activated on the component root element.

6. The style conflict detection and isolation method for low-code platforms according to claim 4, characterized in that, In step S4, the automatic selection of the final execution strategy is implemented using a strategy decision algorithm, including: Calculate an evaluation vector for each candidate isolation strategy ,in, Given the current level of technical support for this strategy, The style isolation strength of this strategy, To preserve the ability of this strategy to link the global theme and external styles, Consider the performance overhead and implementation complexity of this strategy; Based on the preset weight configuration, the evaluation vector is weighted and summed in each dimension to obtain the comprehensive score of each strategy; Choose the strategy with the highest overall score as the current execution strategy.

7. The style conflict detection and isolation method for low-code platforms according to claim 2, characterized in that, When the style definition resource comes from a preprocessor, the build step further includes: During the build or loading phase, obtain and associate the processed style code with the corresponding source code mapping information; When parsing style rules, the source code mapping information is used to map the rule location back to the original source code location and context of the preprocessor; The original source code information is stored as part of the rule source metadata.

8. The style conflict detection and isolation method for low-code platforms according to claim 1, characterized in that, In step S2, the monitoring employs an incremental detection mechanism, specifically including: By listening for document structure changes through the DOM change listening interface, the changed nodes and their affected subtrees are marked as the set to be detected; The determination step only applies to elements in this set, and uses the inverted index to perform local style recalculation and conflict determination.

9. A style conflict detection and isolation system for low-code platforms, characterized in that, include: The style analysis building module is used to collect style resources for the visual components loaded onto the canvas and parse them into structured style rules. It marks the source component identifier for each rule to build a global style analysis structure that reflects the mapping relationship between rules and component sources. The change monitoring and location module is used to continuously monitor changes in the structure, attributes, or styles of components in the canvas, locate the set of elements affected by the change, and determine the final effective style rules for the elements in the affected set and their target style attributes. The conflict determination module is used to determine whether there is a style conflict by identifying whether the source component identifier of the final effective rule is consistent with the main component identifier to which the current element belongs; The isolation strategy decision and execution module is used to automatically select the final execution strategy from a variety of preset style isolation strategies based on the current operating environment and component characteristics in order to resolve conflicts; The visualization feedback and rendering update module is used to update the rendering of the application isolation results and visually present the conflict location, details, and repair operation entry in the platform interface.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the style conflict detection and isolation method for low-code platforms as described in any one of claims 1-8.

11. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the style conflict detection and isolation method for low-code platforms as described in any one of claims 1-8.

Images