A user interaction customization method based on web page mode

Abstract

This invention belongs to the technical field of interface optimization and relates to a user interaction customization method based on a webpage model. The method includes the following steps: generating a dynamic identity identifier containing job roles and operational scenarios; decomposing the webpage system functions into independent, operable functional elements, each of which is encapsulated as a graphical component supporting visual drag-and-drop; using the dynamic identity identifier as a key to query a pre-defined rule base, matching and loading an initial interface combination scheme; generating custom layout data containing adjacency identifiers, visibility markers, and stacking order values; parsing the adjacency identifiers and visibility markers, and generating a collaborative change operation flow instruction set through an operation chain mapping table; binding the custom layout data and the collaboratively changed operation flow instruction set to the dynamic identity identifier. This invention addresses the problem that traditional solutions do not consider the impact of task urgency on the interaction path.

Description

Technical Field

[0001] This invention belongs to the technical field of interface optimization and relates to a method for customizing user interaction based on web page mode. Background Technology

[0002] Current enterprise software systems commonly suffer from rigid interfaces, preventing users from dynamically adjusting the operating environment according to actual task requirements. Traditional solutions rely on static role-based permission templates, controlling the display of interface elements through predefined fixed function menus for different roles. Administrators must manually configure numerous rules to accommodate organizational structure changes, achieving only basic function visibility control.

[0003] Traditional solutions suffer from three major drawbacks: permissions are disconnected from task scenarios, requiring users to click through multiple levels of menus for urgent and high-priority operations; interface layout adjustments cannot be linked to business processes, requiring users to fully execute the original operation steps after dragging and dropping components; and configuration data is limited to single-device storage, necessitating repeated interface adjustments when working across terminals.

[0004] Based on the above problems, traditional solutions only control the function entry point and do not consider the impact of task urgency on the interaction path, resulting in significant delays in the response of critical business operations. Summary of the Invention

[0005] To address the aforementioned problems, this invention provides a user interaction customization method based on a webpage model.

[0006] A method for customizing user interaction based on a webpage model includes the following steps:

[0007] S1. By reading the job attributes and current task types in the enterprise's organizational structure, a dynamic identity identifier containing job roles and operational scenarios is generated.

[0008] S2. Decompose the functions of the web system into independent and operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop;

[0009] S3. The dynamic identity identifier is used as the key to query the pre-set rule library, match the initial interface combination scheme and load it. The initial interface combination scheme includes the default display state of functional elements, the forced arrangement order and the initial visual style.

[0010] S4. Listen for user drag-and-drop operations, calculate the component overlap ratio based on the coordinates of the landing area, and generate custom layout data including adjacency indicators, visibility markers, and stacking order values.

[0011] S5. Parse the adjacency identifier and visibility marker, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step quick operation instructions for merging adjacent components and operation steps for skipping hidden components;

[0012] S6. Custom layout data and the operation process instruction set after collaborative changes are bound to a dynamic identity identifier, stored in a persistent storage area, and a configuration version index mechanism is established.

[0013] A further aspect of this invention involves generating a dynamic identity identifier that includes job roles and operational scenarios, comprising the following steps:

[0014] The company obtains the user's job attribute data from its existing management system. The job attribute data includes department affiliation, job title, and permission level.

[0015] The job title field is matched with the preset job role code table to output standardized job role codes;

[0016] Task type coding refers to the standardized machine identifier for a business scenario, using uppercase English abbreviations.

[0017] Obtain the base weight and urgency coefficient, and calculate the task type weight coefficient;

[0018] The permission level is multiplied by the task type weight coefficient to obtain the permission-task product;

[0019] When the product of permission tasks exceeds a preset urgency threshold, a high-priority marker is added to the task type code;

[0020] Combine standardized job role codes, task type codes, and high-priority tags to generate dynamic identity identifiers.

[0021] A further aspect of the present invention includes a preset job role coding table, comprising:

[0022] The job role coding table is a pre-configured mapping table. Its core function is to convert diverse job titles within an enterprise into standardized, unique role codes.

[0023] Establish a key-value mapping between job titles and role codes, typically using JSON storage, and support dynamic addition and deletion of entries to adapt to organizational structure changes.

[0024] A further aspect of the present invention encapsulates each functional element as a graphical component that supports visual drag-and-drop, including the following steps:

[0025] The interactive function points are broken down according to the principle of functional atomization to form the smallest operating unit that carries only a single business action;

[0026] Each smallest unit of operation is transformed into a configurable functional element, and a visual container is bound to each configurable functional element through the encapsulation engine.

[0027] The encapsulation engine uses the browser's native drag-and-drop API to achieve displacement detection. The visual container contains operation entry icons, function description labels, and size adaptive logic, forming a graphical component that supports drag-and-drop operations.

[0028] All graphical components are categorized by business domain and stored in a set of configurable functional elements.

[0029] A further aspect of this invention involves using dynamic identity identifiers as keys to query a pre-defined rule base, including the following steps:

[0030] Using dynamic identity identifiers as query keys, retrieve rule entries that match the pre-set rule base;

[0031] The pre-built rule base is stored in a relational data table, and uses the prefix code of the dynamic identity as the primary key, which is associated with the corresponding interface combination scheme number.

[0032] The initial interface combination scheme definition associated with the interface combination scheme number has three key elements: the default display state of functional elements, the forced arrangement order, and the initial visual style.

[0033] A further aspect of the present invention involves matching and loading an initial interface combination scheme, including the following steps:

[0034] The set of configurable feature elements is sorted according to an integer priority index that forces the sorting order;

[0035] If the priority indices are different, the element with the smaller value comes first;

[0036] If the priority indices are the same, the alphabetical order of the element names is compared, and the element with the earlier alphabetical order is ranked first.

[0037] Element names are arranged in Unicode encoding order; for Chinese characters, the first letter of the pinyin needs to be pre-converted.

[0038] Filter out invisible elements based on the default display state and render the interface according to the initial visual style.

[0039] A further aspect of the present invention involves calculating the overlap ratio of components based on the coordinates of the landing area, including the following steps:

[0040] Freeze the current interface layout and display a dashed preview frame for the current position;

[0041] Calculate the geometric intersection area between the landing area and the target component, and determine the adjacency based on the overlap ratio formula:

[0042]

[0043] in, Indicates the overlap ratio, used to determine the adjacency of components; This represents the area of ​​the geometric intersection between the landing point region and the target component rectangle; This represents the area of ​​the target component, calculated as the width × height of the target component. This represents the area of ​​the dragged component, calculated as the width × height of the dragged component.

[0044] A further aspect of the present invention generates custom layout data containing adjacency identifiers, visibility markers, and stacking order values, comprising the following steps:

[0045] If the overlap ratio is greater than the adjacency threshold, the relationship is determined to be adjacent.

[0046] The adjacency threshold is based on the critical ratio value determined by human-computer interaction cognitive experiments. Under the premise of ensuring that users can visually recognize the adjacency relationship, the minimum overlap ratio statistical value that users generally agree forms the component association in multiple drag tests is taken. Combined with the density of interface elements, it is dynamically fine-tuned and finally solidified and taken effect through system configuration items.

[0047] Based on the operation sequence, increment the stacking order value and record the visibility marker to generate custom layout data containing adjacency identifier, visibility marker, and stacking order value.

[0048] A further aspect of this invention involves generating a collaborative change operation procedure instruction set, comprising the following steps:

[0049] When two graphical components form an adjacent relationship, the predefined operation chain mapping table is retrieved.

[0050] Verify that the output parameter set of the previous operation and the input parameter set of the next operation have no overlap;

[0051] The historical execution frequency exceeds a preset frequency threshold;

[0052] When the combined conditions are met, a predefined new operation logic is invoked to generate a single-step shortcut operation command.

[0053] When the visibility marker is hidden, remove the trigger condition for the corresponding operation step.

[0054] A further aspect of this invention involves binding custom layout data and the collaboratively modified operation flow instruction set to a dynamic identity identifier, including the following steps:

[0055] Custom layout data fields are logically associated with operation flow instruction fields, and the position information of each interface element is associated with the corresponding operation flow instruction code segment.

[0056] The dynamic identity identifier serves as the primary key, linking configuration data with the version identifier;

[0057] The version identifier is generated by combining a UNIX timestamp and an incrementing sequence number;

[0058] When multiple devices conflict, the configuration of the latest version identifier shall prevail and a synchronous alarm shall be triggered.

[0059] In summary, the present invention has the following beneficial technical effects:

[0060] 1. Implement task-driven dynamic interface optimization by generating dynamic identity identifiers by integrating job attributes and real-time task types, and automatically load interface combination schemes that match the current business scenario. Users do not need to manually switch function modules; key operation components are intelligently sorted by priority and highlighted, significantly improving the response efficiency of critical business operations.

[0061] 2. Breaking through the bottleneck of the disconnect between interface and business logic, when users drag and adjust the layout of components, the system automatically identifies adjacent relationships based on the overlap ratio algorithm and compresses multi-step operations into single-step instructions by linking the operation chain mapping table. When unnecessary components are hidden, the corresponding operation steps are skipped simultaneously, truly achieving a "what you see is what you get" interactive loop;

[0062] 3. To ensure consistent cross-device interactive experience, the size of the visual container automatically adapts to devices with different resolutions, and the display hierarchy of components is dynamically controlled by stacking order values. Layout data and operation flow instructions are strongly bound through chained indexes, ensuring seamless migration of interactive logic from desktop to mobile, with cross-device layout distortion rate approaching zero. Attached Figure Description

[0063] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below. The drawings are used to provide a further understanding of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0064] Figure 1 A flowchart illustrating an embodiment of this application is disclosed.

[0065] Figure 2 Structural schematic diagrams of embodiments of this application are disclosed. Detailed Implementation

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

[0067] The following is in conjunction with the appendix Figure 1-Figure 2 A preferred description of the present invention is provided below.

[0068] See attached document Figure 1 This invention proposes a user interaction customization method based on webpage mode, including the following steps:

[0069] S1. By reading the job attributes and current task types in the enterprise's organizational structure, a dynamic identity identifier containing job roles and operational scenarios is generated.

[0070] S2. Decompose the functions of the web system into independent and operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop;

[0071] S3. The dynamic identity identifier is used as the key to query the pre-set rule library, match the initial interface combination scheme and load it. The initial interface combination scheme includes the default display state of functional elements, the forced arrangement order and the initial visual style.

[0072] S4. Listen for user drag-and-drop operations, calculate the component overlap ratio based on the coordinates of the landing area, and generate custom layout data including adjacency indicators, visibility markers, and stacking order values.

[0073] S5. Parse the adjacency identifier and visibility marker, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step quick operation instructions for merging adjacent components and operation steps for skipping hidden components;

[0074] S6. Custom layout data and the operation process instruction set after collaborative changes are bound to a dynamic identity identifier, stored in a persistent storage area, and a configuration version index mechanism is established.

[0075] In one embodiment of the present invention, step S1 includes the following steps:

[0076] After a user logs into the web system, the system retrieves the user's job attribute data from the enterprise's existing management system. This job attribute data includes department affiliation, job title, and permission level. It refers to the user's employment information read in real-time from the enterprise's existing management system, including but not limited to the department affiliation field (string), job title field (string), and permission level field. The permission level field is a numeric value; a higher value indicates higher access privileges. The system monitors the user's current page path or button click sequence and categorizes the current action into a task type based on a predefined business scenario mapping table. The task type is determined by analyzing keywords in the current browser address bar path or the last three button click records and comparing them with the business scenario mapping table.

[0077] Referring to Appendix 1, the business scenario mapping table refers to a predefined key-value pair structure mapping table used to map user behavior (page path or button click) to standard task types. It is pre-configured by the system administrator. The key name is the page path keyword (such as "order" in " / order / create") or button ID, and the key value is the business scenario name (such as "order processing").

[0078] Appendix 1 Business Scenario Mapping Table

[0079]

[0080] The basic weight represents the baseline value of the inherent importance of the task type, reflecting the strategic priority of the business scenario in enterprise operations. This value is statically configured by the system administrator based on historical business data, typically ranging from 1 to 10, with higher values ​​indicating more critical business impact. The urgency coefficient is a multiplier factor that dynamically adjusts the task weight, indicating timeliness requirements in specific situations. The system administrator presets scenario-specific parameters for each task type in the business scenario mapping table, supporting automatic adjustments based on real-time data (such as deadline countdowns) during runtime. The task type code is a standardized machine identifier for the business scenario, used to accurately represent the current operation type in dynamic identity identification. It uses uppercase English abbreviations (e.g., ORDER = order processing, APPROVE = approval process), and is uniformly named by the system administrator during initialization of the mapping table. It also supports dynamic addition and deletion of entries to adapt to organizational structure changes.

[0081] The job attribute data and the task type are input to the rule converter. The rule converter is a processing program that receives job attribute data and task type as input. The rule converter performs the following operations:

[0082] 1. The job title field is matched with the preset job role coding table to output standardized job role codes. The job role coding table is a mapping table pre-configured by the system administrator. Its core function is to convert diverse job titles (such as "Senior Sales Representative") within the enterprise into standardized unique role codes (such as "SALES-SR"), which are used for dynamic identification to accurately represent the user's functional attributes.

[0083] Referring to Appendix 2, the coding rules for the job role coding table are established. The system administrator designs a structured coding format based on the company's job level system: "[Department Abbreviation]-[Job Level]", ensuring that different positions such as Sales Director and Finance Specialist receive unique identifiers conforming to specifications such as "SALES-MGR" and "FINANCE-JR". The system backend establishes a key-value pair mapping between job names and role codes, for example, {Senior Sales Representative: "SALES-SR", Finance Supervisor: "FINANCE-MGR"}. This is typically stored using JSON or a database table, supporting dynamic addition and deletion of entries to adapt to organizational structure changes. For example, when adding a "Data Analyst" position, the system administrator only needs to add the mapping relationship "Data Analyst":"DATA-ANALYST" for it to take effect.

[0084] Appendix 2 Job Role Coding Table

[0085]

[0086] The weighting coefficient for job roles, which is associated with the job title, is pre-set by the system administrator according to the company's job level system and is used to calculate the product of permissions and tasks. Permission level refers to the numerical representation of a user's operational permissions; a higher value indicates higher permissions, and this level is obtained from the user's job attribute data in the company's existing management system.

[0087] 2. Calculate the task type weight coefficient, satisfying the following formula:

[0088]

[0089] in, This refers to the weighting coefficient for task types. Based on the weights, The urgency level is obtained from a business scenario mapping table predefined by the system administrator.

[0090] The product of permission tasks is calculated according to the following formula:

[0091]

[0092] in, This represents the product of permission tasks, used to determine whether a high-priority flag is triggered. This indicates the permission level, which is obtained from the user's job attribute data in the company's existing management system. This indicates the task type weight.

[0093] 3. The product of permission tasks is compared with a preset urgency threshold. If the product is greater than the preset urgency threshold, a high-priority marker is added to the task type code. The task urgency threshold is the critical value for determining whether a task is urgent, and it is configured by the system administrator according to the response time requirements of the business process.

[0094] 4. The rule converter generates a dynamic identity identifier containing standardized job role codes and task type codes based on preset job role weight coefficients and task urgency thresholds.

[0095] Dynamic identity identifiers are strings generated by combining standardized job role codes and task type codes, in the format "job role code_task type code_priority flag", used to identify a user's identity in the current task, such as "SALES-SR_ORDER_HIGH".

[0096] For example, when a sales department employee logs into the system, the system retrieves the user's job attribute data from the company's existing management system as {Department: Sales Department 2, Position: Senior Sales Representative, Permission Level: 3}. The system detects the access path as " / order / create". The system queries the business scenario mapping table to find that the path keyword "order" corresponds to the task type "order processing". The system matches the job role coding table to find the role code "SALES-SR" corresponding to "Senior Sales Representative". The system calculates that the product of permission level 3 and task type weight 2 is 6.

[0097] The preset task urgency threshold is 5. Since the product of the permissions and tasks is greater than the preset task urgency threshold, a high priority mark is added to the task type code, and the task type code is appended with the "_HIGH" suffix, generating a dynamic identity identifier: "SALES-SR_ORDER_HIGH".

[0098] In one embodiment of the present invention, step S2 includes the following steps:

[0099] After generating a dynamic identity, all interactive functionalities of the webpage system are traversed, and each is broken down into its smallest operational unit according to the principle of functional atomization. Functional atomization requires that each functional element carry only a single business action (e.g., "Submit Order" only includes submission logic, excluding data validation or payment). The smallest operational unit refers to an independent business action that cannot be further decomposed (e.g., the "Customer Name Input Box" only handles text input, and the "Inventory Quantity Display Card" only displays data). This independent business action does not depend on the intermediate results of other actions. Each smallest operational unit is then transformed into a configurable functional element, which is a UI component whose properties can be dynamically modified through a configuration file.

[0100] Each configurable functional element is bound to a visual container through an encapsulation engine. The encapsulation engine uses the browser's native drag-and-drop API to implement displacement detection. The visual container contains operation entry icons, function description labels, and size adaptation logic, forming a graphical component that supports drag-and-drop operations. All graphical components are stored in the configurable functional element set according to business domain. The configurable functional element set refers to a virtual collection that stores all graphical components, organized using a tree-structured JSON structure. The first-level branches are divided according to business (e.g., "Financial Management" and "Inventory Management"), and the second-level branches are divided according to the operation object (e.g., "Expense Report" and "Purchase Order").

[0101] The visual container refers to the rectangular display area that encloses the functional element, containing three essential child elements; an SVG vector graphic representing the function type (such as a shopping cart icon representing the order placement function); a function description label explaining the purpose of the element (such as creating an expense report); and a CSS rule that automatically adjusts the container size according to the screen width to ensure that the component maintains a constant proportion of the operable area at different resolutions.

[0102] For example, consider the "travel expense reimbursement" function in a financial system;

[0103] 1. Break down the operation into the smallest unit: Action 1, fill in the reimbursement amount and encapsulate it as a numeric input box element; Action 2, upload the invoice and encapsulate it as a file upload element; Action 3, submit for approval and encapsulate it as a button element.

[0104] 2. Add a visual container to the numeric input box: the icon is a currency symbol SVG; the label is "Reimbursement Amount"; the adaptive logic is that the width occupies 15% of the screen, and shrinks to 30% on mobile devices; the three components are stored in the "Financial Management - Travel Reimbursement" branch of the configurable functional element set.

[0105] 3. User drag-and-drop verification: When finance personnel drag the "Upload Invoice" component to the homepage, the visual container automatically scales to fit the size of the mobile phone screen.

[0106] In one embodiment of the present invention, step S3 includes the following steps:

[0107] After generating a dynamic identity and a set of configurable functional elements, the dynamic identity is used as a query key to retrieve matching rule entries from the pre-defined rule base. Each rule entry contains an interface combination scheme number, and the initial interface combination scheme associated with this number defines three elements: the default display state of the functional elements, the forced arrangement order, and the initial visual style. After loading this scheme, the set of configurable functional elements is sorted according to the forced arrangement order. The forced arrangement order is a preset integer priority index by the system administrator, with a value range of 1-100. If the priority indices of two functional elements in the set are the same, they are arranged in alphabetical order by element name. Invisible elements are filtered based on the default display state, and finally, the interface is rendered according to the initial visual style.

[0108] Compare the priority indices of two functional elements. If the priority indices are different, the element with the smaller value is listed first. If the priority indices are the same, compare the alphabetical order of the element names, and the element with the earlier alphabetical order is listed first. The element names are arranged according to Unicode encoding order. For Chinese scenarios, the first letter of the pinyin needs to be pre-converted.

[0109] The initial visual style includes, but is not limited to, standardized parameters for background color, border thickness, and icon size. The integer priority index is configured by the system administrator based on the criticality of the business. Core business processes directly related to the main business chain (such as payment confirmation and contract submission) can be assigned an index of 80-100; non-essential but user-optimizing auxiliary functions (such as viewing history and filling in notes) can be assigned an index of 40-79; and backend system management functions (such as log export and interface scaling) can be assigned an index of 1-39.

[0110] The default display state refers to the initial combination of the visibility and operability states of a functional element, including a Boolean value for visibility (show / hide) and a Boolean value for operability (available / disabled).

[0111] The pre-built rule base is stored in a relational database table, using a prefix code of the dynamic identity (such as "PROD_LINE_A_") as the primary key, associated with the corresponding interface combination scheme number. This number maps to the scheme definition table to obtain three key configuration elements: default display state, forced sorting order (priority index of integers from 1 to 100), and initial visual style (RGB color values / size and other style codes; a style panel pops up when dragged and released, supporting modification of visual parameters such as border / background color). Each rule entry is a single-line data record in the pre-built rule base.

[0112] For example, for the dynamic identity "SALES-SR_ORDER_HIGH", the prefix code "SALES-SR_" is extracted to query the preset rule base and match the rule entry {match key: SALES-SR, scheme number: LAYOUT_03, effective condition: including _HIGH}. The interface combination scheme number LAYOUT_03 is defined as the display status (customer analysis component is visible and available, inventory warning component is hidden), the arrangement order (order creation component priority index 85, contract template component priority index 82, customer analysis component priority index 73), and the visual style (high priority index components are added with red borders).

[0113] The configurable feature set filters visible elements, including order creation, contract templates, and customer analysis; sorted by priority: 1. Order creation → 2. Contract templates → 3. Customer analysis; a red border is added to the order creation component.

[0114] In one embodiment of the present invention, step S4 includes the following steps:

[0115] After loading the initial interface composition scheme, the browser's native drag-and-drop event listener is activated to capture user drag-and-drop operations on graphical components in real time. When a graphical component is detected to be dragged, the current interface layout is frozen and a position preview dashed outline is displayed. The position preview dashed outline is a semi-transparent rectangular outline with the same size as the dragged component container. It is redrawn in real time as the mouse moves to visually indicate the expected position after release. The landing area is calculated based on the coordinates when the mouse is released to determine the relative positional relationship between the graphical component and surrounding components. Adjacency is determined based on the overlap ratio between the landing area coordinates and the boundaries of adjacent components. Combined with the component's visibility status and stacking order value, custom layout data containing adjacency identifiers, visibility markers, and stacking order values ​​is generated.

[0116] The stacking order value refers to the integer value that records the order in which components are displayed. The component that is released later automatically gets a larger index value than the component that preceded it. After a component is dragged and released, the maximum stacking order value of all components in the current interface is automatically retrieved. The order value of the newly released component is set to the maximum value plus 1 to ensure that the component is always displayed on top of other components and to ensure that the new component is displayed on top of the old component.

[0117] Freezing the current layout means pausing the interaction and position updates of all components in the interface, maintaining the layout state before dragging. The landing area refers to the rectangular area where the dragged component is expected to be placed when the mouse is released. Based on the screen coordinates (denoted as X, Y) at the time of mouse release, which is the top left corner of the dragged component, and superimposed with the original width W and height H of the dragged component, the landing area is [X, X+W]×[Y, Y+H]. For example, when the mouse is released at (300, 100) and the component size is 200×200, the landing area is a rectangular space consisting of 300 to 500 pixels horizontally and 100 to 300 pixels vertically.

[0118] The overlap ratio refers to the proportion of the intersection area of ​​the landing point rectangle and the target component rectangle to the area of ​​the target component. The target component refers to all other graphical components in the interface that are stationary and have a spatial interaction relationship with the landing point area of ​​the currently dragged component during the user's dragging of the current component. For example, when the user drags the "Inbound Registration" component, the fixed components in the interface such as "Outbound Records", "Inventory Inquiry", and "Report Statistics" are all potential target components, satisfying the following formula:

[0119]

[0120] in, Indicates the overlap ratio, used to determine the adjacency of components; This represents the area of ​​the geometric intersection between the landing point region and the target component rectangle; This represents the area of ​​the target component, calculated as the width × height of the target component. This represents the area of ​​the dragged component, calculated as the width multiplied by the height of the dragged component. If the overlap ratio is greater than the adjacency threshold, the component is considered to be adjacent.

[0121] The adjacency threshold is based on the critical ratio value determined by human-computer interaction cognitive experiments. Under the premise of ensuring that users can visually recognize the adjacency relationship, the minimum overlap ratio statistical value that users generally agree forms the component association in multiple drag tests is taken. Combined with the density of interface elements, it is dynamically fine-tuned and finally solidified through system configuration items. The adjacency threshold is usually set in the range of 25%-35% to ensure that users can naturally perceive the adsorption effect between components when dragging and releasing.

[0122] For example, when a warehouse manager operates the inventory management system, in the initial interface, component A (inbound registration) is located at coordinates (0, 0) and has a size of 200×200 pixels, while component B (outbound record) is located at the adjacent coordinates (200, 0) and has the same size of 200×200 pixels.

[0123] When component A is dragged to the new coordinates (300, 100) and released, the landing area range (X-axis 300-500, Y-axis 100-300) is calculated. Then, it is detected that this area overlaps with the original area of ​​component B (X-axis 200-400, Y-axis 0-200). At the same time, an overlapping area is formed in the X-axis 300-400 and Y-axis 100-200 range (area = 100 × 200 = 20,000 square pixels). The total area of ​​component A and component B is 40,000 square pixels. Substituting into the overlap ratio calculation formula, the overlap ratio is 50%. The preset adjacency threshold is 25%. The overlap ratio exceeds the preset adjacency threshold, generating an association identifier containing "component A is adjacent to component B". At the same time, it is recorded that both are in a visible state. According to the operation sequence, the stacking order value of component A is set to 1 (maintaining the initial state) and the order value of component B is increased to 2 (adjusting elements later). Finally, the above data is integrated to form custom layout data.

[0124] In one embodiment of the present invention, step S5 includes the following steps:

[0125] After generating custom layout data, the adjacency and visibility markers are parsed. The adjacency marker indicates when two graphical components are adjacent. A predefined operation chain mapping table is retrieved to find the combination rules for the smallest operation unit corresponding to these two components. If a matching rule exists, a single-step shortcut operation instruction is generated to replace the original step-by-step operation sequence. Simultaneously, the visibility marker is checked. If the visibility marker is hidden, the operation step triggering conditions associated with that component are removed. Finally, a collaboratively modified operation flow instruction set is generated. A single-step shortcut operation instruction compresses the original multi-step operation into a single-interaction instruction package. For example, previously, opening the order component and then clicking save was required; after merging, it becomes an automatic save instruction. Operation step triggering conditions refer to decision nodes that control the direction of the business process. For example, when the "multi-level approval" component is visible, the approval process is triggered; when it is hidden, it is skipped.

[0126] Referring to Appendix 3, the operation chain mapping table records the combination conditions and new operation logic for mergeable operation pairs. This data table is pre-configured by the system administrator based on high-frequency operation scenarios. Adjacent component operation pairs that meet the conditions of no data dependency and high frequency of use are compressed into single-step quick operations through predefined merging code or flowcharts. Simultaneously, the original operation permissions are inherited, and the background execution logic is retained, ultimately achieving interaction path compression. It contains three columns:

[0127] 1. Component pairs: Record the IDs of two graphical components that can be merged, for example, "A_B" indicates that components A and B are adjacent;

[0128] 2. Combine conditions to check the data input-output relationship between the two smallest operation units, ensuring it satisfies the following formula:

[0129]

[0130] in, This refers to the set of output parameters of the previous operation, which is the set of result data items generated after the operation is executed, such as {Invoice ID, Scan Time} generated by "Invoice Scan". The input parameter set for the next operation refers to the set of external data items required for the operation to be executed, such as {Invoice ID, Department Code} required for "Reimbursement Submission"; This indicates the historical execution frequency, specifically the number of weeks in which two operations were executed consecutively in the statistics log. The frequency threshold is represented by a sliding time window based on the complete business cycle. It dynamically calculates the average number of times adjacent operations are executed sequentially over multiple consecutive natural weeks in historical data. Processes with high stability can be shortened to 4 weeks, while processes with large seasonal fluctuations need to be extended to 26 weeks.

[0131] Two operations must have no data dependency and their execution frequency must exceed a frequency threshold to be considered a suitable combination. Mergeable components must satisfy the condition that their respective smallest operational units are sequentially executed and that no third-party operations are inserted.

[0132] 3. New operation logic, merged background execution code, such as graphical component drag-and-drop flowchart.

[0133] Appendix 3 Operation Chain Mapping Table

[0134]

[0135] For example, in the expense reimbursement system, the finance staff drags the "Invoice Scan" component to a position adjacent to the "Expense Submission" component, while simultaneously hiding the "Supervisor Approval" component. Upon detecting this change in component adjacency, the system automatically queries the operation chain mapping table and identifies that the "Invoice Scan_Expense Submission" combination meets two collaboration conditions:

[0136] Data stream analysis confirms that invoice scanning results can be submitted directly without manual intervention;

[0137] Statistics show that this combination of operations was performed 35 times this week, significantly exceeding the frequency threshold of 20 times;

[0138] Based on this, a single-step shortcut command is generated, which automatically triggers the reimbursement submission upon completion of the scan; at the same time, it is detected that the "supervisor approval" component is set to a hidden state, and the trigger condition of waiting for approval after submission in the original process is removed; the final process is simplified from the original five steps (scan → fill in details → submit → approve → archive) to two steps (scan and submit → archive). This collaborative change mechanism achieves a "what you see is what you get" efficiency improvement by dynamically binding interface operations and business processes.

[0139] In one embodiment of the present invention, step S6 includes the following steps:

[0140] After completing the collaborative changes to the operation flow, the custom layout data is bound and encapsulated with the changed operation flow instruction set. This binding and encapsulation refers to logically associating custom layout data fields with operation flow instruction fields, and associating the position information of each interface element with the corresponding operation flow instruction code segment. The current user's dynamic identity is extracted as the storage primary key. This primary key is associated with the bound configuration data and stored in a persistent storage area. The persistent storage area refers to dedicated storage space in the browser's local storage or a server database, using the dynamic identity as the key and the configuration data JSON object as the value. A configuration version indexing mechanism is established to ensure that the version number increments with each update. When the user logs into the system again, the latest version of the configuration data is retrieved through the dynamic identity, parsed, and then the interface layout and operation flow logic are loaded simultaneously.

[0141] When multiple devices submit simultaneously, the configuration with the latest timestamp is used and a synchronization alarm is triggered. The system then displays a version difference comparison interface, such as layout and operation process changes, and the user can manually choose to keep the version or merge the configuration.

[0142] The configuration version indexing mechanism ensures version uniqueness by combining timestamps and serial numbers. It consists of two inseparable components: the timestamp, which is the UNIX time in milliseconds during the storage operation; and the serial number, which is the integer value that is automatically incremented each time the persistent storage area is read and updated. The two are combined to form a version identifier in the format of "timestamp_serial number".

[0143] In this context, binding and encapsulation refers to establishing a unique association between the coordinates of each component in the layout data and the corresponding operation code segment in the operation flow instruction set, forming a chain index of coordinates → operation ID → instruction code.

[0144] For example, after the sales manager completes the interface optimization, they first establish a two-way logical mapping between the physical coordinates (100, 200) of the "Customer Management" component in the custom layout data and the backend code `order.create()` corresponding to the operation instruction "One-click Order" generated by the collaborative change. This forms a "coordinate → instruction" binding relationship, meaning that clicking the (100, 200) area triggers the order creation process. The sales manager's dynamic identity identifier "SALES-MGR_CLIENT_HIGH" is extracted as the primary key. The encapsulated configuration data {layout data: {"Customer Management": {x: 100, y: 200}}, operation process: {"One-click Order": "order.create()"}}, and the version identifier "1690000000000_5" (timestamp July 23, 2023 + 5th revision) are combined into a JSON object and stored in persistent storage. When the sales manager logs into the system the next day, their identity identifier "SALES-MGR_CLIENT_HIGH" is recognized.

[0145] Automatically retrieve the latest version configuration under the primary key, parse it, and simultaneously complete the interface rendering: the customer management component is accurately positioned at the coordinates (100, 200) and the function is loaded: the one-click order instruction is activated in the adjacent area, realizing the coordinated effect of interface layout and operation logic.

[0146] See appendix Figure 2 The present invention also proposes a user interaction customization system based on a webpage mode, comprising the following modules:

[0147] The identity generation module is used to read the job attributes and current task types in the enterprise's organizational structure and generate dynamic identity identifiers that include job roles and operation scenarios.

[0148] The functional element encapsulation module is used to decompose the functions of the web system into independent and operable functional elements, and each functional element is encapsulated as a graphical component that supports visual drag and drop.

[0149] The interface scheme loading module is used to query the preset rule base with the dynamic identity identifier as the key, match the initial interface combination scheme and load it. The initial interface combination scheme includes the default display state of functional elements, the forced arrangement order and the initial visual style.

[0150] The layout adjustment response module is used to listen to user drag operations, calculate the component overlap ratio based on the coordinates of the landing area, and generate custom layout data including adjacency indicators, visibility markers, and stacking order values.

[0151] The operation process collaboration module is used to parse the adjacency identifier and visibility marker, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step quick operation instructions for merging adjacent components and operation steps for skipping hidden components;

[0152] Configure a persistent module to bind custom layout data and collaboratively changed operation flow instruction sets to dynamic identity identifiers, store them in persistent storage area, and establish a configuration version index mechanism.

[0153] It should be noted that the formulas described above, through the principle of dimensional consistency and mathematical standardization methods (such as normalization, dimensionless parameter conversion, or unit system unification), can translate physical quantities with different properties into unitless standard values ​​or superimposed parameters of the same dimension. This eliminates the interference of different dimensions on the computational logic, allowing the formulas to retain the original data distribution characteristics while possessing mathematical rationality and adaptability to objective laws. The descriptions are merely exemplary embodiments of the present invention and should not be construed as limiting the scope of the invention.

[0154] Each of the modules can be implemented in whole or in part through software, hardware, or a combination thereof. It supports hardware embedded in or independent of the processor in the computer device, and also supports software stored in the memory of the computer device, so that the processor can call and execute the operations corresponding to each of the above modules.

[0155] It should be noted that the human information (including but not limited to human device information and personal information) and data (including but not limited to data used for analysis, data stored and data displayed) involved in this invention are all information and data authorized by the human body or fully authorized by all parties. The collection, use and processing of related data require relevant legal standards.

[0156] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications 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 the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A method for customizing user interaction based on a webpage model, characterized in that, Includes the following steps: S1. By reading the job attributes and current task types in the enterprise's organizational structure, a dynamic identity identifier containing job roles and operational scenarios is generated. S2. Decompose the functions of the web system into independent and operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop; S3. The dynamic identity identifier is used as the key to query the pre-set rule library, match the initial interface combination scheme and load it. The initial interface combination scheme includes the default display state of functional elements, the forced arrangement order and the initial visual style. S4. Listen for user drag-and-drop operations, calculate the component overlap ratio based on the coordinates of the landing area, and generate custom layout data including adjacency indicators, visibility markers, and stacking order values. S5. Parse the adjacency identifier and visibility marker, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step quick operation instructions for merging adjacent components and operation steps for skipping hidden components; S6. Custom layout data and the operation process instruction set after collaborative changes are bound to a dynamic identity identifier, stored in a persistent storage area, and a configuration version index mechanism is established.

2. The user interaction customization method based on webpage mode according to claim 1, characterized in that, Generate dynamic identity identifiers that include job roles and operational scenarios, including the following steps: The company obtains the user's job attribute data from its existing management system. The job attribute data includes department affiliation, job title, and permission level. The job title field is matched with the preset job role code table to output standardized job role codes; Task type coding refers to the standardized machine identifier for a business scenario, using uppercase English abbreviations. Obtain the base weight and urgency coefficient, and calculate the task type weight coefficient; The permission level is multiplied by the task type weight coefficient to obtain the permission-task product; When the product of permission tasks exceeds a preset urgency threshold, a high-priority marker is added to the task type code; Combine standardized job role codes, task type codes, and high-priority tags to generate dynamic identity identifiers.

3. The user interaction customization method based on webpage mode according to claim 2, characterized in that, The pre-defined job role coding table includes: The job role coding table is a pre-configured mapping table. Its core function is to convert diverse job titles within an enterprise into standardized, unique role codes. Establish a key-value mapping between job titles and role codes, typically using JSON storage, and support dynamic addition and deletion of entries to adapt to organizational structure changes.

4. The user interaction customization method based on webpage mode according to claim 1, characterized in that, Each functional element is encapsulated as a graphical component that supports visual drag-and-drop, including the following steps: The interactive function points are broken down according to the principle of functional atomization to form the smallest operating unit that carries only a single business action; Each smallest unit of operation is transformed into a configurable functional element, and a visual container is bound to each configurable functional element through the encapsulation engine. The encapsulation engine uses the browser's native drag-and-drop API to achieve displacement detection. The visual container contains operation entry icons, function description labels, and size adaptive logic, forming a graphical component that supports drag-and-drop operations. All graphical components are categorized by business domain and stored in a set of configurable functional elements.

5. The user interaction customization method based on webpage mode according to claim 1, characterized in that, The dynamic identity identifier is used as the key to query the pre-defined rule base, including the following steps: Using dynamic identity identifiers as query keys, retrieve rule entries that match the pre-set rule base; The pre-built rule base is stored in a relational data table, and uses the prefix code of the dynamic identity as the primary key, which is associated with the corresponding interface combination scheme number. The initial interface combination scheme definition associated with the interface combination scheme number has three key elements: the default display state of functional elements, the forced arrangement order, and the initial visual style.

6. The user interaction customization method based on webpage mode according to claim 5, characterized in that, Matching and loading the initial interface layout scheme includes the following steps: The set of configurable feature elements is sorted according to an integer priority index that forces the sorting order; If the priority indices are different, the element with the smaller value comes first; If the priority indices are the same, the alphabetical order of the element names is compared, and the element with the earlier alphabetical order is ranked first. Element names are arranged in Unicode encoding order; for Chinese characters, the first letter of the pinyin needs to be pre-converted. Filter out invisible elements based on the default display state and render the interface according to the initial visual style.

7. The user interaction customization method based on webpage mode according to claim 1, characterized in that, Calculate the component overlap ratio based on the coordinates of the landing area, including the following steps: Freeze the current interface layout and display a dashed preview frame for the current position; Calculate the geometric intersection area between the landing area and the target component, and determine the adjacency based on the overlap ratio formula: ； in, Indicates the overlap ratio, used to determine the adjacency of components; This represents the area of ​​the geometric intersection between the landing point region and the target component rectangle; This represents the area of ​​the target component, calculated as the width × height of the target component. This represents the area of ​​the dragged component, calculated as the width × height of the dragged component.

8. The user interaction customization method based on webpage mode according to claim 7, characterized in that, Generate custom layout data containing adjacency indicators, visibility markers, and stacking order values, including the following steps: If the overlap ratio is greater than the adjacency threshold, the relationship is determined to be adjacent. The adjacency threshold is based on the critical ratio value determined by human-computer interaction cognitive experiments. Under the premise of ensuring that users can visually recognize the adjacency relationship, the minimum overlap ratio statistical value that users generally agree forms the component association in multiple drag tests is taken. Combined with the density of interface elements, it is dynamically fine-tuned and finally solidified and taken effect through system configuration items. Based on the operation sequence, increment the stacking order value and record the visibility marker to generate custom layout data containing adjacency identifier, visibility marker, and stacking order value.

9. The user interaction customization method based on webpage mode according to claim 8, characterized in that, Generate a collaborative change operation procedure instruction set, including the following steps: When two graphical components form an adjacent relationship, the predefined operation chain mapping table is retrieved. Verify that the output parameter set of the previous operation and the input parameter set of the next operation have no overlap; The historical execution frequency exceeds a preset frequency threshold; When the combined conditions are met, a predefined new operation logic is invoked to generate a single-step shortcut operation command. When the visibility marker is hidden, remove the trigger condition for the corresponding operation step.

10. A user interaction customization method based on a webpage mode according to claim 9, characterized in that, Binding custom layout data and the updated workflow instruction set to a dynamic identity identifier includes the following steps: Custom layout data fields are logically associated with operation flow instruction fields, and the position information of each interface element is associated with the corresponding operation flow instruction code segment. The dynamic identity identifier serves as the primary key, linking configuration data with the version identifier; The version identifier is generated by combining a UNIX timestamp and an incrementing sequence number; When multiple devices conflict, the configuration of the latest version identifier shall prevail and a synchronous alarm shall be triggered.

Images