vue-web-terminal

DownloadsVersion

Introduce

vue-web-terminal is a web-based command line window plugin built by Vue that supports displaying multiple content formats. It is an imperative simulation terminal that controls the rendering results by the front end. It has built-in advanced functions such as user Q&A, text editing, animation, etc., and is very flexible and customizable.

Features

  • Supported message formats: plain text, table, json, code/multi-line text, html, ansi
  • Supports real-time content display and appending, and can create simple animation effects
  • Support user question and answer input
  • Support online text editing
  • Support Highlight, Codemirror code highlighting
  • Support window dragging and fixing
  • Support ← → cursor key switching and ↑ ↓ key history command switching
  • Support fullscreen
  • Support command input prompts
  • Support logging group folding
  • Supports multiple styles of slots, customizable styles
  • Supports themes, with built-in dark and light themes by default, and you can also customize themes
  • Provides a rich set of JS APIs, almost all functions can be simulated by APIs to simulate non-human operations
  • Supports Vue2/Vue3

vue-web-terminal.gif

What it can do

vue-web-terminal is a command-based emulation terminal. It can be used to do all tools that execute commands, and it can also be used to display content controlled by the front-end:

  • 👌 Implementing a MySQL command client
  • 👌 Implementing a Redis command client
  • 👌 Implementing ETCD command client
  • 👌 Implement custom service command terminals, such as game GM commands
  • 👌 Implementing a custom web control terminal
  • 👌 File content display, such as log file printing
  • 👌 Access WebSocket and send instructions to the server, and the server returns data in the specified format
  • 👌 Simple SSH command execution (only in command mode). Note that it is only simple, complex commands such as htop, vim, etc. are not supported
  • 👌 It is suitable for scenarios where the content display is controlled by the front end rather than the server .......

Important

vue-web-terminal does not have the ability to execute a specific command. This ability needs to be implemented by the developer himself. What it is responsible for is to obtain the command that the user wants to execute from the user in the form of a terminal interface on the web page, and then hand it over to the developer to implement. After execution, it will be handed over to it to display to the user.

What it can't do

vue-web-terminal is a terminal implemented by front-end simulation, not a real terminal in the traditional sense. Before using it, you need to know that there are usually two types of terminal display logic: back-end control and front-end control.

back-end control

How the terminal content is displayed is controlled by the backend or server. The frontend only needs to parse the control code of the backend to render the corresponding style. For example, the cmd of Windows, the terminal of Mac, various SSH clients, etc. The display of these terminals is controlled by ANSI Control Code.

front-end control

How the terminal content is displayed is controlled by the front end. The back end only needs to send the data to the front end. The specific display format is determined by the front end. It can even realize that the same content can be displayed in different formats under different conditions, such as command line clients of MySQL, Redis, etc. This type of terminal is more customizable.

vue-web-terminal is a front-end control type terminal! Therefore, the back-end control type terminal implementation scenario is not suitable for it, please consider carefully before choosing a solution

  • 😔 SSH terminal, scenarios with complex control code display: vim, htop, etc. (The plug-in only provides color control for ANSI control codes, and other control codes will be automatically filtered)
  • 😔 Server remote control terminal

Contact the author

I am a back-end Coder, and I only know a little about the front-end. I developed this plug-in because of my personal interest.

If you have good ideas for code optimization or functions and are willing to contribute code, please submit Pull Request, If you have any questions about the use of the plugin or find bugs, please submit issue.

This is my contact information:

📧 beifengtz@qq.com

beifeng-tz （Please add a note vue-web-terminal）

This plugin is completely open source and free. It is not easy to create. If you think it is good, you can donate to support this project. 😉

Thank you for your support, your support is the author's motivation! (Sort by donation time)

License

This plugin complies with the Apache License 2.0 open source agreement