feat(customer-archive): 优化客商档案弹窗基本信息分组UI

- 将单一el-row拆分为工商信息、联系信息、财务/信用信息、其他信息四个分组
- 每个分组外层使用灰色背景块,内层字段区为白底卡片,提升视觉层次感
- 字段顺序重新调整,保留全部字段并优化布局,联系信息三项均分一行
- 新增.archive-form__group样式,定义背景色、圆角、内外边距及阴影效果
- 复用全局.dialog-section-title样式作为分组标题样式,保持风格统一
- 确保表单校验正常,vue/compiler-sfc解析无错误,标签闭合平衡
- 在项目长期记忆新增设计约定,明确弹窗字段分组的UI方案及理由
This commit is contained in:
2026-08-05 18:05:07 +08:00
parent f6451643e8
commit 4d0cc2d595
3 changed files with 266 additions and 193 deletions

View File

@@ -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如需可后续追加。