User interaction customizing method based on webpage mode

Abstract

The invention belongs to the technical field of interface optimization, and relates to a user interaction customizing method based on a webpage mode, which comprises the following steps of: generating a dynamic identity label containing a post role and an operation scene; the method comprises the following steps of: disassembling a webpage system function into independently operable functional elements, and packaging each functional element into a graphical component supporting visual dragging; the dynamic identity label is a key query preset rule base, and the initial interface combination scheme is matched and loaded; generating user-defined layout data containing an adjacent identifier, a visibility mark and a stacking sequence value; analyzing the adjacent identifier and the visibility mark, and generating a collaborative change operation process instruction set through the operation chain mapping table; and binding the custom layout data and the operation process instruction set after collaborative change to the dynamic identity label. The method solves the problem that the traditional solution does not consider the influence of the task emergency degree on the interaction path.

Description

Technical Field

[0001] The invention belongs to the technical field of interface optimization and relates to a user interaction customization method based on a web page mode. Background Art

[0002] Current enterprise software systems commonly suffer from rigid interfaces, preventing users from dynamically adapting their operating environments to their specific tasks. Traditional solutions rely on static role-based permission templates, controlling the display of interface elements through predefined menus of fixed functions for different roles. Administrators must manually configure numerous rules to accommodate organizational changes, achieving only basic functionality visibility.

[0003] Traditional solutions lead to three core drawbacks: permissions are disconnected from task scenarios, and urgent high-priority operations still require clicking through multi-level menus layer by layer; interface layout adjustments cannot be linked to business processes, and users must complete the original operation steps after dragging and dropping components; configuration data is limited to single-device storage, and the interface needs to be repeatedly adjusted when working across terminals.

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

[0005] In order to solve the above problems, the present invention provides a user interaction customization method based on a web page mode.

[0006] A user interaction customization method based on a web page mode comprises the following steps: S1. Generate a dynamic identity containing the job role and operation scenario by reading the job attributes and current task type in the enterprise organizational structure; S2. Decompose the webpage system functions into independently operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop; S3. Use the dynamic identity identifier as a key to query the preset rule library, match the initial interface combination plan, and load it. The initial interface combination plan includes the default display state, mandatory arrangement order, and initial visual style of functional elements. S4. Monitor the user's drag operation, calculate the component overlap ratio based on the coordinates of the drop area, and generate custom layout data including adjacency identifiers, visibility flags, and stacking order values; S5. Parse the adjacency identifier and visibility tag, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step shortcut operation instructions for merging adjacent components and operation steps for skipping hidden components; S6. The customized layout data and the collaboratively changed operation process instruction set are bound to the dynamic identity, stored in the persistent storage area, and a configuration version index mechanism is established.

[0007] A further solution of the present invention generates a dynamic identity including a job role and an operation scenario, comprising the following steps: Obtain the user's job attribute data from the company's existing management system. The job attribute data includes department affiliation, job title, and authority level. The job title field is matched with the preset job role coding table, and the standardized job role code is output; The task type code refers to the standardized machine identifier of the business scenario, using the capitalized English abbreviation standard; Obtain the basic weight and emergency coefficient, and calculate the task type weight coefficient; The permission level and the task type weight coefficient are multiplied to obtain the permission-task product; When the product of authority tasks exceeds the preset urgency threshold, a high priority mark is added to the task type code; Combine standardized job role codes, task type codes, and high-priority tags to generate dynamic identity tags.

[0008] A further solution of the present invention is to provide a preset position role coding table, comprising: The position role coding table is a pre-configured mapping relationship table. Its core function is to convert the diverse position titles within the enterprise into standardized unique role codes. Establish a key-value mapping between position titles and role codes, usually stored in JSON, and support dynamic addition and deletion of entries to adapt to changes in the organizational structure.

[0009] In a further embodiment of the present invention, each functional element is encapsulated as a graphical component that supports visual dragging, including the following steps: Decompose interactive function points according to the principle of functional atomization to form the smallest operation unit that only carries a single business action; Each minimum operation unit is converted into a configurable functional element, and a visual container is bound to each configurable functional element through the encapsulation engine; The packaging engine uses the browser's native drag API to implement displacement detection. The visual container includes operation entry icons, function description labels, and size adaptation logic to form a graphical component that supports drag operations. All graphical components are stored in configurable functional element sets according to business domain classification.

[0010] A further solution of the present invention is to query a preset rule base using a dynamic identity as a key, comprising the following steps: Using the dynamic identity as the query key, retrieve the rule entries that match the preset rule base; The preset rule base is stored in a relational data table, and uses the prefix code of the dynamic identity identifier as the primary key to associate the corresponding interface combination plan number; The initial interface combination scheme associated with the interface combination scheme number defines three elements: the default display state of functional elements, the mandatory arrangement order, and the initial visual style.

[0011] A further solution of the present invention is to match and load the initial interface combination solution, including the following steps: sorting a set of configurable functional elements according to an integer priority index that enforces the sort 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 takes precedence; Element names are arranged in Unicode order, and Chinese scenes require pre-conversion of pinyin initials; Filter invisible elements according to the default display state and render the interface according to the initial visual style.

[0012] A further solution of the present invention is to 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 dotted box for position preview; Calculate the geometric intersection area of ​​the landing area and the target component, and determine the adjacency based on the overlap ratio formula:

[0013] in, Indicates the overlap ratio, used to determine component adjacency; Represents the geometric intersection area of ​​the landing area and the target component rectangle; Represents the target component area, the width × height of the target component; Indicates the area of ​​the dragged component, which is the width × height of the dragged component.

[0014] A further solution of the present invention generates custom layout data including an adjacency indicator, a visibility flag, and a stacking order value, comprising the following steps: If the overlap ratio is greater than the adjacency threshold, it is considered an adjacent relationship; The adjacency threshold is based on a critical ratio determined in human-computer interaction cognitive experiments. To ensure that users can visually identify adjacent relationships, we use the statistical minimum overlap ratio that users generally agree on for forming component associations during multiple drag and drop tests. This is dynamically adjusted based on the density of interface elements, and ultimately implemented through system configuration. The stacking order value is incremented according to the operation timing and the visibility tag is recorded, so as to generate custom layout data including the adjacency identifier, the visibility tag, and the stacking order value.

[0015] A further solution of the present invention generates a collaborative change operation process instruction set, including the following steps: When the adjacency identifier indicates that two graphical components form an adjacency relationship, a predefined operation chain mapping table is retrieved; Verify that the output parameter set of the previous operation has no intersection with the input parameter set of the next operation; The statistical historical execution frequency exceeds the preset frequency threshold; When the combination conditions are met, the predefined new operation logic is called to generate a single-step shortcut operation instruction; When the visibility mark is hidden, the trigger condition of the corresponding operation step is removed.

[0016] A further solution of the present invention is to bind the customized layout data and the collaboratively modified operation flow instruction set to a dynamic identity, including the following steps: The custom layout data field is logically associated with the operation process instruction field, and the position information of each interface element is associated with the corresponding operation process instruction code segment; The dynamic identity acts as a primary key to associate 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 takes precedence and triggers a synchronization alarm.

[0017] In summary, the present invention has the following beneficial technical effects: 1. Implement task-driven dynamic interface optimization, generate dynamic identity tags by integrating job attributes and real-time task types, and automatically load interface combination solutions that match the current business scenario. Users do not need to manually switch functional modules, and key operation components are intelligently sorted by priority and highlighted, significantly improving the efficiency of key business response; 2. Breaking through the bottleneck of the separation between the interface and business logic, when users drag and drop to adjust the layout of components, the system automatically identifies adjacent relationships based on an overlap ratio algorithm and uses an operation chain mapping table to compress multiple steps into single-step instructions. When non-essential components are hidden, the corresponding operation steps are skipped synchronously, truly achieving a "what you see is what you get" interactive closed loop. 3. To ensure consistent interactive experiences across devices, the visualization container's adaptive size logic automatically adapts to devices with different resolutions, dynamically controlling the component display hierarchy based on the stacking order value. Layout data and operational flow instructions are strongly bound via chained indexing, ensuring seamless migration of interactive logic from desktop to mobile, with near-zero layout distortion across devices. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. The drawings are used to provide a further understanding of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0019] Figure 1 A schematic diagram of the flow chart in the embodiment of the present application is disclosed.

[0020] Figure 2 The present invention discloses a schematic structural diagram in an embodiment of the present application. DETAILED DESCRIPTION

[0021] To make the objectives, technical solutions, and advantages of the embodiments of the present invention more clear, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.

[0022] The following is combined with Figure 1-Figure 2 The preferred embodiments of the present invention are described in detail.

[0023] Refer to the attached Figure 1 The present invention proposes a user interaction customization method based on a web page mode, comprising the following steps: S1. Generate a dynamic identity containing the job role and operation scenario by reading the job attributes and current task type in the enterprise organizational structure; S2. Decompose the webpage system functions into independently operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop; S3. Use the dynamic identity identifier as a key to query the preset rule library, match the initial interface combination plan, and load it. The initial interface combination plan includes the default display state, mandatory arrangement order, and initial visual style of functional elements. S4. Monitor the user's drag operation, calculate the component overlap ratio based on the coordinates of the drop area, and generate custom layout data including adjacency identifiers, visibility flags, and stacking order values; S5. Parse the adjacency identifier and visibility tag, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step shortcut operation instructions for merging adjacent components and operation steps for skipping hidden components; S6. The customized layout data and the collaboratively changed operation process instruction set are bound to the dynamic identity, stored in the persistent storage area, and a configuration version index mechanism is established.

[0024] In one embodiment of the present invention, step S1 includes the following steps: After a user logs in to the webpage system, the user's job attribute data is retrieved from the company's existing management system. This job attribute data includes department affiliation, job title, and authority level. This refers to the user's employment information read in real time from the company's existing management system, including but not limited to the department affiliation field (string), job title field (string), and authority level field. The authority level field is a numeric value, with a larger value representing higher operational authority. The user's currently visited page path or action button click sequence is monitored, and the current operation behavior is classified into a task type based on a predefined business scenario mapping table. The task type refers to the classification result obtained by analyzing the current browser address bar path keyword or the three most recent action button click records and comparing them with the business scenario mapping table.

[0025] Referring to Appendix 1, the business scenario mapping table refers to a predefined key-value pair structure mapping table used to map user behaviors (page paths or button clicks) 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 the button ID, and the key value is the business scenario name (such as "order processing").

[0026] Appendix 1 Business scenario mapping table

[0027] Among them, the basic weight represents the baseline value of the inherent importance of the task type, reflecting the strategic priority of the business scenario in the enterprise operation. The value is statically configured by the system administrator based on historical business data. The value range is usually 1-10. The larger the value, the more critical the business impact. The urgency coefficient refers to the multiplication factor for dynamically adjusting the task weight, identifying the timeliness requirements under specific circumstances. The system administrator presets scenario parameters for each task type in the business scenario mapping table, and supports automatic adjustment based on real-time data (such as deadline countdown) at runtime. The task type code refers to the standardized machine identifier of the business scenario, which is used to accurately represent the current operation type in the dynamic identity identification. It uses uppercase English abbreviations (such as ORDER = order processing, APPROVE = approval process). The system administrator uniformly names it when initializing the mapping table. It also supports dynamic addition and deletion of entries to adapt to organizational structure changes.

[0028] The job attribute data and the task type are input to a rule converter, which is a processing program that receives the job attribute data and the task type as input and performs the following operations: 1. The position title field is matched against the preset position role coding table to output a standardized position role code. The position role coding table is a mapping table pre-configured by the system administrator. Its core function is to convert diverse position titles within the enterprise (such as "Senior Sales Representative") into a standardized, unique role code (such as "SALES-SR") for dynamic identification, accurately representing the user's functional attributes.

[0029] Refer to Appendix 2 for the coding rules for the position role coding table. System administrators design a structured coding format based on the company's job grade system: "[Department Abbreviation] - [Job Grade]." This ensures that positions such as Sales Director and Finance Specialist receive unique identifiers that conform to standards such as "SALES-MGR" and "FINANCE-JR." The system backend establishes a key-value mapping between position titles and role codes, such as {Senior Sales Representative: "SALES-SR," Finance Director: "FINANCE-MGR"}. This mapping is typically stored in JSON or a database table, supporting dynamic addition and deletion of entries to accommodate organizational changes. For example, to add a new "Data Analyst" position, the system administrator simply adds a "Data Analyst":"DATA-ANALYST" mapping for it to take effect.

[0030] Appendix 2 Position Role Coding Table

[0031] The weight coefficient associated with the position role and job title is pre-set by the system administrator based on the company's job hierarchy and is used to calculate the permission-task product. The permission level is a numerical representation of a user's operational permissions, with higher values ​​representing higher permissions. This level is derived from the user's position attribute data in the company's existing management system.

[0032] 2. Calculate the task type weight coefficient to satisfy the following formula:

[0033] in, is the task type weight coefficient; is the basic weight, The emergency coefficient is obtained through the business scenario mapping table predefined by the system administrator.

[0034] Calculate the product of authority tasks to satisfy the following formula:

[0035] in, Indicates the product of permission tasks, used to determine whether to trigger the high priority mark; Indicates the permission level, obtained from the user's position attribute data in the enterprise's existing management system; Indicates the task type weight.

[0036] 3. The product of the authority-task ratio is compared with the preset urgency threshold. If the product is greater than the preset urgency threshold, the task type code is marked as high priority. The task urgency threshold is the critical value used to determine whether a task is urgent and is configured by the system administrator based on the timeliness of business process responses.

[0037] 4. The rule converter generates a dynamic identity tag containing a standardized job role code and task type code based on the preset job role weight coefficient and task urgency threshold.

[0038] A dynamic identity is a string generated by combining a standardized job role code and a task type code. Its format is "job role code_task type code_priority tag." It is used to identify the user's identity in the current task, such as "SALES-SR_ORDER_HIGH."

[0039] For example, when a sales employee logs into the system, the user's job attribute data is obtained from the company's existing management system as {Department: Sales Department 2, Position: Senior Sales Representative, Authority Level: 3}. The access path is detected as " / order / create". The business scenario mapping table is queried to obtain the path keyword "order" corresponding to the task type "Order Processing". The position role coding table matches "Senior Sales Representative" to the role code "SALES-SR". The permission level 3 and the task type weight 2 are multiplied to obtain a permission-task product of 6. The preset task urgency threshold is 5. It can be seen that if the product of the authority tasks is greater than the preset task urgency threshold, a high priority mark will be added to the task type code, and the task type code will be appended with the suffix "_HIGH" to generate a dynamic identity: "SALES-SR_ORDER_HIGH".

[0040] In one embodiment of the present invention, step S2 includes the following steps: After generating the dynamic identity, the system traverses all interactive functional points in the webpage and breaks them down into minimum operational units according to the principle of functional atomization. This principle requires each functional element to carry only a single business action (e.g., "Submit Order" only contains submission logic, without data validation or payment). A minimum operational unit is an independent business action that cannot be further decomposed (e.g., the "Customer Name Input Box" only processes text input, and the "Inventory Quantity Display Card" only displays data). This independent business action, when executed, does not rely on the intermediate results of other actions. Each minimum operational unit is converted into a configurable functional element. A configurable functional element encapsulates the minimum operational unit into a UI component whose properties can be dynamically modified through a configuration file.

[0041] Each configurable functional element is bound to a visual container through a packaging engine. The packaging 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 by business domain. The configurable functional element set is a virtual collection that stores all graphical components and is organized in a tree-like JSON structure. The first-level branches are divided by business (such as "Financial Management" and "Inventory Management"), and the second-level branches are divided by operation object (such as "Reimbursement Form" and "Purchase Order").

[0042] Among them, the visual container refers to the rectangular display area that wraps the functional elements, which contains three required sub-elements; the operation entry icon is an SVG vector graphic that represents the function type (such as the shopping cart icon represents the order function); the function description label is text that explains the purpose of the element (such as creating an expense report); the size adaptation logic automatically adjusts the container size according to the CSS rules of the screen width to ensure that the component maintains a constant proportion of the operational area at different resolutions.

[0043] For example, the "travel reimbursement" function of the financial system; 1. Disassemble the minimum operation unit: Action 1, fill in the reimbursement amount and encapsulate it as a number 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.

[0044] 2. Add a visual container for the number 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 is reduced to 30% on mobile devices; the three components are stored in the "Financial Management - Travel Reimbursement" branch of the configurable functional element set.

[0045] 3. User drag verification: When the financial staff drags the "Upload Invoice" component to the homepage, the visual container automatically scales to a size suitable for the mobile screen.

[0046] In one embodiment of the present invention, step S3 includes the following steps: 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-set rule base. Each rule entry contains an interface combination scheme number. The initial interface combination scheme associated with this number defines three elements: the default display state of the functional elements, the mandatory sorting order, and the initial visual style. After loading this scheme, the configurable functional element set is sorted according to the mandatory sorting order. The mandatory sorting order is determined by an integer priority index preset by the system administrator, ranging from 1 to 100. If two functional elements in the set have the same priority index, they are sorted alphabetically by element name. Invisible elements are filtered based on the default display state, and the interface is finally rendered according to the initial visual style.

[0047] Compare the priority indices of two functional elements. If the priority indices differ, the element with the smaller value is ranked first. If the priority indices are the same, compare the alphabetical order of the element names, and the element with the smaller value is ranked first. Element names are sorted in Unicode order, and the first letter of the pinyin must be pre-converted for Chinese characters.

[0048] The initial visual style includes, but is not limited to, standardized parameters for background color, border thickness, and icon size. System administrators configure the integer priority index based on the criticality of the business. Core business processes directly linked to the main business chain (such as payment confirmation and contract submission) can be assigned an index of 80-100; auxiliary functions that are non-essential but enhance the user experience (such as history viewing and note entry) can be assigned an index of 40-79; and backend system management functions (such as log export and interface zoom) can be assigned an index of 1-39.

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

[0050] The preset rule base is stored in a relational data table, using a dynamic identifier prefix (such as "PROD_LINE_A_") as the primary key. This prefix is ​​associated with the corresponding interface combination scheme number, which is mapped to the scheme definition table to obtain three configuration elements: default display state, mandatory sort order (integer priority index from 1-100), and initial visual style (style codes such as RGB color value and size, and a style panel that pops up when dragging and releasing, supporting modification of visual parameters such as border and background color). Rule entries are recorded as single rows in the preset rule base.

[0051] For example, for the dynamic identity "SALES-SR_ORDER_HIGH", the prefix code "SALES-SR_" is extracted to query the preset rule library, matching the rule entry {matching key: SALES-SR, solution number: LAYOUT_03, effective condition: contains _HIGH}. The interface combination solution number LAYOUT_03 is defined as the display state (customer analysis component is visible and available, inventory warning component is hidden), sorting order (order creation component priority index 85, contract template component priority index 82, customer analysis component priority index 73), and visual style (high priority index components are given a red border). The configurable functional element set filters visible elements, including order creation, contract templates, and customer analysis; sort by priority: 1. Order creation → 2. Contract templates → 3. Customer analysis; and add a red border to the order creation component.

[0052] In one embodiment of the present invention, step S4 includes the following steps: After loading the initial interface combination plan, the browser native drag event listener is started to capture the user's drag operation on the graphical component in real time; when it is detected that the graphical component is being dragged, the current interface layout is frozen and a position preview dotted box is displayed. The position preview dotted box refers to a semi-transparent rectangular outline whose size is consistent with the container of the dragged component. It is redrawn in real time as the mouse moves, and is used to visually prompt the expected position after release; the landing area is calculated according to the coordinates when the mouse is released to determine the relative position relationship between the graphical component and the surrounding components; the adjacency is determined based on the overlap ratio of the landing area coordinates and the adjacent component boundaries, and combined with the component visibility status and stacking order value, custom layout data containing adjacency identification, visibility mark, and stacking order value is generated.

[0053] Among them, the stacking order value refers to the integer value that records the order in which components are displayed. The component released later automatically obtains a larger index value than the previous component. After the component is dragged and released, the maximum stacking order value of all components in the current interface is automatically retrieved, and the order value of the newly released component is set to the maximum value plus 1 to ensure that the component is always displayed above other components and that the new component is displayed above the old component.

[0054] Freezing the current interface layout means pausing the interactive response and position updates of all components in the interface, maintaining the layout state before the drag. The landing area refers to the rectangular area where the dragged component is expected to be placed when the mouse is released. The screen coordinate point at the time of mouse release (denoted as X, Y) is the top-left corner of the dragged component, and the original width W and height H of the dragged component are superimposed to form a landing area of ​​[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.

[0055] The overlap ratio is the ratio of the intersection area of ​​the landing area rectangle and the target component rectangle to the target component area. Target components refer to all other graphical components in the interface that are in a static state and have a spatial interaction relationship with the landing area of ​​the dragged component while the user is dragging the current component. For example, when the user drags the "Inventory Registration" component, fixed components in the interface such as "Outbound Record", "Inventory Query", and "Report Statistics" are all potential target components, satisfying the following formula:

[0056] in, Indicates the overlap ratio, used to determine component adjacency; Represents the geometric intersection area of ​​the landing area and the target component rectangle; Represents the target component area, the width × height of the target component; Represents the area of ​​the dragged component, which is the width x height of the dragged component. If the overlap ratio is greater than the adjacency threshold, it is considered an adjacent relationship.

[0057] The adjacency threshold is based on the critical ratio value determined in human-computer interaction cognitive experiments. To ensure that users can visually identify adjacent relationships, the minimum overlap ratio statistical value generally recognized by users to form component associations in multiple drag and drop tests is taken. Combined with dynamic fine-tuning of the interface element density, it is finally solidified and takes effect 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.

[0058] For example, when a warehouse manager operates the inventory management system, component A (incoming registration) in the initial interface is located at coordinates (0, 0) and has a size of 200×200 pixels, and component B (outgoing record) is located at the adjacent coordinates (200, 0) and has the same size of 200×200 pixels; When component A is dragged to the new coordinates (300, 100) and released, the landing area is calculated (300-500 on the X axis, 100-300 on the Y axis). This area is then detected with the original area of ​​component B (200-400 on the X axis, 0-200 on the Y axis). An overlapping area is formed between 300-400 on the X axis and 100-200 on the Y axis (area = 100×200 = 20,000 square pixels). The total area of ​​components A and B is 40,000 square pixels each. Substituting this into the overlap ratio calculation formula yields a 50% overlap ratio. The preset adjacency threshold is 25%. If the overlap ratio exceeds this threshold, an association identifier containing "component A adjacent to component B" is generated, and both are recorded as visible. Based on 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 (after adjusting the elements). Finally, the above data is integrated to form the custom layout data.

[0059] In one embodiment of the present invention, step S5 includes the following steps: After generating the custom layout data, the adjacency identifier and visibility mark are parsed. When the adjacency identifier indicates that two graphical components form an adjacent relationship, the predefined operation chain mapping table is retrieved to find the combination rule of the minimum operation unit corresponding to the two components. If a matching rule exists, a single-step shortcut operation instruction is generated to replace the original step-by-step operation sequence. At the same time, the visibility mark is detected. If the visibility mark is in the hidden state, the operation step trigger condition associated with the component is removed, and finally the operation process instruction set after the collaborative change is generated. The single-step shortcut operation instruction refers to compressing the original multi-step operation into a single interactive instruction package. For example, the original requirement is to open the order component first and then click Save, which is then merged into an automatic save instruction. The operation step trigger condition refers to the decision node that controls the direction of the business process. For example, the approval process is triggered when the "multi-level approval" component is visible, and it is skipped when it is hidden.

[0060] Refer to Appendix 3. The operation chain mapping table records the combination conditions and new operation logic of merging operation pairs. The system administrator pre-configures the data table based on high-frequency operation scenarios. Adjacent component operation pairs that meet the conditions of no data dependency and high-frequency use are compressed into single-step quick operations through pre-defined merging codes or flow charts. At the same time, the original operation permissions are inherited and the background execution logic is retained, ultimately achieving interaction path compression. It contains three columns: 1. Component pair, which records the IDs of two graphical components that can be merged. For example, "A_B" means components A and B are adjacent. 2. Combine the conditions and check whether the data input and output relationship of the two minimum operation units satisfies the following formula:

[0061] in, Represents the output parameter set of the previous operation, which refers to the set of result data items generated after the operation is executed, such as {invoice ID, scanning time} generated by "invoice scanning"; The input parameter set for the subsequent operation refers to the set of external data items required for the operation, such as {invoice ID, department code} required for "reimbursement submission"; Indicates the historical execution frequency, counting the number of weeks in which two operations were executed consecutively in the log; The frequency threshold is represented by a sliding time window statistics based on the complete business cycle. The average number of times adjacent operations are executed sequentially over multiple consecutive natural weeks in historical data is dynamically calculated. Processes with high stability can be shortened to 4 weeks, while processes with large seasonal fluctuations need to be extended to 26 weeks.

[0062] The combination condition is met when two operations have no data dependencies and their execution frequency exceeds the frequency threshold. Mergeable components must meet the requirement that their corresponding minimum operation units are sequentially executed and that no third-party operations intervene.

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

[0064] Appendix 3 Operation chain mapping table

[0065] For example, a finance officer drags the "Invoice Scan" component to a location adjacent to the "Reimbursement Submission" component in the reimbursement system and sets the "Supervisor Approval" component to a hidden state. After detecting the change in component adjacency, the system automatically queries the operation chain mapping table and identifies that the "Invoice Scan_Reimbursement Submission" combination meets two coordination conditions: Confirm invoice scanning results through data flow analysis and submit directly without manual intervention; Statistics show that this combination of operations has reached 35 times this week, significantly exceeding the frequency threshold of 20 times; Based on this, a single-step shortcut command is generated to automatically trigger reimbursement submission upon completion of the scan. Simultaneously, the "Supervisor Approval" component is detected and set to a hidden state, removing the trigger condition of waiting for approval after submission in the original process. 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 "what you see is what you get" efficiency improvements by dynamically binding interface operations and business processes.

[0066] In one embodiment of the present invention, step S6 includes the following steps: After completing the collaborative change of the operation process, the custom layout data is bound and encapsulated with the collaboratively changed operation process instruction set. Binding and encapsulation refers to the logical association of the custom layout data field with the operation process instruction field, and the location information of each interface element is associated with the corresponding operation process instruction code segment. The dynamic identity of the current user is extracted as the storage primary key. The primary key is associated with the bound configuration data and stored in the persistent storage area. The persistent storage area refers to the browser's local storage or a dedicated storage space in the server database, with the dynamic identity as the key name and the configuration data JSON object as the key value. A configuration version index mechanism is established to ensure that the version number is incremented with each update. When the user logs in to the system again, the latest version of the configuration data is retrieved through the dynamic identity. After parsing, the interface layout and operation process logic are loaded at the same time.

[0067] When simultaneous submissions from multiple devices are detected, the configuration with the latest timestamp is used as the basis and a synchronization alarm is triggered. The system then displays a version difference comparison interface, such as layout and operation process change points, and the user manually chooses to retain the version or merge the configurations.

[0068] The configuration version indexing mechanism ensures version uniqueness through a combination of timestamp and serial number. It consists of two inseparable components: the timestamp is the UNIX time in milliseconds when the storage operation is performed; the serial number is an integer value that is automatically increased with each update read from the persistent storage area. The two are combined to form a version identifier in the format of "timestamp_serial number".

[0069] Binding encapsulation refers to establishing a unique association between each component coordinate in the layout data and the corresponding operation code segment in the operation process instruction set, forming a chain index of coordinates → operation ID → instruction code.

[0070] For example, after completing the interface optimization, the sales manager first establishes a bidirectional 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 "One-click Order" command generated by the collaborative change. This creates a "coordinates → command" binding relationship, meaning that clicking the (100, 200) area triggers the order creation process. The sales manager's dynamic identity, "SALES-MGR_CLIENT_HIGH," is extracted as the primary key. The encapsulated configuration data, {layout data: {"Customer Management": {x:100, y:200}}, operation flow: {"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 the persistent storage area. When the sales manager logs into the system the next day, their identity, "SALES-MGR_CLIENT_HIGH," is recognized. Automatically retrieve the latest version of the configuration under the primary key, and complete the interface rendering after parsing: the customer management component is accurately positioned to the (100, 200) coordinates and function loading: the adjacent area activates the one-click order instruction to achieve the coordinated effectiveness of the interface layout and operation logic.

[0071] See attached Figure 2 The present invention also proposes a user interaction customization system based on a web page mode, comprising the following modules: The identity generation module is used to read the job attributes and current task types in the enterprise organizational structure and generate a dynamic identity that includes the job role and operation scenario; Functional element encapsulation module, used to decompose web system functions into independently operable functional elements, each of which is encapsulated as a graphical component that supports visual drag and drop; The interface scheme loading module is used to query the preset rule library using the dynamic identity as the key, match the initial interface combination scheme and load it. The initial interface combination scheme includes the default display state, mandatory arrangement order and initial visual style of functional elements; The layout adjustment response module is used to monitor user drag operations, calculate the component overlap ratio based on the coordinates of the drop area, and generate custom layout data containing adjacency identifiers, visibility markers, and stacking order values; The operation process collaboration module is used to parse the adjacency identifier and visibility mark, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step shortcut operation instructions for merging adjacent components and skipping the operation steps of hidden components; The configuration persistence module is used to bind the customized layout data and the collaboratively changed operation process instruction set to the dynamic identity, store them in the persistent storage area, and establish a configuration version index mechanism.

[0072] It should be noted that the formulas described above, through the principle of dimensional consistency and mathematical standardization (e.g., normalization, dimensionless parameter conversion, or unified unit system), can translate physical quantities of different attributes into unitless standard values ​​or homogeneous, superimposable parameters. This eliminates the interference of different dimensions on operational logic, ensuring that the formulas retain the distribution characteristics of the original data while maintaining mathematical rationality and adaptability to objective laws. These are merely exemplary embodiments of the present invention and are not intended to limit the scope of the invention.

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

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

[0075] The above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. A user interaction customization method based on a web page mode, characterized in that: The following steps are involved: S1. Generate a dynamic identity containing the job role and operation scenario by reading the job attributes and current task type in the enterprise organizational structure; S2. Decompose the webpage system functions into independently operable functional elements, and encapsulate each functional element into a graphical component that supports visual drag and drop; S3. Use the dynamic identity identifier as a key to query the preset rule library, match the initial interface combination plan, and load it. The initial interface combination plan includes the default display state, mandatory arrangement order, and initial visual style of functional elements. S4. Monitor the user's drag operation, calculate the component overlap ratio based on the coordinates of the drop area, and generate custom layout data including adjacency identifiers, visibility flags, and stacking order values; S5. Parse the adjacency identifier and visibility tag, and generate a collaborative change operation process instruction set through the operation chain mapping table, including single-step shortcut operation instructions for merging adjacent components and operation steps for skipping hidden components; S6. The customized layout data and the collaboratively changed operation process instruction set are bound to the dynamic identity, stored in the persistent storage area, and a configuration version index mechanism is established.

2. The user interaction customization method based on web page mode according to claim 1, characterized in that: Generating a dynamic identity that includes job roles and operation scenarios involves the following steps: Obtain the user's job attribute data from the company's existing management system. The job attribute data includes department affiliation, job title, and authority level. The job title field is matched with the preset job role coding table, and the standardized job role code is output; The task type code refers to the standardized machine identifier of the business scenario, using the capitalized English abbreviation standard; Obtain the basic weight and emergency coefficient, and calculate the task type weight coefficient; The permission level and the task type weight coefficient are multiplied to obtain the permission-task product; When the product of authority tasks exceeds the preset urgency threshold, a high priority mark is added to the task type code; Combine standardized job role codes, task type codes, and high-priority tags to generate dynamic identity tags.

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

4. The user interaction customization method based on web page mode according to claim 1, characterized in that: Each functional element is encapsulated as a graphical component that supports visual dragging, including the following steps: Decompose interactive function points according to the principle of functional atomization to form the smallest operation unit that only carries a single business action; Each minimum operation unit is converted into a configurable functional element, and a visual container is bound to each configurable functional element through the encapsulation engine; The packaging engine uses the browser's native drag API to implement displacement detection. The visual container includes operation entry icons, function description labels, and size adaptation logic to form a graphical component that supports drag operations. All graphical components are stored in configurable functional element sets according to business domain classification.

5. The user interaction customization method based on web page mode according to claim 1, characterized in that: Using the dynamic identity as the key to query the preset rule base includes the following steps: Using the dynamic identity as the query key, retrieve the rule entries that match the preset rule base; The preset rule base is stored in a relational data table, and uses the prefix code of the dynamic identity identifier as the primary key to associate the corresponding interface combination plan number; The initial interface combination scheme associated with the interface combination scheme number defines three elements: the default display state of functional elements, the mandatory arrangement order, and the initial visual style.

6. The user interaction customization method based on web page mode according to claim 5, characterized in that: Matching the initial interface combination scheme and loading it includes the following steps: sorting a set of configurable functional elements according to an integer priority index that enforces the sort 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 takes precedence; Element names are arranged in Unicode order, and Chinese scenes require pre-conversion of pinyin initials; Filter invisible elements according to the default display state and render the interface according to the initial visual style.

7. The user interaction customization method based on web page mode according to claim 1, characterized in that: Calculating the component overlap ratio based on the coordinates of the landing area includes the following steps: Freeze the current interface layout and display a dotted box for position preview; Calculate the geometric intersection area of ​​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 component adjacency; Represents the geometric intersection area of ​​the landing area and the target component rectangle; Represents the target component area, the width × height of the target component; Indicates the area of ​​the dragged component, which is the width × height of the dragged component.

8. The user interaction customization method based on web page mode according to claim 7, characterized in that: Generating custom layout data that includes adjacency flags, visibility flags, and stacking order values ​​involves the following steps: If the overlap ratio is greater than the adjacency threshold, it is considered an adjacent relationship; The adjacency threshold is based on a critical ratio determined in human-computer interaction cognitive experiments. To ensure that users can visually identify adjacent relationships, we use the statistical minimum overlap ratio that users generally agree on for forming component associations during multiple drag and drop tests. This is dynamically adjusted based on the density of interface elements, and ultimately implemented through system configuration. The stacking order value is incremented according to the operation timing and the visibility tag is recorded, so as to generate custom layout data including the adjacency identifier, the visibility tag, and the stacking order value.

9. The user interaction customization method based on web page mode according to claim 8, characterized in that: Generate a collaborative change operation process instruction set, including the following steps: When the adjacency identifier indicates that two graphical components form an adjacency relationship, a predefined operation chain mapping table is retrieved; Verify that the output parameter set of the previous operation has no intersection with the input parameter set of the next operation; The statistical historical execution frequency exceeds the preset frequency threshold; When the combination conditions are met, the predefined new operation logic is called to generate a single-step shortcut operation instruction; When the visibility mark is hidden, the trigger condition of the corresponding operation step is removed.

10. The user interaction customization method based on web page mode according to claim 9, characterized in that: Binding the custom layout data and the collaboratively modified operation flow instruction set to the dynamic identity includes the following steps: The custom layout data field is logically associated with the operation process instruction field, and the position information of each interface element is associated with the corresponding operation process instruction code segment; The dynamic identity acts as a primary key to associate 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 takes precedence and triggers a synchronization alarm.

Images