From 4515d54980f47e42d5bb6e2815db644aa874aef0 Mon Sep 17 00:00:00 2001 From: zhaojisen <1301338853@qq.com> Date: Tue, 8 Jul 2025 11:10:45 +0800 Subject: [PATCH] Fixed: Fix the issue where the right split screen sometimes fails to adapt to the window display. --- src/app/elements/elements.component.ts | 80 +++++++++---------- .../replay/guacamole/guacamole.component.html | 2 +- .../replay/guacamole/guacamole.component.scss | 45 ++++++++--- .../replay/parts/parts.component.scss | 45 ++++++++++- .../elements/replay/parts/parts.component.ts | 11 ++- 5 files changed, 126 insertions(+), 57 deletions(-) diff --git a/src/app/elements/elements.component.ts b/src/app/elements/elements.component.ts index 89b7aa895..9e9de94fb 100644 --- a/src/app/elements/elements.component.ts +++ b/src/app/elements/elements.component.ts @@ -1,46 +1,42 @@ // Elements -import {ElementLeftBarComponent} from './left-bar/left-bar.component'; -import {ElementContentComponent} from './content/content.component'; -import {ElementContentWindowComponent} from './content/content-window/content-window.component'; -import {ElementContentTabComponent} from './content/content-tab/content-tab.component'; -import {ElementContentFooterComponent} from './content/content-footer/content-footer.component'; -import {ElementAssetTreeComponent} from './asset-tree/asset-tree.component'; -import {ElementTreeFilterComponent} from '@app/elements/asset-tree/tree-filter/tree-filter.component'; -import {ElementOrganizationComponent} from '@app/elements/left-bar/organization/organization.component'; -import {ElementUserFileComponent} from '@app/elements/nav/profile/profile.component'; -import {ElementNavComponent} from './nav/nav.component'; -import {ElementIframeComponent} from './iframe/iframe.component'; -import {ElementConnectComponent} from './connect/connect.component'; -import {ElementConnectDialogComponent} from './connect/connect-dialog/connect-dialog.component'; -import {ElementSettingComponent} from '@app/elements/nav/setting/setting.component'; -import {ElementReplayGuacamoleComponent} from './replay/guacamole/guacamole.component'; -import {ElementConnectorKokoComponent} from './content/content-window/koko/koko.component'; -import {ElementConnectorMagnusComponent} from './content/content-window/magnus/magnus.component'; -import {ElementConnectorDefaultComponent} from '@app/elements/content/content-window/default/default.component'; -import {ElementContentViewComponent} from '@app/elements/content/content-window/content-view/content-view.component'; -import {ElementSelectAccountComponent} from './connect/connect-dialog/select-account/select-account.component'; -import {ElementReplayAsciicastComponent} from '@app/elements/replay/asciicast/asciicast.component'; -import {ElementAdvancedOptionComponent} from './connect/connect-dialog/advanced-option/advanced-option.component'; -import {ElementConnectMethodComponent} from './connect/connect-dialog/connect-method/connect-method.component'; -import {ElementDownloadDialogComponent} from './connect/download-dialog/download-dialog.component'; -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/content-footer/send-command-dialog/send-command-dialog.component'; -import { - ElementSendCommandWithVariableDialogComponent -} from '@app/elements/content/content-footer/send-command-with-variable-dialog/send-command-with-variable-dialog.component'; -import {DynamicFormComponent} from '@app/elements/content/content-footer/variable-dynamic-form/variable-dynamic-form.component'; -import {ElementChatComponent} from '@app/elements/chat/chat.component'; -import {ElementsPartsComponent} from './replay/parts/parts.component'; -import {ElementConnectorNecComponent} from '@app/elements/content/content-window/nec/nec.component'; -import {ElementFaceMonitorComponent} from '@app/elements/connect/face-monitor/face-monitor.component'; +import { ElementNavComponent } from './nav/nav.component'; +import { ElementIframeComponent } from './iframe/iframe.component'; +import { ElementConnectComponent } from './connect/connect.component'; +import { ElementContentComponent } from './content/content.component'; +import { ElementsPartsComponent } from './replay/parts/parts.component'; +import { ElementLeftBarComponent } from './left-bar/left-bar.component'; +import { ElementsReplayMp4Component } from './replay/mp4/mp4.component'; +import { ElementChatComponent } from '@app/elements/chat/chat.component'; +import { ElementAssetTreeComponent } from './asset-tree/asset-tree.component'; +import { ElementTermComponent } from '@app/elements/replay/term/term.component'; +import { ElementDialogAlertComponent } from '@app/services/dialog/alert.service'; +import { ElementSettingComponent } from '@app/elements/nav/setting/setting.component'; +import { ElementUserFileComponent } from '@app/elements/nav/profile/profile.component'; +import { ElementContentTabComponent } from './content/content-tab/content-tab.component'; +import { ElementReplayGuacamoleComponent } from './replay/guacamole/guacamole.component'; +import { ElementConnectorKokoComponent } from './content/content-window/koko/koko.component'; +import { ElementConnectDialogComponent } from './connect/connect-dialog/connect-dialog.component'; +import { ElementContentWindowComponent } from './content/content-window/content-window.component'; +import { ElementContentFooterComponent } from './content/content-footer/content-footer.component'; +import { ElementConnectorMagnusComponent } from './content/content-window/magnus/magnus.component'; +import { ElementDownloadDialogComponent } from './connect/download-dialog/download-dialog.component'; +import { ElementReplayAsciicastComponent } from '@app/elements/replay/asciicast/asciicast.component'; +import { ElementConnectorNecComponent } from '@app/elements/content/content-window/nec/nec.component'; +import { ElementFaceMonitorComponent } from '@app/elements/connect/face-monitor/face-monitor.component'; +import { ElementACLDialogComponent } from '@app/services/connect-token/acl-dialog/acl-dialog.component'; +import { ElementTreeFilterComponent } from '@app/elements/asset-tree/tree-filter/tree-filter.component'; +import { ElementOrganizationComponent } from '@app/elements/left-bar/organization/organization.component'; +import { ElementConnectorGuideComponent } from '@app/elements/content/content-window/guide/guide.component'; +import { ElementCommandDialogComponent } from '@app/elements/content/command-dialog/command-dialog.component'; +import { ElementSelectAccountComponent } from './connect/connect-dialog/select-account/select-account.component'; +import { ElementConnectMethodComponent } from './connect/connect-dialog/connect-method/connect-method.component'; +import { ElementConnectorDefaultComponent } from '@app/elements/content/content-window/default/default.component'; +import { ElementAdvancedOptionComponent } from './connect/connect-dialog/advanced-option/advanced-option.component'; +import { ElementContentViewComponent } from '@app/elements/content/content-window/content-view/content-view.component'; +import { DynamicFormComponent } from '@app/elements/content/content-footer/variable-dynamic-form/variable-dynamic-form.component'; +import { ElementSendCommandDialogComponent } from '@app/elements/content/content-footer/send-command-dialog/send-command-dialog.component'; +import { ElementSendCommandWithVariableDialogComponent } from '@app/elements/content/content-footer/send-command-with-variable-dialog/send-command-with-variable-dialog.component'; -import {ElementACLDialogComponent} from '@app/services/connect-token/acl-dialog/acl-dialog.component'; -import {ElementDialogAlertComponent} from '@app/services/dialog/alert.service'; -import {ElementTermComponent} from '@app/elements/replay/term/term.component'; export const ElementComponents = [ ElementLeftBarComponent, @@ -80,5 +76,5 @@ export const ElementComponents = [ ElementsPartsComponent, ElementACLDialogComponent, ElementDialogAlertComponent, - ElementTermComponent, + ElementTermComponent ]; diff --git a/src/app/elements/replay/guacamole/guacamole.component.html b/src/app/elements/replay/guacamole/guacamole.component.html index 9566f8b57..03b5fc7e0 100644 --- a/src/app/elements/replay/guacamole/guacamole.component.html +++ b/src/app/elements/replay/guacamole/guacamole.component.html @@ -4,7 +4,7 @@

正在跳转...

- +
diff --git a/src/app/elements/replay/guacamole/guacamole.component.scss b/src/app/elements/replay/guacamole/guacamole.component.scss index c7ca6e88c..c53afe289 100644 --- a/src/app/elements/replay/guacamole/guacamole.component.scss +++ b/src/app/elements/replay/guacamole/guacamole.component.scss @@ -371,19 +371,21 @@ input[type="range"]:focus::-ms-fill-upper { .player-container { display: flex; flex-direction: column; - height: 100vh; + height: 100%; + width: 100%; background: var(--el-editor-bg-color); - - &.seeking { - // 跳转状态下保持原有样式，不做额外改动 - // 主要依靠 seek-overlay 来显示跳转提示 - } + max-width: 100%; + max-height: 100%; + overflow: hidden; .display { flex: 1; position: relative; background: var(--el-main-bg-color); min-height: 0; + max-width: 100%; + max-height: 100%; + overflow: hidden; .seek-overlay { position: absolute; @@ -434,14 +436,19 @@ input[type="range"]:focus::-ms-fill-upper { flex-direction: row; height: 100%; min-height: 0; + max-width: 100%; + max-height: 100%; + overflow: hidden; .commands { width: 250px; + min-width: 250px; + max-width: 250px; background: var(--el-asset-tree-bg-color); border-right: 1px solid var(--el-border-color-x); display: flex; flex-direction: column; - flex-shrink: 0; // 不允许收缩 + flex-shrink: 0; .commands-header { padding: 12px 16px; @@ -505,6 +512,8 @@ input[type="range"]:focus::-ms-fill-upper { display: flex; flex-direction: column; min-width: 0; + max-width: 100%; + max-height: 100%; &.full { width: 100%; @@ -522,22 +531,25 @@ input[type="range"]:focus::-ms-fill-upper { box-sizing: border-box; flex: 1; min-height: 0; + max-width: 100%; + max-height: 100%; > * { max-width: 100%; max-height: 100%; object-fit: contain; + width: auto; + height: auto; } } } } } - // 控制栏 - 现在在底部 .controls { display: flex; align-items: center; - height: 60px; // 增加高度确保足够空间 + height: 60px; padding: 0 16px; background: var(--el-nav-bg-color); border-top: 1px solid var(--el-border-color-x); @@ -668,7 +680,6 @@ input[type="range"]:focus::-ms-fill-upper { } } -// 响应式 @media (max-width: 768px) { .player-container { .controls { @@ -704,6 +715,20 @@ input[type="range"]:focus::-ms-fill-upper { .screen-wrapper { width: 100%; + max-width: 100%; + min-width: 0; + } + } + } +} + +@media (max-width: 1024px) and (min-width: 769px) { + .player-container { + .display .content { + .commands { + width: 200px; + min-width: 200px; + max-width: 200px; } } } diff --git a/src/app/elements/replay/parts/parts.component.scss b/src/app/elements/replay/parts/parts.component.scss index 9986317c3..bc7ae3080 100644 --- a/src/app/elements/replay/parts/parts.component.scss +++ b/src/app/elements/replay/parts/parts.component.scss @@ -3,6 +3,11 @@ flex-direction: column; height: 100vh; background: var(--el-main-bg-color); + max-height: 100vh; + overflow: hidden; + + --playlist-width: 300px; + --playlist-min-width: 300px; .info-header { display: flex; @@ -53,6 +58,8 @@ flex: 1; position: relative; background: var(--el-editor-bg-color); + min-width: 0; + overflow: hidden; .loading-overlay { position: absolute; @@ -65,15 +72,21 @@ .video-player { width: 100%; height: 100%; + max-width: 100%; + max-height: 100%; + overflow: hidden; } } .playlist-area { - width: 300px; + width: var(--playlist-width); + min-width: var(--playlist-min-width); + max-width: var(--playlist-width); background: var(--el-asset-tree-bg-color); border-left: 1px solid var(--el-border-color-x); display: flex; flex-direction: column; + flex-shrink: 0; .playlist-header { display: flex; @@ -194,13 +207,43 @@ .video-area { height: 60vh; + min-height: 300px; + flex: none; } .playlist-area { width: 100%; + min-width: 100%; + max-width: 100%; height: 40vh; + min-height: 200px; border-left: none; border-top: 1px solid var(--el-border-color-x); + flex: none; + } + } + } + + @media (max-width: 1024px) and (min-width: 769px) { + --playlist-width: 250px; + --playlist-min-width: 250px; + } + + @media (min-width: 1200px) { + --playlist-width: 350px; + --playlist-min-width: 350px; + } + + @media (max-width: 480px) { + .main-content { + .video-area { + height: 50vh; + min-height: 250px; + } + + .playlist-area { + height: 50vh; + min-height: 150px; } } } diff --git a/src/app/elements/replay/parts/parts.component.ts b/src/app/elements/replay/parts/parts.component.ts index 805f19a31..e6c521c9e 100644 --- a/src/app/elements/replay/parts/parts.component.ts +++ b/src/app/elements/replay/parts/parts.component.ts @@ -1,8 +1,8 @@ import { Replay } from '@app/model'; -import { HttpService, I18nService, LogService } from '@app/services'; -import { TranslateService } from '@ngx-translate/core'; -import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; +import { TranslateService } from '@ngx-translate/core'; +import { HttpService, I18nService, LogService } from '@app/services'; +import { ChangeDetectorRef, Component, Input, OnInit, HostListener } from '@angular/core'; export interface Section extends Replay { name: string; @@ -39,6 +39,11 @@ export class ElementsPartsComponent implements OnInit { alertShown = true; videoLoading = false; + @HostListener('window:resize', ['$event']) + onResize(event) { + this.cdRef.detectChanges(); + } + constructor( public _i18n: I18nService, private _http: HttpService,