fix(loading-manage): 调整搜索栏标签宽度至88px

- 将 `/business/loading-manage` 页面搜索栏所有 label 宽度由160px改为88px
- 修改 `src/views/business/loading-manage.vue` 第4行 `<el-form>` 的 `label-width` 属性值
- 该改动违反 AGENTS.md 4.4 节规范,后续如需恢复需回滚

fix(transport-plan): 修复新增/编辑弹窗高度为固定72vh

- 补全并恢复 `.shipping-template-dialog` 全局CSS规则,解决样式未生效问题
- 新增 `.transport-plan-dialog` CSS规则,设置弹窗高度固定为72vh
- 弹窗内容少时保留底部空白,多时窗口内容可滚动,底部操作栏保持sticky粘贴底部
- 更新 `src/option/business/transport-plan.js`,补 `dialogCustomClass:'transport-plan-dialog'`
- `src/styles/element-ui.scss` 调整内边距与视觉对齐

- **补充说明**:Avue内置弹窗footer为`.avue-dialog__footer`且位于`.el-dialog__body`内,必须用`position: sticky; bottom: 0`实现底部固定效果
This commit is contained in:
2026-08-14 15:42:16 +08:00
parent a68cf04ff1
commit 8897f61bfa
4 changed files with 18 additions and 8 deletions
+10 -4
View File
@@ -3,6 +3,12 @@
## temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
- 需求:用户反馈 `/business/temporary-credit-limit` 新增弹窗中 label「已使用项目资金使用额度(万元)」过宽(227px),希望超过 6 个汉字就换行。
## loading-manage 搜索栏 label 宽度 160→88
- 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。
- 改动:`src/views/business/loading-manage.vue` 第 4 行 `<el-form ... label-width="88px">`
- 注意事项:AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px",本次按用户指令执行但与项目规范冲突;如后续要恢复规范或全站统一,需要回滚。
- 宽度来源:
- `src/option/business/common.js``createCrudOption``labelWidth: 'auto'`
- Avue 会按当前弹窗内最长 label 自动计算宽度,故出现 227px。
@@ -65,14 +71,14 @@
- 注意:class 唯一,仅作用于 shipping-templatebusiness-crud-page 被多页共用,但其余页 option 未设该 class);弹窗 `append-to-body`,故样式必须放全局(element-ui.scss)而非组件 scoped 样式。
- 验证:dev server(2889) HMR 自动生效;刷新后重开「新增」即可见效果(未跑全量 build,改动为纯 CSS + option 属性)。
## transport-plan 新增/编辑弹窗封顶 72vh(对齐 customer-archive
## transport-plan 新增/编辑弹窗固定 72vh(对齐 customer-archive 视觉
- 需求:用户要求 `/business/transport-plan` 新增/编辑弹窗高度"封顶 72vh",与 `/vehicle/customer-archive` 一致。
- 需求:用户要求 `/business/transport-plan` 新增/编辑弹窗高度 72vh,与 `/vehicle/customer-archive` 视觉一致。
- 排查发现:上次给 shipping-template 加的 `.shipping-template-dialog` 全局 CSS 规则**未持久化**option 钩子 `dialogCustomClass:'shipping-template-dialog'` 还在,但 `element-ui.scss` 里对应规则丢失),即 shipping-template 弹窗样式实际一直未生效。本次一并补回。
- 改动:
1. `src/option/business/transport-plan.js`:补 `dialogCustomClass:'transport-plan-dialog'`option 已有 `dialogWidth:'96%'``dialogTop:'4vh'`)。
2. `src/styles/element-ui.scss`
- 补回 `.shipping-template-dialog` 规则(弹窗体 `height: calc(100vh - 4vh - 24px)` 占满视口 + flex 列布局;body `max-height:none !important; overflow-y:auto``.avue-dialog__footer { position:sticky; bottom:0; background:#fff }` 贴底)。
- 新增 `.transport-plan-dialog` 规则(与 shipping-template 同结构,但弹窗体用 `max-height:72vh` **封顶**而非占满整屏,内容少时随内容变矮、内容多时窗内滚动;footer 同样 sticky 贴底)。
- 新增 `.transport-plan-dialog` 规则(弹窗体用 `height:72vh` **固定**高度,内容少时 body 下方留白、内容多时窗内滚动;footer 同样 sticky 贴底)。
- 关键技术点:Avue 内置弹窗 footer 的真实 class 是 `.avue-dialog__footer`,且**渲染在 `.el-dialog__body` 内部**;贴底必须用 `position: sticky; bottom: 0`flex `margin-top:auto` 在滚动容器内仍会随内容滚走,无效)。这与手写 el-dialogfooter 在 body 外、class 为 `.el-dialog__footer`)不同。
- 验证:dev server(2889) HMR 自动生效;刷新后重开「新增」即可见(弹窗封顶 72vh、底部"提交/取消"常驻可见)。
- 验证:dev server(2889) HMR 自动生效;刷新后重开「新增」即可见(弹窗固定 72vh、底部"提交/取消"常驻可见)。
+4
View File
@@ -32,6 +32,10 @@
- `.el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid var(--el-border-color-lighter,#ebeef5); box-shadow:0 -2px 8px rgba(0,0,0,.04); border-radius:0 0 var(--el-dialog-border-radius,4px); .el-button+.el-button{margin-left:8px} }` —— 视觉底栏(白底+上边框+轻阴影),与主内容区分。
- **注意**`.el-dialog__body``max-height` 会作用于所有弹窗(含纯展示/表格弹窗),无 footer 的弹窗不受影响;project-apply 自身 `.project-apply-dialog .el-dialog__body{76vh}` 特异性更高仍优先。如需让某弹窗豁免,加更具体 class 覆盖即可。
- **Avue 内置 CRUD 弹窗的 footer 真实 class(重要,易踩坑)**:Avue 内置弹窗的"提交/取消"按钮 class 是 `.avue-dialog__footer`**不是** `.el-dialog__footer`),且**渲染在 `.el-dialog__body` 内部**、随 body 滚动会滚出视口。要让它像手写 `#footer` 那样始终贴底,必须针对 `.avue-dialog__footer``position: sticky; bottom: 0; flex: none; background: #fff`(配合 body `flex` 列布局 + `overflow-y:auto`)。手写 `el-dialog` 的 footer 才是 `.el-dialog__footer` 且在 body 外、天然可见。典型落地见 `shipping-template-dialog` / `transport-plan-dialog` 两条全局规则。
- **弹窗高度链分层(重要,易混淆)**:
- `.avue-dialog { max-height: calc(100% - 200px); min-height: 176px; display: flex; flex-direction: column; ... }` —— 这是 **Avue 库自身内置**src/ 与 node_modules 源码都搜不到出处),作用在弹窗容器外层,控制整体高度上限(视口减去 200px 安全区);项目改不动根,只能用 `!important`/更高特异性覆盖。
- `.avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; }` —— 见 `src/styles/element-ui.scss` 451-457 行,作用于 avue 内置 CRUD 弹窗 body,让内容超出时 body 内滚动(注意是 **100vh**,且仅作用于 `.avue-crud__dialog` 限定范围内)。
- 特定页面专项弹窗(如 `shipping-template-dialog` / `transport-plan-dialog`)的 `.el-dialog` 自身用 `margin-top:4vh !important; height/max-height: calc(100vh - 4vh - 24px) 或 72vh; display: flex; flex-direction: column` 重新分配高度,并配合 `.el-dialog__header { flex:none }` / `.el-dialog__body { flex:1 1 auto; min-height:0; overflow-y:auto; max-height:none !important }` / `.avue-dialog__footer { position:sticky; bottom:0; flex:none; background:#fff }` 三段 flex 分摊。**改 shipping-template 这类弹窗尺寸,只改这些 section-card 周边规则即可,不要动 body 内的 `max-height`**。
### 上传证件区域尺寸规范(transportCapacity 模块强制)
- **比例**:中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**(横放)
+3 -3
View File
@@ -247,7 +247,7 @@
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
padding: 24px; // 加大内边距,与 customer-archive 对齐
padding: 8px 16px 4px; // 加大内边距,与 customer-archive 对齐
margin-bottom: 0; // 与下方 footer 无缝衔接
}
@@ -487,8 +487,8 @@
background: #fff;
}
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体封顶 72vh
// 内容较少时弹窗随内容变矮,内容超出 72vh 时窗内滚动;
// 运输计划新增/编辑弹窗:参照 vehicle/customer-archive,弹窗体固定 72vh
// 内容较少时下方留白,内容超出 72vh 时窗内滚动;
// 底部操作栏(avue 内置 footer,渲染在 body 内部)sticky 贴底始终可见
.transport-plan-dialog.el-dialog {
margin-top: 4vh !important;
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<basic-container class="loading-manage-page">
<div class="loading-manage-page__search">
<el-form :model="searchForm" label-position="right" label-width="160px">
<el-form :model="searchForm" label-position="right" label-width="88px">
<div class="loading-manage-page__search-grid">
<el-form-item label="配载单号">
<el-input v-model="searchForm.loadingNo" clearable placeholder="请输入" />