From 5aefa23f50a600ea73242dd6a011bf11719c7fb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Fri, 7 Aug 2026 12:47:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(system):=20=E4=BF=AE=E5=A4=8D=E9=83=A8?=
 =?UTF-8?q?=E9=97=A8=E7=AE=A1=E7=90=86=E6=93=8D=E4=BD=9C=E5=88=97=E9=94=99?=
 =?UTF-8?q?=E4=BD=8D=E9=97=AE=E9=A2=98=E5=B9=B6=E7=BB=9F=E4=B8=80=E5=AE=A2?=
 =?UTF-8?q?=E5=95=86=E6=A1=A3=E6=A1=88=E5=BC=B9=E7=AA=97=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复/system/dept页面操作列竖排错位问题，通过提升CSS选择器特异性并强制inline-flex布局
- 在department页面添加scoped样式，双保险保证操作列横排显示及间距正确
- 将客商档案/vehicle/customer-archive中的表单分组和弹窗内容统一改为section-card组件风格
- 清理废弃旧样式类，提升界面一致性及可维护性
- 调整相关弹窗中卡片内容结构，消除双层灰色背景，使弹窗风格与/business/project-apply一致
- 对评分、联系人、收款信息、发票信息、客商材料、变更记录和证明材料等模块使用全局section-card组件包裹
- 优化样式细节，确保按钮组进入卡头右侧，保证操作体验一致
- 验证构建成功及热更新生效，提醒用户发布需清除旧CSS缓存
---
 .workbuddy/memory/2026-08-07.md               |  20 ++
 src/styles/element-ui.scss                    |   6 +-
 src/views/system/dept.vue                     |  19 ++
 .../vehicle/credit-score-quantification.vue   |   4 +-
 src/views/vehicle/customer-archive.vue        | 200 ++++++------------
 5 files changed, 106 insertions(+), 143 deletions(-)

diff --git a/.workbuddy/memory/2026-08-07.md b/.workbuddy/memory/2026-08-07.md
index 7880418..a36c356 100644
--- a/.workbuddy/memory/2026-08-07.md
+++ b/.workbuddy/memory/2026-08-07.md
@@ -88,3 +88,23 @@
     - 共享工厂函数 `createCrudOption` 新增 `showOverflowTooltip: true`，覆盖 business 模块通过该工厂生成的所有 CRUD option。
 - 覆盖范围：全站所有表格可见文本列（含 Avue 与手写 el-table），`type="selection"` 选择列由 Element Plus 自动豁免；操作列通过 CSS 豁免不被影响。
 - 验证：`npm run build` 成功（exit code 0）；构建日志中 CSS `*` 告警来自第三方库压缩，与本次无关（历史既有）。
+
+## 修复 /system/dept 操作栏错位（链接竖排）
+- 现象：用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
+- 根因：Avue 自带默认样式 `.avue-crud .avue-crud__menu{display:block}`（特异性 0,2,0）与项目全局覆盖样式选择器完全相同；项目原规则虽带 `!important`，但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时，`.avue-crud__menu` 退化成 block，导致内部按钮/链接竖排。
+- 修复：
+  - `src/styles/element-ui.scss`：把 `.avue-crud .avue-crud__menu` 改为重复类名 `.avue-crud .avue-crud__menu.avue-crud__menu`（特异性升到 0,3,0），并新增 `width: 100% !important` 让操作列容器占满单元格、左对齐横排更稳。
+  - `src/views/system/dept.vue`：scoped 样式新增 `:deep(.avue-crud__menu)` 兜底（inline-flex + gap 8px + 子元素 inline-flex），双保险确保本页操作列横排。
+- 验证：dev server 已热更新，curl 确认两处编译结果均含 `display: inline-flex !important`；构建需用户硬刷新浏览器清旧 CSS 缓存。
+
+## 客商档案 /vehicle/customer-archive 弹窗风格统一为 section-card
+- 需求：用户截图反馈弹窗有「双层灰色背景」，且「工商信息」等标题没有放到卡片里面；要求改成和 `/business/project-apply` 一致的白卡风格。
+- 根因：原页面主表单使用 `.archive-form__group` 灰色容器，内部再包一层白色 `.el-row` 卡片，标题坐在灰色背景上，形成外层 dialog body 灰 + 分组灰的「双层灰」；客商材料、变更记录、评分材料、发票/邮寄信息也沿用旧的分节标题样式。
+- 改动：`src/views/vehicle/customer-archive.vue`
+  - 主表单 4 个分组改为 `<section-card title="工商信息 / 联系信息 / 财务/信用信息 / 其他信息">` 全局白卡组件，删除外层「基本信息」大标题。
+  - 评分/联系人/收款/发票 4 个 Tab 内容改为 `<section-card>` + `<template #extra>`，按钮组进入卡头右侧。
+  - 客商材料改为 `<section-card title="客商材料" #extra>`，变更记录改为 `<section-card title="变更记录">`。
+  - 发票信息弹窗的「发票信息 / 邮寄信息」改为两张 `<section-card>`。
+  - 评分详情弹窗的「证明材料」改为 `<section-card title="证明材料" class="score-material-card">`。
+  - 清理不再使用的样式：`.archive-form__group`、`.section-title`、`.section-head`、`.customer-material-section`、`.change-record-section`、`.invoice-form__section-title`、`.score-material-section` 等。
+- 验证：`npm run build` 成功（exit code 0）。
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 749a220..4c79cf3 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -550,12 +550,16 @@
 }
 
 // 全站统一：Avue 操作列文字链接保持间距并支持自动换行
-.avue-crud .avue-crud__menu {
+// 注意：Avue 自带 .avue-crud .avue-crud__menu{display:block}（特异性同为 0,2,0）。
+// 此处重复类名升至 0,3,0 并强制 display:inline-flex !important，彻底压过 Avue 内置样式，
+// 避免 dev 模式下 CSS 注入顺序导致 .avue-crud__menu 退化成 block 而让操作项竖排错位。
+.avue-crud .avue-crud__menu.avue-crud__menu {
   display: inline-flex !important;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
   justify-content: start;
+  width: 100% !important;
   text-align: left;
 }
 
diff --git a/src/views/system/dept.vue b/src/views/system/dept.vue
index 86a82d3..9c0cd38 100644
--- a/src/views/system/dept.vue
+++ b/src/views/system/dept.vue
@@ -729,4 +729,23 @@ export default {
   justify-content: flex-end;
   margin-top: 12px;
 }
+
+/* 操作列兜底：确保「查看 / 编辑 / 删除 / 新增子项」横向排列并保留 8px 间距，
+   避免退化成 block 导致操作项竖排错位。全局样式已统一处理，此处为双保险。 */
+:deep(.avue-crud__menu) {
+  display: inline-flex !important;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  text-align: left;
+
+  > .el-button,
+  > .el-link,
+  > .el-dropdown {
+    flex-shrink: 0;
+    display: inline-flex;
+  }
+}
 </style>
diff --git a/src/views/vehicle/credit-score-quantification.vue b/src/views/vehicle/credit-score-quantification.vue
index f49ab0c..1a1dd77 100644
--- a/src/views/vehicle/credit-score-quantification.vue
+++ b/src/views/vehicle/credit-score-quantification.vue
@@ -1022,8 +1022,8 @@ export default {
 }
 
 .base-form {
-  max-width: 1080px;
-  margin: 10px auto 28px;
+  max-width: 60%;
+  padding: 24px;
 }
 
 .section-head {
diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue
index fc194a3..edcc999 100644
--- a/src/views/vehicle/customer-archive.vue
+++ b/src/views/vehicle/customer-archive.vue
@@ -151,9 +151,7 @@
         :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-form-item label="客商编号" prop="customerCode">
@@ -297,10 +295,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">
@@ -329,10 +326,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="6">
               <el-form-item label="注册资金(万元)" prop="registeredCapital">
@@ -377,10 +373,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">
@@ -393,18 +388,18 @@
               </el-form-item>
             </el-col>
           </el-row>
-        </div>
+        </section-card>
       </el-form>
 
       <el-tabs v-model="activeTab" class="archive-tabs">
         <el-tab-pane label="评分表" name="scores">
-          <div class="section-head">
-            <span></span>
-            <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="addScore">
-              添加评分记录
-            </el-button>
-          </div>
-          <el-table :data="scoreTableData" border class="score-list-table">
+          <section-card>
+            <template #extra>
+              <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="addScore">
+                添加评分记录
+              </el-button>
+            </template>
+            <el-table :data="scoreTableData" border class="score-list-table">
             <el-table-column label="序号" width="90" align="center">
               <template #default="{ row }">
                 <span>{{ row.__index }}</span>
@@ -470,15 +465,16 @@
             @size-change="handleScoreSizeChange"
             @current-change="handleScoreCurrentChange"
           />
+          </section-card>
         </el-tab-pane>
         <el-tab-pane label="联系人" name="contacts">
-          <div class="section-head">
-            <span></span>
-            <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openContact()">
-              新增联系人
-            </el-button>
-          </div>
-          <el-table :data="contactTableData" border class="contact-table">
+          <section-card>
+            <template #extra>
+              <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openContact()">
+                新增联系人
+              </el-button>
+            </template>
+            <el-table :data="contactTableData" border class="contact-table">
             <el-table-column label="序号" prop="__index" width="90" align="center" />
             <el-table-column label="联系人姓名" prop="contactName" min-width="150" />
             <el-table-column label="联系人电话" prop="contactPhone" min-width="150" />
@@ -509,15 +505,16 @@
             @size-change="size => handleDetailSizeChange('contact', size)"
             @current-change="page => handleDetailCurrentChange('contact', page)"
           />
+          </section-card>
         </el-tab-pane>
         <el-tab-pane label="收款信息" name="receiptAccounts">
-          <div class="section-head">
-            <span></span>
-            <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openReceipt()">
-              新增收款信息
-            </el-button>
-          </div>
-          <el-table :data="receiptTableData" border class="receipt-table">
+          <section-card>
+            <template #extra>
+              <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openReceipt()">
+                新增收款信息
+              </el-button>
+            </template>
+            <el-table :data="receiptTableData" border class="receipt-table">
             <el-table-column label="序号" prop="__index" width="90" align="center" />
             <el-table-column label="收款单位名称" prop="accountName" min-width="180" />
             <el-table-column label="开户人姓名" prop="accountHolderName" min-width="150" />
@@ -539,15 +536,16 @@
             @size-change="size => handleDetailSizeChange('receipt', size)"
             @current-change="page => handleDetailCurrentChange('receipt', page)"
           />
+          </section-card>
         </el-tab-pane>
         <el-tab-pane label="发票信息" name="invoices">
-          <div class="section-head">
-            <span></span>
-            <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openInvoice()">
-              新增发票信息
-            </el-button>
-          </div>
-          <el-table :data="invoiceTableData" border class="invoice-table">
+          <section-card>
+            <template #extra>
+              <el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openInvoice()">
+                新增发票信息
+              </el-button>
+            </template>
+            <el-table :data="invoiceTableData" border class="invoice-table">
             <el-table-column label="序号" prop="__index" width="90" align="center" />
             <el-table-column label="收票方名称" prop="invoiceTitle" min-width="180" />
             <el-table-column label="纳税人识别号" prop="taxNo" min-width="180" />
@@ -575,12 +573,12 @@
             @size-change="size => handleDetailSizeChange('invoice', size)"
             @current-change="page => handleDetailCurrentChange('invoice', page)"
           />
+          </section-card>
         </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"
@@ -590,7 +588,7 @@
               OCR上传识别
             </el-button>
           </div>
-        </div>
+        </template>
         <el-alert
           type="info"
           :closable="false"
@@ -657,17 +655,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>
@@ -838,8 +835,8 @@
         label-width="120px"
         class="invoice-form"
       >
-        <div class="invoice-form__section-title">发票信息</div>
-        <el-row :gutter="34">
+        <section-card title="发票信息">
+          <el-row :gutter="34">
           <el-col :span="12">
             <el-form-item label="纳税人识别号" prop="taxNo">
               <el-input v-model="invoiceForm.taxNo" maxlength="30" />
@@ -887,8 +884,10 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <div class="invoice-form__section-title">邮寄信息</div>
-        <el-row :gutter="34">
+        </section-card>
+
+        <section-card title="邮寄信息">
+          <el-row :gutter="34">
           <el-col :span="12">
             <el-form-item label="收件人姓名" prop="receiverName">
               <el-input v-model="invoiceForm.receiverName" maxlength="30" />
@@ -917,6 +916,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        </section-card>
       </el-form>
       <template #footer>
         <div class="invoice-dialog__footer-actions">
@@ -1105,9 +1105,8 @@
         </el-table-column>
       </el-table>
 
-      <div class="score-material-section">
-        <div class="score-material-section__head">
-          <div class="dialog-section-title">证明材料</div>
+      <section-card title="证明材料" class="score-material-card">
+        <template #extra>
           <vehicle-attachment-upload
             v-if="!readonly"
             v-model="scoreAttachmentFiles"
@@ -1116,7 +1115,7 @@
             :show-tip="false"
             @success="handleScoreAttachmentUploadSuccess"
           />
-        </div>
+        </template>
         <el-table :data="scoreAttachmentFiles" border class="score-material-table">
           <el-table-column label="序号" type="index" width="90" align="center" />
           <el-table-column label="文件名" prop="name" min-width="220" />
@@ -1144,7 +1143,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </div>
+      </section-card>
 
       <template #footer>
         <el-button type="primary" v-if="!readonly" @click="saveScoreDetail">保存</el-button>
@@ -3471,30 +3470,7 @@ 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,
+business-term-field,
 .archive-form__address {
   display: flex;
   align-items: center;
@@ -3526,24 +3502,6 @@ 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 {
   display: flex;
   flex-wrap: wrap;
@@ -3681,13 +3639,7 @@ export default {
   }
 }
 
-.customer-material-section {
-  margin-top: 18px;
-}
-
-.change-record-section {
-  margin-top: 18px;
-}
+// 客商材料、变更记录已改用全局 <section-card> 组件，无需额外 margin-top
 
 .score-list-table,
 .contact-table,
@@ -3714,25 +3666,6 @@ export default {
 
 .invoice-form {
   max-width: none;
-
-  &__section-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    margin: 8px 0 20px;
-    font-size: 16px;
-    font-weight: 700;
-    color: #303133;
-
-    &::before,
-    &::after {
-      flex: 1;
-      height: 1px;
-      content: '';
-      background-color: #dcdfe6;
-    }
-  }
 }
 
 .contact-form__address {
@@ -3843,20 +3776,7 @@ export default {
   }
 }
 
-.score-material-section {
-  margin: 26px 36px 0;
-}
-
-.score-material-section__head {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin-bottom: 16px;
-
-  .dialog-section-title {
-    margin: 0;
-  }
-
+.score-material-card {
   :deep(.vehicle-attachment-upload) {
     width: auto;
   }