赵忠林
4d0cc2d595
- 将单一el-row拆分为工商信息、联系信息、财务/信用信息、其他信息四个分组 - 每个分组外层使用灰色背景块，内层字段区为白底卡片，提升视觉层次感 - 字段顺序重新调整，保留全部字段并优化布局，联系信息三项均分一行 - 新增.archive-form__group样式，定义背景色、圆角、内外边距及阴影效果 - 复用全局.dialog-section-title样式作为分组标题样式，保持风格统一 - 确保表单校验正常，vue/compiler-sfc解析无错误，标签闭合平衡 - 在项目长期记忆新增设计约定，明确弹窗字段分组的UI方案及理由
17 lines
1.5 KiB
Markdown
17 lines
1.5 KiB
Markdown
# 项目长期记忆（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。
|