feat: 使用 CSS 变量动态调整窗口高度,优化各组件的最大高度设置

This commit is contained in:
kuaifan 2025-11-28 01:33:35 +00:00
parent ff53e1fac3
commit d88349b6f7
11 changed files with 19 additions and 15 deletions

View File

@ -182,6 +182,8 @@ export default {
rootStyle() {
return {
'--window-width': `${this.windowWidth}px`,
'--window-height': `${this.windowHeight}px`,
'--window-scroll-y': `${this.windowScrollY}px`,
'--status-bar-height': `${this.safeAreaSize.top}px`,
'--status-bar-color': this.statusColor || '#ffffff',

View File

@ -845,9 +845,9 @@ export default {
display: flex;
flex-direction: column;
gap: 16px;
max-height: calc(100vh - 344px);
max-height: calc(var(--window-height, 100vh) - 344px);
@media (height <= 900px) {
max-height: calc(100vh - 214px);
max-height: calc(var(--window-height, 100vh) - 214px);
}
.ai-assistant-output {

View File

@ -194,11 +194,11 @@
.search-list {
overflow: auto;
max-height: calc(100vh - 305px);
max-height: calc(var(--window-height, 100vh) - 305px);
overscroll-behavior: contain;
@media (height <= 900px) {
max-height: calc(100vh - 175px);
max-height: calc(var(--window-height, 100vh) - 175px);
}
> ul {

View File

@ -236,10 +236,10 @@
display: flex;
flex-direction: column;
min-height: 300px;
max-height: calc(100vh - 410px);
max-height: calc(var(--window-height, 100vh) - 410px);
@media (height <= 900px) {
max-height: calc(100vh - 280px);
max-height: calc(var(--window-height, 100vh) - 280px);
}
ul {

View File

@ -1,6 +1,6 @@
.dialog-droup-word-chain {
.ivu-modal-body {
max-height: calc(100vh - 260px);
max-height: calc(var(--window-height, 100vh) - 260px);
overflow: auto;
padding-top: 0 !important;
padding-right: 0 !important;
@ -58,7 +58,7 @@
display: flex;
flex-direction: column;
height: 100%;
max-height: calc(100vh - 265px);
max-height: calc(var(--window-height, 100vh) - 265px);
.source {
margin-right: 32px;

View File

@ -955,7 +955,7 @@
}
.project-panel-project-menu-dropdown {
max-height: calc(100vh - 120px);
max-height: calc(var(--window-height, 100vh) - 120px);
overflow-y: auto;
}
@ -963,7 +963,7 @@
.project-panel-more-dropdown-warp {
height: 400px;
min-height: 120px;
max-height: calc(100vh - 250px);
max-height: calc(var(--window-height, 100vh) - 250px);
overflow-y: auto;
list-style: none;
&::-webkit-scrollbar {

View File

@ -548,7 +548,7 @@
.taskflow-config-more-dropdown-warp {
height: 400px;
min-height: 180px;
max-height: calc(100vh - 250px);
max-height: calc(var(--window-height, 100vh) - 250px);
overflow-y: auto;
list-style: none;
}

View File

@ -235,10 +235,10 @@
.dialog-list {
padding: 0 12px;
overflow-y: auto;
max-height: calc(100vh - 310px);
max-height: calc(var(--window-height, 100vh) - 310px);
@media (height <= 900px) {
max-height: calc(100vh - 180px);
max-height: calc(var(--window-height, 100vh) - 180px);
}
.dialog-item {

View File

@ -90,7 +90,7 @@
.approve-mains {
display: flex;
flex: 1 1 auto;
height: calc(100vh - 190px - var(--status-bar-height) - var(--navigation-bar-height));
height: calc(var(--window-height, 100vh) - 190px - var(--status-bar-height) - var(--navigation-bar-height));
position: relative;
.approve-main-left {

View File

@ -339,7 +339,7 @@
}
&.ivu-dropdown {
.ivu-select-dropdown {
max-height: calc(100vh - 120px);
max-height: calc(var(--window-height, 100vh) - 120px);
overflow: auto;
}
}

View File

@ -1,4 +1,6 @@
:root {
--window-width: 100vw;
--window-height: 100vh;
--window-scroll-y: 0px;
--status-bar-height: 0px;
--status-bar-color: #ffffff;