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
+25 -8
View File
@@ -40,6 +40,16 @@
- **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。
- 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]`
- **容器布局**`display:flex; justify-content:flex-end; gap:12px;`。弹窗关闭按钮继承 Element Plus 自带 `.el-dialog__footer` 全局规则(见上条),独立页用 `.archive-form__footer``.archive-page-form & { position:fixed; right:0; left:230px; bottom:0; z-index:10; margin:0; padding:12px 24px; border-top:1px solid #eff1f7; background:#fff; box-shadow:0 -2px 8px rgba(0,0,0,.06); }`
- **⚠️ 浮动底部必须用 `position:fixed`,不能用 `position:sticky`**:本项目布局 `.app-main` / `.basic-container` 祖先带 `overflow:hidden`,会导致 `sticky` 永不触发(footer 不吸底)。固定写法照搬 customer-archive
```scss
.xxx-actions {
position: fixed; right: 0; left: 230px; bottom: 0; margin: 0; z-index: 10;
/* flex-end + padding + border-top + 白底 + 上投影 */
}
:global(.avue--collapse .xxx-actions) { left: 60px; } /* 侧栏折叠 */
:global(.avue-layout--horizontal .xxx-actions) { left: 0; } /* 横向布局 */
```
注意 `:global()` 要把「整个选择器」包进去(customer-archive 写法),不要只包前缀,否则 scoped 会在中间选择器上追加 data 属性导致不匹配。
- **颜色层级 3 档**
| 语义 | type | 备注 |
| --- | --- | --- |
@@ -49,16 +59,23 @@
- **禁区**
- 保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心无视觉层级。
- 主操作禁止用 `type="success"`(绿)。全站统一深蓝实心。
- **生效页面**
- **生效页面(已按规则统一)**
- `business/project-apply.vue`footer + 变更 footer
- `payment/invoice-receipt-form.vue``payment/invoice-application-form.vue`
- `vehicle/customer-archive.vue` 全部 5 处 footer`archive-form__footer` 主表单页 + `contact-dialog`/`receipt-dialog`/`invoice-dialog` 子弹窗 + `score-detail-dialog` 含总分合计)
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页(`#menu-form-before` slot 新增 `关闭` 按钮,紧跟运费合计、置于保存草稿之前;shipping-template 模式验证通过)
- `business/components/master-order-editor.vue``<footer>`(返回 default + 暂存/确认创建 plain + 创建并调度 primaryfooter 用 `position:sticky; bottom:0` 浮动底部
- `payment/payment-application-form.vue` `.payment-form-page__actions`(返回 default + 保存 plain + 提交 primaryfooter `justify-content:flex-end` + `position:sticky` 浮动底部)
- `payment/invoice-application-form.vue` `.invoice-form-page__actions``[返回][同步][保存][提交]`,返回置首 + 提交深蓝;footer 右对齐浮动
- `payment/invoice-receipt-form.vue` `.receipt-form-page__actions`(同上,与发票申请同款结构
- **已合规未动**`settlement/components/pre-settlement-editor.vue``settlement/components/transport-reconciliation-editor.vue``business/temporary-credit-limit.vue`
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页(`#menu-form-before` slot 新增 `关闭` 按钮,shipping-template 模式验证通过)
- `business/components/master-order-editor.vue` 主 `<footer>`(返回 default + 暂存/确认创建 plain + 创建并调度 primary`position:fixed` 浮动,含 `avue--collapse`/`avue-layout--horizontal` 左偏移
- **payment 模块**表单页(`__actions` 均 `flex-end` + `position:fixed` 浮动,含 `avue--collapse`/`avue-layout--horizontal` 左偏移):
- `payment-application-form.vue``[返回][保存 plain][提交]`
- `invoice-application-form.vue` / `invoice-receipt-form.vue``[返回][同步 plain][保存 plain][提交]`
- `bill-ledger-form.vue``[取消][确认 primary]`
- `bill-payment-form.vue``[取消][保存 plain][提交]`
- `receipt-flow-form.vue``[取消][确认 primary]`
- `receipt-claim-record-form.vue`(单「关闭」按钮,居中→右对齐浮动)
- **settlement 模块**
- `settlement/components/pre-settlement-editor.vue`(弹窗 + pageMode 两处 footer:保存加 `plain``&__page-actions` 加 `position:fixed` 浮动,含 `avue--collapse`/`avue-layout--horizontal` 左偏移)
- `settlement/components/formal-settlement-editor.vue``.formal-editor__page-actions` 加 `position:fixed` 浮动,含 `avue--collapse`/`avue-layout--horizontal` 左偏移;按钮已 `[取消][提交]` 合规)
- `settlement/receivable-payable-detail.vue`(生成费用弹窗「上一步」改 `plain`
- **已合规未动**`settlement/components/transport-reconciliation-editor.vue``[取消][保存草稿 plain][按匹配结果更新账单 plain][完成对账 primary]`)、`settlement/components/settlement-adjustment-editor.vue`(弹窗 `[取消][保存 primary]`)、`business/temporary-credit-limit.vue`。
- **Avue-form footer 结构注意**`#menu-form-before` slot 内容在 Avue 内置按钮之**左**;`#menu-form` slot 在 Avue 内置按钮之**右**。要实现 `[次要][Avue 主操作]` 顺序,把次要按钮放进 `#menu-form-before`,主操作保留 Avue 内置即可。
- **复杂 footer 例外**:当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时,块用 `flex:1` 推自己到最左,按钮组按上述规则排在右半边(参考 `score-detail-dialog`)。