feat(前端界面): 优化批量转换布局与自适应高度
build.yaml / build (push) Successful in 41s

This commit is contained in:
xiaoqidun committed 2026-09-26 21:47:55 +08:00
1 parent f234d4ad10
commit 983a856736
1 file changed
+21 -10
+21 -10
View File
@@ -727,7 +727,7 @@ button:not(:disabled):hover {
.convert-table { .convert-table {
max-height: 40dvh; max-height: 40dvh;
min-height: 120px; min-height: 0;
overflow: auto; overflow: auto;
border: 1px solid var(--line); border: 1px solid var(--line);
background: #fff; background: #fff;
@@ -755,6 +755,10 @@ button:not(:disabled):hover {
font-weight: 500; font-weight: 500;
} }
.convert-table tbody td:first-child {
text-align: left;
}
.convert-table th:nth-child(2), .convert-table th:nth-child(2),
.convert-table th:nth-child(3), .convert-table th:nth-child(3),
.convert-table th:nth-child(4) { .convert-table th:nth-child(4) {
@@ -878,6 +882,10 @@ button:not(:disabled):hover {
margin-top: 12px; margin-top: 12px;
} }
.convert-progress:has(#convertStatus:empty) {
display: none;
}
.convert-dialog .form-actions { .convert-dialog .form-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -920,13 +928,11 @@ button:not(:disabled):hover {
.convert-progress, .convert-progress,
.convert-dialog .form-actions { flex-shrink: 0; } .convert-dialog .form-actions { flex-shrink: 0; }
.convert-table { .convert-table {
min-height: min(120px, 18dvh);
max-height: 50dvh; max-height: 50dvh;
} }
.convert-progress:has(#convertStatus:empty) { display: none; }
.convert-dialog .form-actions { .convert-dialog .form-actions {
display: grid; display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 12px; row-gap: 12px;
} }
.convert-dialog .form-actions > .button { grid-row: 2; } .convert-dialog .form-actions > .button { grid-row: 2; }
@@ -935,24 +941,26 @@ button:not(:disabled):hover {
grid-row: 1; grid-row: 1;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%; width: 100%;
max-width: 360px; margin: 0;
margin: 0 auto;
} }
.convert-options:has(#convertDPIRow[hidden]) { .convert-options:has(#convertDPIRow[hidden]) {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 240px;
} }
.convert-options .form-row { .convert-options .form-row {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
gap: 6px; gap: 6px;
text-align: center; text-align: left;
}
.convert-options:has(#convertDPIRow[hidden]) .form-row {
grid-template-columns: 2em minmax(0, 1fr);
gap: 8px;
} }
.convert-options label { width: auto; } .convert-options label { width: auto; }
#convertAdd { grid-column: 1; } #convertAdd { grid-column: 1; }
#convertClear { grid-column: 2; } #convertClear { grid-column: 2; }
#convertClose { grid-column: 4; } #convertClose { grid-column: 3; }
#convertCancel, #convertCancel,
#convertStart { grid-column: 5; } #convertStart { grid-column: 4; }
} }
@media (max-width: 620px) { @media (max-width: 620px) {
@@ -976,6 +984,9 @@ button:not(:disabled):hover {
padding-right: calc(var(--control-height) + 12px); padding-right: calc(var(--control-height) + 12px);
} }
.convert-name { .convert-name {
display: flex;
align-items: center;
min-height: var(--control-height);
overflow-wrap: anywhere; overflow-wrap: anywhere;
white-space: normal; white-space: normal;
line-height: 1.5; line-height: 1.5;