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、底部"提交/取消"常驻可见)。