feat help命令支持分组搜；输入支持过滤；支持隐藏命令样例提示框

Author: tzfun

README.md

@@ -111,22 +111,23 @@ body, html, #app {
 
 terminal标签支持属性参数表
 
-| 参数                  | 说明                                      | 类型       | 默认值               |
-|---------------------|-----------------------------------------|----------|-------------------|
-| name                | Terminal实例名称，同一页面的name必须唯一，Api中使用也需用到此值 | string   | terminal          |
-| context             | 初始化上下文文本                                | string   | /vue-web-terminal |
-| title               | header中显示的标题                            | string   | vue-web-terminal  |
-| show-header         | 是否显示header                              | boolean  | true              |
-| init-log            | Terminal初始化时显示的日志，是由[消息对象](#消息对象)组成的数组  | array    | 略                 |
-| init-log-delay      | 初始化显示日志时每条日志之间的间隔时间，单位毫秒 ms             | number   | 150               |
-| show-log-time       | 当消息**type**为`normal`时是否显示时间             | boolean  | true              |
-| warnLogByteLimit    | 当前Terminal日志占用内存大小超出此限制会发出警告，单位`byte`   | number   | 1024 * 1024 * 10  |
-| warnLogCountLimit   | 当前Terminal日志条数超出此限制会发出警告                | number   | 200               |
-| warnLogLimitEnable  | 是否开启日志限制警告                              | boolean  | true              |
-| auto-help           | 是否打开命令行自动搜索提示功能                         | boolean  | true              |
-| help-style          | help自定义样式                               | string   |                   |
-| command-store       | 自定义的命令库，见[命令定义格式](#命令定义)                | array    | [内置命令行](#内置命令行)   |
-| command-store-sort  | 命令行库排序                                  | function | function(a,b) {}  |
+| 参数                 | 说明                                      | 类型       | 默认值                                                |
+|--------------------|-----------------------------------------|----------|----------------------------------------------------|
+| name               | Terminal实例名称，同一页面的name必须唯一，Api中使用也需用到此值 | string   | terminal                                           |
+| context            | 初始化上下文文本                                | string   | /vue-web-terminal                                  |
+| title              | header中显示的标题                            | string   | vue-web-terminal                                   |
+| show-header        | 是否显示header                              | boolean  | true                                               |
+| init-log           | Terminal初始化时显示的日志，是由[消息对象](#消息对象)组成的数组  | array    | 略                                                  |
+| init-log-delay     | 初始化显示日志时每条日志之间的间隔时间，单位毫秒 ms             | number   | 150                                                |
+| show-log-time      | 当消息**type**为`normal`时是否显示时间             | boolean  | true                                               |
+| warnLogByteLimit   | 当前Terminal日志占用内存大小超出此限制会发出警告，单位`byte`   | number   | 1024 * 1024 * 10                                   |
+| warnLogCountLimit  | 当前Terminal日志条数超出此限制会发出警告                | number   | 200                                                |
+| warnLogLimitEnable | 是否开启日志限制警告                              | boolean  | true                                               |
+| auto-help          | 是否打开命令行自动搜索提示功能                         | boolean  | true                                               |
+| enableExampleHint  | 是否显示样例提示                                | boolean  | true                                               |
+| command-store      | 自定义的命令库，见[命令定义格式](#命令定义)                | array    | [内置命令行](#内置命令行)                                    |
+| command-store-sort | 命令行库排序                                  | function | function(a,b) {}                                   |
+| inputFilter        | 自定义输入过滤，返回值为过滤后的字符串                     | function | function(当前输入字符char,输入框内字符串value, input时间event) {} |
 
 ## Select Events
 
@@ -382,6 +383,25 @@ execCmd(key, command, success)
 ]
 ```
 
+### 命令Help
+
+插件内置了help命令可以方便使用者搜索命令库，通过help命令可以查看命令的key、分组、解释样例信息。
+```shell
+
+# 显示全部命令信息
+help
+
+# 模糊搜索命令，搜索build前缀的命令
+help build*
+
+# 模糊搜索名，搜索带有event的命令
+help *event*
+
+# 按分组搜索，搜索关键词需要以":"开头，搜索分组为server的所有命令
+help :server
+
+```
+
 ### 内置命令
 
 Terminal默认内置有以下命令，且不可替代
@@ -442,4 +462,4 @@ Terminal默认内置有以下命令，且不可替代
     ]
   }
 ]
-```
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-terminal",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "网页端命令行插件，适配vue3",
   "private": false,
   "scripts": {

src/Terminal.js

@@ -37,8 +37,12 @@ export default {
                         cmd: 'help refresh'
                     },
                     {
-                        des:"Get help documentation for fuzzy matching commands.",
+                        des: "Get help documentation for fuzzy matching commands.",
                         cmd: 'help *e*'
+                    },
+                    {
+                        des: "Get help documentation for specified group, match key must start with ':'.",
+                        cmd: 'help groupA:'
                     }
                 ]
             }, {
@@ -131,9 +135,12 @@ export default {
             type: Boolean,
             default: true
         },
-        helpStyle: {
-            type: String,
-            default: ''
+        enableExampleHint: {
+            type: Boolean,
+            default: true
+        },
+        inputFilter: {
+            type: Function
         }
     },
     created() {
@@ -239,13 +246,26 @@ export default {
                 this.$refs.inputCmd.focus()
             })
         },
-        _printHelp(regExp) {
+        /**
+         * help命令执行后调用此方法
+         *
+         * 命令搜索：comm*、command
+         * 分组搜索：:groupA
+         */
+        _printHelp(regExp, srcStr) {
             let content = {
                 head: ['KEY', 'GROUP', 'DETAIL'],
                 rows: []
             }
+            let findGroup = srcStr && srcStr.length > 1 && srcStr.startsWith(":")
+                ? srcStr.substring(1).toLowerCase()
+                : null
             this.allCommandStore.forEach(command => {
-                if (!regExp.test(command.key)) {
+                if (findGroup) {
+                    if (_isEmpty(command.group) || findGroup !== command.group.toLowerCase()) {
+                        return;
+                    }
+                } else if (!regExp.test(command.key)) {
                     return
                 }
                 let row = []
@@ -312,7 +332,7 @@ export default {
                         case 'help': {
                             let reg = `^${split.length > 1 && _nonEmpty(split[1]) ? split[1] : "*"}$`
                             reg = reg.replace(/\*/g, ".*")
-                            this._printHelp(new RegExp(reg, "i"))
+                            this._printHelp(new RegExp(reg, "i"), split[1])
                             break;
                         }
                         case 'clear':
@@ -625,6 +645,16 @@ export default {
                     this._searchCmd()
                 }
             }
+        },
+        _onInput(e) {
+            if (this.inputFilter != null) {
+                let value = e.target.value
+                let newStr = this.inputFilter(e.data, value, e)
+                if (newStr == null) {
+                    newStr = value
+                }
+                this.command = newStr
+            }
         }
     }
-}
+}

src/Terminal.vue

@@ -119,7 +119,7 @@
             <span> > </span>
           </span><span v-html="require('./Util.js')._html(command)"></span><span v-show="cursorConf.show" class="cursor"
                                                                                  :style="`width:${cursorConf.width}px;margin-left:${cursorConf.left}px`">&nbsp;</span>
-          <input type="text" autofocus="autofocus" id="command-input" v-model="command" class="input-box"
+          <input type="text" autofocus="autofocus" id="command-input" v-model="command" @input="_onInput" class="input-box"
                  ref="inputCmd"
                  autocomplete="off"
                  auto-complete="new-password"
@@ -137,8 +137,7 @@
         <p class="help-msg" v-if="searchCmd.item != null" @click.self="_activeCursor">{{ searchCmd.item.usage }}</p>
       </div>
     </div>
-    <div class="cmd-help" :style="helpStyle"
-         v-if="searchCmd.item != null && !(require('./Util.js'))._screenType().xs">
+    <div class="cmd-help" v-if="enableExampleHint && searchCmd.item != null && !(require('./Util.js'))._screenType().xs">
       <p class="text" v-if="searchCmd.item.description != null" style="margin: 15px 0"
          v-html="searchCmd.item.description"></p>
       <div v-if="searchCmd.item.example != null && searchCmd.item.example.length > 0">