style(project-apply): 统一弹窗和独立表单底栏按钮风格
- 统一「保存+提交+返回」按钮的视觉层级和排序 - 按次要(默认)、中间(primary plain)、主操作(primary)三档区分按钮样式 - 调整按钮顺序为「辅助→返回/取消→保存草稿→提交」,主操作始终最右 - 修改project-apply、invoice-receipt-form、invoice-application-form三个页面的按钮实现 - 在 MEMORY.md 中新增底栏按钮统一规则说明 - 保留已合规页面按钮风格,避免重复修改
This commit is contained in:
@@ -120,3 +120,29 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important)
|
||||
- `src/views/business/project-apply.vue` 清理两处与全局冲突且不生效的局部表头样式:
|
||||
删除 `background: #f5f7fa; color: #303133;`,保留 `font-weight: 600`,
|
||||
选择器改为 `:deep(.el-table__header th .cell)`。
|
||||
|
||||
## 弹窗 / 独立表单页底栏「保存+提交+返回」按钮统一风格
|
||||
|
||||
**问题**: 主人截图 `business/project-apply/form?mode=add` 页面底部 `[保存][提交][返回]` 三个按钮,
|
||||
- 保存 + 提交 都是 `type="primary"` 蓝实心,视觉层级无区分。
|
||||
- 排序「主→主→次」,主操作不靠右,与全站其它页面(business-crud-page 等)已用的「次→中→主」不一致。
|
||||
|
||||
**修复**: 统一定 3 档层级 + 「次→中→主」排序。
|
||||
| 语义 | 写法 |
|
||||
| --- | --- |
|
||||
| 次要(返回/取消) | 默认(无 type)灰描边 |
|
||||
| 中间步骤(保存草稿) | `type="primary" plain` 蓝描边 |
|
||||
| 主操作(提交) | `type="primary"` 蓝实心 |
|
||||
|
||||
排序模板:`[可选辅助(如同步)][返回/取消][保存草稿][提交]`,主操作永远最右。
|
||||
|
||||
**改动文件**:
|
||||
- `business/project-apply.vue:617-651` — 主 footer + 变更 footer 都重排,`保存` 加 plain。
|
||||
- `payment/invoice-receipt-form.vue:242-252` — 保存加 plain,返回挪到保存前面。
|
||||
- `payment/invoice-application-form.vue:419-429` — 同上。
|
||||
|
||||
**未改动(已合规)**:
|
||||
- `settlement/components/pre-settlement-editor.vue` — 默认已是「默认保存 + primary 提交」。
|
||||
- `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。
|
||||
|
||||
**沉淀**: `MEMORY.md` 新增「弹窗 / 独立表单页底栏按钮统一规则」一节,作为新页面 footer 写法标准。
|
||||
|
||||
Reference in New Issue
Block a user