赵忠林
8a262d9d41
- 新增全局弹窗灰底背景色，提升视觉一致性 - 新增通用分组白卡组件 section-card，标题融入卡头，支持额外插槽 - 统一 Avue 弹窗表单及分组为白卡样式 - 调整 common-route.vue 弹窗，使用 section-card 分组包裹查询条件与常用地址 - 改造 loading-manage.vue 弹窗所有分区，采用 section-card 统一风格 - 全局样式调整弹窗内容区表单项间距及两列表单布局工具类 - 在 main.js 全局注册 section-card 组件，便于项目统一复用
2.9 KiB
2.9 KiB
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 间距），支持titleprop 与#title/#extraslot；已在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>包裹各组（灰底已由全局规则自动生效）；如需继续推进其余模块可照此模式批量处理。