Merge pull request #1207 from jumpserver/pr@dev@perf_mobile_style

perf: Optimize mobile style
jumpserver · Dec 18, 2024 · b6381dc · b6381dc
2 parents cc20e68 + d787fc6
commit b6381dc
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 0 deletions.
diff --git a/src/app/elements/replay/guacamole/guacamole.component.scss b/src/app/elements/replay/guacamole/guacamole.component.scss
@@ -286,3 +286,93 @@ input[type="range"]:focus::-ms-fill-upper {
     background: #5AF;
   }
 }
+
+@media screen and (max-width: 768px) {
+  #player {
+    .controls {
+      height: auto;
+      min-height: 35px;
+      padding: 8px;
+      flex-wrap: wrap;
+      gap: 8px;
+      background: rgba(0, 0, 0, 0.8);
+
+
+      button.btn {
+        min-width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 0.1);
+
+        i.fa {
+          font-size: 16px;
+          color: #fff;
+        }
+
+        &:active {
+          background: rgba(255, 255, 255, 0.2);
+        }
+      }
+
+      span[class*="range"] {
+        order: -1;
+        width: 100%;
+        padding: 8px 0;
+      }
+
+      #position, #duration {
+        color: #fff;
+        font-size: 12px;
+      }
+
+      #user, #asset, #system_user, #date_start {
+        width: 100%;
+        padding: 4px 0 !important;
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      #download {
+        padding: 4px 0 !important;
+
+        a {
+          color: #5AF;
+          text-decoration: none;
+        }
+      }
+    }
+
+    #display {
+      height: calc(100vh - 180px);
+
+      as-split-area[order="0"] {
+        display: none;
+      }
+
+      as-split-area[order="1"] {
+        width: 100% !important;
+        max-width: 100% !important;
+        min-width: 100% !important;
+      }
+
+      .seek-notification {
+        button#cancel-seek {
+          padding: 8px 16px;
+          border-radius: 4px;
+          background: rgba(255, 255, 255, 0.1);
+          color: #fff;
+          border: none;
+          font-size: 14px;
+
+          &:active {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/elements/replay/guacamole/guacamole.component.ts b/src/app/elements/replay/guacamole/guacamole.component.ts
@@ -101,6 +101,10 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
       .subscribe(() => {
         this.recordingDisplay.scale(this.getPropScale());
       });
+
+    if (this.isMobile()) {
+      this.initTouchEvents();
+    }
   }
 
   initRecording() {
@@ -309,4 +313,58 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges {
     this.percent = time <= 0 ? 0 : time;
     this.runFrom();
   }
+
+  private isMobile(): boolean {
+    return window.innerWidth < 768;
+  }
+
+  private initTouchEvents() {
+    const screen = document.getElementById('screen');
+    if (!screen) return;
+
+    let touchStartX = 0;
+    let touchStartY = 0;
+    let touchStartTime = 0;
+
+    screen.addEventListener('touchstart', (e: TouchEvent) => {
+      touchStartX = e.touches[0].clientX;
+      touchStartY = e.touches[0].clientY;
+      touchStartTime = Date.now();
+    });
+
+    screen.addEventListener('touchmove', (e: TouchEvent) => {
+      // 防止页面滚动
+      if (Math.abs(e.touches[0].clientY - touchStartY) > 10) {
+        e.preventDefault();
+      }
+    });
+
+    screen.addEventListener('touchend', (e: TouchEvent) => {
+      const touchEndX = e.changedTouches[0].clientX;
+      const touchEndY = e.changedTouches[0].clientY;
+      const touchEndTime = Date.now();
+
+      const deltaX = touchEndX - touchStartX;
+      const deltaY = touchEndY - touchStartY;
+      const deltaTime = touchEndTime - touchStartTime;
+
+      // 点击判定
+      if (Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10 && deltaTime < 200) {
+        this.toggle();
+      }
+
+      // 左右滑动判定
+      if (Math.abs(deltaX) > 50 && Math.abs(deltaY) < 30) {
+        const seekTime = 5000; // 5秒
+        if (deltaX > 0) {
+          // 向右滑动，前进
+          this.percent = Math.min(this.percent + seekTime, this.max);
+        } else {
+          // 向左滑动，后退
+          this.percent = Math.max(this.percent - seekTime, 0);
+        }
+        this.runFrom();
+      }
+    });
+  }
 }