fix(ui): 统一 payment 和 settlement 模块浮动底栏为 fixed 定位

- payment 模块所有表单页底栏按钮顺序及布局全量对齐,取消居中改为右对齐浮动
- settlement 模块弹窗及独立页 footer 添加 sticky 浮动,主操作按钮样式调整为 plain
- 彻底修复浮动底栏不吸底问题,所有相关 footer 由 position: sticky 改为 position: fixed
- 统一 fixed 底栏样式模板,包含左偏移支持侧栏折叠和横向布局切换
- 更新项目文档,明确浮动底栏必须用 fixed 定位,避免 overflow:hidden 祖先导致 sticky 失效
- 清理所有残留 sticky 样式,确保底栏始终固定在视口底部,提升用户体验
This commit is contained in:
2026-08-26 18:49:13 +08:00
parent 84c46b9312
commit 7f70052afd
12 changed files with 176 additions and 18 deletions
+51
View File
@@ -290,3 +290,54 @@ justify-content: center(居中)
background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
**注意**: 之前首轮曾把这两个页「保存加 plain、返回挪到保存前面」,但当时没动 同步 的位置、没改居中/浮动,所以用户仍觉得没统一。本次彻底对齐。
## payment + settlement 模块底栏按钮全量统一
**背景**: 用户要求检查 payment 模块和 settlement 模块下所有页面底栏按钮是否统一。
### payment 模块(表单页 footer
| 文件 | 原状 | 修复 |
| --- | --- | --- |
| `payment/bill-ledger-form.vue` | `[确认 primary][取消 default]` + 居中 | `[取消 default][确认 primary]`footer flex-end + sticky 浮动 |
| `payment/bill-payment-form.vue` | `[保存 primary][提交 primary][取消 default]` | `[取消 default][保存 plain][提交 primary]`footer 加 sticky 浮动(已 flex-end |
| `payment/receipt-flow-form.vue` | `[确认 primary][取消 default]` + 居中(class 误用 `receipt-claim-form-page__actions` | `[取消 default][确认 primary]`footer flex-end + sticky 浮动 |
| `payment/receipt-claim-record-form.vue` | 单「关闭」按钮居中 | footer flex-end + sticky 浮动 |
| (此前已改)invoice/payment-application 各表单页 | — | 已合规 |
### settlement 模块
| 文件 | 原状 | 修复 |
| --- | --- | --- |
| `settlement/components/pre-settlement-editor.vue` | 两处 footer `[取消][保存 default][提交]`(弹窗 + pageMode | 保存加 `type="primary" plain``&__page-actions` 加 sticky 浮动 |
| `settlement/components/formal-settlement-editor.vue` | footer 已 `[取消][提交]` 合规,独立页未浮动 | `.formal-editor__page-actions` 加 sticky 浮动 |
| `settlement/receivable-payable-detail.vue` | 生成费用弹窗 `[取消][上一步 primary][提交 primary]` | 上一步改 `type="primary" plain` |
| (已合规未动)`transport-reconciliation-editor.vue` | `[取消][保存草稿 plain][按匹配结果更新账单 plain][完成对账 primary]` | 已符合次→主 |
| (已合规未动)`settlement-adjustment-editor.vue` | 弹窗 `[取消][保存 primary]` | 合规 |
**注意**: settlement 的 `*_editor.vue` 多为「弹窗(!pageMode) + 独立页(pageMode)」双模式;弹窗 footer 走 `.el-dialog__footer` 全局规则(已右对齐/浮动),仅 pageMode 的 `.xxx__page-actions` 需手动加 sticky。
**注意**: payment 表单页剩余的 `justify-content: center` 全在 `__links` 链接行(非 action footer),属正常布局,未改。
## 浮动底栏根本修复:sticky → fixed
**问题**: 用户反馈 `/settlement/formal-settlement/form?mode=add`「有些页面还没能固定在底部」。
**根因(关键)**: 之前给 9 个独立表单页 footer 写的都是 `position: sticky; bottom:0`,但本项目布局
`.app-main` / `.basic-container` 祖先带 `overflow:hidden`,sticky 的滚动容器判断失效 → footer 永不吸底。
customer-archive 当初就是因此改用 `position:fixed`,且要带侧栏左偏移。
**修复(9 个文件全部 sticky→fixed**:
- `business/components/master-order-editor.vue` `<footer>`2050 行,含 `:global(.avue--collapse footer)`/`horizontal`
- `payment/invoice-receipt-form.vue` / `bill-ledger-form.vue` / `receipt-claim-record-form.vue` /
`payment-application-form.vue` / `bill-payment-form.vue` / `invoice-application-form.vue` / `receipt-flow-form.vue`
各 `__actions`(均加 fixed + `:global(.avue--collapse .xxx)`/`horizontal` 左偏移 60px/0
- `settlement/components/pre-settlement-editor.vue` `&__page-actions`nested,全局覆盖放 style 末尾)
- `settlement/components/formal-settlement-editor.vue` `.formal-editor__page-actions`(上一轮已改 fixed,本轮复核确认)
**统一 fixed 模板**:
```scss
.xxx { position: fixed; right:0; left:230px; bottom:0; margin:0; z-index:10; flex-end + padding + border-top + 白底 + 上投影 }
:global(.avue--collapse .xxx) { left:60px; }
:global(.avue-layout--horizontal .xxx) { left:0; }
```
注意 `:global()` 要包整个选择器(customer-archive 写法),只包前缀会让 scoped 在中间选择器追加 data 属性而不匹配。
**验证**: 全仓 `position: sticky` 已清零(grep 无残留)。