vue-web-terminal

一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件，支持格式：普通文本、表格、json、代码，支持自定义命令行库、键入搜索提示等，支持⬆️、⬇️、⬅️、➡切换光标️。

快速上手

npm安装vue-web-terminal

npm install vue-web-terminal --save 

main.js中载入 Terminal 插件

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

使用示例

<template>
  <div id="app">
    <terminal name="my-terminal"
              @execCmd="onExecCmd"
              @triggerClick="onClick"
              @onKeydown="onKeydown"
              show-log-time
              warnLogLimitEnable></terminal>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    /**
     * 当用户输入自定义命令时调用
     *
     * @param key     命令行key，用于唯一标识
     * @param command 命令行
     * @param success 成功回调
     * @param failed  失败回调
     */
    onExecCmd(key, command, success, failed) {
      if (key === 'fail') {
        failed('Something wrong!!!')
      } else if (key === 'json') {
        //  do something here
        success({
          type: 'json',
          class: 'success',
          content: {
            k1: 'welcome to vue-web-terminal',
            k2: 120,
            k3: ['h', 'e', 'l', 'l', 'o'],
            k4: {k41: 2, k42: '200'}
          }
        })
      } else if (key === 'code') {
        success({
          type: 'code',
          class: 'system',
          content: 'import Terminal from \'vue-web-terminal\'\n' +
              '\n' +
              'Vue.use(Terminal)'
        })
      } else {
        success({
          type: 'normal',
          class: 'success',
          tag: '成功',
          content: command
        })
      }
    },
    onClick(key) {
      console.log("trigger click: " + key)
    },
    onKeydown(event) {
      console.log(event)
    }
  }
}
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
}
</style>

插件文档

Select Attributes

Select Events

Api

本插件提供了一些 Api 可以使用 Vue 主动向插件发起事件请求。

Terminal在 Vue 的prototype中定义了一个变量可以获取Terminal对象

this.$terminal

//  or

Vue.prototype.$terminal

向Terminal推送一条消息

let name = 'my-terminal'   //  每一个terminal都会定义一个name，详情见前面文档
let message = {
    type: 'normal',
    class: 'warning',
    content: 'This is a wanning message.'
}

this.$terminal.pushMessage(name, message)

修改上下文

比如当前输入行$ /vue-web-terminal/tzfun > 的 /vue-web-terminal/tzfun 就是上下文，上下文文本可以由开发者自由设置 ，但是需使用.sync绑定一个变量才能成功

<template>
  <div id="app">
    <terminal name="my-terminal" :context.sync="context"></terminal>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      context: '/hello'
    }
  },
  methods: {
    _updateContext(newCtx) {
      this.$terminal.updateContext("my-terminal", newCtx)
    }
  }
}
</script>

消息对象

本插件定义了消息对象，任何需按照此格式定义才能正确显示。

初始化日志

初始化日志比较特殊，只需要传content即可，格式为字符串

{
  "content": "这是一条欢迎日志"
}

普通文本

content为字符串格式，支持html标签，time字段会在push时自动填充，class、content、type必填，其他选填

{
  "time": "2022-02-17 18:12:20",
  "class": "success",
  "type": "normal",
  "content": "这是一条普通文本消息",
  "tag": "Tag success"
}

json

type为json时content需传一个json对象

{
  "type": "json",
  "content": {
    "key": "value",
    "num": 1
  }
}

code

type为code时content类型为字符串，直接传入文本或代码即可

{
  "type": "json",
  "content": "import Terminal from 'vue-web-terminal'\n\nVue.use(Terminal)"
}

table

type为table时content为表格配置，head为表头，rows为每行的数据，支持html标签

{
  "type": "table",
  "content": {
    "head": [
      "title1",
      "title2",
      "title3",
      "title4"
    ],
    "rows": [
      [
        "name1",
        "hello world",
        "this is a test1",
        "xxxxxxxx"
      ],
      [
        "name2",
        "hello world",
        "this is a test2 test2",
        "xxxxxxxx"
      ]
    ]
  }
}

命令行定义

如果开启了命令行帮助搜索功能，在实例化Terminal之前需要传入自定义命令行库，传入的命令行库为 N 个命令行的数组，以下是命令行格式定义规则：

命令行示例格式

示例格式比较简单，des为描述，cmd为具体的命令行，json格式如下：

[
  {
    "des": "获取所有任务信息",
    "cmd": "task -u 11001 -o pack"
  },
  {
    "des": "获取任务进度",
    "cmd": "task -u 11001 -o query -id 1001"
  }
]

内置命令行

Terminal默认内置有以下命令，且不可替代

[
  {
    "key": "clear",
    "title": "Clear logs",
    "group": "local",
    "usage": "clear [history]",
    "description": "Clear screen or history.",
    "example": [
      {
        "cmd": "clear",
        "des": "Clear all records on the current screen."
      },
      {
        "cmd": "clear history",
        "des": "Clear command history."
      }
    ]
  },
  {
    "key": "refresh",
    "title": "Refresh page",
    "group": "local",
    "usage": "refresh",
    "description": "Refresh current page."
  },
  {
    "key": "open",
    "title": "Open page",
    "group": "local",
    "usage": "open <url>",
    "description": "Open a specified page.",
    "example": [
      {
        "cmd": "open blog.beifengtz.com"
      }
    ]
  }
]