From 4d0cc2d5959a8790f8a73ebf26aeb5ba6515a782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Wed, 5 Aug 2026 18:05:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(customer-archive):=20=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E5=AE=A2=E5=95=86=E6=A1=A3=E6=A1=88=E5=BC=B9=E7=AA=97=E5=9F=BA?=
=?UTF-8?q?=E6=9C=AC=E4=BF=A1=E6=81=AF=E5=88=86=E7=BB=84UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 将单一el-row拆分为工商信息、联系信息、财务/信用信息、其他信息四个分组
- 每个分组外层使用灰色背景块，内层字段区为白底卡片，提升视觉层次感
- 字段顺序重新调整，保留全部字段并优化布局，联系信息三项均分一行
- 新增.archive-form__group样式，定义背景色、圆角、内外边距及阴影效果
- 复用全局.dialog-section-title样式作为分组标题样式，保持风格统一
- 确保表单校验正常，vue/compiler-sfc解析无错误，标签闭合平衡
- 在项目长期记忆新增设计约定，明确弹窗字段分组的UI方案及理由
---
.workbuddy/memory/2026-08-05.md | 10 +
.workbuddy/memory/MEMORY.md | 16 +
src/views/vehicle/customer-archive.vue | 433 ++++++++++++++-----------
3 files changed, 266 insertions(+), 193 deletions(-)
create mode 100644 .workbuddy/memory/MEMORY.md
diff --git a/.workbuddy/memory/2026-08-05.md b/.workbuddy/memory/2026-08-05.md
index ab7071e..01544fd 100644
--- a/.workbuddy/memory/2026-08-05.md
+++ b/.workbuddy/memory/2026-08-05.md
@@ -18,3 +18,13 @@
- 移除「第N行：」前缀；
- 失败原因编号从 `A. B. C.` 改为 `1. 2. 3.`；
- 备注超长兜底提示也同步使用数字编号。
+
+## UI 优化：客商档案弹窗「基本信息」分组（vehicle/customer-archive.vue）
+
+- 背景：原弹窗「基本信息」是一整块 `el-row` 平铺 20 个字段，信息密度过高。
+- 方案（与用户确认）：采用「分区标题平铺 + 浅色背景块」而非嵌套卡片（契合 AGENTS.md 去卡片化哲学；全局 `.dialog-section-title` 已自带 4px 主色竖条）。
+- 改动：
+ - 模板：将单一 `el-row` 拆分为 4 个 `.archive-form__group`：工商信息 / 联系信息(3项 span=8) / 财务·信用信息 / 其他信息(备注 span=24)；字段顺序重组但全部保留，地址、备注保持 span=24。
+ - 样式：新增 `.archive-form__group`（#fafafa 背景、8px 圆角、16px/20px 内边距、组间距 16px），子标题复用 `.dialog-section-title`（14px/500）。
+- 校验：@vue/compiler-sfc 解析 0 错误；标签闭合平衡。
+- 注：此前讨论中提及的「Tab 内容加内边距」「材料区标题竖条」未纳入本次（材料区已用 dialog-section-title）；如需可后续追加。
diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
new file mode 100644
index 0000000..188f057
--- /dev/null
+++ b/.workbuddy/memory/MEMORY.md
@@ -0,0 +1,16 @@
+# 项目长期记忆（tms-erp-web-ws / Saber3 客商模块）
+
+## 设计约定（经用户确认的决策）
+- 弹窗内多字段表单分组：**「灰色分组块 + 白色内层卡片」双色方案**（用户最终确认）。
+ - 外层 `.archive-form__group`：灰底 `#f0f2f5` + 8px 圆角 + `16px 20px` 内边距，分组标题（`.dialog-section-title`，自带 4px 主色竖条）浮于灰底上。
+ - 内层字段区：直接把分组内唯一的 `> .el-row` 设为白底（`#fff` + 6px 圆角 + 极淡阴影 `0 1px 2px rgba(0,0,0,.04)` + `18px 16px 4px` 内边距），形成「白卡片浮于灰底」的层次，而非逐个输入框强制白底。
+ - 理由：契合 AGENTS.md「去卡片化」哲学（不嵌套 `el-card`），同时用户明确要灰底+白内容对比，全局 `.dialog-section-title` 直接复用即可。
+ - 适用：新增/编辑弹窗中字段超过 ~10 个、需按业务语义分组时。
+- 联系信息等仅 3 项的分组，可用 `el-col :span="8"` 让三项均分一行，避免 4 列网格留白。
+
+## 关键文件
+- 客商档案弹窗：`src/views/vehicle/customer-archive.vue`（手写 `el-form`，非 Avue option 驱动；分组结构见 `.archive-form__group`）。
+- 全局弹窗分区标题规范：`src/styles/element-ui.scss` 的 `.dialog-section-title`。
+
+## 环境注意
+- Vite 代理跨域：Saber3 axios 开 `withCredentials=true`，直连绝对地址后端须让 CORS `Allow-Origin` 为具体域名（不能用 `*`），否则浏览器拒绝。改 `.env`/`vite.config.mjs` 必须重启 dev。
diff --git a/src/views/vehicle/customer-archive.vue b/src/views/vehicle/customer-archive.vue
index f8d05ee..cf8e80d 100644
--- a/src/views/vehicle/customer-archive.vue
+++ b/src/views/vehicle/customer-archive.vue
@@ -143,201 +143,222 @@
class="archive-form"
>
基本信息
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 无固定期限
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
@@ -3279,6 +3300,29 @@ 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 {
display: flex;
@@ -3624,6 +3668,9 @@ export default {
width: 100%;
}
+.archive-dialog{
+ background-color: #ff0000;
+}
:deep(.archive-dialog .el-dialog__body) {
max-height: 72vh;
overflow: auto;