From c9f673342aea7486f0ed520e0419f67ed797db54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Thu, 27 Aug 2026 11:39:13 +0800 Subject: [PATCH] =?UTF-8?q?style(ui):=20=E7=BB=9F=E4=B8=80=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E6=93=8D=E4=BD=9C=E6=A0=8F=E6=8C=89=E9=92=AE=E9=97=B4?= =?UTF-8?q?=E8=B7=9D=EF=BC=8C=E5=8F=96=E6=B6=88=E6=89=80=E6=9C=89gap?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 移除各底部操作栏（footer/__actions/page-actions）内所有gap属性 - 按钮间距统一采用 Element Plus 全局默认的相邻按钮12px margin-left规则 - 修改 .el-dialog__footer 内.el-button间距由8px调整为12px，保持全站一致 - 确认 Avue 表单底部按钮无自带间距，去gap后间距由 Element Plus 提供 - 涉及模块覆盖 vehicle、payment、business、settlement，移除了相关组件样式中gap属性 - MEMORY.md规范更新，补充底栏按钮间距统一为无gap纯文字规则 --- .workbuddy/memory/2026-08-27.md | 8 ++++++++ .workbuddy/memory/MEMORY.md | 2 +- src/styles/element-ui.scss | 2 +- src/views/business/components/business-crud-page.vue | 1 - src/views/business/components/master-order-dispatch.vue | 4 ++-- src/views/business/components/master-order-editor.vue | 1 - src/views/business/project-apply.vue | 1 - src/views/payment/bill-ledger-form.vue | 1 - src/views/payment/bill-payment-form.vue | 1 - src/views/payment/invoice-application-form.vue | 1 - src/views/payment/invoice-receipt-form.vue | 1 - src/views/payment/payment-application-form.vue | 1 - src/views/payment/receipt-claim-record-form.vue | 1 - src/views/payment/receipt-flow-form.vue | 1 - .../settlement/components/formal-settlement-editor.vue | 1 - src/views/settlement/components/pre-settlement-editor.vue | 1 - src/views/settlement/receivable-payable-detail.vue | 1 - src/views/vehicle/customer-archive.vue | 1 - 18 files changed, 12 insertions(+), 18 deletions(-) diff --git a/.workbuddy/memory/2026-08-27.md b/.workbuddy/memory/2026-08-27.md index 6a96cec..223e37b 100644 --- a/.workbuddy/memory/2026-08-27.md +++ b/.workbuddy/memory/2026-08-27.md @@ -20,3 +20,11 @@ - `#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 去图标（统一纯文字）」说明。 + +## 底部操作栏按钮间距统一去 gap +- 起因：用户指出这些底部按钮间距不一致，要求统一，并把用了 `gap` 的全部去掉。 +- 方案：所有底部操作栏（footer / `__actions` / `page-actions`）**移除 `gap`**，间距统一回落到 Element Plus 全局默认的相邻按钮 `.el-button+.el-button{margin-left:12px}`（恒为 12px），不再散落 `gap:8/12/16px`。 +- 全局对齐：`.el-dialog__footer .el-button + .el-button` 由 `margin-left:8px` 改为 `12px`（`src/styles/element-ui.scss`），使弹窗 footer 也与之一致。 +- 已去 gap 的 footer 容器：`vehicle/customer-archive.vue`(`.archive-form__footer`)、`business/components/master-order-editor.vue`(`footer`)、`business/components/master-order-dispatch.vue`(`.segment-actions`/`.pending-actions`)、`business/project-apply.vue`(`.project-apply-dialog__footer`)、`business/components/business-crud-page.vue`(`.business-crud-form-page-dialog .avue-form__menu`)、payment 6 个表单页(`*__actions`)、`settlement/components/pre-settlement-editor.vue`(`&__page-actions`)、`settlement/components/formal-settlement-editor.vue`(`.formal-editor__page-actions`)、`settlement/receivable-payable-detail.vue`(`.settlement-detail-page__actions`)。 +- 风控：确认 Avue 的 `.avue-form__menu`/`.avue-dialog__footer` 自身不带按钮间距，去掉 gap 后由 EP 默认 12px margin 接管（不会贴死）。 +- 范围说明：本次聚焦近几轮在统一的模块（vehicle/payment/business/settlement）。若要把 loading-manage、contract-manage、transit 等其它模块的底部栏也纳入，需再处理。 diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md index e510036..ce2389b 100644 --- a/.workbuddy/memory/MEMORY.md +++ b/.workbuddy/memory/MEMORY.md @@ -39,7 +39,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); }`。 +- **容器布局（2026-08-27 改为「去 gap」）**：`display:flex; justify-content:flex-end;`（**不写 `gap`**）。按钮间距统一由 Element Plus 全局默认的相邻按钮 `.el-button+.el-button{margin-left:12px}` 提供，全站恒为 12px。原各 footer 写死的 `gap:8/12px` 已全部移除。`src/styles/element-ui.scss` 里 `.el-dialog__footer .el-button + .el-button` 也已从 `8px` 改 `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 .xxx-actions { diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 07724ed..e47a785 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -194,7 +194,7 @@ border-radius: 0 0 var(--el-dialog-border-radius, 4px); .el-button + .el-button { - margin-left: 8px; + margin-left: 12px; } } diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index d3d4bb4..0303bd9 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -15311,7 +15311,6 @@ export default { display: flex; align-items: center; justify-content: flex-end; - gap: 8px; min-height: 64px; box-sizing: border-box; padding: 12px 24px; diff --git a/src/views/business/components/master-order-dispatch.vue b/src/views/business/components/master-order-dispatch.vue index 2c766f9..a042586 100644 --- a/src/views/business/components/master-order-dispatch.vue +++ b/src/views/business/components/master-order-dispatch.vue @@ -705,7 +705,7 @@ export default { .freight-form { :deep(.freight-unit-select) { width: 92px; flex: 0 0 92px; min-width: 0; } } .carrier-type-form { margin-top: 16px; } .carrier-form { padding-top: 8px; } -.segment-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; } +.segment-actions { display: flex; justify-content: flex-end; padding-top: 4px; } .dispatch-bottom { position: fixed; z-index: 10; bottom: 0; left: $sidebar_width; width: calc(100% - #{$sidebar_width}); border-top: 1px solid #eff1f7; background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); } :global(.avue--collapse) .dispatch-bottom { left: $sidebar_collapse; width: calc(100% - #{$sidebar_collapse}); } :global(.avue-layout--horizontal) .dispatch-bottom { left: 0; width: 100%; } @@ -714,7 +714,7 @@ export default { .pending-summary, .pending-actions { display: flex; align-items: center; } .pending-summary { gap: 16px; } .pending-summary-text { color: #606266; font-weight: 400; } -.pending-actions { gap: 12px; margin-left: auto; } +.pending-actions { margin-left: auto; } .pending-list { max-height: min(420px, calc(100vh - 130px)); padding: 0 32px 16px; overflow: auto; h3 { margin: 14px 0 10px; font-size: 14px; } } .table-actions { display: flex; flex-wrap: wrap; gap: 8px; } @media screen and (max-width: 1200px) { .overview-content { grid-template-columns: 1fr; } .route-overview { justify-content: flex-start; } } diff --git a/src/views/business/components/master-order-editor.vue b/src/views/business/components/master-order-editor.vue index 049a170..79ef026 100644 --- a/src/views/business/components/master-order-editor.vue +++ b/src/views/business/components/master-order-editor.vue @@ -2050,7 +2050,6 @@ export default { footer { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue index fe92d54..e08cfc1 100644 --- a/src/views/business/project-apply.vue +++ b/src/views/business/project-apply.vue @@ -2281,7 +2281,6 @@ export default { .project-apply-dialog__footer { display: flex; justify-content: flex-end; - gap: 8px; .project-apply-page-form & { position: fixed; diff --git a/src/views/payment/bill-ledger-form.vue b/src/views/payment/bill-ledger-form.vue index f728435..717c52d 100644 --- a/src/views/payment/bill-ledger-form.vue +++ b/src/views/payment/bill-ledger-form.vue @@ -592,7 +592,6 @@ export default { .bill-ledger-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/bill-payment-form.vue b/src/views/payment/bill-payment-form.vue index 3b867ec..98d4544 100644 --- a/src/views/payment/bill-payment-form.vue +++ b/src/views/payment/bill-payment-form.vue @@ -399,7 +399,6 @@ export default { .bill-payment-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/invoice-application-form.vue b/src/views/payment/invoice-application-form.vue index e7185a1..686cd3d 100644 --- a/src/views/payment/invoice-application-form.vue +++ b/src/views/payment/invoice-application-form.vue @@ -980,7 +980,6 @@ export default { .invoice-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/invoice-receipt-form.vue b/src/views/payment/invoice-receipt-form.vue index 8bfd906..c0b58eb 100644 --- a/src/views/payment/invoice-receipt-form.vue +++ b/src/views/payment/invoice-receipt-form.vue @@ -777,7 +777,6 @@ export default { .receipt-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/payment-application-form.vue b/src/views/payment/payment-application-form.vue index b0f9759..de71c7b 100644 --- a/src/views/payment/payment-application-form.vue +++ b/src/views/payment/payment-application-form.vue @@ -1283,7 +1283,6 @@ export default { .payment-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/receipt-claim-record-form.vue b/src/views/payment/receipt-claim-record-form.vue index 4356540..045748a 100644 --- a/src/views/payment/receipt-claim-record-form.vue +++ b/src/views/payment/receipt-claim-record-form.vue @@ -313,7 +313,6 @@ export default { .claim-record-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/payment/receipt-flow-form.vue b/src/views/payment/receipt-flow-form.vue index 1a9081e..38ce66a 100644 --- a/src/views/payment/receipt-flow-form.vue +++ b/src/views/payment/receipt-flow-form.vue @@ -472,7 +472,6 @@ export default { .receipt-claim-form-page__actions { display: flex; justify-content: flex-end; - gap: 12px; padding: 12px 24px; position: fixed; right: 0; diff --git a/src/views/settlement/components/formal-settlement-editor.vue b/src/views/settlement/components/formal-settlement-editor.vue index 1a82dd2..b7c123c 100644 --- a/src/views/settlement/components/formal-settlement-editor.vue +++ b/src/views/settlement/components/formal-settlement-editor.vue @@ -1548,7 +1548,6 @@ export default { justify-content: flex-end; padding: 12px 24px; border-top: 1px solid #eff1f7; - gap: 12px; position: fixed; right: 0; left: 230px; diff --git a/src/views/settlement/components/pre-settlement-editor.vue b/src/views/settlement/components/pre-settlement-editor.vue index 74cb6b7..b7963a3 100644 --- a/src/views/settlement/components/pre-settlement-editor.vue +++ b/src/views/settlement/components/pre-settlement-editor.vue @@ -1531,7 +1531,6 @@ export default { justify-content: flex-end; padding: 12px 24px; border-top: 1px solid #eff1f7; - gap: 12px; position: fixed; right: 0; left: 230px; diff --git a/src/views/settlement/receivable-payable-detail.vue b/src/views/settlement/receivable-payable-detail.vue index c6efc5c..e5ee539 100644 --- a/src/views/settlement/receivable-payable-detail.vue +++ b/src/views/settlement/receivable-payable-detail.vue @@ -1841,7 +1841,6 @@ export default { display: flex; flex-wrap: wrap; justify-content: center; - gap: 8px; } .settlement-detail-page__pagination { diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue index 5c14df7..ba5b0d4 100644 --- a/src/views/vehicle/customer-archive.vue +++ b/src/views/vehicle/customer-archive.vue @@ -5063,7 +5063,6 @@ export default { .archive-form__footer { display: flex; justify-content: flex-end; - gap: 12px; .archive-page-form & { position: fixed; right: 0;