v3.4.0

Dockerfile

@@ -20,6 +20,6 @@ RUN --mount=type=cache,target=/usr/local/share/.cache/yarn,sharing=locked,id=lun
     && yarn build \
     && cp -R src/assets/i18n luna/
 
-FROM nginx:alpine
+FROM nginx:1.24
 COPY --from=stage-build /data/luna /opt/luna
 COPY nginx.conf /etc/nginx/conf.d/default.conf

package.json

@@ -4,7 +4,7 @@
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --base-href=/luna/ --disable-host-check",
+    "start": "ng serve --hmr --proxy-config proxy.conf.json --host 0.0.0.0 --base-href=/luna/ --disable-host-check",
     "build": "ng build --prod --base-href=/luna/ --output-path 'luna'",
     "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json  --sort --format namespaced-json",
     "test": "ng test",

src/app/app.module.ts

@@ -1,14 +1,14 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import {InfiniteScrollModule} from 'ngx-infinite-scroll';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel lives here
 import {NGXLogger} from 'ngx-logger';
 import {CookieService} from 'ngx-cookie-service';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ToastrModule} from 'ngx-toastr';
 import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
-import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
 // service
@@ -29,10 +29,10 @@ import {ChangLanWarningDialogComponent} from './elements/nav/nav.component';
 import {ElementSettingComponent} from '@app/elements/setting/setting.component';
 import {ElementConnectDialogComponent} from './elements/connect/connect-dialog/connect-dialog.component';
 import {ElementDownloadDialogComponent} from './elements/connect/download-dialog/download-dialog.component';
-import {ElementACLDialogComponent} from './elements/connect/acl-dialog/acl-dialog.component';
-import {ElementDialogAlertComponent} from './elements/dialog/dialog.service';
+import {ElementACLDialogComponent} from '@app/services/connect-token/acl-dialog/acl-dialog.component';
+import {ElementDialogAlertComponent} from '@app/services/dialog/dialog.service';
 import {ClipboardService} from 'ngx-clipboard';
-import { ElementsReplayMp4Component } from './elements/replay/mp4/mp4.component';
+import {ElementsReplayMp4Component} from './elements/replay/mp4/mp4.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, '/luna/assets/i18n/');

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

@@ -200,7 +200,7 @@ tr:hover {
 }
 
 .expand-tree {
-  height: 100%;
+  height: calc(100% - 31px);
 }
 
 .tree-type .tree-search {

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

@@ -1,48 +1,45 @@
-<div class="advanced-option" *ngIf="isShowAdvancedOption">
+<div class="advanced-option">
   <mat-accordion>
-    <mat-expansion-panel>
+    <mat-expansion-panel [class.panel-show]="isShowAdvancedOption" [disabled]="!isShowAdvancedOption">
       <mat-expansion-panel-header style="height: 32px;">
         <mat-panel-title>
           {{ 'Advanced option' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
-
-      <ng-container *ngFor="let item of advancedOptions">
-        <mat-checkbox
-          #checkbox
-          *ngIf="item.type == 'checkbox'"
-          [hidden]="!item.hidden()"
-          [name]="item.field"
-          [(ngModel)]="item.value"
-          (ngModelChange)="optionChange($event)"
-        >
-          {{ item.label | translate }}
-        </mat-checkbox>
 
-        <div
-          *ngIf="item.type == 'radio'"
-          [hidden]="!item.hidden()"
-        >
-          <label id="radio-label">
-            {{item.label + ':'}}
-          </label>
-          <mat-radio-group
-            aria-labelledby="example-radio-group-label"
-            class="example-radio-group"
-            (ngModelChange)="optionChange($event)"
-            [(ngModel)]="item.value"
-          >
-            <mat-radio-button
-              *ngFor="let i of item.options"
-              [value]="i"
-              class="example-radio-button"
+      <div *ngIf="isShowAdvancedOption" class="options-container">
+        <ng-container *ngFor="let item of advancedOptions">
+          <div *ngIf="item.type === 'checkbox'" class="option-item">
+            <mat-checkbox
+              (ngModelChange)="optionChange($event)"
+              [(ngModel)]="item.value"
+              [name]="item.field"
             >
-              {{i}}
-            </mat-radio-button>
-          </mat-radio-group>
-        </div>
-      </ng-container>
-
+              {{ item.label | translate }}
+            </mat-checkbox>
+          </div>
+          <ng-container *ngIf="item.type === 'select'">
+            <mat-form-field class="option-item">
+              <mat-label>{{ item.label | translate }}</mat-label>
+              <mat-select (ngModelChange)="optionChange(item)" [(ngModel)]="item.value" [name]="item.field">
+                <mat-option *ngFor="let option of item.options" [value]="option.value">
+                  {{ option.label | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </ng-container>
+          <ng-container *ngIf="item.type === 'radio'">
+            <div class="option-item">
+              <mat-radio-group (ngModelChange)="optionChange(item)" [(ngModel)]="item.value" [name]="item.field">
+                <mat-label style="margin-right: 10px">{{ item.label | translate }}</mat-label>
+                <mat-radio-button *ngFor="let option of item.options" [value]="option.value">
+                  {{ option.label | translate }}
+                </mat-radio-button>
+              </mat-radio-group>
+            </div>
+          </ng-container>
+        </ng-container>
+      </div>
     </mat-expansion-panel>
   </mat-accordion>
 </div>

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

@@ -1,40 +1,83 @@
 .advanced-option {
-  margin-top: 1.25em;
+  margin-top: 1.1em;
 }
+
 .mat-expansion-panel-header {
-  height: 32px!important;
-  padding: 0;
-  padding-right: 4px;
+  height: 32px !important;
+  padding: 0 4px 0 0;
+
+  &:hover {
+    background-color: rgb(255, 255, 255);
+  }
 }
+
+.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
+  background: rgba(0, 0, 0, 0);
+}
+
 .mat-expansion-panel-header-title {
   color: rgba(0, 0, 0, 0.54);
   font-size: 13px;
 }
+
 .mat-expansion-panel:not([class*=mat-elevation-z]) {
   box-shadow: none;
 }
+
 .mat-expansion-panel {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  border-bottom: 1px solid rgb(0, 0, 0, 12%);
+
   &::ng-deep .mat-expansion-panel-body {
-    padding: 0 0 14px!important;
+    padding: 0 0 0 !important;
   }
 }
+
+.mat-expansion-panel.panel-show.mat-expanded {
+  border-bottom: none;
+
+  &::ng-deep .mat-expansion-panel-content {
+    padding: 10px 5px 0 5px;
+    border: solid 1px rgb(0, 0, 0, 12%);
+  }
+}
+
 .mat-accordion .mat-expansion-panel:last-of-type {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .example-radio-group {
   display: flex;
   flex-direction: column;
   margin-top: 4px;
 }
+
 .example-radio-button {
   margin: 2px;
 }
-.ng-star-inserted {
-  margin-top: 5px;
+
+
+.option-item.mat-form-field {
+  margin-top: 10px;
 }
- .mat-checkbox-layout {
-  margin-left: 12px!important;
+
+.option-item {
+  flex: 0 0 49%;
+  box-sizing: border-box;
+  padding: 0 5px;
+}
+
+.mat-checkbox-layout {
+  margin-left: 12px !important;
+}
+
+.options-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline; /* 添加这一行 */
+}
+
+.options-container > ng-container {
+
 }
 

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

@@ -1,5 +1,7 @@
-import {Component, Input, OnChanges, Output, EventEmitter} from '@angular/core';
-import {ConnectMethod, ConnectOption, Protocol} from '@app/model';
+import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
+import {ConnectMethod, ConnectOption, Protocol, Setting} from '@app/model';
+import {resolutionsChoices} from '@app/globals';
+import {SettingService} from '@app/services';
 
 @Component({
   selector: 'elements-advanced-option',
@@ -12,24 +14,69 @@ export class ElementAdvancedOptionComponent implements OnChanges {
   @Output() onOptionsChange = new EventEmitter<ConnectOption[]>();
   public advancedOptions: ConnectOption[] = [];
   public isShowAdvancedOption = false;
-  public needShowAutoCompletionProtocols: Array<string> = ['mysql', 'mariadb'];
+  public setting: Setting;
+  private boolChoices = [
+    {label: 'Yes', value: true},
+    {label: 'No', value: false},
+  ];
 
-  constructor() {}
+  constructor(_settingSvc: SettingService) {
+    this.setting = _settingSvc.setting;
+  }
 
   ngOnChanges() {
     this.advancedOptions = [
       {
-        type: 'checkbox',
+        type: 'select',
+        field: 'charset',
+        label: 'Charset',
+        hidden: () => {
+          const protocolsCanCharset: Array<string> = ['ssh', 'telnet'];
+          return this.connectMethod && this.connectMethod.component !== 'koko' || !protocolsCanCharset.includes(this.protocol.name);
+        },
+        value: 'default',
+        options: [
+          {label: 'Default', value: 'default'},
+          {label: 'UTF-8', value: 'utf8'},
+          {label: 'GBK', value: 'gbk'},
+        ]
+      },
+      {
+        type: 'select',
         field: 'disableautohash',
         hidden: () => {
-          return this.connectMethod.value === 'web_cli'
-          && this.needShowAutoCompletionProtocols.includes(this.protocol.name);
+          const protocolsCanAutoHash: Array<string> = ['mysql', 'mariadb'];
+          return this.connectMethod && this.connectMethod.component !== 'koko' || !protocolsCanAutoHash.includes(this.protocol.name);
         },
         label: 'Disable auto completion',
-        value: false
+        value: false,
+        options: this.boolChoices
+      },
+      {
+        type: 'select',
+        field: 'resolution',
+        hidden: () => {
+          const protocolsCanResolution: Array<string> = ['rdp'];
+          return !protocolsCanResolution.includes(this.protocol.name);
+        },
+        options: resolutionsChoices.map(i => ({label: i, value: i})),
+        label: 'Resolution',
+        value: this.setting.rdpResolution
+      },
+      {
+        type: 'select',
+        field: 'backspaceAsCtrlH',
+        hidden: () => {
+          return this.connectMethod && this.connectMethod.component !== 'koko';
+        },
+        options: this.boolChoices,
+        label: 'Backspace as Ctrl+H',
+        value: !!this.setting.backspaceAsCtrlH
       }
     ];
-    this.isShowAdvancedOption = this.advancedOptions.some(i => i.hidden());
+    this.advancedOptions = this.advancedOptions.filter(i => !i.hidden());
+    this.isShowAdvancedOption = this.advancedOptions.length > 0;
+    this.optionChange(null);
   }
 
   optionChange(event) {