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);
|
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 {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
|
|||||||
@@ -4,6 +4,8 @@
|
|||||||
:title="isEdit ? t('server.form.editTitle') : t('server.form.addTitle')"
|
:title="isEdit ? t('server.form.editTitle') : t('server.form.addTitle')"
|
||||||
:confirm-loading="saving"
|
:confirm-loading="saving"
|
||||||
:mask-closable="false"
|
:mask-closable="false"
|
||||||
|
centered
|
||||||
|
wrap-class-name="form-modal-wrap"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
:ok-text="t('common.save')"
|
:ok-text="t('common.save')"
|
||||||
:cancel-text="t('common.cancel')"
|
:cancel-text="t('common.cancel')"
|
||||||
|
|||||||
@@ -5,6 +5,8 @@
|
|||||||
:confirm-loading="saving"
|
:confirm-loading="saving"
|
||||||
:mask-closable="false"
|
:mask-closable="false"
|
||||||
:width="640"
|
:width="640"
|
||||||
|
centered
|
||||||
|
wrap-class-name="form-modal-wrap"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
:ok-text="t('common.save')"
|
:ok-text="t('common.save')"
|
||||||
:cancel-text="t('common.cancel')"
|
:cancel-text="t('common.cancel')"
|
||||||
@@ -522,3 +524,4 @@ async function handleOk() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user