[Update] 修改适配

src/app/elements/asset-tree/asset-tree.component.scss

@@ -5,3 +5,7 @@
   height: 100%;
   background-color: inherit;
 }
+
+.ztree * {
+  font-family: 'Monaco', 'Consolas', 'monospace' !important;
+}

src/app/elements/term/term.component.css

@@ -2,20 +2,32 @@
 div {
   width: 100%;
   height: 100%;
-  padding: 15px;
+  padding: 15px 0 15px 15px;
 }
 
 
-.terminal {
+.terminal .xterm-rows {
   border: #000 solid 5px;
   color: #f0f0f0;
   box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
   white-space: nowrap;
   display: inline-block;
   height: 100%;
-  background: #0d8ddb;
+  font-size: 11px;
 }
 
 div.terminal div span {
   min-width: 12px;
 }
+
+.terminal div {
+  user-select: text;
+}
+
+/*.terminal, .terminal .xterm-viewport {*/
+  /*background-color: inherit;*/
+/*}*/
+
+.terminal .xterm-rows {
+  background-color: #1f1b1b;
+}

src/app/elements/term/term.component.html

-<div #term (mouseenter)="active()"></div>
+<div id="term" #term (mouseenter)="active()"></div>

src/app/elements/term/term.component.ts

 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ElementRef} from '@angular/core';
-import {term, Terminal, TermWS} from '../../globals';
+import {term, TermWS} from '../../globals';
+import * as Terminal from 'xterm/dist/xterm';
+// import { Terminal } from 'xterm';
 import {NavList} from '../../pages/control/control/control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {UUIDService} from '../../app.service';
@@ -21,6 +23,8 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   @ViewChild('term') el: ElementRef;
   secret: string;
   term: any;
+  col = 80;
+  row = 24;
 
   constructor(private _uuid: UUIDService,
               private _cookie: CookieService) {
@@ -28,7 +32,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {
     this.secret = this._uuid.gen();
-    this.term = Terminal({
+    this.term = new Terminal({
       cols: 80,
       rows: 24,
       useStyle: true,
@@ -38,34 +42,36 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    if (this.host || this.token) {
-      if (this._cookie.get('cols')) {
-        term.col = parseInt(this._cookie.get('cols'), 10);
-      }
-      if (this._cookie.get('rows')) {
-        term.row = parseInt(this._cookie.get('rows'), 10);
-      }
-    } else {
-      term.col = Math.floor(jQuery(this.el.nativeElement).width() / jQuery('#marker').width() * 6) - 3;
-      term.row = Math.floor(jQuery(this.el.nativeElement).height() / jQuery('#marker').height()) - 3;
-      term.term = this.term;
-    }
+    // if (this.host || this.token) {
+    //   if (this._cookie.get('cols')) {
+    //     this.col = parseInt(this._cookie.get('cols'), 10);
+    //   }
+    //   if (this._cookie.get('rows')) {
+    //     this.row = parseInt(this._cookie.get('rows'), 10);
+    //   }
+    // } else {
+      this.col = Math.floor(jQuery('.content').width() / jQuery('#marker').width() * 6) - 8;
+      this.row = Math.floor(jQuery('.content').height() / jQuery('#marker').height()) - 3;
+      // term.term = this.term;
+    // }
     this.term.open(this.el.nativeElement, true);
     const that = this;
     window.onresize = function () {
-      term.col = Math.floor(jQuery(that.el.nativeElement).width() / jQuery('#marker').width() * 6) - 3;
-      term.row = Math.floor(jQuery(that.el.nativeElement).height() / jQuery('#marker').height());
-      if (term.col < 80) {
-        term.col = 80;
+      console.log('Height: ', jQuery('.content').height(), jQuery('#marker').height());
+      that.col = Math.floor(jQuery('.content').width() / jQuery('#marker').width() * 6) - 8;
+      that.row = Math.floor(jQuery('.content').height() / jQuery('#marker').height()) - 3;
+
+      if (that.col < 80) {
+        that.col = 80;
       }
-      if (term.row < 24) {
-        term.row = 24;
+      if (that.row < 24) {
+        that.row = 24;
       }
-      that.term.resize(term.col, term.row);
+      that.term.resize(that.col, that.row);
       if (that.host) {
         that._cookie.set('cols', term.col.toString(), 99, '/', document.domain);
         that._cookie.set('rows', term.row.toString(), 99, '/', document.domain);
-        TermWS.emit('resize', {'cols': term.col, 'rows': term.row});
+        TermWS.emit('resize', {'cols': that.col, 'rows': that.row});
       }
     };
     jQuery(window).resize();

src/app/elements/tree/tree.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ElementTreeComponent} from './tree.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    ElementTreeComponent
+  ]
+})
+export class TreeModule {
+}

src/app/globals.ts

 'use strict';
-import * as terminal from 'xterm/dist/xterm';
+import * as Terminal from 'xterm/dist/xterm';
 import * as io from 'socket.io-client';
 
-export function Terminal(xargs: any) {
-  return terminal(xargs);
-}
+// export function Terminal(xargs: any) {
+//   return terminal(xargs);
+// }
 
 export const TermWS = io.connect('/ssh');
 export let term: {
@@ -17,6 +17,7 @@ export let term: {
     rows: 24,
     useStyle: true,
     screenKeys: true,
+    scrollback: 10
   }),
   col: 80,
   row: 24,

src/app/pages/control/cleftbar/cleftbar.component.html

 <div class="sidebar" fxLayout="column" ngxSplit="column">
-  <div fxflex="0 0 50px" class="search">
+  <div fxflex="0 0 30px" class="search">
     <input id="keyword" class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q"
            autocomplete="off"
            title="Search"
            type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
   </div>
-  <div class="overflow ngx-scroll-overlay" fxflex="1 1 100%">
+  <div class="overflow ngx-scroll-overlay" fxflex="1 1 90%">
     <elements-asset-tree [Data]="zNodes" [query]="q"></elements-asset-tree>
   </div>
 
-  <div class="footer-version" fxflex="0 0 40px">
+  <div class="footer-version" fxflex="0 0 26px">
     <p> Version <strong>{{version}}</strong></p>
   </div>
 </div>

src/app/pages/control/cleftbar/cleftbar.component.scss

 .sidebar {
   height: 100%;
   width: 100%;
+  overflow: auto;
 }
 
 :root {
@@ -110,4 +111,32 @@ label {
   padding-bottom: 2px;
 }
 
-@import "~@swimlane/ngx-ui/release/styles/components/scrollbars";
+//@import "~@swimlane/ngx-ui/release/styles/components/scrollbars";
+
+.ngx-scroll-overlay {
+  overflow: auto; // for FF
+  //-ms-overflow-style: -ms-autohiding-scrollbar;
+  //
+  //&::-webkit-scrollbar {
+  //  display: none;
+  //}
+  //
+  //&:hover::-webkit-scrollbar {
+  //  display: initial;
+  //}
+}
+
+//.sidebar::-webkit-scrollbar-track {
+//  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+//  background-color: #676a6c;
+//}
+//
+//.sidebar::-webkit-scrollbar {
+//  width: 8px;
+//}
+//
+//.sidebar::-webkit-scrollbar-thumb {
+//  background-color: #F5F5F5;
+//  border-radius: 6px;
+//  border: 2px solid transparent;
+//}

src/app/pages/control/control.component.css

@@ -2,7 +2,7 @@ div {
   height: 100%;
   width: 100%;
   padding: 0;
-  background-color: black;
+  background-color: #1f1b1b;
   margin: 0;
   position: initial;
 }

src/app/pages/control/control/control.component.css

 div, elements-term, elements-guacamole, elements-settings {
-  height: 100%;
+  /*height: 100%;*/
 }
 
 elements-term, elements-guacamole, elements-settings {

src/app/pages/control/control/controlnav/nav.component.html

-<div class="scroll-botton">
-  &nbsp;
+<div class="scroll-botton" style="padding: 0 5px">
   <a class="left" (click)="scrollleft()"><i class="fa fa-caret-left"></i></a>
   <a class="right" (click)="scrollright()"><i class="fa fa-caret-right"></i></a>
-  &nbsp;
 </div>
 <div class="tabs">
   <ul [ngStyle]="{'width':150*NavList.List.length+'px'}">

src/app/pages/index/ileftbar/ileftbar.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {IleftbarComponent} from './ileftbar.component';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    IleftbarComponent
+  ]
+})
+export class IleftbarModule {
+}

src/app/pages/setting/settings.module.ts

+import { NgModule } from '@angular/core';
+import { SettingPageS3Component } from './s3/s3.component';
+import { SettingPageTerminalComponent} from './terminal/terminal.component';
+import { SettingPageLdapComponent } from './ldap/ldap.component';
+import { SettingPageEmailComponent } from './email/email.component';
+import { SettingPageBasicComponent } from './basic/basic.component';
+import { PagesSettingComponent } from './setting.component';
+
+@NgModule({
+  imports: [
+  ],
+  declarations: [
+    SettingPageS3Component,
+    SettingPageTerminalComponent,
+    SettingPageLdapComponent,
+    SettingPageEmailComponent,
+    SettingPageBasicComponent,
+    PagesSettingComponent
+  ]
+})
+export class SettingsModule {
+}

src/styles.css

@@ -23,25 +23,54 @@ app-root {
   z-index: -1;
   font-size: 11px !important;
   padding-bottom: 16px !important;
-  font-family: 'Monaco', 'Consolas' !important;
+  font-family: 'Monaco', 'Consolas', 'monospace' !important;
   color: white;
 }
 
 .terminal {
-  font-family: 'Monaco', 'Consolas' !important;
+  font-family: 'Monaco', 'Consolas', 'monospace' !important;
   font-size: 11px;
   white-space: nowrap;
-  display: inline-block;
+  /*display: inline-block;*/
+  /*background-color: #1f1b1b;*/
 }
 
 .terminal div {
   user-select: text;
 }
 
-.terminal, .terminal .xterm-viewport {
-  background-color: inherit;
+.terminal .xterm-rows {
+  background-color: #1f1b1b;
 }
 
-.terminal .xterm-rows {
-  background-color: black;
+.terminal .xterm-viewport {
+  background-color: #1f1b1b;
+  overflow: auto;
+}
+
+body ::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+  background-color: #676a6c;
+}
+
+body ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
 }
+
+body ::-webkit-scrollbar-thumb {
+  background-color: #F5F5F5;
+}
+
+.ztree * {
+  font-family: 'Monaco', 'Consolas', 'monospace' !important;
+}
+
+/*.scroll-botton {*/
+  /*font-size: 20px;*/
+  /*float: left;*/
+  /*height: 30px;*/
+  /*overflow: hidden;*/
+  /*background-color: #3a3333;*/
+  /*color: white*/
+/*}*/