perf: data

src/app/elements/content/content.component.html

@@ -48,15 +48,15 @@
     <elements-content-window *ngFor="let view of viewList" [view]="view"></elements-content-window>
   </div>
   <div *ngIf="showBatchCommand" id="batchCommandDiv">
-    <mat-select [(ngModel)]="sendCommandRange" class="send-range"  panelClass="command-panel">
-      <mat-option *ngFor="let option of sendCommandOptions" class="command-option" [value]="option.value">
+    <mat-select [(ngModel)]="sendCommandRange" class="send-range" panelClass="command-panel">
+      <mat-option *ngFor="let option of sendCommandOptions" [value]="option.value" class="command-option">
         {{ option.label | translate }}
       </mat-option>
     </mat-select>
     <i
+      (click)="switchCommand()"
       class="fa fa-exchange"
       matTooltip="{{ (isShowInputCommand ? 'Switch to quick command' : 'Switch to input command') | translate }}"
-      (click)="switchCommand()"
     ></i>
     <div *ngIf="isShowInputCommand; else quickCommand" class="input-box">
       <input
@@ -69,37 +69,37 @@
         type="text"
       >
       <i
+        (click)="onSendCommand()"
         class="fa fa-save"
         matTooltip="{{ 'Save command' | translate }}"
-        (click)="onSendCommand()"
       ></i>
     </div>
     <ng-template #quickCommand>
       <span class="action-left">
         <i
+          (click)="onScrollLeft()"
           *ngIf="quickCommands.length > 0"
           class="fa fa-angle-double-left"
-          (click)="onScrollLeft()"
         ></i>
       </span>
-      <ul class="command-list" *ngIf="quickCommands.length > 0; else empty">
+      <ul *ngIf="quickCommands.length > 0; else empty" class="command-list">
         <li
-          class="command-box"
+          (click)="sendQuickCommand(command)"
           *ngFor="let command of quickCommands"
-          matTooltipPosition="above"
           [matTooltip]="command.args"
-          (click)="sendQuickCommand(command)"
+          class="command-box"
+          matTooltipPosition="above"
         >
           <i [ngClass]="command.module.value + '_ico_docu'" class="view_icon"></i>
           <span style="vertical-align: middle;">{{ command.name }}</span>
         </li>
       </ul>
       <span class="action-right">
-        <i *ngIf="quickCommands.length > 0" class="fa fa-angle-double-right" (click)="onScrollRight()"></i>
-        <i class="fa fa-refresh" (click)="quickCommandsFilter()"></i>
+        <i (click)="onScrollRight()" *ngIf="quickCommands.length > 0" class="fa fa-angle-double-right"></i>
+        <i (click)="quickCommandsFilter()" class="fa fa-refresh"></i>
       </span>
       <ng-template #empty>
-        <div class="not-command">{{'Not quick command'| translate }}</div>
+        <div class="not-command">{{ 'Not quick command'| translate }}</div>
       </ng-template>
     </ng-template>
   </div>

src/app/elements/content/content.component.scss

@@ -1,5 +1,5 @@
 $-border-x: #5a5959;
-$-border-y: #1f1b1b;
+$-border-y: var(--el-main-bg-color);
 
 #content {
   height: calc(100% - 30px);
@@ -95,7 +95,7 @@ $-border-y: #1f1b1b;
       }
     }
 
-    .batch-input {
+    &.batch-input {
       height: calc(100% - 30px);
     }
   }
@@ -123,7 +123,7 @@ $-border-y: #1f1b1b;
   border-left: solid 1px $-border-y;
   width: 100%;
   padding: 0 2px 0 0;
-  background: #2f2a2a;
+  background: var(--el-main-bg-color);
 
   &:focus-visible {
     outline: none;
@@ -133,6 +133,7 @@ $-border-y: #1f1b1b;
     margin: auto 7px;
     color: #ffffff;
     cursor: pointer;
+
     &:hover {
       color: #d6cbcb;
     }
@@ -160,7 +161,7 @@ $-border-y: #1f1b1b;
   width: 100%;
   line-height: 29px;
   border: none;
-  background: #2f2a2a;
+  background: var(--el-main-bg-color);
   color: #ffffff;
 
   &:focus-visible {
@@ -172,18 +173,22 @@ $-border-y: #1f1b1b;
   .send-range {
     width: auto;
     margin-left: 5px;
+
     &::ng-deep .mat-select-trigger {
       min-width: 70px;
       line-height: 29px;
+
       .mat-select-value {
         max-width: none;
         color: #ffffff;
       }
+
       .mat-select-arrow {
         color: #ffffff;
       }
     }
   }
+
   .command-list {
     width: 100%;
     height: 100%;
@@ -192,6 +197,7 @@ $-border-y: #1f1b1b;
     overflow: hidden;
     white-space: nowrap;
     transition: all .3s;
+
     .command-box {
       display: inline-block;
       max-width: 260px;
@@ -207,50 +213,59 @@ $-border-y: #1f1b1b;
       user-select: none;
       color: #d6cbcb;
       background-color: #463e3e;
+
       &:hover {
         color: #ffffff;
       }
+
       &:active {
         color: #ccc8c8;
       }
     }
   }
+
   .not-command {
     flex: 1;
     line-height: 29px;
     padding-left: 6px;
     color: #717171;
   }
+
   .action-left,
   .action-right {
     line-height: 29px;
   }
+
   .action-right {
     display: flex;
   }
 }
 
 ::ng-deep .command-panel.mat-select-panel {
   margin-top: 27px;
-  min-width: 100%!important;
-  border-radius: initial!important;
+  min-width: 100% !important;
+  border-radius: initial !important;
   background: black;
   padding: 10px 0 !important;
 }
+
 ::ng-deep .command-panel .mat-option {
   color: #f0f0f1;
+
   &:hover {
-    background-color: rgba(53, 54, 51, 0.7)!important;
+    background-color: rgba(53, 54, 51, 0.7) !important;
   }
 }
+
 ::ng-deep .command-panel .mat-option.mat-active {
   color: #f0f0f1;
   font-weight: bold;
-  background-color: rgba(53, 54, 51, 0.8)!important;
+  background-color: rgba(53, 54, 51, 0.8) !important;
 }
+
 .command-option {
-  line-height: 2.2em!important;
-  height: 2.2em!important;
+  line-height: 2.2em !important;
+  height: 2.2em !important;
 }
 
 .view-menu {
@@ -323,8 +338,9 @@ $-border-y: #1f1b1b;
   -moz-border-radius: 0;
   border-radius: 0;
   margin: 2px 0;
+
   &:hover {
-    background-color: rgba(53,54,51, 0.7);
+    background-color: rgba(53, 54, 51, 0.7);
   }
 }
 

src/app/elements/content/content.component.ts

@@ -1,10 +1,9 @@
-import {Component, ElementRef, EventEmitter, OnInit, OnDestroy, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
 import {View, ViewAction} from '@app/model';
-import {ConnectTokenService, I18nService, LogService, SettingService, ViewService, HttpService} from '@app/services';
+import {ConnectTokenService, HttpService, I18nService, LogService, SettingService, ViewService} from '@app/services';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import {MatDialog} from '@angular/material';
 import {ElementCommandDialogComponent} from '@app/elements/content/command-dialog/command-dialog.component';
-import {ElementSendCommandDialogComponent} from '@app/elements/content/send-command-dialog/send-command-dialog.component';
 import {fromEvent, Subscription} from 'rxjs';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
@@ -86,6 +85,7 @@ export class ElementContentComponent implements OnInit, OnDestroy {
     this.handleKeyDownTabChange();
     document.addEventListener('click', this.hideRMenu.bind(this), false);
   }
+
   ngOnDestroy() {
     this.keyboardSubscription.unsubscribe();
   }
@@ -338,7 +338,9 @@ export class ElementContentComponent implements OnInit, OnDestroy {
   }
 
   onSendCommand() {
-    if (!this.batchCommand) { return; }
+    if (!this.batchCommand) {
+      return;
+    }
 
     this._dialog.open(
       ElementCommandDialogComponent,

src/app/pages/connect/connect.component.scss

@@ -3,5 +3,5 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: #1f1b1b;
+  background-color: var(--el-main-bg-color);
 }

src/app/pages/kubernetes/main.component.scss

@@ -3,13 +3,13 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: #1f1b1b;
+  background-color: var(--el-main-bg-color);
 }
 
 .content {
   height: 100%;
   padding: 0;
-  background-color: #1f1b1b;
+  background-color: var(--el-main-bg-color);
   /*background-color: red;*/
   margin: 0;
   width: 100%;

src/app/pages/main/main.component.css → src/app/pages/main/main.component.scss

@@ -3,13 +3,13 @@
   width: 100%;
   padding: 0;
   margin: 0;
-  background-color: #1f1b1b;
+  background-color: var(--el-main-bg-color);
 }
 
 .content {
   height: 100%;
   padding: 0;
-  background-color: #1f1b1b;
+  background-color: var(--el-main-bg-color);
   margin: 0;
   width: 100%;
   position: initial;

src/app/pages/main/main.component.ts

@@ -1,5 +1,5 @@
 import {Component, ElementRef, HostListener, OnInit, ViewChild} from '@angular/core';
-import {DataStore, DEFAULT_ORG_ID, SYSTEM_ORG_ID, User} from '@app/globals';
+import {DataStore, User} from '@app/globals';
 import {IOutputData, SplitComponent} from 'angular-split';
 import {HttpService, LogService, SettingService, ViewService} from '@app/services';
 import * as _ from 'lodash';
@@ -8,7 +8,7 @@ import {environment} from '@src/environments/environment';
 @Component({
   selector: 'pages-main',
   templateUrl: './main.component.html',
-  styleUrls: ['./main.component.css'],
+  styleUrls: ['./main.component.scss'],
 })
 export class PageMainComponent implements OnInit {
   @ViewChild(SplitComponent, {read: false, static: false}) split: SplitComponent;

src/sass/theme/header.ts

@@ -1,4 +1,4 @@
-import { Theme } from './interface/index';
+import {Theme} from './interface/index';
 
 export const headerTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
   default: {