b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
ef417a02908566f998354c2db600cb0f5430d207
tms-erp-web/.workbuddy/memory/MEMORY.md
赵忠林 4d0cc2d595 feat(customer-archive): 优化客商档案弹窗基本信息分组UI 
- 将单一el-row拆分为工商信息、联系信息、财务/信用信息、其他信息四个分组
- 每个分组外层使用灰色背景块，内层字段区为白底卡片，提升视觉层次感
- 字段顺序重新调整，保留全部字段并优化布局，联系信息三项均分一行
- 新增.archive-form__group样式，定义背景色、圆角、内外边距及阴影效果
- 复用全局.dialog-section-title样式作为分组标题样式，保持风格统一
- 确保表单校验正常，vue/compiler-sfc解析无错误，标签闭合平衡
- 在项目长期记忆新增设计约定，明确弹窗字段分组的UI方案及理由
2026-08-05 18:05:07 +08:00

1.5 KiB
Raw Blame History

项目长期记忆（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。