style(customer-archive): 修复表单长 label 换行并优化弹窗布局

- 加固 .archive-form label 换行，实现长文字自动折行且右对齐，确保输入框宽度稳定
- 修复 Element Plus 2.14 中 label 高度锁定问题，改为 height auto 和合理行高
- 弹窗表单项上下间距由 16px 缩减至 8px，添加错误信息完整显示，避免遮挡
- 调整客商档案联系信息分组为四列布局，保留最后一列空白占位
- 客商档案工商信息表单项实现 label 与控件垂直居中对齐，提升视觉一致性
- 增加输入控件宽度至 250px，保持表单整体布局协调
- 全局 .el-dialog 背景色微调为更浅灰色，内边距改为 8px，统一弹窗样式

.workbuddy/memory/2026-08-11.md

@@ -10,3 +10,50 @@
 - `<style scoped>` 中 `.archive-form` 新增 label 规则：固定 `width:96px` + `padding-right:12px` + `white-space:normal` + `text-align:right` + `overflow:visible`，使长 label（如"统一社会信用代码"）自动折行。
 
 注意：`.score-detail-form` 已有独立 `.el-form-item__label` 规则，与本次改动无关，未触碰。
+
+## .archive-form label 换行稳定性加固
+用户反馈长 label 仍挤压 input，要求 input 宽度固定、label 超长换行（参考截图效果）。
+- 强化 `.archive-form :deep(.el-form-item__label)`：`width: 96px !important` + `flex-shrink: 0` + `word-break/overflow-wrap: break-word`，移除无效的 `overflow:visible/text-overflow/display:inline-block`。
+- `.el-form-item` 移除 `overflow:hidden`（避免裁剪多行 label）。
+- `.el-form-item__content` 移除 `overflow:hidden`，保留 `flex:1; min-width:0`，确保 input 稳定占满剩余宽度且不被压缩。
+- 核心机制：label 固定宽 + flex-shrink:0 ⇄ content flex:1，二者互斥分配宽度，input 宽度恒定。
+
+## ★ Element Plus 2.14 label 换行真正根因（之前没修对）
+看了 `node_modules/element-plus/theme-chalk/el-form-item.css` 才确认：
+```
+.el-form-item__label{...height:32px;line-height:32px;display:inline-flex}
+.el-form-item--default .el-form-item__label{height:32px;line-height:32px}
+```
+Element Plus 把 label 锁死成 32px 高 + 32px 行高，**只够放一行**。光设 `white-space:normal; word-break:break-word` 没用，第二行会被 32px 高度裁掉（且 inline-flex 内容溢出可见，但父 form-item 高度还是被撑不开、看起来被吃掉了）。
+
+**正确修复**（`customer-archive.vue` `.archive-form`，可推广到所有 el-form 弹窗）：
+```scss
+:deep(.el-form-item__label) {
+  width: 96px !important;
+  height: auto !important;        // ★ 关键
+  line-height: 1.5 !important;    // ★ 关键
+  padding-right: 12px;
+  white-space: normal;
+  text-align: right;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  flex: 0 0 96px;                 // 显式三段式最稳
+}
+:deep(.el-form-item) { align-items: flex-start; }  // 多行 label 时控件顶部对齐
+```
+这套改完，96px 固定的 label 才能真正「最大资金使用额度(万元)」「申请总资金使用额度(万元)」这种 11 字段自动折两行，右对齐、input 宽度不变。
+
+## 弹窗表单项间距 16px → 8px（element-ui.scss 全局）
+用户要求把弹窗内表单项上下间距从 16px 收紧到 8px，但担心压缩后红色校验错误文字被下一个 item 遮挡。
+- 根因：Element Plus `.el-form-item__error` 默认 `position:absolute` 脱离文档流，16px 刚好够放下错误文字；压到 8px 后错误区超出占位被遮挡。
+- 修复（只改 `src/styles/element-ui.scss` 全局样式，影响所有 `.el-dialog` 表单）：
+  - 两处 `.el-dialog .el-form-item { margin-bottom:16px }`（约 171 行、271 行）→ `8px`。
+  - 新增 `.el-dialog .el-form-item__error { position:relative; margin-top:2px; line-height:1.2 }`，让错误文字正常占高度、不再被遮挡。
+- 副作用：有校验错误时该 item 高度会被错误文字撑开，同一行相邻列可能轻微错位，属可接受的常规表单体验。无错误时保持 8px 紧凑。
+- 备注：`customer-archive.vue` 内 `.receipt-form`/`.invoice-form` 子表单各自 scoped 写死 16px（发票/收票子表，非主表单），本次未动；若需统一收紧再说。
+
+## 客商档案弹窗布局微调（截图标注）
+用户新截图两处标注，均在 `customer-archive.vue`：
+1. **联系信息分组**：原三个字段 `:span="8"`（各 1/3，铺满整行）。改为 4 列布局——三个字段 `:span="6"` + 末尾补一个空 `<el-col :span="6"></el-col>` 占位（第4列留空，不铺满）。
+2. **工商信息「上下居中对齐」**：在 `.archive-form` scoped 样式内新增 `:deep(.el-form-item){ align-items:center }`，显式锁定每个 form-item 的 label 与控件垂直居中对齐（之前无 flex-start 覆盖，默认本就 center，现在显式声明更稳妥）。
+- 潜在提醒：工商信息内长 label「统一社会信用代码」仍按之前需求折两行，会让同一 el-row 内该列 form-item 比相邻单行 label 列高约 2px，输入控件垂直方向略有错位。若用户要的是「同行所有输入框严格水平对齐」，需让长 label 单行不折行（nowrap）或把长 label 字段单独成行——待用户确认。

src/styles/element-ui.scss

@@ -217,7 +217,7 @@
 
 // 1) 所有弹窗内容区统一灰底 + 16px 内边距（与 project-apply 一致，避免内容贴边）
 .el-dialog__body {
-  background-color: #f3f3f3;
+  background-color: #f2f2f2;
   padding: 8px;
 }
 

src/views/vehicle/customer-archive.vue

@@ -241,7 +241,7 @@
                 prop="businessEndDate"
                 :required="archiveForm.businessTermType === '固定期限'"
               >
-                <div class="business-term-field">
+                <div class="business-term-field" style="display: flex;">
                   <el-date-picker
                     v-model="archiveForm.businessEndDate"
                     type="date"
@@ -299,17 +299,17 @@
 
         <section-card title="联系信息">
           <el-row :gutter="18">
-            <el-col :span="8">
+            <el-col :span="6">
               <el-form-item label="客商负责人" prop="principal">
                 <el-input v-model="archiveForm.principal" maxlength="10" show-word-limit />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-form-item label="联系电话" prop="contactPhone">
                 <el-input v-model="archiveForm.contactPhone" maxlength="20" />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-form-item label="所属组织" prop="deptName">
                 <el-tree-select
                   v-model="archiveForm.deptId"
@@ -325,6 +325,7 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="6"></el-col>
           </el-row>
         </section-card>
 
@@ -3702,19 +3703,23 @@ export default {
     flex: 0 0 calc(6em + 24px) !important;
     width: calc(6em + 24px) !important;
     height: auto;
-    min-height: 32px;
     white-space: normal !important;
     word-break: break-all;
     overflow-wrap: anywhere;
     line-height: 18px;
   }
 
+  // 锁定表单项 label 与控件垂直居中对齐（避免长 label 折行时视觉错位）
+  :deep(.el-form-item) {
+    align-items: center;
+  }
+
   :deep(.el-form-item__content > .el-input),
   :deep(.el-form-item__content > .el-select),
   :deep(.el-form-item__content > .el-cascader),
   :deep(.el-form-item__content > .el-input-number),
   :deep(.el-form-item__content > .el-date-editor) {
-    width: 220px;
+    width: 250px;
     max-width: 100%;
   }
 
@@ -3730,8 +3735,8 @@ business-term-field,
 
 .business-term-field {
   :deep(.el-date-editor) {
-    flex: 0 0 220px;
-    width: 220px;
+    flex: 0 0 250px;
+    width: 250px;
     min-width: 0;
   }
 
@@ -3744,13 +3749,13 @@ business-term-field,
 .archive-form__address {
   :deep(.el-input),
   :deep(.el-cascader) {
-    flex: 0 0 220px;
-    width: 220px;
+    flex: 0 0 250px;
+    width: 250px;
     min-width: 0;
   }
 
   :deep(.el-cascader) {
-    flex-basis: 220px;
+    flex-basis: 250px;
   }
 }