style: 统一表单弹窗布局并添加通用样式
为 ServerFormModal 和 TunnelFormModal 添加居中及通用包裹类, 新增 CSS 实现弹窗高度限制、内容区域滚动等布局规范。
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user