Merge pull request #1059 from jumpserver/dev

v3.10.4

proxy.conf.json

@@ -56,5 +56,16 @@
     "secure": false,
     "ws": true,
     "changeOrigin": true
+  },
+  "/kael": {
+    "target": "http://localhost:5173",
+    "secure": false,
+    "ws": true,
+    "changeOrigin": true
+  },
+  "/ui/": {
+    "target": "http://localhost:9528",
+    "secure": false,
+    "changeOrigin": true
   }
 }

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

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

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

@@ -0,0 +1,140 @@
+.chat-container {
+  overflow: hidden;
+  .content {
+    height: 100%;
+    iframe {
+      border: none;
+    }
+  }
+}
+
+.drawer-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  width: 440px;
+  min-width: 260px;
+  height: 100vh;
+  user-select: none;
+  border-radius: 10px 0 0 10px;
+  transition: transform .25s cubic-bezier(.7, .3, .1, 1);
+  box-shadow: 0 0 8px 4px #00000014;
+  transform: translate(100%);
+  background: #FFFFFF;
+  z-index: 120;
+}
+
+#dragBox {
+  position: absolute;
+  top: 30%;
+  left: -48px;
+}
+
+.drag-button {
+  width: 48px;
+  height: 45px;
+  line-height: 45px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 20px 0 0 20px;
+  z-index: 0;
+  pointer-events: auto;
+  color: #fff;
+  background-color: #FFFFFF;
+  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;
+  }
+  i {
+    font-size: 20px;
+    line-height: 45px;
+  }
+  img {
+    width: 22px;
+    height: 22px;
+    transform: translateY(10%);
+    margin-left: 3px;
+  }
+}
+
+.drag-setting {
+  width: 36px;
+  height: 36px;
+  line-height: 38px;
+  margin-bottom: 10px;
+  text-align: center;
+  border-radius: 50%;
+  cursor: pointer;
+  transform: translateX(20%);
+  background-color: #FFFFFF;
+  border: 1px solid transparent;
+  transition: border-color 0.3s ease;
+  &:hover {
+    background-color: #f0f1f5;
+    border-color: #a0a0a0;
+  }
+  i {
+    font-size: 18px;
+  }
+}
+
+.drag-setting {
+  position: relative;
+  transition: all 1s;
+  .setting-list {
+    position: absolute;
+    bottom: 35px;
+    right: 4px;
+    margin: 0;
+    padding: 0;
+    display: none;
+    list-style-type: none;
+    transition: all 0.3s ease;
+    transform: translateY(100%);
+    .setting-item {
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      padding: 2px;
+      border-radius: 50%;
+      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);
+}
+
+.show .modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  opacity: 1;
+}
+
+.show .drawer-panel {
+  transform: translate(0);
+}

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

@@ -0,0 +1,124 @@
+import {OnInit, OnDestroy, Component} from '@angular/core';
+import {ViewService, SettingService} from '@app/services';
+import {View} from '@app/model';
+
+@Component({
+  selector: 'elements-chat',
+  templateUrl: './chat.component.html',
+  styleUrls: ['./chat.component.scss'],
+})
+
+export class ElementChatComponent implements OnInit, OnDestroy {
+  isShow = true;
+  element: any;
+  iframeURL: String;
+  currentView: View;
+
+  constructor(
+    public viewSrv: ViewService,
+    public _settingSvc: SettingService
+  ) {}
+
+  get isShowSetting() {
+    const connectMethods = ['koko', 'lion'];
+    return (
+      this.currentView.hasOwnProperty('connectMethod')
+      && connectMethods.includes(this.currentView.connectMethod.component)
+    );
+  }
+
+  get subViews() {
+    return this.currentView.hasOwnProperty('subViews') ? this.currentView.subViews : [];
+  }
+
+  get chatAiEnabled() {
+    return this._settingSvc.globalSetting.CHAT_AI_ENABLED;
+  }
+
+  ngOnInit() {
+    this.viewSrv.currentView$.subscribe((state: View) => {
+      this.currentView = state;
+    });
+    this.iframeURL = '/ui/#/chat/chat-ai';
+    this.init();
+    this.insertToBody();
+  }
+
+  ngOnDestroy() {
+    this.element.remove();
+    this.viewSrv.currentView$.unsubscribe();
+  }
+
+  init() {
+    const clientOffset: any = {};
+    const dragBox = document.getElementById('dragBox');
+    const dragButton = document.querySelector('.drag-button');
+    dragBox.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      const offsetX = dragBox.getBoundingClientRect().left;
+      const offsetY = dragBox.getBoundingClientRect().top;
+      const innerX = event.clientX - offsetX;
+      const innerY = event.clientY - offsetY;
+
+      clientOffset.clientX = event.clientX;
+      clientOffset.clientY = event.clientY;
+      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;
+        const dragDivLeft = window.innerWidth - dragBox.getBoundingClientRect().width;
+        dragBox.style.left = dragDivLeft + 'px';
+        dragBox.style.left = '-48px';
+        if (dragBox.getBoundingClientRect().top <= 0) {
+          dragBox.style.top = '0px';
+        }
+        if (dragBox.getBoundingClientRect().top >= dragDivTop) {
+          dragBox.style.top = dragDivTop + 'px';
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+      document.onmouseup = function() {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }, false);
+    dragBox.addEventListener('mouseup', (event) => {
+      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.isShow = !this.isShow;
+      }
+    });
+  }
+
+  isDescendant(element, ancestor) {
+    if (element.parentNode === ancestor) {
+      return true;
+    }
+    return false;
+  }
+
+  insertToBody() {
+    this.element = document.getElementById('chatContainer');
+    const body = document.querySelector('body');
+    body.insertBefore(this.element, body.firstChild);
+  }
+
+  onSettingOpenDrawer() {
+    this.currentView.iframeElement.postMessage({name: 'OPEN'}, '*');
+  }
+
+  isDifferenceWithinThreshold(num1, num2, threshold = 5) {
+    const difference = Math.abs(num1 - num2);
+    return difference <= threshold;
+  }
+
+  toggle() {
+    this.isShow = !this.isShow;
+  }
+}

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

@@ -19,7 +19,8 @@
 .connect-type-group ::ng-deep .mat-tab-group {
   .mat-tab-label {
     height: 32px !important;
-    padding: 0 10px !important;
+    min-width:20px !important;
+    padding: 0 0!important;
   }
 
   .mat-tab-label:focus {

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

@@ -25,6 +25,7 @@ li {
 
   .view_icon {
     width: 12px;
+    height: 12px;
     vertical-align: middle;
     display: inline-block;
   }

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

@@ -342,12 +342,6 @@ tr:hover {
   }
 }
 
-.drag-list {
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
 .drag-box {
   display: inline-flex;
   flex-direction: row;

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

@@ -70,7 +70,7 @@ export class ElementContentComponent implements OnInit, OnDestroy {
   }
 
   get tabsWidth() {
-    return (this.viewList.length + 1) * 151 + 10;
+    return this.viewList.length * 201;
   }
 
   get showBatchCommand() {
@@ -148,11 +148,11 @@ export class ElementContentComponent implements OnInit, OnDestroy {
   }
 
   scrollLeft() {
-    this.tabsRef.nativeElement.scrollLeft -= 150 * 2;
+    this.tabsRef.nativeElement.scrollLeft -= 200 * 2;
   }
 
   scrollRight() {
-    this.tabsRef.nativeElement.scrollLeft += 150 * 2;
+    this.tabsRef.nativeElement.scrollLeft += 200 * 2;
   }
 
   scrollEnd() {

src/app/elements/elements.component.ts

@@ -30,7 +30,7 @@ import {ElementsReplayMp4Component} from './replay/mp4/mp4.component';
 import {ElementConnectorGuideComponent} from '@app/elements/content/content-window/guide/guide.component';
 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 {ElementChatComponent} from '@app/elements/chat/chat.component';
 
 export const ElementComponents = [
   ElementLeftBarComponent,
@@ -43,6 +43,7 @@ export const ElementComponents = [
   ElementUserFileComponent,
   ElementTermComponent,
   ElementNavComponent,
+  ElementChatComponent,
   ElementIframeComponent,
   ElementDialogAlertComponent,
   ElementAssetTreeComponent,