jumpserver · ZhaoJiSen · Jul 16, 2025 · Jul 16, 2025
diff --git a/src/app/elements/replay/guacamole/guacamole.component.html b/src/app/elements/replay/guacamole/guacamole.component.html
@@ -9,9 +9,12 @@
     </div>
 
     <div class="content">
-      <div class="commands" *ngIf="commands.length > 0">
+      <div class="commands" *ngIf="commands.length > 0" [class.collapsed]="commandsCollapsed">
         <div class="commands-header">
           <span>{{ 'HistoryCommands' | translate }} ({{ commands.length }})</span>
+          <button class="toggle-btn" (click)="toggleCommands()" [title]="'Hide' | translate">
+            <i nz-icon nzType="left" nzTheme="outline"></i>
+          </button>
         </div>
         <div class="commands-list"
              infiniteScroll
@@ -30,7 +33,11 @@
       </div>
 
       <!-- 屏幕 -->
-      <div class="screen-wrapper" [class.full]="commands.length === 0">
+      <div class="screen-wrapper" [class.full]="commands.length === 0" [class.commands-hidden]="commandsCollapsed">
+        <button class="show-commands-btn" (click)="toggleCommands()" [title]="'Show Commands' | translate">
+          <i nz-icon nzType="right" nzTheme="outline"></i>
+          {{ 'Commands' | translate }}
+        </button>
         <div id="screen" class="screen" (click)="toggle()"></div>
       </div>
     </div>

diff --git a/src/app/elements/replay/guacamole/guacamole.component.scss b/src/app/elements/replay/guacamole/guacamole.component.scss
@@ -1,4 +1,3 @@
-// 保持原有的 player ID 选择器以保证兼容性
 #player {
   width: 100%;
   height: 100%;
@@ -441,14 +440,25 @@ input[type="range"]:focus::-ms-fill-upper {
       overflow: hidden;
 
       .commands {
-        width: 250px;
-        min-width: 250px;
-        max-width: 250px;
+        width: 280px;
+        min-width: 200px;
+        max-width: 400px;
         background: var(--el-asset-tree-bg-color);
         border-right: 1px solid var(--el-border-color-x);
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
+        resize: horizontal;
+        overflow: hidden;
+        transition: width 0.3s ease, min-width 0.3s ease;
+
+        &.collapsed {
+          width: 0;
+          min-width: 0;
+          max-width: 0;
+          resize: none;
+          border-right: none;
+        }
 
         .commands-header {
           padding: 12px 16px;
@@ -457,6 +467,26 @@ input[type="range"]:focus::-ms-fill-upper {
           font-size: 13px;
           font-weight: 500;
           color: #ffffff;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .toggle-btn {
+            background: transparent;
+            border: none;
+            color: var(--el-text-color-light);
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 3px;
+
+            &:hover {
+              background: var(--el-dropdown-hover-bg-color);
+            }
+
+            i {
+              font-size: 12px;
+            }
+          }
         }
 
         .commands-list {
@@ -519,6 +549,33 @@ input[type="range"]:focus::-ms-fill-upper {
           width: 100%;
         }
 
+        .show-commands-btn {
+          position: absolute;
+          top: 12px;
+          left: 12px;
+          z-index: 10;
+          background: var(--el-org-bg-color);
+          border: 1px solid var(--el-border-color-x);
+          color: var(--el-text-color-light);
+          padding: 8px 12px;
+          border-radius: 4px;
+          cursor: pointer;
+          font-size: 12px;
+          display: none;
+
+          &:hover {
+            background: var(--el-dropdown-hover-bg-color);
+          }
+
+          i {
+            margin-right: 4px;
+          }
+        }
+
+        &.commands-hidden .show-commands-btn {
+          display: block;
+        }
+
         .screen {
           width: 100%;
           height: 100%;
@@ -726,9 +783,21 @@ input[type="range"]:focus::-ms-fill-upper {
   .player-container {
     .display .content {
       .commands {
-        width: 200px;
-        min-width: 200px;
-        max-width: 200px;
+        width: 220px;
+        min-width: 180px;
+        max-width: 300px;
+      }
+    }
+  }
+}
+
+@media (min-width: 1400px) {
+  .player-container {
+    .display .content {
+      .commands {
+        width: 320px;
+        min-width: 250px;
+        max-width: 450px;
       }
     }
   }

diff --git a/src/app/elements/replay/guacamole/guacamole.component.ts b/src/app/elements/replay/guacamole/guacamole.component.ts
@@ -47,6 +47,7 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
   lastDuration: number = 0;
   interval: number;
   initializedCommand: boolean = false;
+  commandsCollapsed: boolean = false;
 
   constructor(
     private _http: HttpService,
@@ -445,4 +446,8 @@ export class ElementReplayGuacamoleComponent implements OnInit, OnChanges, After
       }
     });
   }
+
+  toggleCommands() {
+    this.commandsCollapsed = !this.commandsCollapsed;
+  }
 }
diff --git a/src/app/elements/replay/parts/parts.component.html b/src/app/elements/replay/parts/parts.component.html
@@ -31,10 +31,14 @@
   <!-- 主体内容 -->
   <div class="main-content">
     <!-- 视频播放区 -->
-    <div class="video-area">
+    <div class="video-area" [class.playlist-hidden]="playlistCollapsed">
       <div class="loading-overlay" *ngIf="videoLoading">
         <nz-spin nzSize="large"></nz-spin>
       </div>
+      <button class="show-playlist-btn" (click)="togglePlaylist()" [title]="'Show Playlist' | translate">
+        <i nz-icon nzType="menu" nzTheme="outline"></i>
+        {{ 'Playlist' | translate }}
+      </button>
       <elements-replay-guacamole
         *ngIf="currentVideo && currentVideo.src"
         [replay]="currentVideo"
@@ -43,10 +47,17 @@
     </div>
 
     <!-- 播放列表 -->
-    <div class="playlist-area">
+    <div class="playlist-area" [class.collapsed]="playlistCollapsed">
       <div class="playlist-header">
-        <h3>{{ 'Play List' | translate }}</h3>
-        <span class="count">({{ folders?.length || 0 }})</span>
+        <div class="playlist-title">
+          <h3>{{ 'Play List' | translate }}</h3>
+          <span class="count">({{ folders?.length || 0 }})</span>
+        </div>
+        <div class="playlist-actions">
+          <button class="toggle-btn" (click)="togglePlaylist()" [title]="'Hide' | translate">
+            <i nz-icon nzType="right" nzTheme="outline"></i>
+          </button>
+        </div>
       </div>
       <div class="playlist-content">
         <div class="loading-overlay" *ngIf="alertShown">

diff --git a/src/app/elements/replay/parts/parts.component.scss b/src/app/elements/replay/parts/parts.component.scss
@@ -76,17 +76,55 @@
         max-height: 100%;
         overflow: hidden;
       }
+
+      .show-playlist-btn {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        z-index: 10;
+        background: var(--el-org-bg-color);
+        border: 1px solid var(--el-border-color-x);
+        color: var(--el-text-color-light);
+        padding: 8px 12px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+        display: none;
+
+        &:hover {
+          background: var(--el-dropdown-hover-bg-color);
+        }
+
+        i {
+          margin-right: 4px;
+        }
+      }
+
+      &.playlist-hidden .show-playlist-btn {
+        display: block;
+      }
     }
 
     .playlist-area {
       width: var(--playlist-width);
       min-width: var(--playlist-min-width);
-      max-width: var(--playlist-width);
+      max-width: 400px;
       background: var(--el-asset-tree-bg-color);
       border-left: 1px solid var(--el-border-color-x);
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
+      resize: horizontal;
+      overflow: hidden;
+      transition: width 0.3s ease, min-width 0.3s ease;
+
+      &.collapsed {
+        width: 0;
+        min-width: 0;
+        max-width: 0;
+        resize: none;
+        border-left: none;
+      }
 
       .playlist-header {
         display: flex;
@@ -96,16 +134,45 @@
         background: var(--el-org-bg-color);
         border-bottom: 1px solid var(--el-border-color-x);
 
-        h3 {
-          margin: 0;
-          font-size: 14px;
-          font-weight: 500;
-          color: #ffffff;
+        .playlist-title {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          h3 {
+            margin: 0;
+            font-size: 14px;
+            font-weight: 500;
+            color: #ffffff;
+          }
+
+          .count {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.6);
+          }
         }
 
-        .count {
-          font-size: 12px;
-          color: rgba(255, 255, 255, 0.6);
+        .playlist-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .toggle-btn {
+            background: transparent;
+            border: none;
+            color: var(--el-text-color-light);
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 3px;
+
+            &:hover {
+              background: var(--el-dropdown-hover-bg-color);
+            }
+
+            i {
+              font-size: 12px;
+            }
+          }
         }
       }
 
@@ -232,6 +299,19 @@
   @media (min-width: 1200px) {
     --playlist-width: 350px;
     --playlist-min-width: 350px;
+
+    .main-content .playlist-area {
+      max-width: 500px;
+    }
+  }
+
+  @media (min-width: 1600px) {
+    --playlist-width: 400px;
+    --playlist-min-width: 400px;
+
+    .main-content .playlist-area {
+      max-width: 600px;
+    }
   }
 
   @media (max-width: 480px) {

diff --git a/src/app/elements/replay/parts/parts.component.ts b/src/app/elements/replay/parts/parts.component.ts
@@ -38,6 +38,7 @@ export class ElementsPartsComponent implements OnInit {
 
   alertShown = true;
   videoLoading = false;
+  playlistCollapsed = false;
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
@@ -268,10 +269,14 @@ export class ElementsPartsComponent implements OnInit {
     let lang = this.getUserLang();
 
     if (lang === 'zh-hans') {
-      lang = 'zh-CN'
+      lang = 'zh-CN';
     }
 
     const date_s = d.toLocaleString(lang, { hour12: false });
     return date_s.split('/').join('-');
   }
+
+  togglePlaylist() {
+    this.playlistCollapsed = !this.playlistCollapsed;
+  }
 }
diff --git a/src/app/router.module.ts b/src/app/router.module.ts
@@ -4,6 +4,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { PageMainComponent } from './pages/main/main.component';
 import { PagesBlankComponent } from './pages/blank/blank.component';
 import { PagesShareComponent } from './pages/share/share.component';
+import { PagesReplayComponent } from './pages/replay/replay.component';
 
 const appRoutes: Routes = [
   { path: '', component: PageMainComponent },
@@ -20,7 +21,7 @@ const appRoutes: Routes = [
   { path: 'share/:id', component: PagesShareComponent },
   {
     path: 'replay/:sid',
-    loadComponent: () => import('./pages/replay/replay.component').then(m => m.PagesReplayComponent)
+    component: PagesReplayComponent
   },
   {
     path: 'admin-connect',