perf: rdp token 复用

src/app/elements/chat/chat.component.html

@@ -1,25 +1,25 @@
-<div id="chatContainer" class="chat-container" [ngClass]="{'show': !isShow}">
-  <div class="modal" (click)="toggle()"></div>
+<div [ngClass]="{'show': !isShow}" class="chat-container" id="chatContainer">
+  <div (click)="toggle()" class="modal"></div>
   <div class="drawer-panel">
-    <div id="dragBox" [hidden]="!isShow">
+    <div [hidden]="!isShow" id="dragBox">
       <div
-        class="drag-setting"
-        [hidden]="!isShowSetting || subViews.length > 1"
         (click)="onSettingOpenDrawer()"
+        [hidden]="!isShowSetting || subViews.length > 1"
+        class="drag-setting"
       >
         <i class="fa fa-cog"></i>
       </div>
       <div [hidden]="!chatAiEnabled" class="drag-button">
-        <img src="assets/icons/robot-assistant.png" alt="" />
+        <img alt="" src="assets/icons/chat-ai.png"/>
       </div>
     </div>
     <div class="content">
       <iframe
         [src]="iframeURL | safeUrl"
-        title="chat"
         height="100%"
+        title="chat"
         width="100%"
       ></iframe>
     </div>
   </div>
-</div>
+</div>

src/app/elements/chat/chat.component.scss

@@ -1,7 +1,9 @@
 .chat-container {
   overflow: hidden;
+
   .content {
     height: 100%;
+
     iframe {
       border: none;
     }
@@ -12,7 +14,6 @@
   position: fixed;
   top: 0;
   right: 0;
-  width: 100%;
   width: 440px;
   min-width: 260px;
   height: 100vh;
@@ -23,11 +24,12 @@
   transform: translate(100%);
   background: #FFFFFF;
   z-index: 120;
+  opacity: 0.95;
 }
 
 #dragBox {
   position: absolute;
-  top: 30%;
+  bottom: 20%;
   left: -48px;
 }
 
@@ -42,53 +44,65 @@
   z-index: 0;
   pointer-events: auto;
   color: #fff;
-  background-color: #FFFFFF;
+  background-color: rgba(88, 88, 88, .8);
   box-shadow: 0 0 8px 4px #00000014;
   cursor: pointer;
 
   &:hover {
-    left: -50px !important;
-    width: 50px !important;
-    transform: translateZ(0) scale(1.06);
-    transform-style: preserve-3d;
     backface-visibility: hidden;
+
+    img {
+      opacity: 1;
+    }
   }
+
   i {
     font-size: 20px;
     line-height: 45px;
+    opacity: 0.8;
   }
+
   img {
-    width: 22px;
-    height: 22px;
+    width: 20px;
+    height: 20px;
     transform: translateY(10%);
     margin-left: 3px;
+    opacity: 0.8;
   }
 }
 
 .drag-setting {
   width: 36px;
   height: 36px;
   line-height: 38px;
-  margin-bottom: 10px;
+  margin-bottom: 2px;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
   transform: translateX(20%);
-  background-color: #FFFFFF;
+  background-color: rgba(88, 88, 88, .8);
   border: 1px solid transparent;
   transition: border-color 0.3s ease;
+  position: relative;
+
   &:hover {
-    background-color: #f0f1f5;
-    border-color: #a0a0a0;
+    .setting-list {
+      display: block;
+      transform: translateY(0);
+    }
+
+    i {
+      opacity: 1;
+      transform: rotate(45deg);
+    }
   }
+
   i {
     font-size: 18px;
+    color: white;
+    opacity: 0.8;
   }
-}
 
-.drag-setting {
-  position: relative;
-  transition: all 1s;
   .setting-list {
     position: absolute;
     bottom: 35px;
@@ -99,6 +113,7 @@
     list-style-type: none;
     transition: all 0.3s ease;
     transform: translateY(100%);
+
     .setting-item {
       width: 28px;
       height: 28px;
@@ -108,19 +123,14 @@
       margin-bottom: 2px;
       overflow: hidden;
       background-color: #FFFFFF;
+
       &:hover {
         background-color: #f0f1f5;
         border-color: #a0a0a0;
       }
     }
   }
-  &:hover {
-    .setting-list {
-      display: block;
-      transform: translateY(0);
-    }
-  }
- }
+}
 
 .show {
   transition: all .3s cubic-bezier(.7, .3, .1, 1);
@@ -137,4 +147,4 @@
 
 .show .drawer-panel {
   transform: translate(0);
-}
+}

src/app/elements/chat/chat.component.ts

@@ -1,5 +1,5 @@
-import {OnInit, OnDestroy, Component} from '@angular/core';
-import {ViewService, SettingService} from '@app/services';
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {SettingService, ViewService} from '@app/services';
 import {View} from '@app/model';
 
 @Component({
@@ -11,13 +11,14 @@ import {View} from '@app/model';
 export class ElementChatComponent implements OnInit, OnDestroy {
   isShow = true;
   element: any;
-  iframeURL: String;
+  iframeURL: string;
   currentView: View;
 
   constructor(
     public viewSrv: ViewService,
     public _settingSvc: SettingService
-  ) {}
+  ) {
+  }
 
   get isShowSetting() {
     const connectMethods = ['koko', 'lion', 'tinker', 'panda'];
@@ -62,7 +63,7 @@ export class ElementChatComponent implements OnInit, OnDestroy {
 
       clientOffset.clientX = event.clientX;
       clientOffset.clientY = event.clientY;
-      document.onmousemove = function(ev: any) {
+      document.onmousemove = function (ev: any) {
         dragBox.style.left = ev.clientX - innerX + 'px';
         dragBox.style.top = ev.clientY - innerY + 'px';
         const dragDivTop = window.innerHeight - dragBox.getBoundingClientRect().height;
@@ -78,7 +79,7 @@ export class ElementChatComponent implements OnInit, OnDestroy {
         ev.preventDefault();
         ev.stopPropagation();
       };
-      document.onmouseup = function() {
+      document.onmouseup = function () {
         document.onmousemove = null;
         document.onmouseup = null;
       };
@@ -87,10 +88,10 @@ export class ElementChatComponent implements OnInit, OnDestroy {
       const clientX = event.clientX;
       const clientY = event.clientY;
       if (
-          this.isDifferenceWithinThreshold(clientX, clientOffset.clientX)
-          && this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)
-          && (event.target === dragButton || this.isDescendant(event.target, dragButton))
-        ) {
+        this.isDifferenceWithinThreshold(clientX, clientOffset.clientX)
+        && this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)
+        && (event.target === dragButton || this.isDescendant(event.target, dragButton))
+      ) {
         this.isShow = !this.isShow;
       }
     });

src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts

@@ -69,9 +69,9 @@ export class ElementAdvancedOptionComponent implements OnChanges {
           const protocolsCanResolution: Array<string> = ['rdp'];
           return !protocolsCanResolution.includes(this.protocol.name);
         },
-        options: resolutionsChoices.map(i => ({label: i, value: i})),
-        label: 'Resolution',
-        value: this.setting.graphics.rdp_resolution
+        options: resolutionsChoices.map(i => ({label: i, value: i.toLowerCase()})),
+        label: 'RDP resolution',
+        value: this.setting.graphics.rdp_resolution || 'auto'
       },
       {
         type: 'select',
@@ -96,10 +96,31 @@ export class ElementAdvancedOptionComponent implements OnChanges {
           if (!this._settingSvc.hasXPack()) {
             return true;
           }
+
           return !this.connectMethod || this.connectMethod.component !== 'tinker';
         }
+      },
+      {
+        type: 'select',
+        field: 'reusable',
+        options: this.boolChoices,
+        label: 'RDP file reusable',
+        value: false,
+        hidden: () => {
+          if (!this.connectMethod) {
+            return true;
+          }
+          if (!this._settingSvc.globalSetting.CONNECTION_TOKEN_REUSABLE) {
+            return true;
+          }
+          return this.connectMethod.component !== 'tinker' && this.connectMethod.component !== 'razor';
+        }
       }
     ];
+    const onlyUsingDefaultFields = ['reusable'];
+    onlyUsingDefaultFields.forEach(i => {
+      this.connectOption[i] = this.advancedOptions.find(j => j.field === i).value;
+    });
     this.advancedOptions = this.advancedOptions.filter(i => !i.hidden());
     this.advancedOptions.forEach(i => {
       if (this.connectOption[i.field] === undefined) {

src/app/elements/connect/connect-dialog/connect-method/connect-method.component.html

@@ -29,7 +29,7 @@
             <span matTooltip="{{'Click to download rdp file'| translate}}">
               <i (click)="downloadRDPFile(method)"
                  *ngIf="canDownloadRDPFile(method)"
-                 class="fa fa-question-circle-o question"
+                 class="fa fa-arrow-circle-down question"
               ></i>
             </span>
           </mat-radio-button>

src/app/elements/connect/connect-dialog/connect-method/connect-method.component.scss

@@ -19,8 +19,8 @@
 .connect-type-group ::ng-deep .mat-tab-group {
   .mat-tab-label {
     height: 32px !important;
-    min-width:20px !important;
-    padding: 0 0!important;
+    min-width: 20px !important;
+    padding: 0 0 !important;
   }
 
   .mat-tab-label:focus {
@@ -31,3 +31,7 @@
     background-color: white;
   }
 }
+
+.question {
+  color: #5d5d5d;
+}

src/app/elements/connect/connect-dialog/connect-method/connect-method.component.ts

@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {Account, ConnectMethod, AuthInfo, Protocol} from '@app/model';
+import {Account, AuthInfo, ConnectMethod, Protocol} from '@app/model';
 import {AppService, I18nService, SettingService} from '@app/services';
 
 @Component({

src/app/elements/connect/connect.component.ts

@@ -76,8 +76,8 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
   analysisId(id: string) {
     const idObject = {};
     const idList = id.split('&');
-    for (let i = 0; i < idList.length; i++) {
-      idObject[idList[i].split('=')[0]] = (idList[i].split('=')[1]);
+    for (const element of idList) {
+      idObject[element.split('=')[0]] = (element.split('=')[1]);
     }
     return idObject;
   }
@@ -213,7 +213,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
     }
 
     if (connectInfo.downloadRDP) {
-      return this._http.downloadRDPFile(connToken, this._settingSvc.setting);
+      return this._http.downloadRDPFile(connToken, this._settingSvc.setting, connectInfo.connectOption);
     } else if (connectMethod.type === 'native') {
       this.callLocalClient(connToken).then();
     } else if (connectMethod.type === 'applet' && appletConnectMethod === 'client') {
@@ -295,9 +295,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
     const preConnectData = this._appSvc.getPreConnectData(asset);
     const isValid = this.checkPreConnectDataForAuto(asset, accounts, preConnectData);
     if (isValid) {
-      return new Promise<ConnectData>(resolve => {
-        resolve(preConnectData);
-      });
+      return Promise.resolve(preConnectData);
     }
 
     this._appSvc.connectDialogShown = true;

src/app/elements/content/content-window/default/default.component.ts

@@ -8,7 +8,7 @@ import {Asset, Endpoint, View} from '@app/model';
 })
 export class ElementConnectorDefaultComponent implements OnInit {
   @Input() view: View;
-  @Input() connector: String;
+  @Input() connector: string;
   @ViewChild('terminal', {static: false}) el: ElementRef;
   iframeURL: string;
   baseUrl: string;

src/app/elements/content/content-window/guide/guide.component.html

@@ -1,9 +1,9 @@
 <div class="content">
   <div>
-    <h2 class="subject">{{ assetType }}{{ 'connect info' | translate }}</h2>
+    <h2 class="subject">{{ assetType }} {{ 'connect info' | translate }}</h2>
     <table>
       <tr *ngFor="let item of infoItems">
-        <td class="title">{{ item.label | async }} </td>
+        <td class="title">{{ item.label | async }}</td>
         <td
           #tooltip="matTooltip"
           (cbOnSuccess)="onCopySuccess($event)"

src/app/elements/content/content-window/guide/guide.component.scss

@@ -4,7 +4,7 @@ iframe {
 
 .title {
   min-width: 100px;
-  max-width: 180px;
+  max-width: 200px;
   font-size: 15px;
   font-weight: 400;
 }
@@ -60,7 +60,7 @@ iframe {
 
     .btn {
       padding: 8px 10px;
-      top: 6px;
+      top: 4px;
       right: 8px;
 
       &:hover {