From: root Date: Mon, 28 Sep 2026 05:50:50 +0000 (+0800) Subject: 弹窗样式对齐 web-ui-builder/antd Modal 规范:480 宽+24 内边距+22px 标题+32px 按钮;修复领域编辑弹窗缺失 UiOverlay... X-Git-Url: http://acesimba.cloud/gitweb/?a=commitdiff_plain;h=28b4055db987432f5e125c74d54ae310bb4f6d0b;p=StationBuilder-vue.git 弹窗样式对齐 web-ui-builder/antd Modal 规范:480 宽+24 内边距+22px 标题+32px 按钮;修复领域编辑弹窗缺失 UiOverlay 引入未走 ElDialog 的问题 --- diff --git a/src-vue/pages/DomainSettings.vue b/src-vue/pages/DomainSettings.vue index 53327bd..e05499b 100644 --- a/src-vue/pages/DomainSettings.vue +++ b/src-vue/pages/DomainSettings.vue @@ -7,6 +7,7 @@ import UiInput from "../ui/UiInput.vue"; import UiSelect from "../ui/UiSelect.vue"; import UiTable from "../ui/UiTable.vue"; import UiActions from "../ui/UiActions.vue"; +import UiOverlay from "../ui/UiOverlay.vue"; import Panel from "../components/Panel.vue"; import Field from "../components/Field.vue"; import StatusTag from "../components/StatusTag.vue"; diff --git a/src-vue/styles/globals.css b/src-vue/styles/globals.css index 57e8047..be0f3d6 100644 --- a/src-vue/styles/globals.css +++ b/src-vue/styles/globals.css @@ -457,7 +457,7 @@ html,body{font-family:var(--ant-font-family);font-size:var(--ant-font-size);line .domain-manage-row .muted{font-size:var(--ant-font-size-sm)} .text-button.danger{color:var(--ant-color-error)} .text-button.danger:hover{text-decoration:underline} -.domain-create-dialog h2{margin:0 0 8px;font-size:var(--ant-font-size-heading-4)}.domain-create-dialog p{margin:0 0 16px;color:var(--ant-color-text-secondary)}.domain-create-dialog .dlg-actions{margin-top:20px}.domain-create-dialog .button{min-width:96px;margin:0} +.domain-create-dialog h2{margin:0 0 8px;font-size:var(--ant-font-size-heading-4)}.domain-create-dialog p{margin:0 0 16px;color:var(--ant-color-text-secondary)}.domain-create-dialog .dlg-actions{margin-top:20px}.domain-create-dialog .button{min-width:96px;margin:0}.domain-edit-dialog .button{min-width:96px;margin:0} .system-settings-page{max-width:920px;padding-top:16px}.system-settings-page>.panel{margin:0}.system-settings-page .panel-head{height:52px}.settings-form{max-width:680px;display:flex;flex-direction:column;gap:20px;padding:8px 8px 16px}.settings-form .field{gap:8px}.settings-form .field>span{font-size:var(--ant-font-size)}.settings-form input,.settings-form select{width:100%;height:40px;border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius);padding:0 12px;background:var(--ant-color-bg-container)}.settings-form input[readonly]{background:var(--ant-color-bg-layout);color:var(--ant-color-text-secondary)}.settings-note{padding:16px 16px;background:var(--ant-color-bg-layout);border-left:3px solid var(--ant-color-primary);display:flex;flex-direction:column;gap:4px}.settings-note span{color:var(--ant-color-text-secondary)}.settings-actions{display:flex;justify-content:flex-start}.settings-actions .button{margin:0}.settings-table-wrap{overflow-x:auto}.settings-domain-table{table-layout:auto;min-width:680px}.settings-domain-table th:first-child,.settings-domain-table td:first-child{width:260px;min-width:260px;text-align:left}.settings-domain-table th:nth-child(2),.settings-domain-table td:nth-child(2){width:auto}.settings-domain-table th:nth-child(3),.settings-domain-table td:nth-child(3){width:130px}.settings-domain-table th:nth-child(4),.settings-domain-table td:nth-child(4){width:100px;text-align:center}.settings-domain-table .text-button{margin:0} /* 领域方案库 · 左侧导航栏「领域分类」行内编辑(删除× / 新增+) */ diff --git a/src-vue/styles/ui-system.css b/src-vue/styles/ui-system.css index 2880de8..57af44a 100644 --- a/src-vue/styles/ui-system.css +++ b/src-vue/styles/ui-system.css @@ -82,10 +82,13 @@ html,body{font-family:var(--ant-font-family);font-size:var(--ant-font-size);colo .station-inline-actions,.station-modal-actions,.station-drawer-actions,.drawer-actions,.result-actions,.settings-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--ant-padding-xs)} .station-modal-actions{justify-content:flex-end} /* Element Plus Dialog 承载定位、聚焦与外框;旧类名只标识业务内容。 */ -.station-ui-modal.modal,.station-ui-modal.dlg-box{display:block;position:relative;inset:auto;margin-inline:auto;padding:0;max-width:calc(100vw - 32px);max-height:none;height:auto;background:var(--ant-color-bg-container);border:1px solid var(--ant-color-border);border-radius:var(--ant-border-radius-lg);box-shadow:0 12px 36px color-mix(in srgb,var(--ant-color-text-base) 20%,transparent);overflow:visible;z-index:auto;color:var(--ant-color-text-base);font-size:var(--ant-font-size)} -.station-ui-modal .el-dialog{padding:var(--ant-padding-lg);border-radius:var(--ant-border-radius-lg)} -.station-ui-modal .el-dialog__title{font-size:var(--ant-font-size-heading-4);font-weight:600} -.station-ui-modal .el-dialog__body{font-size:var(--ant-font-size);color:var(--ant-color-text-base)} +.station-ui-modal.modal,.station-ui-modal.dlg-box{display:block;position:relative;inset:auto;margin-inline:auto;width:var(--el-dialog-width,480px);padding:var(--ant-padding-lg);max-width:calc(100vw - 32px);max-height:none;height:auto;background:var(--ant-color-bg-container);border:0;border-radius:var(--ant-border-radius);box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);overflow:visible;z-index:auto;color:var(--ant-color-text-base);font-size:var(--ant-font-size)} +.station-ui-modal .el-dialog__header{padding:0;margin-bottom:8px} +.station-ui-modal .el-dialog__headerbtn{top:13px;right:13px;width:32px;height:32px} +.station-ui-modal .el-dialog__headerbtn .el-dialog__close{font-size:16px;color:color-mix(in srgb,var(--ant-color-text-base) 45%,transparent)} +.station-ui-modal .el-dialog__title{font-size:22px;font-weight:600;line-height:1.4454;color:color-mix(in srgb,var(--ant-color-text-base) 88%,transparent)} +.station-ui-modal .el-dialog__body{padding:0;font-size:var(--ant-font-size);color:var(--ant-color-text-base)} +.station-ui-modal.dlg-box .el-input__inner{font-size:var(--ant-font-size)} .station-ui-modal .modal-body{padding:0;max-height:70vh;overflow:auto} .station-ui-modal .el-dialog__footer{margin-top:var(--ant-padding-lg)} .station-ui-modal .station-modal-actions .el-button{margin:0}