优化terminal的显示

Author: tzfun

README.md

@@ -86,9 +86,11 @@ export default {
 </script>
 
 <style>
-body, html {
+body, html, #app {
   margin: 0;
   padding: 0;
+  width: 100%;
+  height: 100%;
 }
 </style>
 ```
@@ -99,32 +101,34 @@ body, html {
 
 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               |
-| command-store      | 自定义的命令行库，见[命令行定义格式](#命令行定义)             | array   | [内置命令行](#内置命令行)    |
+| 参数                  | 说明                                      | 类型       | 默认值               |
+|---------------------|-----------------------------------------|----------|-------------------|
+| 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) {}  |
 
 ## Select Events
 
 terminal标签支持事件表
 
-| 事件名称          | 说明                                                                                                             | 回调参数                                 |
-|---------------|----------------------------------------------------------------------------------------------------------------|--------------------------------------|
-| execCmd       | 执行自定义命令时触发。`success`和`failed`为回调函数，**
-必须调用两个回调其中之一才会回显！**，其中`success`回调参数为一个[消息对象](#消息对象)，`failed`回调参数为一个string | `(cmdKey, command, success, failed)` |
-| beforeExecCmd | 执行任意命令之前触发                                                                                                     | `(cmdKey, command)`                  |
-| onKeydown     | 当获取光标焦点时，按下任意键盘触发                                                                                              | `(event)`                            |
-| onClick       | 用户点击按钮时触发，参数`key`为按钮唯一识别，已有按钮：close、minScreen、fullScreen、title                                                 | `(key)`                              |
+| 事件名称                                                                      | 说明                                                             | 回调参数                |
+|---------------------------------------------------------------------------|----------------------------------------------------------------|---------------------|
+| execCmd                                                                   | 执行自定义命令时触发。`success`和`failed`为回调函数，**                          |                     |
+| 必须调用两个回调其中之一才会回显！**，其中`success`回调参数为一个[消息对象](#消息对象)，`failed`回调参数为一个string | `(cmdKey, command, success, failed)`                           |                     |
+| beforeExecCmd                                                             | 执行任意命令之前触发                                                     | `(cmdKey, command)` |
+| onKeydown                                                                 | 当获取光标焦点时，按下任意键盘触发                                              | `(event)`           |
+| onClick                                                                   | 用户点击按钮时触发，参数`key`为按钮唯一识别，已有按钮：close、minScreen、fullScreen、title | `(key)`             |
 
 ## Api
 
@@ -196,7 +200,7 @@ export default {
 
 ### normal 普通文本
 
-content为字符串格式，支持html标签，time字段会在push时自动填充，class、content、type必填，其他选填
+content为字符串格式，支持html标签，time字段会在push时自动填充，content、type必填，其他选填
 
 ```json
 {
@@ -321,7 +325,7 @@ type为`table`时content为表格配置，`head`为表头，`rows`为每行的
 type为`html`时可自定义内容格式，content为html标签构成
 
 ```js
-execCmd(key, command, success) 
+execCmd(key, command, success)
 {
     // ...
     success({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-web-terminal",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

src/Terminal.js

@@ -91,6 +91,9 @@ export default {
         }, //  命令行搜索以及help指令用
         commandStore: {
             type: Array
+        }, //   命令行排序方式
+        commandStoreSort: {
+            type: Function
         }, //  记录大小超出此限制会发出警告，单位byte
         warnLogByteLimit: {
             type: Number, default: 1024 * 1024 * 10
@@ -110,6 +113,10 @@ export default {
         showHeader: {
             type: Boolean,
             default: true
+        },
+        helpStyle:{
+            type: String,
+            default: ''
         }
     },
     created() {
@@ -129,6 +136,9 @@ export default {
         }
 
         if (this.commandStore != null) {
+            if (this.commandStoreSort != null) {
+                this.commandStore.sort(this.commandStoreSort)
+            }
             this.allCommandStore = this.allCommandStore.concat(this.commandStore)
         }
     },

src/Terminal.vue

@@ -63,7 +63,7 @@
               <span v-show="showLogTime">{{ item.time == null ? "" : (item.time + " ") }}</span>
               <span :class="item.class"
                     style="margin-right: 10px">{{ item.tag == null ? item.class : item.tag }}</span>
-              <span v-html="item.content" @click="_activeCursor"></span>
+              <span v-html="item.content"></span>
             </span>
             <span v-else-if="item.type === 'json'" style="position: relative">
                 <json-viewer :expand-depth="item.depth"
@@ -108,7 +108,7 @@
                 </table>
               </div>
             </div>
-            <div v-else-if="item.type === 'html'" v-html="item.content"></div>
+            <div v-else-if="item.type === 'html'" v-html="item.content" @click.self="_activeCursor"></div>
           </div>
         </div>
         <p class="terminal-last-line crude-font" v-show="showInputLine" @click.self="_activeCursor">
@@ -135,7 +135,7 @@
         <p class="help-msg" v-if="searchCmd.item != null" @click.self="_activeCursor">{{ searchCmd.item.usage }}</p>
       </div>
     </div>
-    <div class="cmd-help" :style="`${showHeader ? '' : 'top:10px'}`"
+    <div class="cmd-help" :style="helpStyle"
          v-if="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>
@@ -193,7 +193,7 @@ export default TerminalJs
 }
 
 .terminal-container {
-  position: absolute;
+  position: relative;
   width: 100%;
   min-height: 100%;
   margin: 0;