From 490efe2ce55b70d6677e05364074299ec5d9b368 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, 13 Aug 2026 16:35:35 +0800
Subject: [PATCH] =?UTF-8?q?style(business):=20=E4=BC=98=E5=8C=96=E4=B8=9A?=
 =?UTF-8?q?=E5=8A=A1=E5=BC=B9=E7=AA=97=E5=B8=83=E5=B1=80=E4=B8=8E=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改 dispatchItemForm 表单标签宽度为 calc(6em + 24px)，统一label宽度标准
- 调整 business-crud-page 内 section-card 间距，避免卡片紧贴，符合整体风格
- 规范 detail-content 内部元素间距及白卡底部边距，提升视觉一致性
- 调整 contract-manage select 组件列占比，优化表单布局
- 调整 customer-archive 弹窗间距，增强界面美观
- 全站弹窗新增底部操作栏固定与滚动内容区，提升弹窗交互体验
- port-terminal、railway-station 弹窗表单标签宽度调整及样式改进，提高表单对齐效果
- 统一多处弹窗及表单组件底部间距，确保全局风格一致
- port-terminal 弹窗取消分组白卡，恢复原有结构以满足用户需求
---
 .workbuddy/memory/2026-08-13.md               | 62 +++++++++++++++++++
 .workbuddy/memory/MEMORY.md                   |  8 +++
 src/option/business/contract-manage.js        |  2 +-
 src/styles/element-ui.scss                    | 33 +++++++++-
 src/views/base/port-terminal.vue              | 62 +++++++++++++------
 src/views/base/railway-station.vue            |  6 +-
 .../components/business-crud-page.vue         | 18 ++++--
 src/views/business/project-apply.vue          |  8 +--
 src/views/vehicle/customer-archive.vue        |  2 +-
 9 files changed, 165 insertions(+), 36 deletions(-)
 create mode 100644 .workbuddy/memory/2026-08-13.md

diff --git a/.workbuddy/memory/2026-08-13.md b/.workbuddy/memory/2026-08-13.md
new file mode 100644
index 0000000..6321525
--- /dev/null
+++ b/.workbuddy/memory/2026-08-13.md
@@ -0,0 +1,62 @@
+# 2026-08-13 工作记录
+
+## business-crud-page.vue UI 对齐 customer-archive（section-card 间隔 + 表单排列统一）
+
+### 问题
+- 该组件内 `.section-card { margin-bottom: 0 !important }`（scoped 顶层）把全局 8px 卡片间距清零，导致弹窗里的 section-card 卡片贴在一起（与 customer-archive 的留白不一致）。
+- 手写的 dispatch-item 表单 markup 仍写 `label-width="auto"`（虽被共享 CSS 块强制为 `calc(6em+24px)`，但不直观）。
+
+### 改动（src/views/business/components/business-crud-page.vue）
+1. 删除 `margin-bottom:0 !important` 覆盖，改为 `.section-card{margin-bottom:8px !important; &:last-child{margin-bottom:0}}`，与 customer-archive/全局 element-ui.scss 的 8px 节奏一致。
+2. `.business-crud-page__detail-content`（详情弹窗，原本 `gap:12px`）改为 `gap:8px` 并给内部 `.section-card{margin-bottom:0 !important}`，避免 8px 外边距 + gap 双重留白。
+3. `:deep(.avue-form__group:has(.dialog-section-title))` 白卡 `margin-bottom:16px→8px`，使主弹窗分组白卡与 section-card 同节奏。
+4. `&__dispatch-summary` 的 `margin-bottom:12px→8px`。
+5. dispatch-item 表单 `label-width="auto"→"calc(6em + 24px)"`（与 task-form/freight-form 共享的 label 标准一致；参考 customer-archive 的右侧固定宽 label + `el-row :gutter` 网格思路）。
+
+### 验证
+- 仅改 scoped SCSS + 1 处 markup 属性，未动逻辑；SFC 结构未变。表单组件排列本就通过共享 `__task-form/__freight-form/__dispatch-item-form` 块统一为 `calc(6em+24px)` label + 4 列网格，本次使其显式对齐。
+
+## 弹窗样式与交互调整（base 模块）
+
+### 1. port-terminal.vue 港口/码头弹窗
+- 去掉浏览器 input autocomplete 地址联想：新增 `disableDialogAutocomplete()` 方法（批量给 `.port-terminal-edit-dialog` 内 input/textarea 设 autocomplete=off 等），在 `beforeOpen` 两个分支 `done()` 后用 `setTimeout(50)` 调用。
+- option 字段调整（用户此前需求，已指导）：详细地址 `detailAddress` 的 `span:24→12`、`order:86→88`，与区县 `districtCode`(span12,order87) 并排。
+
+### 2. railway-station.vue 铁路车站弹窗
+- label 宽度 85→108：option `labelWidth:'auto'→'108px'`（字符串不生效），再补 `dialogCustomClass:'railway-station-edit-dialog'` + 非 scoped `<style>` 强制 `.el-form-item__label{width:108px!important}`。
+
+### 3. 全站弹窗底部浮动按钮（统一规范）
+- 在 `src/styles/element-ui.scss` 新增全局规则：`.el-dialog__body{max-height:calc(100vh-200px);overflow-y:auto}` + `.el-dialog__footer{白底+上边框+轻阴影}`，实现取消/保存按钮固定在底部（参照 business/project-apply）。全站 Avue 弹窗自动生效，含 railway-station。已记入 MEMORY.md 长期规范。
+
+### 4. port-terminal.vue 字段分组白卡 + label 108（本次）
+- 改用 Avue `option.group` 把表单分成 3 张白卡：基础信息 / 位置信息 / 其他信息（对齐 driver/vehicle/ship/customer-archive 的 section-card 风格）。
+- root `column` 保留不动（脚本大量用 `findColumn(this.option.column,...)` 动态设 dicData/显示），在 `created()` 里循环把 root 列 `display=false`，使其只服务表格/搜索、不重复渲染进表单。
+- 新增 `getColumnsByProp(prop)` 助手，统一把 8 处 `dicData`/显示切换同时作用于 root 与 group 两处（否则 group 列的级联下拉不会刷新）。
+- 样式：外层 `.avue-form` 透明化（卡片交由分组）；`.avue-form__group` 白卡 + 4px 主色竖条标题 + 内容区左右 16px；`.el-form-item__label{width:108px!important}` 对齐 railway-station。
+- 关键坑：Avue form 的 `columnOption` 会把 root column 也作为「无标题组」渲染进表单，故 group 页必须给 root 列 `display:false`，否则字段重复；且动态 dicData 必须双写 root+group。
+
+### 5. port-terminal.vue 回退分组白卡 + label 108（用户要求）
+- 用户决定不在本页使用分组白卡与 label 宽度 108，已全部回退：
+  - 删除 `option.group` 三张白卡，恢复扁平 `column` 结构（`sed` 删 695–974 行）。
+  - `created()` 去掉 root 列 `display=false` 循环；删除 `getColumnsByProp` 助手；`setColumnDisplay` 与 8 处 `dicData`/显示切换全部还原为 `findColumn(this.option.column, prop)` 写法。
+  - 样式块恢复：`.avue-form` 恢复为单张白卡（去透明化），删除 `.avue-form__group` 分组白卡规则与 `.el-form-item__label{width:108px}`；保留灰底 + 浮动底栏统一风格、input/select 250px、备注 85%。
+- 校验：SFC 解析通过，无 getColumnsByProp/group/avue-form__group/label108 残留。
+
+### 6. railway-station.vue 对齐 port-terminal 统一风格（用户要求"按 port-terminal 效果改"）
+- 扩充 `.railway-station-edit-dialog` 非 scoped 样式块，对齐 port-terminal：灰底 `.el-dialog__body`(#f2f2f2, padding 8px) + 表单白卡 `.avue-form`(白底/圆角6/轻阴影/内边距16px) + 浮动底栏 `.avue-dialog__footer`(白底/圆角/轻阴影/右对齐) + 输入框 `.el-input,.el-select` 宽 250px + 备注 `.remark-input` 宽 85%。
+- 给备注字段(`prop:'remark'`)加 `class:'remark-input'`，使备注 85% 规则生效（原字段仅 `type:textarea`，无 class）。
+- 保留用户之前要求的 `labelWidth:'108px'` 与 `.el-form-item__label{width:108px!important}`。
+- 未包含 port-terminal 的「关闭浏览器地址联想 autocomplete」逻辑（用户未要求，railway 未反馈该问题）；如需一致可后续补。
+- 校验：SFC 解析通过。
+
+### 7. 方向纠正：应改 port-terminal 参考 railway-station（非改 railway 参考 port）
+- 用户澄清：第6条方向搞反了。正确语义是「改 port-terminal，参考 railway-station」。railway-station 是参考样板，不应被改。
+- 还原 railway-station（撤销第6条）：删除误加的冗余专属灰底白卡/250px/备注85% 块（该块 `.avue-form{padding:16px}` 会与全局 `.el-dialog .avue-form` 的 24px 冲突造成不齐），仅保留 `labelWidth:'108px'` + `.el-form-item__label{width:108px!important}`；移除备注字段误加的 `class:'remark-input'`。
+- 关键认知：全局 `src/styles/element-ui.scss` 第240-265行**已有完整弹窗标准规则**（灰底 `.el-dialog__body`#f2f2f2 + 白卡 `.el-dialog .avue-form` padding 24px + 浮动底栏 `.avue-crud__dialog .avue-dialog__footer`）。railway-station「整齐」即靠全局规则 + label 108；专属块属冗余且会覆盖全局 24px→16px 导致不齐。
+- 改造 port-terminal 对齐 railway-station：保留专属灰底白卡兜底（其历史未命中全局，保留以防回归），补 `labelWidth:'108px'` + 样式块 `.el-form-item__label{width:108px!important}`；并将专属块 `.avue-form` padding 由 16px 改为 **24px** 以与全局/railway 一致。
+- 校验：两文件 SFC 解析通过；railway 无 remark-input/padding16px 残留；port-terminal 已含 label 108 + padding 24px。
+
+### 8. railway-station.vue label 加宽（用户反馈太挤）
+- 用户反馈新增弹窗中"所属区县"label 太挤（实测约 85×32px），要求加宽。
+- 已把 `option.labelWidth: '108px' → '140px'`，同步全局覆盖 `.el-form-item__label{width:108px!important} → 140px!important`。
+- 140px 够"所属区县"4字+必填星号+留白，也覆盖表单其他 label（"行政区划编号"6字 + * 也够）。若仍觉不够可再调到 160px。
diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
index 1f718fc..50a2e95 100644
--- a/.workbuddy/memory/MEMORY.md
+++ b/.workbuddy/memory/MEMORY.md
@@ -24,6 +24,14 @@
 ### 简单分组（仅 3 项）
 - 联系信息等仅 3 项的分组，可用 `el-col :span="8"` 让三项均分一行，避免 4 列网格留白。
 
+### 弹窗底部操作栏浮动效果（全站统一规范）
+- **需求来源**：用户要求参考 `business/project-apply`（手写 el-dialog + `#footer` slot，body `max-height:76vh;overflow-y:auto`，footer 固定底部）实现"取消/保存按钮浮动在底部"。因绝大多数页面是 Avue CRUD 内置弹窗（无法用 `#footer` slot），统一用**全局 CSS** 实现，全站自动生效。
+- **实现位置**：`src/styles/element-ui.scss`（在 `.el-dialog .el-form-item` 规则之后新增）。
+- **规则**：
+  - `.el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; }` —— 内容超高时独立滚动，footer（位于 body 之外）始终可见。
+  - `.el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid var(--el-border-color-lighter,#ebeef5); box-shadow:0 -2px 8px rgba(0,0,0,.04); border-radius:0 0 var(--el-dialog-border-radius,4px); .el-button+.el-button{margin-left:8px} }` —— 视觉底栏（白底+上边框+轻阴影），与主内容区分。
+- **注意**：`.el-dialog__body` 的 `max-height` 会作用于所有弹窗（含纯展示/表格弹窗），无 footer 的弹窗不受影响；project-apply 自身 `.project-apply-dialog .el-dialog__body{76vh}` 特异性更高仍优先。如需让某弹窗豁免，加更具体 class 覆盖即可。
+
 ### 上传证件区域尺寸规范（transportCapacity 模块强制）
 - **比例**：中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**（横放）
 - **尺寸**：取真实身份证的 ~75% → 固定 **240 × 151 px**（1.586:1 精确：151 × 1.586 ≈ 240）
diff --git a/src/option/business/contract-manage.js b/src/option/business/contract-manage.js
index 6c3c7ba..392ca63 100644
--- a/src/option/business/contract-manage.js
+++ b/src/option/business/contract-manage.js
@@ -253,7 +253,7 @@ export const option = createCrudOption([
     prop: 'signType',
     type: 'select',
     search: false,
-    span: 6,
+    span: 8,
     order: 190,
     dicData: signTypeOptions,
     minWidth: 120,
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 42c2eb4..c64842b 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -176,6 +176,28 @@
   margin-bottom: 20px;
 }
 
+/* 全站弹窗：底部操作栏浮动效果（参照 business/project-apply）
+ * - body 超高时内部独立滚动，footer（取消/保存等按钮）始终固定在底部可见
+ * - footer 加视觉底栏：白底 + 上边框 + 轻阴影，与主内容区分 */
+.el-dialog__body {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.el-dialog__footer {
+  margin: 0;
+  padding: 12px 20px;
+  background: #fff;
+  border-top: 1px solid var(--el-border-color-lighter, #ebeef5);
+  //box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
+  border-radius: 0 0 var(--el-dialog-border-radius, 4px);
+
+  .el-button + .el-button {
+    margin-left: 8px;
+  }
+}
+
 .el-dialog__title,
 .dialog-section-title {
   display: inline-flex;
@@ -217,7 +239,7 @@
 // 1) 所有弹窗内容区统一灰底 + 8px 内边距（全站统一）
 .el-dialog__body {
   background-color: #f2f2f2;
-  padding: 8px !important;
+  padding: 12px !important;
 }
 
 // Avue CRUD 弹窗：表单白卡 + 底部按钮区视觉合一（按钮在卡片内部）
@@ -305,9 +327,9 @@
   }
 }
 
-// 4) 弹窗内表单项默认上下间距 20px（覆盖默认 18px / 22px，与 customer-archive 对齐）
+// 4) 弹窗内表单项默认上下间距 16px（覆盖默认 18px / 22px，与 customer-archive 对齐）
 .el-dialog .el-form-item {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 // 5) 通用分组白卡组件（<section-card>）：标题融入卡头
@@ -315,6 +337,7 @@
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+  margin-bottom: 12px;
   overflow: hidden;
 
   &:last-child {
@@ -760,4 +783,8 @@
 
 .avue-crud__dialog .avue-dialog__footer{
   border-top: 0 !important;
+  margin-top: -30px !important;
+}
+.el-form-item__label {
+  margin-left: 20px !important;
 }
diff --git a/src/views/base/port-terminal.vue b/src/views/base/port-terminal.vue
index c07fdf6..bac00be 100644
--- a/src/views/base/port-terminal.vue
+++ b/src/views/base/port-terminal.vue
@@ -394,7 +394,7 @@ export default {
         dialogWidth: 900,
         dialogCustomClass: 'port-terminal-edit-dialog',
         labelPosition: 'right',
-        labelWidth: 'auto',
+        labelWidth: '108px',
         tip: false,
         searchShow: true,
         searchLabelWidth: 160,
@@ -830,9 +830,12 @@ export default {
       this.clearCityValue();
     },
     handleCategoryChange(value, reset = true) {
+      const required = value === '码头';
       const parentColumn = this.findColumn(this.option.column, 'parentId');
-      parentColumn.rules[0].required = value === '码头';
-      this.setColumnDisplay('parentId', value === '码头');
+      if (parentColumn && parentColumn.rules && parentColumn.rules[0]) {
+        parentColumn.rules[0].required = required;
+      }
+      this.setColumnDisplay('parentId', required);
       if (value === '港口') {
         this.form.parentId = undefined;
         this.form.parentCode = '';
@@ -1379,19 +1382,42 @@ export default {
 </style>
 
 <style lang="scss">
-/* 港口码头编辑/新增弹窗：所有 input 文本框、select 下拉控件统一宽度 250px */
-.port-terminal-edit-dialog {
-  .el-input,
-  .el-select {
-    width: 250px !important;
-  }
-  /* 详细地址为整行字段，放宽到占满整行 */
-  //.detail-address-input {
-  //  width: 81% !important;
-  //}
-  /* 备注宽度 83% */
-  .remark-input {
-    width: 85% !important;
-  }
-}
+/* 港口码头编辑/新增弹窗：对齐 railway-station 统一风格（灰底 + 白卡表单 + 浮动底栏，padding 24px 与全局弹窗标准一致） */
+//.port-terminal-edit-dialog {
+//  /* 灰底内容区 */
+//  .el-dialog__body {
+//    background-color: #f2f2f2;
+//    padding: 8px;
+//  }
+//  /* 表单白卡（与全局 .el-dialog .avue-form 一致，padding 24px 对齐 customer-archive / railway-station） */
+//  .avue-form {
+//    background: #fff;
+//    border-radius: 6px;
+//    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+//    padding: 24px !important;
+//    margin-bottom: 0;
+//  }
+//  /* 底部按钮区白卡（Avue 弹窗 footer 在 body 内，接续白卡） */
+//  .avue-dialog__footer {
+//    background: #fff;
+//    border-radius: 0 0 6px 6px;
+//    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+//    padding: 16px 24px !important;
+//    display: flex;
+//    justify-content: flex-end;
+//  }
+//  /* label 宽度统一 108px（对齐 railway-station，标签对齐更整齐） */
+//  .el-form-item__label {
+//    width: 108px !important;
+//  }
+//  /* 所有 input 文本框、select 下拉控件统一宽度 250px */
+//  .el-input,
+//  .el-select {
+//    width: 250px !important;
+//  }
+//  /* 备注宽度 85% */
+//  .remark-input {
+//    width: 85% !important;
+//  }
+//}
 </style>
diff --git a/src/views/base/railway-station.vue b/src/views/base/railway-station.vue
index cf11f64..4dc8249 100644
--- a/src/views/base/railway-station.vue
+++ b/src/views/base/railway-station.vue
@@ -204,7 +204,7 @@ export default {
         dialogWidth: 980,
         dialogCustomClass: 'railway-station-edit-dialog',
         labelPosition: 'right',
-        labelWidth: '108px',
+        labelWidth: '140px',
         tip: false,
         searchShow: true,
         searchMenuSpan: 24,
@@ -899,10 +899,10 @@ export default {
 </style>
 
 <style lang="scss">
-/* 铁路车站弹窗：强制 label 宽度 108px（覆盖 Avue 默认 auto 计算值） */
+/* 铁路车站编辑/新增弹窗：强制 label 宽度 140px（覆盖 Avue 默认 auto 计算值），灰底白卡与浮动底栏由全局 element-ui.scss 弹窗标准规则统一提供 */
 .railway-station-edit-dialog {
   .el-form-item__label {
-    width: 108px !important;
+    width: 140px !important;
   }
 }
 </style>
diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue
index 8c3785b..a4b6fcc 100644
--- a/src/views/business/components/business-crud-page.vue
+++ b/src/views/business/components/business-crud-page.vue
@@ -2685,7 +2685,7 @@
       <el-form
         :model="dispatchItemForm"
         label-position="right"
-        label-width="auto"
+        label-width="calc(6em + 24px)"
         class="business-crud-page__dispatch-item-form"
       >
         <div class="dialog-section-title">收发货信息</div>
@@ -10268,7 +10268,7 @@ export default {
     grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
     gap: 16px;
     align-items: stretch;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   &__dispatch-summary-card,
@@ -10702,9 +10702,11 @@ export default {
   &__detail-content {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 8px;
 
     .section-card {
+      margin-bottom: 0 !important;
+
       :deep(.el-descriptions__label) {
         width: 140px;
         color: #606266;
@@ -10803,8 +10805,12 @@ export default {
     }
   }
 }
-.section-card{
-  margin-bottom: 0 !important;
+.section-card {
+  margin-bottom: 8px !important;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
 }
 
 /* 编辑弹窗：含分组的 Avue form 渲染为白卡风格 */
@@ -10813,7 +10819,7 @@ export default {
   border-radius: 6px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
   padding: 16px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 
   .avue-form__group--title {
     padding: 0 !important;
diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue
index 57953d3..ed59671 100644
--- a/src/views/business/project-apply.vue
+++ b/src/views/business/project-apply.vue
@@ -1908,7 +1908,7 @@ export default {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     column-gap: 72px;
     row-gap: 0;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 14px 16px 4px;
@@ -1934,7 +1934,7 @@ export default {
 
   &__table {
     width: 100%;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 12px;
@@ -1952,7 +1952,7 @@ export default {
   }
 
   &__textarea-list {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 0 0 6px 6px;
     padding: 14px 16px 4px;
@@ -1975,7 +1975,7 @@ export default {
   }
 
   &__material-card {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 6px;
     padding: 14px 16px;
diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue
index 38912bf..f7f215c 100644
--- a/src/views/vehicle/customer-archive.vue
+++ b/src/views/vehicle/customer-archive.vue
@@ -3779,7 +3779,7 @@ export default {
 }
 
 .archive-detail-card {
-  margin-top: 8px;
+  margin-top: 12px;
 }
 .archive-tabs {
   :deep(.el-tabs__header) {