feat(customer-archive): 优化客商档案弹窗基本信息分组UI
- 将单一el-row拆分为工商信息、联系信息、财务/信用信息、其他信息四个分组 - 每个分组外层使用灰色背景块,内层字段区为白底卡片,提升视觉层次感 - 字段顺序重新调整,保留全部字段并优化布局,联系信息三项均分一行 - 新增.archive-form__group样式,定义背景色、圆角、内外边距及阴影效果 - 复用全局.dialog-section-title样式作为分组标题样式,保持风格统一 - 确保表单校验正常,vue/compiler-sfc解析无错误,标签闭合平衡 - 在项目长期记忆新增设计约定,明确弹窗字段分组的UI方案及理由
This commit is contained in:
@@ -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);如需可后续追加。
|
||||
|
||||
16
.workbuddy/memory/MEMORY.md
Normal file
16
.workbuddy/memory/MEMORY.md
Normal file
@@ -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。
|
||||
Reference in New Issue
Block a user