style(ui): 统一弹窗及独立表单页按钮文案和样式调整

- 将所有弹窗及独立表单页中的“返回”按钮文案统一改为“取消”
- 独立表单页footer的Avue提交与清空按钮去除内置图标,仅保留文字显示
- 更新相关页面和组件按钮文案,包括业务表单、支付表单、客户档案等
- 规范底部操作栏按钮顺序及样式,确保主次操作区分明显
- 修复部分组件页脚按钮文案,保持全站一致性
This commit is contained in:
2026-08-27 11:26:40 +08:00
parent 7f70052afd
commit 2acdcb08a9
12 changed files with 53 additions and 23 deletions
+22
View File
@@ -0,0 +1,22 @@
# 2026-08-27 工作日志
## 全站底部操作栏「返回」按钮统一改为「取消」
- 起因:用户访问 `/vehicle/customer-archive/form` 独立表单页,指出底部「返回」按钮应全站统一为「取消」。
- 改动文件(模板/逻辑中的「返回」→「取消」):
- `src/views/vehicle/customer-archive.vue`:主表单页 footer 逻辑 `readonly ? '关闭' : isArchivePage ? '返回' : '取消'``readonly ? '关闭' : '取消'`4 处子弹窗(contact/receipt/invoice/score`>返回</el-button>``>取消</el-button>`replace_all)。
- `src/views/payment/invoice-receipt-form.vue``payment-application-form.vue``payment/payment-application-form.vue``goBack` 返回按钮 →「取消」。
- `src/views/business/components/master-order-editor.vue``master-order-dispatch.vue``master-order-detail.vue``$emit('back')` 返回按钮 →「取消」。
- `src/views/business/components/business-crud-page.vue`:运输计划导入弹窗关闭按钮 →「取消」。
- `src/views/system/user.vue`:用户弹窗关闭按钮 →「取消」。
- `src/views/business/project-apply.vue`:独立表单页(isProjectFormPage`closeProjectForm` 返回按钮 ×2 →「取消」。
- 未改动:`src/lang/zh.js` 登录 i18n 段 `back: '返回'`(无 `$t('back')` 引用,属登录流程返回,非业务 footer 操作栏)。
- 规范固化:更新 MEMORY.md「弹窗 / 独立表单页底栏按钮统一规则」,明确全站底部操作栏「返回」统一为「取消」,仅只读查看 / 纯关闭场景保留「关闭」。
## 发货模板独立表单页(shipping-template/formfooter 缺「取消」+ 去图标
- 起因:用户访问 `/business/shipping-template/form?mode=add`,指出底部按钮缺「取消」且不需要图标(统一只要文字)。
- 该页极薄,仅 `<business-crud-page standalone-form-page>`footer 由 `business-crud-page.vue``PageAvueForm` 渲染。
- 改动(`src/views/business/components/business-crud-page.vue`):
- `#menu-form-before` 次要按钮 `关闭``取消`(条件 `isStandaloneFormPage && !showTransportPlanCreateActions`),影响 `/waybill-manage/form``/transport-plan/form``/shipping-template/form` 三处独立表单页。
- `#menu-form` 的运输计划创建模式次要按钮 `关闭``取消`
- 新增样式 `:global(.business-crud-form-page-dialog .avue-form__menu .el-icon){display:none}`Avue 的 `avue-form` 提交/清空按钮内置图标(`submitIcon:'el-icon-check'``emptyIcon:'el-icon-delete'`),且 Avue 源码用 `||` 兜底无法通过 option 去除,故用 CSS 在独立表单页容器内统一隐藏图标,仅保留文字,不影响其它弹窗。
- 规范固化:MEMORY.md「弹窗 / 独立表单页底栏按钮统一规则」补充「独立表单页 Avue 表单 footer 去图标(统一纯文字)」说明。
+8 -6
View File
@@ -38,7 +38,7 @@
### 弹窗 / 独立表单页底栏按钮统一规则
- **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。
- 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]`
- 顺序模板:`[可选辅助工具(如同步/导入)][取消][保存草稿][提交/确认]`
- **容器布局**`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
@@ -53,7 +53,8 @@
- **颜色层级 3 档**
| 语义 | type | 备注 |
| --- | --- | --- |
| 次要(返回 / 取消 / 关闭) | 不写 type(默认) | 灰描边 |
| 次要(取消 / 关闭) | 不写 type(默认) | 灰描边 |
- **全站底部操作栏「返回」已统一改为「取消」**:独立表单页返回列表、弹窗关闭、主从编辑器返回等场景一律写「取消」;仅只读查看 / 纯关闭场景保留「关闭」。
| 中间步骤(保存草稿 / 按匹配结果更新) | `type="primary" plain` | 蓝描边 |
| 主操作(提交 / 完成对账 / 复评确认) | `type="primary"` | 蓝实心 |
- **禁区**
@@ -62,11 +63,11 @@
- **生效页面(已按规则统一)**:
- `business/project-apply.vue`footer + 变更 footer
- `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 + 创建并调度 primary`position:fixed` 浮动,含 `avue--collapse`/`avue-layout--horizontal` 左偏移)
- `business/components/business-crud-page.vue` 的 PageAvueForm 独立表单页(`#menu-form-before` slot 新增 `取消` 按钮,shipping-template 模式验证通过;影响 `/business/waybill-manage/form`、`/business/transport-plan/form`、`/business/shipping-template/form` 三处独立表单页
- `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][提交]`
- `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]`
@@ -77,6 +78,7 @@
- `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 内置即可。
- **Avue 表单 footer 按钮去图标(统一纯文字)**:Avue 的 `avue-form` 提交/清空按钮内置图标(`submitIcon: 'el-icon-check'`、`emptyIcon: 'el-icon-delete'`),且 Avue 源码用 `|| 'el-icon-xxx'` 兜底,无法通过 option 配置去掉。已在 `business-crud-page.vue` 样式里用 `:global(.business-crud-form-page-dialog .avue-form__menu .el-icon){display:none}` 统一隐藏,仅作用于独立表单页(PageAvueForm 容器),不影响其它弹窗。新增/编辑弹窗内的 Avue 表单若也要去图标,复用此选择器即可。
- **复杂 footer 例外**:当 footer 需要在按钮组左侧展示「总分合计 / 数量统计」等聚合信息时,块用 `flex:1` 推自己到最左,按钮组按上述规则排在右半边(参考 `score-detail-dialog`)。
## 关键文件