Intelligent interaction system and device capable of achieving personalized layout and readable storage medium

Abstract

The invention provides an intelligent interaction system and device capable of achieving personalized layout and a readable storage medium, and the system comprises a layout setting module which is used for enabling a user to obtain the demands of the user, extracting a preset function module, carrying out the user-defined setting of the function module, and generating personalized layout information, so as to adapt to different use scenes and operation habits; the user-defined setting comprises the adjustment of the position, size and display mode of each functional module; the storage module is used for storing the personalized layout information set by the user and automatically loading the personalized layout information set by the user when the user logs in the system again; and the adaptive module is used for acquiring the screen size and resolution of the user equipment and automatically adjusting the personalized layout. According to the method, the operation efficiency and the satisfaction degree of the user can be remarkably improved, the user can find the required function module more quickly by realizing personalized layout, the operation time is shortened, and the working efficiency is improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and more particularly to an intelligent interactive system, device and readable storage medium capable of personalized layout. Background Art

[0002] With the rapid development of information technology and the popularization of the Internet, intelligent interactive systems have become an indispensable part of people's daily life and work. These systems have greatly improved users' work efficiency and quality of life by providing intuitive and convenient operation interfaces. However, traditional intelligent interactive systems often adopt fixed layouts and interface designs, which are difficult to meet users' diverse usage needs and operation habits.

[0003] In current intelligent interactive systems, the layout and style of the user interface are usually pre-set by the system developer, and users cannot make personalized adjustments according to their preferences and needs during use. This fixed design method not only limits the user's operational flexibility, but may also cause users to feel inconvenienced or inefficient in certain usage scenarios.

[0004] In addition, with the popularity and diversification of mobile devices, the screen sizes and resolutions of different devices vary significantly. Traditional intelligent interaction systems often cannot adapt well to these differences, resulting in inconsistent interface effects on different devices, affecting user experience. Summary of the invention In view of the problems existing in the prior art, the purpose of the present invention is to provide an intelligent interactive system, device and readable storage medium with personalized layout, which can significantly improve user operation efficiency and satisfaction. By realizing personalized layout, users can find the required functional modules more quickly, reduce operation time and improve work efficiency.

[0005] In order to achieve the above object, the present invention is implemented through the following technical solutions: In a first aspect, the present invention discloses an intelligent interactive system with personalized layout, comprising: The layout setting module obtains the user's needs, extracts the preset functional modules and customizes the functional modules to generate personalized layout information to adapt to different usage scenarios and operating habits; the customized settings include adjusting the position, size and display mode of each functional module; The storage module is used to save the personalized layout information set by the user, and automatically load the personalized layout information set by the user when the user logs into the system again; The adaptive module is used to obtain the screen size and resolution of the user's device and automatically adjust the personalized layout.

[0006] Furthermore, the layout setting module includes: The position adjustment unit is used to use JavaScript to monitor mouse events to record the initial position and current mouse position of the function module when the user long presses and drags a function module, and to determine the adjustment target position of the function module by calculating the moving distance of the mouse; A size adjustment unit is used to set a draggable control point at the edge of the functional module, use JavaScript to monitor mouse events to obtain action information of the user's mouse pressing and moving on the control point in real time, calculate the moving distance of the control point according to the action, and adjust the width and height of the functional module according to the moving distance; The display mode switching unit is used to configure the display mode options for the functional module and generate the corresponding display mode switching button. It uses JavaScript to monitor the user's click event. When the user clicks the display mode switching button, the corresponding class name or style attribute is switched for the functional module to update the style and layout of the functional module.

[0007] Furthermore, the display mode options include: list mode, icon mode, and card mode.

[0008] Furthermore, the storage module includes: A storage control unit, used to store the user's personalized layout information in the form of key-value pairs in the browser's IndexedDB database, and temporarily store the relevant layout information during the session; A data conversion unit, used to convert the user's personalized layout information between personalized layout information and JavaScript objects through data serialization and deserialization algorithms; The data synchronization unit is used to perform periodic synchronization and storage of personalized layout information.

[0009] Furthermore, the storage module also includes: The data error processing unit is used to use the try-catch statement to capture information errors during the process of reading and storing personalized layout information. When an information error is found, the default layout type is used or the user is prompted to re-enter the personalized layout type to re-set the layout.

[0010] Further, the adaptive module comprises: The size acquisition unit is used to obtain the screen size and resolution of the user's device through media queries in CSS; A display ratio control unit is used to calculate the size and position ratio of each functional module through a ratio calculation algorithm according to the screen size and resolution, and make corresponding adjustments; A position adjustment unit, used to divide the screen into a grid system, set the size, spacing and number of grid templates according to the screen size, place the functional modules in the grid templates, and adjust the position and size of the functional modules according to the size of the grid templates; Image and font adjustment units are used to set the maximum size of images based on screen size and resolution using the CSS max-width and max-height properties, and to set the font size using relative units rem and em.

[0011] Furthermore, the ratio calculation algorithm uses JavaScript to calculate the size and position ratio of each functional module, and sets the size and position of each element of the functional module in combination with the relative units of CSS; the relative units include percentage, viewport width vw, and viewport height vh.

[0012] Furthermore, the adaptive module adopts Bootstrap, React and Vue front-end frameworks, and the adaptive module uses JavaScript to monitor window size change events.

[0013] In a second aspect, the present invention further discloses an intelligent interactive device with personalized layout, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the functions of the intelligent interactive system with personalized layout as described in any one of the above items when executing the computer program.

[0014] In a third aspect, the present invention further discloses a readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the function of the intelligent interactive system with personalized layout as described in any of the above items is realized.

[0015] Compared with the prior art, the beneficial effect of the present invention is that the present invention provides an intelligent interactive system, device and readable storage medium with personalized layout, which brings users a more convenient, efficient and beautiful intelligent interactive experience by providing highly personalized layout settings, persistent storage and fast recovery, intelligent adaptive capabilities, efficient data processing and synchronization, error handling and fault tolerance mechanisms and advanced front-end technical support.

[0016] The present invention enables users to freely adjust the position, size and display mode (such as list mode, icon mode, card mode) of functional modules according to their own needs and operating habits. This highly personalized setting greatly improves the user experience and enables the system to adapt to the usage scenarios of different users.

[0017] The present invention can save the personalized layout information of the user and automatically load it when the user logs in again, without the need for the user to re-set it. This not only saves the user's time, but also improves the usability of the system. At the same time, it also ensures the effective processing and timely synchronization of personalized layout information. Through the data serialization and deserialization algorithm, and the timed synchronization storage mechanism, the accuracy and consistency of the data are guaranteed.

[0018] The present invention can capture and process errors in the process of reading and storing personalized layout information, avoiding layout problems caused by data errors. At the same time, by providing a default layout or prompting the user to re-enter personalized layout information, the fault tolerance and stability of the system are enhanced.

[0019] The present invention can automatically adjust the personalized layout according to the screen size and resolution of the user's device, ensuring that the best display effect can be presented on different devices. This is crucial to improving the compatibility and user experience of cross-device access. The adaptive module uses front-end frameworks such as Bootstrap, React and Vue, which provide rich components and powerful functions, making the development of the system more efficient and flexible. At the same time, by monitoring the window size change event through JavaScript, real-time response and adaptive adjustment to the screen size change are achieved. In addition, the present invention can also automatically adjust the maximum size of the image and the size of the font according to the screen size and resolution, ensuring that clear and beautiful visual effects can be presented on different devices. This helps to improve the user's visual experience and satisfaction.

[0020] It can be seen that compared with the prior art, the present invention has outstanding substantive features and significant progress, and the beneficial effects of its implementation are also obvious. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying creative work.

[0022] Figure 1 It is a system structure diagram of a specific implementation mode of the present invention. DETAILED DESCRIPTION

[0023] In order to enable those skilled in the art to better understand the scheme of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0024] See also Figure 1 As shown, this embodiment provides an intelligent interactive system with personalized layout, including: a layout setting module 1, a storage module 2 and an adaptive module 3.

[0025] Layout setting module 1, the user obtains the user's needs, extracts the preset functional modules and customizes the functional modules to generate personalized layout information to adapt to different usage scenarios and operating habits; the customized settings include adjusting the position, size and display mode of each functional module.

[0026] Specifically, the layout setting module 1 allows the user to customize each functional module according to his or her own preferences and needs. The user can adjust the position, size and display mode of each functional module to adapt to different usage scenarios and operating habits.

[0027] The storage module 2 is used to store the personalized layout information set by the user, and automatically load the personalized layout information set by the user when the user logs into the system again.

[0028] Specifically, the storage module 2 is used to store the personalized layout information set by the user. When the user opens the system again, the previously set layout can be automatically loaded without repeated settings.

[0029] The adaptive module 3 is used to obtain the screen size and resolution of the user's device and automatically adjust the personalized layout.

[0030] Specifically, the adaptive module 3 can automatically adjust the personalized layout according to the screen size and resolution of the user's device to ensure that a good display effect can be obtained on different devices.

[0031] In a specific implementation, the layout setting module 1 includes: a position adjustment unit 11 , a size adjustment unit 12 and a display mode switching unit 13 .

[0032] The position adjustment unit 11 is used to monitor the mouse event using JavaScript to record the initial position and current mouse position of the function module when the user long presses and drags a function module, and determine the adjustment target position of the function module by calculating the moving distance of the mouse.

[0033] As an example, the position adjustment unit 11 is specifically used for: When a user long presses and drags a function module, the initial position of the module and the current mouse position are recorded. As the mouse moves, the new position of the function module is continuously calculated, and the positions of other modules are updated in real time to avoid overlap. When the user releases the mouse, the function module is fixed at the new position. Specifically, JavaScript can be used to monitor mouse events, including mouse press, move, and release. The new position of the module is determined by calculating the distance the mouse moves. CSS positioning attributes (such as position, top, left, etc.) can be used to set the position of the module.

[0034] The following script can be used to implement the above functions: let draggingModule = null; let offsetX = 0; let offsetY = 0; function startDrag(module) { draggingModule = module; offsetX = event.clientX - module.offsetLeft; offsetY = event.clientY - module.offsetTop; module.style.cursor = 'move'; } function onDrag(event) { if (draggingModule) { const newLeft = event.clientX - offsetX; const newTop = event.clientY - offsetY; draggingModule.style.left = newLeft + 'px'; draggingModule.style.top = newTop + 'px'; } } function stopDrag() { draggingModule = null;} The size adjustment unit 12 is used to set a draggable control point at the edge of the functional module, use JavaScript to monitor mouse events to obtain action information of the user's mouse pressing and moving on the control point in real time, calculate the moving distance of the control point according to the action, and adjust the width and height of the functional module according to the moving distance.

[0035] As an example, the size adjustment unit 12 is specifically used for: Draggable control points are set at the edge of the function module. Users can adjust the size of the module by dragging these control points. According to the moving distance of the control points, the new width and height of the function module are calculated, and the style of the function module is updated. Among them, JavaScript can be used to monitor mouse events. When the user presses the mouse on the control point and moves it, the moving distance of the control point is calculated. To adjust the width and height of the function module according to the moving distance, the width and height attributes of CSS can be used to set the size of the function module.

[0036] The following script can be used to implement the above size adjustment function: let resizingModule = null; let startWidth = 0; let startHeight = 0; function startResize(module, direction) { resizingModule = module; startWidth = module.offsetWidth; startHeight = module.offsetHeight; if (direction === 'right' || direction === 'bottom') { module.style.cursor = 'e-resize'; } else if (direction === 'left' || direction === 'top') { module.style.cursor = 'nw-resize'; } } function onResize(event) { if (resizingModule) { let newWidth, newHeight; if (resizingModule.offsetLeft + resizingModule.offsetWidth>event.clientX) { newWidth = startWidth - (event.clientX - (resizingModule.offsetLeft +resizingModule.offsetWidth)); } else { newWidth = startWidth + (event.clientX - resizingModule.offsetLeft); } if (resizingModule.offsetTop + resizingModule.offsetHeight>event.clientY) { newHeight = startHeight - (event.clientY - (resizingModule.offsetTop+ resizingModule.offsetHeight)); } else { newHeight = startHeight + (event.clientY - resizingModule.offsetTop); } resizingModule.style.width = newWidth + 'px'; resizingModule.style.height = newHeight + 'px'; } } function stopResize() { resizingModule = null; } The display mode switching unit 13 is used to configure display mode options for the function module, generate a corresponding display mode switching button, and use JavaScript to monitor the user's click event. When the user clicks the display mode switching button, the corresponding class name or style attribute is switched for the function module to update the style and layout of the function module. The display mode options include: list mode, icon mode, and card mode.

[0037] As an example, the display mode switching unit 13 is specifically used for: Provide different display options, such as list mode, icon mode, card mode, etc. When the user selects a display mode, update the style and layout of the functional module according to the selected mode. Specifically, use JavaScript to monitor the user's click event. When the user clicks the display mode switch button, switch the corresponding class name or style attribute. You can use different CSS style rules to achieve different display modes.

[0038] The following script can be used to implement the above display mode switching function: function switchDisplayMode(mode) { const modules = document.querySelectorAll('.module'); modules.forEach(module => { module.classList.remove('list-mode', 'icon-mode', 'card-mode'); module.classList.add(mode); }); } In a specific implementation, the storage module 2 includes: a storage control unit 21 , a data conversion unit 22 , a data synchronization unit 23 and a data error processing unit 24 .

[0039] The storage control unit 21 is used to store the user's personalized layout information in the form of key-value pairs in the browser's IndexedDB database, and temporarily store the relevant layout information during the session.

[0040] As an example, the storage control unit 21 is specifically used to: use localStorage.setItem(key, value) to store the personalized layout information, and use localStorage.getItem(key) to read the personalized layout information.

[0041] It is worth mentioning that IndexedDB is a database that stores a large amount of structured data in the browser. It can be used to store more complex personalized layout information. The database supports transaction processing and can provide better data management functions. The usage method is relatively complex and only requires the creation of databases, object storage, transactions, etc.

[0042] The data conversion unit 22 is used to convert the personalized layout information of the user into a JavaScript object through a data serialization and deserialization algorithm.

[0043] As an example, the data conversion unit 22 is specifically used for: In order to store the user's layout information in local storage or database, the data needs to be serialized. Use the JSON.stringify() method to convert the JavaScript object into a JSON string for storage.

[0044] When reading data, use the JSON.parse() method to deserialize the JSON string into a JavaScript object in order to restore the layout.

[0045] Ensure data integrity and accuracy during serialization and deserialization.

[0046] The data synchronization unit 23 is used to perform periodic synchronization and storage of the personalized layout information.

[0047] As an example, the data synchronization unit 23 is specifically used for: Synchronize and store data using scheduled synchronization or synchronization immediately after the user sets the layout.

[0048] When the user sets the layout on one device, the layout information is sent to the server for storage. When the system is started on other devices, the latest layout information is obtained from the server and applied to the interface.

[0049] Use mechanisms such as version control or timestamps to ensure consistency and accuracy of data synchronization.

[0050] The data error processing unit 24 is used to use a try-catch statement to capture information errors during the process of reading and storing personalized layout information. When an information error is found, the default layout type is used or the user is prompted to re-enter the personalized layout type to re-set the layout.

[0051] In a specific implementation, the adaptive module 3 uses Bootstrap, React and Vue front-end frameworks, and uses JavaScript to monitor window size change events.

[0052] Among them, Bootstrap is a popular front-end framework that provides a responsive grid system and various components, which can quickly build interfaces that adapt to different screen sizes. Bootstrap's grid system uses media queries and elastic layouts to automatically adjust the width and layout of columns to adapt to different device screens. The specific script is as follows: <!-- Content --> <!-- Content --> Modern front-end frameworks such as React and Vue usually provide responsive development methods, which can automatically adjust the display of components according to the screen size and device characteristics. For example, in React, you can use responsive design libraries such as react-responsive to render different components according to the screen size. The specific script is as follows: import React from 'react'; import { useMediaQuery} from 'react-responsive'; const MyComponent = () => { const isMobile = useMediaQuery({ maxWidth: 768}); return ( {isMobile? ( <mobilecomponent / > ) : ( <desktopcomponent / > )} ); }; export default MyComponent; In addition, adaptive module 3 uses JavaScript to dynamically calculate the style attributes of elements according to the screen size and device characteristics, and set them to the elements. For example, the width, height, font size, etc. of the element can be dynamically adjusted according to the screen width. The specific script is as follows: const element = document.getElementById('my-element'); const screenWidth = window.innerWidth; if (screenWidth<768) { element.style.width = '100%'; } else { element.style.width = '50%'; } It can be seen that adaptive module 3 requires the comprehensive use of multiple technical means, including CSS responsive design technology, responsive features of front-end frameworks and libraries, and JavaScript dynamic layout adjustment. Through the combination of these technologies, it can ensure that personalized layouts can be automatically adjusted on different devices to provide a good user experience.

[0053] Specifically, the adaptive module 3 includes: a size acquisition unit 31 , a display ratio control unit 32 , a position adjustment unit 33 , and an image and font adjustment unit 34 .

[0054] The size acquisition unit 31 is used to acquire the screen size and resolution of the user device through the media query in the CSS.

[0055] As an example, the size acquisition unit 31 can apply different style rules according to different screen sizes, resolutions and device characteristics through media queries in CSS. For example, a specific layout, font size, spacing, etc. can be set to adapt to different device screens. The specific script is as follows: @media screen and (max-width: 768px) { / * Style to apply when screen width is less than or equal to 768 pixels * / .layout-container { flex-direction: column; } } The display ratio control unit 32 is used to calculate the size and position ratio of each functional module through a ratio calculation algorithm according to the screen size and resolution, and make corresponding adjustments. The ratio calculation algorithm uses JavaScript to calculate the size and position ratio of each functional module, and combines the relative units of CSS to set the size and position of each element of the functional module. The relative units include percentage, viewport width vw, and viewport height vh.

[0056] As an example, the display ratio control unit 32 is specifically used for: Calculate the size and position ratio of each functional module according to different screen sizes and resolutions. For example, determine the percentage of screen width and height that a functional module should occupy at a specific screen size. You can use JavaScript for calculations and combine CSS relative units (such as percentages, vw, vh, etc.) to set the size and position of elements. You can use the following code to calculate the ratio and set the style: const screenWidth = window.innerWidth; const moduleWidthPercent = 0.5; / / The module width accounts for 50% of the screen width const moduleWidth = screenWidth * moduleWidthPercent; document.getElementById('moduleId').style.width = `${moduleWidth}px`; The position adjustment unit 33 is used to divide the screen into a grid system, set the size, spacing and number of the grid template according to the screen size, place the functional module in the grid template, and adjust the position and size of the functional module according to the size of the grid template.

[0057] As an example, the position adjustment unit 33 is specifically used for: Divide the screen into a grid system and dynamically adjust the size and number of grids according to the screen size. Place functional modules in the grid and automatically adjust the position and size according to the changes in the grid. This can be achieved by using CSS grid layout (grid) combined with media queries. Set different grid templates and spacing for different screen sizes.

[0058] The following script can be used to implement the above position adjustment function: @media screen and (max-width: 768px) { .grid-container { grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } } @media screen and (min-width: 769px) { .grid-container { grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } } The image and font adjustment unit 34 is used to set the maximum size of the image using the max-width and max-height attributes of CSS according to the screen size and resolution, and to set the font size using the relative units rem and em.

[0059] As an example, the image and font adjustment unit 34 is specifically used for: 1. Automatically adjust the size of the image according to the screen size and resolution to ensure clear and proportional display on different devices. You can use the max-width and max-height attributes of CSS to limit the maximum size of the image while maintaining the aspect ratio of the image. You can also set the srcset attribute of the image in HTML to provide images of different sizes for different screen resolutions. The browser will automatically select the appropriate image based on the characteristics of the device.

[0060] The following script can be used to implement the above image scaling function: 2. Adjust the font size according to the screen size to ensure easy reading on different devices. You can use relative units (such as rem, em) to set the font size and dynamically adjust it according to the screen width or height. Specifically, use JavaScript to calculate the font size ratio and then apply it to CSS. Or use CSS media queries to set different font sizes for different screen sizes.

[0061] The following script can be used to implement the above font scaling function: const screenWidth = window.innerWidth; const baseFontSize = 16; const fontSizePercent = 0.05; / / font size is 5% of the screen width const fontSize = screenWidth * fontSizePercent; document.documentElement.style.fontSize = `${fontSize}px`; The present invention provides an intelligent interactive system with personalized layout, which brings users a more convenient, efficient and beautiful intelligent interactive experience by providing highly personalized layout settings, persistent storage and fast recovery, intelligent adaptive capabilities, efficient data processing and synchronization, error handling and fault tolerance mechanisms, and advanced front-end technical support.

[0062] The present invention also provides an intelligent interactive device with personalized layout, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the functions of the intelligent interactive system with personalized layout as described in any one of the above items when executing the computer program.

[0063] The present invention also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the function of the intelligent interactive system with personalized layout as described in any one of the above items is realized.

[0064] The processor may be a central processing unit (CPU), other general-purpose processors, digital signal processors, application-specific integrated circuits, field programmable gate arrays or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor.

[0065] The memory can be used to store the computer program and / or module, and the processor realizes various functions of the intelligent interactive system with personalized layout in the invention by running or executing the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.). In addition, the memory can include a high-speed random access memory and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card, a secure digital card, a flash memory card, at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. If the intelligent interactive system with personalized layout is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present invention implements all or part of the process in the above-mentioned embodiment method, and can also be stored in a computer-readable storage medium through a computer program. When the computer program is executed by the processor, the steps of each of the above-mentioned method embodiments can be implemented. Among them, the computer program includes computer program code, object code form, executable file or some intermediate form. The computer-readable medium may include: any entity or device that can carry the computer program code, recording medium, U disk, mobile hard disk, disk, optical disk, computer memory, read-only memory, random access memory, point carrier signal, telecommunication signal and software distribution medium. It should be noted that the content contained in the computer-readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction.

[0066] The present invention has described the basic concepts. Obviously, for those skilled in the art, the above detailed disclosure is only for example and does not constitute a limitation of this specification. Although not explicitly stated herein, those skilled in the art may make various modifications, improvements and corrections to this specification. Such modifications, improvements and corrections are suggested in this specification, so such modifications, improvements and corrections still belong to the spirit and scope of the exemplary embodiments of this specification. In addition, it will be understood by those skilled in the art that various aspects of this specification may be illustrated and described by a number of patentable categories or situations, including any new and useful process, machine, product or combination of substances, or any new and useful improvements thereto. Accordingly, various aspects of this specification may be performed entirely by hardware, entirely by software (including firmware, resident software, microcode, etc.), or by a combination of hardware and software. The above hardware or software may be referred to as "data blocks", "modules", "engines", "units", "components" or "systems". In addition, various aspects of this specification may be represented as a computer product located in one or more computer-readable media, which includes computer-readable program code. A computer storage medium may include a propagated data signal containing computer program code, for example, in baseband or as part of a carrier wave. The propagated signal may be in a variety of forms, including electromagnetic, optical, etc., or a suitable combination. A computer storage medium may be any computer-readable medium other than a computer-readable storage medium, which can be connected to an instruction execution system, device or apparatus to communicate, propagate or transmit the program for use. The program code on the computer storage medium may be transmitted via any suitable medium, including radio, cable, fiber optic cable, RF, or similar media, or any combination of the above media. The computer program code required for the operation of each part of this specification can be written in any one or more programming languages, including object-oriented programming languages ​​such as Java, Scala, Smalltalk, Eiffel, JADE, Emerald, C++, C#, VB.NET, Python, etc., conventional procedural programming languages ​​such as C language, Visual Basic, Fortran 2003, Perl, COBOL2002, PHP, ABAP, dynamic programming languages ​​such as Python, Ruby and Groovy, or other programming languages, etc. The program code can be run entirely on the user's computer, or run on the user's computer as an independent software package, or run partially on the user's computer and partially on a remote computer, or run entirely on a remote computer or server. In the latter case, the remote computer can be connected to the user's computer through any network form, such as a local area network (LAN) or a wide area network (WAN), or connected to an external computer (e.g., via the Internet), or in a cloud computing environment, or used as a service such as software as a service (SaaS). In addition, unless explicitly stated in the claims, the order of the processing elements and sequences described in this specification, the use of alphanumeric characters, or the use of other names are not intended to limit the order of the processes and methods of this specification. Although the above disclosure discusses some invention embodiments that are currently considered useful through various examples, it should be understood that such details are only for illustrative purposes, and the attached claims are not limited to the disclosed embodiments. On the contrary, the claims are intended to cover all modifications and equivalent combinations that are consistent with the essence and scope of the embodiments of this specification. For example, although the system components described above can be implemented by hardware devices, they can also be implemented only by software solutions, such as installing the described system on an existing server or mobile device. Similarly, it should be noted that in order to simplify the description disclosed in this specification and thus help understand one or more embodiments of the invention, in the above description of the embodiments of this specification, multiple features are sometimes combined into one embodiment, figure or description thereof. However, this disclosure method does not mean that the features required by the subject matter of this specification are more than the features mentioned in the claims. In fact, the features of the embodiments are less than all the features of the single embodiment disclosed above. Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention. Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention belong to the scope of the present invention and its equivalent technologies, the present invention is also intended to include these changes and variations.

Claims

1. An intelligent interactive system with personalized layout, characterized in that: include: The layout setting module obtains the user's needs, extracts the preset functional modules and customizes the functional modules to generate personalized layout information to adapt to different usage scenarios and operating habits; the customized settings include adjusting the position, size and display mode of each functional module; The storage module is used to save the personalized layout information set by the user, and automatically load the personalized layout information set by the user when the user logs into the system again; The adaptive module is used to obtain the screen size and resolution of the user's device and automatically adjust the personalized layout.

2. The intelligent interactive system with personalized layout according to claim 1, characterized in that: The layout setting module includes: The position adjustment unit is used to use JavaScript to monitor mouse events to record the initial position and current mouse position of the function module when the user long presses and drags a function module, and to determine the adjustment target position of the function module by calculating the moving distance of the mouse; A size adjustment unit is used to set a draggable control point at the edge of the functional module, use JavaScript to monitor mouse events to obtain action information of the user's mouse pressing and moving on the control point in real time, calculate the moving distance of the control point according to the action, and adjust the width and height of the functional module according to the moving distance; The display mode switching unit is used to configure the display mode options for the functional module and generate the corresponding display mode switching button. It uses JavaScript to monitor the user's click event. When the user clicks the display mode switching button, the corresponding class name or style attribute is switched for the functional module to update the style and layout of the functional module.

3. The intelligent interactive system with personalized layout according to claim 2, characterized in that: The display mode options include: list mode, icon mode, and card mode.

4. The intelligent interactive system with personalized layout according to claim 1, characterized in that: The storage module comprises: A storage control unit, used to store the user's personalized layout information in the form of key-value pairs in the browser's IndexedDB database, and temporarily store the relevant layout information during the session; A data conversion unit, used to convert the user's personalized layout information between personalized layout information and JavaScript objects through data serialization and deserialization algorithms; The data synchronization unit is used to perform periodic synchronization and storage of personalized layout information.

5. The intelligent interactive system with personalized layout according to claim 4, characterized in that: The storage module also includes: The data error processing unit is used to use try-catch statements to capture information errors during the process of reading and storing personalized layout information. When an information error is found, the default layout type is used or the user is prompted to re-enter the personalized layout type to re-set the layout.

6. The intelligent interactive system with personalized layout according to claim 1, characterized in that: The adaptive module comprises: The size acquisition unit is used to obtain the screen size and resolution of the user's device through media queries in CSS; A display ratio control unit is used to calculate the size and position ratio of each functional module through a ratio calculation algorithm according to the screen size and resolution, and make corresponding adjustments; A position adjustment unit, used to divide the screen into a grid system, set the size, spacing and number of grid templates according to the screen size, place the functional modules in the grid templates, and adjust the position and size of the functional modules according to the size of the grid templates; Image and font adjustment units are used to set the maximum size of images based on screen size and resolution using the CSS max-width and max-height properties, and to set the font size using relative units rem and em.

7. The intelligent interactive system with personalized layout according to claim 6, characterized in that: The ratio calculation algorithm uses JavaScript to calculate the size and position ratio of each functional module, and combines CSS relative units to set the size and position of each element of the functional module; the relative units include percentage, viewport width vw, and viewport height vh.

8. The intelligent interactive system with personalized layout according to claim 6, characterized in that: The adaptive module adopts Bootstrap, React and Vue front-end frameworks, and the adaptive module uses JavaScript to monitor window size change events.

9. An intelligent interactive device with personalized layout, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the functions of the intelligent interactive system with personalized layout as claimed in any one of claims 1 to 8 are realized.

10. A readable storage medium, characterized in that: The readable storage medium stores a computer program, and when the computer program is executed by a processor, the functions of the intelligent interactive system with personalized layout as claimed in any one of claims 1 to 8 are realized.

Images