From 53676a1150a318772de60cd1c674ee710b44fd9d 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, 6 Aug 2026 15:09:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(vehicle):=20=E4=BC=98=E5=8C=96customer?=
 =?UTF-8?q?-archive=E5=BC=B9=E7=AA=97=E7=BB=93=E6=9E=84=E4=B8=8E=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用<section-card>替换旧版灰底分组块与内层白卡，统一表单分组样式
- 删除冗余的基本信息大标题，减少嵌套层级
- 将客商材料和变更记录区域改用<section-card>，操作按钮通过插槽放置卡头右侧
- 清理无效的scoped样式，简化样式管理
- 统一弹窗内部灰底背景并增加16px内边距，与project-apply保持一致
- 确认vue文件与sass编译无误，保证改动稳定性
---
 .workbuddy/memory/2026-08-06.md        |   8 ++
 src/styles/element-ui.scss             |   3 +-
 src/views/vehicle/customer-archive.vue | 105 +++++++------------------
 3 files changed, 39 insertions(+), 77 deletions(-)

diff --git a/.workbuddy/memory/2026-08-06.md b/.workbuddy/memory/2026-08-06.md
index 55fbaf2..25737b8 100644
--- a/.workbuddy/memory/2026-08-06.md
+++ b/.workbuddy/memory/2026-08-06.md
@@ -15,3 +15,11 @@
 - 应用落地：business 模块自定义弹窗——`common-route.vue` 的「选择常用地址」弹窗用 section-card 包成「查询条件/常用地址」两组；`loading-manage.vue` 主弹窗 6 个分区全部改用 `<section-card>`；`common-cargo.vue` 导入弹窗经全局 `.el-dialog .avue-form` 规则自动获得白卡。`project-apply.vue` 本身作为参照未改（其 scoped 样式已符合，全局灰底与其一致）。
 - 验证：`vite build` 失败为仓库既有问题（`waybill-import-dialog.vue` 引入的 `xlsx` 依赖缺失），与本次改动无关；改用 `@vue/compiler-sfc` 编译三个改动 .vue（均 OK）+ sass 编译 `element-ui.scss`（OK）。
 - 注意：其他模块的**自定义弹窗**需按同样方式用 `<section-card>` 包裹各组（灰底已由全局规则自动生效）；如需继续推进其余模块可照此模式批量处理。
+
+## 继续推广：vehicle/customer-archive.vue 弹窗
+- 用户反馈 `/vehicle/customer-archive` 新增客商档案弹窗需与 `/business/project-apply` 一致。
+- 已将该页主弹窗内的表单分组由旧版「灰底分组块 + 内层白卡 + 标题在卡内」全部替换为 `<section-card>`：
+  - 工商信息 / 联系信息 / 财务/信用信息 / 其他信息 四个分组改为 section-card；删除外层浮于灰底的「基本信息」大标题（分组已足够清晰，避免嵌套）。
+  - 客商材料、变更记录两个非表单分区也改用 `<section-card>`，其中客商材料的操作按钮通过 `#extra` 插槽放在卡头右侧。
+- 清理了失效的 `.archive-form__group`、`.customer-material-section`、`.change-record-section`、`.section-title` 等 scoped 样式。
+- 验证：`@vue/compiler-sfc` 编译 `customer-archive.vue` OK；sass 编译 `element-ui.scss` OK；section-card 标签开合平衡。
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 3b681bf..fa9a6f5 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -212,9 +212,10 @@
 // 灰底弹窗体 + 分组白卡（标题融入卡头，4px 主色竖条 + 8px 间距）
 // =====================================================================
 
-// 1) 所有弹窗内容区统一灰底
+// 1) 所有弹窗内容区统一灰底 + 16px 内边距（与 project-apply 一致，避免内容贴边）
 .el-dialog__body {
   background-color: #f5f6fa;
+  padding: 16px;
 }
 
 // 2) Avue 默认弹窗表单自动包成白卡，无需逐页改 option 即统一标准
diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue
index 5396d83..ec044d4 100644
--- a/src/views/vehicle/customer-archive.vue
+++ b/src/views/vehicle/customer-archive.vue
@@ -142,16 +142,14 @@
         :disabled="readonly"
         class="archive-form"
       >
-        <div class="section-title dialog-section-title">基本信息</div>
-        <div class="archive-form__group">
-          <div class="dialog-section-title archive-form__group-title">工商信息</div>
+        <section-card title="工商信息">
           <el-row :gutter="18">
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客商编号" prop="customerCode">
                 <el-input v-model="archiveForm.customerCode" disabled placeholder="保存后自动生成" />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客商性质" prop="customerNature">
                 <el-select v-model="archiveForm.customerNature" filterable clearable>
                   <el-option
@@ -163,7 +161,7 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="统一社会信用代码" prop="unifiedCreditCode">
                 <el-input
                   v-model="archiveForm.unifiedCreditCode"
@@ -177,12 +175,12 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客商名称" prop="fullName">
                 <el-input v-model="archiveForm.fullName" maxlength="100" show-word-limit />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客商类型" prop="customerType">
                 <el-select v-model="archiveForm.customerType" filterable clearable>
                   <el-option
@@ -194,12 +192,12 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="企业法人" prop="legalPerson">
                 <el-input v-model="archiveForm.legalPerson" maxlength="10" show-word-limit />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="经营范围" prop="businessScope">
                 <el-select v-model="archiveForm.businessScope" multiple filterable clearable>
                   <el-option
@@ -211,7 +209,7 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="营业期限" prop="businessEndDate" required>
                 <div class="business-term-field">
                   <el-date-picker
@@ -230,12 +228,12 @@
                 </div>
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="助记码" prop="mnemonicCode">
                 <el-input v-model="archiveForm.mnemonicCode" maxlength="15" show-word-limit />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客户简称" prop="shortName">
                 <el-input v-model="archiveForm.shortName" maxlength="20" show-word-limit />
               </el-form-item>
@@ -262,10 +260,9 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
+        </section-card>
 
-        <div class="archive-form__group">
-          <div class="dialog-section-title archive-form__group-title">联系信息</div>
+        <section-card title="联系信息">
           <el-row :gutter="18">
             <el-col :span="8">
               <el-form-item label="客商负责人" prop="principal">
@@ -294,12 +291,11 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
+        </section-card>
 
-        <div class="archive-form__group">
-          <div class="dialog-section-title archive-form__group-title">财务/信用信息</div>
+        <section-card title="财务/信用信息">
           <el-row :gutter="18">
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="注册资金(万元)" prop="registeredCapital">
                 <el-input
                   v-model="archiveForm.registeredCapital"
@@ -308,7 +304,7 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="开票税点" prop="invoiceTaxRate">
                 <el-input
                   v-model="archiveForm.invoiceTaxRate"
@@ -317,12 +313,12 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="客户等级" prop="customerLevel">
                 <el-input v-model="archiveForm.customerLevel" disabled />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="最大资金使用额度(万元)" prop="maxCreditLimit">
                 <el-input
                   v-model="archiveForm.maxCreditLimit"
@@ -332,7 +328,7 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col :span="6">
+            <el-col :span="8">
               <el-form-item label="申请总资金使用额度(万元)" prop="applyCreditLimit">
                 <el-input
                   v-model="archiveForm.applyCreditLimit"
@@ -342,10 +338,9 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
+        </section-card>
 
-        <div class="archive-form__group">
-          <div class="dialog-section-title archive-form__group-title">其他信息</div>
+        <section-card title="其他信息">
           <el-row :gutter="18">
             <el-col :span="24">
               <el-form-item label="备注" prop="remark">
@@ -358,7 +353,7 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
+        </section-card>
       </el-form>
 
       <el-tabs v-model="activeTab" class="archive-tabs">
@@ -543,9 +538,8 @@
         </el-tab-pane>
       </el-tabs>
 
-      <div class="customer-material-section">
-        <div class="section-head">
-          <div class="section-title dialog-section-title">客商材料</div>
+      <section-card title="客商材料">
+        <template #extra>
           <div v-if="!readonly" class="section-actions">
             <el-button icon="el-icon-download" @click="downloadAttachments">批量下载</el-button>
             <el-button type="primary" icon="el-icon-plus" @click="addAttachment"
@@ -555,7 +549,7 @@
               OCR上传识别
             </el-button>
           </div>
-        </div>
+        </template>
         <el-alert
           type="info"
           :closable="false"
@@ -622,17 +616,16 @@
             </template>
           </el-table-column>
         </el-table>
-      </div>
+      </section-card>
 
-      <div class="change-record-section">
-        <div class="section-title dialog-section-title">变更记录</div>
+      <section-card title="变更记录">
         <el-table :data="archiveForm.changeRecords" border>
           <el-table-column label="序号" type="index" width="90" align="center" />
           <el-table-column label="变更日期" prop="changeTime" min-width="170" />
           <el-table-column label="变更内容" prop="changeContent" min-width="260" />
           <el-table-column label="变更账号" prop="changeUserName" min-width="160" />
         </el-table>
-      </div>
+      </section-card>
 
       <template #footer>
         <el-button @click="archiveBox = false">{{ readonly ? '关闭' : '取消' }}</el-button>
@@ -3300,28 +3293,6 @@ export default {
   }
 }
 
-.archive-form__group {
-  padding: 16px 20px;
-  margin-bottom: 16px;
-  background-color: #f0f2f5;
-  border-radius: 8px;
-
-  .dialog-section-title {
-    margin: 0 0 12px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #303133;
-  }
-
-  // 内层白色卡片：字段区域白底，浮于灰色分组块之上
-  > .el-row {
-    margin: 0;
-    padding: 18px 16px 4px;
-    background-color: #fff;
-    border-radius: 6px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  }
-}
 
 .business-term-field,
 .archive-form__address {
@@ -3355,22 +3326,11 @@ export default {
   }
 }
 
-.section-title {
-  margin: 16px 0 12px;
-  font-size: 18px;
-  font-weight: 700;
-  color: #303133;
-}
-
 .section-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 18px 0 12px;
-
-  .section-title {
-    margin: 0;
-  }
 }
 
 .section-actions {
@@ -3510,13 +3470,6 @@ export default {
   }
 }
 
-.customer-material-section {
-  margin-top: 18px;
-}
-
-.change-record-section {
-  margin-top: 18px;
-}
 
 .score-list-table,
 .contact-table,