style(footer): 统一多页面底栏按钮样式与排序规则
- 规范 master-order-editor.vue 底栏按钮类型及排序,按钮层级清晰 - 调整 payment-application-form.vue 底栏按钮样式为右对齐并浮动底部 - 统一 invoice-application/receipt-form 页底栏按钮顺序,返回按钮置首 - 所有相关表单页按钮底栏统一采用 sticky 浮动,背景及阴影样式一致 - 修复多个页面按钮缺少 plain 样式导致视觉层级不明 - 按钮间距统一为 12px,底栏内边距调整为 12px 24px - 调整多个表单页面按钮组从居中对齐改为右对齐,提升操作一致性 - 保留弹窗 footer 按钮布局,不影响各页面独立弹窗交互体验
This commit is contained in:
@@ -230,3 +230,63 @@ Avue-form 内置按钮默认在中间,自定义内容分两侧插槽:
|
||||
**未触发场景**:
|
||||
- transport-plan / waybill / loading-manage 等其它走 business-crud-page 但未声明 `standalone-form-page` 的页面,
|
||||
本次未改。需要时可按相同模式补 slot。
|
||||
|
||||
## master-order 编辑页底栏按钮统一
|
||||
|
||||
**问题**: `/business/master-order?mode=editor`(多联总单编辑/新增页)底部按钮没统一。
|
||||
|
||||
**根因**: 编辑页是 `master-order.vue` 的 `mode==='editor'` 模板里内嵌 `<master-order-editor>` 组件,
|
||||
主 footer 在 `src/views/business/components/master-order-editor.vue:534-539`。
|
||||
|
||||
**原状**:
|
||||
```
|
||||
[返回 default] [暂存 default] [确认创建 primary] [创建并调度 primary]
|
||||
```
|
||||
- 暂存 无 type,与返回同为灰描边,缺层级
|
||||
- 确认创建 / 创建并调度 两个都 primary 实心,无视觉优先级
|
||||
- footer 仅 `flex-end` + `padding:16px 0`,不浮动
|
||||
|
||||
**修复** (`master-order-editor.vue`):
|
||||
- 按钮改:`[返回 default] [暂存 primary plain] [确认创建 primary plain] [创建并调度 primary]`
|
||||
严格按「返回第一个、中间浅蓝 plain、最后深蓝实心」规则,仅最右一个深蓝。
|
||||
- footer 样式改浮动底部:`position: sticky; bottom:0; z-index:10; background:#fff;
|
||||
border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
|
||||
|
||||
**未动**: 页内各 el-dialog 的 footer(线路/地图/常用货物/货物导入等)已是 `[关闭 default][确定 primary]`,
|
||||
符合「次→主」规则,无需调整。
|
||||
|
||||
## payment-application 表单页底栏按钮统一
|
||||
|
||||
**问题**: `/payment/payment-application/form?mode=add`(付款申请表单页)底部按钮没统一。
|
||||
|
||||
**根因**: 独立表单页 `src/views/payment/payment-application-form.vue` 的 `.payment-form-page__actions` footer(330 行)。
|
||||
|
||||
**原状**:
|
||||
```
|
||||
justify-content: center(居中)
|
||||
[返回 default] [保存 default(缺 plain)] [提交 primary]
|
||||
```
|
||||
- 保存 无 type,与返回同为灰描边,缺层级
|
||||
- footer 居中且不浮动
|
||||
|
||||
**修复** (`payment-application-form.vue`):
|
||||
- 按钮:`[返回 default] [保存 primary plain] [提交 primary]`,仅最后深蓝。
|
||||
- footer 样式:`justify-content: center` → `flex-end`;加 `position: sticky; bottom:0; z-index:10;
|
||||
background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
|
||||
|
||||
**未动**: `payment-application.vue`(list 表格页,无独立 footer);`invoice-application-form.vue` / `invoice-receipt-form.vue` 上一轮已改。
|
||||
|
||||
## invoice-application / invoice-receipt 表单页底栏按钮统一
|
||||
|
||||
**问题**: `/payment/invoice-application/form?mode=add` 底部按钮没统一(用户反馈)。排查发现同族 `invoice-receipt-form.vue` 完全同款问题,一并修了。
|
||||
|
||||
**根因**: 两个发票表单页 footer 都是 `[同步 plain][返回 default][保存 plain][提交 primary]` + `justify-content: center`(居中),且未浮动。
|
||||
- 同步 在 返回 之前,违反「返回在第一个」
|
||||
- footer 居中,不靠右、不浮动
|
||||
|
||||
**修复**(`invoice-application-form.vue` 419-433 + 980;`invoice-receipt-form.vue` 242-256 + 777):
|
||||
- 按钮重排为 `[返回 default][同步 plain][保存 plain][提交 primary]`,返回置首、最后仅提交深蓝。
|
||||
- footer 样式:`justify-content: center` → `flex-end`;加 `position: sticky; bottom:0; z-index:10;
|
||||
background:#fff; border-top:1px solid #eff1f7; box-shadow:0 -2px 8px rgba(0,0,0,.06); gap:12px; padding:12px 24px`。
|
||||
|
||||
**注意**: 之前首轮曾把这两个页「保存加 plain、返回挪到保存前面」,但当时没动 同步 的位置、没改居中/浮动,所以用户仍觉得没统一。本次彻底对齐。
|
||||
|
||||
Reference in New Issue
Block a user