style(ui): 统一底部操作栏按钮间距,取消所有gap样式

- 移除各底部操作栏(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纯文字规则
This commit is contained in:
2026-08-27 11:39:13 +08:00
parent 2acdcb08a9
commit c9f673342a
18 changed files with 12 additions and 18 deletions
+8
View File
@@ -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 等其它模块的底部栏也纳入,需再处理。
+1 -1
View File
@@ -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 {
+1 -1
View File
@@ -194,7 +194,7 @@
border-radius: 0 0 var(--el-dialog-border-radius, 4px);
.el-button + .el-button {
margin-left: 8px;
margin-left: 12px;
}
}
@@ -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;
@@ -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; } }
@@ -2050,7 +2050,6 @@ export default {
footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 12px 24px;
position: fixed;
right: 0;
-1
View File
@@ -2281,7 +2281,6 @@ export default {
.project-apply-dialog__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
.project-apply-page-form & {
position: fixed;
-1
View File
@@ -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;
-1
View File
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
-1
View File
@@ -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;
@@ -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;
@@ -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;
@@ -1841,7 +1841,6 @@ export default {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.settlement-detail-page__pagination {
-1
View File
@@ -5063,7 +5063,6 @@ export default {
.archive-form__footer {
display: flex;
justify-content: flex-end;
gap: 12px;
.archive-page-form & {
position: fixed;
right: 0;