tzfun / vue-web-terminal Goto Github PK

    日志行数超过200就开始报错了，但有时候光一个ls就会弄好多行

他就会报满屏的错误

Originally posted by @18030705033 in #2 (comment)

Feature or optimization description
Make callbacks to VueWebTerminal asynchronous

Applicable scene
If a terminal represents a shell on a remote machine then it's very hard to overwrite callbacks since they can't wait for an asynchronous request to be fulfiled.

#28 is a good example.
If autocomplete depends on files paths (i.e. in cat command), then it shouldn't be necessary to send whole filesystem of the target computer to the browser just to implement autocomplete. If the search callback would be asynchronous, then it would be possible to just send the request and the VueWebTerminal would wait for the data to be ready.

    请问minScreen、fullScreen要重新写样式吗？还是可以直接调用方法更改样式呢？

Originally posted by @18030705033 in #2 (comment)

Feature or optimization description
建议增加动态修改窗口大小的功能。
Applicable scene
将其嵌入在分割页面中的其中一个页面，希望其能够跟随分割页面长宽变化。

    点击全屏按钮报错：cannot read properties of undefined (reading 'requestFullscreen),最小化和关闭按钮没问题，前面做好的也不能用了

Originally posted by @18030705033 in #9 (comment)

预计在下一个release版本支持拖拽功能，计划提供鼠标拖动header和api调用两种方式实现，敬情期待~

Bug description
A clear and concise description of what the bug is.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot
If applicable, add screenshots to help explain your problem.

Reproduce environment:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

Detailed Description
Add any other context about the problem here.

init-log 为 null 终端无法输入

因为我是模拟了一个ssh控制台，需要在初始化的时候直接输入密码的。

还有个问题就是，为什么我使用ask会提示
$Ask is not a constructor
代码如下:

import Terminal from 'vue-web-terminal'
onExecCmd(key, command, success, failed) {
  let asker = new Terminal.$Ask()
  success(asker)

  asker.ask({
    question: 'Please input github username: ',
    autoReview: true,
    callback: value => {
      console.log(value)
      asker.ask({
        question: 'Please input github password: ',
        autoReview: true,
        isPassword: true,
        callback: () => {
          //    do something
          asker.finish()
        }
      })
    }
  })

Bug description
A clear and concise description of what the bug is.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot
If applicable, add screenshots to help explain your problem.

看着像是少了css-loader的依赖，比如node-sass

Reproduce environment:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

Detailed Description
Add any other context about the problem here.

Feature or optimization description

Applicable scene

Feature or optimization description

目前命令键入内容是文本格式，计划在下个版本更新高亮显示，默认提供类似于下面这样的高亮样式，也将提供自定义高亮格式化的支持。

Feature or optimization description
官网使用vitepress改造
Applicable scene
对于各种使用场景、api用法展示效果更好

Hi there.

How I could get support for nuxt3?

I try to register client-side plugin for nuxt3 (because clint&server-side plugin get error about document is not defined) and use your code example, but I fail:

Maybe you could help? 👀

Bug description
Once the context prop changes on the terminal vue component, the feature of moving the cursor with arrow keys starts to malfunction. The result is that once that happens, the user is unable to reliably edit his currently typed command.

Steps to reproduce
Steps to reproduce the behavior:

1. Initialize Vue Terminal with some base props
2. Modify the context prop so that it has different length than before
3. Start writing some command in the terminal, do not send it.
4. Press left arrow, so that the cursor moves left
5. Instead of moving one char to the left, the cursor moves to a seemingly random position

Reproduce environment:

• OS: Manjaro Linux
• Browser 102.0.5005.115 (Official Build) (64-bit)
• Version 3.1.3

context有特殊字符<>转义显示回车保存后未转义

移除驼峰事件命名，改为中划线命名。

vue官方不推荐 emit 时用驼峰命名的事件，如下图，目前代码中几乎全是这种不规范的命名，因此将在下个版本全部改为中划线命名，为了兼容以前版本，驼峰命名的事件暂时保留，但在未来的版本中会将其移除！

届时移除后，对开发者们而言，@execCmd这类事件绑定将不再生效，建议将其修改为@exec-cmd格式。

如果你当前的写法为：

<terminal name="terminal"
              @execCmd="onExecCmd"
              @beforeExecCmd="beforeExecCmd">

建议修改为此类写法：

<terminal name="terminal"
              @exec-cmd="onExecCmd"
              @before-exec-cmd="beforeExecCmd">

Feature or optimization description

Applicable scene

使用方向上键获取上一条命令并执行之后，再次按上键获取不到这一条命令，而是这条命令的前一条
再次执行前一条命令的时候会出现这个情况，如果多按几次上键执行更早之前的命令则不会有这问题

当依次执行 command1 command2 command3之后
按压方向上键获取到command3并执行之后
再次按方向上键此时输入的是command2，而并不是command3，命令历史的位置没有重置
命令历史列表依然是command1，command2，command3
当历史命令只有一条时，重复上面过程，第二次获取不到命令，需要先按下键再按上键才能获取

当依次执行 command1 command2 command3之后
按压两次方向上键获取到command2并执行之后
再次按方向上键此时输入的是command2，是正常的
此时命令历史列表是command1，command2，command3，command2

建议在每一次执行后，都重置一下命令执行历史列表当前的下标

Bug description
A clear and concise description of what the bug is.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot
If applicable, add screenshots to help explain your problem.

Reproduce environment:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

Detailed Description
Add any other context about the problem here.

应该将TermialObj的方法等 includes到组件内

const terminal=this.$refs.terminal.pushMessage();

而不是目前这种，而不是全局的收集器，如果页面有大量的组件，光是起名字就挺麻烦的了

用的2.1.10版本，在Flash未结束的时候，如果这时候失去焦点，onKeydown事件会失效。
本来想用onKeydown实现ctrl^c结束执行的功能，但是发现这个问题，请教

请问有支持vue3的计划吗

Feature or optimization description
I can't see a way to write own autocomplete. 🤔

I can't find any event/callback that would let me do my own search. The tabKeyHandler example in the docs is limited to limits replacing the helpCmd, which isn't really the case I'm speaking of.
I've tried to find some workarounds like changing command-store prop when the Tab is being pressed, but looks like this property is ignored after the terminal is mounted.

Applicable scene
Current system for autocomplete looks smooth for commands, but not their arguments. Let's assume that we have a command some-command <path>. I won't be able to autocomplete path, which quickly gets tedious when commands like cd get to be used quite often.

PS:
Thank you @tzfun for the amazing piece of software, that you've created. It really fills a neat niche.

描述：
使用中文输入法，光标会重新回到第一个字，然后在你输入的时候不断后移

Todo

• vue-cli, webpack -> vite
• js -> ts
• 打包导出ts类型
• 选项式api -> 组合式api
• 左上角全屏按钮点击体验优化（当前点击范围不够大，只有点中心才生效；放大后再次点击，无法恢复之前大小）
• 去除python编译脚本，替换为bash、js等
• 默认状态下输入不在可输入范围内的命令，会直接卡死, 应改为报错?
• 清理==null判空
• json 下拉框无法选择（由于绑定了最外层的click事件）
• 考虑去除codemirror和highlightjs依赖
• header slot 恢复支持
• eslint告警清理
• demo和组件通过monorepo方式管理(pnpm workspace)
• demo js -> ts
• demo调试时支持加载sourcemap
• external dep(外部依赖)配置
• demo 拖动 -> 改为vueuse实现
• demo code显示问题
• demo 拖动后点击，自动回到**
• vue-json-viewer替换为vue3-json-viewer
• vue3-json-viewer的深度参数似乎不生效， 待确认
• demo各用例拆分，方便单独调试
• 减少模板ref使用，替换为组件
• focus失效
• 点标题为啥会自动回**？
• flash的进度条太长
• 发布npm仓测试
• 重构commandstore, 移除lodash依赖
• 重新组织目录结构
• TerminalObj相关逻辑参考naive-ui用hooks等方式重构

暂时无法实现

• 导出的类型是否可带上文档（tsdoc）(vue-tsc当前不支持👎)

请问目前是不是不支持websocket方式实时与后端进行交互，数据全部由后端进行提供

当前Document存在多个Terminal实例时，拖拽效果只会作用在一个实例上

短时间内暂时无法完成Shell组件的开发，先在Terminal组件中支持ANSI控制码的过滤和颜色样式控制码转换

目标：

• 支持 xterm-256color 颜色类ANSI控制码
• 过滤并去除光标控制码、模式控制码、键盘控制码、窗口控制类控制码等
• 在 pushMessage接口支持

Bug description
Unable to copy value from table form of data.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to 'https://tzfun.github.io/vue-web-terminal/?cmd=table'
2. copy value from any cell
3. paste
4. Didn't get desired results.

Screenshot
If applicable, add screenshots to help explain your problem.

Reproduce environment:

• OS: Windows
• Browser Chrome
• version ^2.1.10

Detailed Description
Add any other context about the problem here.

Feature or optimization description

Applicable scene

目前会持续维护两个分支的版本号：2.xx和3.xx:

• 2.xx 对应 vue2 版本
• 3.xx 对应 vue3 版本

vue3版本除安装方式以外其他用法与vue2保持一致

//  vue3安装
npm install [email protected] --save 

main.js中安装

import Terminal from 'vue-web-terminal'

// for vue3
const app = createApp(App)
app.use(Terminal)

使用

<template>
  <div id="app">
    <terminal name="my-terminal" @execCmd="onExecCmd"></terminal>
  </div>
</template>

<script>
import Terminal from "vue-web-terminal"

export default {
  name: 'App',
  components:{Terminal},
  methods: {
    onExecCmd(key, command, success, failed) {
     //  handle your command ...
    }
  }
}
</script>

<style>
body, html, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

Bug描述
A clear and concise description of what the bug is.

复现步骤
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

截图
If applicable, add screenshots to help explain your problem.

复现环境:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

详细描述
Add any other context about the problem here.

2.1.10版本，固定不了是啥情况，还想问下怎么禁止拖拽

<template>
  <div>
    <Terminal
      name="my-terminal"
      @exec-cmd="onCommand"
    />
  </div>
</template>

<script>
import Terminal from "vue-web-terminal";

export default {
  name: "FakeVirtualTerminal",
  components: {
    Terminal,
  },
  data() {
    return {
    };
  },
  methods: {
    onCommand(key, command, success, failed) {
      if (key === "fail") {
        failed("Something wrong!!!");
      } else {
        let allClass = ["success", "error", "system", "info", "warning"];

        let clazz = allClass[Math.floor(Math.random() * allClass.length)];
        success({
          type: "normal",
          class: clazz,
          tag: "成功",
          content: command,
        });
      }
    },
  },
};
</script>

计划在2.2.x和3.2.x版本新增Shell组件，保留和Terminal共有的全屏、拖拽外围功能，其内部控制台显示区域将重新实现，计划支持ANSI的部分样式和光标定位规则，输入输出可直接接入SSH，无需再做字符过滤。

此版本计划对现有代码进行优化重构，对现有的Terminal组件和API调用在使用方法上有较大调整，升级此版本需要修改对应的使用方式，后面会在文档中说明。

关于Shell组件更多你所期待或需求的功能可在此issue留言~

vue3 如何禁止输入中文呢

Originally posted by @18030705033 in #2 (comment)

目前已经支持了自定义输入过滤功能，通过定义inputFilter函数来自定义过滤输入，支持版本：3.0.3+以及2.0.4+。

下面示例展示过滤中文的方法，其余场景规则可根据你的需求进行自定义实现。

<template>
  <div id="app">
    <terminal name="my-terminal" @execCmd="onExecCmd" :inputFilter="inputFilter"></terminal>
  </div>
</template>

<script>
import Terminal from 'vue-web-terminal'

export default {
  name: 'App',
  components: {Terminal},
  setup() {

  },
  methods: {
    onExecCmd(key, command, success, failed) {
      //   省略命令执行逻辑...
    },
    inputFilter(data, value, e) {
      console.log(data, value, e)
      return value.replace(/[\u4e00-\u9fa5]/g, "")
    }
  }
}
</script>

初始化之后光标的起始位置就固定了，虽然可以修改context，但是修改完之后，再按方向左键或者Home键光标的位置与实际的输入位置无法对齐

Bug description
官方样例中json深度下拉框无法点击
看控制台是因为多了一个click监听器，但看不出来是哪里附加的

Steps to reproduce
Steps to reproduce the behavior:

1. 打开官方样例 https://tzfun.github.io/vue-web-terminal/
2. 输入json
3. 点击下拉框

Screenshot

Reproduce environment:

• OS: Windows
• Browser edge

Bug description
A clear and concise description of what the bug is.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot
If applicable, add screenshots to help explain your problem.

Reproduce environment:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

Detailed Description
Add any other context about the problem here.

支持修改name属性

在多窗口场景下为了方便管理多个Terminal实例，需要动态修改实例的name属性，目前版本暂不支持。

Bug description
打印的是子进程标准输出, 控制台上看console是没有问题的 组件上显示的符号成了乱码

Screenshot
如图 作者哥帮忙看看

Reproduce environment:

• windows
• chrome
• electron18.3.5

用v-if控制组件 <Terminal v-if="flag" name="bbb" @OnClick="clickTerminal"/>，当点击关闭按钮
const clickTerminal=(key:string)=>{
if(key=='close'){
flag.value=false
}
}
然后重新创建组件，会报错 Uncaught (in promise) Error: Unable to register an existing terminal: bbb

at Object.o2 [as register] (vue-web-terminal.js:16:51058)

这是今天新创建的一个demo，只有helloWolrd的那种

Bug description
I have given :show-header="false" in vue-web-terminal @2.1.10 but my whole terminal is hidden.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot
<Terminal
name="my-terminal"
:context="'--'"
:title="''"
:show-header = "false"
:initLog = "initLog"
@exec-cmd="onExecCmd"
>

Reproduce environment:

• OS: [e.g. iOS]
• Browser Chrome
• Version 2.1.10

Detailed Description
Add any other context about the problem here.

Bug description
从QQ中复制一个命令行到terminal中，无法正常识别命令行的参数和值

原因是部分版本的QQ将空格转换成了 non-breaking ascii 160，也就是对应的NBSP，默认命令行格式化中没有对其进行处理。

复现方法：

QQ中复制一条命令：

粘贴到Terminal中，发现无法高亮参数和值：

正常应该显示为：

    大佬，现在如果在终端输入内容，但是不执行，而是关闭终端，再次开启的时候我只有先execute（）  然后将terminalLog清空，有没有啥方法可以直接初始化啊

Originally posted by @18030705033 in #2 (comment)

Feature or optimization description
希望支持ts; 另外vue3分支的是不是可以切到vite
Applicable scene

Bug description
A clear and concise description of what the bug is.

Steps to reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshot

Reproduce environment:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 2.0.4]

Detailed Description
本地运行之后，初始化就报错

Feature or optimization description

Applicable scene

增加一个消息输出到控制台之前的回调函数，类似于如下

<template>
    <Terminal :before-push="beforePush" />
</template>

<script lang='ts' setup>
import Terminal from "vue-web-terminal"

const beforePush = (name, msg) => {

}
</script>

无论是主动push还是命令执行结果都应该走这个回调

Feature or optimization description
Currently it's hard to imitate a file editor because the input for the question answer is a standard HTML input. A text area would allow for a multiline-edition.

To better visualize the issue here's the current size of the input (marked with a red color):

It would also be neat to be able to pre-fill the input so that one could put there current content of a file.

Applicable scene
File editors