From d2d5a0e12ff75ad615a940591981c0da818e4ac2 Mon Sep 17 00:00:00 2001
From: midoks <midoks@163.com>
Date: Fri, 20 Jan 2023 02:11:07 +0800
Subject: [PATCH] up

---
 plugins/webssh/index.html      |   2 -
 plugins/webssh/info.json       |  14 +-
 plugins/webssh/js/webssh.js    |  67 ++--
 plugins/webssh/menu/index.css  | 620 +++++++++++++++++++++++++++++++++
 plugins/webssh/menu/index.html | 119 +++++++
 5 files changed, 796 insertions(+), 26 deletions(-)
 create mode 100644 plugins/webssh/menu/index.css
 create mode 100755 plugins/webssh/menu/index.html

diff --git a/plugins/webssh/index.html b/plugins/webssh/index.html
index a53f8768e..59bacbcf1 100755
--- a/plugins/webssh/index.html
+++ b/plugins/webssh/index.html
@@ -1,7 +1,5 @@
 <script type="text/javascript">
 resetPluginWinWidth(480);
-// $.getScript( "/plugins/file?name=webssh&f=js/webssh.js", function() {
-//});
 if ($(".term-box #term").text() != 'W') {
     layer.closeAll();
     webShell();
diff --git a/plugins/webssh/info.json b/plugins/webssh/info.json
index 648c1d7ba..38a0b3697 100755
--- a/plugins/webssh/info.json
+++ b/plugins/webssh/info.json
@@ -1,11 +1,23 @@
 {
+	"hook":[
+		{
+			"tag":"menu",
+			"menu": {
+				"title":"终端管理",
+				"name":"webssh",
+				"path":"menu/index.html",
+				"css_path":"menu/index.css",
+				"js_path":"js/webssh.js"
+			}
+		}
+	],
 	"id":3,
 	"title":"SSH终端",
 	"tip":"lib",
 	"name":"webssh",
 	"type":"扩展",
 	"ps":"完整功能的SSH客户端，仅用于连接本服务器",
-	"versions":"1.0",
+	"versions":"2.0",
 	"shell":"install.sh",
 	"checks":"server/webssh",
 	"path": "server/webssh",
diff --git a/plugins/webssh/js/webssh.js b/plugins/webssh/js/webssh.js
index ad6e9ef56..d4fab1dd6 100755
--- a/plugins/webssh/js/webssh.js
+++ b/plugins/webssh/js/webssh.js
@@ -1,4 +1,43 @@
-function web_shell2() {
+
+changeDivH();
+
+$(document).ready(function(){
+    changeDivH();
+    $(window).resize(function(){
+        changeDivH();
+    });
+
+    $('.term_content_tab .term-tool-button').click(function(){
+        if ($(this).hasClass('tool-show')){
+            $('#term_box_view').css('margin-right',300);
+            $('.term_tootls').css('display',"block");
+            $(this).removeClass('tool-show').addClass('tool-hide');
+            $(this).find('span').removeClass('glyphicon-menu-left').addClass('glyphicon-menu-right');
+        } else {
+            $('#term_box_view').css('margin-right',0);
+            $('.term_tootls').css('display',"none");
+            $(this).removeClass('tool-hide').addClass('tool-show');
+            $(this).find('span').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-left');
+        }
+    });
+
+    $('.glyphicon-resize-full').click(function(ele){
+        const func = ele.requestFullscreen || ele.mozRequestFullScreen || ele.webkitRequestFullscreen || ele.msRequestFullscreen; 
+        var e = $('#term_box_view').parent();
+        func.call(e);
+    });
+
+    webShell_Menu();
+});
+
+
+function changeDivH(){
+    var l = $(window).height();
+    $('#term_box_view').parent().css('height',l-80);
+}
+
+
+function webShell_Menu() {
     var termCols = 83;
     var termRows = 21;
     var sendTotal = 0;
@@ -35,26 +74,8 @@ function web_shell2() {
         socket.emit('webssh', data);
     });
 
-
-    var term_box = layer.open({
-        type: 1,
-        title: "本地终端",
-        area: ['685px','435px'],
-        closeBtn: 2,
-        shadeClose: false,
-        content: '<div class="term-box"><div id="term"></div></div>\
-					<div class="shell-text-input">\
-                    <textarea type="text" class="bt-input-text-shell" placeholder="请将命令粘贴到此处.." value="" name="ssh_copy" />\
-					<div class="shell-btn-group">\
-                    <button class="shellbutton btn btn-success btn-sm pull-right shell_btn_1">发送(Ctrl+Enter)</button>\
-					<button class="shellbutton btn btn-default btn-sm pull-right shell_btn_close">关闭</button>\
-					</div>\
-                </div>',
-        cancel: function () {
-            term.destroy();
-            clearInterval(interval);
-        }
-    });
+    // term.destroy();
+    // clearInterval(interval);
 	$(".shell_btn_close").click(function(){
 		layer.close(term_box);
 		term.destroy();
@@ -62,8 +83,8 @@ function web_shell2() {
 	})
 	
     setTimeout(function () {
-        $('.terminal').detach().appendTo('#term');
-        $("#term").show();
+        $('.terminal').detach().appendTo('#ECFEfRWM8');
+        $("#ECFEfRWM8").show();
         socket.emit('webssh', "\n");
         term.focus();
 
diff --git a/plugins/webssh/menu/index.css b/plugins/webssh/menu/index.css
new file mode 100644
index 000000000..eba879f94
--- /dev/null
+++ b/plugins/webssh/menu/index.css
@@ -0,0 +1,620 @@
+
+/* menu start  */
+.menu .menu_plugin_webssh {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpiYKAQMM6cOVMASBuQozk9Pf0AC5AuAOJ6cgwAWt7IhMQvRKIfAPEEYgxhQWL3o9EFpBgwAeifQhKdD7YI5oWPUMEEmAQR4COyATBwAIgdgIacB2IFYkxhQouWB0BsCA3E86QGIsxvDSBXgGIDSxr5ALTgAk4XADWAQt4fiB2BChcAaQVoGoHheLwuAGqagBz/UNsciQ4DEgE/zAUfQM4DOt+eRANAYTMRZADIrxfIdMUFSnMzA0CAAQD0hjqnYxWD2gAAAABJRU5ErkJggg==");
+}
+
+.menu .current .menu_plugin_webssh:hover {
+    background-image: url("data:image/gif;base64,R0lGODlhEAAQAMQXAJ6ipUFITySRPIiMkDFRQuXm5jJKQy1kQCGeOzBXQSl3PiWLPVhfZSxrQCpxP9na2yeEPTREQ8LExmRqb5OXm/Hx8TU9RAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyQjYwMTU3OTA2QTExRUJCN0NFQUUwQjRDMzM4RDJDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyQjYwMTU4OTA2QTExRUJCN0NFQUUwQjRDMzM4RDJDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzJCNjAxNTU5MDZBMTFFQkI3Q0VBRTBCNEMzMzhEMkMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzJCNjAxNTY5MDZBMTFFQkI3Q0VBRTBCNEMzMzhEMkMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQFMgAXACwAAAAAEAAQAAAFU6AljmRpBVOqrqtFVXAsy9Q7VMMDzHHN/5UawGQC1CiWg4IoOiINAoGB6BxBENSjyIE4oFKMprYhIFgYkvTQpWWOqm6RcVBI2+/2AuXL6k8CcSYhACH5BAUyABcALAcACQAFAAIAAAUIYJSMBLGcSggAIfkEBTIAFwAsBwAJAAUAAgAABQhgMI0MI51ACAAh+QQFMgAXACwHAAkABQACAAAFCGCUjASxnEoIADs=");
+}
+/* menu end  */
+
+
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    font-feature-settings: "liga" 0;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: auto;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm {
+    cursor: text;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline {
+    text-decoration: underline;
+}
+
+
+.tab-nav {
+  border-bottom: #cacad9 1px solid
+}
+
+
+
+.tab-nav span {
+  background-color: #f0f0f1;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 15px;
+  border: #cacad9 1px solid;
+  color: #444;
+  display: inline-block;
+  margin: 0 -1px -1px 0;
+  cursor: pointer;
+  position: relative;
+}
+
+.tab-nav .on {
+  background: #fff;
+  border-bottom: #fff 1px solid;
+  color: #444
+}
+
+.tab-con {
+  padding: 10px;
+  position: relative;
+}
+
+.tab-con .tab-block {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+
+.tab-con .tab-block.on {
+  display: inline-block;
+}
+
+.tab-con ul.cmdlist {
+  list-style-type: decimal
+}
+ul.cmdlist {
+  list-style-type: decimal;
+  height: 505px;
+  overflow-y: auto;
+}
+
+.tab-con ul.cmdlist li {
+  position: relative;
+  list-style-type: decimal;
+  list-style-position: inside;
+  line-height: 40px;
+  border-bottom: #dbdbea 1px solid;
+  margin-top: 6px
+}
+
+.tab-con ul.cmdlist li .com-progress,
+.tab-con ul.cmdlist li .state,
+.opencmd {
+  float: right;
+  margin-left: 20px;
+  color: #535362
+}
+
+.tab-con ul.cmdlist li .line-progress {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  height: 1px;
+  background-color: #20a53a
+}
+
+.tab-con ul.cmdlist li .cmd {
+  border: 0 none;
+  border-radius: 0;
+  display: block;
+  width: 570px;
+  height: 200px;
+  line-height: 22px;
+  padding: 0 10px;
+  background-color: #333;
+  color: #eee;
+  overflow: auto
+}
+
+.term_item_tab .list {
+  display: inline-block;
+  webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* display: flex; */
+  height: 38px;
+  overflow: hidden;
+  overflow-x: auto;
+}
+
+.term_item_tab .list>span {
+  height: 38px;
+  line-height: 38px;
+  text-align: left;
+  padding: 0 25px 0 22px;
+  display: inline-block;
+  vertical-align: middle;
+  border-right: 1px solid #e2e2e2;
+  cursor: pointer;
+  width: 150px;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.icon-trem-close {
+  height: 18px;
+  width: 18px;
+  position: absolute;
+  top: 50%;
+  margin-top: -8.5px;
+  right: 8px;
+  display: none !important;
+}
+
+.icon-trem-close::after,
+.icon-trem-close::before {
+  content: '';
+  height: 14px;
+  width: 2px;
+  display: inline-block;
+  background: #fb0000;
+  z-index: 999;
+  position: absolute;
+  position: absolute;
+  top: 1.5px;
+  left: 8px;
+  transform: rotate(-45deg);
+}
+
+.icon-trem-close::after {
+  transform: rotate(45deg);
+}
+
+.icon-trem-close::before {
+  transform: rotate(-45deg);
+}
+
+/*term_item_tab*/
+.term_item_tab .list>span.active .icon-trem-close,
+.term_item_tab .list>span:hover .icon-trem-close {
+  display: inline-block !important;
+}
+
+.term_item_tab {
+  background: #f1f1f1;
+  font-size: 0;
+}
+
+.term_item_tab .list>span i {
+  transition: all 50ms;
+}
+
+.term_item_tab .list>span .icon {
+  height: 9px;
+  width: 9px;
+  border-radius: 5px;
+  display: inline-block;
+  background: #fff;
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  margin-top: -4.5px;
+}
+
+.term_item_tab .list>span .icon.icon-sucess {
+  background-color: #10952a;
+}
+
+.term_item_tab .list>span .icon.icon-info {
+  background-color: #fc6d26;
+}
+
+.term_item_tab .list>span .icon.icon-warning {
+  background-color: #ff5d2c;
+}
+
+.term_item_tab .list>span:hover {
+  background-color: #dadada;
+}
+
+.term_item_tab .list>span.active {
+  background-color: #424242;
+}
+
+.term_item_tab .list span.active span {
+  color: #fff;
+}
+
+.term_item_tab .list .content {
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.term_item_tab .item .glyphicon {
+  vertical-align: top;
+  position: absolute;
+  right: 12px;
+  font-size: 15px;
+  height: 38px;
+  line-height: 38px;
+  color: #ff7070 !important;
+  display: none;
+  transition: all 500ms;
+}
+
+.term_item_tab .item .glyphicon:hover {
+  color: red;
+}
+
+.term_item_tab .list span span {
+  vertical-align: middle;
+  font-size: 13px;
+  font-weight: 500;
+  color: #666;
+  display: inline-block;
+  line-height: 37px;
+}
+
+.term_item_tab .glyphicon {
+  font-size: 15px;
+  margin-left: 8px;
+  vertical-align: middle;
+  transition: all 500ms;
+  cursor: pointer;
+  display: inline-block;
+  color: #ea7575;
+}
+
+.term_item_tab span.glyphicon {
+  color: #888;
+}
+
+.term_item_tab .glyphicon:hover {
+  color: red;
+}
+
+.term_item_tab .tab_tootls {
+  padding: 0;
+  float: right;
+  /* padding-right: 15px; */
+  /* display: inline-block; */
+  /* display: none; */
+}
+
+
+/* .term_item_tab .tab_tootls span{
+margin-left: 0;
+font-size: 12px;
+display: block;
+height: 19px;
+color: #bbb;
+/* vertical-align: bottom;
+} */
+
+.term_item_tab .tab_tootls .glyphicon-resize-full,
+.term_item_tab .tab_tootls .glyphicon-resize-small {
+  height: 38px;
+  line-height: 38px;
+  width: 40px;
+  text-align: center;
+  margin: 0
+}
+
+.term_item_tab .addServer {
+  display: inline-block;
+  width: 40px;
+  text-align: center;
+  padding: 0;
+  height: 38px;
+  line-height: 38px;
+  vertical-align: top;
+}
+
+.term_item_tab .addServer span {
+  margin: 0;
+  color: #20a53a;
+}
+
+.term_item_tab>span:hover {
+  background-color: #ececec;
+  cursor: pointer;
+}
+
+.term_item_tab .addServer span:hover {
+  color: #4c4c4c;
+}
+
+.term_content_tab .term_item {
+  height: 100%;
+  width: 100%;
+  display: none;
+}
+
+.term_content_tab .term_item.active {
+  display: inline-block;
+}
+
+.term_content_tab {
+  background-color: #000;
+  position: absolute;
+  top: 38px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 5px 10px 10px;
+  overflow: hidden;
+}
+
+.term-tool-button {
+  position: absolute;
+  right: -7px;
+  top: 50%;
+  width: 28px;
+  height: 60px;
+  background-color: #565656;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  cursor: pointer;
+  z-index: 999;
+  margin-top: -30px;
+}
+
+.term-tool-button span {
+  font-size: 12px;
+  position: relative;
+  left: 15%;
+  top: 35%;
+  font-size: 18px;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+
+.term-tool-button:hover {
+  background-color: #D8D8D8;
+}
+
+.term_box {
+  height: 100%;
+  border-radius: 3px;
+  margin-right: 300px;
+  position: relative;
+}
+
+.term_tootls {
+  width: 290px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  /* border: 1px solid #ececec; */
+}
+
+.term_tootls .tootls_tab {
+  display: inline-block;
+  /* border: 1px solid #20a53a; */
+  width: 100%;
+  position: relative;
+}
+
+.term_tootls .tootls_tab a {
+  display: inline-block;
+  width: 38px;
+  text-align: center;
+  height: 38px;
+  line-height: 38px;
+  position: absolute;
+  right: 0;
+  color: #ececec;
+  background-color: #c7c7c71a;
+}
+
+.term_tootls .tab-con {
+/*  position: absolute;*/
+  top: 10px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.term_tootls .tootls_tab a:hover {
+  background-color: #8282824d;
+}
+
+.term_tootls .tootls_tab i {
+  font-style: normal;
+  font-size: 12px;
+  color: #ececec;
+  margin-left: 5px;
+}
+
+.main-content .safe {
+  position: relative;
+}
+
+.xterm .xterm-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 5px;
+  border-radius: 4px;
+}
+
+.xterm .xterm-viewport::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: #666;
+  border-radius: 4px;
+  transition: all 1s;
+}
+
+.xterm .xterm-viewport:hover::-webkit-scrollbar-thumb {
+  background: #aaa;
+}
+
+.xterm .xterm-viewport::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  background: #222;
+  border-radius: 4px;
+  transition: all 1s;
+}
+
+.xterm .xterm-viewport:hover::-webkit-scrollbar-track {
+  background-color: #444;
+}
diff --git a/plugins/webssh/menu/index.html b/plugins/webssh/menu/index.html
new file mode 100755
index 000000000..bf54e151b
--- /dev/null
+++ b/plugins/webssh/menu/index.html
@@ -0,0 +1,119 @@
+<div class="main-content">
+    <div class="container-fluid">
+        <div class="safe bgw mtb15 pd15 radius4" style="height: 300px;">
+
+            <div class="term_box" id="term_box_view">
+                <div class="term_item_tab">
+                    <div class="list">
+                        <span class="item active" data-host="127.0.0.1" data-id="5erM2eLXJ">
+                            <i class="icon-sucess icon"></i>
+                        <div class="content"><span>本地服务器</span></div><span class="icon-trem-close"></span></span>
+                    </div>
+                    <span class="addServer" title="添加服务器SSH信息">
+                        <span class="glyphicon glyphicon-plus" aria-hidden="true" ></span>
+                    </span>
+                    <span class="tab_tootls">
+                        <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
+                        <!-- <span>全屏显示</span> -->
+                    </span>
+                </div>
+                <div class="term_content_tab">
+                    <div class="term-tool-button tool-hide"><span class="glyphicon glyphicon-menu-right"></span></div>
+                    <div class="term_item" id="ECFEfRWM8" data-host="38.6.224.67"><div dir="ltr" class="terminal xterm" tabindex="0"><div class="xterm-viewport" style="background-color: rgb(0, 0, 0);"><div class="xterm-scroll-area" style="height: 51px;"></div></div><div class="xterm-screen" style="width: 792px; height: 17px;"><div class="xterm-helpers"><textarea class="xterm-helper-textarea" aria-label="Terminal input" aria-multiline="false" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="left: 234.406px; top: 34px; width: 9.01562px; height: 17px; line-height: 17px; z-index: -5;"></textarea><span class="xterm-char-measure-element" aria-hidden="true" style="font-family: courier-new, courier, monospace; font-size: 15px;">W</span><div class="composition-view"></div></div><canvas class="xterm-text-layer" width="792" height="17" style="z-index: 0; width: 792px; height: 17px;"></canvas><canvas class="xterm-selection-layer" width="792" height="17" style="z-index: 1; width: 792px; height: 17px;"></canvas><canvas class="xterm-link-layer" width="792" height="17" style="z-index: 2; width: 792px; height: 17px;"></canvas><canvas class="xterm-cursor-layer" width="792" height="17" style="z-index: 3; width: 792px; height: 17px;"></canvas></div></div></div>
+                </div>
+            </div>
+            <div class="term_tootls">
+              <div class="tab-nav">
+                  <span class="on" data-type="host">服务器列表</span>
+                  <span data-type="shell">常用命令</span>
+              </div>
+              <div class="tab-con">
+                  <div class="tab-block on">
+                      <div>
+                          <button class="btn btn-success btn-sm" type="button" data-type="host">添加服务器</button>
+                      </div>
+                      <ul class="tootls_host_list"></ul>
+                  </div>
+                  <div class="tab-block">
+                      <div>
+                          <button class="btn btn-success btn-sm" type="button" data-type="shell">添加命令</button>
+                      </div>
+                      <ul class="tootls_commonly_list"></ul>
+                  </div>
+              </div>
+                <!-- <div class="tootls_tab"><span class="active">服务器列表</span><a href="javascript:;" data-type="host" title="添加服务器SSH信息"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></div>
+                <ul class="tootls_host_list"></ul> -->
+                <!-- <div class="tootls_tab"><div class="term-move-border"></div><span class="active">常用命令<i>(点击复制命令)</i></span><a href="javascript:;"  data-type="shell" title="添加常用命令"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></div>
+                <ul class="tootls_commonly_list"></ul> -->
+            </div>
+        </div>
+    </div>
+</div>
+<!-- <script type="text/html" id="host_form_view">
+    <div class="bt-form bt-form-2x pd20" id="host_form">
+        <input type="text" name="sort" class="hidden" value="<% this.form.sort %>" />
+        <div class="line input_group">
+            <span class="tname">服务器IP</span>
+            <div class="info-r">
+                <input type="text" name="host" class="bt-input-text mr5" style="width:240px" value="<% this.form.host %>" placeholder="输入服务器IP" val="" autocomplete="off" />
+                <input type="text" name="port" class="bt-input-text mr5" style="width:60px" placeholder="端口" value="<% this.form.port %>" autocomplete="off"/>
+            </div>
+        </div>
+        <div class="line">
+            <span class="tname">SSH账号</span>
+            <div class="info-r">
+                <input type="text" name="username" class="bt-input-text mr5" style="width:305px" placeholder="输入SSH账号" value="<% this.form.username %>" autocomplete="off"/>
+            </div>
+        </div>
+        <div class="line">
+            <span class="tname">验证方式</span>
+            <div class="info-r ">
+                <div class="btn-group">
+                    <button type="button" tabindex="-1" class="btn btn-sm auth_type_checkbox  <% !(this.form.password != '' || this.form.pkey == '' && this.form.password == '')?'btn-default':'btn-success' %>" data-ctype="0">密码验证</button>
+                    <button type="button" tabindex="-1" class="btn btn-sm auth_type_checkbox  <% this.form.pkey == ''?'btn-default':'btn-success' %>" data-ctype="1">私钥验证
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="line c_password_view <% (this.form.password != '' || this.form.pkey == '' && this.form.password == '')?'show':'hidden'%>">
+            <span class="tname">密码</span>
+            <div class="info-r">
+                <input type="text" name="password" class="bt-input-text mr5" placeholder="请输入SSH密码" style="width:305px;" value="<% this.form.password %>" autocomplete="off"/>
+            </div>
+        </div>
+        <div class="line c_pkey_view <% this.form.pkey != ''?'show':'hidden'%>">
+            <span class="tname">私钥</span>
+            <div class="info-r">
+                <textarea rows="4" name="pkey" class="bt-input-text mr5" placeholder="请输入SSH私钥" style="width:305px;height: 80px;line-height: 18px;padding-top:10px;"><% this.form.pkey %></textarea>
+            </div>
+        </div>
+        <div class="line key_pwd_line <% this.form.pkey != '' ? 'show' : 'hidden' %>">
+            <span class="tname">私钥密码</span>
+            <div class="info-r">
+                <input type="text" name="pkey_passwd" class="bt-input-text mr5" placeholder="请输入私钥密码" style="width:305px;" value="<% this.form.pkey_passwd %>" autocomplete="off"/>
+            </div>
+        </div>
+        <div class="line ssh_ps_tips">
+            <span class="tname">备注</span>
+            <div class="info-r">
+                <input type="text" name="ps" class="bt-input-text mr5" placeholder="请输入备注,可为空" style="width:305px;" value="<% this.form.ps %>" autocomplete="off"/>
+            </div>
+        </div>
+    </div>
+</script>
+<script type="text/html" id="shell_form_view">
+    <div class="bt-form bt-form-2x pd20" id="host_form">
+        <div class="line">
+            <span class="tname">命令名称</span>
+            <div class="info-r">
+                <input type="text" name="title" class="bt-input-text mr5" style="width:305px" placeholder="请输入常用命令描述，必填项" value="<% this.form.title %>" autocomplete="off"/>
+            </div>
+        </div>
+        <div class="line">
+            <span class="tname">命令内容</span>
+            <div class="info-r">
+                <textarea rows="4" name="shell" class="bt-input-text mr5" placeholder="请输入常用命令信息，必填项" style="width:305px;height: 150px;line-height: 18px;padding-top:10px;"><% this.form.shell %></textarea>
+            </div>
+        </div>
+    </div>
+</script> -->
\ No newline at end of file