style: 统一表单弹窗布局并添加通用样式

为 ServerFormModal 和 TunnelFormModal 添加居中及通用包裹类,
新增 CSS 实现弹窗高度限制、内容区域滚动等布局规范。
This commit is contained in:
Yuhang Wu
2026-10-13 15:07:18 +08:00
parent 3b153e32c9
commit 487bde5473
3 changed files with 34 additions and 0 deletions
+29
View File
@@ -84,6 +84,35 @@ body {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/*
* 表单弹窗通用布局:
* 1. 弹窗整体高度不超过窗口的 80%;
* 2. 内容过多时仅弹窗主体(body)滚动,标题与底部按钮固定可见;
* 3. 只保留纵向滚动条,避免出现横向滚动条。
*/
.form-modal-wrap .ant-modal {
padding-bottom: 0;
}
.form-modal-wrap .ant-modal-content {
display: flex;
flex-direction: column;
max-height: 80vh;
overflow: hidden;
}
.form-modal-wrap .ant-modal-header,
.form-modal-wrap .ant-modal-footer {
flex: 0 0 auto;
}
.form-modal-wrap .ant-modal-body {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
/* 细滚动条 */
::-webkit-scrollbar {
width: 6px;
@@ -4,6 +4,8 @@
:title="isEdit ? t('server.form.editTitle') : t('server.form.addTitle')"
:confirm-loading="saving"
:mask-closable="false"
centered
wrap-class-name="form-modal-wrap"
destroy-on-close
:ok-text="t('common.save')"
:cancel-text="t('common.cancel')"
@@ -5,6 +5,8 @@
:confirm-loading="saving"
:mask-closable="false"
:width="640"
centered
wrap-class-name="form-modal-wrap"
destroy-on-close
:ok-text="t('common.save')"
:cancel-text="t('common.cancel')"
@@ -522,3 +524,4 @@ async function handleOk() {
}
}
</script>