An operation method of an IDE application based on combination of an image interface and a terminal

Abstract

The application discloses an operation method of an IDE application based on combination of an image interface and a terminal, and relates to the technical field of computers, and the method comprises the following steps: establishing a bidirectional data channel, converting an operation event triggered by a user in a graphic operation area included in an IDE interface into a terminal instruction, synchronously transmitting the operation event to a rear-end node for execution, and feeding back execution results to a terminal editing area included in the IDE interface in real time for dynamic display; receiving input content of the user through the terminal editing area, analyzing the input content and generating an incremental data packet, transmitting the incremental data packet to the rear-end node through the bidirectional data channel for processing; and according to the processing result of the rear-end node, updating interface elements of the graphic operation area, including hierarchical reconstruction of a code outline, cross-area synchronization of a cursor position and visual effect rendering.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to an operation method of IDE application based on combination of image interface and terminal. BACKGROUND

[0002] The existing integrated development environment (IDE) usually takes the graphical interface and terminal as independent modules, resulting in that the user needs to manually switch the operation mode, which is inefficient. The traditional GUI relies on mouse operation, which is intuitive but has limited functions; the terminal relies on command line input, which is efficient but has high learning cost, and the data synchronization mechanism of the two is single, lacks real-time interactive feedback, and cannot realize the dynamic linkage of the interface and the command line, which limits the flexibility and efficiency of the development process.

[0003] At present, no effective solution has been proposed for the above problems. SUMMARY

[0004] The embodiments of the present application provide an operation method of IDE application based on combination of image interface and terminal to solve the above technical problems.

[0005] The present application provides an operation method of IDE application based on combination of image interface and terminal, comprising: establishing a bidirectional data channel, converting an operation event triggered by a user in a graphical operation area included in an IDE interface into a terminal instruction, synchronously transmitting to a backend node for execution, and real-time feedback of the execution result to a terminal editing area included in the IDE interface for dynamic display;

[0006] Receiving the input content of the user through the terminal editing area, analyzing the input content and generating an incremental data packet, transmitting the incremental data packet to the backend node through the bidirectional data channel for processing;

[0007] According to the processing result of the backend node, updating the interface elements of the graphical operation area, including hierarchical reconstruction of code outline, cross-area synchronization of cursor position and visual effect rendering.

[0008] Further, the operation event includes file opening, code editing or function calling;

[0009] The terminal instruction is a predefined vimcall data packet, which contains an event type identifier, a path and a line number of a target file, callback function parameters and backend node address information, and is encapsulated in JSON format to support cross-platform analysis;

[0010] The node address information and callback function parameters are embedded in the vimcall data packet, which is used for the backend node to locate resources and trigger the preset component response logic.

[0011] Furthermore, the incremental data packet is generated by real-time monitoring of character-level changes in the input content. The incremental data packet embeds the following content: the added, deleted, or modified code snippets and their context; the start and end positions of the changed line numbers; the operation timestamp and the user session identifier.

[0012] Furthermore, the hierarchical restructuring of the code outline includes:

[0013] Parse the class, method, and variable definitions in the code file, extract their type, line number, and scope information, generate a tree structure, and label the icon resources in the graphical operation area;

[0014] The tree-structured code outline is generated by parsing the code abstract syntax tree and associated with semantic analysis results, supporting functions such as collapsing and expanding, keyword filtering, and version difference comparison.

[0015] If a user clicks on an outline item, the input cursor in the terminal's editing area is redirected to the corresponding line of code.

[0016] Furthermore, the visualization rendering includes:

[0017] When the user clicks a code command or function button in the graphical operation area, a dynamic fireworks effect is rendered.

[0018] When a user inputs in the terminal editing area, the preview window of the graphical operation area synchronously displays the position of the input cursor and indicates the code focus through a semi-transparent mark.

[0019] Furthermore, the rendering of the dynamic fireworks effect includes:

[0020] The backend node predicts the particle diffusion trajectory using a Markov chain model based on the user's operation type and historical operation frequency, and generates the particle's initial velocity, angle, and decay parameters.

[0021] Based on the real-time input frequency of the terminal editing area and the mouse event density of the graphics operation area, the front end dynamically allocates GPU resource priority, adopts a frame-by-frame rendering strategy to decompose the particle effect into multiple rendering batches, and avoids main thread blocking through a time-slice rotation algorithm.

[0022] Based on the semantic type and operation stage of the current code file, a pre-trained convolutional neural network model is invoked to match the particle color mapping rules.

[0023] Furthermore, the rendering of the dynamic fireworks effect further includes:

[0024] The code changes in the terminal editing area are correlated with the mouse click events in the graphical operation area to extract code structure features and generate the overlay logic for particle effects.

[0025] Based on the terminal input delay time and the load status of the backend nodes, the duration and transparency of the particle effect are dynamically adjusted. If the backend processing delay is detected to exceed the threshold, the particle life cycle is shortened and the rendering accuracy is reduced.

[0026] By mapping the screen coordinate system to the line number, the mouse click position in the graphics operation area is converted into the line offset of the code in the terminal editing area, and the starting rendering coordinates of the particle effect are calculated based on this.

[0027] Furthermore, the rendering of the dynamic fireworks effect further includes:

[0028] The code abstract syntax tree input in the terminal editing area is parsed. When a specific semantic pattern is detected, an alert particle effect is automatically triggered in the graphical operation area and highlighted in conjunction with the corresponding item in the code outline.

[0029] A dependency graph of code elements is constructed in the backend node. When the user selects an outline item in the graphical operation area, the particle connection lines of the associated code blocks are dynamically rendered based on the graph convolutional network, and the dependency boundaries are marked in the terminal editing area.

[0030] The system collects data on terminal command execution time and resource usage. A color gradient layer is then overlaid in the preview window of the graphical operation area using a heatmap rendering algorithm. Darker areas represent high-load code segments, and clicking on the heatmap allows users to jump to the corresponding line of code on the terminal for optimization.

[0031] Furthermore, the method also includes:

[0032] The operation interfaces of the graphical operation area and the terminal editing area are integrated through modular tools to support users in switching operation modes between the two types of areas;

[0033] The modular tool is the raw-onecloud-gnt tool module, which provides standard APIs to manage the lifecycle of graphics components, the encapsulation and parsing of terminal commands, and the flow control of bidirectional data channels.

[0034] Furthermore, the graphical operation area is used to receive mouse interaction events, and the terminal editing area is used to receive command line input;

[0035] The graphical operation area includes a file navigation panel, a cluster of function buttons, and a real-time preview window;

[0036] The terminal editing area adopts a column design. The left side is the code input area, which supports syntax highlighting and auto-completion; the right side is the execution result output area, which displays the logs or error information returned by the backend in real time; the ratio between the columns can be adjusted by vertical dividing lines, and double-clicking the dividing line switches to full-screen mode.

[0037] Based on the embodiments provided in this application, the GUI is deeply integrated with the terminal, allowing users to simultaneously perform mouse operations and command line input, thus improving development efficiency; the real-time processing and incremental data synchronization mechanism of the backend nodes ensures the instantaneous updating of interface elements and reduces operation latency; the dynamic binding of visualization effects and code logic provides intuitive feedback on coding quality and reduces debugging time. Attached Figure Description

[0038] The accompanying drawings, which are included to provide a further understanding of embodiments of the invention and form part of this application, illustrate exemplary embodiments of the invention and, together with their description, serve to explain the invention and do not constitute an undue limitation thereof. In the drawings:

[0039] Figure 1 This is a flowchart of an optional operation method for an IDE application based on a combination of a graphical user interface and a terminal, according to an embodiment of this application.

[0040] Figure 2 This is a flowchart illustrating an optional application of dynamic fireworks effects according to an embodiment of this application;

[0041] Figure 3 This is a diagram of an optional IDE application based on a combination of a graphical user interface and a terminal, according to an embodiment of this application.

[0042] Figure 4 A flowchart illustrating another optional operation method of an IDE application based on a combination of a graphical user interface and a terminal, according to an embodiment of this application;

[0043] Figure 5 This is a schematic diagram of an optional response data packet format according to an embodiment of this application;

[0044] Figure 6 This is a flowchart illustrating an optional operation method of an IDE application based on a combination of a graphical user interface and a terminal, according to an embodiment of this application.

[0045] Figure 7 This is a schematic diagram illustrating an optional method of adjusting the data format to a standardized display according to an embodiment of this application;

[0046] Figure 8 This is a diagram of an alternative IDE application based on a combination of a graphical user interface and a terminal, according to an embodiment of this application.

[0047] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0048] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of the present invention.

[0049] GUI and Terminal (also known as G&T): This feature combines a graphical user interface and a terminal, aiming to improve the user's operational efficiency and enhance the user experience within the Codigger system.

[0050] In some operating systems, graphical interfaces are easy to use due to the extensive use of mouse operations, but are inefficient; while terminals are more difficult to use due to the extensive use of keyboard operations, but are more efficient.

[0051] This application integrates the advantages of both graphical interfaces and terminals, offering the ease of use of a graphical interface and the speed and convenience of a terminal. This improves work efficiency within the Codigger system and reduces the difficulty of terminal operation, making it easy for novice users to learn. Combining a graphical interface and a terminal within the same operating system offers numerous advantages, resulting in greater flexibility and applicability.

[0052] The following are some advantages of the operating system combining a graphical interface and a terminal in this application: Flexibility and Versatility: By combining a graphical interface and a terminal, the operating system can simultaneously provide a convenient graphical user interface and a command-line interface to meet the needs of different users. Users can choose the interface that best suits their needs. Efficiency: In some scenarios, using a command-line interface is more efficient than a graphical interface. Combining the two allows users to switch flexibly according to their needs, improving work efficiency. Feature-Rich: Graphical interfaces typically offer rich visualization functions and user-friendly operation methods, while command-line interfaces offer more flexible and powerful operation capabilities. Combining the two allows the operating system to provide more comprehensive functional support. Troubleshooting and System Management: In system management and troubleshooting, command-line interfaces are usually more convenient and faster. By combining graphical and command-line interfaces, system administrators can more easily perform system maintenance and troubleshooting. Learning and Customization: By combining graphical and command-line interfaces, users can start by learning system operation through a simple graphical interface and then gradually delve into command-line operation, improving their skill level. At the same time, users can also customize the system and interface according to their needs.

[0053] In summary, this application combines a graphical interface and a terminal within the same operating system, fully leveraging the advantages of both to improve system flexibility, efficiency, and functionality. This combination makes the operating system more comprehensively applicable to different users and scenarios, while also facilitating user learning, management, and operation.

[0054] Optionally, such as Figure 1 As shown, this application provides an operation method for an IDE application based on a combination of a graphical interface and a terminal, including:

[0055] S101 establishes a two-way data channel, converts user-triggered operation events in the graphical operation area of ​​the IDE interface into terminal commands, synchronously transmits them to the backend node for execution, and dynamically displays the execution results in the terminal editing area of ​​the IDE interface in real time.

[0056] S102 receives user input through the terminal editing area, parses the input and generates incremental data packets, and transmits the incremental data packets to the backend node for processing via a bidirectional data channel;

[0057] S103 updates the interface elements of the graphical operation area based on the processing results of the backend nodes, including the hierarchical restructuring of the code outline, cross-regional synchronization of the cursor position, and rendering of visualization effects.

[0058] Based on the embodiments provided in this application, the GUI is deeply integrated with the terminal, allowing users to simultaneously perform mouse operations and command line input, thus improving development efficiency; the real-time processing and incremental data synchronization mechanism of the backend nodes ensures the instantaneous updating of interface elements and reduces operation latency; the dynamic binding of visualization effects and code logic provides intuitive feedback on coding quality and reduces debugging time.

[0059] Furthermore, operation events include file opening, code editing, or function invocation;

[0060] Terminal commands are predefined vimcall data packets, which include event type identifiers, the path and line number of the target file, callback function parameters and backend node address information, and are encapsulated in JSON format to support cross-platform parsing;

[0061] The vimcall data packet embeds node address information and callback function parameters, which are used by the backend node to locate resources and trigger preset component response logic.

[0062] Based on the embodiments provided in this application, operation events are encapsulated in a predefined JSON format vimcall data packet to achieve the following optimizations: cross-platform compatibility: the standardized data format supports parsing on multiple operating systems, avoiding compatibility errors; precise resource location: embedding node addresses and callback parameters ensures that the backend responds quickly to complex operations (such as cross-file jumps).

[0063] Furthermore, incremental data packets are generated by real-time monitoring of character-level changes in the input content. The incremental data packets contain the following: the added, deleted, or modified code snippets and their context; the start and end positions of the changed line numbers; the operation timestamp and the user session identifier.

[0064] Based on the embodiments provided in this application, only the changed fragments and context are transmitted, reducing network load; timestamps and session identifiers support operation backtracking during multi-user collaborative development.

[0065] Furthermore, the hierarchical refactoring of the code outline includes:

[0066] Parse the class, method, and variable definitions in the code file, extract their type, line number, and scope information, generate a tree structure, and annotate icon resources in the graphical operation area;

[0067] The tree-structured code outline is generated by parsing the Abstract Syntax Tree (AST) and associated with semantic analysis results, supporting functions such as collapsing and expanding, keyword filtering, and version difference comparison.

[0068] If a user clicks on an outline item, the input cursor in the terminal editing area will jump to the corresponding line of code.

[0069] Based on the embodiments provided in this application, the tree structure and line number annotations simplify browsing large code libraries; clicking on an outline item accurately jumps to the corresponding line of code on the terminal, avoiding manual searching.

[0070] Furthermore, the visualization rendering includes:

[0071] When the user clicks on a code command or function button in the graphical operation area, a dynamic fireworks effect is rendered.

[0072] When a user types in the terminal editing area, the preview window in the graphical operation area simultaneously displays the position of the input cursor and indicates the code focus with a semi-transparent marker.

[0073] Based on the embodiments provided in this application, the function of enhancing the fireworks effect in the graphic area is called with feedback; the semi-transparent marker indicates the terminal input focus in real time, reducing code positioning errors.

[0074] like Figure 2 The diagram shows a flowchart of an application of dynamic fireworks effects. The process includes: displaying data on the user interface and accepting data editing; incrementally transmitting the edited content to the backend nodes; and applying cursor linkage effects on the interface.

[0075] Furthermore, the operation interfaces of the graphical operation area and the terminal editing area are integrated through modular tools to support users in switching operation modes between the two types of areas;

[0076] The modular tool is the raw-onecloud-gnt module, which provides standard APIs to manage the lifecycle of graphics components, encapsulate and parse terminal commands, and control traffic flow in bidirectional data channels. This module provides the following functions: encapsulating the interaction interface between graphics components and terminal commands; controlling the compressed transmission of data packets and traffic priority allocation; and maintaining a node address mapping table to achieve cross-platform resource location.

[0077] Furthermore, the graphical operation area is used to receive mouse interaction events, and the terminal editing area is used to receive command line input;

[0078] The graphical operation area includes a file navigation panel, a cluster of function buttons, and a real-time preview window; • File navigation panel: supports dragging and dropping files into the terminal editing area to open them directly; • Function button cluster: includes buttons for code formatting and debugging mode switching, which trigger terminal commands when clicked; • Real-time preview window: displays code snippets and execution results from the terminal editing area in a split-screen format, supporting scroll bar interaction.

[0079] The terminal editing area adopts a split-column design. The left side is the code input area, which supports syntax highlighting and auto-completion; the right side is the execution result output area, which displays the logs or error information returned by the backend in real time; the ratio between the columns can be adjusted by vertical dividing lines, and double-clicking the dividing line switches to full-screen mode.

[0080] Furthermore, the rendering of dynamic fireworks effects includes:

[0081] The backend node predicts the particle diffusion trajectory using a Markov chain model based on the user's operation type (such as file opening, code execution, or debugging startup) and historical operation frequency, generating the initial velocity, angle, and decay parameters of the particles.

[0082] The front-end dynamically allocates GPU resource priority based on the real-time input frequency of the terminal editing area and the mouse event density of the graphics operation area. It adopts a frame-by-frame rendering strategy to break down particle effects into multiple rendering batches and avoids main thread blocking through a time-slice rotation algorithm.

[0083] Based on the semantic type of the current code file (such as a Java class file or a Python script) and the operation stage (editing, compiling, debugging), a pre-trained convolutional neural network model is invoked to match particle color mapping rules. For example, when a Java class method is clicked, blue-purple gradient particles are generated, and red-yellow highlight flashing is triggered in debug mode.

[0084] In this embodiment, the dynamic particle trajectory prediction model can be obtained based on the following formula:

[0085]

[0086] Among them, v t α is the initial velocity of the particle at time t; α is the operation type weighting factor (e.g., 0.8 for file opening, 1.2 for code execution); φ k P(s) represents the trajectory basis vector of state k in a Hidden Markov Model (HMM); t =k|Θ) is the probability of being in state k at time t under model parameters Θ; β is the decay coefficient of historical operation frequency, which can be 0.3 (the optimal value was obtained through experiments); f {hist} (t) is the user's operation event density function within the past T seconds.

[0087] By combining HMM with operation type and historical behavior to dynamically generate particle velocity, the problem of fixed trajectory in traditional particle systems is solved, and the correlation between dynamic fireworks effects and user behavior is improved.

[0088] In this embodiment, the GPU resource priority allocation function is as follows:

[0089]

[0090] Among them, W i Assign weights to the resources of the i-th rendering batch; E i R represents the complexity of the particle effect in the i-th rendering batch (calculated from the number of particles and the effect level); i E is a comprehensive score of the real-time input frequency and mouse event density for the i-th rendering batch. j The complexity of the particle effect in the j-th rendering batch (calculated from the number of particles and the effect level); R j The score is a comprehensive evaluation of the real-time input frequency and mouse event density for the j-th rendering batch; Λ is the resource sensitivity adjustment factor; τ is the system real-time threshold, set according to the average response time of the IDE, and can be 30ms; μ is the balance coefficient between operation density and resource consumption, and can be 0.7, with operation density accounting for 70% of the weight and complexity accounting for 30%; λ is the resource sensitivity adjustment factor, the larger the value, the higher the real-time requirement, and can be 1.5.

[0091] The GPU resources are dynamically allocated based on the Softmax function, prioritizing rendering batches with high complexity and high real-time requirements to ensure the smoothness of the frame-by-frame rendering strategy.

[0092] Based on the embodiments provided in this application, Markov chains predict particle diffusion paths to avoid a disconnect between special effects and operations; frame-by-frame rendering and time-slice rotation ensure smooth interface performance under high load; and convolutional neural networks map code types to particle colors to enhance visual cues.

[0093] Furthermore, the rendering of dynamic fireworks effects includes:

[0094] The code changes in the terminal editing area are correlated with the mouse click events in the graphical operation area to extract code structure features (such as function call hierarchy and variable dependencies) and generate the superposition logic of particle effects.

[0095] Based on the terminal input delay time and the load status of the backend nodes, the duration and transparency of the particle effect are dynamically adjusted. If the backend processing delay is detected to exceed the threshold (e.g., 1 second or 0.8 seconds), the particle life cycle is shortened and the rendering accuracy is reduced.

[0096] By mapping the screen coordinate system to the line number of the code, the mouse click position in the graphics operation area is converted into the line offset of the code in the terminal editing area, and the starting rendering coordinates of the particle effect are calculated based on this to achieve precise alignment between the visual focus and the code logic.

[0097] In the embodiments of this application,

[0098]

[0099] Among them, C m W is the RGB vector of the color of the m-th particle; c b c W represents the weight matrix and bias terms of a convolutional neural network (CNN). c The weight matrix is ​​3×256 dimensional. A CNN is used to train and learn the mapping from code semantics to RGB colors. c The 3D bias term adjusts the output color brightness and is initialized to a zero vector; h m G(s) is the semantic feature vector of the code file at position m (extracted through AST parsing); m ,o p ) is a Gaussian mixture function, s m For code types (such as Java classes, Python functions), o p This is the operational phase (editing, debugging); This is the element-wise weighted fusion operator.

[0100] By using a neural network to hybrid map the semantic features of the code with the operation stages, a deep binding between particle color and code logic is achieved.

[0101] Based on the embodiments provided in this application, multimodal interaction and adaptive rendering optimization are achieved. The code structure features are associated with particle overlay logic to avoid interference from irrelevant special effects. The rendering accuracy is dynamically reduced according to the delay to balance the effect quality and system load. The screen coordinates and code line numbers are precisely aligned to ensure that the visual focus does not shift.

[0102] Furthermore, the rendering of dynamic fireworks effects includes:

[0103] The code abstract syntax tree input in the terminal editing area is parsed. When a specific semantic pattern is detected (such as unhandled exception capture or loop nesting exceeding the limit), an alert particle effect (such as a red vortex marker) is automatically triggered in the graphical operation area and highlighted in conjunction with the corresponding item in the code outline.

[0104] In the backend node, a dependency graph of code elements is built. When the user selects an outline item in the graphical operation area, the particle connection lines of the associated code blocks are dynamically rendered based on the graph convolutional network, and the dependency boundaries are marked in the terminal editing area.

[0105] The system collects data on terminal command execution time and resource usage. A color gradient layer is overlaid in the preview window of the graphical operation area using a heatmap rendering algorithm. Dark areas represent high-load code segments, and clicking on the heatmap allows users to jump to the corresponding line of code on the terminal for optimization.

[0106] Based on the embodiments provided in this application, the syntax tree detects abnormal patterns and triggers warning effects to assist in quick troubleshooting; the graph convolutional network generates particle connection lines to intuitively display complex call chains; and the heatmap gradient layer is directly associated with high-load code segments to accelerate optimization decisions.

[0107] like Figure 3 The diagram shows the interface of an IDE application that combines a graphical user interface (GUI) and a terminal. In this interface, the five areas shown are: areas 1, 2, 4, and 5 represent GUI features, while area 3 is the terminal. Area 3 is the main area for user editing. Traditional terminal displays are monotonous, but the Codigger system offers a richer interface display. Figure 3 The two scenarios are described in detail below:

[0108] One approach involves responding to user actions from the graphical interface (GUI) and displaying the data in the terminal area. As illustrated in the following diagram, area 1 of the GUI interface receives user mouse events, for example... Figure 4 As shown, this illustrates how the system performs a series of transformations and displays the data in terminal area 3.

[0109] The vimcall data packet for the click event is as follows:

[0110] ["share.WidgetManager","InvokeCallback",[13,"OnClick",[" / home / clouder / Music / jmvin / pom.xml",1,"0"]]]

[0111] The response data packets include:

[0112] {"bufferTab":{"type":"BufferTab","hashCode":"49","address":"61561561:215-6483-5789:lifter","class":" / home / clouder / .codigger / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / BufferTab.ose","style":"","name":" / home / clouder / Music / jmvin / pom.xml","callbacks":[{"event":"OnClose","vimcall":"['share.WidgetManager','InvokeCallback',[49,'On Close',[' / home / clouder / Music / jmvin / pom.xml','js:nextFile','js:timest amp']],'61561561:215-6483-5789:lifter']"},{"event":"OnClick","vimcal l":"['share.WidgetManager','InvokeCallback',[49,'OnClick',[' / home / cl ouder / Music / jmvin / pom.xml',1,'js:timestamp']],'61561561:215-6483-5789:lifter']"}],"label":{"text":"pom.xml","alignment":"left"},"real":"","bufType":""},"scrollers":{"vertical":{"maximum":0,"current":0,"bottom":0,"height":0,"top":0},"horizontal":{"right":0,"current":0,"left":0,"width":0,"maximum":0}}}

[0113] After the above data is formatted, it will look like this: Figure 5 As shown.

[0114] Another type of transformation involves changes in the terminal interface linked to changes in the GUI. For example, input is received in the terminal area (area 3), and through a series of transformations, it is displayed in the graphical interface area (area 5). Figure 6As shown, when a user adds a new function, the content outline changes accordingly, processed based on the received data. The data format of the vimcall in the above process is as follows: user actions in the terminal editing area are reflected and changed in real time on the display node. When the user detects a change, they recalculate the content outline of the code file, combining it with the content outline data cached on the OSE side. Upon detecting a change, they refresh the backend cache and send the changed outline content to the frontend in the form of a vimcall. The following is the changed vimcall data content. After receiving the content outline again, the frontend changes the display of the outline area, specifically the content of area 5.

[0115] {"operation":"outline","timestamp":1722518658,"total":4,"file":" / home / clouder / Music / jmvin / src / main / java / oc / test / HelloWorld.java","data":{"type":"TagOutliner","hashCode":"1246","address":"61561561:215-6483-5789:lifter","class":" / home / clouder / .codigger / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / TagOutliner.ose","style":"","name":"Outliner","callbacks":[{"event":"SetFullScreen","vimcall":"['share.WidgetManager','InvokeCallback',[1246,'SetFullScreen',['js:flag']],'61561561:215-6483-5789:lifter']"},{"event":"SetVisible","vimcall":"['share.WidgetManager','InvokeCallback',[1246,'SetVisible',['js:flag']],'61561561:215-6483-5789:lifter']"},{"event":"SetSize","vimcall":"['share.WidgetManager','InvokeCallback',[1246,'SetSize',['js:width','js:height']],'61561561:215-6483-5789:lifter']"}],"place":6,"header":"HelloWorld.java","children":[{"type":"TagItem","hashCode":"1461","address":"61561561:215-6483-5789:lifter","class":" / home / clouder / .codi gger / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / TagItem.ose","style":"","name":"tag1","callbacks":[{"event":"OnClick","vimcall":"['share.WidgetManager','InvokeCallback',[1461,'OnClick',['1']],'61561561:215-6483-5789:lifter']"}],"label":{"lineNumber":"1","method Type":0,"text":"oc.test","alignment":"left"},"icon":{"image":"packag e.png","alignment":"left"}},{"type":"TagItem","hashCode":"1462","add ress":"61561561:215-6483-5789:lifter","class":" / home / clouder / .codigg er / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / TagItem.ose","style":"","name":"tag2","callbacks":[{"event":"OnClick","vimcall":"['share.WidgetManager','InvokeCallback',[1462,'OnClick',['4']],'61561561:215-6483-5789:lifter']"}],"label":{"lineNumber":"4","methodType":0,"text":"HelloWorld","alignment":"left"},"icon":{"image":"class.png","alignment":"left"}},{"type":"TagItem","hashCode":"1463","address":"61561561:215-6483-5789:lifter","class":" / home / clouder / ."codigger / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / TagItem.ose","style":"","name":"tag3","callbacks":[{"event":"OnClick","vimcall":"['share.WidgetManager','InvokeCallback',[1463,'OnClick',['6']],'61561561:215-6483-5789:lifter']"}],"label":{"lineNumber":"6","methodType":0,"text":"main","alignment":"left"},"icon":{"image":"method.png","alignment":"left"}},{"type":"TagItem","hashCode":"1464","address":"61561561:215-6483-5789:lifter","class":" / home / clouder / .codigger / sense / raw-onecloud-gnt / src / onecloud / codigger / gnt / impl / TagItem.ose","style":"","name":"tag4","callbacks":[{"event":"OnClick","vimcall":"['share.WidgetManager','InvokeCallback',[1464,'OnClick',['11']],'61561561:215-6483-5789:lifter']"}],"label":{"lineNumber":"11","methodType":0,"text":"printArray","alignment":"left"},"icon":{"image":"method.png","alignment":"left"}}]}}.

[0116] Adjust the above data format to the standard display as Figure 7 shown.

[0117] Such as Figure 8The image shown is an interface diagram of another IDE application based on the combination of graphical interface and terminal. The firework display of the input cursor in the image is a manifestation of G&T. It is difficult to achieve this kind of firework effect on traditional terminals.

[0118] The above are merely preferred embodiments of the present invention and do not limit the scope of the patent. Any equivalent structural or procedural transformations made based on the description and drawings of the present invention, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of the present invention.

Claims

1. An operation method for an IDE application based on a combination of graphical interface and terminal, characterized in that, include: A two-way data channel is established to convert user-triggered operation events in the graphical operation area of ​​the IDE interface into terminal commands, which are synchronously transmitted to the backend node for execution, and the execution results are dynamically displayed in the terminal editing area of ​​the IDE interface in real time. The terminal editing area receives user input, parses the input, generates incremental data packets, and transmits the incremental data packets to the backend node for processing via the bidirectional data channel. Based on the processing results of the backend nodes, update the interface elements of the graphical operation area, including hierarchical restructuring of the code outline, cross-regional synchronization of the cursor position, and rendering of visual effects. The visualization rendering includes: When the user clicks a code command or function button in the graphical operation area, a dynamic fireworks effect is rendered. When the user inputs in the terminal editing area, the preview window of the graphical operation area synchronously displays the position of the input cursor and indicates the code focus with a semi-transparent mark; The rendering of the dynamic fireworks effect includes: The backend node predicts the particle diffusion trajectory using a Markov chain model based on the user's operation type and historical operation frequency, and generates the particle's initial velocity, angle, and decay parameters. Based on the real-time input frequency of the terminal editing area and the mouse event density of the graphics operation area, the front end dynamically allocates GPU resource priority, adopts a frame-by-frame rendering strategy to decompose the particle effect into multiple rendering batches, and avoids main thread blocking through a time-slice rotation algorithm. Based on the semantic type and operation stage of the current code file, call the pre-trained convolutional neural network model to match the particle color mapping rules; The rendering of the dynamic fireworks effect further includes: The code changes in the terminal editing area are correlated with the mouse click events in the graphical operation area to extract code structure features and generate the overlay logic for particle effects. Based on the terminal input delay time and the load status of the backend nodes, the duration and transparency of the particle effect are dynamically adjusted. If the backend processing delay is detected to exceed the threshold, the particle life cycle is shortened and the rendering accuracy is reduced. By mapping the screen coordinate system to the line number, the mouse click position in the graphics operation area is converted into the line offset of the code in the terminal editing area, and the starting rendering coordinates of the particle effect are calculated based on this. The code abstract syntax tree input in the terminal editing area is parsed. When a specific semantic pattern is detected, an alert particle effect is automatically triggered in the graphical operation area and highlighted in conjunction with the corresponding item in the code outline. A dependency graph of code elements is constructed in the backend node. When the user selects an outline item in the graphical operation area, the particle connection lines of the associated code blocks are dynamically rendered based on the graph convolutional network, and the dependency boundaries are marked in the terminal editing area. The system collects data on terminal command execution time and resource usage. A color gradient layer is then overlaid in the preview window of the graphical operation area using a heatmap rendering algorithm. Darker areas represent high-load code segments, and clicking on the heatmap allows users to jump to the corresponding line of code on the terminal for optimization.

2. The operation method of the IDE application based on the combination of graphical interface and terminal according to claim 1, characterized in that, The operation events include file opening, code editing, or function invocation; The terminal command is a predefined vimcall data packet, which includes an event type identifier, the path and line number of the target file, callback function parameters and backend node address information, and is encapsulated in JSON format to support cross-platform parsing. The vimcall data packet embeds node address information and callback function parameters, which are used by the backend node to locate resources and trigger preset component response logic.

3. The operation method of the IDE application based on the combination of graphical interface and terminal according to claim 1, characterized in that, The incremental data packet is generated by real-time monitoring of character-level changes in the input content. The incremental data packet contains the following: the added, deleted, or modified code snippets and their context; the start and end positions of the changed line numbers; the operation timestamp and the user session identifier.

4. The operation method of the IDE application based on the combination of graphical interface and terminal according to claim 1, characterized in that, The hierarchical refactoring of the code outline includes: Parse the class, method, and variable definitions in the code file, extract their type, line number, and scope information, generate a tree structure, and label the icon resources in the graphical operation area; The tree-structured code outline is generated by parsing the code abstract syntax tree and associated with semantic analysis results, supporting functions such as collapsing and expanding, keyword filtering, and version difference comparison. If a user clicks on an outline item, the input cursor in the terminal's editing area is redirected to the corresponding line of code.

5. The operation method of the IDE application based on the combination of graphical interface and terminal according to claim 1, characterized in that, The method further includes: The operation interfaces of the graphical operation area and the terminal editing area are integrated through modular tools to support users in switching operation modes between the two types of areas; The modular tool is the raw-onecloud-gnt tool module, which provides standard APIs to manage the lifecycle of graphics components, the encapsulation and parsing of terminal commands, and the flow control of bidirectional data channels.

6. The operation method of the IDE application based on the combination of graphical interface and terminal according to claim 1, characterized in that, The graphical operation area is used to receive mouse interaction events, and the terminal editing area is used to receive command line input. The graphical operation area includes a file navigation panel, a cluster of function buttons, and a real-time preview window; The terminal editing area adopts a split-column design. The left side is the code input area, which supports syntax highlighting and auto-completion; the right side is the execution result output area, which displays the logs or error information returned by the backend in real time. Adjust the proportions between columns using vertical dividing lines, and double-click the dividing line to switch to full-screen mode.

Images