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
+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`