From b3510cf2336a747ca5815907804741cb5457502b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 14 Aug 2026 15:49:54 +0800 Subject: [PATCH] =?UTF-8?q?style(shipping-template):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=8F=91=E8=B4=A7=E6=A8=A1=E6=9D=BF=E5=BC=B9=E7=AA=97=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=E6=8E=A5=E8=BF=91=E5=85=A8=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 修改 shipping-template 弹窗样式，取消库内置 200px 安全区限制 - 将弹窗上下边距改为 20px，弹窗高度和最大高度设为视口高度减 40px - 采用 flex 布局保持底部操作栏 sticky 效果及视觉居中 - 同步调整运输计划弹窗样式，保持一致的弹窗高度策略 - 未改动 Avue 库全局 `.avue-dialog` 样式，仅覆盖 shipping-template 和 transport-plan 独立样式规则 --- .workbuddy/memory/2026-08-14.md | 13 +++++++++++++ src/styles/element-ui.scss | 24 ++++++++++++++---------- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/.workbuddy/memory/2026-08-14.md b/.workbuddy/memory/2026-08-14.md index 80d5bc4..f9cb19d 100644 --- a/.workbuddy/memory/2026-08-14.md +++ b/.workbuddy/memory/2026-08-14.md @@ -9,6 +9,19 @@ - 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。 - 改动：`src/views/business/loading-manage.vue` 第 4 行 ``。 - 注意事项：AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px"，本次按用户指令执行但与项目规范冲突；如后续要恢复规范或全站统一，需要回滚。 + +## shipping-template 弹窗高度改为接近全屏 + +- 用户要求把 `/business/shipping-template` 弹窗高度调到接近全屏（硬编码 200px 安全区太大）。 +- 关键定位：Avue 库内置 `.avue-dialog { max-height: calc(100% - 200px) }` 加在 `el-dialog` 根元素（avue lib `packages/core/components/dialog-form/index4.js:14` `class:"avue-dialog"`）；shipping-template 的 `dialogCustomClass:'shipping-template-dialog'` 合并到同一元素。项目样式（common.scss）在 main.js:24 晚于 Avue css（main.js:12）加载，可覆盖。 +- 改动：`src/styles/element-ui.scss` 的 `.shipping-template-dialog.el-dialog` 规则，由 `margin-top:4vh; margin-bottom:0; height:calc(100vh - 4vh - 24px)` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，用 max-height + !important 压过库内置上限。 +- 注意：仅改 shipping-template 专属规则，未动库内置 `.avue-dialog` 根，也未影响其他弹窗。body/footer 的 flex 分摊规则（474-488 行）保持不变。 + +## transport-plan 弹窗高度也改为接近全屏 + +- 用户要求 `/business/transport-plan` 新增/编辑弹窗同样改为接近全屏（原来固定 max-height: 72vh，内容少时下方留白）。 +- 改动：`src/styles/element-ui.scss` 的 `.transport-plan-dialog.el-dialog` 规则，由 `margin-top:4vh; max-height:72vh` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，与 shipping-template 弹窗完全对齐（压过库内置 `.avue-dialog` 的 max-height: calc(100% - 200px)）。 +- 已确认 `src/option/business/transport-plan.js:607` 有 `dialogCustomClass: 'transport-plan-dialog'`，CSS 生效。body/footer flex 分摊规则（504-520 行）保持不变。 - 宽度来源： - `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: 'auto'`； - Avue 会按当前弹窗内最长 label 自动计算宽度，故出现 227px。 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index a2d77eb..6177876 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -457,12 +457,14 @@ } // 发货模板新增/编辑弹窗：参照 vehicle/customer-archive 的视觉 -// 弹窗体占满视口高度（顶部 4vh、底部留白），内容较少时也保持高大、视觉居中； -// 解除全局 80vh 上限并由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见 +// 弹窗体接近全屏（上下各留 20px 边距），内容较少时也保持高大、视觉居中； +// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限， +// 改由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见 .shipping-template-dialog.el-dialog { - margin-top: 4vh !important; - margin-bottom: 0 !important; - height: calc(100vh - 4vh - 24px); + margin-top: 20px !important; + margin-bottom: 20px !important; + height: calc(100vh - 40px); + max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; } @@ -487,12 +489,14 @@ background: #fff; } -// 运输计划新增/编辑弹窗：参照 vehicle/customer-archive，弹窗体固定 72vh， -// 内容较少时下方留白，内容超出 72vh 时窗内滚动； -// 底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见 +// 运输计划新增/编辑弹窗：参照 vehicle/customer-archive，弹窗体接近全屏（上下各留 20px 边距）； +// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限， +// 改由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见 .transport-plan-dialog.el-dialog { - margin-top: 4vh !important; - max-height: 72vh; + margin-top: 20px !important; + margin-bottom: 20px !important; + height: calc(100vh - 40px); + max-height: calc(100vh - 40px) !important; display: flex; flex-direction: column; }