b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
53676a1150a318772de60cd1c674ee710b44fd9d
tms-erp-web/.workbuddy/memory/2026-08-06.md
赵忠林 53676a1150 refactor(vehicle): 优化customer-archive弹窗结构与样式 
- 使用<section-card>替换旧版灰底分组块与内层白卡，统一表单分组样式
- 删除冗余的基本信息大标题，减少嵌套层级
- 将客商材料和变更记录区域改用<section-card>，操作按钮通过插槽放置卡头右侧
- 清理无效的scoped样式，简化样式管理
- 统一弹窗内部灰底背景并增加16px内边距，与project-apply保持一致
- 确认vue文件与sass编译无误，保证改动稳定性
2026-08-06 15:09:44 +08:00

3.8 KiB
Raw Blame History

2026-08-06

复盘 src/views/business/project-apply.vue 弹窗 UI 规范

  • 主弹窗为自定义 el-dialog + el-form（非 Avue option 驱动），width 1440px、top 4vh、append-to-body、destroy-on-close。
  • 分区标题复用全局 .dialog-section-title（4px 主色竖条 + 8px 间距）；页面将其改造为「白卡头 + 下方白内容卡」拼合方案（radius 6px + 淡阴影 0 1px 2px rgba(0,0,0,.04)）。
  • 表单：label-position="right" / label-width="auto"；两列 grid（column-gap: 72px）；表单项 margin-bottom 16px；label min-width 160px。
  • 备注类 textarea 整行展示 + 200 字上限 + show-word-limit；金额/天数有非负与范围校验。
  • 底部按钮：非变更弹窗=取消/提交（右对齐）；变更弹窗=提交/保存/关闭（左对齐）。
  • 与设计规范(AGENTS.md)对照：基本符合 4.8 弹窗表单规范；但本页 scoped 用 white-space: normal 覆盖了全局 .el-dialog .el-form-item__label { white-space: nowrap }，允许长标签换行（与全局「label 不换行」取向不同）；两列 grid 统一 min-width 160px，未严格「按列分别计算 label 宽度」。

将 project-apply 弹窗标准推广为「全项目通用标准」

用户要求把 project-apply 弹窗视觉（灰底 + 分组白卡 + 标题在卡内）复制到其他页面。落地方式（已执行）：

  • 新增可复用组件 src/components/section-card/main.vue：白卡 + 标题在卡头（4px 主色竖条 + 8px 间距），支持 title prop 与 #title/#extra slot；已在 src/main.js 全局注册为 <section-card>。
  • 在 src/styles/element-ui.scss 末尾新增全局标准：① .el-dialog__body 统一灰底 #f5f6fa（影响全项目所有弹窗）；② .el-dialog .avue-form 自动包白卡（Avue 默认增删改弹窗无需改 option 即统一）；③ .el-dialog .avue-form__group 分组白卡（option.group 渲染为标题在卡内）；④ 弹窗内 .el-form-item 默认 16px 间距；⑤ .section-card 全局样式；⑥ .form-grid-2 两列栅格工具类（column-gap 72px）。
  • 应用落地：business 模块自定义弹窗——common-route.vue 的「选择常用地址」弹窗用 section-card 包成「查询条件/常用地址」两组；loading-manage.vue 主弹窗 6 个分区全部改用 <section-card>；common-cargo.vue 导入弹窗经全局 .el-dialog .avue-form 规则自动获得白卡。project-apply.vue 本身作为参照未改（其 scoped 样式已符合，全局灰底与其一致）。
  • 验证：vite build 失败为仓库既有问题（waybill-import-dialog.vue 引入的 xlsx 依赖缺失），与本次改动无关；改用 @vue/compiler-sfc 编译三个改动 .vue（均 OK）+ sass 编译 element-ui.scss（OK）。
  • 注意：其他模块的自定义弹窗需按同样方式用 <section-card> 包裹各组（灰底已由全局规则自动生效）；如需继续推进其余模块可照此模式批量处理。

继续推广：vehicle/customer-archive.vue 弹窗

  • 用户反馈 /vehicle/customer-archive 新增客商档案弹窗需与 /business/project-apply 一致。
  • 已将该页主弹窗内的表单分组由旧版「灰底分组块 + 内层白卡 + 标题在卡内」全部替换为 <section-card>：
    • 工商信息 / 联系信息 / 财务/信用信息 / 其他信息 四个分组改为 section-card；删除外层浮于灰底的「基本信息」大标题（分组已足够清晰，避免嵌套）。
    • 客商材料、变更记录两个非表单分区也改用 <section-card>，其中客商材料的操作按钮通过 #extra 插槽放在卡头右侧。
  • 清理了失效的 .archive-form__group、.customer-material-section、.change-record-section、.section-title 等 scoped 样式。
  • 验证：@vue/compiler-sfc 编译 customer-archive.vue OK；sass 编译 element-ui.scss OK；section-card 标签开合平衡。