Visual interface editing system

Abstract

The invention provides a visual interface editing system, and relates to the technical field of computers. A storage module in the system is used for storing components corresponding to various scenes; the scene template display module is used for displaying scene templates in a list form and creating the scene templates in response to the creation instruction; and the scene template editing module is used for displaying a corresponding template editing window after receiving the template editing instruction and adding components according to an operation instruction received by the template editing window so as to edit a visual interface, and icons of the components are displayed on the template editing window. According to the embodiment of the invention, the scene template can be quickly edited, the speed is high, the efficiency is high, the problem that codes need to be written manually is effectively avoided, the difficulty of visual interface editing is reduced, and the enthusiasm and ability of common users participating in visual interface creation are improved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically, to a visual interface editing system. Background Technology

[0002] With the rapid development of internet technology, the design and content creation of visual interfaces (such as web pages) have become an important part of the digital age. Traditional methods of visual interface editing largely rely on manually writing HTML, CSS, and JavaScript code to generate scene templates for the visual interface, which are then used to display the interface. While this method is flexible and powerful, it is costly to learn and complex for non-technical users, severely impacting their enthusiasm and ability to create visual interfaces. Summary of the Invention

[0003] This application provides a visual interface editing system that can solve the problem that existing visual interface creation relies on professionals manually writing code, which has high learning costs, complex operation, and seriously limits the participation of ordinary people.

[0004] To achieve this objective, the embodiments of this application provide the following solutions.

[0005] According to one aspect of the embodiments of this application, a visual interface editing system is provided, the system being built based on Vue components, the system comprising: The storage module is used to store components corresponding to various scenarios; The scene template display module is used to display scene templates in a list and to create scene templates in response to creation commands; The scene template editing module is used to display the corresponding template editing window after receiving a template editing instruction, and add components according to the operation instructions received by the template editing window to edit the visual interface. The icons corresponding to the components in the storage module are displayed in the template editing window.

[0006] In one possible implementation, the template editing window is laid out in a top and bottom layout. The top layout displays icons for style switching, clearing the canvas, presentation, saving, and shortcut key instructions. The layout is displayed in the form of a left sidebar, a middle sidebar, and a right sidebar, with the canvas area corresponding to the visualization interface displayed in the middle sidebar.

[0007] In one possible implementation, the shortcut key icon includes shortcut arrow keys, the editing of the visual interface includes moving components in the canvas area, and the editing of the visual interface includes: Identify the selected component in the canvas area, and obtain the component's movement information using the shortcut arrow keys shown in the shortcut key description icon; The component's icon is moved based on the movement information, and boundary detection is performed on the icon to prevent it from crossing the canvas area.

[0008] In one possible implementation, editing the visual interface includes: The icon to be operated is determined according to the operation instructions, and an editing operation is performed on the canvas area based on the icon. The editing operation includes at least one of adding, editing, deleting the component corresponding to the icon, and displaying the visual interface layout. If the current conditions for saving are met, a template for a visual interface is generated based on the layout and configuration information of the canvas area. The conditions for saving include receiving a save command or not receiving the operation command within a preset time.

[0009] In one possible implementation, the left sidebar integrates icons for multiple components and icons for commonly used components. The commonly used components include text boxes, icons, and images, and the types of business functions performed by the components correspond to the scene to be edited.

[0010] In one possible implementation, the middle bar is provided with icons for switching templates and components, as well as interface editing icons, the interface editing icons including at least one of lock, visible, and delete; The scene template editing module is also used to drag the corresponding icon in the left sidebar to the canvas area according to the received drag command and save it.

[0011] In one possible implementation, a component type enumeration is used to store the component numbers in the left sidebar, and an array is used to store the information of each component, including the component index name, component type, component node data, component title name, and component display mode. Saving components dragged into the canvas area includes: The first preset object stores the attribute data of all components, and the preset field stores the information of the canvas area. When the icon is dragged, the data of the component corresponding to the icon is added to the first preset object. The data is at the same level as the preset field and stores the identification code of the component.

[0012] In one possible implementation, the right sidebar includes an attribute panel, a task panel, an audio source panel, and a terminal panel, and the attribute configuration items corresponding to the business function are displayed in the attribute panel. The task panel is used to configure task data, the audio source panel is used to configure audio source information, and the terminal panel is used to configure terminal parameters.

[0013] In one possible implementation, editing the visual interface includes: Identify the selected component in the canvas area, and display the corresponding attribute data of the component in the attribute panel according to the type of the component; The attribute data is modified according to the received configuration setting instructions, the modified attribute data is stored in a second preset object, and the component is displayed based on the modified attribute data.

[0014] In one possible implementation, displaying the component based on the modified attribute data includes: The modified attribute data is stored in a preset UI array, which is used to store the UI data of all components and the UI array stores the identification code of the component; The identifier code of the component in the canvas area is obtained according to the first preset object. The corresponding UI data is matched from the UI array according to the identifier code. The component is displayed and interacted with based on the corresponding UI data.

[0015] The beneficial effects of the technical solutions provided in this application are: The visual interface editing system provided in this application includes a storage module for storing components corresponding to various scenes; a scene template display module for displaying scene templates in a list and creating scene templates in response to creation commands; and a scene template editing module for displaying the corresponding template editing window after receiving a template editing command and adding components according to the operation commands received in the template editing window to edit the visual interface. Component icons are displayed in the template editing window. This embodiment of the application enables rapid editing of scene templates using component icons, which is fast, efficient, and effectively avoids the need for manual coding, reducing the difficulty of visual interface editing and enhancing the enthusiasm and ability of ordinary users to participate in visual interface creation. Attached Figure Description

[0016] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below.

[0017] Figure 1 A structural diagram of the visual interface editing system provided in the embodiments of this application; Figure 2 A flowchart illustrating the workflow of the visual interface editing system provided in this application embodiment; Figure 3A schematic diagram of the scene template display interface provided in the embodiments of this application; Figure 4 A schematic diagram illustrating the allocation of scene templates provided in the embodiments of this application; Figure 5 A schematic diagram of the template editing window provided in an embodiment of this application; Figure 6 A schematic diagram illustrating theme style switching provided in an embodiment of this application; Figure 7 A schematic diagram illustrating the component scene template switching provided in the embodiments of this application; Figure 8 A schematic diagram of a scene template preview provided in an embodiment of this application; Figure 9 A schematic diagram showing the component details interface provided in an embodiment of this application; Figure 10 This is a schematic diagram of a field switch provided in an embodiment of this application; Figure 11 A schematic diagram illustrating the component background color settings provided in the embodiments of this application; Figure 12 A schematic diagram illustrating the configuration of audio source information provided in an embodiment of this application; Figure 13 A schematic diagram illustrating the task data configuration provided in an embodiment of this application; Figure 14 A schematic diagram illustrating the terminal parameter configuration provided in an embodiment of this application; Figure 15 This is a schematic diagram of the client login interface provided in an embodiment of this application. Detailed Implementation

[0018] The embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the embodiments described below with reference to the accompanying drawings are exemplary descriptions for explaining the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions of the embodiments of this application.

[0019] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the terms “comprising” and “including” as used in embodiments of this application mean that the corresponding feature can be implemented as the presented feature, information, data, step, operation, element, and / or component, but do not exclude implementation as other features, information, data, step, operation, element, component, and / or combinations thereof supported by the art. It should be understood that when we say that an element is “connected” or “coupled” to another element, the one element can be directly connected or coupled to the other element, or it can mean that the one element and the other element establish a connection relationship through an intermediate element. Furthermore, “connected” or “coupled” as used herein can include wireless connection or wireless coupling. The term “and / or” as used herein indicates at least one of the items defined by the term; for example, “A and / or B” indicates implementation as “A,” or implementation as “A,” or implementation as “A and B.”

[0020] To make the objectives, technical solutions, and advantages of the present invention clearer, the embodiments of the present invention will be described in further detail below with reference to the accompanying drawings.

[0021] The technical solutions of the embodiments of the present invention and the technical effects produced by the technical solutions of the present invention will be described below through several exemplary embodiments. It should be noted that the following embodiments can be referred to, learned from, or combined with each other, and the same terms, similar features, and similar implementation steps in different embodiments will not be described again.

[0022] The visual interface editing system provided in this application aims to solve at least one technical problem existing in the prior art.

[0023] This application provides a visual interface editing system, such as... Figures 1-15 As shown, this visual interface editing system can be used on mobile phones, computers, servers, and other objects that can be used to create visual interfaces.

[0024] Optionally, the visual interface editing system is built based on Vue components. The system includes: a storage module for storing components corresponding to various scenarios; a scenario template display module for displaying scenario templates in a list and creating scenario templates in response to creation commands; and a scenario template editing module for displaying the corresponding template editing window upon receiving a template editing command and adding components according to the command received in the template editing window for visual interface editing. Component icons are displayed in the template editing window. Scene templates are edited in the template editing window, and the visual interface is displayed based on the edited scenario template. This visual interface can be displayed on applications or devices such as apps, desktop clients, web pages, tablets, and embedded touchscreen terminals.

[0025] Optionally, for ease of editing and use, the multiple components stored in the storage module can be encapsulated into a data packet, and the storage module can also store the icon corresponding to the component and associate the icon with the corresponding data packet.

[0026] Optionally, such as Figure 3 , Figure 4 As shown, the list can display previously created scene templates. Users can select a scene module from the list to edit, or assign, save, or delete scene templates according to user instructions.

[0027] Optionally, such as Figure 5 As shown, the template editing window is divided into a top and bottom layout. The top layout displays icons for style switching, clearing the canvas, and shortcut key instructions. The bottom layout is displayed in the form of a left sidebar, a middle sidebar, and a right sidebar, with the canvas area corresponding to the visual interface displayed in the middle sidebar.

[0028] Optionally, the system allows users to switch the canvas area's theme via a style switching icon. When the user clicks this icon, several pre-stored themes are displayed (specifically, 32 solid color themes and 16 gradient color themes can be built-in), and the default theme of the canvas area is replaced according to the user's selected theme. The theme includes theme-related information such as the canvas background image, component background color, and button background color. During theme replacement, the canvas background image, component background color, button background color, and other theme-related objects are replaced.

[0029] Optionally, upon receiving a clear command transmitted by the user via the clear canvas icon, all components and data in the canvas area can be cleared according to the clear command.

[0030] In one embodiment, such as Figure 6As shown, when a user clicks the style switching icon in the upper layout and enters a style switching command, a theme window is displayed based on that command. The theme window retrieves the user's theme selection command, and the theme of the canvas area is replaced accordingly. Specifically, CSS variables combined with dynamic class name switching can be used to synchronize the updates of font color, gradient background, and stroke color.

[0031] Optionally, the component corresponding to the demo icon is used to display the scene template corresponding to the canvas area. Users can call the component through this icon to preview the scene template. Furthermore, the save icon can receive the user's save command, and based on this command, the canvas area layout and data can be saved.

[0032] Optionally, editing the visual interface includes: determining the icon to be operated according to the operation instruction; performing editing operations on the canvas area based on the icon; the editing operations include at least one of adding, editing, deleting the component corresponding to the icon, and displaying the layout of the visual interface; if it is determined that the current saving conditions are met, then generating an interface template of the visual interface according to the layout and configuration information of the canvas area; the saving conditions include receiving a saving instruction or not receiving the operation instruction within a preset time (such as 10 seconds).

[0033] In one embodiment, such as Figure 8 As shown, after the user clicks the demo icon, the scene template corresponding to the canvas area can be obtained, and a new browser tab can be opened using `window.open(url)` to preview the scene template (such as displaying the layout of the visualization interface). After clicking the save icon, the component layout and configuration data of the current canvas area are saved using the component corresponding to that icon, and the scene template corresponding to the visualization interface is generated. If the data (such as component configuration data) and layout of the canvas area do not change within 10 seconds, the data of the canvas area is automatically saved.

[0034] Optionally, the shortcut key description icon includes shortcut directional keys, and the editing of the visual interface includes moving components within the canvas area. Editing the visual interface includes: identifying the selected component in the canvas area; obtaining the component's movement information using the shortcut directional keys displayed by the shortcut key description icon; moving the component's icon based on the movement information; and performing boundary detection on the icon to prevent it from crossing the canvas area. Wherein, after the user clicks the shortcut description icon, the system can display information about the system-supported shortcut directional keys so that the user can quickly identify the available shortcut directional keys.

[0035] Optionally, the shortcut keys include four shortcuts: up, down, left, and right. These shortcuts may also include icons for shortcuts such as save, delete (e.g., the delete key), copy, and paste. Users can open the shortcut display window by clicking the shortcut keys, select the corresponding shortcut through this window, and use that shortcut to edit the scene template.

[0036] In one embodiment, after a user selects a component in the canvas area, the component can be moved precisely pixel-level (e.g., 1px) using shortcut arrow keys (such as ↑ / ↓ / ← / →). Simultaneously, boundary checks are performed on the component during movement (width boundary check: x-coordinate value + component width not greater than canvas area width; height boundary check: y-coordinate value + component height not greater than canvas area height). If the boundary is exceeded, the movement of the corresponding icon can be stopped or an out-of-bounds warning can be issued. The component can be deleted using the delete shortcut (with options for state validation and array filtering). Another component can be quickly added to the canvas area using the copy (Ctrl+C) and paste (Ctrl+V) shortcuts. The layout and data of the canvas area can also be saved using the save shortcut (Ctrl+S) (saving can be done via debouncing and API submission).

[0037] Optionally, the left sidebar integrates icons for multiple components as well as icons for commonly used components. Commonly used components include text boxes, icons, and images. The types of business functions performed by the components correspond to the scene to be edited.

[0038] Optionally, the icons of the integrated components are positioned above the icons of the commonly used components, and each icon can display the name of its corresponding component.

[0039] In one embodiment, the left sidebar integrates icons for 19 scene-related business functions: Session Status, Today's Tasks, One-Click Alarm, Monitoring, Background Music, One-Click Broadcast, Area Broadcast, Text Broadcast, Paging Intercom, Cloud Broadcasting Room, Information Release, Message Center, Weather and Time, Pre-Exam Inspection, In-Exam Execution, Post-Exam Statistics, Terminal Statistics, Main Presenter Terminal, and Scheduled Tasks. Three commonly used icons correspond to the text box, icon, and image business functions, respectively. Different types of scene templates (such as exams, broadcasts, and monitoring) can be pre-stored, and the corresponding icons are displayed in the left sidebar based on the type of the currently edited scene template.

[0040] Optionally, such as Figure 7As shown, the middle column has icons for switching templates and components, as well as interface editing icons. The interface editing icons include at least one of lock, visible, and delete. The scene template editing module is also used to drag the corresponding icon in the left column to the canvas area and save it according to the received drag command. When performing a scene template switching operation, it can first check whether the data in the canvas area has been saved. If it has not been saved, it will prompt whether to save before switching; otherwise, it will directly switch the scene template display.

[0041] Optionally, for components within the canvas area, when a user selects a component, they can lock it by manipulating the lock icon in the interface editing icons in the middle bar, fixing its basic properties and preventing changes. To unlock, the user can press the lock icon again. Alternatively, the user can manipulate the visual icon in the interface editing icons to hide the component, leaving only a dotted border as a placeholder; pressing the visual icon again will restore the component. These interface editing icons allow for adjustments to the layout.

[0042] Optionally, the system also has an auxiliary alignment line function. When the distance between components in the layout is less than or equal to 26px, auxiliary alignment lines are automatically displayed to enable quick alignment of the corresponding icons of the components.

[0043] Optionally, a component type enumeration is used to store the component numbers in the left sidebar, and an array is used to store the information of each component, including the component index name, component type, component node data, component title name, and component display mode; saving the components dragged into the canvas area includes: using a first preset object to store the attribute data of all components, storing the information of the canvas area through preset fields, and when dragging the icon, adding the data of the component corresponding to the icon to the first preset object, the data being at the same level as the preset fields and storing the component's identification code (which can be the component name or the component number).

[0044] In one embodiment, a component type enumeration `componentsTypeNumber` is defined to store the component IDs. The code for this component type enumeration can be represented as follows: enum componentsTypeNumber { "Session state"=1, "Today's task" = 2 "One-click alarm" = 3 "Monitoring"=4, "Background music"=5, "One-click broadcast" = 6, "Regional Broadcast" = 7 "Text broadcast"=8, "Paging and Intercom" = 9, "Cloud Broadcasting Studio" = 10 "Message Release"=11, "Message Center"=12, "Weather Time" = 13, "Pre-exam inspection" = 14 "Execution during the exam" = 15 "Post-exam statistics" = 16 "Terminal Design" = 17 "Main Presenter Terminal" = 18 "Scheduled Tasks" = 19 } The `editorComponents` array stores information for each component. The data format for each component's information is uniformly defined as a single object, containing the following fields: component index name (`component_name`), component type (`component_type`), component node data (`component`), component title name (`name`), and component display mode (`is_demo`). This array can be represented in code as follows: omponentElementDefault:[ { component_name:"today_task", / / Component index name - dynamically imported reference component_type:1, / / The type of component component:"", / / Generate component node data is_demo:false, / / Whether to use demo mode name: "Today's Task", / / Component title name },{ The other 18 components... } ] The first preset object can be a `content` object that stores the basic style attribute data of all components. The `scene_global_config` field in this object stores detailed scene information. Each time a component is dragged and dropped into the object, a record at the same level as the `scene_global_config` field is inserted into the `content` object, using the component's generated UUID (identifier) ​​as an index to ensure data uniqueness. The code for the first preset object can be: content: { scene_global_config: { initial_width: 1440, / / Initial canvas width initial_height: 736, / / Initial canvas width width: 1440, / / Canvas width height: 736, / / Canvas height zoom: 1, / / Canvas zoom level -100% background: "", / / Initial canvas background auto_save_time: "11:00", / / Automatic save time theme: "", / / Theme color }, uuid: { Component insertion into data structure... } }, Optionally, the right sidebar includes an attribute panel, a task panel, an audio source panel, and a terminal panel. The attribute configuration items corresponding to the business functions are displayed in the attribute panel; the task panel is used to configure task data, the audio source panel is used to configure audio source information, and the terminal panel is used to configure terminal parameters.

[0045] In one embodiment, such as Figures 11-14 As shown, the attribute panel supports configuring the selected component's position, width, height, background color, stroke, rounded corners, title, button color, displayed fields, and business-specific attribute data such as terminal statistics and weather / time. These attribute data are defined in the `componentContentDefault` array. For the background color attribute, the system supports setting the background color using either color or image. The task panel supports configuring task data for components such as text broadcasting, information publishing, message center, weather / time, pre-exam inspection, and in-exam execution. The audio source panel supports configuring audio source information for all business components that require music (such as background music and one-click broadcasting). The terminal panel supports configuring terminal parameters for all business components that require terminal execution (such as terminal statistics and main speaker terminals).

[0046] Optionally, editing the visual interface includes: identifying the selected component in the canvas area, displaying the corresponding attribute data of the component in the attribute panel according to the component type; modifying the attribute data according to the received configuration setting instructions, storing the modified attribute data using a second preset object, and displaying the component based on the modified attribute data.

[0047] In one embodiment, the second preset object can be `element_obj`, which stores data configured through the property panel in the right sidebar. Taking the background music component data as an example, the data stored in the second preset object can be: element_obj: { dfd0170b-481a-4a31-88c1-d23a3c01b0e1: { "uuid": "dfd0170b-481a-4a31-88c1-d23a3c01b0e1", "component_type": 5, "scene_id": 9, "element_tasks": [ { "component_type": 5, "name": "Background Music", "volume": 70, "priority": 70, "sound_mixing_id": 0, "sound_source": { "play_model": 0, "play_type": 0, "type": 1 }, "medias_sources": [], "type": 1 } ], "name": "Background music" }, } Optionally, the component display based on the modified attribute data includes: storing the modified attribute data in a preset UI array, the UI array being used to store the UI data of all components and storing the component's identifier code; obtaining the identifier code of the component in the canvas area according to the first preset object; matching the corresponding UI data from the UI array according to the component index name; and displaying and interacting with the component based on the corresponding UI data.

[0048] In one embodiment, the UI array can be `componentContentDefault`, which stores the default UI data for all components (including the editable portion of the property panel). The component node data within the `content` is matched based on the component's UUID. Taking "Today's Tasks" as an example, the relevant code could be: componentContentDefault: [{ uuid: uuid, / / Unique identifier for the component component_type: 2, / / Corresponds to "Today's Tasks" display: true, / / Display status is_lock: false, / / Locked state position_size: { x: "1", y: "400", width: "208", height: "339"}, / / position size background: { color: "linear-gradient(180deg, rgba(255, 255, 255,0.5) 0%, rgba(255, 255, 255, 0.24) 100%)", image_path: '', image_name: ''}, / / background border: { color: "rgba(255, 255, 255, 1)", value: 0}, / / Stroke border_radius: { all: 16}, / / Rounded corners title: { text: "Today's task", color: "rgba(0, 0, 0, 1)", font_size:16}, / / title button: { bg_color: ''}, / / Button style show_children: { / / Display field configuration execution_time: true, play_time_song: true, play_model: true, volume: true, play_end_button: true, play_area: true, play_audio_source: true, task_type: true, currently_playing: true, }, }] Optionally, you can use the Vue3 syntax `v-for` to iterate through the `editorComponents` array to generate and display a list of components. You can also use the Vue3 dynamic registration directive to generate components by mapping the component index name field (`component_name`) and store them in the component node data (`component`) for later use.

[0049] Optionally, when dragging a component, the drag-start logic is handled by setting the H5 native drag attribute `draggable` to `true`, binding a drag-start event `@dragstart`, and a drag-end event `@dragend` to handle the drag-end logic. Then, an event `@drop.prevent` is bound to the canvas area to receive the data of the dragged component. When the user releases the mouse, the component addition action is confirmed. The x and y coordinates of the component relative to its parent container and the dragged component data are obtained from the `@drop.prevent` event to generate a unique UUID for the component. The corresponding UI data for the component is retrieved, and a component data entry is inserted into the content. The canvas area iterates through the content using `v-for`, and based on the iteration results, the component is rendered and displayed in the canvas area, thus realizing the functionality of selecting and dragging a component to the canvas area to add it.

[0050] Optionally, when a component is selected in the canvas, an adjustable border and dots appear around the component, and corresponding configuration items appear in the right sidebar to modify the component's configuration information (such as attribute data, audio source information, task data, and terminal parameters). The x and y axis positions and sizes of the component border can be adjusted by dragging the component's border dots. When triggered, `position_size` is updated, and boundary checks are performed on the component (width boundary check: x-coordinate value + component width not greater than canvas area width; height boundary check: y-coordinate value + component height not greater than canvas area height) to determine if the component is within the canvas area. The input boxes in the attribute panel and the component data in the content are bidirectionally bound and updated to ensure that the configuration data and the interface display take effect in real time.

[0051] Optionally, when configuring task data and configuring audio source information and terminal parameters for a component, the configured data is stored separately in the `element_obj` object, using the component's UUID as the object index. Upon saving, all DOM nodes within the canvas area are rendered using html2canvas to generate an image for upload (used as a preview image for the scene template in the scene list). The system serializes the content data into JSON format and submits it to the database along with the `element_obj` data. Specifically, the format submitted to the database can be: { content: '', / / A collection of basic styles for all components, serialized into JSON format element: [{component1},{component2}], / / A collection of data such as tasks, music, execution terminals, etc. of all components. uuids: ['uuid1', 'uuid2'], / / Collection of uuids for all components } For rendering components in the canvas area, the submitted JSON data can be parsed, and the component rendering type function can be matched according to the component_type in the content data. For example, if component_type=2, the "Today's Tasks" component will be rendered, and style parameters such as position_size and background will be passed to complete the component rendering and display. Then, the task data will be updated from the element_obj data according to the UUID as the index to display the corresponding content.

[0052] Optionally, when the system is applied to the web, template data is submitted to the database via API. Users can log in to the system through any of the following methods: Electron client, web page, app, tablet device, or embedded touch screen terminal device. After logging in, the system retrieves the user-associated scene template data. The system's dynamic rendering engine renders and generates a visual interface based on the retrieved scene template data. The generated visual interface can be displayed as follows: Figure 15 As shown.

[0053] Optionally, such as Figure 9 As shown, for components in the canvas area, the component's details interface can be displayed according to user instructions (such as right-clicking), and the corresponding field switches in the properties panel on the right sidebar can be displayed. The display of the corresponding fields in the details interface can be controlled according to the on / off status of the field switches.

[0054] The visual interface editing system of this application embodiment has the following advantages: Zero development threshold: Non-technical personnel can quickly customize the interface through drag-and-drop operation and visual configuration without writing code; Efficient integration of business components: Integrates 19 business function-related components, unifies the management of component layout, style and business parameters, and improves component reusability; Multi-dimensional collaborative configuration: The four panels on the right enable the linked configuration of component attributes, tasks, audio sources, and terminals to meet the needs of complex business scenarios; Template-based management: Scene templates are bound to users, supporting rapid reuse and personalized customization. Client apps, web pages, tablets, and embedded touch screen devices can directly render and generate visual interfaces based on scene templates, meeting the needs of customized visual interfaces.

[0055] The terms "first," "second," "third," "fourth," "1," "2," etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in a sequence other than that shown in the illustrations or text descriptions.

[0056] It should be understood that although arrows indicate various operation steps in the flowcharts of this application's embodiments, the order in which these steps are implemented is not limited to the order indicated by the arrows. Unless explicitly stated herein, in some implementation scenarios of this application's embodiments, the implementation steps in each flowchart can be executed in other orders as required. Furthermore, some or all steps in each flowchart, based on the actual implementation scenario, may include multiple sub-steps or multiple stages. Some or all of these sub-steps or stages can be executed at the same time, and each sub-step or stage can also be executed at different times. In scenarios where execution times differ, the execution order of these sub-steps or stages can be flexibly configured according to requirements, and this application's embodiments do not limit this.

[0057] The above description is only an optional implementation method for some implementation scenarios of this application. It should be noted that for those skilled in the art, other similar implementation methods based on the technical concept of this application without departing from the technical concept of this application also fall within the protection scope of the embodiments of this application.

Claims

1. A visual interface editing system, characterized by, The system is created based on a Vue component, and the system comprises: a storage module configured to store components corresponding to various scenes; a scene template display module configured to display scene templates in a list form and create a scene template in response to a creation instruction; a scene template editing module configured to, after receiving a template editing instruction, display a corresponding template editing window and add components according to an operation instruction received by the template editing window to edit a visual interface, wherein icons corresponding to the components are displayed on the template editing window.

2. The visual interface editing system of claim 1, wherein, The layout of the template editing window is divided into an upper layout and a lower layout. The upper layout displays style switching icons, a clear canvas icon, a demonstration icon, a save icon, and a shortcut key instruction icon. The lower layout is displayed in the form of a left column, a middle column, and a right column. A canvas area corresponding to the visual interface is displayed in the middle column.

3. The visual interface editing system of claim 2, wherein, The shortcut key instruction icon includes shortcut direction keys. The editing of the visual interface includes the movement of components in the canvas area. The editing of the visual interface includes: determining a selected component in the canvas area, obtaining movement information of the component through the shortcut direction keys displayed by the shortcut key instruction icon; moving an icon of the component based on the movement information and performing boundary detection on the icon to prevent the icon from moving beyond the canvas area.

4. The visual interface editing system of claim 2, wherein, The editing of the visual interface includes: determining an icon to be operated according to the operation instruction, performing an editing operation on the canvas area based on the icon, and the editing operation includes at least one of adding, editing, deleting, and visual interface layout displaying of a component corresponding to the icon; if it is determined that a save condition is met, generating an interface template of the visual interface according to the layout and configuration information of the canvas area, and the save condition includes receiving a save instruction or not receiving the operation instruction within a preset time.

5. The visual interface editing system of claim 2, wherein, The left column is integrated with icons of a plurality of components and icons of frequently used components. The frequently used components include text boxes, icons, and pictures. The types of business functions performed by the components correspond to the scene to be edited.

6. The visual interface editing system of claim 5, wherein, The middle column is provided with icons for switching templates and components and interface editing icons. The interface editing icons include at least one of locking, visualizing, and deleting. The scene template editing module is further configured to, according to a received drag instruction, drag a corresponding icon in the left column to the canvas area and save it.

7. The visual interface editing system of claim 6, wherein, A component type enumeration is used to store the numbers of the components in the left column, and an array is used to store information of each component, including a component index name, a component type, component node data, a component title name, and a component display mode. The saving of a component dragged into the canvas area includes: storing attribute data of all components by using a first preset object and storing information of the canvas area by using a preset field. When the icon is dragged, data of a component corresponding to the icon is added to the first preset object. The data is at the same level as the preset field and stores an identification code of the component.

8. The visual interface editing system of claim 7, wherein, The right column includes an attribute panel column, a task panel column, a sound source panel column and a terminal panel column, and the attribute configuration item corresponding to the business function is displayed on the attribute panel column; The task panel column is used for configuring task data, the sound source panel column is used for configuring sound source information, and the terminal panel column is used for configuring terminal parameters.

9. The visual interface editing system of claim 8, wherein, The editing of the visual interface includes: Determining a selected component in the canvas area, displaying attribute data corresponding to the component on the attribute panel column according to the type of the component; According to the received configuration setting instruction, the attribute data is modified, the modified attribute data is stored by using a second preset object, and the component is displayed based on the modified attribute data.

10. The visual interface editing system of claim 9, wherein, The display of the component based on the modified attribute data includes: The modified attribute data is stored in a preset UI array, the UI array is used for storing UI data of all components, and the UI array stores an identification code of the component; According to the first preset object, the identification code of the component in the canvas area is obtained, the corresponding UI data is matched from the UI array according to the identification code, and the display and interaction of the component are performed based on the corresponding UI data.

Images