style(project-apply): 统一弹窗和独立表单底栏按钮风格

- 统一「保存+提交+返回」按钮的视觉层级和排序
- 按次要(默认)、中间(primary plain)、主操作(primary)三档区分按钮样式
- 调整按钮顺序为「辅助→返回/取消→保存草稿→提交」,主操作始终最右
- 修改project-apply、invoice-receipt-form、invoice-application-form三个页面的按钮实现
- 在 MEMORY.md 中新增底栏按钮统一规则说明
- 保留已合规页面按钮风格,避免重复修改
This commit is contained in:
2026-08-26 18:05:58 +08:00
parent ae45e88df9
commit bfb8659cd8
5 changed files with 60 additions and 12 deletions
+26
View File
@@ -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 写法标准。
+13
View File
@@ -36,6 +36,19 @@
- 全站"状态语义"的 `el-tag``class="status-text"`,转为普通文字,不带颜色/背景/边框/圆点。
- 实现:`element-ui.scss` 末尾 `.el-tag.status-text { ... }`
### 弹窗 / 独立表单页底栏按钮统一规则
- **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。
- 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]`
- **颜色层级 3 档**
| 语义 | type | 备注 |
| --- | --- | --- |
| 次要(返回 / 取消) | 不写 type(默认) | 灰描边 |
| 中间步骤(保存草稿 / 按匹配结果更新等) | `type="primary" plain` | 蓝描边 |
| 主操作(提交 / 完成对账 / 确认) | `type="primary"` | 蓝实心 |
- **禁区**:保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心按钮无视觉层级。
- **生效页面**`business/project-apply.vue`footer + 变更 footer)、`payment/invoice-receipt-form.vue``payment/invoice-application-form.vue`
- **已合规不需要改**`settlement/components/pre-settlement-editor.vue`(保存 default + 提交 primary)、`settlement/components/transport-reconciliation-editor.vue`(两个 plain 中间步骤 + 完成对账 实心)。
## 关键文件
- `src/components/section-card/main.vue`
- `src/styles/element-ui.scss`