🔨 添加 vnc 会话.

orion-visor-ui/src/assets/style/host-terminal-layout.less

@@ -619,5 +619,189 @@ body[terminal-theme='dark'] .arco-modal-container {
     font-size: 16px;
     margin: 0 8px 0 4px;
   }
-
+}
+
+// guacd 容器
+.guacd-container {
+
+  // guacd 视口
+  .guacd-viewport {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    :deep(> div) {
+      position: relative;
+      z-index: 8;
+    }
+  }
+
+  // guacd 状态遮罩
+  .guacd-status-mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  // guacd 工具栏
+  .guacd-action-bar {
+    position: absolute;
+    cursor: pointer;
+    z-index: 9998;
+
+    &.top {
+      top: 4px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.right {
+      right: 4px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    // 工具栏触发器
+    .action-bar-trigger {
+      display: flex;
+      border-radius: 8px;
+      transition: .3s all;
+      background: var(--color-bg-rdp-toolbar);
+      filter: contrast(50%) brightness(50%);
+
+      &.top {
+        width: 240px;
+        height: 8px;
+
+        &:hover {
+          transform: translateY(2px);
+        }
+      }
+
+      &.right {
+        width: 8px;
+        height: 228px;
+
+        &:hover {
+          transform: translateX(-2px);
+        }
+      }
+
+      &:hover {
+        background: var(--color-bg-rdp-toolbar-hover);
+      }
+    }
+
+  }
+}
+
+// guacd 工具栏
+@guacd-action-size: 42px;
+
+.guacd-action-bar-popover {
+  --actions-width: calc(var(--action-count) * @guacd-action-size + (var(--action-count) - 1) * 16px);
+  background: var(--color-bg-2);
+
+  .arco-popover-content {
+    margin-top: 0;
+    display: flex;
+  }
+
+  .action-bar-button {
+    width: @guacd-action-size !important;
+    height: @guacd-action-size !important;
+    font-size: 20px;
+  }
+
+  .action-bar-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .action-bar-content-footer {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .display-size-label {
+    padding-right: 6px;
+    user-select: none;
+    text-align: end;
+  }
+
+  .display-size-input {
+    width: 198px;
+  }
+
+  .action-bar-upload, .action-bar-clipboard {
+    display: flex;
+  }
+
+  .combination-key-item {
+    span {
+      display: block;
+      padding: 6px 12px;
+      cursor: pointer;
+      background: var(--color-fill-1);
+      border-radius: 2px;
+      user-select: none;
+      transition: 0.2s ALL;
+
+      &:hover {
+        background: var(--color-fill-2);
+      }
+    }
+  }
+}
+
+.guacd-action-bar-popover.top {
+  .arco-popover-content {
+    flex-direction: column;
+    width: var(--actions-width);
+  }
+
+  .action-bar-content {
+    margin-top: 16px;
+    max-height: 224px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .action-bar-upload, .action-bar-clipboard {
+    height: 186px;
+  }
+}
+
+.guacd-action-bar-popover.right {
+  .arco-popover-content {
+    flex-direction: row-reverse;
+    height: var(--actions-width);
+  }
+
+  .action-bar-content {
+    margin-right: 16px;
+    width: 344px;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .action-bar-upload, .action-bar-clipboard {
+    height: calc(var(--actions-width) - 40px);
+  }
 }